2021-4-16 周周
圖標(biāo)是 UI 設(shè)計(jì)中最基礎(chǔ)也是很重要的部分,輔助人們更好的理解功能內(nèi)容。隨著扁平化設(shè)計(jì)風(fēng)格的普及,圖標(biāo)的風(fēng)格越來越簡(jiǎn)約,看似簡(jiǎn)單的圖形,實(shí)際要準(zhǔn)確的表達(dá)含義,也是需要注意一些方法的。以下是圖標(biāo)設(shè)計(jì)技巧的分享內(nèi)容:
設(shè)計(jì)圖標(biāo)是一個(gè)藝術(shù)創(chuàng)作的過程,里面也有很多需要被關(guān)注而不可忽視技巧。要知道如何設(shè)計(jì)好圖標(biāo),是對(duì)于 UI 設(shè)計(jì)師來說是不可或缺的重要技能。
在我設(shè)計(jì)圖標(biāo)的時(shí)候,我個(gè)人認(rèn)為有以下7個(gè)規(guī)則:
一個(gè)圖標(biāo)一個(gè)非寫實(shí)的表現(xiàn)。不需要擔(dān)心圖標(biāo)不夠真實(shí),消除不必要的細(xì)節(jié),用基本的形狀只保留最基礎(chǔ)的部分,讓這個(gè)圖標(biāo)更容易被理解。
有時(shí)候圖標(biāo)會(huì)因?yàn)橛懈嗉?xì)節(jié)而傳達(dá)了更復(fù)雜的意思,這反而是樣式問題!
在整個(gè)圖標(biāo)系統(tǒng)中,你的圖標(biāo)要保持同一種樣式來確保圖標(biāo)完美協(xié)調(diào)。比如同樣的形狀,填充,描邊粗細(xì),尺寸等。要制定好可以被復(fù)用的柵格,規(guī)范和樣式。
如果可以的話,盡可能重新設(shè)計(jì)這些圖標(biāo),而不要混入其他不同風(fēng)格的圖標(biāo)來使用。
設(shè)計(jì)「完美像素」的圖標(biāo),特別是在圖標(biāo)非常小的時(shí)候。這樣圖標(biāo)的描邊就可以保持銳利,不會(huì)有模糊。注意半像素的情況出現(xiàn),盡量避免小數(shù)點(diǎn)參數(shù)。
這也可以幫你保持圖標(biāo)的辨識(shí)度,在你等比縮放他們的時(shí)候保持清晰。
確保你的圖標(biāo)的所有形狀有足夠的空間。筆畫和空間過于狹小會(huì)使圖標(biāo)更難被理解。
最少給2px的負(fù)空間
確保你的圖標(biāo)看起來是正確的,適當(dāng)?shù)恼{(diào)整元素的對(duì)齊來達(dá)到視覺上的平衡。
不要只關(guān)注參數(shù),如果有需要就用上你的眼睛來衡量,輕微移動(dòng)這些元素。
所有圖標(biāo)保持同樣的尺寸,在圖標(biāo)周圍定義一個(gè)可調(diào)整的內(nèi)邊距范圍,盡量讓元素設(shè)計(jì)在這個(gè)范圍內(nèi)。不要擠滿所有元素。
當(dāng)圖標(biāo)需要額外控件時(shí)可以超出這個(gè)內(nèi)邊距范圍。
在設(shè)計(jì)階段,你的圖標(biāo)可能看起來是完美的,但還是需要將圖標(biāo)放到實(shí)際的界面環(huán)境中,測(cè)試他們是不是完美,有沒有可以調(diào)整的細(xì)節(jié)問題。
確保每個(gè)新增的圖標(biāo)和其他圖標(biāo)顯示一致。
你在設(shè)計(jì)圖標(biāo)過程中,有用到以上的這些技巧嗎?可以在評(píng)論區(qū)告訴我,你是怎么怎么設(shè)計(jì)圖標(biāo)的。
文章來源:優(yōu)設(shè)網(wǎng) 作者:布萊恩臣
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com