我們在設定界面風格的時候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會導致非常的刺眼，比如像瑞文同學的這個顏色設定：
就是過于明亮了，其實當我們的顏色過于明亮時，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會那么刺眼了，當我們明白了底層原理之后，再去優化配色，我們看前后的變化：
這樣就會比之前舒服很多，當然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續加大，但不管哪一種，都會比之前全是亮色要好很多！
小A同學是一個非常有潛力的同學，但是最開始交上來的吉祥物作業，也不是很理想，效果如下：
話不多說，我們就改動一個點，五官緊湊，看看前后效果對比：
可愛的程度完全不在一個檔次，我們再看看小A同學后面的延展效果：
比之前強了很多很多倍，就是因為一個五官緊湊。
我們在做練習的時候，很重要的一個鍛煉點就是視覺敏銳度，能夠敏銳的發現哪里不舒服，這個真的很重要。
而視覺敏銳度里面就有一個維度是顏色，比如我們在看下面一兜糖同學做的質感圖標作業：
我們應該快速的看出，第一個圖標顏色不是很和諧，沒有后面兩個那么舒服，主要是那個藍色有點臟，我們看優化后的三個圖標：
就比之前要統一舒服很多。
當我們的練習達到一定量時，敏銳度自然就會提高很多，所以一定要多去練習，把敏銳度這一塊提高上來。
這是潘子同學的疑惑點：
他感覺綠色好難啊，第一次交上來的作業如下：
先不說造型問題，就光說顏色，就有點單薄，也有點太亮了，還有就是顏色比較正。
其實我們在配綠色的時候，只要把綠色加一點藍色，或者加一點黃色就會讓顏色好看很多。
后來潘子同學把顏色進行了優化：
這樣就比之前還要多了。
還有包括檸檬同學用的綠色:
也是比較好看的。
這回再用綠色的時候，大家清楚怎么好看了吧！
動效是用戶體驗的重要組成部分，也是產品調性的重要體現。如今動效設計也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時，確實有更輕量便捷的優勢，但效果也有一定的局限性，或者要求使用者有代碼基礎，比較適合有針對性的人群。而After Effects作為動效軟件的鼻祖，以其強大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設計師們喜愛，不論是UI、運營還是多媒體類型的設計都能滿足，無疑是目前最具有普適性的動效軟件。本文從AE的插件、操作以及落地三個方面，為大家整理了一波實用技巧，希望能幫助大家在工作中更加得心應手。
工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達到事半功倍的效果。這里介紹十款AE上不容錯過的精品插件。
AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導入到AE，但同樣是Adobe家族的AI，要導入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經常需要和AE打交道，這時候以下兩款插件便應運而生。
Overlord不僅可以實現AI導入AE，還能隨時從AE導回AI修改，這對本身不適合用于繪制圖形的AE來說，無疑是補上了一個短板。
最新的Overlord支持路徑、形狀、參數圖形、剪切關系、文本、甚至大部分的漸變參數都能無偏差互導，并且可以設置導成子圖層還是獨立圖層，可以說是非常方便了。
官網鏈接：https://www.battleaxe.co/overlord
如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導入前在Sketch里將圖層整理好，導入AE后圖層關系也是一目了然。
官網鏈接：https://aeux.io/
如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個面板上，并且可以跳過繁瑣的常規操作。包括快速調整曲線、定位圖層錨點、克隆關鍵幀、制作回彈效果、錯位圖層序列、生成多圖層空對象等。這里演示幾個常用功能。
快速調整速度緩動曲線：
不用再通過輸入表達式，做出操控便捷又靈活的回彈效果：
錨點是元素變換時的基準點，更改錨點也是高頻操作。Motion Tools不僅可以快速修改圖層錨點，并且支持多圖層批量操作：
官網鏈接：https://motiondesign.school/products/motion-tools/
新轉成的預合成尺寸總是占滿畫布，不方便做動畫且干擾其他圖層選擇。手動調節的話會影響元素的位置、位移等屬性，Auto Crop很好地解決了這個問題，能夠將預合成裁切至適合當前元素的尺寸。
官網鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發或者服裝飄動的效果，在日常運營設計中，讓你的人物快速變得生動靈活起來。
官網鏈接：https://aescripts.com/autosway
AE自身帶有粒子效果器，點擊“效果 → 模擬 → CC Particle World ”就是。但更強大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多運營或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。
除了運營設計，粒子在很多UI場景也同樣適用，例如結合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場景。
官網鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite
Bodymovin能夠將AE中矢量圖形做成的動效導成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導出的即使是又高清又流暢的大圖，也可以保持很小的體積。
QQ最新的Q彈超清表情，就是用Lottie實現的，大家可以在手機QQ上親自體驗這種爽滑Q彈的感覺哦。
官網鏈接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的動畫工作流，在動畫導出與渲染方面和Lottie相似，但更進一步的是，PAG還引入了視頻序列幀結合矢量的混合導出能力，這就保證了PAG能支持AE的所有特性和效果。
另外PAG還提供完善的桌面預覽工具、性能監測可視化、運行時可編輯等特點，能很好的打通設計與開發之間，從創作到素材交付上線的流程。
官網鏈接：https://pag.io/
Gif格式因為不支持半透明區域且容易有鋸齒，如今的實際開發中已經有了Apng、Lottie等很多更好的替代方案，但在網頁瀏覽、文檔編輯等許多場景，還是需要使用Gif來演示動效或者作為封面縮略圖。AE從2014版本后就不支持Gif導出了，而Gifgun就是一款能很好地導出Gif格式的插件。
Gifgun導出的格式小巧清晰，本文所有動圖就是用這款插件導出，真香。
官網鏈接：https://aescripts.com/gifgun/
AE本身不支持直接導出MP4，很多時候只能先導出體積龐大的MOV格式，再通過第三方軟件轉成MP4，操作繁瑣不說，還損失畫質。
Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導出MP4格式，不過這款軟件本身體積較大，每次打開都要運行很久。
這里推薦使用更實用的MP4導出軟件 — Aftercodecs。安裝后在輸出模塊設置里，就能找到對應的導出項了，并且導出的MP4也是小巧高清的。
官網鏈接：https://aescripts.com/aftercodecs/
小技巧這部分，整理了AE高頻操作經常會遇見的一些問題，以及對應比較高效的解決方案。
當我們想調整的元素已經打上過關鍵幀，這時直接調整元素的位置或縮放屬性，就會影響到原本的效果，使用空對象就可以解決這一問題。
關鍵幀比較多時，按住 “ Option ” 鍵，用鼠標拖動最末尾的關鍵幀，可以對所選關鍵幀進行整體等比拉伸，并且支持多圖層同時操作。
新建形狀層的定位錨點總是不對齊圖層的中心，這在做一些帶縮放或旋轉屬性的動畫時就特別不方便，按住“Command”雙擊“平移錨點工具”，即可使圖層錨點快速對位到圖層中心。
還有更直接的方法，就是在“首選項”里將“在新形狀圖層上居中放置錨點”打上勾，以后新建的形狀層錨點都會自動對齊圖層中心啦。
AE的很多插件和表達式對中文版本不兼容，包括很多教程也都是國外案例，所以其實直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學，平時還是習慣用中文版，有需要時才換成英文版。這里介紹一種AE快速切換中英文的方法，對2018以上的版本都適用。
以macOS系統為例，在以下路徑找到：
前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml
將“application.xml”這個文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。
Windows也是同理，對應路徑為：
C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml
然后將“application.xml”這個文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。
之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時，直接將對應的“application.xml”文件復制到原路徑替換即可。
新置入一段想要循環的視頻素材時，很多人習慣將素材復制多次，或者通過時間重映射打上關鍵幀后在添加循環表達式。其實并不需要這么麻煩，在項目窗口右鍵對應的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設置素材循環次數。
雖然AE的全部快捷鍵可以寫滿長長一串列表，但在精不在多。實際使用時，其實只要記住一些常用的關鍵快捷鍵，就已經可以效率翻倍，享受“鍵步如飛”的感覺了。
以最常用的“添加關鍵幀”為例，在不使用快捷鍵的前提下，想要給對象添加一個“位置”關鍵幀，需要至少3個步驟：
而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會展開不相關的屬性：
這對于一個工程里需要用到成百上千次的k幀操作來說，著實可以省下不少時間，可以說是不得不用的一個快捷操作。
秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測好用哦！
因為作者是MacOS系統，所以下文中提到的 Option 可以對應 Windows 的 Alt ； Command 對應 Windows 的 Control 。
五大基礎變換屬性
在對應圖層使用這五個快捷鍵，即可快速展開或收起對應屬性。
位置：P（Position）
縮放：S（Scale）
旋轉：R（Rotation）
不透明度：T（Transparency）
錨點：A（Anchor）
常用工具選擇
選擇工具：V
形狀工具：Q
鋼筆工具：P
攝像機工具：C
關鍵幀操作
快速添加關鍵幀：Option + Shift + “ * ”（ * = 對應屬性快捷鍵）
向右移動關鍵幀一幀：Option + 右箭頭
向左移動關鍵幀一幀：Option + 左箭頭
向右移動關鍵幀十幀：Option + Shift + 右箭頭
向左移動關鍵幀十幀：Option + Shift + 左箭頭
緩動關鍵幀：F9
時間指針操作
定位到上一可見關鍵幀：J
定位到下一可見關鍵幀：K
定位到圖層入點：I
定位到圖層出點：O
設置當前為工作區開始：B
設置當前為工作區結束： N
圖層操作
將圖層拆分 ：Shift + Command + D
裁去時間線左側圖層：Option + [
裁去時間線右側圖層：Option + ]
設置當前為入點： [
設置當前為出點： ]
復制圖層：Command + D
其他常用操作
展開/收起帶關鍵幀的屬性：U
展開/收起所有屬性：UU
展開/收起遮罩屬性：M
展開/收起音頻屬性：L
轉為預合成：Shift + Command + C
圖像自適應合成寬高：Shift + Option + F
After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html
設計再好的動效如果不能實際落地，那一切也只是徒勞，所以動效輸出在對接開發時非常關鍵。按照輸出和實現的方式不同，我們可以將動效分為兩種類型，一種是播放型動效，一種是交互型動效。
播放型動效是指在輸出時效果就已經固定的動效，滿足觸發條件后播放出來，過程中并不會有影響效果的元素。
例如常見的APP底部導航點擊效果，icon動效在用戶點擊時觸發播放，這個效果在輸出時就是固定的，不受任何其他因素影響，可以由設計師直接導出。
播放型動效有以下幾種比較常見的輸出格式：
Gif、Apng、Webp本質上都是將位圖進行壓縮和轉換，而Lottie則是基于代碼層面的動畫渲染，PAG則結合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經可以覆蓋大部分的輸出場景，是可以優先考慮的動圖格式。
交互型動效是指變換內容跟我們的交互操作相關聯的動效，并且包含無法由設計師直接導出的元素，比如用戶的頭像、名稱等。
比如這個支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設計師輸出的。
這種動效需要開發在代碼側還原。如果只是輸出視頻demo，開發同學很難將其中的細節（例如時間出入點、曲線速率等）還原出來。這就需要設計師有一份清晰的標注文檔，將動效的細節參數跟開發更好的明確下來。
一份規范的動效標注文檔，至少應該包含以下幾個方面，
觸發：在什么條件下觸發動效，例如點擊、雙擊、滑動、長按等；
對象：發生變換的對象，例如按鈕、列表、文字等；
屬性：具體變換的屬性，例如位移、縮放、不透明度等；
參數：換化屬性的具體參數，例如不透明度值從0到1；
時長：變換的起始時間點、持續時間；
曲線：變換的速率曲線，描述在固定的時長范圍內，速度是如何變化的；
以上圖的支付面板首次切換過程為例，我們的標注文檔是這樣的：
第一步定義好頁面的起始和結束狀態，并標明動效元素
第二步則是將各元素的運動細節用具體參數描述清楚
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、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里臨摹，真的會讓你收獲不少。
資料提?。?/strong>
最后給大家整理了一些資料，包含30個輕質感圖標（臨摹參考）、Ant Design的sketch插件、IBM的圖標、keyline矢量文件（AI與Sketch）。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
————— 目錄大綱 —————
作者：大秘密mimi 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
大家好，我是 Clippp。今天為大家分享的是「菜單導航」。一個簡單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因為樣式的差異在功能上這些菜單也會出現差異性。
我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設計含義和設計目的，不能因為簡單常見而忽視了功能的內核。
關鍵詞：橫條、多個菜單選項
這個圖標的樣式簡潔易懂，通常位于網頁和 App 的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。
當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。
關鍵詞：垂直、內嵌菜單
通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。
關鍵詞：水平、內嵌菜單、web
水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。
因為圖標樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
關鍵詞：子分類、子功能
九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。
關鍵詞：過濾、排序
過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號?？梢詫⑦^濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。
關鍵詞：樣式特殊、時尚感更強
作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。
不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節，是保證產品體驗提升的關鍵。
慢來比較快，如覺得有幫助，請點個贊，謝謝！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
金剛區是什么，想必大家都有所了解。
沒有的話看這張圖就懂了：
圖片來源：淘寶首頁
我在微信上搜了一下，發現大部分討論金剛區設計的文章，都是在講怎么畫圖標。
但是我自己在使用各大 APP 的過程中，發現很多金剛區并不是那么好用，而且這跟圖標好不好看無關。
金剛區設計不好，會對我的使用造成直接影響：
我今天就來總結一下，對于金剛區設計的交互/體驗思考：
金剛區里有多少項比較合適？
這其實是米勒法則（Miller’s Role）的典型運用了。
如果你還不太了解米勒法則，看看下面這張圖里的詞語：
現在，半分鐘回憶一下，你記住了多少個？
……
大部分人能記住 5~9 個。
米勒的研究發現，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。
如果給的信息超出了這個數字，大部分人也只能記住這么多。
所以說，金剛區里的圖標數量，最好也維持在這個數，否則就是對用戶的記憶能力要求過高了。
通常來，4 個圖標很輕松，說 6 個圖標是比較理想的，8~9 個就有點吃力了，10 個就超綱了。
例如支付寶這個就過分了，好在這只是工具類產品，復雜一點也沒辦法：
人們在看閱讀文字時，視線軌跡是之字形：
人們在閱讀表格時，視線軌跡是除草機形：
上圖來源：這樣設計表格，看著真難受！
雖然金剛區的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。
所以，用戶最有可能使用的圖標，應該從左到右排在最上面一行，最不常用的可以排在右下角。
例如美團外賣這個設計，看著就挺合理。不但把重要內容放在第一行，而且還做了很大的視覺區分：
不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳，難免損失點易用性。
1. 仿真圖標
如果追求質感，多半會使用物品本身的顏色，例如每日優鮮這個：
這種圖標就沒什么顏色好討論了，注意一下整體和諧就好。
2. 數量較少
如果圖標數量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。
例如 QQ 音樂：
3. 數量適中
如果圖標數量在 7 個左右或以內，那么可以每種顏色的圖標都來一個，這樣用戶也能記住大概什么顏色代表什么。
例如京東這樣：
4. 數量很多
圖標數量遠超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。
如果還是想要劃分顏色，可以將類型作為依據，這樣用戶在尋找圖標時會比較有方向。
當然，其實也可以簡單點，干脆都一個顏色，例如聯通手機營業廳：
1. 底框
一些產品為了統一感，會用圓圈或者圓角矩形，把所有圖標都框起來。
這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標的識別度，乍眼一看都長一樣。
這種底框在主流產品里已經很少見了，不過這么做的設計師還是不少：
這種圖標數量少，有顏色區分還好，如果數量多又一個顏色，那就很難辨認了。
縱觀常見的金剛區圖標，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。
聯通手機營業廳
QQ 音樂
京東
美團外賣
每日優鮮
任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。
真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。
我發現做設計時，從不同的角度會帶來截然不同的思考。
今天這篇分析，算是一個以交互體驗為主，融合了一些視覺角度，希望帶給大家一些靈感~
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
本文從圖標類型、系統圖標的尺寸和網格、圖標的繪制、導出和命名等6個方面，幫你快速掌握圖標設計規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
在內容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業界優秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。
注：以下部分示例僅為個人處理方法，僅供參考。
本期提綱：
“SF Symbols” 是蘋果為 San Francisco 系統字體設計的一套內置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。
1. 多種磅重
“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。
圖形磅重與比例參考表
圖形比例與字形排列參考
2. 字形參照定位
以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統讀取時將根據圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。
圖形參考線
相同基線下對齊效果，使圖形重心處于小寫字母區域
常用的塊級元素對齊效果，重心稍微偏下
3. 多色應用
通過讀取圖形內的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現形式。
不同渲染模式下的多色效果
4. 圖形本地化適配
除磅重與比例以外，當圖形出現需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。
隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現非整數規格的情況，這對新人來說會造成一定的設計門檻。
1. 微信的圖標規格
以微信客戶端為例，需要在 24*24pt 的網格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內方的樣式。
2. 為什么會有設計門檻
對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數規格圖標可以是噩夢，即便有經驗的設計師在繪制過程中也會因為計算路徑余數而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……
Sketch 的對齊模式
3. 建議方法：倍化繪制
所以在處理非整數圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數值規格我們也可以使用倍化調整，使圖形在畫板內變成整數，最直接方式是小數點后奇偶數進行判斷，奇數放大 10 倍，偶數放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據業務需要決定是否縮放輸出，而位圖則根據所需尺寸進行倍數縮放再輸出。
4. 工具使用差異
使用 Sketch 對圖形進行倍化后繪制和調整已經友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據需要使用自定義工具欄把這些工具外置。
Sketch 中的路徑工具
Figma 相對而言路徑編輯功能比較簡單，但依賴社區豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。
雖然目前 sketch 的圖形繪制功能已經很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網格本身非常適合矢量繪圖，用來繪制圖標也十分便利。
Sketch 與 AI 的對比，雖不公平但也是事實……
使用 AI 的網格系統，我們可以設定符合業務需要的對齊方式、鍵盤增量和網絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。
適配自身規格的網格設置
使用 AI 自帶的角度旋轉功能時設置圖形副本數量，保證了每個圖形角度和方向都是準確的。
使用 AI 繪制實例演示
1. 等比分布
當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規則圖形等比縮放后會出現部分點、線不等比，這其實是一種理解上的誤區，在把不規則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。
常見圖形在不同處理方式上產生的差異
清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。
AI 與 Sketch 下通過路徑偏移獲得等距縮放效果
2. 骨架與輸出路徑
日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。
但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統渲染模式的一致，并且這是所有平臺都要求的。
SF Symbols 對路徑輪廓化的要求
1. 面積配比
對應不同的業務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現一些穩定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現視覺誤差與中心渾濁。情況類似中文字體中出現的中宮、字懷（中宮：漢字重心區域范圍、字懷：筆畫之間的留白范圍）緊湊。
按標準柵格繪制特征明顯的圖形
這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。
對圖形延伸部分外擴微調
2. 視覺對齊
通常使用工具的對齊功能實現圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經用工具居中了，但看起來卻沒居中” 這種問題，這種現象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。
奇怪的對齊現象
以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。
思路與等距放大類似，先確定幾何中心而非圖層中心
這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態。
Sketch 多邊形工具創建的三角形
本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發現給大家帶來一些啟發與探討。
圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。
作者：We-Design
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優化的?！?
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 B 端產品，但這樣子的圖標真的不好看。”
雖然我心里知道 B 端產品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設計的時候，我們首先看圖標是否體現了可用與易用，是否讓用戶通過看圖標就可以聯想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設計規則，讓界面看起來統一與專業。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。
不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創意的圖標、顏色豐富的圖標。
那 B 端圖標設計真的只需要考慮好不好看嗎？作為設計者的我們，還能做什么呢？其實，B 端圖標設計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~
圖標也叫 icon，它是對現實世界的概括、抽象、隱喻，在產品軟件中，它會向我們傳達功能與操作。
有些圖標已經成為人人熟悉并一致認同的傳播語言，例如刪除、設置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應基本是一致的，無需再多說什么。
圖標在 B 端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將 B 端圖標分為兩大類：示意類圖標和半裝飾類圖標。
1. 示意類圖標
示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。
該類圖標在中后臺系統的界面中會比較常用，例如基礎組件、導航菜單、狀態、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。
2. 半裝飾類圖標
為什么我們要取名「半裝飾類圖標」呢？原因在于，在 B 端界面上，不會無緣無故出現純裝飾、毫無寓意的圖標，任何圖標的出現即便原本是為了裝飾，設計者在設計時也需要思考其含義屬性。
該類圖標會在中后臺導航、中后臺工作臺、Dashboard、B 端網站等地方出現，它們可以讓 B 端界面活躍起來。
我們可以發現，某些場景下使用示意類圖標會更好（比如基礎組件），某些場景下使用半裝飾類圖標會更好（比如 B 端網站），某些場景下使用任意一類圖標都可以（比如中后臺導航菜單）。
回到一開始客戶的問題：把圖標設計的好看點，他說了好幾個地方，記得好像有樹控件 、導航菜單、按鈕等。設計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎組件中。
我們深刻了解 B 端圖標類型的使用場景，在設計決策時會更加得心應手。
雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規則是互通的。我們團隊輸出了一套企業級 B 端圖標設計規范，不僅可以幫助新人設計師快速上手，并且可以使團隊內設計師高效協作，保證設計結果的一致性。接下來和大家分享下思路，這是一套可復用的方法。
1. 約定圖標繪制區域
我們需要給一整套圖標約定合適的繪制區域，保證不論哪位設計師輸出的圖標，均符合設計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。
假如都是 48px*48px 區域繪制的圖標，它們均縮放到 16px*16px 即可；如果一個是在 48px*48px 畫板上繪制的，一個是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會導致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設計繪制規則。
這里在和大家分享一個小心得：我們團隊在約定圖標繪制區域時，發現了一個問題。Antd 的圖標是繪制在 1024px*1024px 畫板上的，但又有一些團隊是繪制在 16px*16px，到底應該選取哪種畫板呢？經過實際操作后我們發現，畫板越大，設計細節可以越豐富。但縮小到小尺寸時，會有小數點的虛邊（不過不妨礙前端應用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內，設計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結。
2. 設置出血位
除了要讓圖標繪制到統一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設計師圖標繪制不小心貼邊后，圖標在實際應用場景中會出現缺失現象。當然，出血位的默認數值并不是一成不變的，允許設計師在繪制一些特殊形狀的圖標時，有調整空間，保證視覺平衡。
3. 約定元素調整規則
針對示意類圖標：
線條：我們會要求設計師在繪制圖標的線條/圓點時默認使用某個數值，然后設定線條粗細/圓點大小的遞增或遞減規律，例如以 2 的倍數為主基調繪制，默認為 6px 粗細/6px 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業。采用哪種圓角方式，設計師可以參考產品調性去規定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規則。
例如約定在「幾何圖形+業務圖形」的設計基礎上進行發揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序?？梢钥吹津v訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區域、核心內容繪制區域、基礎圖形參考區域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節奏感和規整性。當基礎型無法滿足需要的時，以它們為準向外散發，在遵循設計規范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區域」中，我們說到了要為一套圖標約定統一的畫板區域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了?！贝鸢府斎皇欠穸ǖ?。約定畫板尺寸不是約束，恰恰是在規則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 B 端基礎組件、工作臺常用導航模塊、結果頁的圖標各自設計一套繪制尺寸。
那設計師要怎么判斷什么時候采用場景拓展法去設計呢？我們可以優先使用默認畫板尺寸設計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執行，針對界面風格有場景區別的，可以規定幾類畫板尺寸，為不同場景使用。
線型圖標與面型圖標也是設計師經常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多 B 端產品的小伙伴可以發現，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當前產品調性合適哪種，并且使用某類型圖標后，對界面產生的效果是什么。
例如當界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導到圖標而不是重點數據上。
線型圖標與面型圖標在界面中使用，是一項系統工程，是由多方因素決定的。但我們設計師需要保證 B 端界面圖標使用的統一性，即便按照場景區分，也需要認真思考，是不是有必要。就如界面字號使用定律一樣，建議不要超過 3 種，多了會讓界面雜亂，降低界面設計品質。圖標也是如此，不論面型還是線型，要站在產品角度去整體把握，而非線型和面型的簡單選擇。很多 B 端產品是兩種類型混用的，但它們很好的劃分了使用場景。
這里我總結了一些線型圖標與面型圖標常用的場景（以 B 端中后臺為例，但這并不是唯一選擇）：
1. 在導航上（菜單極其多），常見默認用線型，選中用面型。
2. 在導航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產品整體調性。
3. 在基礎組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。
4. 在表格數據的狀態中，面型和線型是均分使用的狀態出現。
5. 在文字按鈕中如果要添加圖標，讓界面展現更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。
6. 若標題區要出現按鈕，面型按鈕會使得區塊顯得更整體。
這里還想和大家說說「視覺尺寸與規范尺寸」的事情。之前遇到設計師這么問：“既然已經約定了圖標的設計規范，那是不是就嚴格按照規范區間來（嚴格按照基礎圖形參考區域來），但是有些圖標不適合直接套用規范啊。”
是的，其實很多不規則圖標是不適合直接套用規范的，就像一份周報格式不是所有崗位都適用一樣。如果設計師發現有些圖標直接套用規范不可行，是可以根據「視覺大小一致性」進行微調的。這不僅保證了前端開發的便捷，也保證了界面視覺的整潔。
既然是一套 B 端產品層/企業級圖標庫，那么必須要有規范的命名方式，這樣會方便設計師之間的協同，也會更方便開發與設計之間的協作，同時查找效率會提升。
那么命名有什么規律呢？其實只要根據項目的情況，團隊內有統一的認知即可。關于命名的中英文，也是視團隊而定，各有優缺點。比如是英文，那會方便開發直接用名字，不用重新取名（當然設計師取的英文名開發不喜歡，也會改）；用中文的話，方便檢索。
可以是：
尺寸/類型/圖標名稱/狀態
16px/導航/上傳/默認
形態/格式/圖標名稱
面型/方型/新增
模塊/圖標名稱/狀態
導航/分享/正常
好用的三方圖標庫還是很多的，雖然圖標庫質量參差不齊，但還是在一定程度上解放了設計師天天畫圖標的痛苦。這里介紹幾個圖標質量不錯的網站：
1. Noun Project
網站鏈接：https://thenounproject.com
2. Iconfont
3. ICONS8
網站鏈接：https://icons8.com
4. Font Awesome
網站鏈接：https://fontawesome.dashgame.com/
5. IconPark
網站鏈接：https://iconpark.oceanengine.com/home
當客戶提出圖標好不好看時，是一個正常人的反應，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關系，當我們了解了小圖標內部的大智慧后，我們可以更輕松的駕馭圖標了，也可以知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
藍藍設計的小編 http://www.syprn.cn