最近在做圖標(biāo)的優(yōu)化調(diào)整，雖然改動(dòng)不大肌索，但在復(fù)盤的時(shí)候還是總結(jié)出很多心得缸废，在這里和大家分享一下。
圖標(biāo)是界面設(shè)計(jì)中最重要的元素之一驶社，也是我們UI設(shè)計(jì)師必備的技能企量，日常工作中我們經(jīng)常會(huì)接到含有圖標(biāo)設(shè)計(jì)、優(yōu)化的需求亡电。但到底什么樣的圖標(biāo)才算是優(yōu)秀的届巩？也許很多設(shè)計(jì)師并沒有太完整的評判體系，只是憑感覺份乒，這樣就會(huì)造成輸出效果不穩(wěn)定恕汇、耗時(shí)太長等不良的后果腕唧。
所以借著這次機(jī)會(huì)我梳理了一套圖標(biāo)設(shè)計(jì)自檢的評判體系，一共五個(gè)維度瘾英，大綱如下：
1.識(shí)別
2.性格
3.品牌
4.飽滿
5.細(xì)節(jié)
1.識(shí)別
評判事物的價(jià)值在于它的用途是什么枣接！
圖標(biāo)的用途是幫助用戶理解信息，所以“識(shí)別性”就是圖標(biāo)最重要缺谴、最底層的價(jià)值但惶，如果你設(shè)計(jì)一個(gè)圖標(biāo)，用戶看不懂湿蛔，即使視覺再美觀膀曾，也是無根之木，沒有任何價(jià)值可言阳啥！
識(shí)別性可以分為兩個(gè)方面添谊，一是含義識(shí)別，二是視覺識(shí)別察迟。
先說含義識(shí)別：簡單來說就是你的圖標(biāo)能不能被理解斩狱，當(dāng)然并不是設(shè)計(jì)師自己能理解就ok，而是需要用戶來決定扎瓶，這里和大家分享一個(gè)我判斷圖標(biāo)是否易識(shí)別的方法——內(nèi)部用戶調(diào)研法所踊，說白了就是隨機(jī)問一些團(tuán)隊(duì)內(nèi)部人員，最好多問幾種崗位栗弟，這樣得來的結(jié)果更加可靠，案例如下：
我在改版“話題”這個(gè)圖標(biāo)的時(shí)候工闺，想到了微博的“#”乍赫，于是把“#”和氣泡框結(jié)合到了一起，如下圖：
這時(shí)我找來10個(gè)內(nèi)部人員進(jìn)行測試陆蟆，只有3個(gè)能看懂圖標(biāo)的意思（這3個(gè)人都是平時(shí)經(jīng)常玩微博的）雷厂，在這樣的數(shù)據(jù)之下，不用猶豫叠殷，這個(gè)方案一定是不可取的改鲫。
在進(jìn)行調(diào)研時(shí)，最少要保證80%的人能看懂林束，才證明你的方案是可行的像棘。
再來說視覺識(shí)別：顧名思義這一點(diǎn)已經(jīng)與圖標(biāo)含義無關(guān)，而是視覺層面的問題壶冒，例如大小缕题、底色等等阻礙用戶識(shí)別的因素。
這里引入一個(gè)國外的測試結(jié)果胖腾，是我在一位前輩的文章中看到的烟零，測驗(yàn)包括一組四種樣式的圖標(biāo)：白底黑色實(shí)心圖標(biāo)瘪松，白底黑色空心圖標(biāo)，黑底白色實(shí)心圖標(biāo)锨阿，黑底白色空心圖標(biāo)宵睦，經(jīng)過10天的時(shí)間，1260名參與者總共完成了超過25000次圖標(biāo)的認(rèn)知測試墅诡。將得出的數(shù)據(jù)分成四組進(jìn)行雙向方差分析壳嚎，在相同的統(tǒng)計(jì)條件下，選擇黑底白色空心圖標(biāo)要比其他三種組合的時(shí)間慢0.17秒书斜，也就是說這種圖標(biāo)的信息表達(dá)能力會(huì)少弱诬辈，如下圖：
所以在這樣的理論與數(shù)據(jù)的支撐下，我對部分圖標(biāo)進(jìn)行了如下改版：
有底色的圖標(biāo)全部從線性改成面性荐吉，如改不成面性（例如時(shí)鐘）需要適當(dāng)加粗描邊焙糟，目的就是提高視覺識(shí)別性。
切記样屠，識(shí)別性是圖標(biāo)最重要的價(jià)值穿撮，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑痪欲，不然你就是在消耗用戶體驗(yàn)悦穿，而不是給用戶體驗(yàn)賦能！
2.性格
試想如果一個(gè)人沒有性格业踢，那這個(gè)人就是沒有靈魂的栗柒，圖標(biāo)也一樣，沒有性格即沒有靈魂知举。
那如何打造屬于自己的性格呢瞬沦，我們需要從用戶和品牌出發(fā)，例如騰訊動(dòng)漫的用戶都是動(dòng)漫雇锡、cosplay愛好者逛钻，給人一種又萌又可愛的感覺，所以我們需要讓圖標(biāo)盡量圓潤一些：
像上圖2號(hào)圖標(biāo)一樣锰提，增大圓角曙痘，使圖標(biāo)看起來更加圓潤可愛。
基于這樣的用戶人群立肘，我們還將原有一些單色圖標(biāo)边坤，改成下面這樣的彩色圖標(biāo)：
目的就是讓圖標(biāo)可愛活潑的性格更加明顯。
3.品牌
品牌性是我們經(jīng)常提到的緯度谅年，常用的提取品牌的基因也有很多惩嘉，顏色、圖形踢故、吉祥物等等文黎，這里舉兩個(gè)例子惹苗，一個(gè)是具象的品牌基因——吉祥物：
我們有自己的品牌吉祥物——黑子，所以在圖標(biāo)設(shè)計(jì)時(shí)可以將其運(yùn)用起來耸峭，如下圖就是結(jié)合黑子形象設(shè)計(jì)出來的“逗幣”圖標(biāo)：
再舉個(gè)比較抽象的例子桩蓉，從logo當(dāng)中提取品牌基因。
由于logo的字體筆畫比較粗劳闹，整體給人一種厚重飽滿的感覺：
因此我們可以在品牌logo中提取“粗胖飽滿”的品牌基因院究，在這樣的背景下就不用再糾結(jié)圖標(biāo)使用2px描邊還是3px的描邊了：
我們可以很確定的使用3px描邊，因?yàn)樗确掀放苹蛴址嫌脩粜愿瘢ǚ逝謭A潤顯得可愛）本涕。
4.飽滿
很多時(shí)候我們做出來的圖標(biāo)不夠精致业汰，其中一個(gè)很大的原因就是不夠飽滿。
如何判斷圖標(biāo)是否飽滿呢菩颖？我常用的衡量方法就是在圖標(biāo)上面加一個(gè)矩形样漆，看圖標(biāo)的正形的面積是否還可以增加。
例如下圖晦闰，藍(lán)色是正形放祟，紅色是負(fù)形：
很明顯藍(lán)色的正形面積是可以增加的，例如：
這就是在增加圖標(biāo)的飽滿度呻右，我也是按照這個(gè)思路來改版圖標(biāo)飽滿度的跪妥。
舉個(gè)真實(shí)的例子，我們原版的續(xù)看圖標(biāo)是上下結(jié)構(gòu)声滥，而上面部門的圖形太窄眉撵，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多）落塑，沒有撐滿矩形纽疟，如下圖：
于是我對圖標(biāo)的結(jié)構(gòu)進(jìn)行了調(diào)整，盡可能的減少綠色部分芜赌，最后達(dá)到了下圖這樣的效果：
最后提醒大家仰挣，對于圖標(biāo)的飽滿度伴逸，還需要結(jié)合整套圖標(biāo)的視覺效果來進(jìn)行調(diào)試缠沈，雖然上面這個(gè)方法可以解決大部門圖標(biāo)的飽滿問題佳晶，但還是要具體場景具體分析择份，切記诡曙，我們的目標(biāo)是讓整套圖標(biāo)看起來和諧偿渡、統(tǒng)一茬贵、精致械姻！
5.細(xì)節(jié)
細(xì)節(jié)也包含很多方面斑响，例如：
5.1 角度是否一致或者遵循某種規(guī)律：
我們定制的角度規(guī)范是30度的倍數(shù)枉侧，這樣可以很大程度的提高圖標(biāo)統(tǒng)一性官紫。
5.2 描邊末端的細(xì)節(jié)處理
下圖就是一個(gè)錯(cuò)誤的例子肛宋，一個(gè)描邊末端是直角州藕，一個(gè)又是圓角：
我們在處理這樣的細(xì)節(jié)時(shí)，一定要保證統(tǒng)一性酝陈。
5.3? 像素對其問題
大家會(huì)覺得只要把一個(gè)尺寸的圖標(biāo)做好像素對齊床玻，導(dǎo)出其他倍數(shù)的圖標(biāo)就是ok的，其實(shí)這樣的想法是不對的沉帮，因?yàn)樵趯?dǎo)出0.5或1.5倍數(shù)關(guān)系的時(shí)候锈死，像素很容易再次產(chǎn)生不對齊的情況。
舉個(gè)例子穆壕，我們做圖標(biāo)是以2倍圖為基礎(chǔ)待牵，然后統(tǒng)一導(dǎo)出3倍圖，那這時(shí)候3倍圖就是2倍圖的1.5倍喇勋，導(dǎo)出的時(shí)候就發(fā)生了下面這樣的情況：
雖然2倍圖是像素對齊的缨该，但3倍圖卻沒有對齊，如果設(shè)計(jì)師沒有仔細(xì)檢查切圖茄蚯，就會(huì)發(fā)生線上圖標(biāo)發(fā)虛的情況压彭，所以我們在輸出切圖時(shí)，一定要仔細(xì)核查渗常，發(fā)現(xiàn)錯(cuò)誤及時(shí)調(diào)整壮不，免得造成不良影響。
這里大家不要糾結(jié)皱碘，2倍圖3像素询一，3倍圖就是4.5像素，sketch導(dǎo)出時(shí)癌椿，軟件會(huì)自動(dòng)變成整數(shù)健蕊，如果有個(gè)別圖標(biāo)有瑕疵，我們可以手動(dòng)調(diào)整為4或者5像素踢俄，或者其他辦法也可以缩功，我只是舉個(gè)極端的例子，如果遇到可以這樣調(diào)整都办，但最好還是用一倍圖來做圖標(biāo)嫡锌，這樣就不會(huì)出現(xiàn)小數(shù)點(diǎn)了。
除了以上這些琳钉，還有視覺大小势木、圓角、描邊粗細(xì)是否統(tǒng)一的細(xì)節(jié)歌懒，當(dāng)然啦桌，這些都比較容易理解，就不一一舉例說明了及皂，大家在做圖標(biāo)設(shè)計(jì)的時(shí)候一定要多多注意甫男。
總結(jié)
本次梳理的五緯自檢法可以用在圖標(biāo)設(shè)計(jì)的自我檢查且改、改版優(yōu)化等多個(gè)方面，或許它并不全面板驳，但一定具有參考價(jià)值钾虐，希望能給大家?guī)韱l(fā)和靈感，我們也會(huì)更加努力笋庄，爭取做出更好的作品和教程與在設(shè)計(jì)道路上的你們分享交流效扫！
