最近我在學習使用 Figma，會在社區查找一些大廠的設計系統文件學習，看到一篇微軟 Fluent 系統圖標規范文檔，還挺詳細的。其中，我發現有些小點自己平時很少注意到，并且感覺對設計師定義圖標規范也有一定的幫助，所以結合個人圖標經驗挑選部分內容來翻譯成一篇文章，便于擴展自己的圖標思維。（備注：以下的規范是針對尺寸 24px、線條粗細 1.5px 的圖標）
在前一個版本，Fluent 系統圖標采用了 MDL2 和 Monoline 圖標集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統的發布，我們可以看到 Fluent 系統圖標也進行了比較大版本的優化，感知最大的地方就是圖標變圓潤了。
設計理念有三個準則：熟悉的、友好的、現代的。圖標形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。
規范化的網格，能促進圖標的整體性和統一性，設計師繪制圖形元素時也更有條理性。從 24px 圖標尺寸開始，比較建議使用網格系統，內容安全區域是 20px，周圍有 2px 的內邊距。（留內邊距主要是考慮個別圖標居中分布和體量問題，有些圖標元素會超出安全區域，比如修飾符類型圖形）
基礎形狀是網格的基礎，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關圖標體量上保持一致的視覺比例。
圓形、矩形、正方形圖標體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標尺寸空間?。?
圖標線條應當采用一致的粗細，線條末端采用全圓角。
像素對齊很重要，特別是低分屏設備，圖標可以看起來很清晰。由于線條粗細是 1.5px，需要保證 1px 是對齊像素的，避免內外都出現虛邊。
但在某些特殊場景，為了使圖標體量居中分布，就會出現像素不對齊的情況，比如一條豎線。
Fluent 圖標改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認真打磨圓角的細節，定義了三種圓角數值。大圓角使用在線條直角或鈍角處；當使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細節或銳角處。（確實挺細的，也影響了整體的風格。如果追求統一大圓角的話，可能太偏圓潤風格，更適合娛樂類產品用戶吧）
斷口多存在復合圖標上，斷口間距是 1px。當圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）
修改符應當謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標的右下角。設計師在繪制過程中，修飾符圖形可以超出安全區域，使圖標視覺感官居中分布。
如果已經建立的圖標需要關閉狀態，應當遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標的安全區域。
圖標平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標的區域面積，從而達到平衡的目的。
隨著更多圖標的創建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續才能更好地協作。我們推薦圖標命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。
以上就是 Microsoft Fluent 圖標規范的一些小翻譯總結吧，線條粗細、圓角、居中、體量、平衡、命名等方面還挺多細節可以打磨細化的，希望各位設計師能夠結合業務來仔細琢磨，提煉出屬于自己產品的圖標規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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 界面中，扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。
線性
線性圖標主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調整空間。
面性
面性圖標主要通過剪影的形式來制作抽象的形體，相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感，以達到多種視覺表現的效果。
線面結合
線面結合的圖標既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標則細節更加豐富，如果把控到位，會有更好的視覺效果及信息傳達的效率，也不失趣味性。
擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果，非?？简炘O計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感，能讓用戶快速領會圖標所傳達出的意圖及氣質。
因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現會成為干擾其他信息的存在，游戲類應用中使用的非常普遍（不過多贅述）。在其他類型的應用中，大部分出現在營銷類型的界面，例如專題頁、成就榜、會員中心等。
跟擬物化圖標相比，輕質感就不會有太多復雜的元素，主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感，整體風格偏年輕化，給人輕盈、簡潔及精致的感覺。在設計過程中，請使用干凈且和諧的配色，主要使用在界面較大區域的位置。
不僅僅是頁面背景有毛玻璃風格，圖標的毛玻璃風格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現（網上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現出圖標的質感與神秘感。
除上述這幾種風格的圖標之外，還有例如 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
金剛區作為產品功能架構重要的組成部分，是設計師重點發揮的區域，也是風格切換最為活躍的。而金剛區圖標是最重要的表現對象，設計師在圖標設計上面耗費心力，出現了豐富多樣的視覺表現風格。
體驗了眾多產品之后，黑馬哥為大家精選了金剛區圖標設計最突出的 10 個風格，通過這些案例帶給大家感官體驗層面的更多靈感啟發。
晶白風格是通過白色質感來實現的，通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計，使得更有層次感。
相較于扁平化的圖標設計來說，晶白風格更有層次感和質感，作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外，也會隨著背景或者環境色的變化融入色彩渲染，呈現出更豐富的設計細節。
晶白風格圖標就是通過兩端白色漸變，配合兩端顏色不透明度來進行深淺控制，也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現，靈活性非常高。
磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢，被廣泛運用到視覺設計的眾多領域。在 UI 場景中作為視覺感強化被普遍應用，其中在圖標設計上的表現尤為突出，呈現出了眾多的優秀案例。
金剛區作為產品架構中的重要組成部分，也是更新較為活躍的部分，對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用，也是因為這一類風格具有典型的特點和視覺張力，能夠形成比較大的視覺差異，帶給用戶不錯的感官體驗。
磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現；如果是 PS 和 AI 等沒有背景模糊功能的軟件，則可以通過模糊度結合剪切蒙版來實現。實現的方法很多，大家可以多多嘗試，這是一類比較容易掌握的圖標風格。
圖標設計從寫實到扁平，再到微質感，都在不同的時期進行改變，通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大，在年輕化的趨勢中顯得過于繁瑣，而介于寫實和扁平之間的微質感被深入探索。
微質感的深入可以使得圖標風格突出，質感和層次感強化了圖標的立體空間感，在整個界面中可以形成視覺差異。可以體現出模塊的重要性，也是圖標設計感體現的一種方向。
通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果，多圖層刻畫來強化圖標質感和層次感。
2.5D 也稱之為偽三維，在前兩年非常流行，作為插畫風格延伸出來的，當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子，通過原子的數量分布形成 2.5D 場景。
將 2.5D 風格結合到圖標設計中，可以使得圖標更容易形成立體感，設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合，很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可，設計的駕馭度很高。
2.5D 風格的圖標很容易掌握，只要繪制好基礎原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制，大部分場景都是基于立方體、圓柱體等基礎造型進行變形。
三維類的圖標設計相較于 2.5D 風格來說，空間感和透視角度更加深入，光影的變化更加豐富。圖標設計中的三維立體感強化，對于設計師的要求更高，掌握一個三維軟件需要一定的學習成本。
隨著 C4D 等三維軟件的走熱，掀起了一股學習熱潮，被運用到金剛區圖標設計中，帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果，在界面中的視覺呈現尤為突出，也能帶給用戶更好的感官體驗。
隨著用戶對于感官體驗的升級，風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。
插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。
通常矢量風格的插畫類圖標比較常用，由于圖標占比限制，不合適表現特別繁瑣的插畫風格。可以是微場景的插畫表現，或者是局部元素的插畫表達，這一類圖標風格將會在未來被廣泛運用，以此來提高圖標設計的視覺差異化表達。
立足于品牌做設計，這是設計師需要深入探索的方向，而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中，可以輔助突出產品的品牌感，也能形成設計表達的差異化。
品牌基因化的圖標設計具備一定的特征性，也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中，或者品牌色作為圖標配色點綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標造型設計中；也有結合吉祥物來突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無法提煉，也有提取品牌文化、服務特征、用戶群體特征、行業特征等，從中提煉關聯性的圖形融入圖標設計中，以此來強化品牌感。
品牌作為設計的思考起點，不僅可以輸出差異化的設計作品，也能串聯起整個項目設計的規范。
如果覺得質感一類圖標表現力比較繁瑣，但是又不想只是簡單的線性或者面性圖標，造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。
通過圖形之間疊加豐富圖標造型，疊加部分配色的調節豐富圖標色彩搭配，形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡，帶來不錯的感官體驗。
這一類風格的圖標可以通過布爾運算設計圖形部分，顏色的疊加效果可以通過圖層樣式實現，也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸，大家可以嘗試不同的形式去進行配色，選擇符合主題的圖標配色效果。
微動效運用到圖標設計中尤為普及，特別是在金剛區模塊，可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力，相較于靜態來說更有吸引力，也能帶給用戶更加趣味性的感官體驗。
在金剛區模塊中，動效圖標通常是用于區別特殊功能，或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格，只是動態和靜態的區分，需要個別做動效，形成表現力的差異才能達到重點突出的目的。
作為設計師來說，動效也是需要掌握的基礎技能，可以提高我們的設計表現力，也能將交互動作表達得更清楚。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多產品經理和設計師在設計 B 端產品界面的時候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設計原則，幫助大家從容應對界面設計，不再不知所措。
Dashboard 頁通常作為產品的首頁出現，產品內各種重要的數據和信息都會展現在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數據，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產品團隊也可以通過 Dashboard 頁，向用戶傳遞產品迭代、運營活動等內容。
模塊獨立
Dashboard 是由承載不同內容的卡片組成的，每塊卡片的內容都要獨立，不該交叉。
有效統計
Dashboard 上所呈現的數據最重要的就是該數據是否為用戶真實所需，如果統計數據不對用戶產生任何價值，那還不如不統計，否則會干擾用戶。
短路徑導航
了解用戶需要使用 Dashboard 的核心目標，為用戶通過 Dashboard 達到數據詳情頁提供最短的路徑導航。
使用場景
將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶的工作效率。
核心功能
核心統計數據、待辦任務、快捷入口、通知公告等。
設計建議
使用場景
當新用戶第一次使用產品時，為了減少用戶的困難和快速完成用戶的任務，新手引導頁可以將核心操作鏈路展現給用戶。
核心功能
產品介紹、核心功能使用手冊、相關內容指引。
設計建議
使用場景
監控頁是數據可視化頁面中的一種，它通過一系列對數據高度概括的圖表來展現系統的核心指標。指標監控頁的使用者通常是管理者（即決策者），他們需要看到系統整體的運行狀態，監控全局數據，從而調整自己的決策。
核心功能
關鍵指標統計。
設計建議
使用場景
分析頁也是數據可視化頁面中的一種，它通過對系統多維度的詳細分析來展示系統的情況，從而使使用者可以發現問題，并盡早找出解決辦法。監控頁重在總覽，而分析頁重在明細，因此，分析頁的使用者通常是執行者。
核心功能
關鍵指標明細分析。
設計建議
表格頁可以處理大量的數據條目，同時可以導航至對應數據的詳情頁。在表格頁中，用戶可以查詢自己所需要的數據條目，以及對比數據條目、新增數據條目、刪除數據條目等。
模塊清晰
表格頁通常由查詢區、按鈕區、表格區、分頁器等模塊組成，要保證模塊間層次合理與清晰。
數據格式
表格頁中最大的模塊為表格區，該區域由列組成，列由數據構成，列中的數據格式展現要符合業務及用戶的需求，例如“星期三”不能表現成“星期 3”。
數據對齊
對齊方式合理的數據，有利于用戶定位數據、分析數據。通常數據對齊方式為數值右對齊，文本左對齊，特殊情況居中對齊。
全表格頁是最常見的產品界面，全表格頁主要由篩選條件、按鈕區、表格區、分頁器組成。表格區是表格頁中的主角，當界面數據只需要一張表呈現的時候，使用全表格頁。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側的樹來幫助用戶導航。
核心功能
導航樹、多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數據的詳情。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。
核心功能
多字段篩選、操作區、表格區、分頁器。
設計建議
使用場景
折疊表格頁的出現通常是頁面上表格的信息需要分組，每一張表格展現一類信息。
核心功能
分組、操作區、表格區、分頁器。
設計建議
表單頁是用于信息添加和錄入的頁面類型，用戶根據系統的要求將必填字段信息填寫完成，從而提交給系統，由系統接收并輸出信息。
控件合理
通過選擇合理的數據錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數據錄入的任務。
明確好用
表單頁面中，每個表單項都要做到自身體驗的明確與好用，例如針對一些有通用值的表單項建議設置默認值，針對必填項要明確標明，針對表單項標題、錯誤提示要明確傳達含義。
清晰反饋
表單錄入完后，允許用戶進行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。
使用場景
表單項較少，表單信息直接平展即可，表單錄入任務簡單且快速。
核心功能
表單項、填寫說明、操作按鈕區。
設計建議
使用場景
高級表單頁通常需要用戶填寫大量的信息，這樣大型而復雜的數據錄入任務需要被拆解為多個部分進行。
核心功能
分組/卡片分組、表單項、操作按鈕區。
設計建議
使用場景
當表單填寫有相應的步驟順序時，采用分步驟表單較為合適。
核心功能
步驟條、表單項、操作按鈕區。
設計建議
使用場景
當表單塊歸屬不同的分類時，需要使用帶樹表單頁去處理。
核心功能
導航樹、表單項、操作按鈕區。
設計建議
詳情頁的作用是向用戶展示一個對象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時允許對詳情頁整體的數據或某部分數據發起編輯等操作。
層次分明
針對信息較少的詳情，平鋪展示即可；針對信息量大的詳情，需進行合理組織，保證層級分明。
結構相近
針對詳情信息的模塊化組織，要求盡量模塊的結構相似，減少復雜性，降低用戶的理解成本。
使用場景
基礎詳情頁信息量較少，信息復雜度低，直接平鋪展示即可。
核心功能
詳情信息。
設計建議
使用場景
高級詳情頁需要展示的內容量較大，且復雜度高，需要拆分為多組來幫助用戶瀏覽信息。
核心功能
卡片、分組、詳情信息。
設計建議
圖
使用場景
詳情頁中有部分字段由于業務需要，會進行修改。
核心功能
詳情信息、可編輯信息。
設計建議
我們如果能做到對 B 端通用型界面了然于胸，那么在面對用戶需求時才能從容應對，舉一反三。不斷總結和抽象，是我們應對各種需求的不二法寶。
文章來源：優設網 作者：知果日記
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為了保證這篇文章的質量，追波年度的每個作品都超過550贊。在此原則下挑選了828件作品，作品總的大小為2.2G。
相比于《2020年追波設計流行趨勢》多出了328件作品。
從挑選出的828件作品中，排名前十的作品中9件為B端設計，另一件作品也是B端產品C端化的產物。其中：
B端界面設計占比476/828，57.4%；
C端界面設計占比180/828，21.7%；
視頻動效作品占比223/828，26.9%；
明眼人都能看出其中的比重關系，B端設計再次大火，為什么是再次？因為B端設計之前火過，只不過沒有趕上一個好的時代，在C端設計風光的十年里而忽略了其存在。隨著C端市場飽和與數字化的浪潮下，實體經濟、ToB 、ToG的產業再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計，相信今年視頻動效作品占比還會再次提升。
追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。
MetroUI是Windows8的界面設計語言，在2010年至2013年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動To B 、To G 的發展元年，通過幾何色塊（MetroUI）實現B端產品與C端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現B端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性。可以在相關聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。
在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
B端設計的火爆帶動了B端相關模塊設計，更多的人也愿意嘗試B端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是B端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。
B端C化是B端產品設計的視覺表現力慢慢往C端產品設計的視覺靠齊，國內B端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B端產品也開始移動化、智能化，國內主流還是通過小程序、H5來現實B端產品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業流行帶動的。B端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。
當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創建彩色玻璃的4個技法”，完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如B端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在B端產品界面中更加需要簡潔設計，我們最熟悉的Sketch軟件界面已經是相當的簡潔了。回到現實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B端產品視覺設計C端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名UI設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。
幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C端產品微交互和動效已經很成熟了，一部分功勞來自iOS系統原生自帶的效果。B端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。
Mg動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。
MacOS Big Sur系統圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更佳出彩。
P4D是PS加C4D的設計表現技法，也是視覺設計的最后一個環節，通過PS對C4D的渲染圖片進行調色，利用PS的調色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過PS的后期合成來實現，這也是P4D的強大之處。
卡通IP設計最近三四年技術的迭代已經慢慢的走上成熟，卡通IP也從傳統的純PS手繪技法，轉到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態）/AE（動態）調色。
卡通IP火的本質更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通IP已經是互聯網B輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于UI設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
C4D三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優勢。
上一次寫追波流行趨勢還是兩年前了，通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火，隨著最近的互聯網裁員潮大家也慢慢的進入到反思層，客觀的看待和理解這個真實的世界，曾經的流行趨勢也需要慢慢的沉淀下來。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。
6000多字的設計流行趨勢，希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業奉獻微薄之力。
總結
追波年度最佳作品
易讀性（停頓感）
曲線
多彩高斯漸變風
B端界面設計
側邊欄Sidebar
儀表盤設計
流程設計
B端C化
輕代碼化
界面設計技巧
人文氣息
毛玻璃效果
輕擬物
簡潔設計
幾何圖形
暗黑設計
模塊化（組件化）
插畫
幾何插畫
線面插畫
動效
微交互
Mg動畫
三維
三維圖標
輕三維
P4D（PS+C4D）
卡通IP
三維動畫
總結
文章來源：站酷 作者：水手哥
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn