————— 目錄大綱 —————
作者：大秘密mimi 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
大家好，我是 Clippp。今天為大家分享的是「菜單導航」。一個簡單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因為樣式的差異在功能上這些菜單也會出現差異性。
我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設計含義和設計目的，不能因為簡單常見而忽視了功能的內核。
關鍵詞：橫條、多個菜單選項
這個圖標的樣式簡潔易懂，通常位于網頁和 App 的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。
當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。
關鍵詞：垂直、內嵌菜單
通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。
關鍵詞：水平、內嵌菜單、web
水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。
因為圖標樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
關鍵詞：子分類、子功能
九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。
關鍵詞：過濾、排序
過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號?？梢詫⑦^濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。
關鍵詞：樣式特殊、時尚感更強
作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。
不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節(jié)，是保證產品體驗提升的關鍵。
慢來比較快，如覺得有幫助，請點個贊，謝謝！
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
金剛區(qū)是什么，想必大家都有所了解。
沒有的話看這張圖就懂了：
圖片來源：淘寶首頁
我在微信上搜了一下，發(fā)現大部分討論金剛區(qū)設計的文章，都是在講怎么畫圖標。
但是我自己在使用各大 APP 的過程中，發(fā)現很多金剛區(qū)并不是那么好用，而且這跟圖標好不好看無關。
金剛區(qū)設計不好，會對我的使用造成直接影響：
我今天就來總結一下，對于金剛區(qū)設計的交互/體驗思考：
金剛區(qū)里有多少項比較合適？
這其實是米勒法則（Miller’s Role）的典型運用了。
如果你還不太了解米勒法則，看看下面這張圖里的詞語：
現在，半分鐘回憶一下，你記住了多少個？
……
大部分人能記住 5~9 個。
米勒的研究發(fā)現，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。
如果給的信息超出了這個數字，大部分人也只能記住這么多。
所以說，金剛區(qū)里的圖標數量，最好也維持在這個數，否則就是對用戶的記憶能力要求過高了。
通常來，4 個圖標很輕松，說 6 個圖標是比較理想的，8~9 個就有點吃力了，10 個就超綱了。
例如支付寶這個就過分了，好在這只是工具類產品，復雜一點也沒辦法：
人們在看閱讀文字時，視線軌跡是之字形：
人們在閱讀表格時，視線軌跡是除草機形：
上圖來源：這樣設計表格，看著真難受！
雖然金剛區(qū)的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。
所以，用戶最有可能使用的圖標，應該從左到右排在最上面一行，最不常用的可以排在右下角。
例如美團外賣這個設計，看著就挺合理。不但把重要內容放在第一行，而且還做了很大的視覺區(qū)分：
不過一些不愁流量的 APP 會選擇把黃金位置用做商業(yè)宣傳，難免損失點易用性。
1. 仿真圖標
如果追求質感，多半會使用物品本身的顏色，例如每日優(yōu)鮮這個：
這種圖標就沒什么顏色好討論了，注意一下整體和諧就好。
2. 數量較少
如果圖標數量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。
例如 QQ 音樂：
3. 數量適中
如果圖標數量在 7 個左右或以內，那么可以每種顏色的圖標都來一個，這樣用戶也能記住大概什么顏色代表什么。
例如京東這樣：
4. 數量很多
圖標數量遠超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。
如果還是想要劃分顏色，可以將類型作為依據，這樣用戶在尋找圖標時會比較有方向。
當然，其實也可以簡單點，干脆都一個顏色，例如聯通手機營業(yè)廳：
1. 底框
一些產品為了統(tǒng)一感，會用圓圈或者圓角矩形，把所有圖標都框起來。
這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標的識別度，乍眼一看都長一樣。
這種底框在主流產品里已經很少見了，不過這么做的設計師還是不少：
這種圖標數量少，有顏色區(qū)分還好，如果數量多又一個顏色，那就很難辨認了。
縱觀常見的金剛區(qū)圖標，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。
聯通手機營業(yè)廳
QQ 音樂
京東
美團外賣
每日優(yōu)鮮
任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。
真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。
我發(fā)現做設計時，從不同的角度會帶來截然不同的思考。
今天這篇分析，算是一個以交互體驗為主，融合了一些視覺角度，希望帶給大家一些靈感~
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
本文從圖標類型、系統(tǒng)圖標的尺寸和網格、圖標的繪制、導出和命名等6個方面，幫你快速掌握圖標設計規(guī)范。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
在內容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業(yè)界優(yōu)秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。
注：以下部分示例僅為個人處理方法，僅供參考。
本期提綱：
“SF Symbols” 是蘋果為 San Francisco 系統(tǒng)字體設計的一套內置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。
1. 多種磅重
“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。
圖形磅重與比例參考表
圖形比例與字形排列參考
2. 字形參照定位
以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統(tǒng)讀取時將根據圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。
圖形參考線
相同基線下對齊效果，使圖形重心處于小寫字母區(qū)域
常用的塊級元素對齊效果，重心稍微偏下
3. 多色應用
通過讀取圖形內的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現形式。
不同渲染模式下的多色效果
4. 圖形本地化適配
除磅重與比例以外，當圖形出現需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。
隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現非整數規(guī)格的情況，這對新人來說會造成一定的設計門檻。
1. 微信的圖標規(guī)格
以微信客戶端為例，需要在 24*24pt 的網格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內方的樣式。
2. 為什么會有設計門檻
對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數規(guī)格圖標可以是噩夢，即便有經驗的設計師在繪制過程中也會因為計算路徑余數而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……
Sketch 的對齊模式
3. 建議方法：倍化繪制
所以在處理非整數圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數值規(guī)格我們也可以使用倍化調整，使圖形在畫板內變成整數，最直接方式是小數點后奇偶數進行判斷，奇數放大 10 倍，偶數放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據業(yè)務需要決定是否縮放輸出，而位圖則根據所需尺寸進行倍數縮放再輸出。
4. 工具使用差異
使用 Sketch 對圖形進行倍化后繪制和調整已經友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據需要使用自定義工具欄把這些工具外置。
Sketch 中的路徑工具
Figma 相對而言路徑編輯功能比較簡單，但依賴社區(qū)豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。
雖然目前 sketch 的圖形繪制功能已經很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網格本身非常適合矢量繪圖，用來繪制圖標也十分便利。
Sketch 與 AI 的對比，雖不公平但也是事實……
使用 AI 的網格系統(tǒng)，我們可以設定符合業(yè)務需要的對齊方式、鍵盤增量和網絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。
適配自身規(guī)格的網格設置
使用 AI 自帶的角度旋轉功能時設置圖形副本數量，保證了每個圖形角度和方向都是準確的。
使用 AI 繪制實例演示
1. 等比分布
當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規(guī)則圖形等比縮放后會出現部分點、線不等比，這其實是一種理解上的誤區(qū)，在把不規(guī)則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。
常見圖形在不同處理方式上產生的差異
清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。
AI 與 Sketch 下通過路徑偏移獲得等距縮放效果
2. 骨架與輸出路徑
日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。
但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統(tǒng)渲染模式的一致，并且這是所有平臺都要求的。
SF Symbols 對路徑輪廓化的要求
1. 面積配比
對應不同的業(yè)務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現一些穩(wěn)定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現視覺誤差與中心渾濁。情況類似中文字體中出現的中宮、字懷（中宮：漢字重心區(qū)域范圍、字懷：筆畫之間的留白范圍）緊湊。
按標準柵格繪制特征明顯的圖形
這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。
對圖形延伸部分外擴微調
2. 視覺對齊
通常使用工具的對齊功能實現圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經用工具居中了，但看起來卻沒居中” 這種問題，這種現象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。
奇怪的對齊現象
以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。
思路與等距放大類似，先確定幾何中心而非圖層中心
這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態(tài)。
Sketch 多邊形工具創(chuàng)建的三角形
本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發(fā)現給大家?guī)硪恍﹩l(fā)與探討。
圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。
作者：We-Design
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優(yōu)化的?！?
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 B 端產品，但這樣子的圖標真的不好看?！?
雖然我心里知道 B 端產品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設計的時候，我們首先看圖標是否體現了可用與易用，是否讓用戶通過看圖標就可以聯想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設計規(guī)則，讓界面看起來統(tǒng)一與專業(yè)。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。
不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創(chuàng)意的圖標、顏色豐富的圖標。
那 B 端圖標設計真的只需要考慮好不好看嗎？作為設計者的我們，還能做什么呢？其實，B 端圖標設計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~
圖標也叫 icon，它是對現實世界的概括、抽象、隱喻，在產品軟件中，它會向我們傳達功能與操作。
有些圖標已經成為人人熟悉并一致認同的傳播語言，例如刪除、設置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應基本是一致的，無需再多說什么。
圖標在 B 端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將 B 端圖標分為兩大類：示意類圖標和半裝飾類圖標。
1. 示意類圖標
示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。
該類圖標在中后臺系統(tǒng)的界面中會比較常用，例如基礎組件、導航菜單、狀態(tài)、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。
2. 半裝飾類圖標
為什么我們要取名「半裝飾類圖標」呢？原因在于，在 B 端界面上，不會無緣無故出現純裝飾、毫無寓意的圖標，任何圖標的出現即便原本是為了裝飾，設計者在設計時也需要思考其含義屬性。
該類圖標會在中后臺導航、中后臺工作臺、Dashboard、B 端網站等地方出現，它們可以讓 B 端界面活躍起來。
我們可以發(fā)現，某些場景下使用示意類圖標會更好（比如基礎組件），某些場景下使用半裝飾類圖標會更好（比如 B 端網站），某些場景下使用任意一類圖標都可以（比如中后臺導航菜單）。
回到一開始客戶的問題：把圖標設計的好看點，他說了好幾個地方，記得好像有樹控件 、導航菜單、按鈕等。設計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎組件中。
我們深刻了解 B 端圖標類型的使用場景，在設計決策時會更加得心應手。
雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規(guī)則是互通的。我們團隊輸出了一套企業(yè)級 B 端圖標設計規(guī)范，不僅可以幫助新人設計師快速上手，并且可以使團隊內設計師高效協(xié)作，保證設計結果的一致性。接下來和大家分享下思路，這是一套可復用的方法。
1. 約定圖標繪制區(qū)域
我們需要給一整套圖標約定合適的繪制區(qū)域，保證不論哪位設計師輸出的圖標，均符合設計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。
假如都是 48px*48px 區(qū)域繪制的圖標，它們均縮放到 16px*16px 即可；如果一個是在 48px*48px 畫板上繪制的，一個是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會導致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設計繪制規(guī)則。
這里在和大家分享一個小心得：我們團隊在約定圖標繪制區(qū)域時，發(fā)現了一個問題。Antd 的圖標是繪制在 1024px*1024px 畫板上的，但又有一些團隊是繪制在 16px*16px，到底應該選取哪種畫板呢？經過實際操作后我們發(fā)現，畫板越大，設計細節(jié)可以越豐富。但縮小到小尺寸時，會有小數點的虛邊（不過不妨礙前端應用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內，設計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結。
2. 設置出血位
除了要讓圖標繪制到統(tǒng)一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設計師圖標繪制不小心貼邊后，圖標在實際應用場景中會出現缺失現象。當然，出血位的默認數值并不是一成不變的，允許設計師在繪制一些特殊形狀的圖標時，有調整空間，保證視覺平衡。
3. 約定元素調整規(guī)則
針對示意類圖標：
線條：我們會要求設計師在繪制圖標的線條/圓點時默認使用某個數值，然后設定線條粗細/圓點大小的遞增或遞減規(guī)律，例如以 2 的倍數為主基調繪制，默認為 6px 粗細/6px 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規(guī)律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業(yè)。采用哪種圓角方式，設計師可以參考產品調性去規(guī)定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規(guī)則。
例如約定在「幾何圖形+業(yè)務圖形」的設計基礎上進行發(fā)揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序?？梢钥吹津v訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區(qū)域、核心內容繪制區(qū)域、基礎圖形參考區(qū)域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節(jié)奏感和規(guī)整性。當基礎型無法滿足需要的時，以它們?yōu)闇氏蛲馍l(fā)，在遵循設計規(guī)范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規(guī)整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區(qū)域」中，我們說到了要為一套圖標約定統(tǒng)一的畫板區(qū)域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了。”答案當然是否定的。約定畫板尺寸不是約束，恰恰是在規(guī)則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態(tài)。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 B 端基礎組件、工作臺常用導航模塊、結果頁的圖標各自設計一套繪制尺寸。
那設計師要怎么判斷什么時候采用場景拓展法去設計呢？我們可以優(yōu)先使用默認畫板尺寸設計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執(zhí)行，針對界面風格有場景區(qū)別的，可以規(guī)定幾類畫板尺寸，為不同場景使用。
線型圖標與面型圖標也是設計師經常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多 B 端產品的小伙伴可以發(fā)現，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當前產品調性合適哪種，并且使用某類型圖標后，對界面產生的效果是什么。
例如當界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導到圖標而不是重點數據上。
線型圖標與面型圖標在界面中使用，是一項系統(tǒng)工程，是由多方因素決定的。但我們設計師需要保證 B 端界面圖標使用的統(tǒng)一性，即便按照場景區(qū)分，也需要認真思考，是不是有必要。就如界面字號使用定律一樣，建議不要超過 3 種，多了會讓界面雜亂，降低界面設計品質。圖標也是如此，不論面型還是線型，要站在產品角度去整體把握，而非線型和面型的簡單選擇。很多 B 端產品是兩種類型混用的，但它們很好的劃分了使用場景。
這里我總結了一些線型圖標與面型圖標常用的場景（以 B 端中后臺為例，但這并不是唯一選擇）：
1. 在導航上（菜單極其多），常見默認用線型，選中用面型。
2. 在導航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產品整體調性。
3. 在基礎組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。
4. 在表格數據的狀態(tài)中，面型和線型是均分使用的狀態(tài)出現。
5. 在文字按鈕中如果要添加圖標，讓界面展現更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。
6. 若標題區(qū)要出現按鈕，面型按鈕會使得區(qū)塊顯得更整體。
這里還想和大家說說「視覺尺寸與規(guī)范尺寸」的事情。之前遇到設計師這么問：“既然已經約定了圖標的設計規(guī)范，那是不是就嚴格按照規(guī)范區(qū)間來（嚴格按照基礎圖形參考區(qū)域來），但是有些圖標不適合直接套用規(guī)范啊?！?
是的，其實很多不規(guī)則圖標是不適合直接套用規(guī)范的，就像一份周報格式不是所有崗位都適用一樣。如果設計師發(fā)現有些圖標直接套用規(guī)范不可行，是可以根據「視覺大小一致性」進行微調的。這不僅保證了前端開發(fā)的便捷，也保證了界面視覺的整潔。
既然是一套 B 端產品層/企業(yè)級圖標庫，那么必須要有規(guī)范的命名方式，這樣會方便設計師之間的協(xié)同，也會更方便開發(fā)與設計之間的協(xié)作，同時查找效率會提升。
那么命名有什么規(guī)律呢？其實只要根據項目的情況，團隊內有統(tǒng)一的認知即可。關于命名的中英文，也是視團隊而定，各有優(yōu)缺點。比如是英文，那會方便開發(fā)直接用名字，不用重新取名（當然設計師取的英文名開發(fā)不喜歡，也會改）；用中文的話，方便檢索。
可以是：
尺寸/類型/圖標名稱/狀態(tài)
16px/導航/上傳/默認
形態(tài)/格式/圖標名稱
面型/方型/新增
模塊/圖標名稱/狀態(tài)
導航/分享/正常
好用的三方圖標庫還是很多的，雖然圖標庫質量參差不齊，但還是在一定程度上解放了設計師天天畫圖標的痛苦。這里介紹幾個圖標質量不錯的網站：
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
當客戶提出圖標好不好看時，是一個正常人的反應，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關系，當我們了解了小圖標內部的大智慧后，我們可以更輕松的駕馭圖標了，也可以知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
最近我在學習使用 Figma，會在社區(qū)查找一些大廠的設計系統(tǒng)文件學習，看到一篇微軟 Fluent 系統(tǒng)圖標規(guī)范文檔，還挺詳細的。其中，我發(fā)現有些小點自己平時很少注意到，并且感覺對設計師定義圖標規(guī)范也有一定的幫助，所以結合個人圖標經驗挑選部分內容來翻譯成一篇文章，便于擴展自己的圖標思維。（備注：以下的規(guī)范是針對尺寸 24px、線條粗細 1.5px 的圖標）
在前一個版本，Fluent 系統(tǒng)圖標采用了 MDL2 和 Monoline 圖標集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統(tǒng)的發(fā)布，我們可以看到 Fluent 系統(tǒng)圖標也進行了比較大版本的優(yōu)化，感知最大的地方就是圖標變圓潤了。
設計理念有三個準則：熟悉的、友好的、現代的。圖標形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節(jié)處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。
規(guī)范化的網格，能促進圖標的整體性和統(tǒng)一性，設計師繪制圖形元素時也更有條理性。從 24px 圖標尺寸開始，比較建議使用網格系統(tǒng)，內容安全區(qū)域是 20px，周圍有 2px 的內邊距。（留內邊距主要是考慮個別圖標居中分布和體量問題，有些圖標元素會超出安全區(qū)域，比如修飾符類型圖形）
基礎形狀是網格的基礎，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關圖標體量上保持一致的視覺比例。
圓形、矩形、正方形圖標體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標尺寸空間?。?
圖標線條應當采用一致的粗細，線條末端采用全圓角。
像素對齊很重要，特別是低分屏設備，圖標可以看起來很清晰。由于線條粗細是 1.5px，需要保證 1px 是對齊像素的，避免內外都出現虛邊。
但在某些特殊場景，為了使圖標體量居中分布，就會出現像素不對齊的情況，比如一條豎線。
Fluent 圖標改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認真打磨圓角的細節(jié)，定義了三種圓角數值。大圓角使用在線條直角或鈍角處；當使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細節(jié)或銳角處。（確實挺細的，也影響了整體的風格。如果追求統(tǒng)一大圓角的話，可能太偏圓潤風格，更適合娛樂類產品用戶吧）
斷口多存在復合圖標上，斷口間距是 1px。當圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）
修改符應當謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標的右下角。設計師在繪制過程中，修飾符圖形可以超出安全區(qū)域，使圖標視覺感官居中分布。
如果已經建立的圖標需要關閉狀態(tài)，應當遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標的安全區(qū)域。
圖標平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標的區(qū)域面積，從而達到平衡的目的。
隨著更多圖標的創(chuàng)建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續(xù)才能更好地協(xié)作。我們推薦圖標命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。
以上就是 Microsoft Fluent 圖標規(guī)范的一些小翻譯總結吧，線條粗細、圓角、居中、體量、平衡、命名等方面還挺多細節(jié)可以打磨細化的，希望各位設計師能夠結合業(yè)務來仔細琢磨，提煉出屬于自己產品的圖標規(guī)范。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
SVG 格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG 是一個基于 XML 標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于 WPS 圖標的文章《探索 WPS 3000 個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉 SVG 格式了，這次，我有一個棒的想法想分享給大家：利用 SVG 圖標套色，來完成不同界面的適配。
圖標套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標準，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準控制 SVG 格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。
基本原理：修改 SVG 的樣式，生成不同風格的圖標
用處一：顏色適配
這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。
相同功能需要兩套不同主題色的圖標
用處二：皮膚適配
現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。
通過修改映射配置，可以得到不同顏色的圖標
我們先看看圖標套色之后的效果：
修改映射配置，可以得到線、面不同風格的圖標
簡單來說，實現這種效果有下方五個步驟:
套色方法五個步驟
以下方幾個圖標來做示例：
SVG 示例圖標
第一步，確定圖標線、面風格
設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。
同時兼容線、面兩種風格效果
第二步，定義圖標顏色
在確定了圖標的風格之后，將圖標中用到的 7 種顏色，根據一深一淺再拆分為 14 種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。
根據線、面風格需要，定義圖標的顏色
第三步，給顏色定義樣式名
給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規(guī)則即可）。
給顏色定義樣式名
第四步，給 SVG 圖標添加 CSS 內部樣式
SVG 格式圖標默認是沒有 CSS 樣式，需要手動將 CSS 內部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關聯起來。
給 SVG 添加 CSS 樣式
第五步，樣式屬性配置機制
添加內部樣式之后，需要開發(fā)小哥哥在軟件中增加對 SVG 圖標 CSS 樣式屬性的映射機制。修改映射機制配置文件中 CSS 樣式屬性，就可以控制圖標風格變化。
修改配置代碼即可改變圖標顏色
完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。
了解了步驟方法，我們以 WPS 為例來講解圖標套色在實際案例中的應用：
案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF 紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。
套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。
不同主題色圖標的變換效果
案例二：WPS 有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。
套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。
不同風格圖標的變換效果
案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS 組件功能區(qū)的圖標有幾千個，輸出和維護都很費精力。
套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。
深淺色模式下圖標的變換效果
通過以上的案例不難發(fā)現，SVG 圖標套色技術的價值，主要有以下幾個方面：
1. 時間和維護成本的降低
利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發(fā)小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；
2. 個性化需求的滿足
后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；
3. 服務器資源的節(jié)約
更少圖標資源，更小壓縮包，更少空間和寬帶的占用。
采用新技術，幫助設計、開發(fā)更好地完成多場景適配，降低了整體流程的執(zhí)行難度，為項目節(jié)省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創(chuàng)造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。
工作中經常能遇到重復的內容，這都有提升和優(yōu)化的空間，尋找更高效的方法，讓工作變得輕松簡單。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
做好圖標設計是一個入門級 UI 設計師的必備技能之一，圖標是界面中非常重要的組成部分，在實際的工作中，即便是一些工作多年且有一定經驗的設計師，也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區(qū)別，例如金剛區(qū)、分類、標簽欄、服務工具等。
用圖標準確的表達出實際含義，僅僅學其「形」是不夠的，需要對圖標有較為全面、系統(tǒng)的認識，了解圖標的相關概念、正確的繪制方法及處理好一系列的細節(jié)，本篇文章將介紹圖標設計的具體方法及要點，幫你規(guī)避掉一些常見的問題，讓圖標設計有理有據。
本期大綱
1. 什么是圖標？
圖標是一種具有高度概括性的圖形化標識，在界面中與文案相互支撐、搭配使用，隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。
從概念上來講，圖標可分為廣義、狹義兩種，廣義指的是現實世界中的圖形符號、且有明確指向的含義，而狹義的圖標指的設備界面中的符號，這些設備泛指承載互聯網產品的載體，如手機、電腦、iPad…等。在 UI 設計中主要具是針對狹義的概念。
圖標設計是一門學問，在我們的認知中，通常將圖標理解為某個概念的抽象圖形，通過設計清晰易懂的圖形傳達出比文字更高效率的信息，同時提升界面的美觀程度。想要將圖標設計的更加出色，則需要頻繁練習、不斷試錯、持續(xù)探究并嘗試新的風格，所以很值得我們花費大量的時間去鉆研練習。
2. 圖標的基本特征
一個界面是由文字、圖標、幾何圖形、圖片（音頻、視頻）組成，從 UI 設計師的角度，相對來說，其他三種元素大多運用到的是排版技巧，而圖標則是需要繪制、創(chuàng)作的元素，在沒有圖標的情況下，純文字也可以代替，可為什么貴還要費力費時的設計圖標呢？原因主要有兩點：
首先，圖標作為一種圖形符號的存在，跟文字的復雜程度相比，在識別效率上有著先天的優(yōu)勢，因文字需根據語種、長短的不同，所占用的界面空間資源就不同，在文字較多的情況下，大大減低了用戶瀏覽速度及信息傳達的效率，固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高，且讓界面更加簡潔，所以我們常見的圖文結合界面，絕大多數都是圖標在上、文字在下，或者圖標在左、文字在右，這些設計足以說明圖標視覺傳達的優(yōu)先級高于文字。
其次，不同風格、樣式的圖標能讓界面看起來更美觀，提高用戶的視覺舒適度。設想一下，如果界面沒有任何圖標的點綴，即便用戶也能使用，但看多來多少都有些枯燥無味，全部用文字來理解內容還容易引起視覺疲勞。
扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義，并通過不同的色彩體現出不同的視覺效果，最常見配色有以下幾種：
單色：簡潔、清晰視覺效果，常見于基礎功能圖標。例如：B端功能入口，移動端個人中心、二/三級頁面的工具欄等，也有很多app的金剛區(qū)利用底色塊襯托反白的圖標。
雙色：是很常見的功能性圖標，至少由兩個以上的元素組成，在單色的基礎上加以色彩點綴，讓本身就不是很突出的元素不再單調，如果融入品牌色，能提升整個界面品牌調性，適用場景跟單色圖標相比則范圍更廣。
多色：至少由三種或以上的形狀、顏色組合而成，常用于金剛區(qū)、產品分類列表、定制化菜單等。
漸變：漸變色的圖標顯得較年輕化，可以是單元素的漸變或多元素的漸變組合，能映射出一種活潑、熱烈的氛圍。例如：視頻、直播等娛樂類型的APP，或車載UI等。
不透明度：調整圖標中某個元素的不透明度，可在不變換色系的情況下豐富配色細節(jié)，還能與底色融合的更加細膩，解決多色漸變視覺跳躍的問題。
另外，在 UI 界面中，扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。
線性
線性圖標主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調整空間。
面性
面性圖標主要通過剪影的形式來制作抽象的形體，相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感，以達到多種視覺表現的效果。
線面結合
線面結合的圖標既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標則細節(jié)更加豐富，如果把控到位，會有更好的視覺效果及信息傳達的效率，也不失趣味性。
擬物風格的圖標主要通過細節(jié)和光影、根據現實世界中的物品塑形打造出圖形立體效果，非?？简炘O計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感，能讓用戶快速領會圖標所傳達出的意圖及氣質。
因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現會成為干擾其他信息的存在，游戲類應用中使用的非常普遍（不過多贅述）。在其他類型的應用中，大部分出現在營銷類型的界面，例如專題頁、成就榜、會員中心等。
跟擬物化圖標相比，輕質感就不會有太多復雜的元素，主要通過各種色彩漸變、發(fā)光、投影等圖層樣式體現出非常柔和的立體感，整體風格偏年輕化，給人輕盈、簡潔及精致的感覺。在設計過程中，請使用干凈且和諧的配色，主要使用在界面較大區(qū)域的位置。
不僅僅是頁面背景有毛玻璃風格，圖標的毛玻璃風格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現（網上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現出圖標的質感與神秘感。
除上述這幾種風格的圖標之外，還有例如 2.5D、3D、像素風、新擬態(tài)…等，但在 UI 設計中并不常用，就不一一舉例說明了。
1. 性格走向（描邊/拐角）
力量型：粗線條、直角拐點，給人一種力量、狂野的感覺，常用于體育、健身、機械類型的產品；
可愛型：粗線條、圓角設計，看起來活潑可愛，給人舒適、飽滿的感覺，在兒童、教育類產品中很常見；
嚴謹型：細線條、直角拐點，看起來工整、嚴謹，中規(guī)中矩，適合政府、法律類型的產品；
精致型：細線條、圓潤的拐角，柔和、干凈、纖細且精致的感覺，很適合極簡風格的設計，在藝術、金融、珠寶等奢華類產品中比較常見。
2. 動態(tài)效果
如果想要突出金剛區(qū)、工具列表中的某個功能入口，將圖標設計成動態(tài)效果，既能保持整體圖標風格的統(tǒng)一、又能單獨突出功能的重要性，起到強調的作用，用來吸引用戶的注意力，引導用戶操作，提升其點擊率。切記動效圖標不能過多，當什么都突出了等于什么都沒有突出。
其次，在年輕化、娛樂類型的產品 Tab 欄中的圖標切換時，加入動態(tài)效果，可起到畫龍點睛的作用，還能通過動效表達出不同的情緒，降低切換時的枯燥感，好的 Tab 動效能傳達出整個產品的氣質。
最后，如果有類似運營或短期內的活動，需要吸引用戶注意但又不適合固定在界面中的某個位置，這時可以設計一個動態(tài)圖標懸浮在設備某個位置（注意用戶體驗及交互原則），既不過多的占用頁面資源，還能同時顯示在多個界面，一舉多得。
動效圖標：@墨染 ART 授權
遵循圖標設計規(guī)范有利于設計師之間的合作及接下來的設計，以及產品整體圖標風格的統(tǒng)一性，起到約束的作用，即便在更換設計師的情況下，也不至于出現較大的問題。在制定合理的設計規(guī)范前需要先了解圖標到底有哪些規(guī)范，應從哪些方面入手，以便接下來的圖標設計順利進行。
為了保持圖標元素的平衡，尺寸大小需要保持一致，通常我們會建立基礎網格尺寸進行圖標的繪制，常見的網格尺寸有 16、24、36、48、64、128、512、1024，這些網格尺寸并非固定，也會根據設計中的特殊尺寸而變化。
一個圖標系統(tǒng)包括網格尺寸和圖標元素兩部分，設定好網格尺寸后，就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸，而是根據不同的形狀占比受制于圖標 keyline，最終形成統(tǒng)一的視覺大小。
從上圖中可以看出，相同尺寸的圖標在真實的視覺中相差很大，這就好比一個 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標大小相同，并非真實尺寸，而是視覺感受。
為保持圖標視覺上的一致性和平衡感，需要先繪制 keyline 用來指導、規(guī)范圖標設計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網格的大小需保持 4 的倍數，便于不同尺寸的圖標都能適配，可使用 24*24px 的網格尺寸為基準，其他尺寸的圖標可通過增加倍數以此類推，如 48*48px、72*72px……
下圖是以 24px 尺寸的網格參考基準示例（出血為 2px）：
根據產品屬性及目標用戶并結合應用場景，找到最符合自身產品性格、氣質的圖標設計風格，例如健身應用屬力量、粗獷類型，圓角、曲線適合女性產品等，在前面的「性格與氣質」中有舉例說明。
經過圖標風格的確定，圖標細節(jié)便是接下來繪制過程的核心部分，對線性圖標來說，注重的是線條的粗心，而面性圖標則注重各小圖形之間的距離，所以在繪制時，需要保持線條、間距的統(tǒng)一，方便后期的圖標更新迭代。
線性描邊粗細
我們以 iOS@2x 為基準（避免@1x 的 3px 描邊變成 1.5px，小數點），可適配最 2px、3px、4px 最常用的描邊粗細，4px 視覺較重，用于優(yōu)先級較高區(qū)域的功能性圖標，2px 看起來會顯得更加精致，在設計中，還需根據產品的行業(yè)屬性及調性來確定描邊的粗細，并統(tǒng)一起來。
面性正負形間距
面性圖標需要確保每個單獨的形狀之間有足夠的間距，以 24px 大小的形狀為例，其間距不能小于 1px，以此類推，雖然未規(guī)定上限，但間距也不宜太大，否則無法相互組合關聯，以實際視覺的舒適度為準。
根據行業(yè)類型及風格進行創(chuàng)意設計，如線性統(tǒng)一斷點、融入品牌基因、單個元素傾斜、節(jié)日氛圍烘托、修飾元素等，為圖標塑造靈魂或傳遞更多信息而進行的二次創(chuàng)作。
1. 識別性
圖標存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累，人們對一些線上圖標信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設計的圖標必須要符合用戶的認知，能讓用戶快速理解，即便出現個別特殊情況，也要用文字清楚的標注說明，否則一旦讓用戶產生疑惑，圖標就起了負面作用，在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期，減少學習成本，提升使用效率。
2. 簡潔美觀
圖標是將現實世界中的事件/事務用抽象的圖形表現出來，如果過于追求完美而設計的太復雜，還不如直接上圖片來的快，所以不能過于展現真實物品的細節(jié)，最終設計出正確而不失真的圖標尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。
3. 視覺對齊
為確保視覺平衡，異形元素在使用系統(tǒng)自動對齊后，會有一定的偏差，需手動微調進行視覺對齊。
4. 保持一致
針對大型項目，要想整個家族的圖標更加和諧，保持相同的樣式及設計原則著實不易，尤其是在多人完成設計的情況下，事先有一個清晰的設計原則和規(guī)范是必不可少的。圖標都有著對應的視覺重量，例如描邊粗細、填充模式、繁簡程度等屬性，需要做的就是控制好這些關鍵因素，讓整體看起來視覺重量相同且能相互關聯組合到一起，保持所有圖標的一致性。
5. 最小間隙
單個圖標的各元素之間要有呼吸感，需要適當的留白，如果描邊過大，整個條看起來感覺像糊成一團或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標的復雜程度來解決。
6. 使用 2 的倍數
以偶數為單位的設計便于數據的計算（2 的倍數），例如正負形間距、描邊值等，在 iOS@2x 設計下，@1x 也不會出現小數點。在移動端設計中，最小的圖標為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數值，因此，可靈活的等比縮放。
7. 延展性
即便做好了前面的一切，圖標設計工作也并未完成，需要做的是持續(xù)測試圖標的可用性，做好后續(xù)的完善與優(yōu)化，沒有最好、只有更好，以確保上線后的效果和后續(xù)的迭代。
阿里巴巴矢量圖標庫： https://www.iconfont.cn/ ，90%以上常見的矢量圖標下載；
飛書官方圖標庫： https://iconpark.oceanengine.com/official ，海量資源可在線修改，調整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標。
雖然上述圖標資源基本能滿足我們的日常設計所需，但僅僅只能是作為參考而已，一味的圖方便、投機取巧只會毀了自己的動手、創(chuàng)新能力。
圖標設計是一個非常龐大的版塊，且有很多個分支，例如：金剛區(qū)、標簽欄、應用圖標…等，每個分支都有自己的一套設計法則，我們需要在不斷的學習與創(chuàng)新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓，但可以在不斷沉淀、相互探討、持續(xù)的學習中一起進步。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
金剛區(qū)作為產品功能架構重要的組成部分，是設計師重點發(fā)揮的區(qū)域，也是風格切換最為活躍的。而金剛區(qū)圖標是最重要的表現對象，設計師在圖標設計上面耗費心力，出現了豐富多樣的視覺表現風格。
體驗了眾多產品之后，黑馬哥為大家精選了金剛區(qū)圖標設計最突出的 10 個風格，通過這些案例帶給大家感官體驗層面的更多靈感啟發(fā)。
晶白風格是通過白色質感來實現的，通過對圖標元素進行透明度變化、投影、內陰影、外發(fā)光等進行設計，使得更有層次感。
相較于扁平化的圖標設計來說，晶白風格更有層次感和質感，作為金剛區(qū)圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外，也會隨著背景或者環(huán)境色的變化融入色彩渲染，呈現出更豐富的設計細節(jié)。
晶白風格圖標就是通過兩端白色漸變，配合兩端顏色不透明度來進行深淺控制，也可以通過內陰影和外發(fā)光等來增強質感。眾多設計軟件都可以實現，靈活性非常高。
磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢，被廣泛運用到視覺設計的眾多領域。在 UI 場景中作為視覺感強化被普遍應用，其中在圖標設計上的表現尤為突出，呈現出了眾多的優(yōu)秀案例。
金剛區(qū)作為產品架構中的重要組成部分，也是更新較為活躍的部分，對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用，也是因為這一類風格具有典型的特點和視覺張力，能夠形成比較大的視覺差異，帶給用戶不錯的感官體驗。
磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現；如果是 PS 和 AI 等沒有背景模糊功能的軟件，則可以通過模糊度結合剪切蒙版來實現。實現的方法很多，大家可以多多嘗試，這是一類比較容易掌握的圖標風格。
圖標設計從寫實到扁平，再到微質感，都在不同的時期進行改變，通過風格的優(yōu)化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大，在年輕化的趨勢中顯得過于繁瑣，而介于寫實和扁平之間的微質感被深入探索。
微質感的深入可以使得圖標風格突出，質感和層次感強化了圖標的立體空間感，在整個界面中可以形成視覺差異?？梢泽w現出模塊的重要性，也是圖標設計感體現的一種方向。
通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果，多圖層刻畫來強化圖標質感和層次感。
2.5D 也稱之為偽三維，在前兩年非常流行，作為插畫風格延伸出來的，當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子，通過原子的數量分布形成 2.5D 場景。
將 2.5D 風格結合到圖標設計中，可以使得圖標更容易形成立體感，設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區(qū)圖標都比較適合，很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可，設計的駕馭度很高。
2.5D 風格的圖標很容易掌握，只要繪制好基礎原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制，大部分場景都是基于立方體、圓柱體等基礎造型進行變形。
三維類的圖標設計相較于 2.5D 風格來說，空間感和透視角度更加深入，光影的變化更加豐富。圖標設計中的三維立體感強化，對于設計師的要求更高，掌握一個三維軟件需要一定的學習成本。
隨著 C4D 等三維軟件的走熱，掀起了一股學習熱潮，被運用到金剛區(qū)圖標設計中，帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果，在界面中的視覺呈現尤為突出，也能帶給用戶更好的感官體驗。
隨著用戶對于感官體驗的升級，風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。
插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續(xù)到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。
通常矢量風格的插畫類圖標比較常用，由于圖標占比限制，不合適表現特別繁瑣的插畫風格?？梢允俏鼍暗牟瀹嫳憩F，或者是局部元素的插畫表達，這一類圖標風格將會在未來被廣泛運用，以此來提高圖標設計的視覺差異化表達。
立足于品牌做設計，這是設計師需要深入探索的方向，而金剛區(qū)圖標設計亦是如此。品牌基因融入到圖標設計中，可以輔助突出產品的品牌感，也能形成設計表達的差異化。
品牌基因化的圖標設計具備一定的特征性，也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中，或者品牌色作為圖標配色點綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標造型設計中；也有結合吉祥物來突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無法提煉，也有提取品牌文化、服務特征、用戶群體特征、行業(yè)特征等，從中提煉關聯性的圖形融入圖標設計中，以此來強化品牌感。
品牌作為設計的思考起點，不僅可以輸出差異化的設計作品，也能串聯起整個項目設計的規(guī)范。
如果覺得質感一類圖標表現力比較繁瑣，但是又不想只是簡單的線性或者面性圖標，造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。
通過圖形之間疊加豐富圖標造型，疊加部分配色的調節(jié)豐富圖標色彩搭配，形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡，帶來不錯的感官體驗。
這一類風格的圖標可以通過布爾運算設計圖形部分，顏色的疊加效果可以通過圖層樣式實現，也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸，大家可以嘗試不同的形式去進行配色，選擇符合主題的圖標配色效果。
微動效運用到圖標設計中尤為普及，特別是在金剛區(qū)模塊，可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力，相較于靜態(tài)來說更有吸引力，也能帶給用戶更加趣味性的感官體驗。
在金剛區(qū)模塊中，動效圖標通常是用于區(qū)別特殊功能，或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格，只是動態(tài)和靜態(tài)的區(qū)分，需要個別做動效，形成表現力的差異才能達到重點突出的目的。
作為設計師來說，動效也是需要掌握的基礎技能，可以提高我們的設計表現力，也能將交互動作表達得更清楚。
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節(jié)！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區(qū)圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節(jié)！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規(guī)范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規(guī)范
圖標定制設計之九：不止畫圖標！5 個金剛區(qū)的交互設計思考
藍藍設計的小編 http://sillybuy.com