今天說一說APP中的角標。在各類產(chǎn)品中我們都不難見到角標的身影，它出現(xiàn)的位置各有不同，設計形式也越來越多樣。

一般出現(xiàn)在列表、banner和各種推薦位中。其主要目的是為了吸引用戶的注意力，提示用戶關注該商品或重要信息，為要推的內容提高曝光度，帶來流量。

我之前在給產(chǎn)品的課程列表設計角標的時候，一開始覺得很簡單，沒有認真全面的考慮，導致后期角標的位置和顏色反復修改。后來總結了教訓才發(fā)現(xiàn)，一個小小的角標在設計的時候也需要做不少考慮，那么角標的設計都需要從哪些方面考慮呢？小小的角標在設計的時候也需要做不少考慮，那都需要從哪些方面考慮呢？

下面就從樣式、顏色、形狀和位置四個方面來分析一下，到底該怎么選擇使用角標吧。

一.表現(xiàn)形式

想要設計一個好的角標，我們首先要知道它的三大組成元素，它們分別為：圖標、色塊、文字。

在設計時這三個元素組合產(chǎn)生了三種表現(xiàn)形式，即：圖標+色塊；文字+色塊；圖標+色塊+文字。

1.圖標+色塊

圖標和色塊的這種組合形式比較美觀，人們在閱讀瀏覽的時候很容易被圖形和圖片吸引。因為我們大腦處理圖片信息的速度要比處理文字信息快很多，舉個例子：一個蘋果的輪廓圖形和“蘋果”這兩個文字對比，輪廓圖能讓我們更快地意識到這是蘋果。

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

比如上圖蜻蜓FM的兩個角標，一個是金色的皇冠，這個圖標和蜻蜓FM的“SVIP超級會員”圖標，形狀是一樣的，所以很容易理解。

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

2.文字+色塊

文字和色塊的組合是最常見的一種樣式，文字的表達簡潔清楚又準確直接，一般不會產(chǎn)生歧義。所以抽象的概念，或是本身用圖形很難區(qū)分的東西，都會選擇文字來表達，這種形式經(jīng)常用于表示分類、屬性等。

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

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

試想一下這里如果換成圖標圖形來表達，就不那么容易了。一是這個概念比較抽象復雜，簡單的圖形不容易把意思表達清楚；二是即使畫出了這個圖形，也會因為缺乏普遍共識造成理解上的偏差，所以這種情況直接使用文字是最合理的選擇。

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

3.圖標+文字+色塊

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

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

在選擇角標樣式的時候，我們可以根據(jù)表達內容和使用場景來選擇：

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

·抽象或者是圖形相近的內容，可以選擇文字直接準確的表達。

·特殊活動可以選擇icon+文字一起，組成強視覺符號突出活動商品。

二.色彩

角標色彩的使用其實沒有特別嚴格的限制，不過也需要注意兩點：一個是要與背景區(qū)別，選擇能突出適用于不同背景的色彩；二是要選擇和整個產(chǎn)品風格調性相符的色彩，一般可以從：醒目顏色、品牌色和內容相關顏色，三個方面考慮色彩的選用。

1.醒目顏色

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

2.品牌色

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

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

3.內容相關顏色

人們對每種顏色都有對應的心理反應，這既有自然的因素也有文化的因素，我們在選擇顏色的時候都需要考慮到。不過做起來也不難，因為大多數(shù)顏色都有約定俗稱的含義，比如綠色給人感覺是自然、清新免費等，紅色代表熱烈、火爆，金色代表尊貴、金錢、價值等，只要是按照大眾普遍共識來選擇就不會出錯。

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

角標色彩的選擇可以從醒目顏色、品牌色和內容相關顏色三方面來考慮，不管怎么選擇都需要注意，要選在不同的背景上都能突出的顏色，然后是要能與整個產(chǎn)品的風格調性相符合。

三.形狀

角標的形狀總體來說有三角形、矩形還有異形，可以根據(jù)不同的元素和內容來選擇適合的形狀。

1.三角形

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

2.矩形

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

3.異形

異形的靈活度更高一些，樣式也更加活潑更具設計感，文字和icon都可以使用?；顒宇悤玫谋容^多一些，不過設計感雖然重要，但是也需要注意整體的大小和信息的清晰展現(xiàn)。

四.位置

角標的位置通常是在左上角、右上角和下方，根據(jù)人們“Z”型瀏覽習慣，這些都是容易引起用戶注意的位置，可以讓人能先看到。在決定角標位置的時候，我們可以從瀏覽優(yōu)先級和產(chǎn)品內容兩方面來考慮。

1.優(yōu)先級

根據(jù)人們“Z”型瀏覽習慣，位置的優(yōu)先級依次是左上角-右上角-下方。

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

比如荔枝的列表中，把類型放在了下方，左上角的位置留給“今日熱門”“磁性大叔音”這類運營專題。優(yōu)酷的列表中也把類型放在了優(yōu)先級次一級的右上角，把排名放在了最優(yōu)的左上角重點突出。

2.產(chǎn)品內容

選擇位置的時候也需要根據(jù)產(chǎn)品的內容來考慮，盡量避免對關鍵信息的遮擋。

像少年得到的有聲書一樣，書名在上方位置所以“上新”角標就選擇了下面的位置，避開對書名的遮擋。

總結

以上就是我在為課程商品列表頁設計角標時做的總結，雖然只是頁面中一個小小的元素，也需要我們的認真對待從四個方面來考慮：

1.樣式：icon+色塊適合表達具體或有普遍共識的內容；文字+色塊適合表達抽象復雜或圖形相近不好區(qū)分的內容，icon+文字+色塊是強視覺符號適合專題活動、節(jié)日等。

2.顏色：可以選擇醒目的顏色、品牌色和與內容相關顏色，同時不能忽略在各種背景中的突出效果和是否與產(chǎn)品的整體調性相符。

3.形狀：三角形適合icon和三字以內的文字；矩形適合文字及icon+文字，異形比較靈活文字、icon都可以。

4.位置：位置的選擇需要考慮優(yōu)先級和產(chǎn)品內容，優(yōu)先級依次是左上角-右上角-下方，把強運營的角標放在優(yōu)先級更高的位置，另外注意避免遮擋背景的關鍵信息。

原創(chuàng)：焱小玖