如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)設(shè)計(jì)( www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

我們每天都在設(shè)計(jì)圖標(biāo)，并且保持這樣的狀態(tài)超過15年。身為設(shè)計(jì)師，想必你已經(jīng)閱讀過很多關(guān)于圖標(biāo)設(shè)計(jì)的文章，但是今天的文章不一樣，今天我們的文章不會(huì)花費(fèi)很長(zhǎng)時(shí)間來單獨(dú)介紹某一個(gè)圖標(biāo)的設(shè)計(jì)，而是設(shè)計(jì)任何一套圖標(biāo)應(yīng)當(dāng)遵循的基本流程，以及一定要注意的8個(gè)關(guān)鍵的注意事項(xiàng)，你可以將這些東西帶入到一些現(xiàn)成的案例當(dāng)中去驗(yàn)證。

藍(lán)藍(lán)設(shè)計(jì)( www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。

超實(shí)用！UI設(shè)計(jì)圖標(biāo)欣賞，絕對(duì)激發(fā)你的靈感

我是你們的學(xué)霸姐 2017-08-17 20:13:23

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

UI設(shè)計(jì)中的布爾運(yùn)算由淺及深，深入解析，圖標(biāo)瞬間高大上！

UI設(shè)計(jì)棧 2018-03-26 19:24:14

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一、圖標(biāo)的定義

1. 什么是圖標(biāo)

圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形。從功能分類角度分為啟動(dòng)圖標(biāo)、應(yīng)用圖標(biāo)、功能圖標(biāo)。

2. 什么是功能圖標(biāo)

功能圖標(biāo)是具有指代意義且具有功能標(biāo)識(shí)的圖形，它不僅是一種圖形，更是一種標(biāo)識(shí)，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。

二、圖標(biāo)的種類

• 具象圖標(biāo)：保持事物本來固有形態(tài)進(jìn)行優(yōu)化設(shè)計(jì)。如汽車，輪船，飛機(jī)，車票……
• 抽象圖標(biāo)：不是一個(gè)具體的事物，更趨于概念化。如個(gè)人中心，空間，模式，最近等。

三、圖標(biāo)的風(fēng)格

1. 面性圖標(biāo)

面性圖標(biāo)是由一根封閉的線造成了面，面性圖標(biāo)同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標(biāo)具有穩(wěn)重、剛毅的男性化特征；曲面具有動(dòng)態(tài)、柔和的女性化特征。

不透明度圖標(biāo)

不透明度圖標(biāo)是通過調(diào)節(jié)圖標(biāo)的部分面性結(jié)構(gòu)來增加層次感，從配色角度屬于同色系。

△ NO-921

光影圖標(biāo)

三大面五大調(diào)，通過調(diào)節(jié)面的反光和陰影來增加面性圖標(biāo)的紋理。在扁平時(shí)代的今天保留著微擬物風(fēng)。

多彩色圖標(biāo)

多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標(biāo)的黑白灰。

△ Kyle Anthony Miller

2. 線性圖標(biāo)

線性圖標(biāo)是通過粗細(xì)一致的線條繪制，高度概括出來的圖標(biāo)，既能讓人賞心悅目，又給用戶帶來創(chuàng)造和應(yīng)用的樂趣。

圓角圖標(biāo)

圓角圖標(biāo)給人以親和力，也有柔軟，軟弱的一面。在圖標(biāo)設(shè)計(jì)越來越精美的今天，圓角圖標(biāo)的應(yīng)用行業(yè)已經(jīng)越來越廣泛。比如女性，母嬰，兒童，旅游……

△ Stephen Andrew Murrill

直角圖標(biāo)

直角圖標(biāo)給人以銳利，堅(jiān)強(qiáng)，果斷，不拖泥帶水的一面。讓人眼前一亮的是魅族系統(tǒng)Flyme6 里面的圖標(biāo)它就是用的直角，給人明快干凈的感覺。真正更好的詮釋它內(nèi)在含義的非京東金融里的圖標(biāo)了 ，投資理財(cái)?shù)臅r(shí)候需要人們果斷作出判斷。理財(cái)有風(fēng)險(xiǎn)，投資需謹(jǐn)慎。直角的感覺讓人當(dāng)機(jī)立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點(diǎn)，感覺做事優(yōu)柔寡斷。所以一下子在金融領(lǐng)域被做成了標(biāo)桿式的功能圖標(biāo)。

斷點(diǎn)圖標(biāo)

斷點(diǎn)圖標(biāo)是點(diǎn)線面演化的一種產(chǎn)物。在最開始UI興起的時(shí)候，設(shè)計(jì)師們不滿足于單線條的功能圖標(biāo)，通過點(diǎn)線面增加形式感。最早新浪體育運(yùn)用到這一風(fēng)格，算是還是很不錯(cuò)的一種風(fēng)格。很遺憾只留在了我的記憶力，網(wǎng)上并沒有找到之前的設(shè)計(jì)。

△ Catalin Mihut

高光式圖標(biāo)

高光式圖標(biāo)是傳統(tǒng)繪畫的產(chǎn)物，我們?cè)趥鹘y(tǒng)繪畫的時(shí)候往往最后一筆都是添加高光，起到畫龍點(diǎn)睛的效果。高光式的功能圖標(biāo)采用里細(xì)外粗的規(guī)律，和斷點(diǎn)式功能圖標(biāo)差不多一個(gè)年代的產(chǎn)物。在不斷扁平不斷簡(jiǎn)潔的今天，也不會(huì)感覺那最后一筆也是多余的。

△ Udisk6353

不透明度圖標(biāo)

不透明度圖標(biāo)是調(diào)節(jié)圖標(biāo)的部分結(jié)構(gòu)的不透明度來增加圖標(biāo)的層次。色彩上面跟雙色圖標(biāo)是一樣的，只不過從配色角度屬于同色系的范疇。

△ Laura Reen

雙色圖標(biāo)

雙色圖標(biāo)在實(shí)際應(yīng)用中非常廣泛，也是很百搭的那種。一種可以有彩色跟無彩色結(jié)合，有彩色的顏色可以是企業(yè)色，可以是代表行業(yè)或者產(chǎn)品的顏色跟無彩色黑色相結(jié)合。一種是主體色跟點(diǎn)綴色組合而成的雙色，但使用時(shí)要考慮到當(dāng)前界面中的配色不宜過多，多了就容易花。

△ stay

線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)也是一種很出彩的風(fēng)格，線是高度概括的圖標(biāo)，這時(shí)候面更多的是充當(dāng)裝飾點(diǎn)綴的作用。面的表現(xiàn)方式也有很多種，可以是單色的，漸變色的，也可以像 MBE風(fēng)格那樣提取主體結(jié)構(gòu)形成的面，也可以提取圖標(biāo)里面有閉合路徑所形成的面。這種風(fēng)格應(yīng)用也非常廣泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

結(jié)構(gòu)圖標(biāo)

結(jié)構(gòu)圖標(biāo)算比較有爭(zhēng)議性的圖標(biāo)，結(jié)構(gòu)圖標(biāo)是我們學(xué)繪畫的時(shí)候老師要我們起形，要開始繪畫結(jié)構(gòu)，對(duì)基礎(chǔ)的三大面五大調(diào)有很好的理解?，F(xiàn)在結(jié)構(gòu)圖標(biāo)正好相反，比如對(duì)于一個(gè)具像圖標(biāo)，我們要分析出它的每一筆每一畫，看清每一個(gè)結(jié)構(gòu)，然后用固定的形式來表現(xiàn)出來。固定的形式可以像優(yōu)酷圖標(biāo)的相交結(jié)構(gòu)點(diǎn)，可以像上海瑪娜花園一筆一個(gè)顏色，等等。

一筆畫圖標(biāo)

一筆畫圖標(biāo)是難度系數(shù)比較高的一種風(fēng)格，也是我非常喜歡的一種風(fēng)格，當(dāng)才開始流行斷點(diǎn)圖標(biāo)的時(shí)候，錘子設(shè)計(jì)師歐陽(yáng)念念就提出了一筆畫圖標(biāo)的概念，當(dāng)時(shí)也是有爭(zhēng)議的一種圖標(biāo)。當(dāng)網(wǎng)易云音樂也出了這種圖標(biāo)后就更具有說服力。一般也很難駕馭，也基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。

logo類圖標(biāo)

logo 類圖標(biāo)跟一筆畫算是同等級(jí)別難度的，需要圖標(biāo)足夠精致到可以直接拿來當(dāng)應(yīng)用圖標(biāo)，乃至于 logo。這種在app中屈指可數(shù)。最為經(jīng)典的就當(dāng)屬網(wǎng)易云音樂的 logo 了，其實(shí)它也屬于一筆畫圖標(biāo)，同時(shí)又用做了 logo，它的含金量可想而知。

情感化圖標(biāo)

情感化圖標(biāo)是提取人的五官跟圖標(biāo)相結(jié)合具有擬人化的圖標(biāo)，這種擬人化的場(chǎng)景模仿人在真實(shí)場(chǎng)景的應(yīng)用。QQ 的底部圖標(biāo)通過五官方向大小移動(dòng)變化很好的表現(xiàn)出當(dāng)前場(chǎng)景。QQ 開了先河，相信后續(xù)會(huì)有很多情感化圖標(biāo)出現(xiàn)，會(huì)有它的一席之地。

3. 如何轉(zhuǎn)換線性圖標(biāo)與面性圖標(biāo)？

線性的閉合路徑的圖形變面性圖標(biāo)，閉合路徑里面的線條反白，重要的關(guān)聯(lián)結(jié)構(gòu)線反白，讓面性圖標(biāo)透氣；線性的不閉合路徑的圖形變面性圖標(biāo)，應(yīng)適當(dāng)?shù)脑黾泳€的粗度來達(dá)到視覺上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去創(chuàng)造新的圖標(biāo)風(fēng)格

繪畫結(jié)構(gòu)＋點(diǎn)線面＋色彩，繪畫結(jié)構(gòu)可以清晰的分析出事物的主體結(jié)構(gòu)，勾勒出主體輪廓，對(duì)創(chuàng)造新的圖標(biāo)風(fēng)格有很大幫助。繪畫結(jié)構(gòu)選的角度是人很熟知的角度，比如正面，盡量不要選擇帶有透視角度進(jìn)行設(shè)計(jì)。點(diǎn)線面是設(shè)計(jì)的基礎(chǔ)，通過從點(diǎn)線面角度去構(gòu)思會(huì)獲得更多的靈感。色彩方面可以是企業(yè)色、行業(yè)色、主題色、點(diǎn)綴色等等。（圖design by Ted-Kulakevich and Graphéine ）

四、圖標(biāo)的特性

1. 統(tǒng)一性

大小的統(tǒng)一

在網(wǎng)頁(yè)設(shè)計(jì)中圖標(biāo)的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移動(dòng)端iOS規(guī)范中在2倍圖下最適合人點(diǎn)擊的區(qū)域大小為48*48px，iOS功能圖標(biāo)其他尺寸為48加或減4的倍數(shù)；安卓android 功能圖標(biāo)其他尺寸為48加或減8的倍數(shù)。為什么 iOS 是4的倍數(shù)，一個(gè)數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4；為什么安卓android 是8的倍數(shù)，安卓開發(fā)中最小的單位是1dp,1dp=2px，同時(shí)也要滿足一個(gè)數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4，所以安卓要是8的倍數(shù)。在很多帶有色塊的圖標(biāo)，不僅要保證色塊44*44pt的大小統(tǒng)一，也要保證里面色塊里面的功能圖標(biāo)的大小統(tǒng)一。

風(fēng)格的統(tǒng)一

風(fēng)格上面已經(jīng)歸納的很全了，直角圖標(biāo)和圓角圖標(biāo)基礎(chǔ)上可以添加一個(gè)其他風(fēng)格，如雙色風(fēng)格；但是剩余的其他風(fēng)格最好就不要兩兩相加，不然就會(huì)給用戶感覺很容易亂，也不夠簡(jiǎn)潔，主次不明。

規(guī)范的統(tǒng)一

視覺的規(guī)范

為什么我們?cè)偻瑯拥拇笮^(qū)域去繪制正方形、圓形、三角形，雖然符合了大小統(tǒng)一的特性，但是從視覺上還是不能看上去很均衡？這就需要我們規(guī)范化的去繪制圖標(biāo)，安卓android 規(guī)范里給出了圖標(biāo)的繪制方法。

圓角的規(guī)范

2. 簡(jiǎn)潔性

簡(jiǎn)潔性不單單體驗(yàn)在圖標(biāo)的簡(jiǎn)潔，還要體現(xiàn)在從創(chuàng)意到實(shí)際落地的簡(jiǎn)潔。在使用軟件 ai 或者 sketch 的時(shí)候繪制基礎(chǔ)圖形不要出現(xiàn)小數(shù)點(diǎn)和基數(shù)，多用偶數(shù)。

3. 層次明確

圖標(biāo)具有可點(diǎn)擊性和標(biāo)識(shí)性。可點(diǎn)擊性就會(huì)有點(diǎn)擊前、點(diǎn)擊時(shí)、點(diǎn)擊后三種狀態(tài)，主流底部標(biāo)簽欄會(huì)在點(diǎn)擊前使用線性圖標(biāo)，點(diǎn)擊時(shí)和點(diǎn)擊后使用面性圖標(biāo)；也有使用顏色來區(qū)分。

4. 延展性

圖標(biāo)的延展性之前在圖標(biāo)的風(fēng)格也講到，好的圖標(biāo)可以直接當(dāng)應(yīng)用圖標(biāo)或者 logo 來使用。同時(shí)好的圖標(biāo)還可以通過點(diǎn)線面動(dòng)效變化做下拉加載動(dòng)畫。

五、如何學(xué)會(huì)合理的設(shè)計(jì)功能圖標(biāo)？

1. 頭腦風(fēng)暴

頭腦風(fēng)暴看似一個(gè)不知道怎么解釋的詞，簡(jiǎn)單的說就是多動(dòng)腦子，越用越活。頭腦風(fēng)暴不單單是這里用到，是所有設(shè)計(jì)師做設(shè)計(jì)之前必備工作。頭腦風(fēng)暴完你會(huì)覺得你的設(shè)計(jì)思路會(huì)很寬，然后就是要合理的分析每個(gè)的可行度，完成的工作量，自己當(dāng)前設(shè)計(jì)的水平是否可以有效完成。其實(shí)很多設(shè)計(jì)師能有效的搜索到自己想要的東西也算是頭腦風(fēng)暴的一種，雖然你不會(huì)想出很多點(diǎn)子但還是很明確的知道自己想要什么，一定注意不要直接拿來主義，還是要通過平時(shí)的練習(xí)掌握更多的風(fēng)格。為以后頭腦風(fēng)暴想出的很多點(diǎn)子能很好的實(shí)踐出來。比如以旅游為主體進(jìn)行頭腦風(fēng)暴，這個(gè)就能想到很多很多。

2. 搜集資料

搜集資料的時(shí)候要很好的提取關(guān)鍵詞，直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產(chǎn)品，品牌公司的工業(yè)設(shè)計(jì)相對(duì)較好，對(duì)后面提取元素也會(huì)有很大的幫助。也可以通過提取好的關(guān)鍵詞，翻譯成英文，再到國(guó)外的網(wǎng)站追波、be搜上一搜看看。搜索到的素材和元素一定要再設(shè)計(jì)，不能拿來直接用。

3. 提取元素

提取元素又歸結(jié)到繪畫結(jié)構(gòu)中去了，繪畫好的看到具象事物，心里默默打開一個(gè)燈，三大面五大調(diào)，光影關(guān)系都有了。不是很理解的還是多練習(xí)吧。具象圖標(biāo)就是提取主要輪廓線，保留可要可不要的元素，到最后的時(shí)候做統(tǒng)一刪減；抽象圖標(biāo)有時(shí)候確實(shí)沒有一點(diǎn)的思路的時(shí)候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合適的還要進(jìn)行 redesign。有想法后選擇一種圖標(biāo)風(fēng)格這樣的繪制效率會(huì)很快。

4. 規(guī)范化

上面元素提取好后，需要開始選擇一種圖標(biāo)風(fēng)格進(jìn)行繪制。開始繪制的時(shí)候不要過于追求圖標(biāo)的風(fēng)格，還是要從圖標(biāo)本身出發(fā)快速的繪制好。等全部繪制好了突然想換一種圖標(biāo)風(fēng)格也是很快的，水到渠成?？赡軇傞_始很難在規(guī)范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要?jiǎng)?chuàng)意的元素圖標(biāo)，全部畫好后在統(tǒng)一的規(guī)范里面再繪制一遍。規(guī)劃化的目的就是讓圖標(biāo)統(tǒng)一，任何兩個(gè)圖標(biāo)拿出來從視覺大小、風(fēng)格都是一個(gè)統(tǒng)一的整體。

5. 加減法

一套圖標(biāo)繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當(dāng)?shù)男扌扪a(bǔ)補(bǔ)，對(duì)于視覺上看上去過于繁瑣的圖標(biāo)要保留大輪廓的同時(shí)減少結(jié)構(gòu)達(dá)到視覺平衡；對(duì)于確實(shí)很簡(jiǎn)單但有沒辦法添加任何的東西元素來增加的為它做加法的時(shí)候是否可以放大，來增加它的視覺豐滿感。

圖標(biāo)是界面設(shè)計(jì)中最重要的元素之一，也是我們 UI設(shè)計(jì)師必備的技能，日常工作中我們經(jīng)常會(huì)接到含有圖標(biāo)設(shè)計(jì)、優(yōu)化的需求。但到底什么樣的圖標(biāo)才算是優(yōu)秀的？也許很多設(shè)計(jì)師并沒有太完整的評(píng)判體系，只是憑感覺，這樣就會(huì)造成輸出效果不穩(wěn)定、耗時(shí)太長(zhǎng)等不良的后果。

所以借著這次機(jī)會(huì)我梳理了一套圖標(biāo)設(shè)計(jì)自檢的評(píng)判體系，一共五個(gè)維度，大綱如下：

• 識(shí)別
• 性格
• 品牌
• 飽滿
• 細(xì)節(jié)

一、識(shí)別

評(píng)判事物的價(jià)值在于它的用途是什么。

圖標(biāo)的用途是幫助用戶理解信息，所以「識(shí)別性」就是圖標(biāo)最重要、最底層的價(jià)值，如果你設(shè)計(jì)一個(gè)圖標(biāo)，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價(jià)值可言。

識(shí)別性可以分為兩個(gè)方面，一是含義識(shí)別，二是視覺識(shí)別。

先說含義識(shí)別，簡(jiǎn)單來說就是你的圖標(biāo)能不能被理解，當(dāng)然并不是設(shè)計(jì)師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個(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)行測(cè)試，只有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è)國(guó)外的測(cè)試結(jié)果，是我在一位前輩的文章中看到的，測(cè)驗(yàn)包括一組四種樣式的圖標(biāo)：白底黑色實(shí)心圖標(biāo)，白底黑色空心圖標(biāo)，黑底白色實(shí)心圖標(biāo)，黑底白色空心圖標(biāo)，經(jīng)過10天的時(shí)間，1260名參與者總共完成了超過25000次圖標(biāo)的認(rèn)知測(cè)試。將得出的數(shù)據(jù)分成四組進(jìn)行雙向方差分析，在相同的統(tǒng)計(jì)條件下，選擇黑底白色空心圖標(biāo)要比其他三種組合的時(shí)間慢0.17秒，也就是說這種圖標(biāo)的信息表達(dá)能力會(huì)少弱，如下圖：

所以在這樣的理論與數(shù)據(jù)的支撐下，我對(duì)部分圖標(biāo)進(jìn)行了如下改版：

有底色的圖標(biāo)全部從線性改成面性，如改不成面性（例如時(shí)鐘）需要適當(dāng)加粗描邊，目的就是提高視覺識(shí)別性。

切記，識(shí)別性是圖標(biāo)最重要的價(jià)值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗(yàn)，而不是給用戶體驗(yàn)賦能！

二、性格

試想如果一個(gè)人沒有性格，那這個(gè)人就是沒有靈魂的，圖標(biāo)也一樣，沒有性格即沒有靈魂。

那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發(fā)，例如騰訊動(dòng)漫的用戶都是動(dòng)漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標(biāo)盡量圓潤(rùn)一些：

像上圖2號(hào)圖標(biāo)一樣，增大圓角，使圖標(biāo)看起來更加圓潤(rùn)可愛。

基于這樣的用戶人群，我們還將原有一些單色圖標(biāo)，改成下面這樣的彩色圖標(biāo)：

目的就是讓圖標(biāo)可愛活潑的性格更加明顯。

三、品牌

品牌性是我們經(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潤(rùn)顯得可愛）。

四、飽滿

很多時(shí)候我們做出來的圖標(biāo)不夠精致，其中一個(gè)很大的原因就是不夠飽滿。

如何判斷圖標(biāo)是否飽滿呢？我常用的衡量方法就是在圖標(biāo)上面加一個(gè)矩形，看圖標(biāo)的正形的面積是否還可以增加。

例如下圖，藍(lán)色是正形，紅色是負(fù)形：

很明顯藍(lán)色的正形面積是可以增加的，例如：

這就是在增加圖標(biāo)的飽滿度，我也是按照這個(gè)思路來改版圖標(biāo)飽滿度的。

舉個(gè)真實(shí)的例子，我們?cè)娴睦m(xù)看圖標(biāo)是上下結(jié)構(gòu)，而上面部分的圖形太窄，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對(duì)圖標(biāo)的結(jié)構(gòu)進(jìn)行了調(diào)整，盡可能的減少綠色部分，最后達(dá)到了下圖這樣的效果：

最后提醒大家，對(duì)于圖標(biāo)的飽滿度，還需要結(jié)合整套圖標(biāo)的視覺效果來進(jìn)行調(diào)試，雖然上面這個(gè)方法可以解決大部分圖標(biāo)的飽滿問題，但還是要具體場(chǎng)景具體分析，切記，我們的目標(biāo)是讓整套圖標(biāo)看起來和諧、統(tǒng)一、精致！

五、細(xì)節(jié)

細(xì)節(jié)也包含很多方面，例如：

1. 角度是否一致或者遵循某種規(guī)律

我們定制的角度規(guī)范是30度的倍數(shù)，這樣可以很大程度的提高圖標(biāo)統(tǒng)一性。

2. 描邊末端的細(xì)節(jié)處理

下圖就是一個(gè)錯(cuò)誤的例子，一個(gè)描邊末端是直角，一個(gè)又是圓角：

我們?cè)谔幚磉@樣的細(xì)節(jié)時(shí)，一定要保證統(tǒng)一性。

3. 像素對(duì)齊問題

大家會(huì)覺得只要把一個(gè)尺寸的圖標(biāo)做好像素對(duì)齊，導(dǎo)出其他倍數(shù)的圖標(biāo)就是ok的，其實(shí)這樣的想法是不對(duì)的，因?yàn)樵趯?dǎo)出0.5或1.5倍數(shù)關(guān)系的時(shí)候，像素很容易再次產(chǎn)生不對(duì)齊的情況。

舉個(gè)例子，我們做圖標(biāo)是以2倍圖為基礎(chǔ)，然后統(tǒng)一導(dǎo)出3倍圖，那這時(shí)候3倍圖就是2倍圖的1.5倍，導(dǎo)出的時(shí)候就發(fā)生了下面這樣的情況：

雖然2倍圖是像素對(duì)齊的，但3倍圖卻沒有對(duì)齊，如果設(shè)計(jì)師沒有仔細(xì)檢查切圖，就會(huì)發(fā)生線上圖標(biāo)發(fā)虛的情況，所以我們?cè)谳敵銮袌D時(shí)，一定要仔細(xì)核查，發(fā)現(xiàn)錯(cuò)誤及時(shí)調(diào)整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細(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ì)更加努力，爭(zhēng)取做出更好的作品和教程與在設(shè)計(jì)道路上的你們分享交流。

介紹一下如何在PS里更好的體現(xiàn)圖標(biāo)的質(zhì)感，個(gè)人覺得，這個(gè)教程對(duì)于UI學(xué)習(xí)者來說是非常受用的，特別是UI設(shè)計(jì)的新手學(xué)習(xí)者。好了，喜歡的朋友記得給我好評(píng)！

如今的用戶界面中，圖標(biāo)絕對(duì)是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小，甚至不被人注意到，但是它們幫助設(shè)計(jì)和用戶解決了許多問題。圖標(biāo)是可用性和導(dǎo)航的關(guān)鍵，用戶能夠感知到圖標(biāo)的功用，但是只有設(shè)計(jì)師才會(huì)明白，想要讓圖標(biāo)簡(jiǎn)約、可用還富有表現(xiàn)力，要耗費(fèi)多少時(shí)間和精力。

喬布斯曾經(jīng)說過：“細(xì)節(jié)至關(guān)重要，花費(fèi)時(shí)間仔細(xì)打磨是值得的?！眻D標(biāo)是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件，所以，今天的文章，我們來仔細(xì)歸納一下常見的圖標(biāo)類型和它們?cè)赨I中的使用。

對(duì)于設(shè)計(jì)師而言，移動(dòng)端設(shè)備屏幕上的每一寸空間都是寶貴的資源。為了在小屏幕上做更多的事情，設(shè)計(jì)師在設(shè)計(jì)導(dǎo)航系統(tǒng)的時(shí)候，通常需要花費(fèi)更多的時(shí)間來打磨。漢堡圖標(biāo)在過去幾年當(dāng)中，是最常見的一種設(shè)計(jì)策略，導(dǎo)航和選項(xiàng)被隱藏在這個(gè)小小的圖標(biāo)之后，但是實(shí)際上，雖然大眾已經(jīng)習(xí)慣了它的存在，但是它并不是最佳的導(dǎo)航設(shè)計(jì)方案。

在今天的文章當(dāng)中，我們會(huì)探討為什么漢堡菜單這樣的隱藏式導(dǎo)航影響用戶體驗(yàn)，以及可用性更強(qiáng)的替代方案。

為何漢堡圖標(biāo)會(huì)破壞用戶體驗(yàn)

在移動(dòng)端設(shè)備上，我們看到的可見式導(dǎo)航其實(shí)比漢堡圖標(biāo)這樣的隱藏式導(dǎo)航更多，前者大概是后者的2.5倍。