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