常見的分類是簡單的線性分類，缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。
大家好，我是Clippp?？吹胶玫膱D標我們會習慣性地截圖保存，但隨著收集的圖標越來越多，會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題！
對圖標進行分類時，普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標，樣式很簡單，但可以劃分到多個類別中。
首先將圖標按尺寸大小分為兩類；
繼續細分對應的面性、線性、線面結合、扁平、擬物化等類型；
最后選擇標準、容器、漸變、3D、手繪、陰影等風格。
利用這種結構層級，可以明確定義圖標類別。
圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現出來。
小尺寸圖標用作UI控件，起到引導功能或裝飾目的。
利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不適用于小尺寸圖標中，所以在小圖標分類中沒有展示。
大圖標利用尺寸上的優勢能展示更多內容，分為多種組成形式。
1.2帶有背景色的面性圖標
1.2漸變線性圖標
1.3等距線性圖標
1.4手繪線性圖標
1.5斷線圖標
1.6雙色線性圖標
2.2帶有背景色的線面結合圖標
2.3錯位線面結合圖標
2.4色塊圖標
2.4單色線面結合圖標
3.2帶有容器的扁平化圖標
3.3等距圖標
3.4半陰影扁平圖標
3.5長陰影扁平圖標
希望大家能對圖標的分類及設計有更全面深入的認識，從而構建一套完整的圖標思維體系。
文章來源：站酷 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為一名UI設計師，圖標設計是我們剛入門就必須學會的必備技能之一，它是用戶界面中絕對不可或缺的元素。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設計風格的普及，圖標的風格越來越簡約，看似簡單的圖形，實際要準確的表達含義，也是需要注意很多細節的，在如今大同小異的圖標中，如何讓你設計出的圖標具有說服力也是一門學問，今天就給大家全面的剖析一下圖標的知識，讓你做出的圖標有理有據。
1、圖標的定義及分類
2、圖標的設計規范
3、圖標的性格走向
4、圖標的評判標準
5、總結
圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常?？梢詡鬟_出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內容和信息。
在數字設計領域，圖標作為網頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎設施，也是達成人機交互這一目標的有效途徑。
釋意性圖標是用來解釋和闡明特定功能或者內容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：
2-1-1純圖標：
例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。
2-1-2圖文結合：
例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標（圖標內含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。
交互圖標的最大意義在于可以引導用戶進行交互行為，是在產品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。
裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。
圖標基于基礎樣式（線、面、線面結合）+表現手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產生較大的困擾。在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。
線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
這類圖標的特點是通過細節和光影還原現實物品的造型和質感，能給用戶極強的代入感，用戶可通過對現實事物的聯想，快速領會圖標表達的意圖。但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現在擬物化的圖標很少運用在APP界面之內。
相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區域我們會使用加入輕質感的圖標。
合理的遵循圖標規范可以有利于設計師之間合作使用，指導設計師如何規范的去設計圖標，以確保企業所有產品圖標風格的一致性和可用性達到統一，同時也是為了后續產品更新迭代有可參考的地方。
為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，常用的網格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設計中也會存在特殊的尺寸，例如谷歌在臺式機上設計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎網格就會縮小到20。
下面就以常用的24x24為大家展示：
網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。
*在使用常規圖標時避免一部分在出血位。
*在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。
在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：
當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。
在設計一整套系統化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內部和外部筆劃。這樣圖標看起來才更統一，也有利于后期圖標的迭代更新。
當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當的縮小線的像素大小。如下，我們設定的系統圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設定為2px。
我們在用矢量工具繪制圖標時，要仔細看好圖標的網格尺寸和圖標結構尺寸，避免產生小數位。
曲率簡單來講就是圖標中帶有圓角的邊角度數，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現方式有兩種：外曲、內曲。
外曲與內曲并不一定同時存在，在特定情況下內部結構可以是直角（無曲率）。如下圖：當內部結構都是圓角時會發現整個圖標稍顯臃腫，這時我們可以把部分內部圓角直接變為直角（也可以改變曲率大小），改變后就會發現圖標的整體結構會顯得更加協調。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統一。
根據像素的網格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現7.8°、14.2°這樣的奇怪數值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規律的角度方案），這樣會使得整體的圖形變化顯得更加規律，也能夠滿足不同圖形的角度需求。
在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態保持一致。
確保圖標內每個細節和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。
非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調才能保證平衡感。
在圖形的處理上，不要留有多余的節點，干掉多余的節點，保持圖形的整潔。
ICON命名要求較為嚴格，涉及到我們切圖給開發，所以我們命名爭取做對，且需嚴格遵守規則，正確的命名原則：類型_位置_功能_狀態_大小
每個App應該有自己獨特的產品氣質，同樣圖標性格也應當與產品氣質保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務（細直）、精致（細圓）。
圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為直角。
粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調類型等產品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設計。
圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為圓角。
活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產品中。例如閑魚，不管是在LOGO字體的處理還是APP內部的圖標處理，都是采用了線條較粗的圓角設計。
圖標結構特點：線條較細、拐角為直角。
商務類圖標讓人看起來十分規矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務、工具等產品中。例如工具類的思維導圖APP，它的可操作按鈕都是商務類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
圖標結構特點：線條較細、拐角為圓角。
精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、品、藝術、領域垂直等產品中。例如airbnb，在APP應用中大部分都采用了精致類圖標。
當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質、協調性、一致性、品牌調性。
圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。
在互聯網普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。
選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。
每個App應該有自己獨特的產品氣質，而我們所做的圖標就是要跟隨產品的氣質。例如當你要做一款二次元產品，你的圖標氣質就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規矩。
一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節統一，圖標內容的統一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大?。壕W格大小是否統一、是否遵守圖標的keyline規則。
3-2 圖形角度：是否遵循設定的角度規范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統一，如果圖形太多且復雜，那么我們可以根據圖標的特性去設定曲率的規則，例如可以設定當邊角像素在1-2px時內外曲率為2px；當邊角像素在3px時內外曲為2px，內曲為1px；當邊角像素大于或等于4px時，外曲為2px，內部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規范。
3-6 透視：透視是否一致，避免在同一套圖標中出現正視圖/側視圖混雜的情況。
3-7顏色：在圖標的配色上要保持一致的規律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協調，避免出現飽和度、明度反差過大的配色。
一致性代表的是圖標的基礎，而協調性則代表圖標的整體狀態，協調性的呈現狀態是驗證一致性是否合理的標準，當協調性存在問題時，我們就要反過來查看一致性存在的誤區并給予修改。在圖標的協調性上我們主要審視這三點：視覺大小、飽滿度、透析感。
視覺大小對標的是一致性的尺寸大小與描邊大小，當你發現圖標視覺大小不對等時，你就要回過去查看你的網格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）
飽滿度對標的一致性的間距，當你發現圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。
透析感簡單來說就是留白區域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。
品牌調性是我們經常提到的緯度，我們打開很多APP都會發現他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯動性。其實我們可以結合品牌調性，在圖標上做更多的聯動、創新。
色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。
當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的logo印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。
我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，就把音符作為首頁圖標。
如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備引導含義，必須配合文字一起出現，這樣才能讓用戶能易理解。
圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。
設計師對自己做出的所有設計都必須要有理論支撐，圖標也不例外，一套優秀的圖標是設計師不斷沉淀的結果?？赐瓯疚恼潞?，如果大家想要去練習圖標，建議找大廠的圖標放在keyline里臨摹，真的會讓你收獲不少。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
全新的2021已經到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
全新的2021已經到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
“淘寶直播很有趣味”，“淘寶人生很新潮”，“淘寶更好逛了”越來越多的用戶在感受淘寶的新變化。新淘寶，讓用戶在“淘好物”過程中更能感受到“逛”的樂趣，從產品、直播等多場景多維度帶給用戶全新體驗。作為淘寶的鏡子，我們的品牌也伴隨著產品的升級，在設計層面表達了全新內核。
在新淘寶的大背景下，設計的挑戰在于如何將抽象的心智具象表達。此次品牌設計將圍繞“連接”“開放”“有趣”三大設計理念透過字體傳達淘寶的品牌新內核。
連筆&連接
在新的字體中將有粘連但又不夠流暢的筆畫結構，讓它們“一氣呵成”起來，通過連筆來表達“連接”，它寓意了新淘寶要更好地連接商業、用戶和內容。
空隙&開放
“通透”是新的字體比較直觀的感覺，讓字體本身結構上有“呼吸”的空間，它代表了新淘寶對外能夠提供充足的空間，同時也將生態體系打開，從而吸收更多的資源共贏共創。
弧度&有趣
新的字體在彎折筆畫的連接處做了弧度處理，讓整個字體看起來更加有活力，它要展現的是新淘寶將產出更加豐富多樣的內容，讓消費者能體驗到更多趣味且好逛。
很榮幸本次升級邀請到了國內著名的字體設計廠商方正字庫與知名品牌設計公司MetaDesign一起聯合完成我們的LOGO設計，整個過程中都提供了非常專業的指導。
全新“淘寶”品牌標識，充分融合了中華傳統書法文化和現代的設計語言、設計手法，呈現出多元、豐富、有趣的品牌面貌。
全新升級的“淘寶”特別注入了自然書寫的筆勢，將寫意融入設計之中。在設計上借鑒了行書的技法，在字體的筆勢相承之處運用連筆書寫，線條流暢自如，筆畫之間氣息貫注、流動和諧。
連筆
字體部件的設計突出了筆畫的血脈與氣勢，字體起筆處注入能量，轉折時意氣相聚，呈現出蓄勢待發的姿態，末尾的鉤畫收筆果斷，整體給人一種勢如破竹、一氣呵成的視覺感受。
蓄勢
“淘寶”橫畫起筆處采取直切手法，如逆鋒蓄勢，運筆時線條微弧上揚，收筆處筆畫輕提，筆勢流麗、煥發風采。
橫畫上揚
新“淘寶”的設計細節精微生動，通過適當的減細、避讓，字體筆畫結構緊密得當，布白停勻、筋骨相諧，穿插避讓恰到好處。
避讓
兩個單字點畫的筆形渾圓一致、遙相呼應，形成左右顧盼的姿態，文字之間脈絡貫通，構成一個有機的整體。
呼應
中英文字標互相呼應；英文字標需要足夠簡約才能滿足LOGO以中文為主，英文為輔的傳播需求。
優化LOGO的筆劃及布白，提高LOGO在數字端上小尺寸下的可識別度。
當淘寶的中文字標設計逐漸成型，我們希望英文字標能承載相同的設計理念。
‘T’的橫畫呼應中文的橫劃特征:微弧上揚，以流暢的圓角收筆。
‘a’維持雙層結構,更能與相鄰的‘o’更能區分，保持高的視別度;頂部的拱形弧線與淘字的‘勹’部筆勢互相呼應。
開放’o’字的內白，平衡筆劃粗細的變化；確保外輪廓的弧線圖滑流暢，使造形更豐富生動。
升級后的英文字標彰顯中文字標的設計精髓，與時并進。
新淘寶，新品牌，新形象。為了能夠讓用戶對于品牌有更具體的認知，此次品牌升級還創造了淘寶自己的超級符號，結合業務豐富的場景，讓視覺語言更具專屬性和多樣性，讓用戶更好的感知到，一個更連接用戶、更開放平臺、更充滿趣味的新淘寶正在走來。
文章來源：UI中國 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
奇立德全能ui設計班學員的界面圖標設計作品，看的好舒服
圖標在UI設計體系中，是重要......
（此處省略1000字）
直接上圖！
上圖是我以前繪制的一套圖標作品，
感興趣的話就一起來了解一下我平時是怎么創作一套圖標的吧~
1、搜集+臨摹+原創
積累素材是設計師必備的“基本功”，同時也是“職業病”。
平時我會有意識的在速寫本上繪制一些簡易的圖標，如果在一些APP中看到比較好的圖標，我也會臨摹下來。
下面給大家隨機展示一些我平時繪制的圖標。
除了繪制圖標以外，我平時也喜歡繪制一些其他的圖案。
2、反復打磨
將繪制好的圖標利用電腦矢量化后打印出來，根據打印稿用筆標記出不合理的地方，比如：線條太粗了，重心不穩.......對不合理的地方進行反復修改，再次打印，再修改，循環多次后直到得到自己滿意的效果，最后定稿。
下面這幅手繪圖就是文章一開始給大家展示的圖標成品的手繪最終稿了。
需要強調的是，這一次圖標的繪制，有一個特殊的地方，其中一個圖標是有實物的。（左：實物圖；右：對應圖標）
3、圖標插件化
最后，將圖標上傳阿里的iconfont網站，制作成字體圖標。
然后將字體圖標做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）
制作過程就是給每個圖標賦予關鍵字，然后利用正則表達式，可以方便的搜索所有圖標。
不過這個步驟我就不詳細解釋了，因為
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在經歷了一個不太理想的新十年開局后，年輕人們迫切需要重塑品牌。幸運的是，以下2021年的標志設計趨勢完全可以勝任這項任務。
觀察來自世界各地的logo設計作品，他們的預測代表了設計環境的變化。雖然去年的趨勢集中在通過新技術進行革新，但2021年標志趨勢中的一個共同主題似乎是限制條件下的創新。過去的一年可能在很多方面限制了世界，但是2021年的標志設計師們還都在繼續努力著。
彩色玻璃
透視圖
簡單幾何
發散字母
真實寫真
原始對稱
古怪的人物
現代象征主義
靜態運動
類似配色方案
標志設計作為一項相對現代的發明，往往在過去的技術和局限中尋求靈感。在2021年，許多標志設計師在過去時代的彩色玻璃窗中找到了啟發。
當應用到現代設計中時，將圖像分割成純色碎片，給普通概念增添了一點抽象感。彩色玻璃也與神圣聯系在一起，因為它起源于中世紀教堂。這可能不是巧合，這種標志趨勢經常與美麗的自然景觀結合使用。在一年的大部分時間被困在室內之后，我們可以期待我們脆弱的生態系統將在2021年的彩色玻璃標志設計中得到尊重。
正如標志設計師林登·萊德（Lindon Leader）曾經說過的那樣，偉大的設計源自簡潔和清晰。這兩個優點使標志設計能夠有效地向觀眾傳達品牌的復雜身份。這就是為什么許多過去的標志潮流都集中在極簡主義和平面設計上。
雖然2021年的logo設計師們決不會放棄這種方法，但他們正尋找在過度簡化中失去的一些魔力。一個流行的標志設計趨勢是融入微妙的視角。使用基本的繪畫技巧，如線性透視，曲率或縮短，設計師能夠創造深度的錯覺，而不會使設計復雜化。
其效果是，標志給人的感覺很突出，品牌從頁面上一躍而下，而半平面的設計技術，一直以來都是為設計師服務的，但至今仍然完好無損。
形狀是構成意象的基石。但是，盡管三角形、正方形和圓形等原始形狀一旦打下基礎，往往就會被淘汰，但它們純粹的簡單卻有力量。
2021年的設計師們正利用這種力量，用簡單的線條和形狀制作出標志。這種對形狀極簡主義的嚴格遵守給了這些標志一種刻意克制的氣氛，允許他們在其他地方自由發揮，比如在豐富的顏色飽和度上。
這種方法的另一個特點是，簡單的分層可以產生一種結構和深度的錯覺，這符合我們前面提到的透視圖趨勢。通過純粹的造型語言，設計師能夠創造出易于解析、令人難忘、色彩鮮艷的logo。
基于字體的文字標記標識有著直截了當的名聲，無論好壞。雖然他們使品牌名稱成為整個標志的焦點，因此更令人難忘，但他們沒有留下太多的空間，為創意鋪路。但是2021年的標志設計師們正在一個字母一個字母地改變這種印象。
具體來說，我們看到越來越多的單詞標記中的一個字母被夸大了。這可以是一個顏色突出的小寫的“i”，或作為一個突出的筷子形成一個大寫的“H”。這個不同的字母不僅創造了一個吸引眼球的興趣點，它給予品牌最好的選擇：一個傳統的，基于類型的標志，也不怕打破規則。
人們憑直覺尋找其他面孔，這是一個有據可查的事實，這就是為什么肖像畫有助于在設計中建立情感聯系。這些面孔越真實，越容易辨認，聯系就越深。
因此，2021年更多的標志設計師開始轉向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質表現不同，這種方式創造了真實的印象，有助于人們在瞬間與品牌建立聯系。這些標志可以從簡單的，平面的人物肖像到詳細的說明性技術。
歸根結底，設計師們厭倦了那些讓人感覺不親切的形象。歸根結底，無論一個標志是在講述品牌背后的人還是品牌服務的人的故事，人都是關鍵。
平衡是標志設計的基本原則之一，而對稱也許是其最極端的表現。對稱的標志從中間分開時，兩邊是相同的。
雖然相同性和可預測性似乎是冗余的同義詞，但對稱設計完全是關于強度的。它們讓我們想起了建筑，無論多么高大復雜，它們的設計都是為了站穩腳跟，它們通過完美的對稱平衡來實現這一點。
這種原始的對稱性允許標志包含線條藝術，感覺既不可能復雜又完美有序。但即使對稱在幾何設計中很常見，我們也看到這種趨勢在手繪徽標中找到了歸宿。無論是設計師追求的完美還是實力，有一點是肯定的：2021年的標志建筑是為了經得起時間的考驗而建造的。
雖然logo設計師在真實人物的表現上處于領先地位，但2021年的其他許多人則通過漫畫和夸張的幽默來對比這一點。我們正在看到越來越多的以插圖為主要內容的logo呈現出詼諧，甚至古怪的概念，從玩老鼠的醫生到華麗的甜甜圈花花公子。
從事舒適或娛樂的企業希望能讓他們的觀眾放松，而設計師們則用散發著博愛氣息的logo來回應。最終，這些異想天開的設計讓顧客覺得他們找到了朋友而不是品牌。
邏各斯的根源一直是古老的象征，從升起的鳳凰到不朽的女神，再到無所不能的眼睛。就像古代的象形文字一樣，它也是一個標志的目的，通過簡化的圖形來傳達信息。
通常，logo尋求創造他們自己獨特的符號語言，但在2021年，設計師們正在疏導古代符號的力量。其效果是將人們普遍理解的、經典的美德與奮斗品牌的愿景聯系起來。開始一個新的企業是一個信仰的飛躍，這些象征性的標志承載著一個啟示的承諾。
這意味著運動跟蹤器、流體形狀、飛濺粒子和動作線的增加。對于那些希望創新的企業，比如科技品牌，這是一個標志潮流，肯定會引起轟動。它提醒顧客品牌不僅僅是一種產品或服務：它是一種活的東西。
隨著每年的標志設計潮流，我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術。另一方面，相似的配色方案是學生設計師在第一年的色彩理論學習的內容。這基本上意味著在色輪上對彼此相鄰的顏色進行配對，其結果是創造和諧的科學方法（代替對立顏色的對比）。
雖然類似的配色方案并不一定是新的，但它們在標志設計中日益流行可能表明了對對比度的排斥。色彩是設計師用來影響觀眾情緒的最重要的工具之一。
2021年的標志設計趨勢是重塑這個新的十年的一個機會。從透視技法到簡單造型再到對稱性，從極簡主義到古典主義的復興，我們未來的理性似乎在追求一種純粹。
文章來源：站酷 作者：Brain斌
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計規范是一個老生常談的話題了，網上相關的文章也非常多，但我相信有很多設計師對設計規范的理解還是比較模糊，認為設計規范指的就是字體，顏色，控件規范那些，這種理解其實是比較狹隘的。
于我而言，設計規范用一句話總結就是：設計規范是針對特定產品所制定出來的一整套產品標準，包括流程標準，技術標準，設計規則等等。通過這套標準，能減少錯誤發生率并提高設計質量和輸出穩定性。
舉個例子，我在做QQ的3D厘米秀項目的時候，一開始合作方提交的設計資源正確率很低，風格也各不相同。然后為了解決這個問題，我在項目中定義了流程標準，資源標準，cp合作標準等等。通過這些規范讓多個不同設計團隊能合作到一起，提升了整體協作的效率和質量，這些標準就成了設計規范的一部分。
可以說，每個項目因合作方式，人員習慣，落地形式的不同，所形成的規范是有區別的。所以，設計規范更應該是針對項目來說的，除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的，回答更應該是一種思路的描述，比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。
1. 遵守用戶習慣，減少認知成本
Don’t make me think。大家都知道，好用得產品都是盡可能的減少用戶思考，不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時，你會熟悉的去左上角找返回操作，但如果把返回操作放在右上角就會很不習慣；再比如對國內用戶來說，他們習慣正確按鈕用綠色，錯誤按鈕用紅色，如果你非要反過來制造所謂的差異化，用戶就會感到困惑，誤操作的概率也可能會大量增加。
2. 統一品牌性格
品牌性格不論是大到公司層面，還是小到具體某一個產品，都需要有一套品牌識別體系來約束，只有統一得視覺印象才能更好的讓用戶記住。那這些品牌識別體系其實也是設計規范的一部分，在具體執行中，可以根據一些品牌核心概念規范快速做一些風格決策。
比如騰訊QQ的品牌影像風格關鍵詞是青春、互動，敘事和干凈，那么在選擇畫面配色的時候就可以根據關鍵詞指導畫面的選擇，使得整體的畫風得到統一。
3. 降低新人學習成本
這里所說的新人不單純指剛入職場的設計新人，也包括剛參與到一個新項目的設計老手，設計規范是能夠以的溝通成本實現快速上手。有成熟的控件資源和標桿的設計參考，就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。
4. 提高開發效率
有了好的設計規范，開發就能把一些常用的樣式進行封裝，在需要復用的場景中直接調用。這樣做，一方面可以通過調用的方式減少樣式代碼的復制使用，提升效率的同時降低軟件包體積，另一方面也可以減少不必要的工作量，方便后期維護。
5. 保證設計的一致性
有設計規范的約束，能讓團隊在一個既定的框架內做設計，統一大家的輸出質量，從而保證設計的一致性。
設計規范的學習肯定不是靠死記硬背，而是要講究方法，從我自身的經驗來說，我覺得大致可以有以下2個步驟：
在新手期，多去看一些大廠的設計規范，先建立認知，不要求全部記住。把這些規范當成字典，先大致了解一遍，等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規范官網，建議收藏。
其實網上很多設計規范，原理之類的文章，源頭都來自于這些大廠規范，想獲得一手信息，最好是自己去這些網站多看看。
這也就是我為什么不寫具體規范數值的原因，因為網上的資料實在是太多太詳細了，寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學習能力和解決問題的能力。
針對自己要做的模塊，有針對性的找市面上大廠的應用作為參考，直接截圖標注，自己總結規律印象會更加深刻。
我開始做UI的時候就這樣學習的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規范經驗積累起來了。
比如從QQ的動態tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側的圖標尺寸和圓角，間隔線高度和配色，右側的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結合的樣式，圖標與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結合自己的產品綜合運用，減少出錯。
發現了嗎？一個優秀的界面設計，上面的任何信息其實都可以拿來參考，就看你會不會用了。
需要強調的是，這些參考來的標準，并非是標準答案，還是要根據自己的實際項目需要做調整，只是至少知道一個范圍，在這個范圍內不大會犯錯。
這就像剛開始做設計時一樣，去參考這些規范相當于做臨摹的練習，這種臨摹是需要的，臨摹的過程中不斷加入自己的思考，然后通過總結，變成自己的知識體系。
隨著對設計規范理解的加深，自身設計能力的不斷提高，就要開始從設計規范的使用者轉變為規范的制定者了。如何制定針對項目的設計規范呢？我的經驗是在項目過程中把做的好的和踩坑后的正確解法進行總結，并形成文字，積累多了就形成了規范。要把每一次遇到的問題都當成是一次改進流程和規范的機會。
我自己是有隨時記錄的習慣，項目中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的，因為出了問題才能找到優化的機會，自己也能從中找到解決問題的成就感。
曾經在QQ的3D厘米秀項目中遇到過非常多的坑，然后從填坑的過程中慢慢總結出各種設計規范，去幫助項目減少錯誤率，提升設計質量。從最終的產出和結果來看，自身的進步是可觀的，對產品的幫助也比較大，所以很值得去做。
剛掌握設計規范的時候，干活是特別舒服的一件事，因為做需求可以很快，好像拼拼組件就能完成。但稍微做久一點時間，又會覺得好像沒啥進步，天天拼組件，擔心影響設計的創意性，真是挺矛盾的。
其實，規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化，又要在設計的過程中給用戶制造驚喜。比如，整個UI的配色和字體需要保持統一，但在一些圖形，動效上可以做出亮點，讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程。
設計規范絕對不需要死記硬背，而是要充分理解并靈活使用，才能發揮它的價值。隨著UI行業的不斷成熟，設計工具的簡單化，各種組件化資源和思維越來越普及，可以預見的是未來一般的UI界面會高度組件化，設計師單純在界面上花費的時間可能會越來越少。
這從行業的發展來說，減少了很多體力勞動，讓設計和開發有更多的時間去打磨產品細節，肯定是好事。但對設計師自身來說，省下了以前那種常規設計需求的時間后還能做些什么，設計師的價值又在哪？值得每個設計師去思考。
轉自：優設網
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：作為一個設計師，有時候在工作中會過度重視美感和創意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產品上使用，無法與品牌產生強聯系。那么，如何設計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業務并沒有什么聯系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導致同質化的問題，這些圖標放在任意一個產品上都可以通用。
對于產品，記憶點的缺失導致用戶看完后對于我們的業務、品牌不會產生任何深刻的印象。對于我們設計師，圖標和業務的斷層則很容易讓我們陷入反復改稿的被動局面，并且設計話語權也越來越小。
那么，有沒有什么系統、易于理解的方法來讓我們的圖標具備品牌感？
當然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求，需要在首屏下的優勢板塊中繪制六個圖標，分別對應平臺的六大優勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。
Google在18年于material design中新增了一整塊章節來闡述圖形語言。
google原話是：形狀可以引導注意力，讓用戶易于識別組件，識別狀態和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon，顯著加強了品牌記憶點。
再比如國內的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優勢圖標當中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業務目標以及行業特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩定性（三角形自身的穩定性、象征專線的穩定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰略合作（開鑼、中國制造網和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業務緊密結合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據所給文案腦爆出圖標所對應的關鍵詞，然后根據所在行業的特征篩選關鍵詞，或者進行二次聯想及轉化。
下面我通過此項目中的三個圖標案例來簡單講述下設計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關行合作，因此讓我們的業務更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統得用了盾牌符號傳達保障性。
這種任何行業平臺都可通用的形象，并不能關聯我們這個物流類的平臺。
后面聯想到到我們跨境、外貿的行業特征，將“雨傘”這個形象變形轉化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當于是貨物的保護傘一樣體現”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現出典型的”跨境物流“的行業特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞，腦暴出定位、雷達之類的事物。
但是結合我們行業特征的話，其實有空間去更貼切到業務本身。
我們平臺的業務線包含了兩個站點——美國（主站）和馬來西亞。供應商發貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產出的圖標，不僅僅是指代了文案意思，同時表達出對應的行業特征，和業務緊密貼合。
文案如下：
一開始，我傳統得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發散思維，我聯想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現實。
當然并非所有的圖標一定需要去結合行業特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設計師，我們依然需要掌控我們的項目，充分發揮自己的創造力來賦予產品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態的表達引導用戶更好理解平臺優勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當然，動力來自于你們的在看或轉發啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設計可以在哪些地方和我們的業務、品牌進行關聯？而不是每次都好像在做一個完全獨立于業務外的項目，這很容易讓你陷入反復改稿的被動局面，而且話語權也越來越小。
總之，品牌思維是需要設計師格外關注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結合行業特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產品經理 作者：Andrewchen
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標是UI設計中除了文字之外最不可或缺的視覺元素，在設計中看似只占一個很小的區域，但是它卻是考驗設計師基本功的重要標準，了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
本文將對圖標進行系統的介紹，篇幅所限，本文只針對圖標設計中最重要的設計概念和設計思路為主。大家如果對圖標的其他方面感興趣，歡迎給留言，后續出相關系列內容。過程中也有針對幾種典型的圖標進行實操代練。想要把圖標設計的更好，這就需要我們在平時勤加練習外，還要進行深度的思考，希望我的這篇梳理可以給大家帶來幫助。
圖標，也稱為icon或Picoto，是計算機世界對現實世界的隱喻和概括，代表軟件產品中的功能及操作。
圖標做為國際通用性語言，生活中隨處可見，例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等，又或者是日常手機里使用的那些App圖標，如微信、電話、短信等。的確，圖標的形式有很多種，它可以應用在很多場景中，并且表現方式非常豐富，有線的、有面的、還有擬物的等。
粗淺劃分的話，UI設計中常見的圖標大致分為兩大類，第一類我們稱之為「標志性圖標」，比如手機中應用啟動圖標；第二類我們稱之為「功能性圖標」，這類圖標經常出現于 App 或網站中，用于功能性指示引導或操作。
2. 圖標的重要性
對于UI設計而言，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中，圖標幾乎是這個頁面的核心支撐體，它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處：
3. 起源
圖標的發展歷程其實有些類似中文、英文等語言的發展，大體也分為兩個階段：
實物 → 符號；符號 → 新符號
來看一個小例子：
左邊這個東西叫軟盤，可能很多小伙伴沒見過（事實上我也沒有），「保存」圖標就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當成一個實體來使用，甚至這個符號的實體已經淡出歷史，但人們還在習慣性使用這個符號。
如你所知，圖標、標識都不是界面設計師所創造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中，早期用來傳達信息的圖標演變為系統的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標和標識。
隨著技術的發展，計算機誕生了，而顯示器的出現，也為圖形化界面的誕生，鋪平了道路。20世紀70年代，施樂在位于帕羅奧托的研究所當中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而 Xerox Alto 對于喬布斯和比爾蓋茨的啟發，更是引發了計算機歷史上最著名的一場戰爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是后話。
4. 擬物圖標
80年代，想做的具象（擬物），卻因為像素和機能的限制無法實現，所以對好的標準是越具象越好 。到了1995年計算機顯卡的顯示能力得到革命性的改變，Photoshop 5.0的發布，恰好讓憋屈了這么多年的圖形和UI設計師們巴不得立馬上天（終于可以施展拳腳了）。從win95開始，到osx/win7的這十來年正是UI擬物化發展壯大并大行其道的階段。同時也是顯示技術飛速發展的十年，從640×480，到800×600，到1024×768，到1920×1080 / 1920×1200，再到4k，再到retina屏，平面顯示技術能達到的水準基本已經是人眼能感受到的。
當人們對計算機尚不熟悉的時候，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗的核心。擬物化的圖標和界面會給予用戶具象化的引導，比如回收站，音樂，電腦，文件夾的圖標，用戶可以直接聯想到現實中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導用戶點擊，用戶都可以通過聯想，更快的理解操作/互動的方式。這樣可以降低用戶的學習成本，縮短學習周期，讓用戶更快的適應計算機的使用，弄懂這玩意到底是干嘛的。
來自蘋果的Macintosh系統在圖形化界面發展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。
但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規交互模式人們也早已了然于胸，用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗的重心。
再者，大家都熟悉的事物其實非常有限，而 APP 的創新卻在不斷進行，很多創新的產品本身在現實世界就沒有參照物，所以也決定了擬物圖標必然會被扁平化取代。
5. 扁平化
從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力，形成「視覺噪聲」。于是UI設計師開始探索更新的表現形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計。 不管你喜歡與否，當年的微軟讓 Metro 和扁平化賺足了眼球，甚至讓人一看到扁平化就想到Metro。
區別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，轉而通過抽象、簡化、符號化的設計元素來表現。
2013年，蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。在iOS7中對整個界面的圖標、按鈕、字體、信息層級等各方面都進行扁平化設計。蘋果的這一系列動作打破了人們對扁平化風格的芥蒂，并最終推動了整個移動端扁平化設計的進程。
那么，蘋果公司在堅持了多年的擬物化設計風格之后，曾經作為該風格的引領者和受益者，為何會突然轉向，熱情地擁抱起扁平化設計來了呢？難道是因為我們視覺疲勞了嗎？答案很簡單，
總之，扁平化這種二維設計已經成為一種更加流行的設計風格。所有元素的邊界都很干凈利落，較多使用色塊和符號化的圖形以及無襯線修飾的字體，界面更加整齊簡潔。使用這種設計風格的優點是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化，減少認知障礙的產生。
雖然扁平化的優點有很多，也適合當下技術發展需要的，但是缺點也是顯而易見的。譬如表現形式太過于抽象、缺乏情感的傳遞，而事實上發展到今天的扁平化設計確實也在不斷的優化自己~使得自己更加的適應時代的發展。另外還有一個點就是所謂的 “審美疲勞”。當你一直看著簡單的東西，久而久之就會越來越煩，你就會越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢再一部向“突出內容”的本質靠攏，即“認知簡約”。也許當滿世界都是扁平化后，擬物化的設計卻又變得更顯眼了呢？最近流行的“新擬物”風格就是最好的證明。
6. 微扁平、輕擬物
由于扁平風格表現形式單一，同質化嚴重，缺乏個性，圖標慢慢開始發展到微扁平輕擬物的方向。相較于擬物風格不會有太多復雜的視覺元素，與扁平風格又有了更豐富的情感內容，所以現在界面中，在面積比較小的區域我們使用扁平圖標或線形圖標；在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。
7.「新擬物」風格圖標
蘋果在 WWDC2020 搞了個大新聞：macOS 將與 iOS 統一步調，從X86 平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個將「新擬物」設計投入大規模商用的操作系統，這可視為「新擬物」在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 ” 外觀 ” 設置里，多了一項名為” 自適應強調色 “的選項。蘋果將主題色的指定權留給開發者，這是否暗示新一代 App 在光影上會有更豐富的效果？
「新擬物」設計的精髓在于對光線的絕妙運用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間，進而打造一種全新的視覺體驗。
不同于傳統的擬物，「新擬物」雖然將符合物理規律的光影效果引入界面，但它所模擬的材質是自然界不存在的。換句話說，「新擬物」是將真實光線用于虛擬對象，而 ” 擬物 ” 是還原實際物品在特定光照下的效果；
由于整個設計界將不得不考慮新擬物風格，圍繞該風格的可能性將會有爆炸性的發展，并且這種新的數字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣，第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優勢的時候。
產品應用圖標（也叫啟動圖標），是指產品「品牌標識」中獨立的圖形，也是產品品牌的核心組成元素。作為產品所有視覺通信中必不可少的元素，其使用率非常高，所以該獨立圖形在設計中應做到最簡化。
一個小問題：為什么iOS系統中圖標形狀是統一的圓角矩形？
蘋果官方給出的解釋是在空間有限的的區域，太多形狀顯得雜亂，如果形狀不規則，就無法控制統一間距，設計師水平也不一樣，這樣統一規范能保證標準。推薦一個iOS啟動圖標資源網站，設計時可以找找靈感。
△ iOSIcon gallery
而安卓應用圖標就沒那么規范，處于百花齊放的狀態，各家廠商都在設計獨屬于自己的視覺語言。大家都不一樣，也就導致沒有個性之美。
安卓應用圖標設計規范網站
應用圖標的類型
應用圖標有不同的風格，這些風格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設計風格可以更加標新立異，從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要，將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。
中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內的產品都會使用文字作為自己的產品圖標。中文設計模式即字體設計，提取應用名稱中的一個或多個漢字，進行設計變形，變形后的字體圖形具有產品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。
單字
提取產品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設計，以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息，識別性強。
多字
多字圖標設計要注意的是整體的協調性和可讀性，一般為2-3個字，最多兩行（四個字）排列。
其優點是更加直接的告訴用戶產品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣，會顯得重復啰嗦，像介紹了兩遍自己一樣。
字加圖形組合
文字加輔助圖形的組合，也是常見的產品圖標設計方法，相比純文字圖標，顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。
英文設計與中文設計的設計模式相似，通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工，新的字母圖形依舊保持本身的識別性。
單字母
通常提取英文首字母進行設計，由于英文字母本身結構簡潔，稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少，都用字母很容易創意雷同，難以形成差異化。
多字母
提取產品全稱或幾個單詞的首字母組合而成，形成獨有的產品簡稱，方便用戶記憶。
字母加圖形組合
字母加圖形組合的設計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工，可以使應用圖標視覺表現更加飽滿。
直接用數字做應用圖標的相對較少，但是數字識別性強，易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。
由于符號本身的含義會對產品屬性有一定限制，所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品，無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關聯的產品屬性。
除了中英文圖標，還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：
幾何圖形的設計模式給人簡約、現代、個性等視覺感受，從單個具象圖形到復雜的空間感營造，幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩定、現代、時尚等，添加圓角后又會更加親民、可愛。我們可以結合產品特征，合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。
單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確，易于用戶在眾多的應用圖標陣列中快速找到目標。
線形的設計模式分為兩種設計方式，在深色的背板上讓圖標反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標填充顏色，圖標可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質，適合于文藝、清新的應用，在界面設計時保持這種干凈明快的風格，才能與應用圖標設計表里如一。線性風格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風格曲線組成“A”，同時是一個小蜜蜂。
動物作為圖標設計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。
卡通風格的產品圖標會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的。卡通可以說是一種各年齡層都能接受的風格，例如Bear，它的卡通形象是一頭潔白的北極熊，簡潔的形象設計與產品的閱讀體驗一致。
以正形為底突出負形特征，以負形表達產品屬性，傳遞產品信息。例如NPR One，圖標中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應用，而正形圖形強調產品氣質。
白色漸變的設計模式與透明白色相似，都是通過白色不透明度來構建出圖形的立體控件感，它比單純的剪影圖形更加具有質感，這種質感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。
色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應用的產品氣質。比起白色漸變圖形，彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應用圖標的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。
無，即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。
打開率是一款移動應用的重要數據，應用只有被打開才有它的運營價值。在我們手機里安裝了許許多多的應用，除了一些我們每天必須使用的應用如微信，其他大多數的應用在沒有使用場景時很難想到去打開他們。因此，這些應用如何在手機屏幕上吸引用戶的注意，鼓勵用戶打開顯得非常重要。于是在應用圖標上做文章就顯得很有必要，常見的設計手法有：
在設計模板還沒有如今這么發達時，設計師需要設計啟動圖標（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標。比如，在手機中@3x情況下桌面圖標尺寸為180x180px，在@2x情況下為120x120px；在應用商店圖標需要使用的尺寸是1024x1024px；這個工作太煩人了，好在現在我們只需要專注在啟動圖標設計本身上了。在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個文件。打開這個文件，用我們自己設計的啟動圖標替換掉智能對象里的內容，你會發現所有尺寸的圖標都變成了我們的圖標。iOS的圓角圖標并不是標準的圓角矩形，而是某種連續曲線。
我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標準圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區別在于其曲線稍微向中心收緊。
事實上，我們很難在Retina屏幕上區分這么細微的差別，因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角，直接繪制成直角矩形交給開發同學即可，如果應用圖標需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。
安卓應用圖標同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標。
在我之前的設計作品中，有個“影記”的攝影社區APP，本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。
尋找隱喻
隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為，即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩作為產品圖標的主要造型。
競品分析
應用市場各類產品不勝其數，在同類應用中存在大量相似的應用圖標設計，如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異，避免創意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預期。
提取關鍵詞
根據收集的圖片，創建情緒版，結合自己的產品提取關鍵詞，然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關機”，并依次將關鍵詞描繪成下列圖形。
抽象圖形
確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形，接下來將繪制好的3個圖形相結合，即完成初步設想。
圖標柵格線
使用iOS應用圖標柵格線作為設計依據有助于建立和諧的圖標繪制比例，并與iOS系統保持統一，下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。
豐富細節
通過上面圖形組合已基本完成應用圖標的設計，接下來我們還應從顏色、質感、背板等著手豐富圖形的細節，建立起應用的產品氣質?！坝坝洝弊鳛閿z影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應用的主色。白色的信號燈過于普通，使用相機本身發出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。
多場景測試
將應用圖標設計稿交付開發提交至App Store上架，正確的圖標設計稿應是直角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住，假如圖標設計稿自帶圓角，就有可能露出圖標透明區域。
△ 注：上圖非實際大小，僅表明不同分辨率下的比例關系
此外，應用圖標還會以不同的分辨率出現在不同場景中，例如在iPhone 8plus上需@3x(120px)的圖，而在iPhone7的設置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節就會丟失，使畫面變得模糊，因此設計師應對小尺寸圖標進行細微調整，去除不必要的裝飾元素，以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。
除了產品圖標，還有一種圖標被稱為功能（或系統）圖標，功能圖標指的是擔負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜，如微信底部四個系統圖標就使用了比較簡潔的線性風格。
功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時設計精致、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。
圖標是良好設計系統的基本組成部分，對營銷材料非常有幫助。他們是插畫內容的基礎構建塊，但他們也具有很高的技術性。因此科學嚴謹的設計規范能幫助我們設計精致、風格統一的圖標。
一致性是設計圖標的關鍵，在繪制時，一定要確保所有的圖標都相同大小。在UI界面設計中，網格的大小必須要是4或12的倍數（安卓是8的倍數，iOS是4的是倍數）。@2x下作圖要保證是4的倍數，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數了，這個數值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標尺寸24*24px、48*48px。這里建議用48px做為常規圖標設計尺寸。
通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發人員根據倍數調整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。
不過當我們的圖標涉及一些復雜的細節時，還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節。
知識點：
這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多，也能的保留圖標原始狀態。
圖標繪制基于48x48px畫布繪制的線性圖標，線寬默認為4px，不同場景縮放比例使用：
如果你要繪制描邊圖標，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。
圖標網格為圖形元素的一致但靈活的定位建立了明確的規則，keyline是網格的基礎-。通過使用這些核心形狀作為知道，你可以跨系統保持一致的視覺比例。
圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界，關鍵線有助于促進圖標統一性，簡化設計過程中比例調整成本，繪制小圖形需要參照小正方形的keyline。
直角拐角：當基礎圖形為滿容器正方形時，建議使用3X圓角，當基礎圖形為滿高（寬）矩形時，建議使用2X圓角。當基礎圖形為較?。ㄐ∮?/2寬高）矩形時，建議使用1X圓角。
非直角拐角：根據圖標場景，通常情況下無論角度，默認均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據圖標設計需要單獨考慮。
封閉區域，有閉合曲線構成的為封閉區域，可以進行獨立顏色填充；
非封閉區域，由非閉合曲線構成的非封閉區域，原則上是不能進行獨立的顏色填充；
封閉區域為曲線形狀且有相交線段時，原則上是不能進行獨立的顏色填充；
當線段與曲線相交或者與直線非垂直相交時，線段末端用圓頭端點；
當線段與直線垂直相交時，線段末端用方頭端點；
當圓點的直徑與線寬一樣時，圓點用圖形繪制，不用線段；
當圓形和方形在小于16px時建議用圖形繪制，不要用線；
傾斜角度
根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。圖標中的傾斜角度應為45的倍數，保持與keyline中的對角線或十字垂直相交線保持平行關系，若是矩形外框，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。應避免用13.7°，81°等這些奇怪的數值。
線段和端點
為保證風格的整體一致性，圖標所有線段端點默認均應為與線段同寬的圓角端點，通常情況下線段端點和可編輯節點坐標以整數坐標為佳。默認基于48px畫布繪制的線性圖標，線寬默認為4px，無論直線和曲線在任何時候線寬都應均保持一致。
圖標斷口與間距
內部結構與外框的間距不得不小于線寬，內部元素之間的間距不得不小于線寬的1/2px。
外形框的端口尺寸關系：4px、8px、12px，建議尺寸為4的倍數。
圖標風格變換
圖標在特定規律下允許不同風格之間的變換，分別為線性風格（默認）、填充風格、混合風格、多色混合風格。
單雙像素描邊
如果為圖標設置1像素的邊框，邊框應該使用外部或內部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊。雙數用居中描邊，單數用外描邊，所有錨點要與網格對齊不能出現偏移。
線段閉合
所有線段結合處應為閉合狀態，避免錯位出現。
統一透視
如果圖標有透視需求的話，就要統一透視角度，例如圖標透視方向朝左，那就統一所有圖標的透視角度都朝左邊。
除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器，這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡，避免以后開發時還需要重新調整。
繪制圖標不光要滿足物理上大小統一，還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。
UI界面的圖標通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。
根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。
清晰是圖標的基本要素，在sketch中，參數不要有小數點，讓圖標占滿像素網格。因為計算機不能識別小數點，導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格，導致圖標出現虛邊。
通常從一套圖標中最復雜的那個開始，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。
默認顏色：如果是功能圖標，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜，不利于和其他設計師協作。而對于營銷圖標，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標。
選擇狀態顏色：未選擇圖標顏色為#000000，透明度為87%；未激活圖標顏色為#000000，透明度為54%；禁用圖標顏色為#000000，透明度為38%。
功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精美、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。
常見的功能性圖標風格大致有三種：線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式，所以歸根到底，基礎的圖標風格有兩大類：「線性圖標」和「面型圖標」；
線性圖標
線性圖標是通過線條來表現物體的輪廓，它比面形圖標更能塑造優美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，會給人一種權重上存在差異的感覺。所以，在繪制線型圖標時，通常會使用統一粗細的線條。
線性圖標具有辨識度高，清晰，簡約易識別等優點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創作空間較少，太復雜的線性圖標對識別性產生較大的困擾。
常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標簽欄圖標采用粗線條設計，但粗線條的 ICON 圖形較為極簡才適用。
線性圖標根據樣式還可以分為：雙色線性圖標、線面填充圖標、線性漸變圖標。
線性圖標使用場景
在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計，很多APP產品的標簽欄都選擇用線性風格的圖標設計。無疑，線性圖標可以減少視覺干擾，讓用戶集中在產品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優美的外觀，且線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。
通常，在UI設計中，線性圖標很少和背板同時存在，因為線條的圖形視覺表現力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規則，一些簡單的線性圖標和背板的組合也會很協調。
面形圖標
面形圖標是以面為主要表現形式的圖標，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。在「微信」底部標簽欄中，未選中的圖標是線性圖標，而選中的圖標則是面形圖標，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標，是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。
面形圖標具有表意能力強，細節豐富，情緒感強，視覺突出，創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置，預知點擊后的狀態。但是面性圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
面性圖標根據不同的配色樣式可以分為：單色飽和度填充圖標，純色漸變圖標和多色漸變圖標。
基于最基本的「線性圖標」和「面型圖標」，通過不同的形態和風格的組合，再結合豐富的 表現手法，就可以設計出形形色色的圖標風格了。比如：不同粗細線條線性圖標的組合，或者面面組合，或者線面組合。大家在設計圖標的時候，需要根據自己的產品特征、受眾和使用場景，去選擇適合自己的表現形式。
面形圖標使用場景
面形圖標具有廣泛適用性，通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化，具有強烈的視覺表現力。
功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標，正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例，雖沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時還要考慮所有圖標的視差一致。
扁平化圖標實際上是線性圖標和面形圖標的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導頁、空狀態也的情感化設計，后來逐漸在標簽欄、首頁主要功能入口也出現了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。
品類區圖標的衛視通常是位于搜索框、banner之下（也俗稱“金剛區”），而且品類區區域通常會占屏幕22%-25%不等，且位于屏幕頭部，從用戶閱讀屏幕內容的視覺流來說位置至關重要，而且是聚合各類子版塊的入口，為各個子版塊分發內容引導流量。所以其重要性不言而喻，產品要讓用戶通過不同類型展示方式的組件找到相應的功能，而圖標具備精煉高度概括內容的特性，識別度也大于文字，所以「金剛區」的圖標設計通常以圖標+說明文字為主。
常見的設計手法有：圓形底板+45度漸變+白色面形+微投影；45度漸變+扁平圖標+微投影；簡單線性；45度漸變+不透明度+面形圖標。
文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標，是一種很不錯的表現手法。
比如「提示」圖標，使用一個圓圈包裹一個英文字母「i」，意為 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標識，這個概念太抽象了，很難用象形去概括，創造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標符號，作為針對中國用戶群體的產品圖標，簡單粗暴且有效。
知識點：
如果可能的話，盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。
這幾年動效設計的熱度穩定增長，只有靜態排版的時代正在過去。動效的出現，也讓圖標擁有了更多的可能性。動態圖標可以讓你的app或網站生動有趣，在我們所常見的各種數字產品當中，UI組件和各色元素都已經動畫化了。
運動中的物體比靜態的物體更能快速引起人們的注意，在UI設計中嘗試添加一些動畫及動畫圖標，不僅能在視覺上快速吸引用戶，還能使產品更具交互性，提升產品的趣味性。分享幾個動態圖標資源網站：
useAnimations：支持所有設備、網站、Android和iOS，可以免費用于個人和商業用途。
Lordicon：每一個圖標都提供線性輪廓和面形剪影兩種風格樣式，并且圖標是基于Lottie動畫引擎的矢量動畫圖標，大小完全可擴展，兼容所有主流瀏覽器。
Icons8 Animated icons 2.0：提供的動態圖標格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式，透過網頁可以搜尋、預覽動態圖標效果。
△ https://icons8.com/animated-icons
Feather：設計師Cole Bemis制作的一個開源圖標庫，可自行調節圖標大小和線條粗細。
科學和的命名規則能夠幫助我們快速定位到自己制作的圖標，并且幫助開發縮短命名時間，加強團隊寫作效率。切圖可按照“業務_類型_功能_大小_狀態”的格式進行命名。
切圖命名的格式建議為全英文，可在切圖之前對圖層進行命名，常用切圖命名對照表如下所示。
圖標的繪制方式主要有兩種：布爾運算 和 貝塞爾曲線。
布爾運算
布爾指的是喬治·布爾，19世紀的一位數學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。
布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數字邏輯推演法，主要有數字邏輯的聯合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法，對應到設計軟件中，就有：合并形狀、減去頂層形狀、與形狀區域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。
基本上通過布爾運算，我們能繪制出常見的大部分圖標了，但有時我們需要針對某些線條進行單獨的調整，又或者我們需要打造一套手繪風的矢量圖標，這個時候就需要用到貝塞爾曲線了。
貝塞爾曲線
貝塞爾曲線適用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。
貝塞爾曲線包括：節點、控制點、控制線、曲線這幾個基本概念。
矢量圖形便是由這幾個基本概念構成的。圖形由基礎節點作為支撐構成，控制點和節點之間的線段稱為控制線，控制線就像皮筋一樣，調整控制點的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節點包括 4 種基礎屬性類型，一種是沒有控制點和控制線的「直線節點」；另一種是「鏡像關聯節點」，這種節點控制其中一側的控制點，另一側的控制點會發生鏡像變化，適合繪制對稱結構的曲線；再有一種是「無關聯節點」，即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響；最后一種是「不對稱關聯節點」，這種類型下，節點兩側的控制點和節點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。
知識點：
在 Sketch 中，我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型，加快繪制效率。
鋼筆工具
繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站，以游戲的形式練習鋼筆工具，通關的時候你對鋼筆工具就已經輕車熟路了。
繪制實戰
這里選擇了幾個比較典型的圖標，簡單演示下繪制方法和各自的繪制思路：
面性
眼睛：布爾運算相交 / 相減 / 合并形狀
繪制一個正圓，然后復制這個正圓形，通過布爾運算「與形狀區域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉 / 相減
這個圖標由兩個大小圓形相減，得到環形，再繪制一個和大圓半徑相等的正方形，和圓環左、下對齊，最后逆時針旋轉45度完成。
WIFI：相加 / 相減 / 旋轉
繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標。
齒輪：旋轉 / 相減
通過兩個圖形的布爾運算得到環形，然后繪制一個梯形，復制一個鏡像，將其對齊環形兩端，復制梯形編組并旋轉復制三次（45度），最后合并全部形狀完成。
鈴鐺：相加 / 相減
由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結構通過設置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。
線性
放大鏡：旋轉 / 相加
繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉45度即可。
時鐘：鋼筆 / 剪刀工具
繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。
雨傘：相減 / 剪刀工具
繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，傘把手圓角化處理，完成。
相機：合并
繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。
愛心：相加 / 旋轉
繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉45度所得。
無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規范具有統一輸出，指引細節、便于查看的好處，規范就是一組圖標中的規矩，所有圖標的繪制都按照規矩來，最終的成品就會顯得井然有序。
小小的圖標是由很多圖形元素組成的，在這些圖標中，元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異，也將幫助我們學會圖標設計的底層結構，依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。
在制定規范時，我們通常先繪制出一個符合業務風格的圖標，然后根據這一個圖標定制后續的圖標規范，依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度，光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規范的三個過程：
△ 圖標設計規范
設計中，我們應該是用「線性圖標」還是「面性圖標」呢？
其實二者沒有太明顯的選擇優劣，很多場景下已經越來越模糊，但總的來說，還是有一些法則可以作為參考：
常用的手法：在App的底部導航欄，選中狀態使用面型圖標，而非選中狀態使用線性圖標；
16px左右的小圖標慎用線性圖標，線性圖標在16px下，可排布像素的區域較小，這個時候線性圖標不容易設計；
面型圖標比起線性圖標，除裝飾性外具備更強的視覺信息層次感，更具引導性，比如金剛區功能圖標、IOS設置界面，使用面型圖標；
車載等系統界面，更適合用面型圖標，面型圖標的視覺面積較大，短時間內更加容易識別；
線性圖標看起來通常會更加細膩精致，適合比較精致簡潔的設計或者女性化產品設計；
文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標，那么可能會提供1x、2x和3x.的png文件，以適應多種設備。而對于開發和其他設計人員，則通常需要導出.svg文件，這些文件可以在設計程序中編輯，并且可以通過代碼在應用程序或瀏覽器中繪制。導出的svg可以用sketch的官方插件「sketch-SVGO」進行代碼優化，壓縮svg的體積，精簡svg代碼。
△ sketch-SVGO 插件官方下載頁
svg格式僅支持居中描邊的圖標，并且不支持投影，因此對于復雜豐富的圖標還是切img圖為好。
完成圖標后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標準框架內，讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審，合格后再加入資源庫，這樣避免多人同時修改而造成混亂，同時提升團隊協作效率。推薦一個免費的圖標管理工具：Nucleo，團隊協作需要付費。
△ 圖標資源管理工具：Nucleo
我們了解了 icon 的基本知識，那么如何設計一個好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個產品呢？我們需要了解什么才是一個好的 icon 。
我們可以從以下五個方面來檢驗，分別是：識別性，規范性、統一性、呼吸感與品牌感。
1. 識別性
圖標就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個圖標最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。
圖標識別性可以分為兩類，分別是含義識別和視覺識別。
靈活的設計思路，在保證識別度的前提下靈活發揮，嘗試各種不同風格的表現形式。
當然，腦洞也不要太大，失去了原本的含義，造成誤解。
2. 規范性
規范性也是做好一個圖標的基礎，我們要保證圖標在視覺大小的一致性，圖標飽滿度、遵循同一種規律，細節統一性。
視覺大小的一致性：在相同尺寸的基礎上分析形狀間的視覺差異，來審視視覺上是否統一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規定它的最大尺寸，進而在尺寸規范中適當調整，使得視覺大小達到統一；
3. 統一性
在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同。這時，圖標一致性的意義就體現出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。
圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。
圖標的統一性可以從：線條粗細、設計語言、復雜程度、顏色規范四個大的方向去著手。
線條粗細：相同功能類型的圖標線寬粗細統一，有背板的圖標線條不易過細；
設計語言：可拆分為透明度（拉開層次）、圓角（圓角還是直角）、斷線開口（開口位置）、設計特征四個緯度去規范；
復雜程度：如果不能簡化圖標，就保持同一組圖標的墨水重量一致，簡化太復雜的圖標，增強辨識度；
顏色規范：對于線面結合的扁平圖標建議最多用兩種顏色，活動入口圖標如果需要的色彩數量多，那就需要保持敏感，從一種色彩的周圍小幅度提取另一種色彩或多種色彩，調整其色相、飽和度、明度就能搭配出許多和諧的顏色。
4. 呼吸感
呼吸感的意思就是適當留白。不管是圖標還是界面，適當的留白可以突出主體內容，讓內容具備易看性。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解，太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。
5. 品牌感
品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。
那么，該如何提升品牌感，打造屬于自己App的獨特風格呢？品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。
我們都知道圖標在APP設計中的重要性，但是打開許多APP你會發現他們的圖標設計都非常普通，似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言，但是仍逃脫不了與其他APP設計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產品氣質。
那么，該如何打造屬于自己APP的獨特風格呢？品牌基因為我們提供了一些線索。它是由平面設計中的VIS（視覺識別系統）引入的一種設計策略，通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質。接下來，我們就來學習如何利用品牌基因進行圖標設計。
1. 提取品牌圖形
通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的，不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網易云音樂的首頁標簽就直接使用了它的品牌圖形，其優點不言而喻。
但是請注意，這種設計策略并不適合于所有的App，當第一個tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。
還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。
2. 提取品牌色彩
色彩也是圖標設計中重要的構成元素之一，合理協調的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據，可以給用戶帶來由內而外一致的視覺體驗。在設計時提取品牌色彩可適當調整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標背景色，使圖標之間形成色彩上的關聯。直播應用Bigo Live的品牌色是青藍色，在標簽欄的圖標設計上（選中態）將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調性高度一致。
3. 提取設計語言
在VI設計中通常提取輔助圖形作為設計元素，這在圖標設計中同樣適用，當所有的圖標都具備了相同的設計元素，他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標的也使用了類似的輪廓，這樣他們就形成了某種視覺聯系。
4. 提取產品氣質
品牌形象決定了產品的氣質，而產品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候，往往會根據他的外貌形象特征，產生一個大致的印象，這就是一個人的氣質。APP也同樣，例如傳遞傳統手工藝人社交的「東家」，其產品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創造出具有東方韻味且極具形式感的圖標設計。
5. 拆分品牌名稱
App標簽欄圖標最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現形式上賦予更多創意和個性。MONO是一款閱讀類App，它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯系，但加上標簽文字的輔助也不會造成閱讀困難，而且產品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創意反而給App設計加分了。
6. 展開形象聯想
我們日常使用的眾多App大多數都有著相同的功能模塊：首頁、發現、動態、我的等，因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子，“發現”是眼睛，“動態”是氣泡，如果有差別也只是設計風格的差異，有的直角有的圓角，有的線性有的面形。這樣的設計沒有品牌歸屬感，試一下將這些圖標單獨拿出來就無法判斷它是誰，它從哪兒來？
優秀的設計師不僅要具備將圖標繪制精美的能力，還要具備豐富的設計想象力，不拘泥于設計規范的條條框框，有時候打破規則才能設計出優秀的圖標?！笆醉摗背诵》孔游覀冞€可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設計與品牌形象緊密相連，簡直完美！不過的改版好像已經改沒了。
知識點：
總之，要想在繪制整套圖標時建立統一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創作出最佳的設計方案。
圖標設計是UI設計中非常重要的環節，在尺寸有限的界面上，小小的 icon 可以更加簡單的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格，以滿足不同的業務需求。另外，關于如何繪制keyline線，還有的iphone12樣機，有需要的同學可以出門右轉私信我。
圖標概述及發展歷程
1. 圖標的定義
應用圖標的類型及作用
1. 中文文字圖標
2. 英文字母圖標
3. 數字圖標
4. 特殊符號圖標
5. 幾何圖形
6. 單雙形/剪影
7. 線形
8. 動物圖形/剪影
9. 卡通形象
10. 正負形
11. 白色漸變
12. 彩色漸變
13. 無
14. 應用圖標的作用
應用圖標繪制方法及流程
1. iOS應用圖標
2. 安卓應用圖標
3. iOS應用圖標設計流程
功能圖標的設計規范
1. 圖標的規范
2. 圖標尺寸
3. 圖標的keyline
4. 圖標關鍵圖形
5. 圖標的拐角
6. 圖標區域 封閉和非封閉
7. 圖標繪制規則
8. 視覺柵格
9. 視覺重量
10. 圖標繪制細節
11. 圖標的顏色
12. 功能圖標的風格
13. 扁平圖標的使用場景
14. 品類區圖標
15. 文字圖標
16. 動態圖標
17. 圖標命名規則
如何繪制功能圖標
1. 圖標繪制方法
2. 制定規范
3. 線性or面性
4. 圖標導出
5. 圖標管理和交付
圖標設計的評判標準
圖標的品牌感
寫在最后
文章來源：優設 作者：印跡時光
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
