AAA教育

「界面中存在的每一個(gè)元素，都是有意義的?！惯@是我進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)的一貫主張。

小到一個(gè)標(biāo)點(diǎn)符號(hào)、一根分割線，大到一個(gè)圖標(biāo)、一張圖片、一個(gè)字段，都要有其存在的理由。

那么在產(chǎn)品設(shè)計(jì)中出鏡率相當(dāng)之高的圖標(biāo)，有哪些真真切切存在的價(jià)值呢？

下面的幾點(diǎn)總結(jié)，是我在思考產(chǎn)品的視覺(jué)層面時(shí)關(guān)于圖標(biāo)的幾個(gè)考察點(diǎn)：

• 裝飾
• 表意
• 趣味
• 品宣

一. 裝飾

裝飾，也可以稱作修飾，是指通過(guò)圖標(biāo)對(duì)頁(yè)面進(jìn)行潤(rùn)色，使頁(yè)面看上去更加飽滿。同時(shí)，通過(guò)圖標(biāo)增加頁(yè)面的層次感，使頁(yè)面各部分內(nèi)容得以區(qū)分。

圖標(biāo)的裝飾作用在我看來(lái)是圖標(biāo)的基礎(chǔ)作用，絕大部分圖標(biāo)都能起到裝飾的作用。

我們經(jīng)常會(huì)聽(tīng)到一些描述視覺(jué)效果的形容詞：「節(jié)奏感」、「層次感」、「呼吸感」等等。

要使一個(gè)頁(yè)面有節(jié)奏感、層次感，除了可以通過(guò)「留白」、「分割線」、「分割塊」、「對(duì)比」等手法，圖標(biāo)也是一個(gè)常用的手段。

下面看幾個(gè)例子：

△ 知乎網(wǎng)頁(yè)版

上圖是知乎網(wǎng)頁(yè)版的側(cè)邊欄，灰色的圖標(biāo)，既起到了裝飾的作用，又不會(huì)搶奪用戶的注意力，使得用戶的注意力可以聚焦在閱讀內(nèi)容本身。

△ 東興198

上圖是東興198的交易首界面，通過(guò)圖標(biāo)的「有無(wú)」、「強(qiáng)弱」，整個(gè)頁(yè)面被分為了三個(gè)部分。

頂部的「買、賣、撤、持、查」是股票交易中最常用的操作，所以用了文字性圖標(biāo)。既起到了裝飾作用，且表意明確、直接，這也是很多股票類APP會(huì)用到的圖標(biāo)風(fēng)格，視覺(jué)上也能第一時(shí)間引起用戶的注意。

其次使用頻率相對(duì)較低的功能操作「新股申購(gòu)、資管產(chǎn)品、港股通、國(guó)債逆回購(gòu)」用了四種顏色填充、體量感較小的方塊狀圖標(biāo)。

而最底部的列表項(xiàng)功能則未使用圖標(biāo)，使得與上面的其他功能明顯區(qū)分開(kāi)來(lái)。

整個(gè)頁(yè)面通過(guò)圖標(biāo)與布局的變換，松弛有度，層次感強(qiáng)。用戶單純通過(guò)視覺(jué)引導(dǎo)就能很好的對(duì)各部分功能做出區(qū)分。

「凡事有度，過(guò)猶不及」

雖然圖標(biāo)的裝飾作用可以讓頁(yè)面有節(jié)奏感和層次感，但是切忌過(guò)度使用。

比如頁(yè)面中已經(jīng)使用留白和分割線等營(yíng)造出了整個(gè)頁(yè)面的層次感，那么是否需要使用圖標(biāo)進(jìn)行裝飾就當(dāng)兩說(shuō)了。

如果使用圖標(biāo)進(jìn)行裝飾，如何使圖標(biāo)和裝飾對(duì)象（通常是文字內(nèi)容）之間達(dá)到最佳平衡，如何在起到裝飾作用的同時(shí)不會(huì)干擾用戶，是在進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)要認(rèn)真考量的地方。

 

二. 表意

「表意」，在我看來(lái)是圖標(biāo)的第二個(gè)功能，在「裝飾」的基礎(chǔ)上有所升華。直白來(lái)說(shuō)，圖標(biāo)的表意體現(xiàn)在對(duì)于功能的解釋上。

互聯(lián)網(wǎng)經(jīng)過(guò)這幾年的快速發(fā)展，用戶對(duì)于一些圖標(biāo)形成了一些約定俗成的認(rèn)知。我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)時(shí)要做到心中有數(shù)，使用的時(shí)候切忌打破常規(guī)。

下面是幾個(gè)常用的圖標(biāo)：

△ 常用的圖標(biāo)

對(duì)于這些在用戶心智中形成固有模式的圖標(biāo)，我們使用的時(shí)候可以在此基礎(chǔ)上做變形、創(chuàng)新，但如果要打破用戶的習(xí)慣認(rèn)知，一定要謹(jǐn)慎。

下面舉幾個(gè)我個(gè)人認(rèn)為在表意性上做的比較好的例子：

△ QQ音樂(lè)

上圖是QQ音樂(lè)的下載icon，將「下載」和「金錢」相結(jié)合，一眼看上去就知道是「付費(fèi)下載」，表意非常明確。

△ XMind Cloud

上圖是xmind手機(jī)版的編輯頁(yè)面以及底部的功能圖標(biāo)。作為一款手機(jī)版的腦圖軟件，各種功能并不如社交類、電商類軟件的功能常見(jiàn)，所以如何進(jìn)行功能圖標(biāo)的設(shè)計(jì)就比較考驗(yàn)人了，而且必須表意明確。我初次使用xmind手機(jī)APP的時(shí)候，看到這些圖標(biāo)就很喜歡，因?yàn)樗鼈儽硪夥浅Ｖ苯用鞔_，而且圖標(biāo)并不復(fù)雜，簡(jiǎn)潔、明晰結(jié)合的很好。

試想一下，如果把上圖中的圖標(biāo)換成文字，底部的工具欄就會(huì)顯得非常擁擠，并且文字描述并不一定比圖標(biāo)來(lái)的準(zhǔn)確。

 

三. 趣味

趣味，也可以稱作愉悅，能帶給人愉悅感受的圖標(biāo)可以稱得上很好的圖標(biāo)了。

如果愉悅的同時(shí)有很好的表意性，無(wú)疑是一個(gè)極棒的圖標(biāo)了。但話說(shuō)回來(lái)，讓人困惑不解的圖標(biāo)通常情況下也是不能帶給人愉悅感的。

下面看個(gè)例子，同樣是QQ家族：

△ QQ

上面三張圖是QQ底部的三個(gè)標(biāo)簽在選中和未選中狀態(tài)下的表現(xiàn)，可以說(shuō)非?？蓯?ài)了。

注意消息icon和聯(lián)系人icon，它們的眼睛，可是會(huì)動(dòng)的喲，跟著你的選擇而動(dòng)，很好玩。雖然動(dòng)態(tài)icon沒(méi)有眼睛，但是圖標(biāo)的形態(tài)，是有傾向性的，當(dāng)沒(méi)有被選中的時(shí)候，整個(gè)圖標(biāo)在形態(tài)上是傾向被選中的圖標(biāo)的，這就很好玩了。

 

四. 品宣

品宣，也叫品牌宣傳。

互聯(lián)網(wǎng)發(fā)展這么些年，市面上的產(chǎn)品真的太多了，同質(zhì)化也相當(dāng)嚴(yán)重，做的好的產(chǎn)品無(wú)不想著增加自家產(chǎn)品的曝光，增加用戶對(duì)產(chǎn)品的忠誠(chéng)度。品牌塑造，品牌調(diào)性，品牌宣傳，品牌的價(jià)值越來(lái)越被各家企業(yè)所看重。作為一款產(chǎn)品中出鏡率相當(dāng)高的圖標(biāo)，也成了品宣的一部分。

這部分可以從以下兩個(gè)方面來(lái)看：

• 將圖標(biāo)和產(chǎn)品logo結(jié)合，增加產(chǎn)品logo的曝光率。
• 通過(guò)圖標(biāo)調(diào)性傳達(dá)產(chǎn)品調(diào)性，在用戶心智中塑造產(chǎn)品獨(dú)有的特點(diǎn)。

下面來(lái)看幾個(gè)例子：

△ 餓了么

△ 火辣健身

△ 支付寶

△ 淘寶

上圖中幾款A(yù)PP直接將產(chǎn)品的logo用做了底部標(biāo)簽的圖標(biāo)。

△ 餓了么

△ 美團(tuán)外賣

△ 美團(tuán)外賣

上圖中，餓了么點(diǎn)餐界面的購(gòu)物籃子，美團(tuán)外賣的加載樣式和缺省頁(yè)圖標(biāo)，將產(chǎn)品logo融入到圖標(biāo)設(shè)計(jì)中，圖標(biāo)本身的動(dòng)效設(shè)計(jì)也很有意思，用戶的每一次點(diǎn)餐或者加載都是對(duì)品牌的宣傳。

△ 一個(gè)

△ ENJOY

上圖是我喜歡的兩款A(yù)PP「一個(gè)」和「ENJOY」，兩款A(yù)PP的UI設(shè)計(jì)一直都很有格調(diào)，圖標(biāo)設(shè)計(jì)也很有意思，很符合產(chǎn)品的調(diào)性。

以上是我對(duì)于圖標(biāo)設(shè)計(jì)的一些看法，希望對(duì)大家有幫助。