前言
隨著互聯網行業的發展，降本增效成為集體共識，而鼎盛時期的不同職能細分也被逐漸抹平。
對各公司的 UED 而言，UI/UE 設計師的合并也是順其自然的選擇。我們早兩年便就此進行改革，從業務出發去打通了 UI/UE 設計師的職能邊界，并通過“設計系統”、“設計白皮書”、“設計流程指南”等的建立，去保障設計質量的下限。
但隨之而來的是我們發現，對部分 UE 轉 UX 的設計師而言，獨立完成 UI 界面仍具有一定門檻。這背后的原因或有許多：能力有限、缺乏指導、沒有動力等。
所以我們在團隊內部進行了 UI 提升課程的推廣，以幫助 UE 設計師更優雅地完成職業角色的轉型。目前課程進行到一定階段，我們特此將相關內容整理沉淀，與大家進行分享。
在這個系列的文章里，你可以了解到：圖標設計、色彩應用、版式設計、圖像設計、品牌設計、動效設計。
當然，因為初衷是內部使用，我們便默認大家擁有基本共識，所分享的內容也是高效為先的干貨。如果在內容中有不詳盡的“內部梗”，歡迎大家留言提問。
今天帶來的是第一部分，關于圖標設計的相關內容：
圖標在現代設計中具有重要價值，它們可以傳達信息、引起情感共鳴，甚至成為品牌的象征。
作為一種圖形化的標識，它有廣義和狹義兩種概念，廣義的圖標指的是在設計和信息科學領域，任何用于表示概念、對象或操作的圖形符號。廣義的圖標可涵蓋各種設計元素，包括品牌標志、UI 界面中的按鈕、指示符號等。
而狹義的圖標，通常指 UI 設計中的小型圖形符號，這些圖標常用于 APP、網站等數字界面中，用來代表特定的操作或意義。
相比于文字，他們可以幫助用戶更快地識別和理解功能，并且可以起到用戶引導、品牌識別、情感營造等多重作用。
圖標可以根據不同的特征和用途進行分類。
在 UI 界面里，常見的圖標可以分為三類：基礎功能圖標、創意裝飾圖標、應用啟動圖標。
1. 功能圖標
功能圖標在 UI 界面中起著重要的導航、提示和交互作用，使用戶能夠輕松地執行特定的操作或訪問相關功能。
這些圖標具有簡潔性、清晰性和易識別性，旨在明確傳達其所代表的功能，幫助用戶快速識別和理解界面中的操作選項。
2. 創意圖標
創意圖標是指設計師通過獨特的想法、創造力和技巧所創作的具有獨特風格和表現力的圖標。
這些圖標通常不僅用于傳達信息或功能，還具有獨特的美學價值和創意概念，為用戶體驗提供了獨特的視覺識別和情感連接。
3. 應用圖標
應用圖標旨在突出品牌標識、功能或主題，以代表特定產品或品牌。
這些圖標應該清晰且吸引人，并能準確傳達應用目的或品牌風格，以便用戶能夠輕松辨認和記住。
1. 基礎圖標風格
基礎的 UI 圖標風格有三種：線性、面性、線面結合。
在信息傳遞為先的場景，我們通常還是使用基礎風格。因為對于互聯網用戶而言，一些常見的如通知、個人之類的圖標，在這種風格中一般不存在認知壓力。
除了基礎風格之外，圖標的風格也在不斷隨著設計趨勢的變化而變化：
2013-2016：從擬物（Skeuomorphism）到扁平（Flat）
扁平化的開始可以追溯到 2010 年 Window 推出的“Metro”，而關鍵節點是 2013 年 iOS7 的發布，隨之而來的是整個行業從擬物到扁平的大邁進。
在這個年代，圖標設計的同質化顯得較為嚴重。
2016-2020：扁平，但不要太扁平
正如 Apple 官網所寫：“真正的簡單不僅僅是沒有雜亂或去除裝飾。”極致的扁平之后，谷歌提出了 Material Design，將扁平化與輕微的陰影和深度完美結合。
設計師們也開始了一些具有有趣味的新嘗試，卡通（Cartoon）、彩色（Colorful）、半三維（2.5D）是那個年代最流行的設計。
2020-2024：擬物的新解讀
隨著技術的發展，設備顯示屏幕和圖形處理能力不斷提升，大家對于圖像細節開始有了新的追求。
新擬態（Neumorphism）的風格能很好地描述這個階段，而 AIGC 的發展更是大大降低了 3D 圖標的設計成本。毛玻璃（Frosted Glass）、鐳射（Laser）、霓虹（Neon）等豐富而立體的風格開始被陸續應用在圖標設計中。
圖標設計需遵循四大基本原則，這些原則有助于指導圖標設計過程，確保設計出符合用戶需求、清晰簡潔且獨具特色的圖標。
1. 辨識度與一致性
辨識度確保圖標能夠獨特而清晰地傳達信息，而一致性則確保相似圖標之間的統一性和協調性，從而加強整體品牌形象和用戶體驗。
2. 適應性與伸縮拓展
通過設計具備良好適應性和伸縮性的圖標，可以確保圖標在不同平臺、設備和分辨率下都能提供一致的視覺效果。
3. 趣味性與情感聯系
將趣味性和情感聯系融入圖標設計中能夠吸引用戶的注意力并增加互動性，為用戶帶來更加豐富和深刻的體驗，使用戶更傾向于與圖標所代表的產品或服務產生情感連接。
4. 代表性與品牌價值
將代表性和品牌價值融入圖標設計中，可以幫助品牌建立獨特的視覺形象和價值主張，激發用戶的情感共鳴和信任感。
圖標的設計流程可以分為五步：理解需求、設計準備、圖形聯想、草圖繪制、成品定稿。
1. 需求理解
需求分析即如何審題，在這一階段，設計師需要了解圖標的產品功能定位、用戶人群信息、該功能的傳達意圖。確定清晰的需求和目標對后續設計工作至關重要。
視覺審美和可用性有時會存在矛盾，設計師們不能走極端，只顧及可用性而忽視設計美觀的一面，或太追求美的需求而忽略其功能性，需根據產品定位、功能特性、用戶心理模型綜合考量。
2. 設計準備
我們可以通過市場調研、競品分析以及靈感收集，以便理解行業潮流和找到設計靈感。
通過情緒版的制定，我們可以快速確定設計調性和主要特征，以保證圖標的獨特性。
3. 圖形聯想
我們可以使用視覺符號、形狀、顏色等圖形元素來呈現出與目標相關聯的概念，從而實現簡潔而直觀的傳達效果。
但有時候，寓意信息可能是非實體的，很難直接構建對圖形樣式的聯想，所以我們可以想辦法將非實體的概念進行抽象化處理，轉化為一種更具象征性和符號化的形式。通過簡化和提煉核心元素，設計出能夠代表寓意信息的圖形符號。
4. 草圖和概念設計
接著我們就要開始草擬初步的圖標構思，并通過手繪草圖或設計軟件創建初步概念。
這個階段主要是為了捕捉創意想法，嘗試不同的設計方向，以便更快更好地將草圖進行電子化的繪制。
5. 設計制作
在確定最佳概念后，我們就要開始使用專業設計工具制作出高質量的圖標。
在實際繪制時，我們需要遵循三個原則：
適應
單圖標作為一個獨立的視覺個體，與其作為界面中的構成元素，所需要滿足的條件是有差異的，置入真實界面，調整圖形的節奏、疏密，使其與其他圖標的風格一致。
精確
精簡圖形，若存在多種備選草圖，應選擇最為直觀易懂的樣式，必要時針對性強化，命名遵守規范，用精確的文字便于管理與查詢。
從簡
制作時保證參數的簡化，盡量消除小數點以及非整數角度，處理線條以及輪廓時刪除多余的錨點，輸出時應避免出現不必要的裝飾，保持圖標的簡潔。
值得注意的是，因為不同圖形的面積計算方式不同，參數均等并不等于視覺平衡，所以我們在設計中需要注意這一點：
為了保持圖標視覺上的一致性和平衡感，我們也可以先繪制 keyline 來輔助圖標繪制：
同時，我們也需要在繪制時遵循雙數原則，因為 LED 屏顯會對視覺有一定影響：
6. 測試和修改
在設計完圖標后，我們也需要通過一系列測試和評估，以確保圖標在不同情境下能夠有效傳達信息并保持清晰度。
方法包括可識別性測試、適應性測試、視覺層次測試等。
通過這些方法，我們可以更全面評估圖標設計的質量和效果，發現潛在問題并及時加以修正。
1. 設計原則
酷家樂的基礎圖標分為平臺（線性）和工具（面性）兩種，需符合四大原則：
因為平臺型產品圖標更注重表達，工具型產品圖標更注重操作，所以我們在保證圖形輪廓一致的前提下，分別采用了線性和面性的表現：
2. 平臺基礎圖標繪制規范
線粗
平臺基礎圖標默認線粗 10px，部分情況可使用減細 8px/加粗 12px。
畫板 & 圖形尺寸
平臺基礎圖標的畫板尺寸統一為 96*96px，在實際應用中根據需要縮放。
圓角大小
默認直角/接近直角 4px；鈍角 6px；銳角 3px；極端銳角 2px；陰角/橫切面/線為 0px。
外圖形間距
根據不同圖形類型與關系，可分為 6px、8px、12px、20px。
內圖形間距
豎線間距 8px；上下邊距根據需要，可氛圍 8px、12px、16px（相似圖標遵守已有圖標間距）。
2. 工具基礎圖標繪制規范
線粗
工具基礎圖標默認線粗 4px，部分情況可使用減細 3px。
畫板 & 圖形尺寸
工具基礎圖標的畫板尺寸統一為 40*40px，在實際應用中根據需要縮放。
圓角大小
默認直角/接近直角 2px；鈍角 3px；銳角 1px；極端銳角 0.5px；陰角/橫切面/線為 0px。
外圖形間距
根據不同圖形類型與關系，可分為 2px、6px、12px、2.5px。
內圖形間距
豎線間距 8px，上下邊距根據需要，可分為 8px、12px、16px（相似圖標遵守已有圖標間距）。
最后的一些小 TIPS：
- 制定一套新的圖標庫，不著急先定義規范，先從幾個典型圖標開始。
- 復雜含義的內容抽象成圖標很難，有時可以借助其他手段如用戶調研、可用性測試等。
- 有時圖文配合可以加快用戶的識別效率，圖標的另一個作用是輔助識別。
- 像素！像素！像素！圖標設計也要有數字秩序，不要搞怪！
- 不僅在圖標庫里看著舒服，也到實際的場景中，試試不同情況的展示效果。
- 當下滿意于自己的產出成果，往往第二天就會有全然不同的感受。多回溯，多嘗試。
- 別看 UI 老炮們打開 Sketch 就是干，殊不知這背后是成千上萬臨摹創作的累積。
- Figma 很好，但畫圖標還是 Sketch，這是下限。正兒八經的學習還得從 PS/AI 開始，它們決定上限。
- MD 圖標庫已有 1000+圖標，羅馬已然建成。但希望大家把技能握在掌心，不要拿來吧你。
歡迎關注作者微信公眾號：「群核科技用戶體驗設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 7 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓