中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：圖片標(biāo)簽我們并不陌生，只要仔細(xì)觀察，產(chǎn)品中圖片標(biāo)簽的位置和樣式各有不同，那么它到底有多重要呢？什么位置、何種樣式的標(biāo)簽設(shè)計才是更合適的設(shè)計？圖片標(biāo)簽背后的設(shè)計邏輯又是什么？本文作者為我們回答了以上問題，并且總結(jié)出了圖片標(biāo)簽設(shè)計的3步曲。

一、緣起

最近組內(nèi)設(shè)計評審，視頻和小說兩個業(yè)務(wù)都涉及到在圖片上顯示標(biāo)簽（Tag）的設(shè)計，但是Tag的樣式和位置卻不完全不同，如下圖所示：

加之對其他產(chǎn)品中圖片上Tag的位置和樣式各異的印象，不由得引發(fā)了我的思考，到底什么位置，何種樣式的標(biāo)簽設(shè)計才是更合適的設(shè)計？這背后的設(shè)計邏輯又是什么？

二、競品分析

帶著這樣的疑問，我打開了手機中Top3的視頻和小說App，通過分析整理，發(fā)現(xiàn)競品主要采用了以下4種圖片Tag樣式。

注：孤立式標(biāo)簽設(shè)計，是指標(biāo)簽與背景圖片的邊緣都有一定的距離。半貼邊式標(biāo)簽則是指標(biāo)簽和背景圖片某一條邊重合。全貼邊式標(biāo)簽則是指標(biāo)簽的兩條邊與背景圖片都重合。

從設(shè)計效果上來看，孤立式標(biāo)簽的醒目度要明顯高于貼邊式設(shè)計。

在《想象力-構(gòu)圖與創(chuàng)作思維》一書中，黃朝貴老師曾指出：孤立會起到強調(diào)作用，就像太陽和月亮懸掛在高空一樣，孤立元素的重量感會因此增強。

而貼邊式的標(biāo)簽，因為和圖片邊緣直接相連，更容易與圖片背景融為一體。

從方位上看，Tag靠左會比靠右更為醒目，因為符合用戶自然的視線流動規(guī)律，畢竟多數(shù)用戶都是從左向右瀏覽的。所以當(dāng)標(biāo)簽位于左上角位置時，會加劇標(biāo)簽的視線聚焦效應(yīng)。

三、設(shè)計分析

分析完競品的視覺呈現(xiàn)效果以后，我們再回來接著探討：Tag之于小說或視頻的意義？思考到底應(yīng)該以什么形式，在什么位置展示標(biāo)簽?zāi)兀?/p>

對于視頻或小說而言，圖片封面是信息的主體，Tag信息是對主體信息某一維度的強調(diào)，目的是為了更好的凸顯主體的關(guān)鍵特性，輔助用戶決策。

既然Tag是輔助用戶決策的因素，那我們可以從Tag的重要性、出現(xiàn)頻率、背景圖片大小3個維度來展開分析：

四、重要性

根據(jù)重要性，我們把標(biāo)簽分為三大類：

1. 首要決策因素

指用戶主要根據(jù)這個因素來進行決策，比如熱度、評分、排行榜等。當(dāng)Tag用于展示首要決策因素時，Tag的醒目度在少遮擋內(nèi)容的前提下越醒目越好。

如榜單：所有App無一例外都放置在了圖片的左上角，以凸顯排名信息。

2. 重要決策因素

指雖然并非用戶的首要決策因素，但用戶會因此而選擇or放棄此對象，所以有必要把這個決策因素以醒目的方式呈現(xiàn)給用戶，比如直播、廣告、VIP、預(yù)告、完本、更新等。

避免用戶選擇進入詳情后，才發(fā)現(xiàn)不符合訴求，還要退出后重新選擇，影響決策效率。對于重要決策因素的Tag，根據(jù)Tag出現(xiàn)的頻率，可以靈活的決定其位置。

3. 刺激性決策因素

指通常不是用戶的固有決策因素，但在某些情況下，會刺激用戶進行臨時決策，比如限免、獨播、自制、熱映等。

這些標(biāo)簽是產(chǎn)品側(cè)希望傳達給用戶，提升轉(zhuǎn)化的一種刺激手段，對于產(chǎn)品運營來說比較重要，但對于用戶來說，重要性相對較低，所以一般建議放置在右側(cè)，采用全貼邊的設(shè)計形式。

4. 頻率

首要決策因素不受頻率影響，可以始終位于比較醒目的左上角區(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)）。

5. 背景圖片大小

此外，還有一個考慮因素是背景圖片的大小。

因為標(biāo)簽的大小一般相對固定，當(dāng)背景圖片越大，同一位置和樣式的標(biāo)簽醒目度就會越低。所以如果只在某些大圖上有標(biāo)簽，可以根據(jù)標(biāo)簽的重要性，適當(dāng)強化其顯示效果。

五、結(jié)論

綜上所述，我們可以總結(jié)出圖片Tag設(shè)計的3步曲：

1. 梳理Tag類型及優(yōu)先級

根據(jù)Tag的重要性、出現(xiàn)頻率和背景圖片大小，決定各類Tag的優(yōu)先級：首要決策因素Tag＞重要決策因素Tag＞刺激性決策因素Tag。

2. 對照Tag醒目度量表，決定Tag位置及形式

• 標(biāo)簽位置醒目度：左上＞右上；
• 標(biāo)簽形式醒目度：孤立式標(biāo)簽＞半貼邊式標(biāo)簽＞全貼邊式標(biāo)簽；
• 首要決策因素的Tag：一般建議采用左側(cè)全貼邊式標(biāo)簽（在不遮擋內(nèi)容的前提下，也可以考慮孤立式和半貼邊式標(biāo)簽）；
• 重要決策因素的Tag：可左可右，看是否會與首要決策因素沖突，以及其出現(xiàn)的頻率高低（若與首要決策因素沖突，則建議居右，出現(xiàn)頻率很高也建議居右）；
• 刺激性決策因素的Tag：一般建議采用右貼邊的標(biāo)簽設(shè)計，減少用戶的視覺干擾（如果不存在首要及重要決策因素，刺激性決策因素也可以適當(dāng)升級其醒目度）。

3. 設(shè)計具體Tag樣式

根據(jù)前面的推導(dǎo)，探索Tag具體的視覺效果，除了中規(guī)中矩的圓角矩形外，常見的Tag樣式還有以下形式：

當(dāng)然，設(shè)計師也可以根據(jù)標(biāo)簽的屬性，或者產(chǎn)品的品牌符號，自定義適合的Tag樣式，以滿足產(chǎn)品個性化的訴求。

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

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