編輯導(dǎo)語：在各種產(chǎn)品中我們都可以看見有一些提示標(biāo)記，常見的新信息提示用紅色的小紅點或者紅色數(shù)字表示，提示人們有未讀信息，其實不同的標(biāo)記也能反映不用的特性；本文作者分享了利用標(biāo)記提升產(chǎn)品設(shè)計的價值的分析，我們一起來看一下。

我最近在設(shè)計的原型中，加了很多標(biāo)記的元素；回顧增加的這些標(biāo)記，發(fā)現(xiàn)它們在功能里面分別起了不小的作用，隱約的給我?guī)砹艘庀氩坏降男◇@喜。

我將這些標(biāo)記的種類及效果整理了一下，分享給讀者，希望大家可以結(jié)合自己產(chǎn)品更好的利用標(biāo)記，達(dá)到想實現(xiàn)的一些目的。

01 沒有標(biāo)記的場景和問題

在一些同類別的產(chǎn)品中，沒有標(biāo)記，則無法重點突出其產(chǎn)品的特性，假設(shè)在小說首頁中，我們想找一本心儀的小說查閱，也會產(chǎn)生眼花繚亂的感覺；而選擇一本小說進(jìn)入詳情頁查閱后，發(fā)現(xiàn)沒有達(dá)到心中的期望值，又回退出重新選擇；既增加了操作步驟，也浪費了我們的時間。

舉個例子：

一般小說首頁顯示的是小說名字和封面，僅通過小說名字，無法幫助用戶了解這本書，例如：X戰(zhàn)警是名字，但有可能是科幻，也有可能是魔幻，也有可能是情感小說；而小說封面，除了標(biāo)明了小說名字之外，還沿用了風(fēng)景、水果、或小說人物等一些插畫，并不能表達(dá)清楚該小說的特性；僅僅只通過這兩個信息能夠向用戶傳達(dá)的信息是有限的，不利于用戶做選擇；同時我們想推廣的產(chǎn)品也會產(chǎn)生曝光度低的現(xiàn)象，達(dá)不到推廣的預(yù)期效果；所以我們需要在小說首頁中，為某一本小說設(shè)定特性標(biāo)記，體現(xiàn)其特性。

有了特性標(biāo)記后，首先的作用就是對小說名字的補充，同時可以吸引用戶注意力，幫助用戶快速了解產(chǎn)品屬性，用戶也可以快速的在相同特性的產(chǎn)品中做對比，從而提升用戶的決斷效率。

如果在小說封面中體現(xiàn)小說的特性，用戶就能直觀的了解到這本小說是免費的還是VIP專享的，又或者是音頻類的；通過這個關(guān)鍵特性，用戶可以根據(jù)自己想要的的類別進(jìn)行選擇，不用非要進(jìn)入到小說詳情頁面中才能了解到小說的特性。

其次也可以作為運營人員的推廣手段，提升想推廣產(chǎn)品的曝光度，從而獲取流量；由此我們可以看出，體現(xiàn)產(chǎn)品的特性是十分重要的。

如圖所示，可以幫助讀者更好的對比沒有特性標(biāo)記和增加特性標(biāo)記效果：

02 什么是標(biāo)記

標(biāo)記主要是以圖標(biāo)的形式展現(xiàn)，通過圖標(biāo)的不同形狀和位置分別體現(xiàn)不同的效果；可以標(biāo)記事務(wù)的屬性和維度，例如將一個產(chǎn)品中不起眼的功能重點突出，或用于消息數(shù)量的提醒；產(chǎn)品經(jīng)理可以在產(chǎn)品設(shè)計中，結(jié)合產(chǎn)品或某個功能想突出的目的，設(shè)計出適合該產(chǎn)品功能的表達(dá)方式。

而標(biāo)記的作用首先是凸顯某個事項，先是吸引用戶，讓用戶通過標(biāo)記就能清晰的了解該產(chǎn)品的內(nèi)容，減少操作和決斷的頻率，也可作為我們推廣的一種方式。

如果沒有標(biāo)記，用戶會經(jīng)?！罢`點”；其實用戶誤點是很正常的，點擊了某個產(chǎn)品但是很快就退出了；在后期的用戶操作統(tǒng)計中就會存在很多停留時間短的情況，說明用戶對該內(nèi)容是不感興趣的。

下面我分別通過凸顯某個事項、提示用戶、刺激用戶來詳細(xì)講解：

1. 凸顯某個事項

凸顯某個事項是通過標(biāo)記的方式凸顯該產(chǎn)品，吸引用戶查看；我拿兩種比較常見的來舉例，分別是凸顯某個功能及體現(xiàn)該功能特性。

凸顯某個功能主要的目的就是在將新增的板塊或者某個板塊里面剛改完版的內(nèi)容進(jìn)行凸顯，如果該功能重要程度較高，通過這種方式吸引用戶點擊，可以達(dá)到讓用戶點擊試用，并了解該板塊新增的內(nèi)容或改版內(nèi)容后的變化。

如果用戶對該產(chǎn)品功能不熟悉的情況下，且上線了新板塊內(nèi)容沒有用特殊手段體現(xiàn)，則容易導(dǎo)致，該板塊更新很久用戶都不知道該板塊存在。

大部分用戶在熟悉的產(chǎn)品中，一般只會注意經(jīng)常使用的功能；如果沒有這種特殊的標(biāo)記來凸顯，在一堆功能中，用戶很少能注意到，就算有用戶注意到也很少有用戶去主動點擊；而我們利用這種標(biāo)記的方式體現(xiàn)后，可以吸引用戶的注意，提高用戶使用并體驗該功能的機率。

如下圖，可參考凸顯某個功能的展現(xiàn)方式：

第一圖是阿里巴巴矢量圖標(biāo)庫官方網(wǎng)站，除了我經(jīng)常使用的功能，在頂部功能區(qū)，第一眼讓我注意到的是“活動”板塊；在黑色背景下用了紫色的NEW字凸顯。想對比其他的功能，讓人第一眼就能注意到。

第二張圖是新榜官網(wǎng)，在排行類別的Tab中新增了“嗶哩嗶哩”的排行，同樣在灰色背景下用了矩形的NEW來凸顯該功能。

體現(xiàn)該功能特性是通過少量的文字表達(dá)清楚產(chǎn)品的類型或賣點。讓用戶清晰的了解該產(chǎn)品的大致信息，舉個例子：在小說封面中間會顯示播放類或音符類小圖標(biāo)，是指該內(nèi)容是音頻內(nèi)容；這種體驗方式減少了用戶操作步驟，可以讓用戶在選擇該小說中，第一眼就能了解內(nèi)容類型。

通過這種方式，還可以通過多標(biāo)記進(jìn)行分類，讓用戶在同標(biāo)記類別中篩選自己感興趣的內(nèi)容。

2. 提示用戶

提示消息數(shù)量最常見的就是微信消息提醒，通常也被稱為角標(biāo)，微信消息中角標(biāo)的應(yīng)用有兩種：

一種場景是有新消息時，且有低于100條的消息未查看，這時微信圖標(biāo)的右上角會顯示圓形紅色的數(shù)字角標(biāo)，數(shù)字代表未讀消息數(shù)量；而打開微信后，未讀好友的頭像右上角也會顯示圓形紅色的數(shù)字角標(biāo)，數(shù)字代表當(dāng)前好友發(fā)送的消息數(shù)量，這是第一種場景。

第二種場景是消息達(dá)到一定數(shù)量時，如：單個好友發(fā)送超過100條未讀消息時，角標(biāo)不在顯示具體的未讀數(shù)量而是用紅色橢圓形中顯示省略號，也就是三個點來表示，代表超過一定數(shù)量的未讀消息；通過這種角標(biāo)的提示，可以直觀的提醒用戶有消息未讀數(shù)量，增加用戶查看的時效性。

還有一種提示效果在小說、視頻產(chǎn)品中應(yīng)用較多，例如視頻中右上角提示的標(biāo)記信息：預(yù)告、VIP、直播中、廣告、付費、超前點播、獨播等，小說中的完結(jié)、更新等信息；通過直觀提示用戶的方式，避免用戶進(jìn)入詳情頁去查看某個內(nèi)容的詳細(xì)介紹后才發(fā)現(xiàn)不是用戶想要的。

3. 刺激用戶

刺激用戶主要是可以通過一些標(biāo)記表達(dá)的信息，來刺激用戶臨時做決策。

最有特點的例子就是視頻或小說中標(biāo)記信息：限時免費；可通過這種方式吸引用戶點擊，刺激用戶在短時間內(nèi)產(chǎn)生購買欲望的緊迫感，提升用戶轉(zhuǎn)化。

03 標(biāo)記的種類及應(yīng)用

根據(jù)標(biāo)記的使用范圍我將標(biāo)記的基本類別大致分成3種，分別是產(chǎn)品類型、產(chǎn)品賣點及活動信息；在實際應(yīng)用中，標(biāo)記的種類也并不局限于這三種，大家可以根據(jù)實際產(chǎn)品訴求制定適合的標(biāo)記。

下面我來說下這三種標(biāo)記：

產(chǎn)品類型主要是用標(biāo)記來主要體現(xiàn)該產(chǎn)品的類型，幫助用戶通快速了解該產(chǎn)品屬性。

產(chǎn)品賣點主要體現(xiàn)可以直接影響用戶購買的賣點，首先體現(xiàn)產(chǎn)品的特色，另一方面則通過運營手段，凸顯出一些吸引用戶的方式。例如：”限時免費”標(biāo)記。

活動信息比較常見的主要是各大產(chǎn)品的購買頁面，很多產(chǎn)品經(jīng)常組合賣，比如購買稻殼會員，購買頁面會有標(biāo)記提示“送愛奇藝年卡”；還有的購買頁面會提示“首月3倍積分”這些都是一些活動信息，這類的信息字?jǐn)?shù)較多，主要表達(dá)活動的一些優(yōu)惠，促使用戶購買。

了解標(biāo)記的種類后，下面我來說一下標(biāo)記的元素及如何應(yīng)用：

標(biāo)記的體現(xiàn)元素有多種，常見的有圖標(biāo)、文字、數(shù)字、顏色等；在實際應(yīng)用中先考慮好要添加標(biāo)記的目的，結(jié)合標(biāo)記的元素，根據(jù)使用目的來調(diào)整元素體現(xiàn)的顏色、形狀、位置；其中圖標(biāo)和顏色可以單獨使用，也可以和其他元素搭配使用，而其他元素都需要搭配來使用。

1. 標(biāo)記元素

• 圖標(biāo)+顏色：圖標(biāo)可以直接表達(dá)內(nèi)容的類型，增加顏色的元素可以凸顯該標(biāo)記；在用戶瀏覽時更容易吸引用戶，一般圖標(biāo)可使用平時常見的圖標(biāo)，可以讓用戶第一眼就知道圖標(biāo)要表達(dá)的意思。
• 文字+顏色：文字可以直接表達(dá)內(nèi)容的特性，例如小說中體現(xiàn)的免費、連載、特價等，直接表達(dá)文字既直接又準(zhǔn)確，主要用于體現(xiàn)該內(nèi)容的分類或特點。
• 數(shù)字+顏色：數(shù)字大多應(yīng)用于消息類，體現(xiàn)未讀消息數(shù)量；還有一種體現(xiàn)形式是應(yīng)用于榜單排名中，可以凸顯排名中的內(nèi)容或相關(guān)產(chǎn)品，可以促進(jìn)用戶查看。
• 文字+圖標(biāo)+顏色：這種的樣式一般較大，主要應(yīng)用于推廣或在輪播圖中展現(xiàn)，體現(xiàn)在較大的背景圖中。
• 文字+數(shù)字+顏色：文字主要表達(dá)其含義，數(shù)字體現(xiàn)未讀的數(shù)字。

2. 顏色

標(biāo)記中每個樣式可以設(shè)計成不同顏色，顏色不同帶來的作用也不同，我分別觀察了騰訊視頻、優(yōu)酷、愛奇藝、芒果TV。

發(fā)現(xiàn)這幾個視頻里運用的標(biāo)記顏色類似，所以我找了其中兩個來給大家分析一下：

一般視頻里面包含的標(biāo)記有：VIP、付費、自制、廣告、全網(wǎng)獨播、獨播、超前點播、預(yù)告。

顏色分別有：黃色、橙色、灰色、紅色、藍(lán)色。

• 黃色：黃金的顏色特別顯眼，在古代明黃的衣服只有皇室成員可以穿，所以黃色代表高貴的顏色，也有一句話叫“以黃為貴”代表尊貴；在圖中應(yīng)用的標(biāo)記是：VIP、付費。
• 橙色：地位稍微遜色于黃色，但也非常顯眼，在圖中應(yīng)用的標(biāo)記是：自制；如果用淺顏色來代表，起不到突出的效果，主要目的是為了突出并告訴用戶該視頻的是自制視頻。
• 灰色：顏色比較暗淡，很容易被用戶忽略。在圖中應(yīng)用的標(biāo)記是：廣告；這個目的很好理解，給到用戶提示用戶體驗會增加，但是可以通過弱化的效果來體現(xiàn)
• 紅色：紅色能激起人的興奮感，快速消費感，有一定視覺沖擊力；在頁面中想要引導(dǎo)用戶去點擊的區(qū)域或者按鈕會用紅色。在活動頁的顏色上也常用紅色，激起用戶的興奮感；在圖中主要應(yīng)用的標(biāo)記是：全網(wǎng)獨播、獨播。
• 藍(lán)色：藍(lán)色給人的感覺是放松，也是趨向于和諧放松的顏色；所以在圖中應(yīng)用的標(biāo)記是：預(yù)告。

我們在使用過程中需要了解清楚每個顏色代表的含義，如果想要抓住用戶眼球，可以使用黃色、橙色、紅色、這樣醒目的顏色。如果標(biāo)記體現(xiàn)的內(nèi)容價值不高，但是也需要存在，可以考慮和產(chǎn)品主題一致的顏色，這樣給人的感覺會很舒適，不會有雜亂的感覺。

3. 形狀

標(biāo)記中常用的形狀有矩形、三角形、圓形等…

矩形：一般比較常用，一般在瀏覽小說或視頻軟件中都能看見這類形狀的標(biāo)記，使用矩形可以搭配文字，數(shù)字等，字?jǐn)?shù)不限；也可以根據(jù)矩形改變成多種形狀，適用于多種場景。

三角形：可以懸掛在背景圖的右上角或左下角，使用時可以搭配文字或者圖標(biāo)，也可以作為矩形框的選中效果；字?jǐn)?shù)適合2個左右，字?jǐn)?shù)過多的話會導(dǎo)致溢出來，使用效果減弱。

圓形：一般搭配大一些背景圖，例如輪播圖；可以隨意更改形狀，搭配文字、圖標(biāo)都可以。

4. 位置

標(biāo)記的位置有很多種，拿矩形框類型的標(biāo)記來舉例，矩形框一般附著在背景圖片或功能按鈕上；一般標(biāo)記的位置分為，貼背景左上角、右上角、左下角、右下角。

一般人的觀察視線是從左向右的順序查看，所以標(biāo)記的醒目效果分別是左上角>右上角>左下角>右下角。

其次還要考慮背景圖、按鈕的大小來適當(dāng)調(diào)整標(biāo)記的大小。

05 總結(jié)

一般在使用標(biāo)記的過程中主要考慮使用標(biāo)記的目的，然后結(jié)合樣式中的元素+顏色+形狀+位置去設(shè)計符合自己產(chǎn)品的標(biāo)記；文中舉例的僅是常見的類型，在實際運用中并不局限于這些類型，產(chǎn)品經(jīng)理也可以根據(jù)自己設(shè)計的產(chǎn)品靈活變動。

本文由 @張悄悄 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 unsplash，基于CC0協(xié)議