一份全面的、可行的圖標自檢手冊，幫助在大家改版、面試等場景進行自檢優(yōu)化，大綱如下：圖標的用途是幫助用戶理解信息，所以“識別性”就是圖標最重要、最底層的價值，如果你設(shè)計一個圖標，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言！識別性可以分為兩個方面，一是含義識別，二是視覺識別。含義識別就是你的圖標能不能被理解，在做騰訊動漫閱讀頁的時候，工具欄頂部新增一個圖標是詳情頁入口，最開始做的效果如下:
發(fā)現(xiàn)有些人以為它是目錄頁，有些人則根本不知道什么意思，這就屬于在含義識別層出現(xiàn)了問題。由于這個圖標沒有文案搭配使用，所以在含義識別上一定要重視，最后的方案就是采用一個詳字來進行設(shè)計，既滿足了識別，又滿足了統(tǒng)一的形式:
其實這種提取含義本身的文案來進行設(shè)計是常用的提高含義識別性的手法，尤其是在圖標獨立出現(xiàn)的時候。
視覺識別與圖標含義無關(guān)，主要是視覺層面阻礙用戶識別的因素。明度特別接近的顏色不能用在一起，比如檸檬黃和白色，如果白色圖標放在了檸檬黃的底色上，白色就很容易看不清楚，而且特別晃眼：這里引入一個國外的測試結(jié)果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經(jīng)過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數(shù)據(jù)分成四組進行雙向方差分析，在相同的統(tǒng)計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會很弱，如下圖：
所以在這樣的理論與數(shù)據(jù)的支撐下，去年我對部分圖標進行了如下改版：
有底色的圖標全部從線性改成面性，如改不成面性（例如時鐘）需要適當(dāng)加粗描邊，目的就是提高視覺識別性。在圖標設(shè)計前，我們一定要注意圖標的使用場景，有時候我們設(shè)計的圖標，做設(shè)計稿的時候沒什么問題，但是一放到真實場景中就會發(fā)現(xiàn)很多問題比如下面這組底部圖標：
做設(shè)計的時候并沒有什么問題，但最后唯一被挑戰(zhàn)的就是，當(dāng)把圖標縮小放在底部標簽欄的時候會不會過于密集而導(dǎo)致復(fù)雜？而這種復(fù)雜就很有可能造成圖標的視覺識別。再比如下面這組圖標也都存在相同的問題：
所以在圖標尺寸較小的時候，一定要保證圖標的簡潔，否則就會影響識別。切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！在圖標改版的時候，我們最常說到的就是圖標的統(tǒng)一性問題，對于統(tǒng)一性我們可以從那些方面入手，我整理了以下6點，我們依次來看。圓角大小的統(tǒng)一，雖然經(jīng)常掛在嘴邊，但有時候還是容易被忽略，比如下面這組圖標：
并沒有完成圓角的統(tǒng)一性，比如免費圖標的圓角明顯小于其他兩個，后面被人提到，才糾正了這個細節(jié)：
在做一組同等大小的圖標時，并不容易發(fā)生描邊粗細不一致的情況，比如我們很少會把其中三個做成4px，而其中一個做成2px：
這種錯誤，我覺得優(yōu)秀的你，應(yīng)該不會犯。但是有些時候在做一套擁有不同尺寸的圖標時，我們必須要根據(jù)圖標大小來調(diào)整描邊粗細，使整體看起來統(tǒng)一和諧，大家一定要注意。眾所周知，物理尺寸同等的方形要比圓形大，所以我們要在乎的是視覺感官上的大小統(tǒng)一，而不是物理尺寸，所以我們在做輔助線規(guī)范的時候會有圓形、方向、橫向矩形、縱向矩形：
其實目的就是能夠更加靈活的調(diào)整圖標大小，使其在視覺重量上保持統(tǒng)一。如果你的圖標是有描邊且斷線的，一定要注意這兩個細節(jié)，一個是描邊尾部的方與圓：
另一個就是斷線的距離，一定要做到統(tǒng)一，這個很容易被忽略：
角度，也是增加圖標統(tǒng)一感的因素之一，最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范，比如30度的倍數(shù)：
再舉一個角度其他方面的例子，在做下面這組圖標的時候，最初沒有考慮斷線的規(guī)律：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角45度，如遇到圓角拐角處，可挪動靠近拐角處進行斷線：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角45度，如遇到圓角拐角處，可挪動靠近拐角處進行斷線：
很大程度上提高了圖標的統(tǒng)一性，并且在延展執(zhí)行的時候節(jié)省了大量的思考時間（思考在哪里斷）。但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統(tǒng)一和諧，且延展性高。正負空間比例很容被忽略，以前我也很少講過，不過我覺得很實用，如下圖，很明顯白色所占比例不同，導(dǎo)致圖標一致性就會有問題：
當(dāng)比例調(diào)整后，統(tǒng)一性就會加強很多：
以上就是關(guān)于統(tǒng)一緯度的所有總結(jié)，做到統(tǒng)一雖然不會讓圖標加分太多，但是做不到統(tǒng)一，可能就還不算及格，所以定要重視起來。能夠讓圖標耐看的因素有很多，以我目前的認知，主要有以下四點：很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。如何判斷圖標是否飽滿呢？我常用的衡量方法就是在圖標上面加一個矩形，看圖標的正形的面積是否還可以增加。例如下圖，藍色是正形，紅色是負形：
很明顯藍色的正形面積是可以增加的，例如：
這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。舉個真實的例子，我們原版的續(xù)看圖標是上下結(jié)構(gòu)，而上面部門的圖形太窄，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：
于是我對圖標的結(jié)構(gòu)進行了調(diào)整，盡可能的減少綠色部分，最后達到了下圖這樣的效果：
后提醒大家，對于圖標的飽滿度，還需要結(jié)合整套圖標的視覺效果來進行調(diào)試，雖然上面這個方法可以解決大部門圖標的飽滿問題，但還是要具體場景具體分析。很多時候我們會發(fā)現(xiàn)自己的做的圖標有些死板、發(fā)悶，其實很多時候就是透氣感沒做好。什么是透氣？我們經(jīng)常會說頁面不夠透氣，沒有呼吸感，其實無非就是留白做的不好，圖標也是一樣的，比如下面這組面形圖形：
看起來就很悶，如果我們給它加一扇窗，也就是加入白色之后：
這樣整體就會透氣很多，但是這種透氣做的并不是很好，圖標外形和里面融入的白色形狀都有些雷同，這樣就會導(dǎo)致圖標看起來沒有變化的細節(jié)。所以我們需要在透氣的基礎(chǔ)上再融入一些變化，比如前一陣子幫霖霖做的6個圖標，其中有三個我覺得還可以，就是因為體現(xiàn)了這種有變化的透氣感，不論是正形還是負形都有很大的變化（不過當(dāng)時要的很急，只做了兩個小時就給他了，不然還能更好些）：
對于耐看這一塊，我覺得應(yīng)該會有很多知識點，不過目前我能總結(jié)出來的只有這兩點，后面會繼續(xù)挖掘。風(fēng)格包含兩方面內(nèi)容，一個是屬性表達，一個是形式表達。屬性表達就是圖標的骨骼基調(diào)，比如圓角大小、線條粗細等，可以根據(jù)行業(yè)屬于及用戶人群來進行判斷，比如商務(wù)行業(yè)和動漫行業(yè)就完全不同的屬性，商務(wù)行業(yè)可以偏方正嚴肅一些，而動漫行業(yè)可以偏圓潤一些（當(dāng)然也不絕對，只要有因有果即可）；再比如男性和女性，老人和小孩都有不同的屬性表達。比如同一種黑白線稿的形式表達，不同的圓角大小就會給人不同的感覺：
左側(cè)就會偏嚴肅一些，右側(cè)就會偏可愛一些。所以千萬不要小看前期的屬性表達，它可以幫助你確定大的骨骼基調(diào)。確定了基礎(chǔ)的屬性之后，就是填充形式的時候了：
至于形式的種類實在是太多了，但一定要有理有據(jù)，符合產(chǎn)品整體想表達的感覺。有人羅列過很全面的形式種類，有興趣可以網(wǎng)上查一查，這里就不在贅述了。我想講的重點是我們?nèi)绾翁崛〕橄蟮娘L(fēng)格，然后用在我們自己的設(shè)計上，比如波洞的這組圖標：
風(fēng)格就是在下面這組圖標的基礎(chǔ)上的二次原創(chuàng)，比如加入紋理、IP形象等等：
設(shè)計師在這中間需要提取風(fēng)格的關(guān)鍵要素，然后結(jié)合產(chǎn)品需求來進行創(chuàng)作設(shè)計。下面再來一個實例，比如看下面這套谷歌的圖標：
我們就可以在它的風(fēng)格上提取出以下要素：
有了這兩個要素之后，就可以根據(jù)具體需求來進行創(chuàng)作設(shè)計了，下面兩組圖標就是這么來的：
這就是對已有風(fēng)格的一種提取及二次加工，也是我常用的一種圖標設(shè)計方法，希望能夠幫助到大家。隨著設(shè)計越來越同質(zhì)化，品牌感逐漸被大家所重視，對于品牌這一塊，以前寫過很多相關(guān)文章，這里再簡單歸類一下。顏色是最容易體現(xiàn)品牌感的元素，所以圖標上經(jīng)常會結(jié)合品牌色來進行設(shè)計:
圖形可以取自logo、吉祥物等等，比如首頁圖標就經(jīng)常使用到logo本身：
再比如MONO的標簽欄圖標，設(shè)計的非常大膽，提取logo上面的4個字母——M、O、N、O后，直接將其作為圖標，如下圖：
但是這種方法還是有很大的風(fēng)險，因為畢竟每個字母與功能本身的含義沒什么聯(lián)系，如果不是非常個性化的app，謹慎使用！如果你的產(chǎn)品有品牌形象，那一定要把用起來，比如騰訊動漫的黑子，就可以進行結(jié)合使用：
特性就是提取一些氣質(zhì)或者特征，例如斷線、圓潤、尖銳等等，屬于比較抽象的元素。比如去年在優(yōu)化圖標的時候，發(fā)現(xiàn)騰訊動漫logo上字體筆畫比較粗，整體給人一種厚重飽滿的感覺：
因此我們可以在品牌logo中提取“粗胖飽滿”的品牌基因，在這樣的背景下就不用再糾結(jié)圖標使用2px描邊還是3px的描邊了：
我們可以很確定的使用3px描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。
