大家都知道UI設(shè)計(jì)師每天重點(diǎn)陪伴對(duì)象就是圖標(biāo),而圖標(biāo)設(shè)計(jì)與制作都是有非常嚴(yán)謹(jǐn)?shù)囊?guī)范的。今天分享6個(gè)非常實(shí)用的Ui圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)小技巧。
首先統(tǒng)一小圖標(biāo)的色彩
-
圖標(biāo)所傳遞的諸多信息當(dāng)中,色彩是最為直觀的一種。將不同來源的小圖標(biāo)先在色彩上統(tǒng)一起來,比如使用同一種顏色。當(dāng)然,如果有相對(duì)統(tǒng)一的配色方案,可以稍加調(diào)整,讓配色統(tǒng)一起來也行。
統(tǒng)一小圖標(biāo)的整體風(fēng)格
-
是擬物化還是扁平化?是按照 105 的標(biāo)準(zhǔn)還是依據(jù) Material Design 的規(guī)格來做?你來定風(fēng)格,但是必須統(tǒng)一到同一風(fēng)格語言以內(nèi)。不同的風(fēng)格在細(xì)節(jié)處理上各有一套方法,尤其要注意這些地方。
注意小圖標(biāo)的視角和透視
-
哪怕風(fēng)格整體上統(tǒng)一了,依然會(huì)有地方讓人感覺不舒服,那么有可能不同圖標(biāo)的視角和透視并不統(tǒng)一。上圖中,圖標(biāo)風(fēng)格是統(tǒng)一的,但是放在透視圖中會(huì)發(fā)現(xiàn)它們所處的位置和視角各不相同,這違反了圖標(biāo)設(shè)計(jì)的一致性原則。
統(tǒng)一小圖標(biāo)陰影的效果
-
在陰影的設(shè)計(jì)上,也應(yīng)當(dāng)保持一致。這兩個(gè)圖標(biāo)源自同一套圖標(biāo),但是看起來卻只有一個(gè)圖標(biāo)被太陽照到了。光的方向同樣很重要。因此,想要讓圖標(biāo)保持一致,最好是讓圖標(biāo)在光照角度上也保持著一致。
平衡每個(gè)小圖標(biāo)的視覺重量
-
圖標(biāo)給人的大小、密度和重量感,就是我們常說的視覺重量。而在同一套小圖標(biāo)當(dāng)中,每個(gè)圖標(biāo)的視覺重量應(yīng)該保持一個(gè)非常接近的程度。判斷視覺重量最便捷的辦法是瞇眼斜視,模糊的視線下倒是可以很快判斷。
在細(xì)節(jié)上尋求統(tǒng)一
-
特征在小圖標(biāo)中加入統(tǒng)一的細(xì)節(jié)特征,比如在特定的位置使用完全相同的元素,這能夠讓人更快地感知到圖標(biāo)之間的關(guān)聯(lián)。當(dāng)然,圖標(biāo)和圖標(biāo)之間,細(xì)節(jié)的數(shù)量大體上保持相同。