7個(gè)步驟,讓你更好完成圖標(biāo)設(shè)計(jì)

sky
3 評(píng)論 6350 瀏覽 107 收藏 16 分鐘

導(dǎo)讀:圖標(biāo)在UI設(shè)計(jì)師的眼中,就像一顆一顆的螺絲釘,用小小的身軀,連接了產(chǎn)品各個(gè)功能和界面,得以讓整個(gè)功能流程順暢進(jìn)行。這些圖標(biāo),究竟是如何發(fā)揮它的作用的?我們又該如何把它做到美觀耐看呢?一起來文中看一下吧。

一、圖標(biāo)是什么

要做好圖標(biāo),首先我們要知道圖標(biāo)是什么?在一般認(rèn)知里,圖標(biāo)可以定義為一種圖形化的符號(hào)或標(biāo)識(shí),用于幫助我們理解某些復(fù)雜功能或操作,尤其在數(shù)字化領(lǐng)域里,可視化的圖形符號(hào),更利于高效的展示信息和引導(dǎo)人機(jī)操作交互。也有人稱之為icon或eikan。

1. 圖標(biāo)的發(fā)展史

圖標(biāo)的歷史可以上溯到人類文明發(fā)源伊始,最早的象形文字,巖洞壁畫等都可以算作圖標(biāo)的一種,為我們后代研究人類文明產(chǎn)生了珍貴的歷史意義。但今天我們研究的圖標(biāo)主要以計(jì)算機(jī)系統(tǒng)發(fā)明為分界線,看看這短短幾十年間,圖標(biāo)是如何演化的。

80年代的初期圖標(biāo)還是黑白單色

90年代慢慢多了些色彩,形狀也更豐富

到2000年后,隨著顯示技術(shù)的發(fā)展,圖標(biāo)也越來越形象

圖為iOS1-8圖標(biāo)變化

從最早的Xerox Sta系統(tǒng)到最新的Mac os10,再到現(xiàn)在人手一臺(tái)的移動(dòng)智能機(jī),每個(gè)階段都擁有其獨(dú)特的圖標(biāo)風(fēng)格,2010年已經(jīng)到了智能移動(dòng)時(shí)代,拿最知名的iOS系統(tǒng)每個(gè)階段升級(jí),圖標(biāo)的變化來看,也歷經(jīng)了初期的擬物-扁平-微質(zhì)感的好幾個(gè)階段。

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

圖標(biāo)因其良好的辨識(shí)性和無障礙溝通特性,在各種場景下被廣泛應(yīng)用,同樣,因使用場景的不同,圖標(biāo)所代表的意義也不一樣。

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

iOS14桌面應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)指的是我們?cè)O(shè)備界面上的應(yīng)用入口,通常具有較強(qiáng)的品牌特性,可能與logo一致或與其核心功能一致, 如instagram 就是一個(gè)簡化的相機(jī)正視圖,亞馬遜則是一個(gè)購物車形象,國內(nèi)也有不少產(chǎn)品直接使用了能夠代表產(chǎn)品的文字,需要注意的是,界面圖標(biāo)必須遵循對(duì)應(yīng)系統(tǒng)下的尺寸規(guī)范。

華為EMUI 10應(yīng)用圖標(biāo)

2. 功能圖標(biāo)

與應(yīng)用圖標(biāo)不同的是,它主要作為界面中的功能入口,一般為簡潔易辨識(shí)的符號(hào),根據(jù)不同產(chǎn)品調(diào)性,圖標(biāo)風(fēng)格也可以多種多樣,并且不強(qiáng)制必須為標(biāo)準(zhǔn)形狀,異形圖標(biāo)能讓界面更為生動(dòng),整體風(fēng)格的發(fā)揮也有了更多空間。

3. 輔助圖標(biāo)

輔助性圖標(biāo)通常存在于有較多長文字時(shí),搭配作為輔助說明,在UI中,可能還具備一定情感化的作用,在提升用戶接收信息效率的同時(shí)安撫用戶情緒;所以整體可能需要具備更多細(xì)節(jié),作為畫面補(bǔ)充的一部分。

如:缺省圖標(biāo)

4. 與logo的區(qū)別

雖然這兩者特性極為相似,都是圖形化的符號(hào),但logo是為整體品牌服務(wù)的,具備其獨(dú)一無二的專利特性,甚至可以是IP形象或文字;兩者的關(guān)系可以理解為父子。

圖中的圖標(biāo)就很好繼承了logo的特征和風(fēng)格

但有的也只是普通的界面輔助,風(fēng)格和樣式并不一致

三、圖標(biāo)的繪制

能夠繪制出高質(zhì)量的圖標(biāo)是每個(gè)UI設(shè)計(jì)師必備的能力,本次我們以功能圖標(biāo)為例,為大家展示具體的幾個(gè)繪制步驟和要點(diǎn),希望幫大家在細(xì)節(jié)上避開影響圖標(biāo)精致度的一些小細(xì)節(jié)。

第一步:建立圖標(biāo)網(wǎng)格

功能圖標(biāo)因形態(tài)結(jié)構(gòu)各異,難免存在尺寸不一的情況,必須考慮其整體視覺的協(xié)調(diào)一致,最好的辦法就是建立圖標(biāo)網(wǎng)格,也可以稱為圖標(biāo)盒子,當(dāng)圖標(biāo)形態(tài)分別為長、方、圓時(shí),有一個(gè)合理的比例限制。

將常見圖標(biāo)形態(tài)約束在圖標(biāo)盒子內(nèi)

當(dāng)然,網(wǎng)格不是絕對(duì)的,要學(xué)會(huì)靈活運(yùn)用,當(dāng)與個(gè)別圖標(biāo)形態(tài)無法完美匹配時(shí),也不必拘泥,一切以達(dá)到視覺和諧為首要。我通常會(huì)在圖標(biāo)網(wǎng)格外圍預(yù)留一個(gè)安全區(qū)域,可以規(guī)避切圖出現(xiàn)不完整的情況。

第二步:具象功能

有了網(wǎng)格,第二步則需要我們根據(jù)功能,找到與之對(duì)應(yīng)的實(shí)物形象;如筆記本是記錄,電話是通話,時(shí)鐘代表時(shí)間,日歷代表日期等等。

這些功能相對(duì)比較容易找到現(xiàn)實(shí)中的實(shí)物,如果是比較抽象的功能呢?就需要我們發(fā)散思維,找與之相近含義的事物。如隱私功能,隱私是沒有實(shí)物的,但是我們可以通過“隱私”這個(gè)詞延伸:不公開的、隱藏的、鎖起來的、被保護(hù)的,繼續(xù)根據(jù)這些詞延展:就可能是密碼、盾、鎖、遮眼等等。

時(shí)刻記住一點(diǎn):用大眾都能理解的物體形象去表達(dá)。如果用戶看到某個(gè)圖標(biāo)過于復(fù)雜,需要反復(fù)思考它代表的含義,也無法預(yù)測點(diǎn)擊后的結(jié)果,那這個(gè)圖標(biāo)就失去了提效的作用。

第三步:簡化結(jié)構(gòu)

有了功能的具體形象,下一步就是思考如何讓圖標(biāo)變得更簡潔易辨識(shí)。

畢加索《公牛》

畢加索創(chuàng)作《公?!窌r(shí),從初稿到最終成品歷經(jīng)了11個(gè)版本,最后只用寥寥幾條線來勾勒,但我們依然能一眼認(rèn)出牛的形態(tài)。繪制圖標(biāo)也一樣,需要我們思考如何省略無用細(xì)節(jié),化繁為簡,提取他們的主要特征。

第四步:善用布爾運(yùn)算

有了簡化的圖標(biāo)形象,我們接下去應(yīng)該思考如何讓圖標(biāo)變得更為規(guī)范耐看。

如桃心圖標(biāo),就是兩個(gè)簡單圓角矩形組合而成

桃心圖標(biāo),也可以做的更圓潤

不同組合下的布爾運(yùn)算,圖標(biāo)形態(tài)特征也會(huì)不一樣

這一步的訣竅就是盡可能使用基礎(chǔ)圖形去組合拼貼,這樣做出來的圖標(biāo),尤其在適配不同尺寸大小切圖時(shí)不易拉伸變形。

第五步:處理細(xì)節(jié)

統(tǒng)一性

風(fēng)格:線性、面性統(tǒng)一

斷點(diǎn)細(xì)節(jié)一致:平角、圓角

圖標(biāo)氣質(zhì)一致:是圓潤還是尖銳硬朗

隨著功能界面的不斷復(fù)雜化,大家早已不滿足于同一產(chǎn)品或同個(gè)界面中單一的使用面性或線性圖標(biāo),而是搭配使用便于層級(jí)劃分,故而這里只考慮在同一層級(jí)下圖標(biāo)的統(tǒng)一性。

視覺平衡

如圖,三角形置于中間位置時(shí),視覺重量會(huì)偏向左邊,在這個(gè)基礎(chǔ)上,我們就需要做出適當(dāng)調(diào)整,以達(dá)到視覺重量平衡。

一致的視角

當(dāng)你想讓自己的圖標(biāo)變得更加出彩而采用了區(qū)別于正視圖的結(jié)構(gòu),那也一定要確保至少在同等層級(jí)下,這些圖標(biāo)視角是一致的。

第六步:做出差異化

融入品牌DNA

韓國購物App 11 street,就很好的融合了品牌logo的箭頭符號(hào)

功能圖標(biāo)因簡潔通俗,比較容易出現(xiàn)市場同質(zhì)化嚴(yán)重的現(xiàn)象,故而很多App選擇在圖標(biāo)中融入品牌基因,不僅做出差異性,還能提升品牌調(diào)性。

跟隨趨勢(shì)創(chuàng)新

通過對(duì)圖標(biāo)風(fēng)格質(zhì)感的創(chuàng)新表達(dá),讓人眼前一亮。這種方式更多需要你了解當(dāng)下的流行趨勢(shì)和技法,根據(jù)產(chǎn)品的風(fēng)格調(diào)性,對(duì)圖標(biāo)進(jìn)行量身打造。

圖標(biāo)微動(dòng)效

隨著5G時(shí)代來臨,微動(dòng)效也早就出現(xiàn)在了大眾視野,基于圖標(biāo)的微動(dòng)效表達(dá),能讓用戶更快注意到某個(gè)功能并去點(diǎn)擊它,如果你的動(dòng)效還恰好有趣美觀,更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發(fā)揮空間。

第七步:完善圖標(biāo)庫

通常一個(gè)產(chǎn)品的功能圖標(biāo)會(huì)多達(dá)幾十甚至幾百個(gè),如何保證這些圖標(biāo)的統(tǒng)一性需要提前去規(guī)劃。繪制的最后一步,就是在完成一部分圖標(biāo)后,及時(shí)排列比對(duì),確保整體視覺效果的統(tǒng)一;有條件的可以生成圖標(biāo)庫,便于后續(xù)的團(tuán)隊(duì)協(xié)作。

Apple發(fā)布的SF Symbols中圖標(biāo),就劃分了9種寬度和3個(gè)比例尺寸

有了圖標(biāo)庫后,協(xié)作設(shè)計(jì)師做到共用功能時(shí)可以直接調(diào)用;極大提高自己和團(tuán)隊(duì)的效率,并保持整體規(guī)范的一致。

四、最后

圖標(biāo)繪制看似簡單,要做好卻并不容易;UI處處充滿細(xì)節(jié),想要自己的界面更加精致,就不要忽略每一個(gè)可以提升的點(diǎn)。希望今天的這篇文章能夠幫到你。

#專欄作家#

Sky,微信公眾號(hào):我們的設(shè)計(jì)日記(ID:helloskys),人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家,阿里巴巴天貓?jiān)O(shè)計(jì)專家;10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn),對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自?Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 圖標(biāo)設(shè)計(jì)用什么軟件或者app,請(qǐng)問有推薦么?謝謝!

    來自上海 回復(fù)
  2. 對(duì)于圖標(biāo)繪制一直都很不擅長,終于找到了可靠的教程,感謝??!

    來自廣東 回復(fù)
  3. 圖標(biāo)繪制看似簡單,要做好卻并不容易;UI處處充滿細(xì)節(jié),想要自己的界面更加精致,就不要忽略每一個(gè)可以提升的點(diǎn)作者寫的真的太有意思了

    來自云南 回復(fù)