微軟MICROSOFT • 365圖標

Wes Cockx與 Nando Costa 和 Microsoft 設計團隊合作，定義了一種獨特的方式來渲染一些經典的 Microsoft 365 圖標，同時在其他環境中與 Microsoft 應用程序的品牌保持一致。在這項任務中，我們將它們重建為三維模型，利用照明和
材料組合將圖標提升到新的高度。

圖標是UI設計中除了文字之外最不可或缺的視覺元素，在設計中看似只占一個很小的區域，但是它卻是考驗設計師基本功的重要標準，了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。

本文盡量將圖標進行系統一些的介紹說明，當然僅一篇文章是不可能面面俱到包含所有知識點。內容比較基礎，主要以 設計概念 和 設計思路 為主，對圖標相關的內容進行組織梳理和分類，便于小伙伴們建立圖標的概念體系。過程中也有針對幾種典型的圖標結構進行實操代練，想要把圖標設計的更好，這就需要我們在平時勤加練習外，還要進行深度的思考，希望我的這篇梳理可以給大家帶來幫助。

1.1 圖標的定義

圖標，也稱為icon或Picoto，是計算機世界對現實世界的隱喻和概括，代表軟件產品中的功能及操作。它的本質是一種符號，它采用對這個世界的隱喻，來指代功能，含義，用途等。

圖標做為國際通用性語言，生活中隨處可見，例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等，日常手機里使用的那些App圖標，如微信、電話、短信等。的確，圖標的形式有很多種，它可以應用在很多場景中，并且表現方式非常豐富，有線的、有面的、還有擬物的等。  

如果粗淺劃分的話，UI設計中常見的圖標大致分為2大類，第一類我們稱之為「標志性圖標」，比如手機中應用啟動圖標；第二類我們稱之為「功能性圖標」，這類圖標經常出現于 App 或網站中，用于功能性指示引導或操作。

1.2 圖標的重要性

對于UI設計而言，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中，圖標幾乎是這個頁面的核心支撐體，它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣；

節約空間：如果在一個圖標能夠表述清楚含義的時候，比如用一個叉就可以不用寫「關閉」；

快速定位：圖標可以用它獨特的形狀或者顏色讓人快速定位到一個功能；

上下文的定位：比如小飛機的圖標單獨放出來不確定是什么，但是在和收件箱在一起它就可以認為是發件箱了。

1.3 發展歷程

如你所知，圖標、標識都不是界面設計師所創造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中，早期用來傳達信息的圖標演變為系統的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標和標識。

隨著技術的發展，計算機誕生了，而顯示器的出現，也為圖形化界面的誕生，鋪平了道路。20世紀70年代，施樂在位于帕羅奧托的研究所當中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發，更是引發了計算機歷史上最著名的一場戰爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是后話。

來自蘋果的Macintosh系統在圖形化界面發展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。

從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力，形成「視覺噪聲」。于是UI設計師開始探索更新的表現形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計，但由于它們的表現形式太過于抽象，缺乏情感的傳遞，并沒有獲得用戶的青睞。 

在此之后，越來越多的圖標開始借由靈活而強大的數字技術而誕生，并且基于不同的需求而演化出不同的分支和風格。許多操作系統和工具開始預制一些成體系的圖標，誕生基于種種需求，越來越多的自制的、重設計的圖標，逐步進入了我們的視野。圖標類型很多，我們可以用不同的方式來劃分它們。

圖標的類型

2.1 擬物圖標

由于人們都是通過以往的認知來理解新事物，所以基于這一點，早期應用界面必然要采用擬物風格，以便于人們的理解和操作。是一個由實物 → 符號的發展歷程。

例如「保存」圖標就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當成一個實體來使用，甚至這個符號的實體已經淡出歷史，但人們還在習慣性使用這個符號。

更具體點來說，擬物設計就是追求模擬現實物品的造型和質感，通過疊加高光、紋理、材質、陰影等各種效果對實物進行再現（也可適當程度變形和夸張）；扁平化設計就是摒棄以上對效果（尤其是高光、陰影等能造成透視感的效果）的追求，轉而通過抽象、簡化、符號化的設計元素來表現。你還記得曾經熬夜畫寫實圖標的日子嘛～上千個圖層不在話下有木有！

但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。再者，大家都熟悉的事物其實非常有限，而 APP 的創新卻在不斷進行，很多創新的產品本身在現實世界就沒有參照物，所以也決定了擬物圖標必然會被取代。

2.2 扁平圖標

區別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，進行平面化的表現。

2013年，蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來。并且在設計元素上強調抽象、極簡、符號化的概念。

扁平圖標風格發展的后期，由于它們表現形式太過于抽象、缺乏情感的傳遞，也沒有獲得大眾的青睞，這也表明 UI 新的趨勢再一部向“突出內容”的本質靠攏，即“認知簡約”。也許當滿世界都是扁平化后，擬物化的設計卻又變得更顯眼了呢？最近流行的新擬物風格就是最好的證明。

2.3 微扁平、輕擬物

從扁平風格發展至現在，圖標慢慢開始發展到微扁平輕擬物的方向，相較于擬物風格不會有太多復雜的視覺元素，與扁平風格又有了更豐富的情感內容，所以現在界面中，在面積比較小的區域我們使用扁平圖標或線形圖標；在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。

2.4 線性圖標

線性圖標是由直線、曲線、點在內等元素組合而成的圖標樣式，通過線來塑造輪廓。線性圖標具有辨識度高，清晰，簡約易識別等優點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創作空間較少，太復雜的線性圖標對識別性產生較大的困擾。

在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。直角線條的icon顯得專業嚴謹，圓角粗線條的 ICON 顯得飽滿而可愛。

2.5 面性圖標 

面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。

面形圖標具有表意能力強，細節豐富，情緒感強，視覺突出，創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置，預知點擊后的狀態。但是面性圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。

2.5 文字圖標

文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標，是一種很不錯的表現手法。

比如「提示」圖標，使用一個圓圈包裹一個英文字母「i」，表示 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標識，這個概念太抽象了，很難用象形去概括，創造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標符號，作為針對中國用戶群體的產品圖標，簡單粗暴且有效。

如果可能的話，盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。

2.6 " 新擬物 "風格圖標

蘋果在 WWDC20 搞了個大新聞：macOS 將與 iOS 統一步調，從X86 平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

macOS Big Sur是第一個將 " 新擬物 " 設計投入大規模商用的操作系統，這可視為 " 新擬物 "在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 " 外觀 " 設置里，多了一項名為" 自適應強調色 "的選項。蘋果將主題色的指定權留給開發者，這是否暗示新一代 App 在光影上會有更豐富的效果？

" 新擬物 " 設計的精髓在于對光線的絕妙運用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間，進而打造一種全新的視覺體驗。

不同于傳統的擬物，" 新擬物 "雖然將符合物理規律的光影效果引入界面，但它所模擬的材質是自然界不存在的。換句話說，" 新擬物 " 是將真實光線用于虛擬對象，而 " 擬物 " 是還原實際物品在特定光照下的效果；

由于整個設計界將不得不考慮新擬物風格，圍繞該風格的可能性將會有爆炸性的發展，并且這種新的數字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣，第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優勢的時候。

產品應用圖標有不同的風格，這些風格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設計風格可以更加標新立異，從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要，將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。

3.1 中文文字圖標

中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內的產品都會使用文字作為自己的產品圖標。中文設計模式即字體設計，提取應用名稱中的一個或多個漢字，進行設計變形，變形后的字體圖形具有產品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。

3.1.1 單字  

提取產品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設計，以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息，識別性強。

3.1.2 多字  

多字圖標設計要注意的是整體的協調性和可讀性，一般為2-3個字，最多兩行（四個字）排列。

其優點是更加直接的告訴用戶產品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣，會顯得重復啰嗦，像介紹了兩遍自己一樣。

3.1.3 字加圖形組合

文字加輔助圖形的組合，也是常見的產品圖標設計方法，相比純文字圖標，顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。

3.2 英文字母圖標

英文設計與中文設計的設計模式相似，通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工，新的字母圖形依舊保持本身的識別性。

3.2.1 單字母 

通常提取英文首字母進行設計，由于英文字母本身結構簡潔，稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少，都用字母很容易創意雷同，難以形成差異化。

3.2.2 多字母  

提取產品全稱或幾個單詞的首字母組合而成，形成獨有的產品簡稱，方便用戶記憶。

3.2.3 字母加圖形組合  

字母加圖形組合的設計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工，可以使應用圖標視覺表現更加飽滿。

3.3 數字圖標

直接用數字做應用圖標的相對較少，但是數字識別性強，易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。

3.4 特殊符號圖標

由于符號本身的含義會對產品屬性有一定限制，所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品，無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關聯的產品屬性。

除了中英文圖標，還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：

3.5 幾何圖形

幾何圖形的設計模式給人簡約、現代、個性等視覺感受，從單個具象圖形到復雜的空間感營造，幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩定、現代、時尚等，添加圓角后又會更加親民、可愛。我們可以結合產品特征，合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。

3.6 單雙形/剪影

單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確，易于用戶在眾多的應用圖標陣列中快速找到目標。

3.7 線形

線形的設計模式分為兩種設計方式，在深色的背板上讓圖標反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標填充顏色，圖標可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質，適合于文藝、清新的應用，在界面設計時保持這種干凈明快的風格，才能與應用圖標設計表里如一。線性風格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風格曲線組成“A”，同時是一個小蜜蜂。

3.8 動物圖形/剪影

動物作為圖標設計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。

3.9 卡通形象

卡通風格的產品圖標會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的。卡通可以說是一種各年齡層都能接受的風格，如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。

3.10 正負形

以正形為底突出負形特征，以負形表達產品屬性，傳遞產品信息。例如NPR One，圖標中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應用，而正形圖形強調產品氣質。

3.11 白色漸變

白色漸變的設計模式與透明白色相似，都是通過白色不透明度來構建出圖形的立體控件感，它比單純的剪影圖形更加具有質感，這種質感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。

3.12 彩色漸變

色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應用的產品氣質。比起白色漸變圖形，彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應用圖標的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。

3.13 無

無，即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。

應用圖標尺寸規格

4.1 iOS應用圖標

iOS6及之前的版本，應用圖標的圓角半徑都可以通過1/4圓繪制出來，即繪制標準的圓角矩形即可，主屏幕應用圖標為114*114px，使用20px圓角半徑，App store應用圖標為512*512px，使用90px圓角半徑等。從iOS7開始，主屏幕應用圖標調整為120*120px，并且不再是標準的圓角矩形，而是某種連續曲線，接近于26-27px圓角半徑。

我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標準圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區別在于其曲線稍微向中心收緊。

事實上，我們很難在Retina屏幕上區分這么席位的差別，因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角，直接繪制成直角矩形交給開發同學即可，如果應用圖標需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。

4.2 安卓應用圖標

安卓應用圖標同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標。

4.3 iOS應用圖標設計流程

在我之前的設計作品中，有個“影記”的攝影社區APP，本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。

4.3.1 尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為，即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩作為產品圖標的主要造型。

4.3.2 競品分析

應用市場各類產品不勝其數，在同類應用中存在大量相似的應用圖標設計，如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異，避免創意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預期。

4.3.3 提取關鍵詞

根據收集的圖片，創建情緒版，結合自己的產品提取關鍵詞，然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關機”，并依次將關鍵詞描繪成下列圖形。

4.3.4 抽象圖形

確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形，接下來將繪制好的3個圖形相結合，即完成初步設想。

4.3.5 圖標柵格線

使用iOS應用圖標柵格線作為設計一句有助于建立和諧的圖標繪制比例，并與iOS系統保持統一，下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。

4.3.6 豐富細節

通過上面圖形組合已基本完成應用圖標的設計，接下來我們還應從顏色、質感、背板等著手豐富圖形的細節，建立起應用的產品氣質。“影記”作為攝影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應用的主色。然后，白色的信號燈過于普通，使用相機本身發出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。

4.3.7 多場景測試

將120*120px應用圖標設計稿放大至1024*1024px，交付開發提交至App Store上架，正確的圖標設計稿應是直角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住，假如圖標設計稿自帶圓角，就有可能露出圖標透明區域。

△ 注：上圖非實際大小，僅表明不同分辨率下的比例關系

此外，應用圖標還會以不同的分辨率出現在不同場景中，例如在iPhone 8plus上需@3x的圖，即將120px的圖標放大至1.5倍；而在iPhone7的設置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節就會丟失，使畫面變得模糊，因此設計師應對小尺寸圖標進行席位調整，去除不必要的裝飾元素，以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。

APP中的功能圖標

除了產品圖標，還有一種圖標被稱為功能（或系統）圖標，功能圖標指的是擔負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜，如微信底部四個系統圖標就使用了比較簡潔的線性風格。

功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時設計精致、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。

在 @1x 一倍圖設計模式下，以 24px 為網格基準的話，常使用的圖標粗細有：1px 、1.5px、2px、3px，1.5的粗細常用于高倍屏，如近幾年旗艦機的手機屏幕或者 retina電腦屏，否則像素渲染會比較模糊。

5.1 圖標柵格

圖標柵格被用來促進圖標的一致性，以及為圖形元素的定位建立一組清晰的規范。這種標準化的規范造就了一個靈活但有條理的系統，令所有的設計保持協調、一致和美學的視覺特征。

5.1.1 像素柵格

基于像素劃分的像素柵格是最基礎的柵格系統。在繪制圖標時，我們總是希望將對象對齊到每一個像素，特別是直線。因為像素對齊不僅僅可以更好地渲染，還能讓圖標更加整潔、舒服。下圖展示了Sketch 中像素對齊和沒對齊圖標之間的差異：

左：像素不對齊    右：像素對齊

可以在繪制圖標之前就先設置好柵格，在Sketch和Figma中都有相似的設置。

Material Design官網給出了圖標的輔助網格，為設計師繪制小圖標提供一致的標準。圖標網格通常包含三部分內容：活動區域，修飾區域，關鍵線形狀。我們以此為例進行介紹。

活動區域：是指圖標主要內容的繪制區域，通常而言圖標圖形的主體都在該區域內。

修飾區域：是指用于承載部分圖標的一些出格圖形，某些視覺占比較小的圖形可以延伸到修飾區域，但不能超出網格范圍。

關鍵線形狀：關鍵線形狀是網格的基礎。有4種關鍵線形狀，利用這些核心形狀作為向導，你可以在產品圖標的設計中保持一致的視覺比例。

如 Material Deisgn 的圖標網格中，活動區域寬度為 20dp，修飾區域寬度為 2dp，4 種關鍵形狀分別對齊于 20pd和 18dp 和 16dp的邊緣，對齊于像素。

上圖為基于網格和關鍵線形狀繪制圖標的示例：如左側「剪切板」圖標，整體核心圖形部分以網格中的正方矩形為模板，頂部的掛鉤圖形視覺面積較小，部分內容伸入修飾區域。右側「相機」圖標以長方矩形為模板。

5.1.2 視覺柵格

除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器，這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡，避免以后開發時還需要重新調整。

5.1.3 視覺重量

繪制圖標不光要滿足物理上大小統一，還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。

UI界面的圖標通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。

根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。

5.2 圖標繪制細節

清晰是圖標的基本要素，在sketch中，參數不要有小數點，讓圖標占滿像素網格。因為計算機不能識別小數點，導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格，導致圖標出現虛邊。

如果為圖標設置1像素的邊框，邊框應該使用外部或內部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊，如下圖：

根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這些奇怪的數值。

從一套圖標中最復雜的那個開始來設計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。

5.3 圖標的基本元素

5.3.1 大小

一致性是設計圖標的關鍵，在繪制時，一定要確保所有的圖標都相同大小。在UI界面設計中，網格的大小必須要是4或12的倍數。@2x下作圖要保證是4的倍數，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數了，這個數值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標尺寸24*24px、48*48px。

通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發人員根據倍數調整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。

不過當我們的圖標涉及一些復雜的細節時，還是需要根據尺寸大小單獨繪制。比如我們的產品圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節。

這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多，也能最大程度的保留圖標原始狀態。

5.3.2 描邊和填充

沒有什么比看到一個填充圖標和一個線性圖標放在一起更讓人抓狂的了。確保你的圖標風格一致是非常非常重要的。比如你想用填充圖標來表示選中狀態，那么請一定要確保你的其他圖標風格一致，只有少量的變化。

通常，填充圖標具有更高的可識別性，而描邊圖標更方便添加細節。并且在選擇你哪種風格更合適的時候，也別忘了考慮品牌定位和風格。

如果你要繪制描邊圖標，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。

當我們繪制線性圖標的填充版本時，首先需要考慮如何簡化線條。理想情況下，填充圖標類似于陰影，而不是直接翻轉顏色。繪制填充圖標的描邊版本，需要確定好線條的粗細，以及在保證清晰度的情況下可以添加多少細節。

5.3.3 顏色

如果是功能圖標，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜，不利于和其他設計師協作。而對于營銷圖標，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標。

5.4 功能圖標的風格

常見的功能性圖標風格大致有三種：線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式，所以歸根到底，基礎的圖標風格有兩大類：「線性圖標」和「面型圖標」；

5.4.1 線性圖標

線性圖標是通過線條來表現物體的輪廓，它比面形圖標更能塑造優美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，會給人一種權重上存在差異的感覺。所以，在繪制線型圖標時，通常會使用統一粗細的線條。

常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標簽欄圖標采用粗線條設計，但粗線條的 ICON 圖形較為極簡才適用。

線性圖標根據樣式還可以分為：雙色線性圖標、線面填充圖標、線性漸變圖標。

5.4.2 面形圖標

面形圖標是以面為主要表現形式的圖標。在「微信」底部標簽欄中，為選中的圖標是線性圖標，而選中的圖標則是面形圖標，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標，是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。

面性圖標根據不同的配色樣式可以分為：單色飽和度填充圖標，純色漸變圖標和多色漸變圖標。

基于最基本的「線性圖標」和「面型圖標」，通過不同的形態和風格的組合，再結合豐富的 表現手法，就可以設計出形形色色的圖標風格了。比如：不同粗細線條線性圖標的組合，或者面面組合，或者線面組合。大家在設計圖標的時候，需要根據自己的產品特征、受眾和使用場景，去選擇適合自己的表現形式。

6.1 圖標繪制方法

圖標的繪制方式主要有兩種：布爾運算 和 貝塞爾曲線。

6.1.1 布爾運算

布爾指的是喬治·布爾，19世紀的一位數學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。

布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數字邏輯推演法，主要有數字邏輯的聯合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法，對應到設計軟件中，就有：合并形狀、減去頂層形狀、與形狀區域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。

合并形狀：將兩個形狀合并為一個，取的是交集；

減去頂層形狀：用底層圖形減去頂層圖形所得最終圖形；

與形狀區域相交：得到的形狀是兩個圖形重疊的部分，取的是交集；

排除重疊形狀：簡單理解就是減去兩個圖形重疊的部分，與「與形狀區域相交」相反；

基本上通過布爾運算，我們能繪制出常見的大部分圖標了，但有時我們需要針對某些線條進行單獨的調整，又或者我們需要打造一套手繪風的矢量圖標，這個時候就需要用到貝塞爾曲線了。

6.1.2 貝塞爾曲線

貝塞爾曲線適用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。

貝塞爾曲線包括：節點、控制點、控制線、曲線這幾個基本概念。

矢量圖形便是由這幾個基本概念構成的。圖形由基礎節點作為支撐構成，控制點和節點之間的線段稱為控制線，控制線就像皮筋一樣，調整控制點的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。

節點包括 4 種基礎屬性類型，一種是沒有控制點和控制線的「直線節點」；另一種是「鏡像關聯節點」，這種節點控制其中一側的控制點，另一側的控制點會發生鏡像變化，適合繪制對稱結構的曲線；再有一種是「無關聯節點」，即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響；最后一種是「不對稱關聯節點」，這種類型下，節點兩側的控制點和節點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。

在 Sketch 中，我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型，加快繪制效率。

6.1.3 鋼筆工具

繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站，以游戲的形式練習鋼筆工具，通關的時候你對鋼筆工具就已經輕車熟路了。

繪制實戰

這里選擇了幾個比較典型的圖標，簡單演示下繪制方法和各自的繪制思路：

6.1.4 面性

眼睛：布爾運算相交 / 相減 / 合并形狀

繪制一個正圓，然后復制這個正圓形，通過布爾運算「與形狀區域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。

位置定位：旋轉 / 相減

這個圖標由兩個大小圓形相減，得到環形，再繪制一個和大圓半徑相等的正方形，和圓環左、下對齊，最后逆時針旋轉45度完成。

WIFI：相加 / 相減 / 旋轉

繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標。

齒輪：旋轉 / 相減

通過兩個圖形的布爾運算得到環形，然后繪制一個梯形，復制一個鏡像，將其對齊環形兩端，復制梯形編組并旋轉復制三次（45度），最后合并全部形狀完成。

鈴鐺：相加 / 相減

由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結構通過設置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。

6.1.5 線性

放大鏡：旋轉 / 相加

繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉45度即可。

時鐘：鋼筆 / 剪刀工具

繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。注意指針的長短關系。

雨傘：相減 /  剪刀工具

繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，完成。

相機：合并

繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。

愛心：相加 / 旋轉

繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉45度所得。

6.2 制定規范

無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規范具有統一輸出，指引細節、便于查看的好處，規范就是一組圖標中的規矩，所有圖標的繪制都按照規矩來，最終的成品就會顯得井然有序。

小小的圖標是由很多圖形元素組成的，在這些圖標中，元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異，也將幫助我們學會圖標設計的底層結構，依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。

在制定規范時，我們通常先繪制出一個符合業務風格的圖標，然后根據這一個圖標定制后續的圖標規范，依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度，光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。

制定規范的三個過程：

• 拆分細節：將圖標中的細節元素（圓角、筆畫末端等）進行分解，并在規范中制定細節元素的使用法則。
• 風格定位：根據產品調性，業務屬性在規范中制定相應的色彩、質感風格。
• 功能劃分：不同功能（金剛區和標簽欄等）的圖標要區分開來，功能相近的包括色彩、質感應該采取相近性。

圖標設計規范

6.3 圖標管理和交付

完成圖標后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標準框架內，讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審，合格后再加入資源庫，這樣避免多人同時修改而造成混亂。

文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標，那么可能會提供1x、2x和3x.的png文件，以適應多種設備。而對于開發和其他設計人員，則通常需要導出.svg文件，這些文件可以在設計程序中編輯，并且可以通過代碼在應用程序或瀏覽器中繪制。當導出SVG時，代碼應該盡可能簡潔。選擇Figma的另一個重要原因是它有超小的SVG導出，并且還能自動優化。

圖標資源管理工具：Nucleo

或許你能做出完美無瑕的圖標，但如果不能讓它們產品中發揮作用的話，那將毫無意義。所以在你開始設計之前，可以和開發人員談談，他們能告訴你圖標交付的要求，這將改變你的一些選擇，比如圖標的粗細或大小。問問其他設計師過去做過什么，以確保你們沒有重復工作。你還可以和市場運營人員聊一下，看看他們在日常物料中缺少什么。總之，多向別人尋求反饋、建議和幫助。他們會激勵你發現更好的想法，并讓你了解自己應該做什么。一套完整的圖標設計規范是有必要的。

6.4 線性or面性

設計中，我們應該是用「線性圖標」還是「面性圖標」呢？

其實二者沒有太明顯的選擇優劣，很多場景下已經越來越模糊，但總的來說，還是有一些法則可以作為參考：

• 常用的手法：在App的底部導航欄，選中狀態使用面型圖標，而非選中狀態使用線性圖標；
• 16px左右的小圖標慎用線性圖標，線性圖標在16px下，可排布像素的區域較小，這個時候線性圖標不容易設計；
• 面型圖標比起線性圖標，除裝飾性外具備更強的視覺信息層次感，更具引導性，比如金剛區功能圖標、IOS設置界面，使用面型圖標；
• 車載等系統界面，更適合用面型圖標，面型圖標的視覺面積較大，短時間內更加容易識別；
• 線性圖標看起來通常會更加細膩精致，適合比較精致簡潔的設計或者女性化產品設計；

功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精美、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。

7.1 線性圖標使用場景

在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計，很多APP產品的標簽欄都選擇用線性風格的圖標設計。無疑，線性圖標可以減少視覺干擾，讓用戶集中在產品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優美的外觀，且線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。

通常，在UI設計中，線性圖標很少和背板同時存在，因為線條的圖形視覺表現力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規則，一些簡單的線性圖標和背板的組合也會很協調。

7.2 面形圖標使用場景

面形圖標具有廣泛適用性，通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化，具有強烈的視覺表現力，一般用于應用界面的主要功能入口，以方便用戶快速尋找。

功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標，正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例，雖沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時還要考慮所有圖標的視差一致。

7.3 扁平圖標的使用場景

扁平化圖標實際上是線性圖標和面形圖標的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導頁、空狀態也的情感化設計，后來逐漸在標簽欄、首頁主要功能入口也出現了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。

我們了解了 icon 的基本知識，那么如何設計一個好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個產品呢？我們需要了解什么才是一個好的 icon 。

我們可以從以下五個方面來檢驗，分別是：識別性，規范性、統一性、呼吸感與品牌感。

8.1 識別性

圖標就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個圖標最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。第二就是將圖標拿到強光下進行觀察，在強光下是否可以看清圖標的主題結構，圖標是否有足夠的辨識度。

圖標識別性可以分為兩類，分別是含義識別和視覺識別。

含義識別：是視覺語言是否可替換文字語言，簡言之就是讓你的圖標可以被用戶理解，不會讓用戶產生歧義。

視覺識別：圖標的大小，顏色，線條的粗細，這些影響視覺識別的因素識別性是否高。

8.2 規范性

規范性也是做好一個圖標的基礎，我們要保證圖標在視覺大小的一致性，圖標飽滿度、遵循同一種規律，細節統一性。

視覺大小的一致性：在相同尺寸的基礎上分析形狀間的視覺差異，來審視視覺上是否統一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規定它的最大尺寸，進而在尺寸規范中適當調整，使得視覺大小達到統一；

飽滿度：常用的衡量方法就是正負形衡量法，在圖標所占區域的矩形框中，看圖標的正形的面積是否還可以增加；

相同規律：同一套圖標必須是以同種風格呈現的，例如是否全部使用了圓角或直角的風格，圓角大小、繪制風格是否一致；

細節統一：包括像素是否對齊、圓角、描邊粗細是否統一的問題；

8.3 統一性

在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同。這時，圖標一致性的意義就體現出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。

圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。

8.4 呼吸感

呼吸感的意思就是適當留白。不管是圖標還是界面，適當的留白可以突出主體內容，讓內容具備易看性。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解，太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。

8.5 品牌感

品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。

那么，該如何提升品牌感，打造屬于自己App的獨特風格呢？品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。

我們都知道圖標在APP設計中的重要性，但是打開許多APP你會發現他們的圖標設計都非常普通，似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言，但是仍逃脫不了與其他APP設計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產品氣質。

那么，該如何打造屬于自己APP的獨特風格呢？品牌基因為我們提供了一些線索。它是由平面設計中的VIS（視覺識別系統）引入的一種設計策略，通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質。接下來，我們就來學習如何利用品牌基因進行圖標設計。

9.1 提取品牌圖形

通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的，不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網易云音樂的首頁標簽就直接使用了它的品牌圖形，其優點不言而喻。

但是請注意，這種設計策略并不適合于所有的App，當第一個tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。

還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。

9.2 提取品牌色彩

色彩也是圖標設計中重要的構成元素之一，合理協調的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據，可以給用戶帶來由內而外一致的視覺體驗。在設計時提取品牌色彩可適當調整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標背景色，使圖標之間形成色彩上的關聯。直播應用Bigo Live的品牌色是青藍色，在標簽欄的圖標設計上（選中態）將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調性高度一致。

9.3 提取設計語言

在VI設計中通常提取輔助圖形作為設計元素，這在圖標設計中同樣適用，當所有的圖標都具備了相同的設計元素，他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標的也使用了類似的輪廓，這樣他們就形成了某種視覺聯系。

9.4 提取產品氣質

品牌形象決定了產品的氣質，而產品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候，往往會根據他的外貌形象特征，產生一個大致的印象，這就是一個人的氣質。APP也同樣，例如傳遞傳統手工藝人社交的「東家」，其產品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創造出具有東方韻味且極具形式感的圖標設計。

9.5 拆分品牌名稱

App標簽欄圖標最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現形式上賦予更多創意和個性。MONO是一款閱讀類App，它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯系，但加上標簽文字的輔助也不會造成閱讀困難，而且產品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創意反而給App設計加分了。

9.6 展開形象聯想

我們日常使用的眾多App大多數都有著相同的功能模塊：首頁、發現、動態、我的等，因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子，“發現”是眼睛，“動態”是氣泡，如果有差別也只是設計風格的差異，有的直角有的圓角，有的線性有的面形。這樣的設計沒有品牌歸屬感，試一下將這些圖標單獨拿出來就無法判斷它是誰，它從哪兒來？

優秀的設計師不僅要具備將圖標繪制精美的能力，還要具備豐富的設計想象力，不拘泥于設計規范的條條框框，有時候打破規則才能設計出優秀的圖標。“首頁”除了小房子我們還可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設計與品牌形象緊密相連，簡直完美！不過最新的改版好像已經改沒了。

總之，要想在繪制整套圖標時建立統一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創作出最佳的設計方案。

寫在最后

圖標設計是UI設計中非常重要的環節，因為除了文字和圖片的排版之外，在扁平時代能夠傳遞給用戶情緒和設計感的通道就是頁面中的各種圖形與圖標。在尺寸有限的界面上，小小的 icon 可以更加簡單高效的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格，以滿足不同的業務需求。

OK，圖標設計指南就分享到這里，希望對大家有所幫助。因為篇幅較長，幾經修改，有細節不嚴謹的地方，歡迎斧正，感謝閱讀。

參考文獻

Material Design

Human Interface Guidelines

ICON | 設計指南——v優客

ICON設計指南——Bonnie Kate Wolf

圖標設計零基礎科普指南

UI設計師必須知道的 iOS和Android的APP圖標設計指南

品牌基因圖標設計技巧

作者：印跡時光

分享大綱：

1.層疊手法

2.圖標圖形化

3.單色弱漸變透明圖標

層疊手法

顧名思義圖標之間有縱深前后關系，通過這樣去處理，可以讓圖標層次豐富，增加設計細節，打破枯燥無味的單色扁平圖標。

通常大部分人設計一個圖標就直接將圖形畫出來后，這樣就完事了，沒有繼續深入下去。這樣圖標看著枯燥乏味，普通了一些。

如上圖，將圖標在接口處進行細節弱透明度處理，那么效果就完全不一樣了。

這里需要注意，一般都是在圖標的接口處進行層疊處理，從A到B的一個線性漸變。

下面來看看案例：

Atlassian的品牌圖標系統

使用建議：運用在面形圖標效果會更好些，或者線條粗一些的圖標，一般運用在TabBar上面居多。

圖標圖形化

這種比較好用，將圖標進行抽象放大化處理，變成一種圖形方式。一般運用在卡片設計上面居多。

左側卡片上面，圖標直接使用描邊效果。卡片里面雖然加了一些底紋圖形，但是整體效果略顯平庸了一些 。

重新將圖標進行圖形化處理，既能夠表達當前含義，同時設計上細節和品質感有所提升。

其他思路延展示例：

當然還有一種類似的思路，可以將圖標進行放大化，并進行色彩分割處理為背景，前景放圖標和文案等。

如圖，我將前面兩個思路綜合運用，圖形化背景和層疊圖標。這里的圖形希望大家不要亂用，盡量使用圖標的圖形來演變。

單色弱漸變透明圖標

圖標通過弱漸變透明處理，其思路有點類似第一個。但是這個方法圖標整體帶透明度的范圍更大。

先來直接看個案例：

這種圖標給人比較新穎的時尚感，層次也豐富。

如何處理這種圖標？

非常重要的一點，需要注意不識別度問題。如左側圖，圖標和背景之間幾乎融為一體，看不清主體元素。右側處理剛好，能夠識別出圖標含義。

處理時候一定要注意透明度的關系，當然也與卡片背景色有關系。

寫在最后

關于圖標設計三個小技巧，可多看幾遍，思路比較簡單直接。當然最重要的是靈活運用，也可以將三個思路都融合起來去設計圖標。

本文只是拋磚引玉，這些圖標處理的技法，并不是能適用所有場景。大家還是需要根據自己產品特征，找到合適的突破點去設計。

原文地址：功夫UX（公眾號）

作者：功夫UX

設計：Song hojong

1. 雙色漸變圖標（Duoton Icon）

2019年漸變色流行了一整年，那么2020年雙色漸變設計依然持續是一個大趨勢，因為單一的色調無法滿足產品所需，雙色調圖標的特點就是色彩對比鮮明，青春活力，這種相比單色調圖標，更適合應用于一些主流偏年輕化產品，因此設計師還可以通過設計色彩打動用戶，提升產品競爭力，工具化產品也可以使用這樣有層次的圖標，不過使用時，需要對色彩進行克制使用。因此，如果您希望自己的設計界面脫穎而出，可以去大膽的使用雙色調色彩。

a. 雙色調多層質感(彌散漸變，直投影，混合模式)

b. 雙色調混合模式疊加

2. 單色漸變透明圖標（Alpha Icon）

Alpha icon 圖標風格最大特點就是單色帶透明漸變，通過弱透明度來制造視覺層次，如果是純白色，就會顯得圖標平庸了一些，這種圖標運用范圍可以是界面中空場景或者一些關鍵模塊的主功能圖標。

如下圖左側大卡片上面圖標應用思路。

3. 層疊式圖標（Cascade Icon）

層疊式圖標，相比于純白色線條圖標，它帶來一種更舒適的質感，其設計方法是通過穿插層疊的手法，將日常我們所見到的單一的線條圖標，變得更具有視覺層次感，當然這種圖標使用場景一般會是在功能說明性頁面，功能介紹等。

4. 品牌植入（Brand Icon）

品牌植入一直是非常大趨勢，包括今年我們所看到兩大廠的品牌更新IBM和UBER等，都是將品牌核心符號植入設計中，我想這樣的思路在2020年將持續會是一個重要表達產品氣質和記憶點手法打造思路之一，因為用戶已經很熟悉目前圖標模式，如何能創新區別其他產品，那么融入品牌將是一個不錯的選擇~品牌的融入技巧有高低之分，需要設計師去巧妙設計

圖標與IBM字母基因某些地方保持一致性，點擊查看此視頻。

同樣多鄰國在前段時間更新品牌，并將其LOGO特征符號植入字體中。

5. 動態圖標（Motion Icon）

動態圖標是一個能提升產品體驗的方法之一，也是微交互中的一種，它可以增加產品趣味性，Facebook在評論入口的表情動畫就運用了動態圖標， 包括蘋果Apple Pay支付成功圖標動畫，Google Assistant智能助手，Messenger中的打招呼動畫等等我們可以逐漸發現動態圖標比靜態圖標的表達性更強，更受到青睞，隨著硬件升級，這種動態圖標運用逐漸在越來越多場景可見到。

看看整個表情動畫，點擊查看動畫視頻。

看完是不是覺得特別有趣好玩。表情更接近我們生活。

再來個Apple pay支付動態效果，點擊查看視頻演示。

其他類型圖標動畫

OutLook中的日歷圖標動畫

總結

在整個互聯網大趨勢下，研究圖標將來的風格走向，做好未雨綢繆，希望以此為開端，大家能發現更好的設計趨勢風格，融入產品設計里面，當然趨勢是好的，我們運用時候更多需要從產品本身定位出發，產品性格去合理運用設計趨勢，提升產品設計品質。

作者：LoveXiaoTao，微信號：UX-Talk

如果把平面設計看作是形與色的組合，那么Illustrator就是勝在對形的把握，而Photoshop則重在對色的渲染。如果是想要做出有質感的畫面，那勢必要用到PS不可。

今天我們就來利用PS打造一枚質感水晶風格圖標，說是圖標，其實也可以當作平面的素材使用。水晶本身是幾何狀，很容易做出現代的簡約風格。

靈感來源

來自Jose A.ortiz的一組光感作品，看了作品里對光源把握很好，于是臨摹了一下，有所心得。在他原有的作品上，增加了光的作用，此外也增加了我自己的方法和理解。

警語

軟件：Photoshop 2019

本文對所涉及的軟件基礎工具不多做特別詳細的解釋，如果對工具仍然不熟悉的小伙伴，可以先移步軟件的基礎操作再進行實例練習，本文更多提供的是一種創作的思維過程和方法。

用筆刷實現漸變

我很喜歡PS的筆刷，但是用來用去發現最常用的還是默認那款。今天我們就用最普通的筆刷來「刷」出色彩。

雖然軟件里有漸變工具，但是要想實現漸變這一視覺效果，在PS中有無限的實現途徑。比如今天我們要用的就是用筆刷來實現漸變。

用筆刷來實現漸變，和繪畫是一個道理，非常自由的調配色彩。這樣能讓漸變的色彩表現更自由。

以上左右兩個圓的色彩填充就是分別采用了漸變工具、柔邊圓畫筆筆刷?？梢钥吹接疫吂P刷刷出的漸變比較自然靈動，而左邊相對比較平直，沒有變化。如果想要實現比較靈活的視覺效果，左邊用漸變工具以后，還需要做更多的處理。

繪制水晶晶體外形

首先還是需要我們在PS中繪制出水晶的外觀輪廓。

STEP 01

我們可以首先在草圖上找到合適的形態，水晶是一種有機形態，可以探索多種不同的形態畫法。

這里大家可以看到我們有多條邊線，這是把位于水晶背面的邊線也表現出來了。這是為了讓我們在軟件里繪制形狀時清楚水晶的結構，每一個面都需要填色到位，我們要讓水晶保持透明。

STEP 02

打開PS，新建一個2000*2000px的文檔，將背景設置為暗藍色。一般來說，光感效果都需要暗色背景來襯托其光亮。

STEP 03

按照草圖給定的輪廓線，運用鋼筆工具進行繪制。繪制的目的是建立起水晶晶體不同的「面」，這樣才能幫助填色。

水晶的晶體一共有8個面，前后分別表現為4個面。

前后4個面是遮擋的關系（前面擋住了后面），在這里如果降低了圖層的透明度就能看到，因為透明，這8個面的視覺相互影響。

相應的，在圖層上也需要安排好它們的順序。

「刷」出色彩

按照順序，從前方的左下這個形狀開始填色。

STEP 04

首先我們需要調出這塊三角形的輪廓線，在輪廓線內涂抹色彩。這就可以利用我們上一步所繪制的8個形狀，分別進行。

在按住鍵盤上的Ctrl鍵時再單擊鼠標左鍵，就能形成螞蟻線輪廓，新建一個圖層，把所涂抹的色彩放到新圖層上，下方的形狀圖層就可以關閉了。

這里我只使用柔邊圓這個最普通的畫筆，將其放大，可以任意涂抹大塊的色彩。

色彩我們可以從藍色開始，然后再為其增加其他的色彩比如紫色、紅色等。

PS在色彩方面的優勢就是可以對色彩進一步優化，比如大家在色彩搭配方面一開始并不滿意，后期也可以通過調色或者改變透明度、圖層混合模式等一系列方式進行質感的提升。

STEP 05

按照上述方法繼續涂抹正面的另3個面，色彩不要太過，讓整體畫面保持平衡。

在這里我的配色方案是用藍、紫作為主色，然后輔以橙色以及洋紅。

STEP 06

接下繪制位于背面的4個面，這4個面在正面的「下方」，但這里不需要關閉上面的圖層，而是保持上面的圖層可見，看看它們彼此重疊后的效果，可以隨時調整上面的圖層的透明度甚至色彩。

進一步潤色

到這一步我們就已經把初步的工作完成，接下只需要進一步修飾、潤色。

STEP 07

可以把每一面的圖層都經過調色處理，這通常處理一些比較細的色彩細節。最常用的調色工具是【色相/飽和度】，這一步主要是為下一步整體調色服務。

也許這并看不出多少改變，因為此時還只是微調，色彩只要不出偏差，都不需要大的調整。

STEP 08

這一步開始增加高亮的部分，這部分采用小一些的白色柔邊圓增加在面的邊緣部分。這里我采用的是增加剪切蒙版的方式，如果光亮太過白，可以實當減弱其透明度。

將白色的高光增加在邊緣部分能進一步強調水晶的體積感。

調色階段

這時正式進入進一步調色的階段。

STEP 09

這時將除了背景以外的所有圖層編為一組，然后把這個組命名為備份，再復制一個組，將這個組合并為一個圖層，然后把這個圖層命名為水晶，我們對這個水晶圖層進行調色。

原有的備份組關閉其可見，但在需要比較調色后的效果時，也可以開啟隨時比較觀察。

首先我們運用【自然飽和度】，增加色彩的飽和度。

STEP 10

再調整【曝光度】以及【曲線】，增加畫面的色調明暗對比。

STEP 11

再進一步采用【色彩平衡】，對色彩做進一步修飾。

雖然沒調色之前，看起來并沒有什么不妥，但是調色之后再對比，就會發現之前的版本的色調看起來很黯淡。

到這一步色彩已經完成。

光色美化

光線是我們這次練習的重點，因此接下就來繼續增加光效。

STEP 12

首先來增加其本身的色光，復制上一步的水晶圖層，然后柵格化圖層，將其進行【高斯模糊】。模糊參數可以設置到72，甚至更大。

然后將這個圖層的混合模式改為【濾色】，透明度降至70%。這樣也會為畫面增加一種夢幻感。

STEP 13

再將原有的水晶圖層進行柵格化，這里我們要對這個圖層應用【濾鏡>光照效果】

STEP 14

最后，在背景之上新建一個空圖層，用畫筆畫出中央略亮的感覺。

到此我們就完成了整個制作步驟。設計沒有終點，這一步以后還可以返回重新調色，增加光效等。

最終效果

目前這篇文章，我們就做到這一步：

后記：用時間打磨出質感

很多人對PS的印象，還是停留Photo這個層面，但是我們可以看到PS對質感的營造是獨一無二的，所有在AI或者其他工具畫出的插畫，我覺得都可以利用PS來進一步潤色得更為精致。

在沒有調色之前，其實很多畫面的色彩都看得過去，放到PS當中潤飾之后，通過對比都能發現差異，一稿就能做出優秀配色，恐怕是需要幾十年深厚的配色功底。質感也都是通過時間慢慢打磨出來的。

在有限的時間里，實踐時間利用的最大化，就能深入到更細的細節。一點實踐的體會。

原文鏈接：https://www.ifeiwu.com/blog/design/1494

1 使用光柵來更好的設計圖標

UI界面的圖標通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。

根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。

圖標越緊湊，所需空間就越小。圖標的邊緣越銳利，細節越多，它們占據的畫板空間就越多。

請注意，不要過分的依賴于網格來設計圖標。它們是用來幫你而不是限制你的。如果一個圖標的某些元素伸展出來更好看，那就順其自然讓它們伸出來。

2注意像素網格的重要性

在非視網膜屏幕上設計圖形的時候，要特別遵循使用像素網格，并優先選用2像素的邊框作為圖標的線條。因為它可以讓圖標在這些顯示屏上更加清晰。

如果為圖標設置1像素的邊框，這個時候，這些邊框應該使用外部或內部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區別。

居中描邊的一像素邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊掉。所以，慎用~下面兩張圖是圖標在居中描邊的時候所產生的效果：

根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這樣的數值。

3保持一定的圖標細節

從一套圖標中最復雜的那個開始來設計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。

當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。

4控制最小的間隙尺寸

圖標的相鄰元素之間空間在整個圖標集中不應太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標，太小的間隙，所產生的粘滯感要特別注意：

下面這個則是調整后的效果，是不是好多了？

對于線性圖標來說，圖標線段的最小間隙應該等于線的粗度。另外，線條應該明確的分開或者準確的閉合連接。下圖是從錯誤的例子：

下面這個則是修改后的效果，是不是好多了？

5去除重復部分

在一套圖標集中，你很可能會重復一些細節，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數學中的分數簡化一樣。您看到的圖形噪聲越少，用戶的理解就越清晰。

比如下方這個郵件收發主題的圖標，當用戶已經非常熟知自己的具體操作，比如收郵件，發郵件，回復等等。那就不要在設計圖標的時候反復強調“信封”這個圖形了。將它們簡化，效果反而更好。

此規則還涉及圖標周圍的各種裝飾，框架，背景。如果它們沒有幫助幫助更好的閱讀圖標，就讓它們更加簡化一點比較好。

6保持圖標風格統一

下面的兩幅圖可以很好的展示正確的和錯誤的例子，比如一套家具的圖標，如果一個圖標的繪制角度是斜45°，那么其他的圖標也盡量保持這樣的角度。而不能一個是正視，一個是斜視。看看下面兩幅圖，哪幅圖是正確的呢？

相同的原理適用于線性圖標和填充圖標。 如果你把它們混為一談，人們可能會認為它們具有不同的重要性或地位。 當然，除非你刻意想要那個。 例如，填充圖標用于鍵命令，線圖標用于其他命令。

當然，我們可以用填充圖標表示當前態，線性圖標代表非選中狀態，這樣也是不錯的選擇。

7基于二倍數的度量系統來設計

與基于十進制的大小調整相比，8像素網格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標區域已成為標準。 如果需要更大的尺寸，可以縮放這些圖標。是時候補習下數學啦！

8保持輪廓的干凈和準確

對于完美主義，設計師不能鉆牛角尖，因為沒有完美的事物。但是在你的最終設計稿里邊，正確的，不扭曲的圖標設計還是非常重要的。特別要注意，確保相鄰的節點和相鄰的元素是完全對齊或者沒有間隙的。

一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節點定位準確，圖標邊緣看起來很清晰。這個非常必要，保持整數吧！

9清理SVG圖標中的垃圾代碼

我們都知道SVG圖標最終是一串代碼。在Sketch中生成的SVG圖標通常會包含很多不必要的冗余代碼，比如組，顏色圖層還有遮罩。下面的這個圖標在Sketch中看起來很棒，但是…….

我們把Sketch生成的SVG圖標在AI中打開的時候，你會發現它的圖層非常混亂。這些混亂的圖層都可以會讓前端開發工程師在轉換代碼的時候出現問題。

我們可以把這些不必要的圖層刪除掉，這樣看起來簡潔多了：

10不要把本文當公式

當然，以上我們討論的建議只是建議，他們不是刻板的公式。如果你知道自己在做什么，則可以僅僅把它們當作參考，而不一定要完全遵從它們。設計是靈活多變的，只要符合用戶體驗的規律，都可以被我們所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻譯：靜電

UI最重要組建之一就是圖標，隨著扁平化設計的發展趨勢，越來越注重圖標的簡潔與寓意表達，平面圖標已占主導地位。每位設計師所處的階段所關注的要點是不一樣的，我把圖標設計分為2個階段–初階與高階，這樣分是為了有步驟性的學習和進階的加強，當然，能人的話一步到位，對于新人來講會較難，需要實際工作中輔導與自己經驗總結。我不會華麗高大尚的語言，但是我可以分享一些實實在在的基礎方法，也是這幾年會給帶的學生反復必講的入門輔導，有自己成熟方法表達的設計師可忽略這里，這里先說初階的設計關鍵要點。

目錄:

1. 一. 概念類別

2. 二. 設計技法要點

3. 三. 系列成型圖標

 ———————————————————————————————

【一】概念類別

扁平化圖標大部分無非就是剪影表現，而這里為什么重點是講圖標的形狀設計，而非色彩，因為一切先有形才考慮下一步。形不好再怎么營造整體風格都白費力，好比建筑造型與裝修的關系，而色彩等營造的風格都可另起文章分析 。圖標造型表現上無非就是典型的2種：面與線 。運用這兩種基礎元素去造型也可以進行多種組合不同的表現 。組合造型一般有單體造型、多個元素組合造型，線與面之間的獨立與結合的變化。

• l 簡化的微寫實圖標

這類通常是彩色一體表現，造型和組合上較寫實，不是純剪影，是寫實過渡來的簡化，又接近剪影，扁平簡化設計，這里主要是利用面和顏色來進行造型的設計。質感風格上也有6種（已有人分析），大概是純平面、折疊、輕質感、折紙風、長投影、微立體。這種相對剪影的好畫很多，也更加容易塑造風格，更多是在色彩上有得發揮和考究，用在界面里也是最為突出的。最近還非常流行用色塊來進行二維、三維的裝飾表達，叫所謂的“低面建模“,感興趣的去搜一下。

上面提到的元素組合，比如下圖這個圖標目前是2個元素–信封加信紙，如果還要再加什么功能狀態示意，最多在右上角加個很小的消息提醒。因為元素越多越復雜，所表達的含義也就越多，同時也會影響造型的調動。不管多少個元素總有一個最重要的對象，其他為輔助圖形，在塑形大小復雜度上有區別。

1.1本文半原創圖例

l  剪影的正負形圖標

這類通常是單色表現，當然也有綜合彩色的。其更加簡潔抽象， 言簡意賅，高度提煉精華，講究表象意境，具有理解的門檻。所以這才是最難設計的一關。非?？季吭O計的理性與感性之間在功能傳達上的邏輯思維。也是UI界所謂現代極簡主義的代表，注意，沒把握好就會變得很“空虛”，把握好了就是時尚的feel啦~

負形圖標是以線繪制的圖形，高度的輪廓概括，就跟畫骨骼一樣的要求精準到位，也叫線形圖標。負形剪影是所有圖標中最講究也最難表達型的一種風格，如果畫不好就很容易俗氣和簡陋。

正形圖標是以面繪制的圖形，也有和線綜合表現情況，自己根據需要進行創造變化吧。通常與負形圖標之間做當前狀態的轉換，手機tab上最常見，如ios7。

優點：簡潔清新優雅；極具現代感（雖然遠古時代就有高度概括的符號表達，這里指的范圍是互聯網上的全新應用）；具有設計與涵義綜合的拓展性；還可以完成一些抽象詞匯的圖形傳達。

1.2本文原創圖例

圖標為上傳到云端的之意，這里的主對象是云，所以箭頭和云的比例是不同的，上傳箭頭是輔助圖形。了解界定多元素之間的主次關系，就能夠把握一個整體的造型走向。典型的基礎表現就是上面兩種，然后在實際繪制中根據自己的喜好和設計來進行融合，可以得出更加豐富的表現。

【二】設計技法要點

1、關鍵節點繪制法

擬物化設計就是盡可能的繪制繁瑣細節，追求豐富和相似度。而剪影圖標則是相反，以簡練為繪制手段。但是細節就沒有嗎，不是的，而是更加謹慎認真的注重每一筆，且越來越優雅。這里舉例剪影圖標繪制方法技巧，3步驟可以搞定，看似又簡單又難，簡單的是只是繪制參照物輪廓，保留基礎識別性，步驟很少；難的是這調整的過程與產品環境的融合性，易用性，還有你自己的創意想法。說簡單點就是去繁擇簡并經過思考改造過的設計過程。而最基本的最需要犀利眼神抓準的是造型的關鍵節點，雛形出來后再根據想法調整。

• l 提煉精華勾勒輪廓

通常在繪制已有參照物的基礎上去設計一個圖標，可以根據你喜歡的造型參照物去進行分析，先抓取到參照物的關鍵節點，幾何繪制出來一個相似的基本圖形。

• l 調整線鋒優雅得體

基礎雛形出來后就開始加入自己的想法調整線鋒，線條走向決定造型。這個時候就得要調多幾個版本了。設計師的處女座精細和糾結情結就在這里灑汗了，不斷調整對比，挑選出一個最優再進行下一步。

• l 增特有細節出風格

最后一步的塑形，就是畫龍點睛！造型的特點就在這一步去完成。

2.1 本文原創圖例

對于新老設計師來說，這樣的方法都是比較可取好用的，交互設計師也可以這樣快速入門哦親！尤其是第一步驟，能否非?？焖俚某鲭r形。下面是其他案例的設計方法欣賞，跟我上面總結的一樣道理。

2.2圖例來源于Digial Art

2.3圖例來源于iconwerk

2、精致的基礎要素

精致即精細極致?？此坪唵蔚膱D標其實并不是隨便了事，但知道了這些基本要素你就可以完成一個合格的圖標了。好的圖標是謹慎認真的注重每一筆每一像素每一矢量錨點的，盡可能的往精美優雅的方向努力吧騷年~

• l 犀利清晰

需要鍛煉厲害的眼睛，使出你的火眼金星捕捉每個像素之差，像素滿格才能清晰的呈現，細分出來通常會遇到以下3種情況，這也是最影響圖標基本質量的問題點。

1)    輪廓發虛

圖標一定要用矢量繪制，但是新手很容易犯的第一個錯誤就是圖標模糊的問題，也不清楚為何會這樣。其實就是矢量邊緣模糊產生的問題，也是個人繪制的不良習慣造成。避免這個問題，必須在100%畫布上繪制圖形，而且不能直接推動圖標放大縮小，即使這樣改變大小了也要放大畫布調整路徑的錨點，反復查看及校正是否對齊1px網格，而不是0.1~0.9px，正是不滿1px格才會生產虛線。而圓形的繪制保證十字架4個邊緣點對準就可以了。

2.4本文原創圖例

2)    斜形發虛

斜線也是會有模糊與精致之分的，不仔細對比其實是比較難看到問題，可能很多人都會碰到圖形進行傾斜效果時是有鋸齒的，那就是角度的處理問題了，自己進行多角度對比下試試，會發現哪一個角度最清晰。也可以將圖層進行雙層疊加，會非常犀利哦~

2.5本文原創圖例

3)    像素不夠或多余

看下來都是像素發虛與清晰的原因都是一樣的，下面這個例子是箭頭在小尺寸情況下可點陣矢量像素繪制，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制。

2.6本文原創圖例

總結一下上面的處理方法，堅持最少發虛原則：

2.7本文原創圖例

• l 比例協調

圖形內部結構要注意元素構成之間的比例，有黃金比例分割也有感性的平衡方法。嚴謹的圖標比例可參照蘋果IOS圖標規范案例，打好內部統一結構線進行圖形繪制和比例分配。

2.8來自蘋果圖標及來自Seevi Kargwal圖例

如果頭眼昏花嫌麻煩，也可靠經驗感覺快速完成一個具有平衡感的圖標。

2.9本文原創圖例

• l 視差平衡

同一個尺寸規格，但根據不同形狀的圖標，會導致面積占比引起的視差大小不同，但要在參考尺寸范圍內繪制進行調整。以下圖標示例都是撐滿方框邊緣繪制，按道理這好像是準確的，但由于人的肉眼會有視差問題，所以做的設計就要暫時拋開科學，以人的真實情況去判斷再調整。

2.10本文原創圖例

【三】系列成型圖標

能夠熟悉掌握完以上基礎要素，恭喜你可以大膽的去創造系列圖標了，當個數圖標設計確定好后，接力的圖標必須延展其風格設定：造型規則、樣式、細節特征等要素統一設計–繁衍具同視覺與內在含義屬性的圖標。

3.1圖例來源于iconwerk

Ps：我非常欣賞iconwerk的圖標設計，只因我在5年前發現他的剪影圖標作品一直到現在都是那么愛。傳送門：http://iconwerk.de/iconwerk10/index.html

3.2本文原創圖例

3.3圖例來源于Yorlmar Campos

3.4圖例忘記來源于哪位設計師了

3.5圖例來源于Jee

【結尾】

值得注意的是在簡約與裝飾之間的平衡要靠自己的把握，正是這個把握的度是考驗設計師是否成熟的表現。進階的優秀圖標是能夠平衡于識別性、簡約與裝飾之間的琢磨，具有功能又具情感的。希望本文對新同學有幫助，歡迎一起探討和補充。

(本文出自騰訊CDC博客: http://cdc.tencent.com/?p=8239)