圖標(biāo)設(shè)計是UI設(shè)計中非常重要的環(huán)節(jié)，因為除了文字和圖片的排版之外，在扁平時代能夠傳遞給用戶情緒和設(shè)計感的通道就是頁面中的各種圖形與圖標(biāo)。全文16,834字，閱讀時長約35分鐘。
圖標(biāo)是UI設(shè)計中除了文字之外最不可或缺的視覺元素，在設(shè)計中看似只占一個很小的區(qū)域，但是它卻是考驗設(shè)計師基本功的重要標(biāo)準(zhǔn)，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計的必備條件。
本文盡量將圖標(biāo)進行系統(tǒng)一些的介紹說明，當(dāng)然僅一篇文章是不可能面面俱到包含所有知識點。內(nèi)容比較基礎(chǔ)，主要以 設(shè)計概念 和 設(shè)計思路 為主，對圖標(biāo)相關(guān)的內(nèi)容進行組織梳理和分類，便于小伙伴們建立圖標(biāo)的概念體系。過程中也有針對幾種典型的圖標(biāo)結(jié)構(gòu)進行實操代練，想要把圖標(biāo)設(shè)計的更好，這就需要我們在平時勤加練習(xí)外，還要進行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?
1.1 圖標(biāo)的定義
圖標(biāo)，也稱為icon或Picoto，是計算機世界對現(xiàn)實世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。它的本質(zhì)是一種符號，它采用對這個世界的隱喻，來指代功能，含義，用途等。
圖標(biāo)做為國際通用性語言，生活中隨處可見，例如商場導(dǎo)視中收銀臺圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，日常手機里使用的那些App圖標(biāo)，如微信、電話、短信等。的確，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。
如果粗淺劃分的話，UI設(shè)計中常見的圖標(biāo)大致分為2大類，第一類我們稱之為「標(biāo)志性圖標(biāo)」，比如手機中應(yīng)用啟動圖標(biāo)；第二類我們稱之為「功能性圖標(biāo)」，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導(dǎo)或操作。
1.2 圖標(biāo)的重要性
對于UI設(shè)計而言，圖標(biāo)可以說是整個產(chǎn)品的點睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中，圖標(biāo)幾乎是這個頁面的核心支撐體，它直接影響著產(chǎn)品的視覺體驗和產(chǎn)品調(diào)性。它有以下幾點好處：
全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣；
節(jié)約空間：如果在一個圖標(biāo)能夠表述清楚含義的時候，比如用一個叉就可以不用寫「關(guān)閉」；
快速定位：圖標(biāo)可以用它獨特的形狀或者顏色讓人快速定位到一個功能；
上下文的定位：比如小飛機的圖標(biāo)單獨放出來不確定是什么，但是在和收件箱在一起它就可以認為是發(fā)件箱了。
1.3 發(fā)展歷程
如你所知，圖標(biāo)、標(biāo)識都不是界面設(shè)計師所創(chuàng)造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當(dāng)中，早期用來傳達信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標(biāo)和標(biāo)識。
隨著技術(shù)的發(fā)展，計算機誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀(jì)70年代，施樂在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續(xù)機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟，Windows 對抗 Macintosh。當(dāng)然這都是后話。
來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發(fā)布了彩色的圖標(biāo)設(shè)計。圖標(biāo)所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。
從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è)計，但由于它們的表現(xiàn)形式太過于抽象，缺乏情感的傳遞，并沒有獲得用戶的青睞。
在此之后，越來越多的圖標(biāo)開始借由靈活而強大的數(shù)字技術(shù)而誕生，并且基于不同的需求而演化出不同的分支和風(fēng)格。許多操作系統(tǒng)和工具開始預(yù)制一些成體系的圖標(biāo)，誕生基于種種需求，越來越多的自制的、重設(shè)計的圖標(biāo)，逐步進入了我們的視野。圖標(biāo)類型很多，我們可以用不同的方式來劃分它們。
圖標(biāo)的類型
2.1 擬物圖標(biāo)
由于人們都是通過以往的認知來理解新事物，所以基于這一點，早期應(yīng)用界面必然要采用擬物風(fēng)格，以便于人們的理解和操作。是一個由實物 → 符號的發(fā)展歷程。
例如「保存」圖標(biāo)就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標(biāo)的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當(dāng)成一個實體來使用，甚至這個符號的實體已經(jīng)淡出歷史，但人們還在習(xí)慣性使用這個符號。
更具體點來說，擬物設(shè)計就是追求模擬現(xiàn)實物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等各種效果對實物進行再現(xiàn)（也可適當(dāng)程度變形和夸張）；扁平化設(shè)計就是摒棄以上對效果（尤其是高光、陰影等能造成透視感的效果）的追求，轉(zhuǎn)而通過抽象、簡化、符號化的設(shè)計元素來表現(xiàn)。你還記得曾經(jīng)熬夜畫寫實圖標(biāo)的日子嘛～上千個圖層不在話下有木有！
但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因為用戶關(guān)注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。再者，大家都熟悉的事物其實非常有限，而 APP 的創(chuàng)新卻在不斷進行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實世界就沒有參照物，所以也決定了擬物圖標(biāo)必然會被取代。
2.2 扁平圖標(biāo)
區(qū)別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，進行平面化的表現(xiàn)。
2013年，蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來。并且在設(shè)計元素上強調(diào)抽象、極簡、符號化的概念。
扁平圖標(biāo)風(fēng)格發(fā)展的后期，由于它們表現(xiàn)形式太過于抽象、缺乏情感的傳遞，也沒有獲得大眾的青睞，這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質(zhì)靠攏，即“認知簡約”。也許當(dāng)滿世界都是扁平化后，擬物化的設(shè)計卻又變得更顯眼了呢？最近流行的新擬物風(fēng)格就是最好的證明。
2.3 微扁平、輕擬物
從扁平風(fēng)格發(fā)展至現(xiàn)在，圖標(biāo)慢慢開始發(fā)展到微扁平輕擬物的方向，相較于擬物風(fēng)格不會有太多復(fù)雜的視覺元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會使用加入漸變甚至輕質(zhì)感的圖標(biāo)。
2.4 線性圖標(biāo)
線性圖標(biāo)是由直線、曲線、點在內(nèi)等元素組合而成的圖標(biāo)樣式，通過線來塑造輪廓。線性圖標(biāo)具有辨識度高，清晰，簡約易識別等優(yōu)點，線性圖標(biāo)不會對頁面造成太多的視覺干擾。缺點是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)對識別性產(chǎn)生較大的困擾。
在圖標(biāo)設(shè)計中使用的線有粗細之分，常用的App圖標(biāo)設(shè)計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。直角線條的icon顯得專業(yè)嚴(yán)謹(jǐn)，圓角粗線條的 ICON 顯得飽滿而可愛。
2.5 面性圖標(biāo)
面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計感的差別。
面形圖標(biāo)具有表意能力強，細節(jié)豐富，情緒感強，視覺突出，創(chuàng)作空間大等優(yōu)點。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，預(yù)知點擊后的狀態(tài)。但是面性圖標(biāo)在頁面中不可過多出現(xiàn)，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
2.5 文字圖標(biāo)
文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關(guān)鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標(biāo)，是一種很不錯的表現(xiàn)手法。
比如「提示」圖標(biāo)，使用一個圓圈包裹一個英文字母「i」，表示 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標(biāo)識，這個概念太抽象了，很難用象形去概括，創(chuàng)造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標(biāo)符號，作為針對中國用戶群體的產(chǎn)品圖標(biāo)，簡單粗暴且有效。
如果可能的話，盡量避免在圖標(biāo)中使用文字。因為圖標(biāo)應(yīng)該是全球性的。如果你確實需要文字圖標(biāo)(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。
2.6 " 新擬物 "風(fēng)格圖標(biāo)
蘋果在 WWDC20 搞了個大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個將 " 新擬物 " 設(shè)計投入大規(guī)模商用的操作系統(tǒng)，這可視為 " 新擬物 "在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 " 外觀 " 設(shè)置里，多了一項名為" 自適應(yīng)強調(diào)色 "的選項。蘋果將主題色的指定權(quán)留給開發(fā)者，這是否暗示新一代 App 在光影上會有更豐富的效果？
" 新擬物 " 設(shè)計的精髓在于對光線的絕妙運用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間，進而打造一種全新的視覺體驗。
不同于傳統(tǒng)的擬物，" 新擬物 "雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質(zhì)是自然界不存在的。換句話說，" 新擬物 " 是將真實光線用于虛擬對象，而 " 擬物 " 是還原實際物品在特定光照下的效果；
由于整個設(shè)計界將不得不考慮新擬物風(fēng)格，圍繞該風(fēng)格的可能性將會有爆炸性的發(fā)展，并且這種新的數(shù)字空間設(shè)計理念如何能夠合理地適用于用戶界面設(shè)計和功能性將取得更大的突破。與以往一樣，第三方應(yīng)用將比蘋果更大膽、更快速地推動這一風(fēng)格——這也是我們將會真正開始解鎖新擬物優(yōu)勢的時候。
產(chǎn)品應(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)格主要有以下幾種。
3.1 中文文字圖標(biāo)
中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計模式即字體設(shè)計，提取應(yīng)用名稱中的一個或多個漢字，進行設(shè)計變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。
3.1.1 單字
提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設(shè)計，以達到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識別性強。
3.1.2 多字
多字圖標(biāo)設(shè)計要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個字，最多兩行（四個字）排列。
其優(yōu)點是更加直接的告訴用戶產(chǎn)品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。
3.1.3 字加圖形組合
文字加輔助圖形的組合，也是常見的產(chǎn)品圖標(biāo)設(shè)計方法，相比純文字圖標(biāo)，顯得更加豐富有獨特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。
3.2 英文字母圖標(biāo)
英文設(shè)計與中文設(shè)計的設(shè)計模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點或行業(yè)屬性進行創(chuàng)意加工，新的字母圖形依舊保持本身的識別性。
3.2.1 單字母
通常提取英文首字母進行設(shè)計，由于英文字母本身結(jié)構(gòu)簡潔，稍加改動就很容易達到設(shè)計感于識別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。
3.2.2 多字母
提取產(chǎn)品全稱或幾個單詞的首字母組合而成，形成獨有的產(chǎn)品簡稱，方便用戶記憶。
3.2.3 字母加圖形組合
字母加圖形組合的設(shè)計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。
3.3 數(shù)字圖標(biāo)
直接用數(shù)字做應(yīng)用圖標(biāo)的相對較少，但是數(shù)字識別性強，易于傳播的特點。利用數(shù)字進行設(shè)計能給人親和力。難點是怎樣與品牌形成強關(guān)聯(lián)性。
3.4 特殊符號圖標(biāo)
由于符號本身的含義會對產(chǎn)品屬性有一定限制，所以特殊符號在應(yīng)用圖標(biāo)的設(shè)計案例中相對較少。如“$”符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，無法運用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。
除了中英文圖標(biāo)，還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計模式的優(yōu)點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：
3.5 幾何圖形
幾何圖形的設(shè)計模式給人簡約、現(xiàn)代、個性等視覺感受，從單個具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩(wěn)定、現(xiàn)代、時尚等，添加圓角后又會更加親民、可愛。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進行創(chuàng)意。此類型較考驗設(shè)計師的圖形創(chuàng)意能力。
3.6 單雙形/剪影
單雙形是指應(yīng)用圖標(biāo)只展示單個或兩個的剪影圖形。通常有兩種設(shè)計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計模式的優(yōu)點是簡潔明確，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。
3.7 線形
線形的設(shè)計模式分為兩種設(shè)計方式，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質(zhì)，適合于文藝、清新的應(yīng)用，在界面設(shè)計時保持這種干凈明快的風(fēng)格，才能與應(yīng)用圖標(biāo)設(shè)計表里如一。線性風(fēng)格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風(fēng)格曲線組成“A”，同時是一個小蜜蜂。
3.8 動物圖形/剪影
動物作為圖標(biāo)設(shè)計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設(shè)計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。
3.9 卡通形象
卡通風(fēng)格的產(chǎn)品圖標(biāo)會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產(chǎn)品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的?？ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格，如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。
3.10 正負形
以正形為底突出負形特征，以負形表達產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標(biāo)中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應(yīng)用，而正形圖形強調(diào)產(chǎn)品氣質(zhì)。
3.11 白色漸變
白色漸變的設(shè)計模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。
3.12 彩色漸變
色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。
3.13 無
無，即沒有設(shè)計。除了背板什么也沒有。雖然這類設(shè)計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標(biāo)設(shè)計成一塊黃油的樣子已深入人心了。
應(yīng)用圖標(biāo)尺寸規(guī)格
4.1 iOS應(yīng)用圖標(biāo)
iOS6及之前的版本，應(yīng)用圖標(biāo)的圓角半徑都可以通過1/4圓繪制出來，即繪制標(biāo)準(zhǔn)的圓角矩形即可，主屏幕應(yīng)用圖標(biāo)為114*114px，使用20px圓角半徑，App store應(yīng)用圖標(biāo)為512*512px，使用90px圓角半徑等。從iOS7開始，主屏幕應(yīng)用圖標(biāo)調(diào)整為120*120px，并且不再是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線，接近于26-27px圓角半徑。
我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標(biāo)準(zhǔn)圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區(qū)別在于其曲線稍微向中心收緊。
事實上，我們很難在Retina屏幕上區(qū)分這么席位的差別，因此設(shè)計師在繪制iOS應(yīng)用圖標(biāo)時不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)同學(xué)即可，如果應(yīng)用圖標(biāo)需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。
4.2 安卓應(yīng)用圖標(biāo)
安卓應(yīng)用圖標(biāo)同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設(shè)計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標(biāo)。
4.3 iOS應(yīng)用圖標(biāo)設(shè)計流程
在我之前的設(shè)計作品中，有個“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個iOS應(yīng)用圖標(biāo)的繪制過程。
4.3.1 尋找隱喻
隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談?wù)摯祟愂挛锏男睦硇袨?、語言行為和文化行為，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯(lián)想詞，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。
4.3.2 競品分析
應(yīng)用市場各類產(chǎn)品不勝其數(shù)，在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計，如何保持應(yīng)用圖標(biāo)的唯一識別性非常重要。唯一識別性不單單指圖形與其他應(yīng)用有所差異，避免創(chuàng)意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預(yù)期。
4.3.3 提取關(guān)鍵詞
根據(jù)收集的圖片，創(chuàng)建情緒版，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞，然后就知道在接下來的設(shè)計中應(yīng)該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關(guān)機”，并依次將關(guān)鍵詞描繪成下列圖形。
4.3.4 抽象圖形
確立了首字母“Y”、“快門/開關(guān)機”和“信號燈”作為應(yīng)用圖標(biāo)的主圖形，接下來將繪制好的3個圖形相結(jié)合，即完成初步設(shè)想。
4.3.5 圖標(biāo)柵格線
使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計一句有助于建立和諧的圖標(biāo)繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。
4.3.6 豐富細節(jié)
通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計，接下來我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細節(jié)，建立起應(yīng)用的產(chǎn)品氣質(zhì)?！坝坝洝弊鳛閿z影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應(yīng)用的主色。然后，白色的信號燈過于普通，使用相機本身發(fā)出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。
4.3.7 多場景測試
將120*120px應(yīng)用圖標(biāo)設(shè)計稿放大至1024*1024px，交付開發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計稿應(yīng)是直角矩形，iOS會自動應(yīng)用一個圓角遮罩將圖標(biāo)的4個角遮住，假如圖標(biāo)設(shè)計稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域。
△ 注：上圖非實際大小，僅表明不同分辨率下的比例關(guān)系
此外，應(yīng)用圖標(biāo)還會以不同的分辨率出現(xiàn)在不同場景中，例如在iPhone 8plus上需@3x的圖，即將120px的圖標(biāo)放大至1.5倍；而在iPhone7的設(shè)置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節(jié)就會丟失，使畫面變得模糊，因此設(shè)計師應(yīng)對小尺寸圖標(biāo)進行席位調(diào)整，去除不必要的裝飾元素，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的識別度。
APP中的功能圖標(biāo)
除了產(chǎn)品圖標(biāo)，還有一種圖標(biāo)被稱為功能（或系統(tǒng)）圖標(biāo)，功能圖標(biāo)指的是擔(dān)負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復(fù)雜，如微信底部四個系統(tǒng)圖標(biāo)就使用了比較簡潔的線性風(fēng)格。
功能圖標(biāo)在UI設(shè)計中占據(jù)非常重要的作用，幾乎存在于每一個應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導(dǎo)航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時設(shè)計精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。
在 @1x 一倍圖設(shè)計模式下，以 24px 為網(wǎng)格基準(zhǔn)的話，常使用的圖標(biāo)粗細有：1px 、1.5px、2px、3px，1.5的粗細常用于高倍屏，如近幾年旗艦機的手機屏幕或者 retina電腦屏，否則像素渲染會比較模糊。
5.1 圖標(biāo)柵格
圖標(biāo)柵格被用來促進圖標(biāo)的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標(biāo)準(zhǔn)化的規(guī)范造就了一個靈活但有條理的系統(tǒng)，令所有的設(shè)計保持協(xié)調(diào)、一致和美學(xué)的視覺特征。
5.1.1 像素柵格
基于像素劃分的像素柵格是最基礎(chǔ)的柵格系統(tǒng)。在繪制圖標(biāo)時，我們總是希望將對象對齊到每一個像素，特別是直線。因為像素對齊不僅僅可以更好地渲染，還能讓圖標(biāo)更加整潔、舒服。下圖展示了Sketch 中像素對齊和沒對齊圖標(biāo)之間的差異：
左：像素不對齊 右：像素對齊
可以在繪制圖標(biāo)之前就先設(shè)置好柵格，在Sketch和Figma中都有相似的設(shè)置。
Material Design官網(wǎng)給出了圖標(biāo)的輔助網(wǎng)格，為設(shè)計師繪制小圖標(biāo)提供一致的標(biāo)準(zhǔn)。圖標(biāo)網(wǎng)格通常包含三部分內(nèi)容：活動區(qū)域，修飾區(qū)域，關(guān)鍵線形狀。我們以此為例進行介紹。
活動區(qū)域：是指圖標(biāo)主要內(nèi)容的繪制區(qū)域，通常而言圖標(biāo)圖形的主體都在該區(qū)域內(nèi)。
修飾區(qū)域：是指用于承載部分圖標(biāo)的一些出格圖形，某些視覺占比較小的圖形可以延伸到修飾區(qū)域，但不能超出網(wǎng)格范圍。
關(guān)鍵線形狀：關(guān)鍵線形狀是網(wǎng)格的基礎(chǔ)。有4種關(guān)鍵線形狀，利用這些核心形狀作為向?qū)В憧梢栽诋a(chǎn)品圖標(biāo)的設(shè)計中保持一致的視覺比例。
如 Material Deisgn 的圖標(biāo)網(wǎng)格中，活動區(qū)域?qū)挾葹?20dp，修飾區(qū)域?qū)挾葹?2dp，4 種關(guān)鍵形狀分別對齊于 20pd和 18dp 和 16dp的邊緣，對齊于像素。
上圖為基于網(wǎng)格和關(guān)鍵線形狀繪制圖標(biāo)的示例：如左側(cè)「剪切板」圖標(biāo)，整體核心圖形部分以網(wǎng)格中的正方矩形為模板，頂部的掛鉤圖形視覺面積較小，部分內(nèi)容伸入修飾區(qū)域。右側(cè)「相機」圖標(biāo)以長方矩形為模板。
5.1.2 視覺柵格
除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標(biāo)的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時設(shè)定一個固定大小的容器，這樣它們在導(dǎo)出時就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺上看起來更加平衡，避免以后開發(fā)時還需要重新調(diào)整。
5.1.3 視覺重量
繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一，還要實現(xiàn)視覺上大小統(tǒng)一。設(shè)計師要懂得調(diào)節(jié)圖標(biāo)大小以避開視覺上的覺錯。
UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會發(fā)現(xiàn)它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。
根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會發(fā)現(xiàn)，方形圖標(biāo)比三角形或細長圖標(biāo)更緊湊。
5.2 圖標(biāo)繪制細節(jié)
清晰是圖標(biāo)的基本要素，在sketch中，參數(shù)不要有小數(shù)點，讓圖標(biāo)占滿像素網(wǎng)格。因為計算機不能識別小數(shù)點，導(dǎo)出圖標(biāo)時計算機會把不能識別參數(shù)的部分拉伸填滿像素網(wǎng)格，導(dǎo)致圖標(biāo)出現(xiàn)虛邊。
如果為圖標(biāo)設(shè)置1像素的邊框，邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊，如下圖：
根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點和終點，會讓你的圖標(biāo)看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這些奇怪的數(shù)值。
從一套圖標(biāo)中最復(fù)雜的那個開始來設(shè)計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標(biāo)視覺重量保持一致。因為當(dāng)圖標(biāo)具有不同的細節(jié)層次時，更復(fù)雜的圖標(biāo)會吸引用戶更多的注意力，而且視覺上看上去更重。
5.3 圖標(biāo)的基本元素
5.3.1 大小
一致性是設(shè)計圖標(biāo)的關(guān)鍵，在繪制時，一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計中，網(wǎng)格的大小必須要是4或12的倍數(shù)。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。
通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。
不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細節(jié)時，還是需要根據(jù)尺寸大小單獨繪制。比如我們的產(chǎn)品圖標(biāo)可能是24px，但是營銷圖標(biāo)是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節(jié)。
這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節(jié)要比添加容易得多，也能最大程度的保留圖標(biāo)原始狀態(tài)。
5.3.2 描邊和填充
沒有什么比看到一個填充圖標(biāo)和一個線性圖標(biāo)放在一起更讓人抓狂的了。確保你的圖標(biāo)風(fēng)格一致是非常非常重要的。比如你想用填充圖標(biāo)來表示選中狀態(tài)，那么請一定要確保你的其他圖標(biāo)風(fēng)格一致，只有少量的變化。
通常，填充圖標(biāo)具有更高的可識別性，而描邊圖標(biāo)更方便添加細節(jié)。并且在選擇你哪種風(fēng)格更合適的時候，也別忘了考慮品牌定位和風(fēng)格。
如果你要繪制描邊圖標(biāo)，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。
當(dāng)我們繪制線性圖標(biāo)的填充版本時，首先需要考慮如何簡化線條。理想情況下，填充圖標(biāo)類似于陰影，而不是直接翻轉(zhuǎn)顏色。繪制填充圖標(biāo)的描邊版本，需要確定好線條的粗細，以及在保證清晰度的情況下可以添加多少細節(jié)。
5.3.3 顏色
如果是功能圖標(biāo)，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復(fù)雜，不利于和其他設(shè)計師協(xié)作。而對于營銷圖標(biāo)，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標(biāo)最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標(biāo)。
5.4 功能圖標(biāo)的風(fēng)格
常見的功能性圖標(biāo)風(fēng)格大致有三種：線性圖標(biāo)、面形圖標(biāo)和扁平化圖標(biāo)。但其實我們可以將「扁平化圖標(biāo)」可以看作是「線性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式，所以歸根到底，基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類：「線性圖標(biāo)」和「面型圖標(biāo)」；
5.4.1 線性圖標(biāo)
線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓，它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計語言，因此繪制整套線性圖標(biāo)會更加統(tǒng)一，具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個場景下的幾個同等重要的圖標(biāo)，如果線條粗細不一致，會給人一種權(quán)重上存在差異的感覺。所以，在繪制線型圖標(biāo)時，通常會使用統(tǒng)一粗細的線條。
常用的App圖標(biāo)設(shè)計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計，但粗線條的 ICON 圖形較為極簡才適用。
線性圖標(biāo)根據(jù)樣式還可以分為：雙色線性圖標(biāo)、線面填充圖標(biāo)、線性漸變圖標(biāo)。
5.4.2 面形圖標(biāo)
面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在「微信」底部標(biāo)簽欄中，為選中的圖標(biāo)是線性圖標(biāo)，而選中的圖標(biāo)則是面形圖標(biāo)，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實際上，蘋果在新的設(shè)計規(guī)范中也建議開發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo)，是否處于點擊態(tài)通過改變填充圖標(biāo)的顏色進行區(qū)別。這是因為填充圖標(biāo)看上去像可點擊的。
面性圖標(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)格了。比如：不同粗細線條線性圖標(biāo)的組合，或者面面組合，或者線面組合。大家在設(shè)計圖標(biāo)的時候，需要根據(jù)自己的產(chǎn)品特征、受眾和使用場景，去選擇適合自己的表現(xiàn)形式。
6.1 圖標(biāo)繪制方法
圖標(biāo)的繪制方式主要有兩種：布爾運算 和 貝塞爾曲線。
6.1.1 布爾運算
布爾指的是喬治·布爾，19世紀(jì)的一位數(shù)學(xué)家，為了紀(jì)念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。
布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計師在使用軟件過程中引用了這種邏輯運算方法，對應(yīng)到設(shè)計軟件中，就有：合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。
合并形狀：將兩個形狀合并為一個，取的是交集；
減去頂層形狀：用底層圖形減去頂層圖形所得最終圖形；
與形狀區(qū)域相交：得到的形狀是兩個圖形重疊的部分，取的是交集；
排除重疊形狀：簡單理解就是減去兩個圖形重疊的部分，與「與形狀區(qū)域相交」相反；
基本上通過布爾運算，我們能繪制出常見的大部分圖標(biāo)了，但有時我們需要針對某些線條進行單獨的調(diào)整，又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo)，這個時候就需要用到貝塞爾曲線了。
6.1.2 貝塞爾曲線
貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表。他運用貝塞爾曲線來為汽車的主體進行設(shè)計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。
貝塞爾曲線包括：節(jié)點、控制點、控制線、曲線這幾個基本概念。
矢量圖形便是由這幾個基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點作為支撐構(gòu)成，控制點和節(jié)點之間的線段稱為控制線，控制線就像皮筋一樣，調(diào)整控制點的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節(jié)點包括 4 種基礎(chǔ)屬性類型，一種是沒有控制點和控制線的「直線節(jié)點」；另一種是「鏡像關(guān)聯(lián)節(jié)點」，這種節(jié)點控制其中一側(cè)的控制點，另一側(cè)的控制點會發(fā)生鏡像變化，適合繪制對稱結(jié)構(gòu)的曲線；再有一種是「無關(guān)聯(lián)節(jié)點」，即節(jié)點兩側(cè)的控制點可以各自自由控制它們那一側(cè)的曲線而不互相影響；最后一種是「不對稱關(guān)聯(lián)節(jié)點」，這種類型下，節(jié)點兩側(cè)的控制點和節(jié)點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。
在 Sketch 中，我們可以在選中節(jié)點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當(dāng)前節(jié)點的類型，加快繪制效率。
6.1.3 鋼筆工具
繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復(fù)雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習(xí)鋼筆工具的網(wǎng)站，以游戲的形式練習(xí)鋼筆工具，通關(guān)的時候你對鋼筆工具就已經(jīng)輕車熟路了。
繪制實戰(zhàn)
這里選擇了幾個比較典型的圖標(biāo)，簡單演示下繪制方法和各自的繪制思路：
6.1.4 面性
眼睛：布爾運算相交 / 相減 / 合并形狀
繪制一個正圓，然后復(fù)制這個正圓形，通過布爾運算「與形狀區(qū)域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉(zhuǎn) / 相減
這個圖標(biāo)由兩個大小圓形相減，得到環(huán)形，再繪制一個和大圓半徑相等的正方形，和圓環(huán)左、下對齊，最后逆時針旋轉(zhuǎn)45度完成。
WIFI：相加 / 相減 / 旋轉(zhuǎn)
繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標(biāo)。
齒輪：旋轉(zhuǎn) / 相減
通過兩個圖形的布爾運算得到環(huán)形，然后繪制一個梯形，復(fù)制一個鏡像，將其對齊環(huán)形兩端，復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次（45度），最后合并全部形狀完成。
鈴鐺：相加 / 相減
由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結(jié)構(gòu)通過設(shè)置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。
6.1.5 線性
放大鏡：旋轉(zhuǎn) / 相加
繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉(zhuǎn)45度即可。
時鐘：鋼筆 / 剪刀工具
繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。注意指針的長短關(guān)系。
雨傘：相減 / 剪刀工具
繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，完成。
相機：合并
繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。
愛心：相加 / 旋轉(zhuǎn)
繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉(zhuǎn)45度所得。
6.2 制定規(guī)范
無規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來。在設(shè)計上也是如此，規(guī)范具有統(tǒng)一輸出，指引細節(jié)、便于查看的好處，規(guī)范就是一組圖標(biāo)中的規(guī)矩，所有圖標(biāo)的繪制都按照規(guī)矩來，最終的成品就會顯得井然有序。
小小的圖標(biāo)是由很多圖形元素組成的，在這些圖標(biāo)中，元素的一致性是建立一個共同視覺于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個圖標(biāo)和他們之間細微的差異，也將幫助我們學(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)元素進行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度，光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規(guī)范的三個過程：
- 拆分細節(jié)：將圖標(biāo)中的細節(jié)元素（圓角、筆畫末端等）進行分解，并在規(guī)范中制定細節(jié)元素的使用法則。
- 風(fēng)格定位：根據(jù)產(chǎn)品調(diào)性，業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩、質(zhì)感風(fēng)格。
- 功能劃分：不同功能（金剛區(qū)和標(biāo)簽欄等）的圖標(biāo)要區(qū)分開來，功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。
圖標(biāo)設(shè)計規(guī)范
6.3 圖標(biāo)管理和交付
完成圖標(biāo)后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi)，讓其他人幫忙來檢查你的圖標(biāo)是否整潔是非常有必要的。對圖標(biāo)精心設(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āng)導(dǎo)出SVG時，代碼應(yīng)該盡可能簡潔。選擇Figma的另一個重要原因是它有超小的SVG導(dǎo)出，并且還能自動優(yōu)化。
圖標(biāo)資源管理工具：Nucleo
或許你能做出完美無瑕的圖標(biāo)，但如果不能讓它們產(chǎn)品中發(fā)揮作用的話，那將毫無意義。所以在你開始設(shè)計之前，可以和開發(fā)人員談?wù)?，他們能告訴你圖標(biāo)交付的要求，這將改變你的一些選擇，比如圖標(biāo)的粗細或大小。問問其他設(shè)計師過去做過什么，以確保你們沒有重復(fù)工作。你還可以和市場運營人員聊一下，看看他們在日常物料中缺少什么?？傊?，多向別人尋求反饋、建議和幫助。他們會激勵你發(fā)現(xiàn)更好的想法，并讓你了解自己應(yīng)該做什么。一套完整的圖標(biāo)設(shè)計規(guī)范是有必要的。
6.4 線性or面性
設(shè)計中，我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢？
其實二者沒有太明顯的選擇優(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)，除裝飾性外具備更強的視覺信息層次感，更具引導(dǎo)性，比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面，使用面型圖標(biāo)；
- 車載等系統(tǒng)界面，更適合用面型圖標(biāo)，面型圖標(biāo)的視覺面積較大，短時間內(nèi)更加容易識別；
- 線性圖標(biāo)看起來通常會更加細膩精致，適合比較精致簡潔的設(shè)計或者女性化產(chǎn)品設(shè)計；
功能圖標(biāo)在UI設(shè)計中占據(jù)非常重要的作用，幾乎存在于每一個應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導(dǎo)航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時，設(shè)計精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。
7.1 線性圖標(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)。
7.2 面形圖標(biāo)使用場景
面形圖標(biāo)具有廣泛適用性，通常在運動、時尚類應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺占比最大化，具有強烈的視覺表現(xiàn)力，一般用于應(yīng)用界面的主要功能入口，以方便用戶快速尋找。
功能入口的面形圖標(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)的視差一致。
7.3 扁平圖標(biāo)的使用場景
扁平化圖標(biāo)實際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導(dǎo)頁、空狀態(tài)也的情感化設(shè)計，后來逐漸在標(biāo)簽欄、首頁主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。
我們了解了 icon 的基本知識，那么如何設(shè)計一個好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個產(chǎn)品呢？我們需要了解什么才是一個好的 icon 。
我們可以從以下五個方面來檢驗，分別是：識別性，規(guī)范性、統(tǒng)一性、呼吸感與品牌感。
8.1 識別性
圖標(biāo)就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個圖標(biāo)最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產(chǎn)生疑惑。我們檢測圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細節(jié)，還需要確保圖標(biāo)中的每一種顏色都是可見的。第二就是將圖標(biāo)拿到強光下進行觀察，在強光下是否可以看清圖標(biāo)的主題結(jié)構(gòu)，圖標(biāo)是否有足夠的辨識度。
圖標(biāo)識別性可以分為兩類，分別是含義識別和視覺識別。
含義識別：是視覺語言是否可替換文字語言，簡言之就是讓你的圖標(biāo)可以被用戶理解，不會讓用戶產(chǎn)生歧義。
視覺識別：圖標(biāo)的大小，顏色，線條的粗細，這些影響視覺識別的因素識別性是否高。
8.2 規(guī)范性
規(guī)范性也是做好一個圖標(biāo)的基礎(chǔ)，我們要保證圖標(biāo)在視覺大小的一致性，圖標(biāo)飽滿度、遵循同一種規(guī)律，細節(jié)統(tǒng)一性。
視覺大小的一致性：在相同尺寸的基礎(chǔ)上分析形狀間的視覺差異，來審視視覺上是否統(tǒng)一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規(guī)定它的最大尺寸，進而在尺寸規(guī)范中適當(dāng)調(diào)整，使得視覺大小達到統(tǒng)一；
飽滿度：常用的衡量方法就是正負形衡量法，在圖標(biāo)所占區(qū)域的矩形框中，看圖標(biāo)的正形的面積是否還可以增加；
相同規(guī)律：同一套圖標(biāo)必須是以同種風(fēng)格呈現(xiàn)的，例如是否全部使用了圓角或直角的風(fēng)格，圓角大小、繪制風(fēng)格是否一致；
細節(jié)統(tǒng)一：包括像素是否對齊、圓角、描邊粗細是否統(tǒng)一的問題；
8.3 統(tǒng)一性
在繪制多個類型相同的圖標(biāo)時，我們需要注意這一套圖標(biāo)合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中，會有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣，所表達的內(nèi)容也不同。這時，圖標(biāo)一致性的意義就體現(xiàn)出來了，根據(jù)格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級別的元素，則應(yīng)在視覺上保持統(tǒng)一匹配。
圖標(biāo)內(nèi)容的統(tǒng)一會讓用戶明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標(biāo)后還需檢查線條的粗細比重，邊角的大小，配色方案，細節(jié)層次和設(shè)計元素在整個合集中是否是不變且一致的。
8.4 呼吸感
呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。在圖標(biāo)的繪制過程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過近，元素也不宜過多。圖標(biāo)是一個物體的簡略縮影，目的是為了表達內(nèi)容，讓用戶快速理解，太過復(fù)雜的細節(jié)會影響圖標(biāo)的識別速度。因此在圖標(biāo)的繪制過程中應(yīng)該刪除所有無法傳達圖標(biāo)意義的元素，避免使圖標(biāo)變得太過復(fù)雜難以識別。
8.5 品牌感
品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設(shè)計的角度去理解，尋找自己產(chǎn)品獨特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計中。
那么，該如何提升品牌感，打造屬于自己App的獨特風(fēng)格呢？品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。
我們都知道圖標(biāo)在APP設(shè)計中的重要性，但是打開許多APP你會發(fā)現(xiàn)他們的圖標(biāo)設(shè)計都非常普通，似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計師在進行圖標(biāo)設(shè)計師加入一些諸如圓角、斷線等設(shè)計語言，但是仍逃脫不了與其他APP設(shè)計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產(chǎn)品氣質(zhì)。
那么，該如何打造屬于自己APP的獨特風(fēng)格呢？品牌基因為我們提供了一些線索。它是由平面設(shè)計中的VIS（視覺識別系統(tǒng)）引入的一種設(shè)計策略，通過對品牌形象進行延生設(shè)計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質(zhì)。接下來，我們就來學(xué)習(xí)如何利用品牌基因進行圖標(biāo)設(shè)計。
9.1 提取品牌圖形
通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標(biāo)設(shè)計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產(chǎn)品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標(biāo)是必要的，不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網(wǎng)易云音樂的首頁標(biāo)簽就直接使用了它的品牌圖形，其優(yōu)點不言而喻。
但是請注意，這種設(shè)計策略并不適合于所有的App，當(dāng)?shù)谝粋€tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。
還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標(biāo)。
9.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的品牌色是青藍色，在標(biāo)簽欄的圖標(biāo)設(shè)計上（選中態(tài)）將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調(diào)性高度一致。
9.3 提取設(shè)計語言
在VI設(shè)計中通常提取輔助圖形作為設(shè)計元素，這在圖標(biāo)設(shè)計中同樣適用，當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計元素，他們就構(gòu)成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓，這樣他們就形成了某種視覺聯(lián)系。
9.4 提取產(chǎn)品氣質(zhì)
品牌形象決定了產(chǎn)品的氣質(zhì)，而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個人的時候，往往會根據(jù)他的外貌形象特征，產(chǎn)生一個大致的印象，這就是一個人的氣質(zhì)。APP也同樣，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計。
9.5 拆分品牌名稱
App標(biāo)簽欄圖標(biāo)最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個性。MONO是一款閱讀類App，它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應(yīng)的功能模塊本身并沒有直接聯(lián)系，但加上標(biāo)簽文字的輔助也不會造成閱讀困難，而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設(shè)計加分了。
9.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)單獨拿出來就無法判斷它是誰，它從哪兒來？
優(yōu)秀的設(shè)計師不僅要具備將圖標(biāo)繪制精美的能力，還要具備豐富的設(shè)計想象力，不拘泥于設(shè)計規(guī)范的條條框框，有時候打破規(guī)則才能設(shè)計出優(yōu)秀的圖標(biāo)。“首頁”除了小房子我們還可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標(biāo)是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設(shè)計與品牌形象緊密相連，簡直完美！不過最新的改版好像已經(jīng)改沒了。
總之，要想在繪制整套圖標(biāo)時建立統(tǒng)一風(fēng)格，就要從外觀和顏色上確立主風(fēng)格，在局部尋求個性特征，將兩者結(jié)合，并融合產(chǎn)品屬性和符合用戶定位，先在腦海中構(gòu)思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計方案。
寫在最后
圖標(biāo)設(shè)計是UI設(shè)計中非常重要的環(huán)節(jié)，因為除了文字和圖片的排版之外，在扁平時代能夠傳遞給用戶情緒和設(shè)計感的通道就是頁面中的各種圖形與圖標(biāo)。在尺寸有限的界面上，小小的 icon 可以更加簡單高效的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設(shè)計師在平時做大量的練習(xí)嘗試各種不同的風(fēng)格，以滿足不同的業(yè)務(wù)需求。
OK，圖標(biāo)設(shè)計指南就分享到這里，希望對大家有所幫助。因為篇幅較長，幾經(jīng)修改，有細節(jié)不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎斧正，感謝閱讀。
參考文獻
Material Design
Human Interface Guidelines
ICON | 設(shè)計指南——v優(yōu)客
ICON設(shè)計指南——Bonnie Kate Wolf
圖標(biāo)設(shè)計零基礎(chǔ)科普指南
UI設(shè)計師必須知道的 iOS和Android的APP圖標(biāo)設(shè)計指南
品牌基因圖標(biāo)設(shè)計技巧
作者：佚名 來源：印跡時光
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
