“界面中存在的每個(gè)元素都是有意義的?！边@是我在設(shè)計(jì)產(chǎn)品時(shí)的一致看法。

小到標(biāo)點(diǎn)符號(hào)，分界線，大小如圖標(biāo)，圖片，字段，必須有其存在的原因。

那么產(chǎn)品設(shè)計(jì)中真正高質(zhì)量的圖標(biāo)是什么？有什么真正的價(jià)值觀？

當(dāng)我考慮產(chǎn)品的視覺(jué)方面時(shí)，以下關(guān)于這一點(diǎn)的總結(jié)是對(duì)圖標(biāo)的幾點(diǎn)調(diào)查：

裝飾

表現(xiàn)

有趣的

產(chǎn)品公告

1.裝飾

裝飾，也稱為修飾，是指用圖標(biāo)修飾頁(yè)面以使頁(yè)面看起來(lái)更飽滿。同時(shí)，通過(guò)圖標(biāo)增加頁(yè)面的分層性，從而可以區(qū)分頁(yè)面的每個(gè)部分的內(nèi)容。

在我看來(lái)，圖標(biāo)的裝飾效果是圖標(biāo)的基本功能，大多數(shù)圖標(biāo)都可以起到裝飾作用。

我們經(jīng)常聽(tīng)到描述視覺(jué)效果的形容詞：“節(jié)奏”，“等級(jí)”，“呼吸”等等。

為了使頁(yè)面具有節(jié)奏感和層次感，除了“白色”，“分割”，“分割”，“對(duì)比”等方法外，圖標(biāo)也是常用手段。

以下是一些例子：

△了解網(wǎng)絡(luò)版

上面的圖片是關(guān)于網(wǎng)頁(yè)版的側(cè)邊欄，灰色圖標(biāo)，不僅起到裝飾的作用，而且不會(huì)引起用戶的注意，因此用戶的注意力可以集中在閱讀內(nèi)容本身上。

△東興198

上圖是東興198的第一個(gè)界面。通過(guò)圖標(biāo)的“存在”或“強(qiáng)度”，整個(gè)頁(yè)面分為三個(gè)部分。

頂部的“買(mǎi)入，賣(mài)出，撤回，持有，檢查”是股票交易中最常見(jiàn)的操作，因此使用文本圖標(biāo)。它不僅起到裝飾作用，而且清晰直接地表達(dá)其意義。這也是許多股票應(yīng)用程序使用的圖標(biāo)樣式。它還可以在第一時(shí)間在視覺(jué)上吸引用戶的注意力。

其次，使用相對(duì)低頻的功能來(lái)操作“新股認(rèn)購(gòu)，資產(chǎn)管理產(chǎn)品，港股，國(guó)債逆回購(gòu)”使用四個(gè)顏色填充，小尺寸的方形圖標(biāo)。

最下面的列表項(xiàng)功能不使用圖標(biāo)，使其與上面的其他功能不同。

在整個(gè)圖標(biāo)和布局的轉(zhuǎn)換過(guò)程中，整個(gè)頁(yè)面都很松散，并且具有強(qiáng)烈的層次感。用戶可以通過(guò)簡(jiǎn)單地使用視覺(jué)指導(dǎo)來(lái)區(qū)分功能。

“一切都太多了，太多了?！?/p>

雖然圖標(biāo)的裝飾效果可以使頁(yè)面具有節(jié)奏感和層次感，但不應(yīng)過(guò)度使用。

例如，在頁(yè)面中使用了空白區(qū)域和分隔線以創(chuàng)建整個(gè)頁(yè)面的分層感。如果您需要使用圖標(biāo)進(jìn)行裝飾，您應(yīng)該說(shuō)出來(lái)。

如果使用圖標(biāo)進(jìn)行裝飾，如何在圖標(biāo)和裝飾物（通常是文本內(nèi)容）之間實(shí)現(xiàn)最佳平衡，如何在不打擾用戶的情況下發(fā)揮裝飾作用，是設(shè)計(jì)圖標(biāo)時(shí)的一個(gè)重要考慮因素。

2.表達(dá)

在我看來(lái)，“觀念”是圖標(biāo)的第二個(gè)功能，它已經(jīng)在“裝飾”的基礎(chǔ)上升華。簡(jiǎn)單來(lái)說(shuō)，圖標(biāo)的含義反映在函數(shù)的解釋中。

經(jīng)過(guò)幾年互聯(lián)網(wǎng)的快速發(fā)展，用戶已形成對(duì)一些圖標(biāo)的一些共識(shí)。在設(shè)計(jì)我們的產(chǎn)品時(shí)我們必須注意，在使用它們時(shí)我們永遠(yuǎn)不應(yīng)該違反規(guī)則。

以下是一些常見(jiàn)的圖標(biāo)：

△常用圖標(biāo)

對(duì)于構(gòu)成用戶心中固有模式的這些圖標(biāo)，我們可以在此基礎(chǔ)上使用轉(zhuǎn)換和創(chuàng)新，但如果我們想要打破用戶的習(xí)慣感知，我們必須謹(jǐn)慎。

以下是我個(gè)人認(rèn)為在表意上完成的幾個(gè)很好的例子：

△QQ音樂(lè)

上圖是QQ音樂(lè)的下載圖標(biāo)。它結(jié)合了“下載”和“錢(qián)”。乍一看，似乎是“付費(fèi)下載”，其含義非常明確。

△XMind Cloud

上圖是xmind移動(dòng)版的編輯頁(yè)面和底部的功能圖標(biāo)。作為大腦地圖軟件的移動(dòng)版本，各種功能并不像社交和電子商務(wù)軟件的功能那樣普遍，因此如何設(shè)計(jì)功能圖標(biāo)更加可測(cè)試，并且必須清晰。當(dāng)我第一次使用xmind移動(dòng)應(yīng)用程序時(shí)，我非?？吹竭@些圖標(biāo)，因?yàn)樗鼈兊谋硪庑问椒浅：?jiǎn)單，圖標(biāo)并不復(fù)雜，簡(jiǎn)單和清晰度的結(jié)合非常好。

想象一下，如果用文本替換上圖中的圖標(biāo)，底部的工具欄將非常擁擠，文本描述不一定比圖標(biāo)更準(zhǔn)確。

3.有趣

有趣也可稱為快樂(lè)，給人以愉悅感的圖標(biāo)可稱為好圖標(biāo)。

如果你快樂(lè)并擁有良好的意識(shí)形態(tài)，那絕對(duì)是一個(gè)偉大的偶像。但是，令人困惑的圖標(biāo)通常不會(huì)給人一種愉悅感。

我們來(lái)看一個(gè)例子。同樣是QQ系列：

△QQ

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

注意消息圖標(biāo)和聯(lián)系人圖標(biāo)，他們的眼睛，但他們會(huì)移動(dòng)，按照您的選擇，并樂(lè)趣。雖然動(dòng)態(tài)圖標(biāo)沒(méi)有眼睛，但圖標(biāo)的形狀有偏差。如果未選中，則整個(gè)圖標(biāo)在形態(tài)上傾向于被選中，這非常有趣。

4.產(chǎn)品介紹

產(chǎn)品推廣，也稱品牌推廣。

在互聯(lián)網(wǎng)發(fā)展的年代，市場(chǎng)上的產(chǎn)品確實(shí)太多，同質(zhì)化非常嚴(yán)重。優(yōu)質(zhì)產(chǎn)品不希望增加自己產(chǎn)品的曝光率，增加用戶的忠誠(chéng)度。品牌，品牌色調(diào)，品牌和品牌價(jià)值越來(lái)越受到公司的重視。作為產(chǎn)品，具有高外觀率的圖標(biāo)也是產(chǎn)品的一部分。

這部分可以從以下兩個(gè)方面看出：

將圖標(biāo)與產(chǎn)品徽標(biāo)結(jié)合使用可增加產(chǎn)品徽標(biāo)的曝光度。

通過(guò)圖標(biāo)色調(diào)來(lái)傳達(dá)產(chǎn)品的色調(diào)，在用戶的心中塑造出產(chǎn)品的獨(dú)特特征。

我們來(lái)看幾個(gè)例子：

△餓了？

△熱健身

△支付寶

△淘寶

在上圖中，幾個(gè)APP直接使用產(chǎn)品的徽標(biāo)作為底部標(biāo)簽的圖標(biāo)。

△餓了？

△美國(guó)集團(tuán)外賣(mài)

△美國(guó)集團(tuán)外賣(mài)

在上圖中，訂購(gòu)界面的購(gòu)物籃，美國(guó)集團(tuán)外賣(mài)的裝載風(fēng)格和默認(rèn)頁(yè)面圖標(biāo)，產(chǎn)品標(biāo)識(shí)被整合到圖標(biāo)設(shè)計(jì)中，圖標(biāo)本身的動(dòng)態(tài)設(shè)計(jì)也非常有趣。膳食或裝載都與品牌有關(guān)。

△一個(gè)

△享受

上面的圖片是我喜歡“One”和“ENJOY”的兩個(gè)應(yīng)用程序。兩個(gè)應(yīng)用程序的UI設(shè)計(jì)一直非常時(shí)尚，圖標(biāo)設(shè)計(jì)也非常有趣，這符合產(chǎn)品的色調(diào)。

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

« 孕產(chǎn)婦和嬰兒產(chǎn)品迎來(lái)了新的春季軟文營(yíng)銷(xiāo)成為最受歡迎的助推器 | 支付寶推出新的社交功能動(dòng)態(tài)被動(dòng)粉末2000 + »