最近組內(nèi)設(shè)計評審，視頻和小說兩個業(yè)務都涉及到在圖片上顯示標簽（Tag）的設(shè)計，但是Tag的樣式和位置卻不完全不同，如下圖所示：
加之對其他產(chǎn)品中圖片上Tag的位置和樣式各異的印象，不由得引發(fā)了我的思考，到底什么位置，何種樣式的標簽設(shè)計才是更合適的設(shè)計？這背后的設(shè)計邏輯又是什么？
帶著這樣的疑問，我打開了手機中Top3的視頻和小說App，通過分析整理，發(fā)現(xiàn)競品主要采用了以下4種圖片Tag樣式。
注：孤立式標簽設(shè)計，是指標簽與背景圖片的邊緣都有一定的距離。半貼邊式標簽則是指標簽和背景圖片某一條邊重合。全貼邊式標簽則是指標簽的兩條邊與背景圖片都重合。
從設(shè)計效果上來看，孤立式標簽的醒目度要明顯高于貼邊式設(shè)計。
在《想象力-構(gòu)圖與創(chuàng)作思維》一書中，黃朝貴老師曾指出：孤立會起到強調(diào)作用，就像太陽和月亮懸掛在高空一樣，孤立元素的重量感會因此增強。
而貼邊式的標簽，因為和圖片邊緣直接相連，更容易與圖片背景融為一體。
從方位上看，Tag靠左會比靠右更為醒目，因為符合用戶自然的視線流動規(guī)律，畢竟多數(shù)用戶都是從左向右瀏覽的。所以當標簽位于左上角位置時，會加劇標簽的視線聚焦效應。
分析完競品的視覺呈現(xiàn)效果以后，我們再回來接著探討：Tag之于小說或視頻的意義？思考到底應該以什么形式，在什么位置展示標簽呢？
對于視頻或小說而言，圖片封面是信息的主體，Tag信息是對主體信息某一維度的強調(diào)，目的是為了更好的凸顯主體的關(guān)鍵特性，輔助用戶決策。
既然Tag是輔助用戶決策的因素，那我們可以從Tag的重要性、出現(xiàn)頻率、背景圖片大小3個維度來展開分析：
1. 重要性
根據(jù)重要性，我們把標簽分為三大類：
首要決策因素：指用戶主要根據(jù)這個因素來進行決策，比如熱度、評分、排行榜等。當Tag用于展示首要決策因素時，Tag的醒目度在少遮擋內(nèi)容的前提下越醒目越好。如榜單，所有App無一例外都放置在了圖片的左上角，以凸顯排名信息。
重要決策因素：指雖然并非用戶的首要決策因素，但用戶會因此而選擇or放棄此對象，所以有必要把這個決策因素以醒目的方式呈現(xiàn)給用戶，比如直播、廣告、VIP、預告、完本、更新等。避免用戶選擇進入詳情后，才發(fā)現(xiàn)不符合訴求，還要退出后重新選擇，影響決策效率。對于重要決策因素的Tag，根據(jù)Tag出現(xiàn)的頻率，可以靈活的決定其位置。
刺激性決策因素：指通常不是用戶的固有決策因素，但在某些情況下，會刺激用戶進行臨時決策。比如限免、獨播、自制、熱映等。這些標簽是產(chǎn)品側(cè)希望傳達給用戶，提升轉(zhuǎn)化的一種刺激手段，對于產(chǎn)品運營來說比較重要，但對于用戶來說，重要性相對較低，所以一般建議放置在右側(cè)，采用全貼邊的設(shè)計形式。
2. 頻率
首要決策因素不受頻率影響，可以始終位于比較醒目的左上角區(qū)域突出顯示。
重要性決策因素和刺激性決策因素，和出現(xiàn)頻率直接相關(guān)：如果出現(xiàn)頻率低，為了凸顯Tag可以考慮居左強化顯示，如果出現(xiàn)頻率非常高，則要考慮降低對主體信息的干擾，盡量靠右且弱化顯示。
此外，還有一類與內(nèi)容主體密切相關(guān)的基本信息，它始終伴隨內(nèi)容主體而出現(xiàn)，比如視頻時長、劇集集數(shù)、綜藝期數(shù)、觀看數(shù)等，因為它是主體的基本信息，出現(xiàn)頻率接近100%，所以一般出現(xiàn)時會建議置于內(nèi)容底部，并以更弱化的視覺形式展示（此類基本信息Tag不在我們本次討論的范圍之內(nèi)）。
3. 背景圖片大小
此外，還有一個考慮因素是背景圖片的大小。因為標簽的大小一般相對固定，當背景圖片越大，同一位置和樣式的標簽醒目度就會越低。所以如果只在某些大圖上有標簽，可以根據(jù)標簽的重要性，適當強化其顯示效果。
綜上所述，我們可以總結(jié)出圖片Tag設(shè)計的3步曲：
1. 梳理Tag類型及優(yōu)先級
根據(jù)Tag的重要性、出現(xiàn)頻率和背景圖片大小，決定各類Tag的優(yōu)先級：首要決策因素Tag＞重要決策因素Tag＞刺激性決策因素Tag。
2. 對照Tag醒目度量表，決定Tag位置及形式
標簽位置醒目度：左上＞右上
標簽形式醒目度：孤立式標簽＞半貼邊式標簽＞全貼邊式標簽
首要決策因素的Tag：一般建議采用左側(cè)全貼邊式標簽。（在不遮擋內(nèi)容的前提下，也可以考慮孤立式和半貼邊式標簽）
重要決策因素的Tag：可左可右，看是否會與首要決策因素沖突，以及其出現(xiàn)的頻率高低。（若與首要決策因素沖突，則建議居右，出現(xiàn)頻率很高也建議居右）
刺激性決策因素的Tag：一般建議采用右貼邊的標簽設(shè)計，減少用戶的視覺干擾。（如果不存在首要及重要決策因素，刺激性決策因素也可以適當升級其醒目度）
3. 設(shè)計具體Tag樣式
根據(jù)前面的推導，探索Tag具體的視覺效果，除了中規(guī)中矩的圓角矩形外，常見的Tag樣式還有以下形式：
當然，設(shè)計師也可以根據(jù)標簽的屬性，或者產(chǎn)品的品牌符號，自定義適合的Tag樣式，以滿足產(chǎn)品個性化的訴求。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。