前言

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，降本增效成為集體共識(shí)，而鼎盛時(shí)期的不同職能細(xì)分也被逐漸抹平。

對(duì)各公司的 UED 而言，UI/UE 設(shè)計(jì)師的合并也是順其自然的選擇。我們?cè)鐑赡瓯憔痛诉M(jìn)行改革，從業(yè)務(wù)出發(fā)去打通了 UI/UE 設(shè)計(jì)師的職能邊界，并通過(guò)"設(shè)計(jì)系統(tǒng)"、"設(shè)計(jì)白皮書(shū)"、"設(shè)計(jì)流程指南"等的建立，去保障設(shè)計(jì)質(zhì)量的下限。

但隨之而來(lái)的是我們發(fā)現(xiàn)，對(duì)部分 UE 轉(zhuǎn) UX 的設(shè)計(jì)師而言，獨(dú)立完成 UI 界面仍具有一定門(mén)檻。這背后的原因或有許多：能力有限、缺乏指導(dǎo)、沒(méi)有動(dòng)力等。

所以我們?cè)趫F(tuán)隊(duì)內(nèi)部進(jìn)行了 UI 提升課程的推廣，以幫助 UE 設(shè)計(jì)師更優(yōu)雅地完成職業(yè)角色的轉(zhuǎn)型。目前課程進(jìn)行到一定階段，我們特此將相關(guān)內(nèi)容整理沉淀，與大家進(jìn)行分享。

在這個(gè)系列的文章里，你可以了解到：圖標(biāo)設(shè)計(jì)、色彩應(yīng)用、版式設(shè)計(jì)、圖像設(shè)計(jì)、品牌設(shè)計(jì)、動(dòng)效設(shè)計(jì)。

當(dāng)然，因?yàn)槌踔允莾?nèi)部使用，我們便默認(rèn)大家擁有基本共識(shí)，所分享的內(nèi)容也是高效為先的干貨。如果在內(nèi)容中有不詳盡的"內(nèi)部梗"，歡迎大家留言提問(wèn)。

今天帶來(lái)的是第一部分，關(guān)于圖標(biāo)設(shè)計(jì)的相關(guān)內(nèi)容：

一、圖標(biāo)的價(jià)值

圖標(biāo)在現(xiàn)代設(shè)計(jì)中具有重要價(jià)值，它們可以傳達(dá)信息、引起情感共鳴，甚至成為品牌的象征。

作為一種圖形化的標(biāo)識(shí)，它有廣義和狹義兩種概念，廣義的圖標(biāo)指的是在設(shè)計(jì)和信息科學(xué)領(lǐng)域，任何用于表示概念、對(duì)象或操作的圖形符號(hào)。廣義的圖標(biāo)可涵蓋各種設(shè)計(jì)元素，包括品牌標(biāo)志、UI 界面中的按鈕、指示符號(hào)等。

而狹義的圖標(biāo)，通常指 UI 設(shè)計(jì)中的小型圖形符號(hào)，這些圖標(biāo)常用于 APP、網(wǎng)站等數(shù)字界面中，用來(lái)代表特定的操作或意義。

相比于文字，他們可以幫助用戶更快地識(shí)別和理解功能，并且可以起到用戶引導(dǎo)、品牌識(shí)別、情感營(yíng)造等多重作用。

二、圖標(biāo)的分類(lèi)

圖標(biāo)可以根據(jù)不同的特征和用途進(jìn)行分類(lèi)。

在 UI 界面里，常見(jiàn)的圖標(biāo)可以分為三類(lèi)：基礎(chǔ)功能圖標(biāo)、創(chuàng)意裝飾圖標(biāo)、應(yīng)用啟動(dòng)圖標(biāo)。

1. 功能圖標(biāo)

功能圖標(biāo)在 UI 界面中起著重要的導(dǎo)航、提示和交互作用，使用戶能夠輕松地執(zhí)行特定的操作或訪問(wèn)相關(guān)功能。

這些圖標(biāo)具有簡(jiǎn)潔性、清晰性和易識(shí)別性，旨在明確傳達(dá)其所代表的功能，幫助用戶快速識(shí)別和理解界面中的操作選項(xiàng)。

2. 創(chuàng)意圖標(biāo)

創(chuàng)意圖標(biāo)是指設(shè)計(jì)師通過(guò)獨(dú)特的想法、創(chuàng)造力和技巧所創(chuàng)作的具有獨(dú)特風(fēng)格和表現(xiàn)力的圖標(biāo)。

這些圖標(biāo)通常不僅用于傳達(dá)信息或功能，還具有獨(dú)特的美學(xué)價(jià)值和創(chuàng)意概念，為用戶體驗(yàn)提供了獨(dú)特的視覺(jué)識(shí)別和情感連接。

3. 應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)旨在突出品牌標(biāo)識(shí)、功能或主題，以代表特定產(chǎn)品或品牌。

這些圖標(biāo)應(yīng)該清晰且吸引人，并能準(zhǔn)確傳達(dá)應(yīng)用目的或品牌風(fēng)格，以便用戶能夠輕松辨認(rèn)和記住。

三、圖標(biāo)風(fēng)格及趨勢(shì)

1. 基礎(chǔ)圖標(biāo)風(fēng)格

基礎(chǔ)的 UI 圖標(biāo)風(fēng)格有三種：線性、面性、線面結(jié)合。

在信息傳遞為先的場(chǎng)景，我們通常還是使用基礎(chǔ)風(fēng)格。因?yàn)閷?duì)于互聯(lián)網(wǎng)用戶而言，一些常見(jiàn)的如通知、個(gè)人之類(lèi)的圖標(biāo)，在這種風(fēng)格中一般不存在認(rèn)知壓力。

除了基礎(chǔ)風(fēng)格之外，圖標(biāo)的風(fēng)格也在不斷隨著設(shè)計(jì)趨勢(shì)的變化而變化：

2013-2016：從擬物（Skeuomorphism）到扁平（Flat）

扁平化的開(kāi)始可以追溯到 2010 年 Window 推出的"Metro"，而關(guān)鍵節(jié)點(diǎn)是 2013 年 iOS7 的發(fā)布，隨之而來(lái)的是整個(gè)行業(yè)從擬物到扁平的大邁進(jìn)。

在這個(gè)年代，圖標(biāo)設(shè)計(jì)的同質(zhì)化顯得較為嚴(yán)重。

2016-2020：扁平，但不要太扁平

正如 Apple 官網(wǎng)所寫(xiě)："真正的簡(jiǎn)單不僅僅是沒(méi)有雜亂或去除裝飾。"極致的扁平之后，谷歌提出了 Material Design，將扁平化與輕微的陰影和深度完美結(jié)合。

設(shè)計(jì)師們也開(kāi)始了一些具有有趣味的新嘗試，卡通（Cartoon）、彩色（Colorful）、半三維（2.5D）是那個(gè)年代最流行的設(shè)計(jì)。

2020-2024：擬物的新解讀

隨著技術(shù)的發(fā)展，設(shè)備顯示屏幕和圖形處理能力不斷提升，大家對(duì)于圖像細(xì)節(jié)開(kāi)始有了新的追求。

新擬態(tài)（Neumorphism）的風(fēng)格能很好地描述這個(gè)階段，而 AIGC 的發(fā)展更是大大降低了 3D 圖標(biāo)的設(shè)計(jì)成本。毛玻璃（Frosted Glass）、鐳射（Laser）、霓虹（Neon）等豐富而立體的風(fēng)格開(kāi)始被陸續(xù)應(yīng)用在圖標(biāo)設(shè)計(jì)中。

四、圖標(biāo)設(shè)計(jì)的基本原則

圖標(biāo)設(shè)計(jì)需遵循四大基本原則，這些原則有助于指導(dǎo)圖標(biāo)設(shè)計(jì)過(guò)程，確保設(shè)計(jì)出符合用戶需求、清晰簡(jiǎn)潔且獨(dú)具特色的圖標(biāo)。

1. 辨識(shí)度與一致性

辨識(shí)度確保圖標(biāo)能夠獨(dú)特而清晰地傳達(dá)信息，而一致性則確保相似圖標(biāo)之間的統(tǒng)一性和協(xié)調(diào)性，從而加強(qiáng)整體品牌形象和用戶體驗(yàn)。

2. 適應(yīng)性與伸縮拓展

通過(guò)設(shè)計(jì)具備良好適應(yīng)性和伸縮性的圖標(biāo)，可以確保圖標(biāo)在不同平臺(tái)、設(shè)備和分辨率下都能提供一致的視覺(jué)效果。

3. 趣味性與情感聯(lián)系

將趣味性和情感聯(lián)系融入圖標(biāo)設(shè)計(jì)中能夠吸引用戶的注意力并增加互動(dòng)性，為用戶帶來(lái)更加豐富和深刻的體驗(yàn)，使用戶更傾向于與圖標(biāo)所代表的產(chǎn)品或服務(wù)產(chǎn)生情感連接。

4. 代表性與品牌價(jià)值

將代表性和品牌價(jià)值融入圖標(biāo)設(shè)計(jì)中，可以幫助品牌建立獨(dú)特的視覺(jué)形象和價(jià)值主張，激發(fā)用戶的情感共鳴和信任感。

五、圖標(biāo)的設(shè)計(jì)流程

圖標(biāo)的設(shè)計(jì)流程可以分為五步：理解需求、設(shè)計(jì)準(zhǔn)備、圖形聯(lián)想、草圖繪制、成品定稿。

1. 需求理解

需求分析即如何審題，在這一階段，設(shè)計(jì)師需要了解圖標(biāo)的產(chǎn)品功能定位、用戶人群信息、該功能的傳達(dá)意圖。確定清晰的需求和目標(biāo)對(duì)后續(xù)設(shè)計(jì)工作至關(guān)重要。

視覺(jué)審美和可用性有時(shí)會(huì)存在矛盾，設(shè)計(jì)師們不能走極端，只顧及可用性而忽視設(shè)計(jì)美觀的一面，或太追求美的需求而忽略其功能性，需根據(jù)產(chǎn)品定位、功能特性、用戶心理模型綜合考量。

2. 設(shè)計(jì)準(zhǔn)備

我們可以通過(guò)市場(chǎng)調(diào)研、競(jìng)品分析以及靈感收集，以便理解行業(yè)潮流和找到設(shè)計(jì)靈感。

通過(guò)情緒版的制定，我們可以快速確定設(shè)計(jì)調(diào)性和主要特征，以保證圖標(biāo)的獨(dú)特性。

3. 圖形聯(lián)想

我們可以使用視覺(jué)符號(hào)、形狀、顏色等圖形元素來(lái)呈現(xiàn)出與目標(biāo)相關(guān)聯(lián)的概念，從而實(shí)現(xiàn)簡(jiǎn)潔而直觀的傳達(dá)效果。

但有時(shí)候，寓意信息可能是非實(shí)體的，很難直接構(gòu)建對(duì)圖形樣式的聯(lián)想，所以我們可以想辦法將非實(shí)體的概念進(jìn)行抽象化處理，轉(zhuǎn)化為一種更具象征性和符號(hào)化的形式。通過(guò)簡(jiǎn)化和提煉核心元素，設(shè)計(jì)出能夠代表寓意信息的圖形符號(hào)。

4. 草圖和概念設(shè)計(jì)

接著我們就要開(kāi)始草擬初步的圖標(biāo)構(gòu)思，并通過(guò)手繪草圖或設(shè)計(jì)軟件創(chuàng)建初步概念。

這個(gè)階段主要是為了捕捉創(chuàng)意想法，嘗試不同的設(shè)計(jì)方向，以便更快更好地將草圖進(jìn)行電子化的繪制。

5. 設(shè)計(jì)制作

在確定最佳概念后，我們就要開(kāi)始使用專(zhuān)業(yè)設(shè)計(jì)工具制作出高質(zhì)量的圖標(biāo)。

在實(shí)際繪制時(shí)，我們需要遵循三個(gè)原則：

適應(yīng)

單圖標(biāo)作為一個(gè)獨(dú)立的視覺(jué)個(gè)體，與其作為界面中的構(gòu)成元素，所需要滿足的條件是有差異的，置入真實(shí)界面，調(diào)整圖形的節(jié)奏、疏密，使其與其他圖標(biāo)的風(fēng)格一致。

精確

精簡(jiǎn)圖形，若存在多種備選草圖，應(yīng)選擇最為直觀易懂的樣式，必要時(shí)針對(duì)性強(qiáng)化，命名遵守規(guī)范，用精確的文字便于管理與查詢(xún)。

從簡(jiǎn)

制作時(shí)保證參數(shù)的簡(jiǎn)化，盡量消除小數(shù)點(diǎn)以及非整數(shù)角度，處理線條以及輪廓時(shí)刪除多余的錨點(diǎn)，輸出時(shí)應(yīng)避免出現(xiàn)不必要的裝飾，保持圖標(biāo)的簡(jiǎn)潔。

值得注意的是，因?yàn)椴煌瑘D形的面積計(jì)算方式不同，參數(shù)均等并不等于視覺(jué)平衡，所以我們?cè)谠O(shè)計(jì)中需要注意這一點(diǎn)：

為了保持圖標(biāo)視覺(jué)上的一致性和平衡感，我們也可以先繪制 keyline 來(lái)輔助圖標(biāo)繪制：

同時(shí)，我們也需要在繪制時(shí)遵循雙數(shù)原則，因?yàn)?LED 屏顯會(huì)對(duì)視覺(jué)有一定影響：

6. 測(cè)試和修改

在設(shè)計(jì)完圖標(biāo)后，我們也需要通過(guò)一系列測(cè)試和評(píng)估，以確保圖標(biāo)在不同情境下能夠有效傳達(dá)信息并保持清晰度。

方法包括可識(shí)別性測(cè)試、適應(yīng)性測(cè)試、視覺(jué)層次測(cè)試等。

通過(guò)這些方法，我們可以更全面評(píng)估圖標(biāo)設(shè)計(jì)的質(zhì)量和效果，發(fā)現(xiàn)潛在問(wèn)題并及時(shí)加以修正。

六、酷家樂(lè)圖標(biāo)的繪制規(guī)范

1. 設(shè)計(jì)原則

酷家樂(lè)的基礎(chǔ)圖標(biāo)分為平臺(tái)（線性）和工具（面性）兩種，需符合四大原則：

因?yàn)槠脚_(tái)型產(chǎn)品圖標(biāo)更注重表達(dá)，工具型產(chǎn)品圖標(biāo)更注重操作，所以我們?cè)诒ＷC圖形輪廓一致的前提下，分別采用了線性和面性的表現(xiàn)：

2. 平臺(tái)基礎(chǔ)圖標(biāo)繪制規(guī)范

線粗

平臺(tái)基礎(chǔ)圖標(biāo)默認(rèn)線粗 10px，部分情況可使用減細(xì) 8px/加粗 12px。

畫(huà)板 & 圖形尺寸

平臺(tái)基礎(chǔ)圖標(biāo)的畫(huà)板尺寸統(tǒng)一為 96*96px，在實(shí)際應(yīng)用中根據(jù)需要縮放。

圓角大小

默認(rèn)直角/接近直角 4px；鈍角 6px；銳角 3px；極端銳角 2px；陰角/橫切面/線為 0px。

外圖形間距

根據(jù)不同圖形類(lèi)型與關(guān)系，可分為 6px、8px、12px、20px。

內(nèi)圖形間距

豎線間距 8px；上下邊距根據(jù)需要，可氛圍 8px、12px、16px（相似圖標(biāo)遵守已有圖標(biāo)間距）。

2. 工具基礎(chǔ)圖標(biāo)繪制規(guī)范

線粗

工具基礎(chǔ)圖標(biāo)默認(rèn)線粗 4px，部分情況可使用減細(xì) 3px。

畫(huà)板 & 圖形尺寸

工具基礎(chǔ)圖標(biāo)的畫(huà)板尺寸統(tǒng)一為 40*40px，在實(shí)際應(yīng)用中根據(jù)需要縮放。

圓角大小

默認(rèn)直角/接近直角 2px；鈍角 3px；銳角 1px；極端銳角 0.5px；陰角/橫切面/線為 0px。

外圖形間距

根據(jù)不同圖形類(lèi)型與關(guān)系，可分為 2px、6px、12px、2.5px。

內(nèi)圖形間距

豎線間距 8px，上下邊距根據(jù)需要，可分為 8px、12px、16px（相似圖標(biāo)遵守已有圖標(biāo)間距）。

最后的一些小 TIPS：

1. 制定一套新的圖標(biāo)庫(kù)，不著急先定義規(guī)范，先從幾個(gè)典型圖標(biāo)開(kāi)始。
2. 復(fù)雜含義的內(nèi)容抽象成圖標(biāo)很難，有時(shí)可以借助其他手段如用戶調(diào)研、可用性測(cè)試等。
3. 有時(shí)圖文配合可以加快用戶的識(shí)別效率，圖標(biāo)的另一個(gè)作用是輔助識(shí)別。
4. 像素！像素！像素！圖標(biāo)設(shè)計(jì)也要有數(shù)字秩序，不要搞怪！
5. 不僅在圖標(biāo)庫(kù)里看著舒服，也到實(shí)際的場(chǎng)景中，試試不同情況的展示效果。
6. 當(dāng)下滿意于自己的產(chǎn)出成果，往往第二天就會(huì)有全然不同的感受。多回溯，多嘗試。
7. 別看 UI 老炮們打開(kāi) Sketch 就是干，殊不知這背后是成千上萬(wàn)臨摹創(chuàng)作的累積。
8. Figma 很好，但畫(huà)圖標(biāo)還是 Sketch，這是下限。正兒八經(jīng)的學(xué)習(xí)還得從 PS/AI 開(kāi)始，它們決定上限。
9. MD 圖標(biāo)庫(kù)已有 1000+圖標(biāo)，羅馬已然建成。但希望大家把技能握在掌心，不要拿來(lái)吧你。

作者：群核科技用戶體驗(yàn)設(shè)計(jì)