UI界面設(shè)計(jì)

如何設(shè)計(jì)好ui的細(xì)節(jié)——角標(biāo)？

4278

在各類產(chǎn)品中我們都不難見到角標(biāo)的身影，一般出現(xiàn)在列表、banner和各種推薦位中。其主要目的是為了吸引用戶的注意力，提示用戶關(guān)注該出商品或重要信息，為產(chǎn)品想要推的內(nèi)容提高曝光度和流量，位置各有不同，設(shè)計(jì)形式也越來越多樣。

我之前在給公司產(chǎn)品的課程頁列表頁設(shè)計(jì)角標(biāo)的時(shí)候，一開始覺得這個(gè)需求很簡(jiǎn)單，沒有認(rèn)真全面的考慮，導(dǎo)致后期角標(biāo)的位置和顏色反復(fù)修改了好幾遍。后來總結(jié)了教訓(xùn)才發(fā)現(xiàn)，一個(gè)小小的角標(biāo)在設(shè)計(jì)的時(shí)候也需要做不少考慮，那么角標(biāo)的設(shè)計(jì)都需要從哪些方面考慮呢？下面就從樣式、顏色、形狀和位置四個(gè)方面來分析一下，到底該怎么選擇使用角標(biāo)吧。

表現(xiàn)形式

想要設(shè)計(jì)一個(gè)好的角標(biāo)，我們首先要知道它的三大組成元素：圖標(biāo)、色塊、文字。在設(shè)計(jì)時(shí)我們可以將這三個(gè)元素組合產(chǎn)生三種表現(xiàn)形式，即圖標(biāo)+色塊、文字+色塊、圖標(biāo)+色塊+文字。

1.icon+色塊

icon和色塊的這種組合形式比較美觀，人們?cè)陂喿x瀏覽的時(shí)候很容易被圖形和圖片吸引。因?yàn)槲覀兇竽X處理圖片信息的速度要比處理文字信息快很多，舉個(gè)例子：一個(gè)蘋果的輪廓圖形和“蘋果”這兩個(gè)文字對(duì)比，輪廓圖能讓我們更快地意識(shí)到這是蘋果。

因此這種樣式對(duì)icon的造型能力要求也比較高。還有一點(diǎn)需要注意的是，這種樣式適合具象的，或者有大眾認(rèn)知基礎(chǔ)的圖形。比如像火、鉆石和王冠之類的普遍易懂的，如果是比較獨(dú)特和抽象的，大家不熟悉的信息，用這種樣式就容易表達(dá)不清楚。

比如上圖蜻蜓FM的兩個(gè)角標(biāo)，一個(gè)是金色的皇冠，這個(gè)icon和蜻蜓FM的SVIP超級(jí)會(huì)員icon形狀是一樣的，所以很容易理解。

第二個(gè)鉆石的icon，因?yàn)殂@石本身的含義里就有昂貴、尊貴、權(quán)利的意思，而且現(xiàn)在很多產(chǎn)品都會(huì)使用鉆石的圖形來表示一些專屬服務(wù)和會(huì)員等級(jí)特權(quán)之類的，比如QQ黃鉆、紅鉆，銀行的銀卡、金卡和鉆卡等，人們對(duì)鉆石圖形代表的含義已經(jīng)有了普遍共識(shí)，所以只看圖形就能清楚地理解它所代表的含義。

2.文字+色塊

這是最常見的一種樣式，文字的表達(dá)簡(jiǎn)潔清楚、準(zhǔn)確直接，一般不會(huì)產(chǎn)生歧義，經(jīng)常用于表示分類、屬性等。

因?yàn)槲淖直磉_(dá)可以做到準(zhǔn)確清晰，所以抽象的概念，或是本身用圖形很難區(qū)分的東西，可以選擇文字來表達(dá)。

比如視頻網(wǎng)站的獨(dú)播、首播、自制等，這樣的情況用文字來表達(dá)是最直接準(zhǔn)確不會(huì)造成誤解的，可以降低用戶的理解成本。

同時(shí)文字還能承載一些文化上的只能意會(huì)的隱喻，比如下圖的“狠優(yōu)惠”準(zhǔn)確的表達(dá)了信息，同時(shí)“狠”字這種同音字的流行說法具備了兩層含義，只有用文字才能體現(xiàn)出來。

試想一下這里如果換成icon圖形來表達(dá)，就不那么容易了。一是這個(gè)概念比較抽象復(fù)雜，簡(jiǎn)單的圖形不容易把意思表達(dá)清楚；二是即使畫出了這個(gè)圖形，也會(huì)因?yàn)槿狈ζ毡楣沧R(shí)造成理解上的偏差，所以這種情況直接使用文字是最合理的選擇。

另外，文字里還有一種情況是數(shù)字，這種樣式一般出現(xiàn)在各類榜單、排行的展示中，用來凸顯排名，幫助運(yùn)營(yíng)推廣。

3.icon+文字+色塊

這種樣式包括icon、文字和色塊，面積也比較大，使用場(chǎng)景一般是節(jié)日和活動(dòng)，或者是特殊專題。有活動(dòng)專屬的icon加上文字信息，是一個(gè)比較強(qiáng)烈的視覺符號(hào)，就像這個(gè)活動(dòng)的LOGO一樣，突出活動(dòng)推出的內(nèi)容，吸引用戶的注意力。

比如喜馬拉雅“123狂歡節(jié)”和天貓的“618狂歡節(jié)”，兩個(gè)都是節(jié)日的icon加文字信息，在活動(dòng)期間人們?yōu)g覽產(chǎn)品的時(shí)候，幫助更好的突出和區(qū)分活動(dòng)商品。

在選擇角標(biāo)樣式的時(shí)候，我們可以根據(jù)表達(dá)內(nèi)容和使用場(chǎng)景來選擇：

具體的、有普遍共識(shí)的內(nèi)容可以選擇icon來展現(xiàn)，不僅美觀也容易理解。

抽象或者是圖形相近的內(nèi)容，可以選擇文字直接準(zhǔn)確的表達(dá)。

特殊活動(dòng)可以選擇icon+文字一起，組成強(qiáng)視覺符號(hào)突出活動(dòng)商品。

顏色

角標(biāo)顏色的使用其實(shí)沒有特別嚴(yán)格的限制，不過也需要注意兩點(diǎn)：一個(gè)是要與內(nèi)容區(qū)別，選擇能突出適用于不同背景的顏色；二是要選擇和整個(gè)產(chǎn)品風(fēng)格調(diào)性相符的顏色，一般可以從三個(gè)方面考慮顏色的選用。

1.醒目顏色

角標(biāo)的存在重要的一點(diǎn)就是為了吸引用戶注意，所以選擇橙色、黃色、紅色這樣的醒目顏色能快速抓人眼球，突出推薦的產(chǎn)品，這也是最傳統(tǒng)直接的方式，很多產(chǎn)品都選擇了鮮艷醒目的顏色。

2.品牌色

選擇產(chǎn)品的品牌色做角標(biāo)顏色可以突顯品牌感，讓產(chǎn)品保持和諧統(tǒng)一，整體視覺給人感覺很舒適，沒有過多色彩帶來的雜亂感。

網(wǎng)易云音樂的角標(biāo)多選擇了品牌的紅色，既能突出內(nèi)容又讓整體頁面也給人和諧統(tǒng)一的視覺感受。

3.內(nèi)容相關(guān)顏色

人們對(duì)每種顏色都有對(duì)應(yīng)的心理反應(yīng)，這既有自然的因素也有文化的因素，我們?cè)谶x擇顏色的時(shí)候都需要考慮到。不過做起來也不難，因?yàn)榇蠖鄶?shù)顏色都有約定俗稱的含義，比如綠色給人感覺是自然、清新免費(fèi)等，紅色代表熱烈、火爆，金色代表尊貴、金錢、價(jià)值等，只要是按照大眾普遍共識(shí)來選擇就不會(huì)出錯(cuò)。

比如愛奇藝的“VIP”角標(biāo)，為了體現(xiàn)VIP的價(jià)值內(nèi)涵選擇用金色來表現(xiàn)；懶人聽書的“限免”用綠色來表現(xiàn)，這些都是結(jié)合了顏色本身的含義來選擇的，從顏色方面輔助信息的傳達(dá)。

角標(biāo)顏色的選擇可以從鮮艷顏色、品牌色和內(nèi)容相關(guān)顏色三方面來考慮，不管怎么選擇都需要注意，要選在不同的背景上都能突出的顏色，然后是要能與整個(gè)產(chǎn)品的風(fēng)格調(diào)性相符合。

形狀

角標(biāo)的形狀總體來說有三角形、矩形還有異形，根據(jù)不同的元素來選擇適合的形狀。

1.三角形

三角形一般出現(xiàn)在左上角，icon或者文字都可以和三角形組合，而且三角形的面積大小非常適用于icon的顯示，但是文字的話就需要旋轉(zhuǎn)，而且字?jǐn)?shù)一般不超過三個(gè)，不然的話字會(huì)很小影響視覺。

2.矩形

矩形的面積比較適合文字或者icon+文字，純icon的比較少見。矩形對(duì)文字的字?jǐn)?shù)要求沒那么嚴(yán)格，字?jǐn)?shù)多的話一般都會(huì)選擇矩形。而且矩形角標(biāo)還可以加一些圓角和變形，讓整個(gè)樣式變得更加活潑，增加設(shè)計(jì)感。

3.異形

異形的靈活度更高一些，樣式也更加活潑更具設(shè)計(jì)感，文字和icon都可以使用?；顒?dòng)類會(huì)用的比較多一些，不過設(shè)計(jì)感雖然重要，但是也需要注意整體的大小和信息的清晰展現(xiàn)。

位置

角標(biāo)的位置通常是在左上角、右上角和下方，根據(jù)人們“Z”型瀏覽習(xí)慣，這些都是容易引起用戶注意的位置，可以讓人能先看到。在決定角標(biāo)位置的時(shí)候，我們可以從兩方面來考慮。

1.優(yōu)先級(jí)

位置的優(yōu)先級(jí)依次是左上角-右上角-下方。

如果預(yù)計(jì)會(huì)又兩個(gè)角標(biāo)同時(shí)出現(xiàn)就要先考慮好位置的選擇。一般常規(guī)的像是分類、屬性的區(qū)分，這種是屬于長(zhǎng)期存在的，可以放在次一級(jí)的位置。為強(qiáng)運(yùn)營(yíng)屬性的短期狀態(tài)，比如排名、上新、推薦等預(yù)留出最高優(yōu)先級(jí)的位置。