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