關注並將「人人都是產品經理」設為星標
每天早 07 : 45 按時送達
在各種產品中我們都可以看見有一些提示標記，常見的新信息提示用紅色的小紅點或者紅色數字表示，提示人們有未讀信息，其實不同的標記也能反映不用的特性；本文作者分享了利用標記提升產品設計的價值的分析，我們一起來看一下。
作者：張悄悄
題圖來自正版圖庫 圖蟲創意，基於 VRF 協議
全文共 4400 字，閱讀需要 9 分鐘
—————— BEGIN ——————
我最近在設計的原型中，加了很多標記的元素。回顧增加的這些標記，發現它們在功能裡面分別起了不小的作用，隱約的給我帶來了意想不到的小驚喜。
我將這些標記的種類及效果整理了一下，分享給讀者，希望大家可以結合自己產品更好的利用標記，達到想實現的一些目的。
沒有標記的場景和問題
在一些同類別的產品中，沒有標記，則無法重點突出其產品的特性。
假設在小說首頁中，我們想找一本心儀的小說查閱，也會產生眼花繚亂的感覺；而選擇一本小說進入詳情頁查閱後，發現沒有達到心中的期望值，又回退出重新選擇；既增加了操作步驟，也浪費了我們的時間。
舉個例子：
一般小說首頁顯示的是小說名字和封面，僅通過小說名字，無法幫助用戶了解這本書。
例如：X戰警是名字，但有可能是科幻，也有可能是魔幻，也有可能是情感小說；而小說封面，除了標明了小說名字之外，還沿用了風景、水果、或小說人物等一些插畫，並不能表達清楚該小說的特性。
僅僅只通過這兩個信息能夠向用戶傳達的信息是有限的，不利於用戶做選擇；同時我們想推廣的產品也會產生曝光度低的現象，達不到推廣的預期效果；所以我們需要在小說首頁中，為某一本小說設定特性標記，體現其特性。
有了特性標記後，首先的作用就是對小說名字的補充。同時可以吸引用戶注意力，幫助用戶快速了解產品屬性，用戶也可以快速的在相同特性的產品中做對比，從而提升用戶的決斷效率。
如果在小說封面中體現小說的特性，用戶就能直觀的了解到這本小說是免費的還是VIP專享的，又或者是音頻類的；通過這個關鍵特性，用戶可以根據自己想要的的類別進行選擇，不用非要進入到小說詳情頁面中才能了解到小說的特性。
其次也可以作為運營人員的推廣手段，提升想推廣產品的曝光度，從而獲取流量；由此我們可以看出，體現產品的特性是十分重要的。
如圖所示，可以幫助讀者更好的對比沒有特性標記和增加特性標記效果：
什麼是標記
標記主要是以圖標的形式展現，通過圖標的不同形狀和位置分別體現不同的效果；可以標記事務的屬性和維度，例如將一個產品中不起眼的功能重點突出，或用於消息數量的提醒；產品經理可以在產品設計中，結合產品或某個功能想突出的目的，設計出適合該產品功能的表達方式。
而標記的作用首先是凸顯某個事項，先是吸引用戶，讓用戶通過標記就能清晰的了解該產品的內容，減少操作和決斷的頻率，也可作為我們推廣的一種方式。
如果沒有標記，用戶會經常「誤點」；其實用戶誤點是很正常的，點擊了某個產品但是很快就退出了；在後期的用戶操作統計中就會存在很多停留時間短的情況，說明用戶對該內容是不感興趣的。
下面我分別通過凸顯某個事項、提示用戶、刺激用戶來詳細講解：
1. 凸顯某個事項
凸顯某個事項是通過標記的方式凸顯該產品，吸引用戶查看；我拿兩種比較常見的來舉例，分別是凸顯某個功能及體現該功能特性。
凸顯某個功能主要的目的就是在將新增的板塊或者某個板塊裡面剛改完版的內容進行凸顯，如果該功能重要程度較高，通過這種方式吸引用戶點擊，可以達到讓用戶點擊試用，並了解該板塊新增的內容或改版內容後的變化。
如果用戶對該產品功能不熟悉的情況下，且上線了新板塊內容沒有用特殊手段體現，則容易導致，該板塊更新很久用戶都不知道該板塊存在。
大部分用戶在熟悉的產品中，一般只會注意經常使用的功能；如果沒有這種特殊的標記來凸顯，在一堆功能中，用戶很少能注意到，就算有用戶注意到也很少有用戶去主動點擊；而我們利用這種標記的方式體現後，可以吸引用戶的注意，提高用戶使用並體驗該功能的機率。
如下圖，可參考凸顯某個功能的展現方式：
第一圖是阿里巴巴矢量圖標庫官方網站，除了我經常使用的功能，在頂部功能區，第一眼讓我注意到的是「活動」板塊；在黑色背景下用了紫色的NEW字凸顯。想對比其他的功能，讓人第一眼就能注意到。
第二張圖是新榜官網，在排行類別的Tab中新增了「嗶哩嗶哩」的排行，同樣在灰色背景下用了矩形的NEW來凸顯該功能。
體現該功能特性是通過少量的文字表達清楚產品的類型或賣點，讓用戶清晰的了解該產品的大致信息。
舉個例子：在小說封面中間會顯示播放類或音符類小圖標，是指該內容是音頻內容；這種體驗方式減少了用戶操作步驟，可以讓用戶在選擇該小說中，第一眼就能了解內容類型。
通過這種方式，還可以通過多標記進行分類，讓用戶在同標記類別中篩選自己感興趣的內容。
2. 提示用戶
提示消息數量最常見的就是微信消息提醒，通常也被稱為角標，微信消息中角標的應用有兩種：
一種場景是有新消息時，且有低於100條的消息未查看，這時微信圖標的右上角會顯示圓形紅色的數字角標，數字代表未讀消息數量；而打開微信後，未讀好友的頭像右上角也會顯示圓形紅色的數字角標，數字代表當前好友發送的消息數量，這是第一種場景。
第二種場景是消息達到一定數量時，如：單個好友發送超過100條未讀消息時，角標不在顯示具體的未讀數量而是用紅色橢圓形中顯示省略號，也就是三個點來表示，代表超過一定數量的未讀消息；通過這種角標的提示，可以直觀的提醒用戶有消息未讀數量，增加用戶查看的時效性。
還有一種提示效果在小說、視頻產品中應用較多，例如視頻中右上角提示的標記信息：預告、VIP、直播中、廣告、付費、超前點播、獨播等，小說中的完結、更新等信息；通過直觀提示用戶的方式，避免用戶進入詳情頁去查看某個內容的詳細介紹後才發現不是用戶想要的。
3. 刺激用戶
刺激用戶主要是可以通過一些標記表達的信息，來刺激用戶臨時做決策。
最有特點的例子就是視頻或小說中標記信息：限時免費；可通過這種方式吸引用戶點擊，刺激用戶在短時間內產生購買慾望的緊迫感，提升用戶轉化。
標記的種類及應用
根據標記的使用範圍我將標記的基本類別大致分成3種，分別是產品類型、產品賣點及活動信息；在實際應用中，標記的種類也並不局限於這三種，大家可以根據實際產品訴求制定適合的標記。
下面我來說下這三種標記：
產品類型主要是用標記來主要體現該產品的類型，幫助用戶通快速了解該產品屬性。
產品賣點主要體現可以直接影響用戶購買的賣點，首先體現產品的特色，另一方面則通過運營手段，凸顯出一些吸引用戶的方式。例如：」限時免費」標記。
活動信息比較常見的主要是各大產品的購買頁面，很多產品經常組合賣，比如購買稻殼會員，購買頁面會有標記提示「送愛奇藝年卡」；還有的購買頁面會提示「首月3倍積分」這些都是一些活動信息，這類的信息字數較多，主要表達活動的一些優惠，促使用戶購買。
了解標記的種類後，下面我來說一下標記的元素及如何應用：
標記的體現元素有多種，常見的有圖標、文字、數字、顏色等；在實際應用中先考慮好要添加標記的目的，結合標記的元素，根據使用目的來調整元素體現的顏色、形狀、位置。
其中圖標和顏色可以單獨使用，也可以和其他元素搭配使用，而其他元素都需要搭配來使用。
1. 標記元素
圖標+顏色：圖標可以直接表達內容的類型，增加顏色的元素可以凸顯該標記；在用戶瀏覽時更容易吸引用戶，一般圖標可使用平時常見的圖標，可以讓用戶第一眼就知道圖標要表達的意思。文字+顏色：文字可以直接表達內容的特性，例如小說中體現的免費、連載、特價等，直接表達文字既直接又準確，主要用於體現該內容的分類或特點。數字+顏色：數字大多應用於消息類，體現未讀消息數量；還有一種體現形式是應用於榜單排名中，可以凸顯排名中的內容或相關產品，可以促進用戶查看。文字+圖標+顏色：這種的樣式一般較大，主要應用於推廣或在輪播圖中展現，體現在較大的背景圖中。文字+數字+顏色：文字主要表達其含義，數字體現未讀的數字。
2. 顏色
標記中每個樣式可以設計成不同顏色，顏色不同帶來的作用也不同，我分別觀察了騰訊視頻、優酷、愛奇藝、芒果TV。
發現這幾個視頻裡運用的標記顏色類似，所以我找了其中兩個來給大家分析一下：
一般視頻裡面包含的標記有：VIP、付費、自製、廣告、全網獨播、獨播、超前點播、預告。
顏色分別有：黃色、橙色、灰色、紅色、藍色。
黃色：黃金的顏色特別顯眼，在古代明黃的衣服只有皇室成員可以穿，所以黃色代表高貴的顏色，也有一句話叫「以黃為貴」代表尊貴；在圖中應用的標記是：VIP、付費。橙色：地位稍微遜色於黃色，但也非常顯眼，在圖中應用的標記是：自製；如果用淺顏色來代表，起不到突出的效果，主要目的是為了突出並告訴用戶該視頻的是自製視頻。灰色：顏色比較暗淡，很容易被用戶忽略。在圖中應用的標記是：廣告；這個目的很好理解，給到用戶提示用戶體驗會增加，但是可以通過弱化的效果來體現紅色：紅色能激起人的興奮感，快速消費感，有一定視覺衝擊力；在頁面中想要引導用戶去點擊的區域或者按鈕會用紅色。在活動頁的顏色上也常用紅色，激起用戶的興奮感；在圖中主要應用的標記是：全網獨播、獨播。藍色：藍色給人的感覺是放鬆，也是趨向於和諧放鬆的顏色；所以在圖中應用的標記是：預告。
我們在使用過程中需要了解清楚每個顏色代表的含義，如果想要抓住用戶眼球，可以使用黃色、橙色、紅色、這樣醒目的顏色。
如果標記體現的內容價值不高，但是也需要存在，可以考慮和產品主題一致的顏色，這樣給人的感覺會很舒適，不會有雜亂的感覺。
3. 形狀
標記中常用的形狀有矩形、三角形、圓形等…
矩形：一般比較常用，一般在瀏覽小說或視頻軟體中都能看見這類形狀的標記，使用矩形可以搭配文字，數字等，字數不限；也可以根據矩形改變成多種形狀，適用於多種場景。
三角形：可以懸掛在背景圖的右上角或左下角，使用時可以搭配文字或者圖標，也可以作為矩形框的選中效果；字數適合2個左右，字數過多的話會導致溢出來，使用效果減弱。
圓形：一般搭配大一些背景圖，例如輪播圖；可以隨意更改形狀，搭配文字、圖標都可以。
4. 位置
標記的位置有很多種，拿矩形框類型的標記來舉例，矩形框一般附著在背景圖片或功能按鈕上；一般標記的位置分為，貼背景左上角、右上角、左下角、右下角。
一般人的觀察視線是從左向右的順序查看，所以標記的醒目效果分別是左上角>右上角>左下角>右下角。
其次還要考慮背景圖、按鈕的大小來適當調整標記的大小。
總結
一般在使用標記的過程中主要考慮使用標記的目的，然後結合樣式中的元素+顏色+形狀+位置去設計符合自己產品的標記；文中舉例的僅是常見的類型，在實際運用中並不局限於這些類型，產品經理也可以根據自己設計的產品靈活變動。
—————— / END / ——————
▼ 喜歡請分享&收藏，滿意點個讚，最後點「在看」 ▼