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