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