是的(de)核心內容之(zhi)一(yi)(yi)，通過設計網(wang)頁實現網(wang)頁組(zu)合稱為一(yi)(yi)個(ge)網(wang)站(zhan)，以小見(jian)大的(de)組(zu)合成網(wang)站(zhan)從而(er)整體提升用戶體驗，那么(me)在設計網(wang)頁過程匯總經常會用到的(de)是統一(yi)(yi)性的(de)圖(tu)標(biao)，比如(ru)“編輯”、“設置”、“用戶中心”、“頭(tou)像標(biao)志(zhi)”、“搜索”等不同的(de)風格(ge)，那么(me)對于設計師而(er)言(yan)統一(yi)(yi)化的(de)圖(tu)標(biao)就顯得(de)很重要了。

圖(tu)標(biao)對于(yu)設(she)計(ji)師而言應該算是很小的問(wen)題了，一般(ban)通過免費網(wang)(wang)站上的圖(tu)標(biao)下載即可實現(xian)網(wang)(wang)站的整體規劃設(she)計(ji)，然(ran)而某些特定(ding)的圖(tu)標(biao)則需要找到合(he)適的主題才能(neng)夠凸顯(xian)出(chu)設(she)計(ji)的風格。

從網(wang)絡(luo)上各(ge)色圖(tu)標(biao)(biao)來看，網(wang)站(zhan)和APP不同之處就是設(she)(she)計(ji)上的愉(yu)悅性，整(zheng)體效果上用(yong)以凸顯出設(she)(she)計(ji)風格(ge)，從而有效的表現出一個(ge)網(wang)站(zhan)的與眾不同，那(nei)么設(she)(she)計(ji)圖(tu)標(biao)(biao)過程中應該注意(yi)到以下問(wen)題：

一、色彩

圖標(biao)所傳(chuan)遞的(de)諸(zhu)多信(xin)息當中(zhong)，色(se)彩是最為直觀(guan)的(de)一種。將(jiang)不同(tong)(tong)來源(yuan)的(de)圖標(biao)先在色(se)彩上統(tong)一起來，比如使用同(tong)(tong)一種顏色(se)。

雖然說使用單一(yi)色(se)彩很便捷，不過(guo)你如果(guo)能運用現有(you)的(de)配(pei)色(se)方案來進行圖(tu)標的(de)色(se)彩統一(yi)，效果(guo)就更好了：

如果你(ni)真的(de)(de)喜歡你(ni)所找到的(de)(de)圖(tu)標，但是(shi)(shi)它們的(de)(de)色彩(cai)又不一樣，可以先(xian)自(zi)己調整，或者找一位(wei)專(zhuan)業(ye)的(de)(de)圖(tu)標設計師來幫你(ni)。值得(de)注意的(de)(de)是(shi)(shi)，絕大多(duo)數(shu)素材(cai)的(de)(de)分享授權(quan)許可證是(shi)(shi)包含編(bian)輯授權(quan)的(de)(de)，你(ni)可以更(geng)改色彩(cai)和尺寸。

二、風格

擬物(wu)(wu)化(hua)(hua)和(he)(he)扁(bian)平化(hua)(hua)設(she)(she)計之(zhi)間的斗爭已經(jing)持續多年了(le)，目前來(lai)看扁(bian)平化(hua)(hua)設(she)(she)計是(shi)(shi)主流，但(dan)是(shi)(shi)我并不知道(dao)這種局(ju)面還會持續多久，因為如(ru)今的扁(bian)平化(hua)(hua)設(she)(she)計當中就(jiu)包含了(le)不少擬物(wu)(wu)化(hua)(hua)的設(she)(she)計技巧(qiao)和(he)(he)元素(su)。在未來(lai)的5到10年會流行什么，就(jiu)很(hen)難說(shuo)了(le)。時尚和(he)(he)流行就(jiu)是(shi)(shi)這樣。

我所(suo)知(zhi)道的是，你必須(xu)挑選一種風格(ge)。要么扁平，要么擬物。

將(jiang)扁平(ping)化和擬物的設計風(feng)格混搭到一起，必然(ran)會導致(zhi)界面(mian)的雜亂(luan)無章。

不(bu)過，在(zai)(zai)(zai)大的(de)(de)風(feng)(feng)(feng)格(ge)(ge)(ge)設定之下(xia)，設計師依然有足夠多的(de)(de)選(xuan)擇。比如在(zai)(zai)(zai)扁(bian)平化(hua)的(de)(de)設計風(feng)(feng)(feng)格(ge)(ge)(ge)當中，iOS 的(de)(de) Apple Human Guideline 和 Google 所推動的(de)(de) Material Design 都是非常典(dian)型的(de)(de)扁(bian)平化(hua)設計風(feng)(feng)(feng)格(ge)(ge)(ge)設計規范，兩(liang)者(zhe)在(zai)(zai)(zai)細節和風(feng)(feng)(feng)格(ge)(ge)(ge)的(de)(de)把控(kong)上(shang)都非常的(de)(de)嚴格(ge)(ge)(ge)，甚至具體到每(mei)一條線(xian)的(de)(de)粗(cu)細：

基于那些專門為(wei)特定操作系(xi)統所定制(zhi)的(de)(de)(de)、系(xi)統化的(de)(de)(de)圖(tu)標來設(she)(she)計(ji)(ji)(ji)新的(de)(de)(de)圖(tu)標，其實是最可靠的(de)(de)(de)辦法(fa)。這(zhe)些被廣大設(she)(she)計(ji)(ji)(ji)師所接(jie)受的(de)(de)(de)設(she)(she)計(ji)(ji)(ji)規范，在日常設(she)(she)計(ji)(ji)(ji)中指引著許多設(she)(she)計(ji)(ji)(ji)師的(de)(de)(de)工作。

因此，在色彩和風格(ge)上保(bao)持(chi)一(yi)(yi)致(zhi)是(shi)最重要(yao)的(de)。此外，還有一(yi)(yi)些(xie)微妙而(er)(er)值得注意的(de)細(xi)節，需要(yao)設計(ji)師(shi)特別上心。因為(wei)這些(xie)圖標的(de)設計(ji)已(yi)經(jing)趨于經(jing)典(dian)，而(er)(er)重度用戶和經(jing)驗豐富的(de)設計(ji)師(shi)，能(neng)夠(gou)一(yi)(yi)眼就(jiu)分辨(bian)出不(bu)(bu)夠(gou)貼合(he)的(de)圖標細(xi)節。所以，設計(ji)師(shi)常常能(neng)夠(gou)聽到這樣(yang)的(de)反饋(kui)：「我也不(bu)(bu)知道哪里不(bu)(bu)對，就(jiu)是(shi)覺得不(bu)(bu)對。」

三、透視和視角

下(xia)面的5個圖標(biao)，同樣都是采(cai)用的擬(ni)物(wu)化的風格，為了(le)統一，我細微調整了(le)一下(xia)它們的色彩，看起來(lai)更加一致。但是不管怎么調整，它們看起來(lai)就(jiu)像是5個完全不同的應用程(cheng)序的圖標(biao)（事實上它們就(jiu)是）。

如(ru)果(guo)，按照(zhao)透視(shi)圖將這5個圖標放置(zhi)進去，就可以(yi)清晰地看(kan)到，它們所處的(de)視(shi)角和(he)位置(zhi)是截然不(bu)同的(de)。

它們分散在透視(shi)圖的不同位置，明顯是不一(yi)致的，而這(zhe)一(yi)點則完全違反了(le)圖標設計的一(yi)致性。

圖標(biao)應(ying)該(gai)看起(qi)來就是(shi)整個(ge)界面的一部(bu)分，它(ta)們之間的關(guan)系是(shi)平等(deng)的，在(zai)視覺(jue)和感知上應(ying)該(gai)保(bao)持著同等(deng)的關(guan)系。

四、陰影

在陰影(ying)的(de)設計上(shang)，圖標之間也(ye)應該保(bao)持這種一致性。看(kan)(kan)看(kan)(kan)下面的(de)兩個圖標吧：

這兩個圖(tu)標源自同一套圖(tu)標，但是看起來卻只有一個圖(tu)標被太陽照到了。光的方(fang)向同樣(yang)很(hen)重要(yao)。因此，想要(yao)讓(rang)(rang)圖(tu)標保持一致(zhi)，最好是讓(rang)(rang)圖(tu)標在光照角度上也保持著(zhu)一致(zhi)。

小貼士(shi)：雖然(ran)陰(yin)影多數情況下被(bei)認(ren)為是擬物化(hua)設(she)(she)計中(zhong)才會用到(dao)的(de)(de)，但是實際上(shang)，包(bao)括 Material Design 在內的(de)(de)扁平化(hua)設(she)(she)計風(feng)格中(zhong)也會用到(dao)陰(yin)影。所以(yi)原(yuan)則上(shang)，它是泛用的(de)(de)，設(she)(she)計師需(xu)要保持(chi)設(she)(she)計上(shang)的(de)(de)一致。

五、視覺重量

圖(tu)標給人的(de)大(da)小、密(mi)度和(he)重(zhong)量感，就是我們(men)常(chang)說的(de)視覺(jue)重(zhong)量。而(er)在同一套圖(tu)標當中，圖(tu)標的(de)視覺(jue)重(zhong)量應該(gai)保持(chi)一個非常(chang)接近的(de)程度。

看看下面兩個圖標：

當(dang)你瞇起眼睛(jing)感知這(zhe)兩(liang)個圖標所形成的色(se)塊的時候，就能夠(gou)更加明顯(xian)的對比(bi)兩(liang)者的視覺重(zhong)量了(le)：

差異確實非常的大。這個例(li)子看起(qi)來非常極端(duan)，所(suo)以我們再繼(ji)續找點別的案例(li)來進行(xing)對比：

就視覺重量(liang)而言，上面的一組明顯是不(bu)平衡的，你(ni)只需要瞇眼斜視就可以很快判斷出(chu)來。

六、細節

魔鬼藏于細節(jie)。但是細節(jie)中所(suo)藏的魔鬼類型(xing)還是非常多樣的，這個(ge)主題我(wo)們不妨展開了來說(shuo)。

1. 重復的元素

有的(de)(de)時候(hou)，設計師會加(jia)入(ru)了一(yi)些一(yi)致的(de)(de)、重(zhong)復的(de)(de)元素(su)，來(lai)確保圖標看(kan)起來(lai)足夠(gou)獨特。

重(zhong)復(fu)(fu)的(de)元素，重(zhong)點在于(yu)重(zhong)復(fu)(fu)的(de)一(yi)致性(xing)。

2. 細節的數量

另外一(yi)(yi)種(zhong)(zhong)情況，則(ze)是細節數(shu)量上的(de)不一(yi)(yi)致。這種(zhong)(zhong)不一(yi)(yi)致會(hui)(hui)擾(rao)亂(luan)整(zheng)體的(de)一(yi)(yi)致性，簡而(er)言之，就是這組(zu)圖(tu)標應該(gai)在(zai)復雜度上保持均衡(heng)，否(fou)則(ze)，用(yong)戶將(jiang)會(hui)(hui)因為混亂(luan)而(er)難以(yi)判(pan)斷各個(ge)圖(tu)標的(de)屬性。

結語

正(zheng)如同我(wo)剛開始所說的(de)，想要(yao)將不同的(de)圖標納(na)入到(dao)一個系統當中來，設計(ji)師(shi)(shi)主要(yao)的(de)工作目標就(jiu)是確保(bao)一致性。經驗豐富的(de)設計(ji)師(shi)(shi)會從各個角度和屬(shu)性上來針對圖標進(jin)行優(you)化，今天(tian)的(de)文章已經將潛在(zai)的(de)、需要(yao)關注的(de)問題都梳理(li)出來了(le)，圖標的(de)設計(ji)工作做好了(le)，界面的(de)設計(ji)才(cai)會更加順(shun)暢。