文章主路徑如下：
這組圖標非常有活力和創意，色彩很活潑，原作者是菜心。我也常用微漸變來做圖標，但是沒有嘗試過加上描邊，并且這種強烈的對比色也在我習慣用色外。臨摹這組圖標可以突破我的用色習慣。
我們先逐步拆分，再進行總結。
第一步，分析原作品的結構。
圖標可以拆分為線、面和小元素。我在 sketch 做的，形狀的線面轉換比較簡單。線跟面的圖層要分開，因為面圖層帶有反光，而線圖層沒有。
第二步，確定光源的方向。
從作者的表現來看，光源在左上角，因此所有的圖標應該遵循同一光源方向的原則。光源的表現會因為材質的不同而不同。比如「LIKE 燈牌」帶有自發光、「鈴鐺」帶有高光。所有物體的反光比受光面要亮一點，讓人感覺很通透。
第三步，分析原作的顏色。
不要吸色，先自己調色。剛開始會有點難，但是這種練習會幫助我們提高眼睛辨色的能力，提高色感。對比自己和原作的顏色，發現我調色不夠準確，沒有做到不同顏色飽和度一致，漸變色跳躍比較大。這表示我還沒有理解原作的用色，后續臨摹的時候需要修正。
第四步，總結作者的設計語言。
分析完以后開始臨摹。
先說一下體量感的問題，因為有很多設計師在做圖標的時候會忽略這一點。常見的方法是拿圖標框來限定，但是問題又來了，有的人限定得太死板，不會根據實際情況來微調。針對這種情況，可以拿別人的整套圖標作品做反推，在臨摹的時候，留意別人對體量感的把握。
定義了大概的體量之后，我會觀察圖標大致的形狀和角度，憑印象先把造型做出來。過程中沒有把原作品放在旁邊，最多在忘記的時候去看一眼。這樣做的好處是，可以發現自己觀察的時候漏了什么（這個方法是跟菜心學的）。下圖就是第一次臨摹的草稿，orz…鈴鐺最不好畫了。
拿著草稿來對比原圖，把自己錯漏的地方找出來。
統計錯漏的地方，重新調整圖標，達到 90%以上的相似度后，給圖標上色。
做完這一步后，大概理解了作者做這套圖標時的邏輯以及方法。我們可以開始做半原創的設計，在原作的基礎上延展幾個圖標。我選擇電商主題的「充值、簽到 、賺錢、砍價」這四個圖標來做。
我們先找參考素材。不管畫圖標、做界面，還是畫插畫，學會找參考非常重要。參考不是照抄，而是給我們提供靈感來源，切記不要憑空想象。有一天，團隊的設計師跟我說她不會畫衣服的褶皺，畫起來總是怪怪的。我叫她上網找相似衣服的圖片，看一下別人的褶皺和光影，她就茅塞頓開了。因為她總是用“原創”局限自己，沒有找實物參考。
原創絕不是憑空想象，而是有源設計的融合。
結合作者的設計語言做延展圖標，放在原作里面也不違和的話，就成功一大半啦。
接下來是原創時間～我們將作者的設計語言其中一些變量改變，會得出不同的結果。
文章來源：優設網 作者：牙線y2x
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 UI 的設計體系中，圖標是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
網上現存不少關于圖標繪制的文章和教學，但不是太籠統，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認知中對它有比較全面、系統的認識，所以大多數初級的 UI設計師，始終畫不好圖標。
針對這個問題，我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法，讓所有設計新人更快地上手圖標設計。
本文共分為5個部分：
圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI設計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關鍵元素之一。
在當下最常見的扁平化設計風格中，界面的實際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標。
△ 由圖片、文字、幾何、圖標組成的界面
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標，是 UI設計中除了插畫元素以外唯一需要我們「繪制」、「創作」的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好的設計圖標？
△ Clear APP 的截圖
這就涉及圖標作用的探討了，為了節約篇幅，更快進入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了，就談對于圖形界面本身，為什么圖標有這么重要的地位，沒它不行？
有兩個原因，第一文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜了，在識別效率上有先天的劣勢。再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
△ 應用文字替換了圖標的對比
第二點，就是關于視覺的觀賞性。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來太枯燥了，不得勁，最好的例子就是應用的設置頁了，見下方案例。
△ 設置頁有圖標和沒有圖標的對比
既然知道了圖標的作用和重要性，那么接下來，就要進一步了解在工作中我們要設計哪些圖標。
可以先劃分成三種大類：
下面，我們將對它們分別進行介紹，以及展示相關的設計類型，方便讀者在開始學習具體設計前，對 UI設計會創作的圖標有更全面的認識。
首先，我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。作為最常見的圖標類型，我們就不需要做太多的說明了。
△ 常見的工具圖標
雖然理解起來容易，但是它所包含的設計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進行細分。
1. 風格1：線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。
下面我們把它們羅列出來。
△ 線性風格的工具圖標
2. 風格2：面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
△ 面性風格的工具圖標
3. 風格3：混合風格
當然，在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。常見的樣式類型如下：
△ 混合風格的工具圖標
和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。
比如在分類列表里，是可以只使用線框和文字把大量內容濃縮到一屏以內，但實際瀏覽效率并不會增加，而且并不美觀。
△ 裝飾圖標在識別性上的作用
還有就是國內的界面設計環境，會根據運營需求設計進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。
△ 節日活動中的裝飾圖標
裝飾性的圖標設計，雖然沒有明確的規范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進行介紹。
1. 扁平風格
扁平風格的裝飾圖標，通常可以理解成是用扁平插畫的方式畫出來的圖標，除了繼承扁平的純色填充特性以外，也比普通圖標有更豐富的細節與趣味性。
△ 扁平風格的裝飾圖標
2. 擬物風格
擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。
△ 擬物風格的裝飾圖標
3. 2.5D風格
2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用2.5D會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。
△ 2.5D風格的裝飾圖標
4. 炫彩漸變
這是一個拗口的原創名詞，找不到更合適的形容，還是覺得浮夸點符合它的氣質。這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。
使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。
△ 炫彩漸變風格的裝飾圖標
5. 實物貼圖
最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要在后面掌握它的做法。
△ 應用攝影實物的裝飾圖標
最后，就要說說啟動圖標了。啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把「LOGO嵌套進系統圖標模版」的圖標。
除了掌握必要的規范以外，啟動圖標的主體物設計就是 LOGO 的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。
1. 文字形式
使用了文字作為圖標主體物的類型，通常是這類應用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
△ 文字類的啟動圖標
2. 圖標形式
對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。
△ 圖標類的啟動圖標
3. 圖形圖標
圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。
△ 圖形類的啟動圖標
4. 插畫形式
對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。
△ 插畫類的啟動圖標
5. 擬物形式
雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。
△ 擬物類的啟動圖標
當然，還有其它的數之不盡的啟動圖標設計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。
前面介紹的三種圖標，就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單，但可以玩出的花樣不少。除了正確設計出圖標以外，高低階的 UI設計師之間的區別也包含圖標設計類型掌握的多寡。
所以，在開始學習前，不要將設計圖標的目標局限在最簡單的圖形繪制上，還有很多有趣的設計形式等待你們去嘗試。
了解了圖標的類型，就要開始了解做出這些圖標應該使用哪些軟件了。通常，UI 主要使用的設計軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標就一點難度都沒有了，這是非常不負責任的，所以為了對新人更友好一點（如果已經全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標設計的優劣，以及需要掌握的部分。
1. Sketch / XD
這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創作和繪圖。
雖然它們都包含路徑、鋼筆、布爾運算等功能（Sketch 相對 XD 更完善一點），想要繪制一些非?；A的線性或面性圖標時沒有問題，但只要涉及到比較復雜的圖形，往往就束手無策。
所以，我建議所有學習 UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現一些簡單的圖標時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應用決定了我們圖標設計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款無論什么東西都設計得出來的設計軟件，但是，它本質上是一款「位圖軟件」。后續的文章中會提及，在界面中采用矢量格式的圖標是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復制到其它軟件中。
實際項目中，我們會用 PS 設計一些視覺表現相對復雜的圖標，例如啟動圖標、擬物圖標、實物圖標等等。
繪制圖標需要用到的 PS 功能并不太多，需要在前期學習這個軟件的過程中加以篩選，重點是以下知識點：
雖然 PS 在實際項目中是用來畫復雜的圖標，但并不妨礙我們使用 PS 從最基礎的圖標開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標是最好的磨刀石，之后再學習 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 設計必學的一款軟件，它的功能異常豐富，主要用來設計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細節的調整上，是最全面最細膩的軟件，并且 AI 中的圖形還可以直接復制粘貼到其它應用的畫布中。
如果掌握了上方提及的 PS 基礎，那么學習 AI 也就輕松了不少，其中，AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的：
花幾個晚上，掌握了 PS 和 AI 的相關知識點以后，就為我們后續的學習提供了技術支持，可以進入下一階段了。
這是圖標系列文章的第一篇，信息量不算少。所以我們在結尾再總結一次，方便大家記憶。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
常見的分類是簡單的線性分類，缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。
大家好，我是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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
