今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優化的。”
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 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 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業。采用哪種圓角方式，設計師可以參考產品調性去規定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規則。
例如約定在「幾何圖形+業務圖形」的設計基礎上進行發揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序。可以看到騰訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區域、核心內容繪制區域、基礎圖形參考區域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節奏感和規整性。當基礎型無法滿足需要的時，以它們為準向外散發，在遵循設計規范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區域」中，我們說到了要為一套圖標約定統一的畫板區域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了?！贝鸢府斎皇欠穸ǖ摹＜s定畫板尺寸不是約束，恰恰是在規則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 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.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
最近我在學習使用 Figma，會在社區查找一些大廠的設計系統文件學習，看到一篇微軟 Fluent 系統圖標規范文檔，還挺詳細的。其中，我發現有些小點自己平時很少注意到，并且感覺對設計師定義圖標規范也有一定的幫助，所以結合個人圖標經驗挑選部分內容來翻譯成一篇文章，便于擴展自己的圖標思維。（備注：以下的規范是針對尺寸 24px、線條粗細 1.5px 的圖標）
在前一個版本，Fluent 系統圖標采用了 MDL2 和 Monoline 圖標集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統的發布，我們可以看到 Fluent 系統圖標也進行了比較大版本的優化，感知最大的地方就是圖標變圓潤了。
設計理念有三個準則：熟悉的、友好的、現代的。圖標形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。
規范化的網格，能促進圖標的整體性和統一性，設計師繪制圖形元素時也更有條理性。從 24px 圖標尺寸開始，比較建議使用網格系統，內容安全區域是 20px，周圍有 2px 的內邊距。（留內邊距主要是考慮個別圖標居中分布和體量問題，有些圖標元素會超出安全區域，比如修飾符類型圖形）
基礎形狀是網格的基礎，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關圖標體量上保持一致的視覺比例。
圓形、矩形、正方形圖標體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標尺寸空間?。?
圖標線條應當采用一致的粗細，線條末端采用全圓角。
像素對齊很重要，特別是低分屏設備，圖標可以看起來很清晰。由于線條粗細是 1.5px，需要保證 1px 是對齊像素的，避免內外都出現虛邊。
但在某些特殊場景，為了使圖標體量居中分布，就會出現像素不對齊的情況，比如一條豎線。
Fluent 圖標改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認真打磨圓角的細節，定義了三種圓角數值。大圓角使用在線條直角或鈍角處；當使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細節或銳角處。（確實挺細的，也影響了整體的風格。如果追求統一大圓角的話，可能太偏圓潤風格，更適合娛樂類產品用戶吧）
斷口多存在復合圖標上，斷口間距是 1px。當圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）
修改符應當謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標的右下角。設計師在繪制過程中，修飾符圖形可以超出安全區域，使圖標視覺感官居中分布。
如果已經建立的圖標需要關閉狀態，應當遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標的安全區域。
圖標平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標的區域面積，從而達到平衡的目的。
隨著更多圖標的創建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續才能更好地協作。我們推薦圖標命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。
以上就是 Microsoft Fluent 圖標規范的一些小翻譯總結吧，線條粗細、圓角、居中、體量、平衡、命名等方面還挺多細節可以打磨細化的，希望各位設計師能夠結合業務來仔細琢磨，提煉出屬于自己產品的圖標規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
SVG 格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG 是一個基于 XML 標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于 WPS 圖標的文章《探索 WPS 3000 個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉 SVG 格式了，這次，我有一個棒的想法想分享給大家：利用 SVG 圖標套色，來完成不同界面的適配。
圖標套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標準，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準控制 SVG 格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。
基本原理：修改 SVG 的樣式，生成不同風格的圖標
用處一：顏色適配
這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。
相同功能需要兩套不同主題色的圖標
用處二：皮膚適配
現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。
通過修改映射配置，可以得到不同顏色的圖標
我們先看看圖標套色之后的效果：
修改映射配置，可以得到線、面不同風格的圖標
簡單來說，實現這種效果有下方五個步驟:
套色方法五個步驟
以下方幾個圖標來做示例：
SVG 示例圖標
第一步，確定圖標線、面風格
設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。
同時兼容線、面兩種風格效果
第二步，定義圖標顏色
在確定了圖標的風格之后，將圖標中用到的 7 種顏色，根據一深一淺再拆分為 14 種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。
根據線、面風格需要，定義圖標的顏色
第三步，給顏色定義樣式名
給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規則即可）。
給顏色定義樣式名
第四步，給 SVG 圖標添加 CSS 內部樣式
SVG 格式圖標默認是沒有 CSS 樣式，需要手動將 CSS 內部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關聯起來。
給 SVG 添加 CSS 樣式
第五步，樣式屬性配置機制
添加內部樣式之后，需要開發小哥哥在軟件中增加對 SVG 圖標 CSS 樣式屬性的映射機制。修改映射機制配置文件中 CSS 樣式屬性，就可以控制圖標風格變化。
修改配置代碼即可改變圖標顏色
完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。
了解了步驟方法，我們以 WPS 為例來講解圖標套色在實際案例中的應用：
案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF 紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。
套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。
不同主題色圖標的變換效果
案例二：WPS 有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。
套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。
不同風格圖標的變換效果
案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS 組件功能區的圖標有幾千個，輸出和維護都很費精力。
套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。
深淺色模式下圖標的變換效果
通過以上的案例不難發現，SVG 圖標套色技術的價值，主要有以下幾個方面：
1. 時間和維護成本的降低
利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；
2. 個性化需求的滿足
后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；
3. 服務器資源的節約
更少圖標資源，更小壓縮包，更少空間和寬帶的占用。
采用新技術，幫助設計、開發更好地完成多場景適配，降低了整體流程的執行難度，為項目節省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。
工作中經常能遇到重復的內容，這都有提升和優化的空間，尋找更高效的方法，讓工作變得輕松簡單。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
做好圖標設計是一個入門級 UI 設計師的必備技能之一，圖標是界面中非常重要的組成部分，在實際的工作中，即便是一些工作多年且有一定經驗的設計師，也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區別，例如金剛區、分類、標簽欄、服務工具等。
用圖標準確的表達出實際含義，僅僅學其「形」是不夠的，需要對圖標有較為全面、系統的認識，了解圖標的相關概念、正確的繪制方法及處理好一系列的細節，本篇文章將介紹圖標設計的具體方法及要點，幫你規避掉一些常見的問題，讓圖標設計有理有據。
本期大綱
1. 什么是圖標？
圖標是一種具有高度概括性的圖形化標識，在界面中與文案相互支撐、搭配使用，隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。
從概念上來講，圖標可分為廣義、狹義兩種，廣義指的是現實世界中的圖形符號、且有明確指向的含義，而狹義的圖標指的設備界面中的符號，這些設備泛指承載互聯網產品的載體，如手機、電腦、iPad…等。在 UI 設計中主要具是針對狹義的概念。
圖標設計是一門學問，在我們的認知中，通常將圖標理解為某個概念的抽象圖形，通過設計清晰易懂的圖形傳達出比文字更高效率的信息，同時提升界面的美觀程度。想要將圖標設計的更加出色，則需要頻繁練習、不斷試錯、持續探究并嘗試新的風格，所以很值得我們花費大量的時間去鉆研練習。
2. 圖標的基本特征
一個界面是由文字、圖標、幾何圖形、圖片（音頻、視頻）組成，從 UI 設計師的角度，相對來說，其他三種元素大多運用到的是排版技巧，而圖標則是需要繪制、創作的元素，在沒有圖標的情況下，純文字也可以代替，可為什么貴還要費力費時的設計圖標呢？原因主要有兩點：
首先，圖標作為一種圖形符號的存在，跟文字的復雜程度相比，在識別效率上有著先天的優勢，因文字需根據語種、長短的不同，所占用的界面空間資源就不同，在文字較多的情況下，大大減低了用戶瀏覽速度及信息傳達的效率，固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高，且讓界面更加簡潔，所以我們常見的圖文結合界面，絕大多數都是圖標在上、文字在下，或者圖標在左、文字在右，這些設計足以說明圖標視覺傳達的優先級高于文字。
其次，不同風格、樣式的圖標能讓界面看起來更美觀，提高用戶的視覺舒適度。設想一下，如果界面沒有任何圖標的點綴，即便用戶也能使用，但看多來多少都有些枯燥無味，全部用文字來理解內容還容易引起視覺疲勞。
扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義，并通過不同的色彩體現出不同的視覺效果，最常見配色有以下幾種：
單色：簡潔、清晰視覺效果，常見于基礎功能圖標。例如：B端功能入口，移動端個人中心、二/三級頁面的工具欄等，也有很多app的金剛區利用底色塊襯托反白的圖標。
雙色：是很常見的功能性圖標，至少由兩個以上的元素組成，在單色的基礎上加以色彩點綴，讓本身就不是很突出的元素不再單調，如果融入品牌色，能提升整個界面品牌調性，適用場景跟單色圖標相比則范圍更廣。
多色：至少由三種或以上的形狀、顏色組合而成，常用于金剛區、產品分類列表、定制化菜單等。
漸變：漸變色的圖標顯得較年輕化，可以是單元素的漸變或多元素的漸變組合，能映射出一種活潑、熱烈的氛圍。例如：視頻、直播等娛樂類型的APP，或車載UI等。
不透明度：調整圖標中某個元素的不透明度，可在不變換色系的情況下豐富配色細節，還能與底色融合的更加細膩，解決多色漸變視覺跳躍的問題。
另外，在 UI 界面中，扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。
線性
線性圖標主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調整空間。
面性
面性圖標主要通過剪影的形式來制作抽象的形體，相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感，以達到多種視覺表現的效果。
線面結合
線面結合的圖標既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標則細節更加豐富，如果把控到位，會有更好的視覺效果及信息傳達的效率，也不失趣味性。
擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果，非常考驗設計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感，能讓用戶快速領會圖標所傳達出的意圖及氣質。
因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現會成為干擾其他信息的存在，游戲類應用中使用的非常普遍（不過多贅述）。在其他類型的應用中，大部分出現在營銷類型的界面，例如專題頁、成就榜、會員中心等。
跟擬物化圖標相比，輕質感就不會有太多復雜的元素，主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感，整體風格偏年輕化，給人輕盈、簡潔及精致的感覺。在設計過程中，請使用干凈且和諧的配色，主要使用在界面較大區域的位置。
不僅僅是頁面背景有毛玻璃風格，圖標的毛玻璃風格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現（網上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現出圖標的質感與神秘感。
除上述這幾種風格的圖標之外，還有例如 2.5D、3D、像素風、新擬態…等，但在 UI 設計中并不常用，就不一一舉例說明了。
1. 性格走向（描邊/拐角）
力量型：粗線條、直角拐點，給人一種力量、狂野的感覺，常用于體育、健身、機械類型的產品；
可愛型：粗線條、圓角設計，看起來活潑可愛，給人舒適、飽滿的感覺，在兒童、教育類產品中很常見；
嚴謹型：細線條、直角拐點，看起來工整、嚴謹，中規中矩，適合政府、法律類型的產品；
精致型：細線條、圓潤的拐角，柔和、干凈、纖細且精致的感覺，很適合極簡風格的設計，在藝術、金融、珠寶等奢華類產品中比較常見。
2. 動態效果
如果想要突出金剛區、工具列表中的某個功能入口，將圖標設計成動態效果，既能保持整體圖標風格的統一、又能單獨突出功能的重要性，起到強調的作用，用來吸引用戶的注意力，引導用戶操作，提升其點擊率。切記動效圖標不能過多，當什么都突出了等于什么都沒有突出。
其次，在年輕化、娛樂類型的產品 Tab 欄中的圖標切換時，加入動態效果，可起到畫龍點睛的作用，還能通過動效表達出不同的情緒，降低切換時的枯燥感，好的 Tab 動效能傳達出整個產品的氣質。
最后，如果有類似運營或短期內的活動，需要吸引用戶注意但又不適合固定在界面中的某個位置，這時可以設計一個動態圖標懸浮在設備某個位置（注意用戶體驗及交互原則），既不過多的占用頁面資源，還能同時顯示在多個界面，一舉多得。
動效圖標：@墨染 ART 授權
遵循圖標設計規范有利于設計師之間的合作及接下來的設計，以及產品整體圖標風格的統一性，起到約束的作用，即便在更換設計師的情況下，也不至于出現較大的問題。在制定合理的設計規范前需要先了解圖標到底有哪些規范，應從哪些方面入手，以便接下來的圖標設計順利進行。
為了保持圖標元素的平衡，尺寸大小需要保持一致，通常我們會建立基礎網格尺寸進行圖標的繪制，常見的網格尺寸有 16、24、36、48、64、128、512、1024，這些網格尺寸并非固定，也會根據設計中的特殊尺寸而變化。
一個圖標系統包括網格尺寸和圖標元素兩部分，設定好網格尺寸后，就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸，而是根據不同的形狀占比受制于圖標 keyline，最終形成統一的視覺大小。
從上圖中可以看出，相同尺寸的圖標在真實的視覺中相差很大，這就好比一個 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標大小相同，并非真實尺寸，而是視覺感受。
為保持圖標視覺上的一致性和平衡感，需要先繪制 keyline 用來指導、規范圖標設計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網格的大小需保持 4 的倍數，便于不同尺寸的圖標都能適配，可使用 24*24px 的網格尺寸為基準，其他尺寸的圖標可通過增加倍數以此類推，如 48*48px、72*72px……
下圖是以 24px 尺寸的網格參考基準示例（出血為 2px）：
根據產品屬性及目標用戶并結合應用場景，找到最符合自身產品性格、氣質的圖標設計風格，例如健身應用屬力量、粗獷類型，圓角、曲線適合女性產品等，在前面的「性格與氣質」中有舉例說明。
經過圖標風格的確定，圖標細節便是接下來繪制過程的核心部分，對線性圖標來說，注重的是線條的粗心，而面性圖標則注重各小圖形之間的距離，所以在繪制時，需要保持線條、間距的統一，方便后期的圖標更新迭代。
線性描邊粗細
我們以 iOS@2x 為基準（避免@1x 的 3px 描邊變成 1.5px，小數點），可適配最 2px、3px、4px 最常用的描邊粗細，4px 視覺較重，用于優先級較高區域的功能性圖標，2px 看起來會顯得更加精致，在設計中，還需根據產品的行業屬性及調性來確定描邊的粗細，并統一起來。
面性正負形間距
面性圖標需要確保每個單獨的形狀之間有足夠的間距，以 24px 大小的形狀為例，其間距不能小于 1px，以此類推，雖然未規定上限，但間距也不宜太大，否則無法相互組合關聯，以實際視覺的舒適度為準。
根據行業類型及風格進行創意設計，如線性統一斷點、融入品牌基因、單個元素傾斜、節日氛圍烘托、修飾元素等，為圖標塑造靈魂或傳遞更多信息而進行的二次創作。
1. 識別性
圖標存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累，人們對一些線上圖標信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設計的圖標必須要符合用戶的認知，能讓用戶快速理解，即便出現個別特殊情況，也要用文字清楚的標注說明，否則一旦讓用戶產生疑惑，圖標就起了負面作用，在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期，減少學習成本，提升使用效率。
2. 簡潔美觀
圖標是將現實世界中的事件/事務用抽象的圖形表現出來，如果過于追求完美而設計的太復雜，還不如直接上圖片來的快，所以不能過于展現真實物品的細節，最終設計出正確而不失真的圖標尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。
3. 視覺對齊
為確保視覺平衡，異形元素在使用系統自動對齊后，會有一定的偏差，需手動微調進行視覺對齊。
4. 保持一致
針對大型項目，要想整個家族的圖標更加和諧，保持相同的樣式及設計原則著實不易，尤其是在多人完成設計的情況下，事先有一個清晰的設計原則和規范是必不可少的。圖標都有著對應的視覺重量，例如描邊粗細、填充模式、繁簡程度等屬性，需要做的就是控制好這些關鍵因素，讓整體看起來視覺重量相同且能相互關聯組合到一起，保持所有圖標的一致性。
5. 最小間隙
單個圖標的各元素之間要有呼吸感，需要適當的留白，如果描邊過大，整個條看起來感覺像糊成一團或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標的復雜程度來解決。
6. 使用 2 的倍數
以偶數為單位的設計便于數據的計算（2 的倍數），例如正負形間距、描邊值等，在 iOS@2x 設計下，@1x 也不會出現小數點。在移動端設計中，最小的圖標為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數值，因此，可靈活的等比縮放。
7. 延展性
即便做好了前面的一切，圖標設計工作也并未完成，需要做的是持續測試圖標的可用性，做好后續的完善與優化，沒有最好、只有更好，以確保上線后的效果和后續的迭代。
阿里巴巴矢量圖標庫： https://www.iconfont.cn/ ，90%以上常見的矢量圖標下載；
飛書官方圖標庫： https://iconpark.oceanengine.com/official ，海量資源可在線修改，調整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標。
雖然上述圖標資源基本能滿足我們的日常設計所需，但僅僅只能是作為參考而已，一味的圖方便、投機取巧只會毀了自己的動手、創新能力。
圖標設計是一個非常龐大的版塊，且有很多個分支，例如：金剛區、標簽欄、應用圖標…等，每個分支都有自己的一套設計法則，我們需要在不斷的學習與創新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓，但可以在不斷沉淀、相互探討、持續的學習中一起進步。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
金剛區作為產品功能架構重要的組成部分，是設計師重點發揮的區域，也是風格切換最為活躍的。而金剛區圖標是最重要的表現對象，設計師在圖標設計上面耗費心力，出現了豐富多樣的視覺表現風格。
體驗了眾多產品之后，黑馬哥為大家精選了金剛區圖標設計最突出的 10 個風格，通過這些案例帶給大家感官體驗層面的更多靈感啟發。
晶白風格是通過白色質感來實現的，通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計，使得更有層次感。
相較于扁平化的圖標設計來說，晶白風格更有層次感和質感，作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外，也會隨著背景或者環境色的變化融入色彩渲染，呈現出更豐富的設計細節。
晶白風格圖標就是通過兩端白色漸變，配合兩端顏色不透明度來進行深淺控制，也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現，靈活性非常高。
磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢，被廣泛運用到視覺設計的眾多領域。在 UI 場景中作為視覺感強化被普遍應用，其中在圖標設計上的表現尤為突出，呈現出了眾多的優秀案例。
金剛區作為產品架構中的重要組成部分，也是更新較為活躍的部分，對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用，也是因為這一類風格具有典型的特點和視覺張力，能夠形成比較大的視覺差異，帶給用戶不錯的感官體驗。
磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現；如果是 PS 和 AI 等沒有背景模糊功能的軟件，則可以通過模糊度結合剪切蒙版來實現。實現的方法很多，大家可以多多嘗試，這是一類比較容易掌握的圖標風格。
圖標設計從寫實到扁平，再到微質感，都在不同的時期進行改變，通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大，在年輕化的趨勢中顯得過于繁瑣，而介于寫實和扁平之間的微質感被深入探索。
微質感的深入可以使得圖標風格突出，質感和層次感強化了圖標的立體空間感，在整個界面中可以形成視覺差異?？梢泽w現出模塊的重要性，也是圖標設計感體現的一種方向。
通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果，多圖層刻畫來強化圖標質感和層次感。
2.5D 也稱之為偽三維，在前兩年非常流行，作為插畫風格延伸出來的，當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子，通過原子的數量分布形成 2.5D 場景。
將 2.5D 風格結合到圖標設計中，可以使得圖標更容易形成立體感，設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合，很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可，設計的駕馭度很高。
2.5D 風格的圖標很容易掌握，只要繪制好基礎原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制，大部分場景都是基于立方體、圓柱體等基礎造型進行變形。
三維類的圖標設計相較于 2.5D 風格來說，空間感和透視角度更加深入，光影的變化更加豐富。圖標設計中的三維立體感強化，對于設計師的要求更高，掌握一個三維軟件需要一定的學習成本。
隨著 C4D 等三維軟件的走熱，掀起了一股學習熱潮，被運用到金剛區圖標設計中，帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果，在界面中的視覺呈現尤為突出，也能帶給用戶更好的感官體驗。
隨著用戶對于感官體驗的升級，風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。
插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。
通常矢量風格的插畫類圖標比較常用，由于圖標占比限制，不合適表現特別繁瑣的插畫風格?？梢允俏鼍暗牟瀹嫳憩F，或者是局部元素的插畫表達，這一類圖標風格將會在未來被廣泛運用，以此來提高圖標設計的視覺差異化表達。
立足于品牌做設計，這是設計師需要深入探索的方向，而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中，可以輔助突出產品的品牌感，也能形成設計表達的差異化。
品牌基因化的圖標設計具備一定的特征性，也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中，或者品牌色作為圖標配色點綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標造型設計中；也有結合吉祥物來突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無法提煉，也有提取品牌文化、服務特征、用戶群體特征、行業特征等，從中提煉關聯性的圖形融入圖標設計中，以此來強化品牌感。
品牌作為設計的思考起點，不僅可以輸出差異化的設計作品，也能串聯起整個項目設計的規范。
如果覺得質感一類圖標表現力比較繁瑣，但是又不想只是簡單的線性或者面性圖標，造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。
通過圖形之間疊加豐富圖標造型，疊加部分配色的調節豐富圖標色彩搭配，形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡，帶來不錯的感官體驗。
這一類風格的圖標可以通過布爾運算設計圖形部分，顏色的疊加效果可以通過圖層樣式實現，也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸，大家可以嘗試不同的形式去進行配色，選擇符合主題的圖標配色效果。
微動效運用到圖標設計中尤為普及，特別是在金剛區模塊，可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力，相較于靜態來說更有吸引力，也能帶給用戶更加趣味性的感官體驗。
在金剛區模塊中，動效圖標通常是用于區別特殊功能，或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格，只是動態和靜態的區分，需要個別做動效，形成表現力的差異才能達到重點突出的目的。
作為設計師來說，動效也是需要掌握的基礎技能，可以提高我們的設計表現力，也能將交互動作表達得更清楚。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
大家好，這里是設計夾，今天為大家分享的是「圖標設計細節」。圖標在頁面中的尺寸很小，卻包含著很多細節。作為通用的視覺化語言，把握住其中的設計細節至關重要。
這次總結一下圖標設計的屬性以及在圖標設計中，很重要但容易被忽略的知識點。
在 UI 設計中，圖標主要有兩大類：一類是 APP 啟動圖標，每個 APP 獨一份；另一類是系統 icon，搭配文字，方便用戶快速理解信息，也是這篇文章重點講解的內容。
常見的圖標風格有線性、面性、彩色、寫實、3D 等，圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異，主要的作用是反饋動作和吸引用戶更多注意力。
Tips: 現在字節、百度新推出的一些年輕化產品中，有很多精致的 3D 寫實圖標，極具個性，很好地迎合了年輕用戶的喜好。在扁平風格流行的當下，這樣的嘗試也是一種突破。
簡單的線性圖標重量輕，看起來更簡約，不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容，那么更適合選用簡約的、重量輕的線性/面形圖標，防止頁面過于雜亂。
相反，如果當前的頁面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至 3D 圖標來增加頁面的豐富性，讓頁面看起來更有設計感，給用戶帶來視覺上的愉悅，簡約而不簡單。
構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等，表達式規則是統一的，以便只給觀看者識別圖標所需的最小更改。
圖標的外形有圓形、方形、三角形甚至不規則形狀的，所以我們很難將不同形狀的圖標尺寸完全統一。
這個時候網格就起到很關鍵的作用，有了網格相當于提前將圖標限定范圍，在網格范圍內根據圖標的重量和重心靈活調整大小，這樣會讓不同形狀的圖標看起來更統一。
由于設計軟件的局限性，雖然有些圖形已經居中對齊，但有時候還需要進行視覺校正。
最典型的圖標案例是“播放”圖標，利用設計軟件對齊中間的三角形后，會發現三角形的位置看起來偏左。
利用軟件對齊后，我們還需要再用眼睛確認一遍，我們可以將三角形向右移動，保證三角形的重心與圓形的重心一致，這樣整個播放圖標看起來會更舒服。
設計圖標時，我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視，所以大多數的圖標都沒有透視，看起來會更簡潔。
帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注，但不建議這么設計。
圖標比例通常使用 8 的倍數作為基準，例如 8px、16px、24px 和 32px，以便在各種環境中進行流暢地切換。除此之外，在移動端等屏幕尺寸較小的頁面中，還會使用 4px 的倍數，來實現多功能性。
圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小，要盡可能做到對用戶友好，可以使用一些簡單的隱喻設計，但含義不能過于復雜。
一個圖形能說明的問題，沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義，這樣反而會影響用戶的操作。
這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息，特別是對于尺寸很小的系統圖標，最好只保留最基本的內容，移除多余的裝飾元素。
這里說得一致性，并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面，線性、面性等多種圖標風格可以一起使用。
但在同一個頁面場景中，執行相同功能的圖標應該保持相同的樣式。
面對不同的操作系統，例如 iOS 和 Android，同一功能對應的圖標也會有差異。針對不同的系統，我們可以選用大多數用戶熟悉的圖標，這樣用戶能更快地理解圖標的含義
以上就是常用卻容易忽略的圖標設計細節，希望通過這些內容能幫助你對圖標設計有更深的認識。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
很多人知道品牌設計中有輔助圖形的概念，輔助圖形對于品牌識別體系非常重要，但其實在圖標設計時，也會經常用到輔助圖形。圖標中的輔助圖形，簡單理解就是圖標的裝飾元素，它能讓圖標設計有更多的細節和特點，強化圖標識別性，同時還能讓圖標更具視覺表現力。
舉個例子，像下面這套圖標中的淺色部分和噪點就是圖標中的輔助圖形，去掉這些輔助圖形不大會影響圖標的識別性，但增加這些輔助圖形后，圖標變得更有特點，更容易被記住。
https://dribbble.com/shots/14490441-Feature-Icons
善用輔助圖形為圖標增強表現力是圖標設計中的一個秘密武器，彩云在工作中總結了一些經驗，大概有以下5點：
《簡約至上》這本書中提到過一個刪除原則：刪除是將不必要的元素都剔除掉，直到不能再刪除為止。那么在圖標設計中，這一點尤為重要，因為圖標本身就濃縮了大量的信息，所以要讓用到的輔助圖形有它存在的價值，不加多余的元素。
比如下面這個案例，容易看出其中的輔助圖形是綠色部分。在圖標中它們代表的是行動或者結果，作為事物主體的補充，可以理解為主語和賓語的關系。因為有了這樣的輔助圖形存在，強化了圖標的識別性，這就能讓圖標增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面這個案例是星球中一位同學的練習，整體來說還是不錯的，但就輔助圖形的使用上看就有些小問題了。淡黃色的輔助圖形圓形跟主體圖形沒有太大的關聯，也沒有太多實際意義，可以理解為強行為了統一而統一。圖標主體已經做了雙色設計，增加這些圓形后讓圖標變得比較復雜且刪除對圖標意義的表達也沒影響，所以這里的輔助圖形的使用稍顯多余。
在配色上，輔助圖形還可以結合品牌色彩。用品牌色的主色作為主體顏色，輔助色作為輔助圖形的顏色，或者直接用品牌主色調作為輔助圖形的配色都可以作為圖標設計的亮點。
品牌色的加入，能夠讓圖標配色的使用找到立足的理由，馬上就能加分。
比如大家經常在畫圖標的時候，圖標主體通常以單色為主，但此時可以嘗試加入以品牌色裝飾元素作為點綴，立馬就能提升圖標細節。下面這個案例是愛奇藝的首頁圖標設計，能看出來它的輔助圖形設計配色上是按品牌綠色來設計的。
在使用輔助圖形的時候，尤其是對于多圖標體系來說，完全一致的輔助圖形就顯得比較呆板，缺乏細節。再拿上面那個星球同學的練習來看，不看輔助圖形的具體含義和復雜度，在整體上看起來也缺乏變化，圓形都在同一個位置，保持著同一個大小和顏色。
輔助圖形的使用想要有更好的效果，盡量在一定的范圍能多一些變化。
比如下面這個例子，雖然圖形的位置和大小都一樣，但在顏色上做了不同的變化，整體看來細節度還是不錯的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面這個案例，輔助圖形的使用有豐富的變化，使得圖標的細節滿滿。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，變化應該在一定的范圍，不可以變化太大。
比如星球中另一位同學的練習，她在圖標的底部用了淺色的藍色填充作為輔助圖形，但這3個之間的輔助圖形差異太大，前面2個還能理解是一套，但對于第三個圖標來說，輔助圖形的比例明顯大于前2個圖標，顯得不夠統一。
而對于下面這組圖標來說，藍色的輔助圖形的面積變化相對一致，顯得更為統一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
雖然使用圖標輔助圖形會讓圖標顯得更加有特點，但也要分清主次，不應該超過圖標本身的核心意義，不能太搶用戶的注意力而影響識別性。
比如下面的案例，圖標主體特征一眼就能識別出來，輔助圖形的加入并不會影響主次關系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同學做的練習，這里的輔助圖形有些太過于搶眼，且蓋在圖標上面影響了一定的圖標識別性。修改方向是如果能把輔助圖形的玻璃質感做一個強化，增加一些透明度，把主體元素凸顯出來就會好很多。
這是另一位同學的練習，也是同樣的問題，輔助圖形搶了主體元素的風頭。修改方向是把輔助圖形改小一些就會好很多。
她畫這個圖標是臨摹了原作的效果，能看到原作中的星星輔助圖形小一些會好很多。
圖標輔助圖形也是圖標的一部分，從整體上也需要遵循圖標本身的風格體系。
這是星球中一位同學的練習，輔助圖形用星星是沒問題的，但這里星星的尖角相對于主圖形的圓角來說就顯得風格不夠統一，把星星的尖角改為圓角就會好很多。
這位同學的作品也是臨摹了原作的效果，能看到在原作中輔助圖形都是以同樣的圓潤圖形為主的，這里就體現了風格的一致性。
比如對照看看MBE的圖標風格，他的輔助圖形跟主圖形一樣，都是比較圓潤可愛的，這樣看起來整體的風格更加統一和諧。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
圖標是任何設計系統不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現快速導航，解決語言障礙，最終提升用戶體驗。
圖標作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業的圖標。
最小的圖標大小通常是12 x 12px。以這個尺寸為基礎，行業標準中大多數其他尺寸只是通過將之前的尺寸翻倍而產生的。
重要提示：當你設計圖標時，重要的是要按100%顯示的比例去設計，使圖標完美像素并放大像素塊查看準確性。
完美像素圖標在屏幕上能呈現尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應性和適配更多設備是非常重要的。
1) 像素網格對齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。
2)完美角度
有角度的線更模糊。創建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。
3)邊緣清晰
直線必須占據其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發生。比如條形碼這個例子來說，我故意使圖標內的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應用相同的屬性。
為什么它如此重要?一致性是UI/UX設計的關鍵原則。一個可用和用戶友好的設計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也適用于圖標的設計和使用。有些圖標的一側可能較重。試著調整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調整突出顯示的圖標。
（彩云注：這個原則很多人應該都知道，但我發現也是在整套圖標的設計中最容易出現的問題，當把圖標匯總在一起的時候，這個問題尤其需要重視。）
我們經常在設計軟件中使用中心對齊，這種方法沒有錯。但當涉及到細節時，比如圖標設計，我們需要相信自己的眼睛，打破數學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
我打賭你已經猜到我們指的是KISS原則。這一原則背后的思想是，大多數系統在保持簡單的情況下工作得最好。用戶越容易理解某樣東西并與之互動，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何適用于圖標設計?
1）別使用文字
文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。
2）不要過度設計
不必要的復雜性阻礙了合理的表達，應該避免。過載的設計會將用戶體驗變成一場噩夢。
3）避免不必要的元素
只要確保每個圖標在整體環境中是可理解和清晰的就行。（彩云注：比如已經是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）
重要提示：在圖標設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優秀的圖標應清晰易懂。
圖標規范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創建了一個框架來設計圖標。但是，這個規則非常靈活，只是作為參考，方便圖標的設計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！
框架是設計的“容器”?？蚣芤幏读艘粋€統一的范圍來設計圖標，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設計中統一圖標尺寸，我們應該將它們放置在大小始終相同的框架中。
2)輸出
框架內的圖標與視覺中心對齊，這經常被開發人員忽略，因為他們經常根據實際的中心來調整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關重要的，當你按這個框架輸出圖標時，能保證視覺設計時想要的視覺中心。
3)效率
如果使用Figma，可以通過創建組件來節省時間?？梢允褂脤嵗焖俚貙⒁粋€圖標替換為另一個圖標。
如果你要打算做圖標資源庫的話。要想到當設計師在庫中搜索圖標時，會遇到哪些挑戰?他們的痛點是什么?他們的需求是什么?要回答這些問題，請設身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內花卉，植物商店等。
2）展示關聯圖標
例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。
3）使用標簽
用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優雅#浪漫
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
我個人的選擇是使用SVG圖標，因為它可以節省很多時間。但是，一定要小心縮小復雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
關于 Big Sur 的新圖標的討論很多，很多都在激烈爭論。人們對蘋果公司沒有將完全扁平設計引入 Mac 感到松了一口氣，但分歧并未停止。有些人認為這引領一種新的圖標表現方式，而有些人則認為這是丑到了天際。
但蘋果的設計就是這樣，不管你你喜不喜歡，過一段時間他總會流行起來。就像iPhone11剛面世時，背面的攝像頭組被無數人吐槽一樣，而現在這個設計已經成了高端機的標板。
大家還能想起來UI扁平化設計已經流行了多少年了嗎？
從2013年6月11日蘋果發布iOS7算起，現在已經將近8年了，這8年時間扁平化像颶風一般席卷了整個UI設計圈，一夜間幾乎所有的APP UI都被拍扁了。
其中以Instagram的換標作為扁平盛行時代的里程碑
但扁平化設計的確已經一統江湖太久了，人們似乎已經有點厭倦了。其實設計風格就是這樣，并沒有絕對的好與不好，只要審美不疲勞，就可以繼續流行下去，至于流行多久我們經常會用一個詞去形容---耐看度。
扁平化帶給我們的是畫面的輕盈和設計的高效率，但是缺點也是明顯的，場景表現過于單一的問題，設計感體現較為有限，于是很多設計師都在嘗試用新的設計風格替代或者進化現在的扁平化設計風格，今天我們就來探討一下新擬物背景下3D與平面的結合設計，能在UI中擦出什么樣的火花。
2014年我的作品-Cache
https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html
現在這樣的風格會被我們稱之為重度擬物風格，他不好看了？技術落后了嗎？當然不是！只是目前不流行了！
他的特點是強調光影對比與物理質感，色彩都會比較偏“暗”，而且伴隨設計的往往是難和慢！刻畫一個細節需要很久，在強調設計效率組件化的今天，這種費時又難學的設計方法必然不會成為主流。
當前的UI流行趨勢是強調高飽和的色彩搭配（在沒有光影細節之下也只有色彩可以玩了），這種風格明顯也不符合趨勢，被“淘汰”也就難免了。
從設計角度上解析，圖標主要是由四方面構成：構圖+光影+色彩+紋理
而擬物風格圖標在這四方面更加強調構圖、光影和紋理，而色彩則是更多去搭配紋理質感，所以你看到多數擬物風格圖標在質感上很棒，但是色彩卻沒有那么豐富。
說到新的擬物風格，這只是一個概念，也有稱之為輕擬物，輕偏平，這里并沒有通用的稱呼和預設的設計方法，一切的UI設計風格都是為產品本身服務，如果新的設計風格能讓產品整體體驗得到“提升”，哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的。
所以當下如果你的產品中想要吸引目光就要有點與眾不同的東西，要么是獨門的功能，要么就是吸晴的設計。
顯然扁平的彩色圖標現在已經達不到這個效果了，而以前的擬物又顯得有點過時，在這種時代背景下，新的風格必然就會被碰撞出來。
于是乎我們就會看到以下的一些大廠“創新”，你不止能看到輕擬物設計，還能看到“實物”設計......
不得不說，各位設計師們還真是拼了...
“哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的?！睕]毛??！各位加油！
當然蘋果BigSur帶給我們的圖標設計創新更加有趨勢意義，這種3D+平面的設計組合方法更加能給我們一些設計啟迪和思考，并且這種3D圖標與之前的擬物風格有著明顯的視覺區別
我用3D重構了一個計算器icon，以此為例來進行分解，如下：
與2D設計方法設計圖標一致，都是先勾畫圖形（建模），然后填色、加材質和燈光，但不同的是在3D環境下，這一切都比2D環境下簡單了，而且視覺效果更佳，整體畫面感更佳立體，質感更加飽滿，并且根據渲染器的參數調節和材質質感的不同，即使是在同一模型下，也能制造出很多種不同的視覺體驗。
圖標背板的選擇上，由于選擇了3D作為主體表現，3D背板過于搶視線，圖標為了突出主體而非背景，建議使用2D平面背板與3D前景圖標進行結合。
3D設計圖標的確有一些天然的優勢，特別是在質感和光感的表達準確度上，是絕對超過2D的。
但是2D圖標在一些風格的設計也是很難替代的，比如線性圖標和漸變風格圖標。
3D設計的確可以提升UI整體的視覺氛圍，并且現在在一些APP中已經可以看到小范圍3D案例了（比如支付寶），但是多是以插畫的形式出現，其實與產品UI還是有一定距離的。
未來3D設計一定會是UI中大展身手，但是目前的常見的3D設計軟件實在是太龐大了，我與許多3D行業的同行聊天的時候，大家普遍的認知是現在的3D軟件（包括C4D）的實際最佳場景依然是動畫設計，UI的中的3D屬于非常輕量級的，用現在主流的3D設計軟件做UI應用案例，有點用巡航導彈打蚊子的感覺，而且這個蚊子還是距離一米以內。這有點像當年的PS來做UI，雖然可以完成但是效率不高，學習曲線也高，于是Sketch和Figma這樣的產品順理成章的取代了PS在UI界的地位。
當然趨勢不可避免，效率也會提升，且方法總是有的，降低門檻，提升效率一直是我們的追求！
原文地址：站酷
作者：殘酷de樂章
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多產品經理和設計師在設計 B 端產品界面的時候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設計原則，幫助大家從容應對界面設計，不再不知所措。
Dashboard 頁通常作為產品的首頁出現，產品內各種重要的數據和信息都會展現在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數據，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產品團隊也可以通過 Dashboard 頁，向用戶傳遞產品迭代、運營活動等內容。
模塊獨立
Dashboard 是由承載不同內容的卡片組成的，每塊卡片的內容都要獨立，不該交叉。
有效統計
Dashboard 上所呈現的數據最重要的就是該數據是否為用戶真實所需，如果統計數據不對用戶產生任何價值，那還不如不統計，否則會干擾用戶。
短路徑導航
了解用戶需要使用 Dashboard 的核心目標，為用戶通過 Dashboard 達到數據詳情頁提供最短的路徑導航。
使用場景
將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶的工作效率。
核心功能
核心統計數據、待辦任務、快捷入口、通知公告等。
設計建議
使用場景
當新用戶第一次使用產品時，為了減少用戶的困難和快速完成用戶的任務，新手引導頁可以將核心操作鏈路展現給用戶。
核心功能
產品介紹、核心功能使用手冊、相關內容指引。
設計建議
使用場景
監控頁是數據可視化頁面中的一種，它通過一系列對數據高度概括的圖表來展現系統的核心指標。指標監控頁的使用者通常是管理者（即決策者），他們需要看到系統整體的運行狀態，監控全局數據，從而調整自己的決策。
核心功能
關鍵指標統計。
設計建議
使用場景
分析頁也是數據可視化頁面中的一種，它通過對系統多維度的詳細分析來展示系統的情況，從而使使用者可以發現問題，并盡早找出解決辦法。監控頁重在總覽，而分析頁重在明細，因此，分析頁的使用者通常是執行者。
核心功能
關鍵指標明細分析。
設計建議
表格頁可以處理大量的數據條目，同時可以導航至對應數據的詳情頁。在表格頁中，用戶可以查詢自己所需要的數據條目，以及對比數據條目、新增數據條目、刪除數據條目等。
模塊清晰
表格頁通常由查詢區、按鈕區、表格區、分頁器等模塊組成，要保證模塊間層次合理與清晰。
數據格式
表格頁中最大的模塊為表格區，該區域由列組成，列由數據構成，列中的數據格式展現要符合業務及用戶的需求，例如“星期三”不能表現成“星期 3”。
數據對齊
對齊方式合理的數據，有利于用戶定位數據、分析數據。通常數據對齊方式為數值右對齊，文本左對齊，特殊情況居中對齊。
全表格頁是最常見的產品界面，全表格頁主要由篩選條件、按鈕區、表格區、分頁器組成。表格區是表格頁中的主角，當界面數據只需要一張表呈現的時候，使用全表格頁。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側的樹來幫助用戶導航。
核心功能
導航樹、多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數據的詳情。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
折疊表格頁的出現通常是頁面上表格的信息需要分組，每一張表格展現一類信息。
核心功能
分組、操作區、表格區、分頁器。
設計建議
表單頁是用于信息添加和錄入的頁面類型，用戶根據系統的要求將必填字段信息填寫完成，從而提交給系統，由系統接收并輸出信息。
控件合理
通過選擇合理的數據錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數據錄入的任務。
明確好用
表單頁面中，每個表單項都要做到自身體驗的明確與好用，例如針對一些有通用值的表單項建議設置默認值，針對必填項要明確標明，針對表單項標題、錯誤提示要明確傳達含義。
清晰反饋
表單錄入完后，允許用戶進行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。
使用場景
表單項較少，表單信息直接平展即可，表單錄入任務簡單且快速。
核心功能
表單項、填寫說明、操作按鈕區。
設計建議
使用場景
高級表單頁通常需要用戶填寫大量的信息，這樣大型而復雜的數據錄入任務需要被拆解為多個部分進行。
核心功能
分組/卡片分組、表單項、操作按鈕區。
設計建議
使用場景
當表單填寫有相應的步驟順序時，采用分步驟表單較為合適。
核心功能
步驟條、表單項、操作按鈕區。
設計建議
使用場景
當表單塊歸屬不同的分類時，需要使用帶樹表單頁去處理。
核心功能
導航樹、表單項、操作按鈕區。
設計建議
詳情頁的作用是向用戶展示一個對象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時允許對詳情頁整體的數據或某部分數據發起編輯等操作。
層次分明
針對信息較少的詳情，平鋪展示即可；針對信息量大的詳情，需進行合理組織，保證層級分明。
結構相近
針對詳情信息的模塊化組織，要求盡量模塊的結構相似，減少復雜性，降低用戶的理解成本。
使用場景
基礎詳情頁信息量較少，信息復雜度低，直接平鋪展示即可。
核心功能
詳情信息。
設計建議
使用場景
高級詳情頁需要展示的內容量較大，且復雜度高，需要拆分為多組來幫助用戶瀏覽信息。
核心功能
卡片、分組、詳情信息。
設計建議
圖
使用場景
詳情頁中有部分字段由于業務需要，會進行修改。
核心功能
詳情信息、可編輯信息。
設計建議
我們如果能做到對 B 端通用型界面了然于胸，那么在面對用戶需求時才能從容應對，舉一反三。不斷總結和抽象，是我們應對各種需求的不二法寶。
文章來源：優設網 作者：知果日記
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.skdbbs.com