2024-5-28 濤濤
本文共分為4大部分，根據圖標的使用場景，確定圖標的風格，在圖標中融入品牌元素，最終進行自我檢測。
在UI設計中，圖標的使用可以說是占了大壁江山，相信大家都知道圖標的重要性，一個優秀的圖標比語言更吸引眼球更可視化，甚至跨越了語言的障礙，傳遞信息也非常的高效。
以下是我將要分享的流程節點：
根據圖標的使用場景 > 確定圖標的風格 > 在圖標中融入品牌元素 > 最終進行自我檢測
圖標的使用場景
在著手設計圖標之前，你得根據圖標的使用場景去選擇圖標的類型。先來看看圖標的使用場景：
1/ 應用圖標
要在各個APP中脫穎而出，視覺上要夠搶眼；風格上能傳達行業屬性和品牌調性。
2/ 功能入口
作為流量分發的出口，很重要，體量感上要夠重、夠突出。
3/ TAB底部導航
雖然很重要，但常駐底部，可弱化。
4/ 列表流
處于次重點，視覺上次突出。
5/ 網格布局
處于次重點，視覺上次突出。
6/ 標題點綴
處于次重點，視覺上次突出。
7/ 輔助/裝飾
用于輔助裝飾作用，視覺上要最弱。
8/ 活動入口
如果作為一個主推的活動入口，要吸睛。
如上所示，圖標的使用場景大致可分為8大場景，每個場景對圖標都有不同的要求。
· 應用圖標：夠搶眼
· 功能圖標：最突出
· 底部導航：可弱化
· 列表流/網格布局/標題點綴：次突出
· 輔助/裝飾：要最弱
· 活動入口：要吸睛
如何根據場景選擇圖標類型？
首先，無論是從全局還是從單個頁面來看，根據內容由主到次，圖標也要相應的由重到輕；
但是，在具體頁面中也要根據產品和營銷的需要去做具體的調整。
根據產品功能的優先級別或者希望用戶關注的主次，圖標的風格也是：面性圖標>線面圖標>線性圖標。
圖標的風格
從圖標的使用場景可以大致確定我們的圖標類型。這時候心里至少要有個方向，知道我們的圖標體量感是什么樣的。然后，我們要開始著手去設計圖標的風格。當我接觸一些新的設計師時，總是能聽到一些抱怨說： “圖標沒有什么好設計的，長得都一樣。”
其實不然，圖標是有很多風格的。下面我就列舉了38種圖標風格，給設計師們以靈感和參考。也便于我們在設計時，能盡快的選擇適合自己產品調性的風格。
面性圖標
1/ 剪影圖標
這是市場上比較最常見的一種設計風格，有很多設計風格都是在其基礎上的延伸。
2/ 微漸變圖標
圖標在有色背板之上；白色的漸變增加一些環境色。
3/ 雙色漸變圖標
一般采取鄰近色漸變，絢麗多彩。
4/ 雙色圖標
采取兩種顏色，注意用色比例不要均衡，要有主次。
5/ 不透明度圖標
圖標的少部分色塊調整不透明度，要注意比例不要均衡，要有主次。
6/ 輕質感圖標
比剪影多了些細節。
@Dea_n
7/ 輕擬物圖標
處于擬物和扁平中間，就是這種曖昧的感覺。
8/ 擬物圖標
直觀！真實！辨識度非常高！
9/ 圖片圖標
當圖形不能很好的表達或表達不具吸引力或實物能更好的表達產品調性時，也可以選擇使用實物圖片當作圖標。
10/ 文字圖標
當圖形不能很好的表達其含義或者用戶人群比較小白時，直接使用文字也是一種不錯的選擇。
11/ 圖文圖標
從某種意義上來說辨識度確實會很高。
12/ 折疊圖標
用顏色的細微變化來做出紙張的折疊效果。
13/ 折紙風圖標
用視覺手法模擬折紙的視覺效果。
14/ 折紙陰影圖標
部分圖形銜接處使用少量陰影體現折紙效果。
15/ 插畫圖標
插畫圖標的采用，比較個性化！另外較多的細節，也使其更突出！
16/ 疊加圖標
將一組圖層進行疊加，形成豐富的層次感，視覺表現力比較豐富，一般比較適合應用圖標。
17/ 長投影圖標
曾經也是風靡過的網紅。
18/ 像素圖標
在UI中確實少用，除非要打造出特有或復古的風格。沒有找到合適的例子。
19/ YOGA風格圖標
設計師Yoga自創的一種風格，主要以漸變的穿插和切割為主的一種圖形設計模式，個性鮮明，色彩大膽，是繼MBE風格后的一種新的設計潮流。
20/ 2.5D圖標
比普通圖標更具有沖擊力、比3D圖標設計難度更低，但是也不失立體效果，能為界面增添更多視覺感受。
21/ 低面建模
用色塊來進行二維、三維的裝飾表達。風格很強，很獨特。沒找到合適的產品，大概就是如下的樣子。
22/ 擴大圖標
使用背板對圖標做一些遮擋，保留一些想象的空間和延展性。
23/ 背板的設計
在圖標上玩不出啥花樣了，也可以對背板做一些個性化的設計。
24/ 其他 歡迎大家補充哦～
線性圖標
1/ 傳統線性圖標
先來看看傳統的線性圖標，這也是使用最多的一種圖標類型。隨處可見。
2/ 粗線圖標
較適用于年輕化用戶人群。
@孔晨
3/ 直角圖標
棱角分明，比較硬朗、冷峻，適合工具類、時尚類。
4/ 斷點圖標
形狀拼接處斷點，相比傳統的封閉式，多了些可以品味的細節。
5/ 高光圖標
利用點線來模擬高光的效果，使圖標更豐富。
@孔晨
6/ 中國風圖標
利用中國漢字筆畫而組成的圖標，非常具有傳統手工藝人的氣質，很符合其產品調性。
7/ 一筆速寫圖標
專門從事圖形和圖標設計的設計機構Differantly Studio。其創作者的風格：以一筆速寫的手法繪制圖標，一筆成型、簡潔概括事物最鮮明的特征，頗具創新性和趣味性！
8/ 雙色圖標
利用輔色來豐富圖標，輔色面積占比20%即可，不可太多。
9/ 多色圖標
有時，為了追求一些個性化，也可以突破傳統，慎用。
10/ 插畫圖標
相對比較復雜，當內容很少時，可以考慮此方法，慎用。
線面結合圖標
1/ 線面結合圖標
相較于面和線，線面結合可以打造更多的細節層次感，在視覺上可以作出更多的差異化。
2/ MBE風格圖標
很流行的一種風格，此風格的作者是法國設計師MBE，2015年底他在dribbble上發布了此風格的一系列作品，從線性Q版卡通畫演變而來。配色大膽、明亮、飽和度高、適合低齡兒童類產品。
3/ 微投影圖標
利用同色系來給圖標做一個淺淺的投影效果。MBE的簡化版。
4/ 面性點綴圖標
圖標的少部分采用色塊的形式進行點綴。
5/ 線+輕擬物圖標
詞窮了，不知道取啥名字了，反正就是下面這種形式的，線+輕擬物的趕腳….
在圖標中融入品牌元素
為什么要在圖標中融入品牌元素呢？因為我們大部分的人做的APP都不是用戶量巨大的APP（如微信），我們需要通過融入品牌元素的手段去提升產品的辨識度，增加產品的特色。而微信這種擁有強大用戶量的產品，打造產品的品牌特色已經不是他們的強烈需求，他們會更注重圖標本身的含義。
在圖標中融入品牌元素方法：
1/ 品牌logo的直接應用
在底部導航中，運用品牌Logo作為首頁的圖標。
2/ 品牌名稱的直接使用
在底部導航中，直接運用品牌名稱作為底部tab導航。
3/ 品牌logo風格的延續
在圖標中延續logo的風格，包括顏色、線條、設計手法等等。
4/ 提取品牌logo中的元素
找到品牌logo中的特色元素，融入到其他圖標中。
5/ 提取品牌logo中的色彩
“統一色彩”幾乎是所有設計手法中要達到“統一”的最常見、最簡約的一種方法。
最后進行自我檢測
當我們認真在做設計，而往往太投入而看不到其中的問題，這時候就需要一套既定的標準來去衡量這套圖標是否合格。
我將從以下維度來評判圖標是否合格：
是否具有辨識度？
是否統一？
風格是否符合行業調性？
是否具有品牌特色？
1/ 辨識度
不忘初衷，別忘了圖標的使命感是幫助用戶更好的識別，請不要造成干擾而得不償失。
含義辨識度
要讓你的圖標能被你的用戶所理解。
視覺辨識度
國外有個測試，測試四種樣式的圖標：
實心圖標：白底黑圖，黑底白圖
空心圖標：白底黑圖，黑底白圖
最后得出的結果是：空心圖標的黑底白圖要比其他的圖慢0.17秒，也就是這種圖的視覺辨識度最弱：
2/ 統一性
當做整套圖標時，要復盤一下圖標的統一性。
統一飽滿度
統一色彩飽和度
統一圓角
統一描邊
統一線條末端
3/ 風格
風格就像靈魂一樣，通過視覺表現的手法來傳達自己的特性，讓你的用戶迅速抓住你的產品特征。
比如：
幼兒：給低幼兒童使用的產品，可愛、活潑。
傳統文化：蘊含東方美學的原創好物，融入中國元素，能快速的傳達東方美學。
女性：柔美，較多粉色系，圖標圓潤。
男性：剛硬，較多深色系，圖標方直。
4/ 品牌
風格能讓你的產品擁有自己的性格，打造產品的品牌特色，提升產品的辨識度。讓你的產品在眾多產品中脫穎而出。
常見的方式有：色彩、特殊元素、吉祥物…(詳見第三部分：在圖標中融入品牌元素)
總結
根據圖標的使用場景 > 確定圖標的風格 > 在圖標中融入品牌元素 > 最終進行自我檢測
本篇文章對圖標的設計過程做了一個全局的分析和總結，但是還是有很多東西還沒總結，也說的還不夠透徹，我會爭取下次總結的更好。希望本篇總結能對你有所啟發和幫助，有所不足的地方也歡迎大家的指正。希望能和大家互相分享，互相學習，共同進步。
PS：另外文中用到的案例是我平時保存的素材，現在很多找不到出處了，知道的同學歡迎補充。
藍藍設計(www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
作者：體驗設計桃子
鏈接：https://www.zcool.com.cn/article/ZODQ5OTQ0.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。