一般出現(xiàn)在列表、banner和各種推薦位中镰绎。其主要目的是為了吸引用戶的注意力脓斩，提示用戶關(guān)注該商品或重要信息，為要推的內(nèi)容提高曝光度畴栖，帶來流量随静。
下面就從樣式、顏色驶臊、形狀和位置四個(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.圖標(biāo)+色塊
圖標(biāo)和色塊的這種組合形式比較美觀室奏，人們?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è)圖標(biāo)和蜻蜓FM的“SVIP超級(jí)會(huì)員”圖標(biāo)音同，形狀是一樣的词爬，所以很容易理解。
第二個(gè)鉆石的圖標(biāo)权均，因?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)生歧義户辞。所以抽象的概念，或是本身用圖形很難區(qū)分的東西癞谒，都會(huì)選擇文字來表達(dá)底燎，這種形式經(jīng)常用于表示分類、屬性等弹砚。
比如視頻網(wǎng)站的獨(dú)播双仍、首播、自制桌吃，這樣的情況用文字來表達(dá)直接準(zhǔn)確不會(huì)造成誤解朱沃，可以降低用戶的理解成本。
同時(shí)文字還能承載一些文化上的只能意會(huì)的隱喻茅诱，比如下圖的“狠優(yōu)惠”就準(zhǔn)確的表達(dá)了信息为流，“狠”字這種同音字的流行說法具備了兩層含義，只有用文字才能體現(xiàn)出來让簿。
試想一下這里如果換成圖標(biāo)圖形來表達(dá)，就不那么容易了秀睛。一是這個(gè)概念比較抽象復(fù)雜尔当，簡(jiǎn)單的圖形不容易把意思表達(dá)清楚；二是即使畫出了這個(gè)圖形，也會(huì)因?yàn)槿狈ζ毡楣沧R(shí)造成理解上的偏差椭迎，所以這種情況直接使用文字是最合理的選擇皿曲。
另外笛园，文字里還有一種情況是數(shù)字，這種樣式一般出現(xiàn)在各類榜單、排行的展示中续滋，用來凸顯排名，幫助運(yùn)營(yíng)推廣泌绣。
3.圖標(biāo)+文字+色塊
這種樣式包括圖標(biāo)碟摆、文字和色塊，面積也比較大痹升，使用場(chǎng)景一般是節(jié)日和活動(dòng)建炫，或者是特殊專題。有活動(dòng)專屬的圖標(biāo)加上文字信息疼蛾，是一個(gè)比較強(qiáng)烈的視覺符號(hào)肛跌，就像這個(gè)活動(dòng)的LOGO一樣，突出活動(dòng)推出的內(nèi)容察郁，吸引用戶的注意力衍慎。
比如喜馬拉雅“123狂歡節(jié)”和天貓的“618狂歡節(jié)”，兩個(gè)都是節(jié)日的圖標(biāo)加文字信息皮钠，在活動(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è)是要與背景區(qū)別壕鹉，選擇能突出適用于不同背景的色彩剃幌；二是要選擇和整個(gè)產(chǎn)品風(fēng)格調(diào)性相符的色彩，一般可以從：醒目顏色晾浴、品牌色和內(nèi)容相關(guān)顏色负乡，三個(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)容又讓整體頁(yè)面也給人和諧統(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ù)不同的元素和內(nèi)容來選擇適合的形狀躏筏。
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í)候按摘，我們可以從瀏覽優(yōu)先級(jí)和產(chǎn)品內(nèi)容兩方面來考慮包券。
1.優(yōu)先級(jí)
根據(jù)人們“Z”型瀏覽習(xí)慣，位置的優(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í)的位置口柳。
比如荔枝的列表中苹粟，把類型放在了下方，左上角的位置留給“今日熱門”“磁性大叔音”這類運(yùn)營(yíng)專題跃闹。優(yōu)酷的列表中也把類型放在了優(yōu)先級(jí)次一級(jí)的右上角嵌削，把排名放在了最優(yōu)的左上角重點(diǎn)突出毛好。
2.產(chǎn)品內(nèi)容
選擇位置的時(shí)候也需要根據(jù)產(chǎn)品的內(nèi)容來考慮，盡量避免對(duì)關(guān)鍵信息的遮擋苛秕。
像少年得到的有聲書一樣肌访，書名在上方位置所以“上新”角標(biāo)就選擇了下面的位置，避開對(duì)書名的遮擋艇劫。
總結(jié)
雖然只是頁(yè)面中一個(gè)小小的元素吼驶，也需要我們的認(rèn)真對(duì)待從四個(gè)方面來考慮：
1.樣式：icon+色塊適合表達(dá)具體或有普遍共識(shí)的內(nèi)容；文字+色塊適合表達(dá)抽象復(fù)雜或圖形相近不好區(qū)分的內(nèi)容店煞，icon+文字+色塊是強(qiáng)視覺符號(hào)適合專題活動(dòng)蟹演、節(jié)日等。
2.顏色：可以選擇醒目的顏色顷蟀、品牌色和與內(nèi)容相關(guān)顏色酒请，同時(shí)不能忽略在各種背景中的突出效果和是否與產(chǎn)品的整體調(diào)性相符。
3.形狀：三角形適合icon和三字以內(nèi)的文字鸣个；矩形適合文字及icon+文字羞反，異形比較靈活文字、icon都可以毛萌。
4.位置：位置的選擇需要考慮優(yōu)先級(jí)和產(chǎn)品內(nèi)容苟弛，優(yōu)先級(jí)依次是左上角-右上角-下方，把強(qiáng)運(yùn)營(yíng)的角標(biāo)放在優(yōu)先級(jí)更高的位置阁将，另外注意避免遮擋背景的關(guān)鍵信息膏秫。
