2020-10-12 資深UI設(shè)計(jì)者
圖標(biāo)是UI設(shè)計(jì)中除了文字之外最不可或缺的視覺元素，在設(shè)計(jì)中看似只占一個(gè)很小的區(qū)域，但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn)，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件。
本文將對(duì)圖標(biāo)進(jìn)行系統(tǒng)的介紹，篇幅所限，本文只針對(duì)圖標(biāo)設(shè)計(jì)中最重要的設(shè)計(jì)概念和設(shè)計(jì)思路為主。大家如果對(duì)圖標(biāo)的其他方面感興趣，歡迎給留言，后續(xù)出相關(guān)系列內(nèi)容。過程中也有針對(duì)幾種典型的圖標(biāo)進(jìn)行實(shí)操代練。想要把圖標(biāo)設(shè)計(jì)的更好，這就需要我們?cè)谄綍r(shí)勤加練習(xí)外，還要進(jìn)行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?
圖標(biāo)，也稱為icon或Picoto，是計(jì)算機(jī)世界對(duì)現(xiàn)實(shí)世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。
圖標(biāo)做為國際通用性語言，生活中隨處可見，例如商場導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，又或者是日常手機(jī)里使用的那些App圖標(biāo)，如微信、電話、短信等。的確，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。
粗淺劃分的話，UI設(shè)計(jì)中常見的圖標(biāo)大致分為兩大類，第一類我們稱之為「標(biāo)志性圖標(biāo)」，比如手機(jī)中應(yīng)用啟動(dòng)圖標(biāo)；第二類我們稱之為「功能性圖標(biāo)」，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導(dǎo)或操作。
2. 圖標(biāo)的重要性
對(duì)于UI設(shè)計(jì)而言，圖標(biāo)可以說是整個(gè)產(chǎn)品的點(diǎn)睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中，圖標(biāo)幾乎是這個(gè)頁面的核心支撐體，它直接影響著產(chǎn)品的視覺體驗(yàn)和產(chǎn)品調(diào)性。它有以下幾點(diǎn)好處：
3. 起源
圖標(biāo)的發(fā)展歷程其實(shí)有些類似中文、英文等語言的發(fā)展，大體也分為兩個(gè)階段：
實(shí)物 → 符號(hào)；符號(hào) → 新符號(hào)
來看一個(gè)小例子：
左邊這個(gè)東西叫軟盤，可能很多小伙伴沒見過（事實(shí)上我也沒有），「保存」圖標(biāo)就是將「軟盤」符號(hào)化之后形成的圖形，「軟盤」是「保存」圖標(biāo)的實(shí)體。但隨著時(shí)間的推移，人們逐漸將長期接觸的符號(hào)本身作為一種新的實(shí)體，在大家的眼里，它不再是一個(gè)具象事物的抽象符號(hào)，而是直接當(dāng)成一個(gè)實(shí)體來使用，甚至這個(gè)符號(hào)的實(shí)體已經(jīng)淡出歷史，但人們還在習(xí)慣性使用這個(gè)符號(hào)。
如你所知，圖標(biāo)、標(biāo)識(shí)都不是界面設(shè)計(jì)師所創(chuàng)造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當(dāng)中，早期用來傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識(shí)。
隨著技術(shù)的發(fā)展，計(jì)算機(jī)誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀(jì)70年代，施樂在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒有走進(jìn)大眾的視野，但是它的后續(xù)機(jī)型施樂之星在1981年問世，并且成為了計(jì)算機(jī)史上的重要里程碑，而 Xerox Alto 對(duì)于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟，Windows 對(duì)抗 Macintosh。當(dāng)然這都是后話。
4. 擬物圖標(biāo)
80年代，想做的具象（擬物），卻因?yàn)橄袼睾蜋C(jī)能的限制無法實(shí)現(xiàn)，所以對(duì)好的標(biāo)準(zhǔn)是越具象越好 。到了1995年計(jì)算機(jī)顯卡的顯示能力得到革命性的改變，Photoshop 5.0的發(fā)布，恰好讓憋屈了這么多年的圖形和UI設(shè)計(jì)師們巴不得立馬上天（終于可以施展拳腳了）。從win95開始，到osx/win7的這十來年正是UI擬物化發(fā)展壯大并大行其道的階段。同時(shí)也是顯示技術(shù)飛速發(fā)展的十年，從640×480，到800×600，到1024×768，到1920×1080 / 1920×1200，再到4k，再到retina屏，平面顯示技術(shù)能達(dá)到的水準(zhǔn)基本已經(jīng)是人眼能感受到的。
當(dāng)人們對(duì)計(jì)算機(jī)尚不熟悉的時(shí)候，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗(yàn)的核心。擬物化的圖標(biāo)和界面會(huì)給予用戶具象化的引導(dǎo)，比如回收站，音樂，電腦，文件夾的圖標(biāo)，用戶可以直接聯(lián)想到現(xiàn)實(shí)中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導(dǎo)用戶點(diǎn)擊，用戶都可以通過聯(lián)想，更快的理解操作/互動(dòng)的方式。這樣可以降低用戶的學(xué)習(xí)成本，縮短學(xué)習(xí)周期，讓用戶更快的適應(yīng)計(jì)算機(jī)的使用，弄懂這玩意到底是干嘛的。
來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發(fā)布了彩色的圖標(biāo)設(shè)計(jì)。圖標(biāo)所能容納的信息量比起上一個(gè)黑白界面的時(shí)代更大，全新的樣式使得它在信息傳達(dá)的功能性上有了明顯的提升。
但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶獲取信息的一種干擾。如今人們對(duì)各種常規(guī)交互模式人們也早已了然于胸，用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗(yàn)的重心。
再者，大家都熟悉的事物其實(shí)非常有限，而 APP 的創(chuàng)新卻在不斷進(jìn)行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒有參照物，所以也決定了擬物圖標(biāo)必然會(huì)被扁平化取代。
5. 扁平化
從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來了一些麻煩——擬物圖標(biāo)的質(zhì)感、光影會(huì)分散用戶的注意力，形成「視覺噪聲」。于是UI設(shè)計(jì)師開始探索更新的表現(xiàn)形式來設(shè)計(jì)界面中的圖標(biāo)。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計(jì)和Google引領(lǐng)的長投影風(fēng)格的圖標(biāo)設(shè)計(jì)。 不管你喜歡與否，當(dāng)年的微軟讓 Metro 和扁平化賺足了眼球，甚至讓人一看到扁平化就想到Metro。
區(qū)別于擬物化更加接近于真實(shí)的實(shí)物，扁平化則是簡化真實(shí)的物體，轉(zhuǎn)而通過抽象、簡化、符號(hào)化的設(shè)計(jì)元素來表現(xiàn)。
2013年，蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。在iOS7中對(duì)整個(gè)界面的圖標(biāo)、按鈕、字體、信息層級(jí)等各方面都進(jìn)行扁平化設(shè)計(jì)。蘋果的這一系列動(dòng)作打破了人們對(duì)扁平化風(fēng)格的芥蒂，并最終推動(dòng)了整個(gè)移動(dòng)端扁平化設(shè)計(jì)的進(jìn)程。
那么，蘋果公司在堅(jiān)持了多年的擬物化設(shè)計(jì)風(fēng)格之后，曾經(jīng)作為該風(fēng)格的引領(lǐng)者和受益者，為何會(huì)突然轉(zhuǎn)向，熱情地?fù)肀鸨馄交O(shè)計(jì)來了呢？難道是因?yàn)槲覀円曈X疲勞了嗎？答案很簡單，
總之，扁平化這種二維設(shè)計(jì)已經(jīng)成為一種更加流行的設(shè)計(jì)風(fēng)格。所有元素的邊界都很干凈利落，較多使用色塊和符號(hào)化的圖形以及無襯線修飾的字體，界面更加整齊簡潔。使用這種設(shè)計(jì)風(fēng)格的優(yōu)點(diǎn)是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化，減少認(rèn)知障礙的產(chǎn)生。
雖然扁平化的優(yōu)點(diǎn)有很多，也適合當(dāng)下技術(shù)發(fā)展需要的，但是缺點(diǎn)也是顯而易見的。譬如表現(xiàn)形式太過于抽象、缺乏情感的傳遞，而事實(shí)上發(fā)展到今天的扁平化設(shè)計(jì)確實(shí)也在不斷的優(yōu)化自己~使得自己更加的適應(yīng)時(shí)代的發(fā)展。另外還有一個(gè)點(diǎn)就是所謂的 “審美疲勞”。當(dāng)你一直看著簡單的東西，久而久之就會(huì)越來越煩，你就會(huì)越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質(zhì)靠攏，即“認(rèn)知簡約”。也許當(dāng)滿世界都是扁平化后，擬物化的設(shè)計(jì)卻又變得更顯眼了呢？最近流行的“新擬物”風(fēng)格就是最好的證明。
6. 微扁平、輕擬物
由于扁平風(fēng)格表現(xiàn)形式單一，同質(zhì)化嚴(yán)重，缺乏個(gè)性，圖標(biāo)慢慢開始發(fā)展到微扁平輕擬物的方向。相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。
7.「新擬物」風(fēng)格圖標(biāo)
蘋果在 WWDC2020 搞了個(gè)大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺(tái)遷移至ARM 平臺(tái)，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個(gè)將「新擬物」設(shè)計(jì)投入大規(guī)模商用的操作系統(tǒng)，這可視為「新擬物」在實(shí)用化道路上的首次勝利。值得一提的是，在 Big Sur 的 ” 外觀 ” 設(shè)置里，多了一項(xiàng)名為” 自適應(yīng)強(qiáng)調(diào)色 “的選項(xiàng)。蘋果將主題色的指定權(quán)留給開發(fā)者，這是否暗示新一代 App 在光影上會(huì)有更豐富的效果？
「新擬物」設(shè)計(jì)的精髓在于對(duì)光線的絕妙運(yùn)用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間，進(jìn)而打造一種全新的視覺體驗(yàn)。
不同于傳統(tǒng)的擬物，「新擬物」雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質(zhì)是自然界不存在的。換句話說，「新擬物」是將真實(shí)光線用于虛擬對(duì)象，而 ” 擬物 ” 是還原實(shí)際物品在特定光照下的效果；
由于整個(gè)設(shè)計(jì)界將不得不考慮新擬物風(fēng)格，圍繞該風(fēng)格的可能性將會(huì)有爆炸性的發(fā)展，并且這種新的數(shù)字空間設(shè)計(jì)理念如何能夠合理地適用于用戶界面設(shè)計(jì)和功能性將取得更大的突破。與以往一樣，第三方應(yīng)用將比蘋果更大膽、更快速地推動(dòng)這一風(fēng)格——這也是我們將會(huì)真正開始解鎖新擬物優(yōu)勢的時(shí)候。
產(chǎn)品應(yīng)用圖標(biāo)（也叫啟動(dòng)圖標(biāo)），是指產(chǎn)品「品牌標(biāo)識(shí)」中獨(dú)立的圖形，也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺通信中必不可少的元素，其使用率非常高，所以該獨(dú)立圖形在設(shè)計(jì)中應(yīng)做到最簡化。
一個(gè)小問題：為什么iOS系統(tǒng)中圖標(biāo)形狀是統(tǒng)一的圓角矩形？
蘋果官方給出的解釋是在空間有限的的區(qū)域，太多形狀顯得雜亂，如果形狀不規(guī)則，就無法控制統(tǒng)一間距，設(shè)計(jì)師水平也不一樣，這樣統(tǒng)一規(guī)范能保證標(biāo)準(zhǔn)。推薦一個(gè)iOS啟動(dòng)圖標(biāo)資源網(wǎng)站，設(shè)計(jì)時(shí)可以找找靈感。
△ iOSIcon gallery
而安卓應(yīng)用圖標(biāo)就沒那么規(guī)范，處于百花齊放的狀態(tài)，各家廠商都在設(shè)計(jì)獨(dú)屬于自己的視覺語言。大家都不一樣，也就導(dǎo)致沒有個(gè)性之美。
安卓應(yīng)用圖標(biāo)設(shè)計(jì)規(guī)范網(wǎng)站
應(yīng)用圖標(biāo)的類型
應(yīng)用圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異，從而被用戶記住。因此能在第一時(shí)間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計(jì)的好看且容易被人記住就成了非常重要的任務(wù)。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種。
中文是我們的母語，每一個(gè)漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會(huì)使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計(jì)模式即字體設(shè)計(jì)，提取應(yīng)用名稱中的一個(gè)或多個(gè)漢字，進(jìn)行設(shè)計(jì)變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。
單字
提取產(chǎn)品名稱中最具代表性的文字，通過對(duì)筆畫及整體骨架進(jìn)行字體設(shè)計(jì)，以達(dá)到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識(shí)別性強(qiáng)。
多字
多字圖標(biāo)設(shè)計(jì)要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個(gè)字，最多兩行（四個(gè)字）排列。
其優(yōu)點(diǎn)是更加直接的告訴用戶產(chǎn)品名稱，達(dá)到品牌推廣的目的，減輕用戶記憶成本。其缺點(diǎn)是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會(huì)顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。
字加圖形組合
文字加輔助圖形的組合，也是常見的產(chǎn)品圖標(biāo)設(shè)計(jì)方法，相比純文字圖標(biāo)，顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。
英文設(shè)計(jì)與中文設(shè)計(jì)的設(shè)計(jì)模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點(diǎn)或行業(yè)屬性進(jìn)行創(chuàng)意加工，新的字母圖形依舊保持本身的識(shí)別性。
單字母
通常提取英文首字母進(jìn)行設(shè)計(jì)，由于英文字母本身結(jié)構(gòu)簡潔，稍加改動(dòng)就很容易達(dá)到設(shè)計(jì)感于識(shí)別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。
多字母
提取產(chǎn)品全稱或幾個(gè)單詞的首字母組合而成，形成獨(dú)有的產(chǎn)品簡稱，方便用戶記憶。
字母加圖形組合
字母加圖形組合的設(shè)計(jì)形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進(jìn)行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。
直接用數(shù)字做應(yīng)用圖標(biāo)的相對(duì)較少，但是數(shù)字識(shí)別性強(qiáng)，易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性。
由于符號(hào)本身的含義會(huì)對(duì)產(chǎn)品屬性有一定限制，所以特殊符號(hào)在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對(duì)較少。如“$”符號(hào)可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，無法運(yùn)用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強(qiáng)的特點(diǎn)，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。
除了中英文圖標(biāo)，還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡潔大方，視覺沖擊力強(qiáng)。常見的有以下幾種：
幾何圖形的設(shè)計(jì)模式給人簡約、現(xiàn)代、個(gè)性等視覺感受，從單個(gè)具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達(dá)不同，如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等，添加圓角后又會(huì)更加親民、可愛。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。
單雙形是指應(yīng)用圖標(biāo)只展示單個(gè)或兩個(gè)的剪影圖形。通常有兩種設(shè)計(jì)方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡潔明確，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。
線形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺效果。纖細(xì)的線框圖形傳遞出簡潔輕快的氣質(zhì)，適合于文藝、清新的應(yīng)用，在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格，才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一。線性風(fēng)格一定注意不可太細(xì)，如果做得太細(xì)，在手機(jī)上看會(huì)非常尖銳，顯得不易點(diǎn)擊。例如airbnb，它的背景是一個(gè)微漸變，線性風(fēng)格曲線組成“A”，同時(shí)是一個(gè)小蜜蜂。
動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見的方式之一，通過提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素，背景填充單色或漸變色，簡潔明了。動(dòng)物給人的印象比較可愛，有助于加深用戶對(duì)產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。
卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感，一個(gè)可愛的卡通形象有助于加深用戶對(duì)產(chǎn)品的印象。很多決策者會(huì)認(rèn)為卡通是一種低齡的審美，這種想法其實(shí)是錯(cuò)誤的?？ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格，例如Bear，它的卡通形象是一頭潔白的北極熊，簡潔的形象設(shè)計(jì)與產(chǎn)品的閱讀體驗(yàn)一致。
以正形為底突出負(fù)形特征，以負(fù)形表達(dá)產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標(biāo)中的負(fù)形圖形是對(duì)話氣泡，告訴我們這是一個(gè)媒體或社交的應(yīng)用，而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì)。
白色漸變的設(shè)計(jì)模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點(diǎn)，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。
色彩比任何圖形都更能抓住用戶的注意力，同時(shí)色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對(duì)比，營造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對(duì)比，一般為白色或淺色背景。
無，即沒有設(shè)計(jì)。除了背板什么也沒有。雖然這類設(shè)計(jì)模式比較獨(dú)特，但我們并不鼓勵(lì)，因?yàn)橛脩艉茈y從一個(gè)顏色上得到有用的信息。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。
打開率是一款移動(dòng)應(yīng)用的重要數(shù)據(jù)，應(yīng)用只有被打開才有它的運(yùn)營價(jià)值。在我們手機(jī)里安裝了許許多多的應(yīng)用，除了一些我們每天必須使用的應(yīng)用如微信，其他大多數(shù)的應(yīng)用在沒有使用場景時(shí)很難想到去打開他們。因此，這些應(yīng)用如何在手機(jī)屏幕上吸引用戶的注意，鼓勵(lì)用戶打開顯得非常重要。于是在應(yīng)用圖標(biāo)上做文章就顯得很有必要，常見的設(shè)計(jì)手法有：
在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí)，設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)（1024x1024px）之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如，在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px，在@2x情況下為120x120px；在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px；這個(gè)工作太煩人了，好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件。打開這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。iOS的圓角圖標(biāo)并不是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線。
我們把兩個(gè)圓角曲線放大重疊后進(jìn)行對(duì)比，其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對(duì)角線錨點(diǎn)，區(qū)別在于其曲線稍微向中心收緊。
事實(shí)上，我們很難在Retina屏幕上區(qū)分這么細(xì)微的差別，因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)同學(xué)即可，如果應(yīng)用圖標(biāo)需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。
安卓應(yīng)用圖標(biāo)同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設(shè)計(jì)師提供給程序員的同樣是直角矩形，然后程序員通過代碼進(jìn)行切割使其變成圓角圖標(biāo)。
在我之前的設(shè)計(jì)作品中，有個(gè)“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個(gè)iOS應(yīng)用圖標(biāo)的繪制過程。
尋找隱喻
隱喻是在彼類事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨?、語言行為和文化行為，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影，馬上就能想到相機(jī)、快門、閃光燈、暗房等。然后通過這些聯(lián)想詞，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。
競品分析
應(yīng)用市場各類產(chǎn)品不勝其數(shù)，在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì)，如何保持應(yīng)用圖標(biāo)的唯一識(shí)別性非常重要。唯一識(shí)別性不單單指圖形與其他應(yīng)用有所差異，避免創(chuàng)意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預(yù)期。
提取關(guān)鍵詞
根據(jù)收集的圖片，創(chuàng)建情緒版，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞，然后就知道在接下來的設(shè)計(jì)中應(yīng)該突出什么。我們從“影記”中可提取首字母“Y”，相機(jī)中的“快門”“信號(hào)燈”“開關(guān)機(jī)”，并依次將關(guān)鍵詞描繪成下列圖形。
抽象圖形
確立了首字母“Y”、“快門/開關(guān)機(jī)”和“信號(hào)燈”作為應(yīng)用圖標(biāo)的主圖形，接下來將繪制好的3個(gè)圖形相結(jié)合，即完成初步設(shè)想。
圖標(biāo)柵格線
使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計(jì)依據(jù)有助于建立和諧的圖標(biāo)繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。
豐富細(xì)節(jié)
通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì)，接下來我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié)，建立起應(yīng)用的產(chǎn)品氣質(zhì)?！坝坝洝弊鳛閿z影師分享佳作平臺(tái)，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應(yīng)用的主色。白色的信號(hào)燈過于普通，使用相機(jī)本身發(fā)出的橘紅色燈光作為信號(hào)燈的顏色，使其更加具有動(dòng)感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流。
多場景測試
將應(yīng)用圖標(biāo)設(shè)計(jì)稿交付開發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形，iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住，假如圖標(biāo)設(shè)計(jì)稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域。
△ 注：上圖非實(shí)際大小，僅表明不同分辨率下的比例關(guān)系
此外，應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場景中，例如在iPhone 8plus上需@3x(120px)的圖，而在iPhone7的設(shè)置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時(shí)，一些細(xì)節(jié)就會(huì)丟失，使畫面變得模糊，因此設(shè)計(jì)師應(yīng)對(duì)小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整，去除不必要的裝飾元素，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的識(shí)別度。
除了產(chǎn)品圖標(biāo)，還有一種圖標(biāo)被稱為功能（或系統(tǒng)）圖標(biāo)，功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜，如微信底部四個(gè)系統(tǒng)圖標(biāo)就使用了比較簡潔的線性風(fēng)格。
功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁或個(gè)人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航，它具有圖形化的符號(hào)，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時(shí)設(shè)計(jì)精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗(yàn)。
圖標(biāo)是良好設(shè)計(jì)系統(tǒng)的基本組成部分，對(duì)營銷材料非常有幫助。他們是插畫內(nèi)容的基礎(chǔ)構(gòu)建塊，但他們也具有很高的技術(shù)性。因此科學(xué)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范能幫助我們?cè)O(shè)計(jì)精致、風(fēng)格統(tǒng)一的圖標(biāo)。
一致性是設(shè)計(jì)圖標(biāo)的關(guān)鍵，在繪制時(shí)，一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計(jì)中，網(wǎng)格的大小必須要是4或12的倍數(shù)（安卓是8的倍數(shù)，iOS是4的是倍數(shù)）。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個(gè)數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。這里建議用48px做為常規(guī)圖標(biāo)設(shè)計(jì)尺寸。
通常我們只需要選擇一個(gè)通用的尺寸來繪制，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。
不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí)，還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的系統(tǒng)圖標(biāo)可能是24px，但是營銷圖標(biāo)是80px，兩者的使用差別會(huì)很大，那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。
知識(shí)點(diǎn)：
這里建議從最大的尺寸開始，然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡化細(xì)節(jié)要比添加容易得多，也能的保留圖標(biāo)原始狀態(tài)。
圖標(biāo)繪制基于48x48px畫布繪制的線性圖標(biāo)，線寬默認(rèn)為4px，不同場景縮放比例使用：
如果你要繪制描邊圖標(biāo)，那么需要保證所有的筆畫都是相同的粗細(xì)，并且筆畫之間的間距不要比筆畫本身更細(xì)。
圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則，keyline是網(wǎng)格的基礎(chǔ)-。通過使用這些核心形狀作為知道，你可以跨系統(tǒng)保持一致的視覺比例。
圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界，關(guān)鍵線有助于促進(jìn)圖標(biāo)統(tǒng)一性，簡化設(shè)計(jì)過程中比例調(diào)整成本，繪制小圖形需要參照小正方形的keyline。
直角拐角：當(dāng)基礎(chǔ)圖形為滿容器正方形時(shí)，建議使用3X圓角，當(dāng)基礎(chǔ)圖形為滿高（寬）矩形時(shí)，建議使用2X圓角。當(dāng)基礎(chǔ)圖形為較?。ㄐ∮?/2寬高）矩形時(shí)，建議使用1X圓角。
非直角拐角：根據(jù)圖標(biāo)場景，通常情況下無論角度，默認(rèn)均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據(jù)圖標(biāo)設(shè)計(jì)需要單獨(dú)考慮。
封閉區(qū)域，有閉合曲線構(gòu)成的為封閉區(qū)域，可以進(jìn)行獨(dú)立顏色填充；
非封閉區(qū)域，由非閉合曲線構(gòu)成的非封閉區(qū)域，原則上是不能進(jìn)行獨(dú)立的顏色填充；
封閉區(qū)域?yàn)榍€形狀且有相交線段時(shí)，原則上是不能進(jìn)行獨(dú)立的顏色填充；
當(dāng)線段與曲線相交或者與直線非垂直相交時(shí)，線段末端用圓頭端點(diǎn)；
當(dāng)線段與直線垂直相交時(shí)，線段末端用方頭端點(diǎn)；
當(dāng)圓點(diǎn)的直徑與線寬一樣時(shí)，圓點(diǎn)用圖形繪制，不用線段；
當(dāng)圓形和方形在小于16px時(shí)建議用圖形繪制，不要用線；
傾斜角度
根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來更清晰。圖標(biāo)中的傾斜角度應(yīng)為45的倍數(shù)，保持與keyline中的對(duì)角線或十字垂直相交線保持平行關(guān)系，若是矩形外框，傾斜角度也可以與矩形的對(duì)角線或十字垂直相交線保持平行關(guān)系。應(yīng)避免用13.7°，81°等這些奇怪的數(shù)值。
線段和端點(diǎn)
為保證風(fēng)格的整體一致性，圖標(biāo)所有線段端點(diǎn)默認(rèn)均應(yīng)為與線段同寬的圓角端點(diǎn)，通常情況下線段端點(diǎn)和可編輯節(jié)點(diǎn)坐標(biāo)以整數(shù)坐標(biāo)為佳。默認(rèn)基于48px畫布繪制的線性圖標(biāo)，線寬默認(rèn)為4px，無論直線和曲線在任何時(shí)候線寬都應(yīng)均保持一致。
圖標(biāo)斷口與間距
內(nèi)部結(jié)構(gòu)與外框的間距不得不小于線寬，內(nèi)部元素之間的間距不得不小于線寬的1/2px。
外形框的端口尺寸關(guān)系：4px、8px、12px，建議尺寸為4的倍數(shù)。
圖標(biāo)風(fēng)格變換
圖標(biāo)在特定規(guī)律下允許不同風(fēng)格之間的變換，分別為線性風(fēng)格（默認(rèn)）、填充風(fēng)格、混合風(fēng)格、多色混合風(fēng)格。
單雙像素描邊
如果為圖標(biāo)設(shè)置1像素的邊框，邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時(shí)候，它們看起來很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊。雙數(shù)用居中描邊，單數(shù)用外描邊，所有錨點(diǎn)要與網(wǎng)格對(duì)齊不能出現(xiàn)偏移。
線段閉合
所有線段結(jié)合處應(yīng)為閉合狀態(tài)，避免錯(cuò)位出現(xiàn)。
統(tǒng)一透視
如果圖標(biāo)有透視需求的話，就要統(tǒng)一透視角度，例如圖標(biāo)透視方向朝左，那就統(tǒng)一所有圖標(biāo)的透視角度都朝左邊。
除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標(biāo)的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會(huì)比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個(gè)固定大小的容器，這樣它們?cè)趯?dǎo)出時(shí)就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺上看起來更加平衡，避免以后開發(fā)時(shí)還需要重新調(diào)整。
繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一，還要實(shí)現(xiàn)視覺上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開視覺上的覺錯(cuò)。
UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。
根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長圖標(biāo)更緊湊。
清晰是圖標(biāo)的基本要素，在sketch中，參數(shù)不要有小數(shù)點(diǎn)，讓圖標(biāo)占滿像素網(wǎng)格。因?yàn)橛?jì)算機(jī)不能識(shí)別小數(shù)點(diǎn)，導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會(huì)把不能識(shí)別參數(shù)的部分拉伸填滿像素網(wǎng)格，導(dǎo)致圖標(biāo)出現(xiàn)虛邊。
通常從一套圖標(biāo)中最復(fù)雜的那個(gè)開始，因?yàn)樗鼤?huì)幫助我們定義相同的視覺重量，讓所有的圖標(biāo)視覺重量保持一致。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力，而且視覺上看上去更重。
默認(rèn)顏色：如果是功能圖標(biāo)，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復(fù)雜，不利于和其他設(shè)計(jì)師協(xié)作。而對(duì)于營銷圖標(biāo)，出于品牌宣傳的目的，你可能會(huì)想要使用兩種顏色，個(gè)人認(rèn)為圖標(biāo)最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標(biāo)。
選擇狀態(tài)顏色：未選擇圖標(biāo)顏色為#000000，透明度為87%；未激活圖標(biāo)顏色為#000000，透明度為54%；禁用圖標(biāo)顏色為#000000，透明度為38%。
功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁、或個(gè)人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航，它具有圖形化的符號(hào)，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時(shí)，設(shè)計(jì)精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗(yàn)。
常見的功能性圖標(biāo)風(fēng)格大致有三種：線性圖標(biāo)、面形圖標(biāo)和扁平化圖標(biāo)。但其實(shí)我們可以將「扁平化圖標(biāo)」可以看作是「線性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式，所以歸根到底，基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類：「線性圖標(biāo)」和「面型圖標(biāo)」；
線性圖標(biāo)
線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓，它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計(jì)語言，因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個(gè)場景下的幾個(gè)同等重要的圖標(biāo)，如果線條粗細(xì)不一致，會(huì)給人一種權(quán)重上存在差異的感覺。所以，在繪制線型圖標(biāo)時(shí)，通常會(huì)使用統(tǒng)一粗細(xì)的線條。
線性圖標(biāo)具有辨識(shí)度高，清晰，簡約易識(shí)別等優(yōu)點(diǎn)，線性圖標(biāo)不會(huì)對(duì)頁面造成太多的視覺干擾。缺點(diǎn)是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)對(duì)識(shí)別性產(chǎn)生較大的困擾。
常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì) ICON 所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個(gè)別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計(jì)，但粗線條的 ICON 圖形較為極簡才適用。
線性圖標(biāo)根據(jù)樣式還可以分為：雙色線性圖標(biāo)、線面填充圖標(biāo)、線性漸變圖標(biāo)。
線性圖標(biāo)使用場景
在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線框的圖標(biāo)設(shè)計(jì)，很多APP產(chǎn)品的標(biāo)簽欄都選擇用線性風(fēng)格的圖標(biāo)設(shè)計(jì)。無疑，線性圖標(biāo)可以減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上，同時(shí)輕量化的視覺語言也與扁平化的設(shè)計(jì)風(fēng)格更為融合。它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且線條本身就是一種設(shè)計(jì)語言，因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。
通常，在UI設(shè)計(jì)中，線性圖標(biāo)很少和背板同時(shí)存在，因?yàn)榫€條的圖形視覺表現(xiàn)力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規(guī)則，一些簡單的線性圖標(biāo)和背板的組合也會(huì)很協(xié)調(diào)。
面形圖標(biāo)
面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。在「微信」底部標(biāo)簽欄中，未選中的圖標(biāo)是線性圖標(biāo)，而選中的圖標(biāo)則是面形圖標(biāo)，同時(shí)顏色會(huì)變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實(shí)際上，蘋果在新的設(shè)計(jì)規(guī)范中也建議開發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo)，是否處于點(diǎn)擊態(tài)通過改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。
面形圖標(biāo)具有表意能力強(qiáng)，細(xì)節(jié)豐富，情緒感強(qiáng)，視覺突出，創(chuàng)作空間大等優(yōu)點(diǎn)。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁面中不可過多出現(xiàn)，否則會(huì)造成頁面臃腫，難分主次，用戶視覺疲勞。
面性圖標(biāo)根據(jù)不同的配色樣式可以分為：單色飽和度填充圖標(biāo)，純色漸變圖標(biāo)和多色漸變圖標(biāo)。
基于最基本的「線性圖標(biāo)」和「面型圖標(biāo)」，通過不同的形態(tài)和風(fēng)格的組合，再結(jié)合豐富的 表現(xiàn)手法，就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如：不同粗細(xì)線條線性圖標(biāo)的組合，或者面面組合，或者線面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候，需要根據(jù)自己的產(chǎn)品特征、受眾和使用場景，去選擇適合自己的表現(xiàn)形式。
面形圖標(biāo)使用場景
面形圖標(biāo)具有廣泛適用性，通常在運(yùn)動(dòng)、時(shí)尚類應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺占比最大化，具有強(qiáng)烈的視覺表現(xiàn)力。
功能入口的面形圖標(biāo)通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標(biāo)，正形即圖標(biāo)直接填充色彩且無背板。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例，雖沒有嚴(yán)格的繪制標(biāo)準(zhǔn)，但從整體視覺效果上考慮，圖標(biāo)尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時(shí)還要考慮所有圖標(biāo)的視差一致。
扁平化圖標(biāo)實(shí)際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導(dǎo)頁、空狀態(tài)也的情感化設(shè)計(jì)，后來逐漸在標(biāo)簽欄、首頁主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。
品類區(qū)圖標(biāo)的衛(wèi)視通常是位于搜索框、banner之下（也俗稱“金剛區(qū)”），而且品類區(qū)區(qū)域通常會(huì)占屏幕22%-25%不等，且位于屏幕頭部，從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關(guān)重要，而且是聚合各類子版塊的入口，為各個(gè)子版塊分發(fā)內(nèi)容引導(dǎo)流量。所以其重要性不言而喻，產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應(yīng)的功能，而圖標(biāo)具備精煉高度概括內(nèi)容的特性，識(shí)別度也大于文字，所以「金剛區(qū)」的圖標(biāo)設(shè)計(jì)通常以圖標(biāo)+說明文字為主。
常見的設(shè)計(jì)手法有：圓形底板+45度漸變+白色面形+微投影；45度漸變+扁平圖標(biāo)+微投影；簡單線性；45度漸變+不透明度+面形圖標(biāo)。
文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號(hào)。由于文字本身就是一種演化而來的符號(hào)，英文的首字母或者詞語關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標(biāo)，是一種很不錯(cuò)的表現(xiàn)手法。
比如「提示」圖標(biāo)，使用一個(gè)圓圈包裹一個(gè)英文字母「i」，意為 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進(jìn)行表達(dá)，那么就很適合使用文字符號(hào)，例如京東/天貓某些商品具備「正品保證」的標(biāo)識(shí)，這個(gè)概念太抽象了，很難用象形去概括，創(chuàng)造新的表意符號(hào)又很難被大眾接受，這時(shí)「正」字就很適合作為這個(gè)場景特定的圖標(biāo)符號(hào)，作為針對(duì)中國用戶群體的產(chǎn)品圖標(biāo)，簡單粗暴且有效。
知識(shí)點(diǎn)：
如果可能的話，盡量避免在圖標(biāo)中使用文字。因?yàn)閳D標(biāo)應(yīng)該是全球性的。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號(hào)等等)，那么請(qǐng)你自己繪制，而不是直接使用字體。
這幾年動(dòng)效設(shè)計(jì)的熱度穩(wěn)定增長，只有靜態(tài)排版的時(shí)代正在過去。動(dòng)效的出現(xiàn)，也讓圖標(biāo)擁有了更多的可能性。動(dòng)態(tài)圖標(biāo)可以讓你的app或網(wǎng)站生動(dòng)有趣，在我們所常見的各種數(shù)字產(chǎn)品當(dāng)中，UI組件和各色元素都已經(jīng)動(dòng)畫化了。
運(yùn)動(dòng)中的物體比靜態(tài)的物體更能快速引起人們的注意，在UI設(shè)計(jì)中嘗試添加一些動(dòng)畫及動(dòng)畫圖標(biāo)，不僅能在視覺上快速吸引用戶，還能使產(chǎn)品更具交互性，提升產(chǎn)品的趣味性。分享幾個(gè)動(dòng)態(tài)圖標(biāo)資源網(wǎng)站：
useAnimations：支持所有設(shè)備、網(wǎng)站、Android和iOS，可以免費(fèi)用于個(gè)人和商業(yè)用途。
Lordicon：每一個(gè)圖標(biāo)都提供線性輪廓和面形剪影兩種風(fēng)格樣式，并且圖標(biāo)是基于Lottie動(dòng)畫引擎的矢量動(dòng)畫圖標(biāo)，大小完全可擴(kuò)展，兼容所有主流瀏覽器。
Icons8 Animated icons 2.0：提供的動(dòng)態(tài)圖標(biāo)格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式，透過網(wǎng)頁可以搜尋、預(yù)覽動(dòng)態(tài)圖標(biāo)效果。
△ https://icons8.com/animated-icons
Feather：設(shè)計(jì)師Cole Bemis制作的一個(gè)開源圖標(biāo)庫，可自行調(diào)節(jié)圖標(biāo)大小和線條粗細(xì)。
科學(xué)和的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標(biāo)，并且?guī)椭_發(fā)縮短命名時(shí)間，加強(qiáng)團(tuán)隊(duì)寫作效率。切圖可按照“業(yè)務(wù)_類型_功能_大小_狀態(tài)”的格式進(jìn)行命名。
切圖命名的格式建議為全英文，可在切圖之前對(duì)圖層進(jìn)行命名，常用切圖命名對(duì)照表如下所示。
圖標(biāo)的繪制方式主要有兩種：布爾運(yùn)算 和 貝塞爾曲線。
布爾運(yùn)算
布爾指的是喬治·布爾，19世紀(jì)的一位數(shù)學(xué)家，為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn)，所以將這種運(yùn)算稱為布爾運(yùn)算。
布爾運(yùn)算聽起來比較難，但其實(shí)非常簡單，布爾運(yùn)算采用的數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計(jì)師在使用軟件過程中引用了這種邏輯運(yùn)算方法，對(duì)應(yīng)到設(shè)計(jì)軟件中，就有：合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個(gè)圓形相減可以得到一個(gè)月亮的造型，這就是布爾運(yùn)算。
基本上通過布爾運(yùn)算，我們能繪制出常見的大部分圖標(biāo)了，但有時(shí)我們需要針對(duì)某些線條進(jìn)行單獨(dú)的調(diào)整，又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo)，這個(gè)時(shí)候就需要用到貝塞爾曲線了。
貝塞爾曲線
貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表。他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。
貝塞爾曲線包括：節(jié)點(diǎn)、控制點(diǎn)、控制線、曲線這幾個(gè)基本概念。
矢量圖形便是由這幾個(gè)基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成，控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線，控制線就像皮筋一樣，調(diào)整控制點(diǎn)的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類型，一種是沒有控制點(diǎn)和控制線的「直線節(jié)點(diǎn)」；另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」，這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn)，另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化，適合繪制對(duì)稱結(jié)構(gòu)的曲線；再有一種是「無關(guān)聯(lián)節(jié)點(diǎn)」，即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線而不互相影響；最后一種是「不對(duì)稱關(guān)聯(lián)節(jié)點(diǎn)」，這種類型下，節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線上，但是卻不會(huì)對(duì)稱控制線的長度。
知識(shí)點(diǎn)：
在 Sketch 中，我們可以在選中節(jié)點(diǎn)后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當(dāng)前節(jié)點(diǎn)的類型，加快繪制效率。
鋼筆工具
繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對(duì)于新手可能稍微薇有點(diǎn)復(fù)雜，但是一但上手，會(huì)非常方便。The Bézier Game 這個(gè)是一個(gè)非常不錯(cuò)的練習(xí)鋼筆工具的網(wǎng)站，以游戲的形式練習(xí)鋼筆工具，通關(guān)的時(shí)候你對(duì)鋼筆工具就已經(jīng)輕車熟路了。
繪制實(shí)戰(zhàn)
這里選擇了幾個(gè)比較典型的圖標(biāo)，簡單演示下繪制方法和各自的繪制思路：
面性
眼睛：布爾運(yùn)算相交 / 相減 / 合并形狀
繪制一個(gè)正圓，然后復(fù)制這個(gè)正圓形，通過布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓，再繪制兩個(gè)圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉(zhuǎn) / 相減
這個(gè)圖標(biāo)由兩個(gè)大小圓形相減，得到環(huán)形，再繪制一個(gè)和大圓半徑相等的正方形，和圓環(huán)左、下對(duì)齊，最后逆時(shí)針旋轉(zhuǎn)45度完成。
WIFI：相加 / 相減 / 旋轉(zhuǎn)
繪制多個(gè)圓通過布爾運(yùn)算的相加減得出三個(gè)圓圈嵌套“靶子造型，再繪制一個(gè)正三角形，和靶子圖形相交得到Wi-Fi圖標(biāo)。
齒輪：旋轉(zhuǎn) / 相減
通過兩個(gè)圖形的布爾運(yùn)算得到環(huán)形，然后繪制一個(gè)梯形，復(fù)制一個(gè)鏡像，將其對(duì)齊環(huán)形兩端，復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次（45度），最后合并全部形狀完成。
鈴鐺：相加 / 相減
由3個(gè)矩形組成鈴鐺主體，鈴鐺頂部圓頂結(jié)構(gòu)通過設(shè)置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算，完成。
線性
放大鏡：旋轉(zhuǎn) / 相加
繪制一個(gè)正圓和一條線，用對(duì)齊工具將其居中對(duì)齊，編組后逆時(shí)針旋轉(zhuǎn)45度即可。
時(shí)鐘：鋼筆 / 剪刀工具
繪制一個(gè)正圓和一個(gè)矩形，使圓形的左下角對(duì)齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個(gè)錨點(diǎn)，再用剪刀工具減去多余的線條即可。
雨傘：相減 / 剪刀工具
繪制一個(gè)正圓，再繪制一個(gè)矩形與其相減得到傘頂，然后繪制一個(gè)矩形，通過剪刀工具減去多余部分，得到傘架，傘把手圓角化處理，完成。
相機(jī)：合并
繪制一個(gè)矩形和一個(gè)梯形，通過合并得到相機(jī)主體，再繪制一個(gè)正圓完成相機(jī)鏡頭部分，完成。
愛心：相加 / 旋轉(zhuǎn)
繪制兩個(gè)正圓和一個(gè)直徑與圓形等寬的正方形，然后逆時(shí)針旋轉(zhuǎn)45度所得。
無規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來。在設(shè)計(jì)上也是如此，規(guī)范具有統(tǒng)一輸出，指引細(xì)節(jié)、便于查看的好處，規(guī)范就是一組圖標(biāo)中的規(guī)矩，所有圖標(biāo)的繪制都按照規(guī)矩來，最終的成品就會(huì)顯得井然有序。
小小的圖標(biāo)是由很多圖形元素組成的，在這些圖標(biāo)中，元素的一致性是建立一個(gè)共同視覺于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè)圖標(biāo)和他們之間細(xì)微的差異，也將幫助我們學(xué)會(huì)圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu)，依次是筆畫末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。
在制定規(guī)范時(shí)，我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范，依次按照上述圖標(biāo)元素進(jìn)行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度，光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規(guī)范的三個(gè)過程：
△ 圖標(biāo)設(shè)計(jì)規(guī)范
設(shè)計(jì)中，我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢？
其實(shí)二者沒有太明顯的選擇優(yōu)劣，很多場景下已經(jīng)越來越模糊，但總的來說，還是有一些法則可以作為參考：
常用的手法：在App的底部導(dǎo)航欄，選中狀態(tài)使用面型圖標(biāo)，而非選中狀態(tài)使用線性圖標(biāo)；
16px左右的小圖標(biāo)慎用線性圖標(biāo)，線性圖標(biāo)在16px下，可排布像素的區(qū)域較小，這個(gè)時(shí)候線性圖標(biāo)不容易設(shè)計(jì)；
面型圖標(biāo)比起線性圖標(biāo)，除裝飾性外具備更強(qiáng)的視覺信息層次感，更具引導(dǎo)性，比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面，使用面型圖標(biāo)；
車載等系統(tǒng)界面，更適合用面型圖標(biāo)，面型圖標(biāo)的視覺面積較大，短時(shí)間內(nèi)更加容易識(shí)別；
線性圖標(biāo)看起來通常會(huì)更加細(xì)膩精致，適合比較精致簡潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì)；
文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標(biāo)，那么可能會(huì)提供1x、2x和3x.的png文件，以適應(yīng)多種設(shè)備。而對(duì)于開發(fā)和其他設(shè)計(jì)人員，則通常需要導(dǎo)出.svg文件，這些文件可以在設(shè)計(jì)程序中編輯，并且可以通過代碼在應(yīng)用程序或?yàn)g覽器中繪制。導(dǎo)出的svg可以用sketch的官方插件「sketch-SVGO」進(jìn)行代碼優(yōu)化，壓縮svg的體積，精簡svg代碼。
△ sketch-SVGO 插件官方下載頁
svg格式僅支持居中描邊的圖標(biāo)，并且不支持投影，因此對(duì)于復(fù)雜豐富的圖標(biāo)還是切img圖為好。
完成圖標(biāo)后需要進(jìn)行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi)，讓其他人幫忙來檢查你的圖標(biāo)是否整潔是非常有必要的。對(duì)圖標(biāo)精心設(shè)計(jì)評(píng)審，合格后再加入資源庫，這樣避免多人同時(shí)修改而造成混亂，同時(shí)提升團(tuán)隊(duì)協(xié)作效率。推薦一個(gè)免費(fèi)的圖標(biāo)管理工具：Nucleo，團(tuán)隊(duì)協(xié)作需要付費(fèi)。
△ 圖標(biāo)資源管理工具：Nucleo
我們了解了 icon 的基本知識(shí)，那么如何設(shè)計(jì)一個(gè)好的 icon 呢？怎樣評(píng)判我們的 icon 是否合適，是否貼合整個(gè)產(chǎn)品呢？我們需要了解什么才是一個(gè)好的 icon 。
我們可以從以下五個(gè)方面來檢驗(yàn)，分別是：識(shí)別性，規(guī)范性、統(tǒng)一性、呼吸感與品牌感。
1. 識(shí)別性
圖標(biāo)就是幫助用戶理解信息，所以識(shí)別性（也可以說是可訪問性）是一個(gè)圖標(biāo)最重要的一項(xiàng)，尤其在沒有文字說明的情況下，一定不能讓用戶產(chǎn)生疑惑。我們檢測圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對(duì)比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié)，還需要確保圖標(biāo)中的每一種顏色都是可見的。
圖標(biāo)識(shí)別性可以分為兩類，分別是含義識(shí)別和視覺識(shí)別。
靈活的設(shè)計(jì)思路，在保證識(shí)別度的前提下靈活發(fā)揮，嘗試各種不同風(fēng)格的表現(xiàn)形式。
當(dāng)然，腦洞也不要太大，失去了原本的含義，造成誤解。
2. 規(guī)范性
規(guī)范性也是做好一個(gè)圖標(biāo)的基礎(chǔ)，我們要保證圖標(biāo)在視覺大小的一致性，圖標(biāo)飽滿度、遵循同一種規(guī)律，細(xì)節(jié)統(tǒng)一性。
視覺大小的一致性：在相同尺寸的基礎(chǔ)上分析形狀間的視覺差異，來審視視覺上是否統(tǒng)一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規(guī)定它的最大尺寸，進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整，使得視覺大小達(dá)到統(tǒng)一；
3. 統(tǒng)一性
在繪制多個(gè)類型相同的圖標(biāo)時(shí)，我們需要注意這一套圖標(biāo)合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中，會(huì)有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣，所表達(dá)的內(nèi)容也不同。這時(shí)，圖標(biāo)一致性的意義就體現(xiàn)出來了，根據(jù)格式塔原理中的相似性原則：人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級(jí)別的元素，則應(yīng)在視覺上保持統(tǒng)一匹配。
圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線條的粗細(xì)比重，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。
圖標(biāo)的統(tǒng)一性可以從：線條粗細(xì)、設(shè)計(jì)語言、復(fù)雜程度、顏色規(guī)范四個(gè)大的方向去著手。
線條粗細(xì)：相同功能類型的圖標(biāo)線寬粗細(xì)統(tǒng)一，有背板的圖標(biāo)線條不易過細(xì)；
設(shè)計(jì)語言：可拆分為透明度（拉開層次）、圓角（圓角還是直角）、斷線開口（開口位置）、設(shè)計(jì)特征四個(gè)緯度去規(guī)范；
復(fù)雜程度：如果不能簡化圖標(biāo)，就保持同一組圖標(biāo)的墨水重量一致，簡化太復(fù)雜的圖標(biāo)，增強(qiáng)辨識(shí)度；
顏色規(guī)范：對(duì)于線面結(jié)合的扁平圖標(biāo)建議最多用兩種顏色，活動(dòng)入口圖標(biāo)如果需要的色彩數(shù)量多，那就需要保持敏感，從一種色彩的周圍小幅度提取另一種色彩或多種色彩，調(diào)整其色相、飽和度、明度就能搭配出許多和諧的顏色。
4. 呼吸感
呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。在圖標(biāo)的繪制過程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過近，元素也不宜過多。圖標(biāo)是一個(gè)物體的簡略縮影，目的是為了表達(dá)內(nèi)容，讓用戶快速理解，太過復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過程中應(yīng)該刪除所有無法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過復(fù)雜難以識(shí)別。
5. 品牌感
品牌感就是我們上面談到的要與品牌理念相符，傳達(dá)給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設(shè)計(jì)的角度去理解，尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計(jì)中。
那么，該如何提升品牌感，打造屬于自己App的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€索，這是近年來非常流行的一種趨勢。
我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性，但是打開許多APP你會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角、斷線等設(shè)計(jì)語言，但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無個(gè)性的通病，使得UI看上去普通、不精致，缺少產(chǎn)品氣質(zhì)。
那么，該如何打造屬于自己APP的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€索。它是由平面設(shè)計(jì)中的VIS（視覺識(shí)別系統(tǒng)）引入的一種設(shè)計(jì)策略，通過對(duì)品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺符號(hào)。每一個(gè)APP都有其品牌形象，代表了與眾不同的氣質(zhì)。接下來，我們就來學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì)。
1. 提取品牌圖形
通常一個(gè)App的第一個(gè)tab是首頁，是用戶進(jìn)入App后看到的第一個(gè)頁面，最常見的圖標(biāo)設(shè)計(jì)是一個(gè)小房子的圖形。首頁是App中最重要的頁面，承載了整個(gè)產(chǎn)品的核心功能，是用戶瀏覽最多的地方，因此使用一個(gè)讓人印象深刻的品牌圖形作為“首頁”圖標(biāo)是必要的，不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象，加強(qiáng)了用戶對(duì)App的良好印象。例如網(wǎng)易云音樂的首頁標(biāo)簽就直接使用了它的品牌圖形，其優(yōu)點(diǎn)不言而喻。
但是請(qǐng)注意，這種設(shè)計(jì)策略并不適合于所有的App，當(dāng)?shù)谝粋€(gè)tab被賦予特定功能，就不可使用品牌圖形，否則用戶會(huì)難以理解。例如微信第一個(gè)tab是聊天列表，此時(shí)使用氣泡就比品牌圖形更加合適。
還有另外一種情況。通常一個(gè)App的最后一個(gè)tab是個(gè)人中心，即“我的”。如果App的品牌圖形是動(dòng)物圖形，也可以使用其整體或局部圖形來作為「個(gè)人中心」的入口圖標(biāo)。
2. 提取品牌色彩
色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁面時(shí)感覺舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù)，可以給用戶帶來由內(nèi)而外一致的視覺體驗(yàn)。在設(shè)計(jì)時(shí)提取品牌色彩可適當(dāng)調(diào)整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標(biāo)背景色，使圖標(biāo)之間形成色彩上的關(guān)聯(lián)。直播應(yīng)用Bigo Live的品牌色是青藍(lán)色，在標(biāo)簽欄的圖標(biāo)設(shè)計(jì)上（選中態(tài)）將圖形局部元素填充青藍(lán)漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調(diào)性高度一致。
3. 提取設(shè)計(jì)語言
在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素，這在圖標(biāo)設(shè)計(jì)中同樣適用，當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素，他們就構(gòu)成了一套完整的視覺符號(hào)。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓，這樣他們就形成了某種視覺聯(lián)系。
4. 提取產(chǎn)品氣質(zhì)
品牌形象決定了產(chǎn)品的氣質(zhì)，而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個(gè)人的時(shí)候，往往會(huì)根據(jù)他的外貌形象特征，產(chǎn)生一個(gè)大致的印象，這就是一個(gè)人的氣質(zhì)。APP也同樣，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進(jìn)行拆解組合，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。
5. 拆分品牌名稱
App標(biāo)簽欄圖標(biāo)最常見的形式是圖形加文字的組合，由于文字本身就能傳達(dá)最直接的含義，因此圖形的識(shí)別性并不那么重要了，我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個(gè)性。MONO是一款閱讀類App，它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個(gè)字母拆分成4個(gè)圖形。雖然每個(gè)字母與其對(duì)應(yīng)的功能模塊本身并沒有直接聯(lián)系，但加上標(biāo)簽文字的輔助也不會(huì)造成閱讀困難，而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了。
6. 展開形象聯(lián)想
我們?nèi)粘Ｊ褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊：首頁、發(fā)現(xiàn)、動(dòng)態(tài)、我的等，因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì)。比如“首頁”是尖頂房子，“發(fā)現(xiàn)”是眼睛，“動(dòng)態(tài)”是氣泡，如果有差別也只是設(shè)計(jì)風(fēng)格的差異，有的直角有的圓角，有的線性有的面形。這樣的設(shè)計(jì)沒有品牌歸屬感，試一下將這些圖標(biāo)單獨(dú)拿出來就無法判斷它是誰，它從哪兒來？
優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力，還要具備豐富的設(shè)計(jì)想象力，不拘泥于設(shè)計(jì)規(guī)范的條條框框，有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo)?！笆醉摗背诵》孔游覀冞€可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標(biāo)是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設(shè)計(jì)與品牌形象緊密相連，簡直完美！不過的改版好像已經(jīng)改沒了。
知識(shí)點(diǎn)：
總之，要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格，就要從外觀和顏色上確立主風(fēng)格，在局部尋求個(gè)性特征，將兩者結(jié)合，并融合產(chǎn)品屬性和符合用戶定位，先在腦海中構(gòu)思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個(gè)最佳方案上機(jī)完成，只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié)，在尺寸有限的界面上，小小的 icon 可以更加簡單的表達(dá)含義，傳遞給用戶正確和友好的指引。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格，以滿足不同的業(yè)務(wù)需求。另外，關(guān)于如何繪制keyline線，還有的iphone12樣機(jī)，有需要的同學(xué)可以出門右轉(zhuǎn)私信我。
1. 圖標(biāo)的定義
1. 中文文字圖標(biāo)
2. 英文字母圖標(biāo)
3. 數(shù)字圖標(biāo)
4. 特殊符號(hào)圖標(biāo)
5. 幾何圖形
6. 單雙形/剪影
7. 線形
8. 動(dòng)物圖形/剪影
9. 卡通形象
10. 正負(fù)形
11. 白色漸變
12. 彩色漸變
13. 無
14. 應(yīng)用圖標(biāo)的作用
1. iOS應(yīng)用圖標(biāo)
2. 安卓應(yīng)用圖標(biāo)
3. iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程
1. 圖標(biāo)的規(guī)范
2. 圖標(biāo)尺寸
3. 圖標(biāo)的keyline
4. 圖標(biāo)關(guān)鍵圖形
5. 圖標(biāo)的拐角
6. 圖標(biāo)區(qū)域 封閉和非封閉
7. 圖標(biāo)繪制規(guī)則
8. 視覺柵格
9. 視覺重量
10. 圖標(biāo)繪制細(xì)節(jié)
11. 圖標(biāo)的顏色
12. 功能圖標(biāo)的風(fēng)格
13. 扁平圖標(biāo)的使用場景
14. 品類區(qū)圖標(biāo)
15. 文字圖標(biāo)
16. 動(dòng)態(tài)圖標(biāo)
17. 圖標(biāo)命名規(guī)則
1. 圖標(biāo)繪制方法
2. 制定規(guī)范
3. 線性or面性
4. 圖標(biāo)導(dǎo)出
5. 圖標(biāo)管理和交付
文章來源：優(yōu)設(shè) 作者：印跡時(shí)光
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com