淺談小圖標(biāo)的設(shè)計(jì)思考和法則
圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形,它不僅是一種圖形,更是一種標(biāo)識(shí)。本文主要與大家探討關(guān)于小圖標(biāo)的設(shè)計(jì)思考和法則。
什么是圖標(biāo)?
圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形,其中桌面圖標(biāo)是軟件標(biāo)識(shí),界面中的圖標(biāo)是功能標(biāo)識(shí)。它源自于生活中的各種圖形標(biāo)識(shí),是計(jì)算機(jī)應(yīng)用圖形化的重要組成部分。
圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形,它不僅是一種圖形,更是一種標(biāo)識(shí),它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。
圖標(biāo)的設(shè)計(jì)是輔助我們更好的傳達(dá)信息和目標(biāo),所以在一個(gè)界面里面,圖標(biāo)其實(shí)其實(shí)發(fā)揮了相當(dāng)大的作用:
- 首頁(yè)金剛區(qū)入口引導(dǎo);
- 個(gè)人中心選項(xiàng)? ;
- 底部標(biāo)簽功能模塊。
由此可見(jiàn)圖標(biāo)占比確實(shí)蠻大的。
怎么設(shè)計(jì)好這些小圖標(biāo)呢?
先進(jìn)行設(shè)計(jì)思考:
- 產(chǎn)品視覺(jué)風(fēng)格定位(行業(yè)領(lǐng)域);
- 圖標(biāo)具體應(yīng)用的界面;
- 產(chǎn)品面相的用戶人群是怎樣的?
先看一組不用風(fēng)格的圖標(biāo):
卡通風(fēng)格???? 趣味性很強(qiáng)
基礎(chǔ)線性???? 適合用戶群廣
圓滑線面???? 常規(guī)形式(干凈簡(jiǎn)潔)
極簡(jiǎn)???????? 凸顯品質(zhì)和風(fēng)格
看完以上四個(gè)例子,大家應(yīng)該都明白了吧,不同行業(yè)、不同場(chǎng)景、不同用戶,圖標(biāo)的設(shè)計(jì)和表達(dá)方式是不一樣的,所以設(shè)計(jì)前需要思考,你需要表達(dá)的設(shè)計(jì)思路和產(chǎn)品的定位。
圖標(biāo)設(shè)計(jì)的三原則
1. 可識(shí)別性
在設(shè)計(jì)圖標(biāo)時(shí),盡量保證可識(shí)別性的存在,因?yàn)閳D標(biāo)是輔助我們與機(jī)器之間交互的紐帶,能夠更加幫助我們?nèi)ダ斫庑畔?,所以設(shè)計(jì)不要過(guò)于復(fù)雜,提煉元素準(zhǔn)確,不拖泥帶水,言簡(jiǎn)意賅。
2. 視覺(jué)統(tǒng)一
我主要?dú)w納為三點(diǎn):像素?cái)?shù)值統(tǒng)一:2PX/3PX/4PX。
線性和面性要區(qū)分開(kāi)來(lái),視覺(jué)大小要保持一致性,前面兩者很好理解,視覺(jué)大小我給大家演示一下。
說(shuō)一下我最開(kāi)始畫(huà)圖標(biāo)的框架吧:
我之前一直用這種框架來(lái)平衡視覺(jué)大小,后來(lái)發(fā)現(xiàn)有誤差,現(xiàn)在會(huì)規(guī)范一些了。
這種應(yīng)該是最規(guī)范的,也是最嚴(yán)謹(jǐn)?shù)?,你們可以試試?/p>
3. 差異性
中國(guó)的文字很相似,意思也很相近,所以在設(shè)計(jì)圖標(biāo)的時(shí)候,一定要準(zhǔn)確地去理解文字信息,首先在字面意思上找出差異化,然后你在設(shè)計(jì)圖標(biāo)形式的時(shí)候就很容易拉開(kāi)兩者之間的差異性了!
在圖形處理上也要區(qū)分:
圖標(biāo)到底是線性好還是面性好?
經(jīng)常有設(shè)計(jì)師小伙伴在做圖標(biāo)的時(shí)候,就掉坑了,看到很多圖標(biāo),然后就在糾結(jié)到底是做線性還是做面性?
在這里,我給大家分享我自己的理解和設(shè)計(jì)思路:
- 如果你希望你做的圖標(biāo)具有品牌感或是有氣質(zhì)一些的話,我建議還是做線性的,因?yàn)榫€性的圖標(biāo)可以非常好規(guī)范而且能夠做出一定的設(shè)計(jì)基調(diào),能夠彰顯你設(shè)計(jì)師的風(fēng)格和產(chǎn)品氣質(zhì)。
- 如果你希望你做的圖標(biāo)想表達(dá)突出和厚重,還有豐富細(xì)節(jié)或是著重表達(dá)的話,我可以建議你做面性的,因?yàn)槊嫘钥梢园l(fā)揮的修飾程度可以更加廣泛。
現(xiàn)在流行的圖標(biāo)風(fēng)格
線性雙色風(fēng)格(多為對(duì)比色):
線性雙色+局部面性(豐富細(xì)節(jié)化):
線面結(jié)合(很直接):
炫彩風(fēng)格+彌散陰影(用于特定的場(chǎng)景):
多色相微漸變質(zhì)感:
多色相微漸變質(zhì)感+結(jié)構(gòu)虛實(shí)疊?。?/strong>
小結(jié):
設(shè)計(jì)一套完整的圖標(biāo),除了保證視覺(jué)統(tǒng)一性,還要主要風(fēng)格上的不斷嘗試和創(chuàng)新,甚至可以去嘗試三維或是2.5D的形式去設(shè)計(jì),從而更加立體的去表現(xiàn)圖標(biāo)的意思。
總結(jié)
今天很高興能夠有時(shí)間和大家分享一些自己的設(shè)計(jì)思路和方法,希望能夠幫助到大家。圖標(biāo)是一種計(jì)算機(jī)圖形,可以輔助我們了解信息,圖標(biāo)在界面中的應(yīng)用重要是十分廣泛的,在設(shè)計(jì)前應(yīng)考慮到產(chǎn)品視覺(jué)風(fēng)格和圖標(biāo)風(fēng)格。
設(shè)計(jì)中應(yīng)遵循圖標(biāo)設(shè)計(jì)的三個(gè)原則來(lái)設(shè)計(jì),根據(jù)產(chǎn)品和公司需要來(lái)選擇線性還是面性,多嘗試不用風(fēng)格的圖標(biāo)會(huì)有意外的收獲。
作者:MoreDesign ,公眾號(hào): Moredesign ,一名具有設(shè)計(jì)思維和嚴(yán)謹(jǐn)邏輯的視覺(jué)設(shè)計(jì)學(xué)生,喜歡設(shè)計(jì)并且熱愛(ài),善于分析設(shè)計(jì)問(wèn)題,對(duì)設(shè)計(jì)喜歡刨根問(wèn)底。
本文由 @MoreDesign授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖作者提供
金剛區(qū)涉及的內(nèi)容比較多,可以詳細(xì)講一講