在移動端產(chǎn)品中，標(biāo)簽不是核心內(nèi)容，甚至有點(diǎn)不起眼，但是誰都無法忽略它的存在。特別是在電商平臺中，標(biāo)簽已經(jīng)成為了不可或缺的設(shè)計形式。今天我們就來總結(jié)下標(biāo)簽設(shè)計的細(xì)節(jié)。

文章主要分為 3 部分：

• 標(biāo)簽是什么？
• 標(biāo)簽需要表達(dá)什么？
• 標(biāo)簽設(shè)計的要點(diǎn)

標(biāo)簽是什么？

1. 功能標(biāo)簽

百度百科給出的解釋是"Tag（標(biāo)簽）是一種更為靈活、有趣的日志分類方式，可以為每篇日志添加一個或多個 Tag（標(biāo)簽）"。

例如在網(wǎng)絡(luò)平臺發(fā)布文章時，作者可以定義多個標(biāo)簽，方便讀者更好的理解文章內(nèi)容。同時平臺也可以根據(jù)標(biāo)簽聚合同類文章，建立目錄索引，引導(dǎo)讀者快速查看標(biāo)簽文章。

還有一種就是「話題標(biāo)簽」更加靈活，通常采用"#+任意文字"的形式，作為超鏈接可以跳轉(zhuǎn)到專題或者信息聚合頁。例如微信、微博、今日頭條的話題標(biāo)簽。

以上 2 種形式更多的是從功能角度出發(fā)，側(cè)重分類和索引功能。

2. 標(biāo)簽組件

在設(shè)計側(cè)更講求標(biāo)簽的信息傳遞及表現(xiàn)形式。AntDesign、TDesign 等 Web 端規(guī)范都有專門的 Tag 組件，可以看出主要有 3 個作用——標(biāo)記、分類和選擇。

標(biāo)簽需要表達(dá)什么？

在移動端產(chǎn)品中，標(biāo)簽通常出現(xiàn)在"發(fā)現(xiàn)"、"推薦"頁面，或者搜索結(jié)果頁面中。通過簡單精煉的表達(dá)方式，在有限的空間輔助信息表達(dá)，讓用戶可以更多維度地了解內(nèi)容，引起用戶注意并激發(fā)用戶興趣。

所以標(biāo)簽所表達(dá)的內(nèi)容至關(guān)重要，主要包括以下 3 個信息方向。

1. 商品或服務(wù)特點(diǎn)

對電商平臺而言，商品、價格，服務(wù)、物流等服務(wù)環(huán)節(jié)都會影響到用戶決策，因此需要盡可能地將商品及服務(wù)的價值點(diǎn)傳遞給用戶。而移動端產(chǎn)品屏幕空間有限，需要將各類信息分層有序的展現(xiàn)出來。

標(biāo)簽既可以突出商品折扣、優(yōu)惠信息、服務(wù)特色吸引用戶，又不會占用太多的空間，所以成為了商品展示重要的輔助信息。

2. 用戶行為

最近我在使用支付寶在付款時，發(fā)現(xiàn)對方賬戶信息增加了"經(jīng)常光顧"的輔助標(biāo)簽，讓我可以更放心地完成付款。簡單的標(biāo)簽可以緩解用戶誤操作的焦慮，增強(qiáng)安全感。

而在騰訊云手機(jī)端登錄時，增加了"上次登錄"的標(biāo)簽，降低了多賬號用戶的記憶成本，帶給用戶更好的用戶體驗。

同樣在電商平臺中，用戶行為也成為了重要的標(biāo)簽符號，買過，訂閱過、瀏覽過等標(biāo)簽可以喚醒用戶的記憶，拉進(jìn)商品與用戶間的距離，有助于帶來更好的點(diǎn)擊量。

3. 從眾心理引導(dǎo)

當(dāng)用戶無法決策時，從眾心理會成為影響用戶決策的重要因素。所以在電商平臺，銷量作為非常重要的排序條件單獨(dú)展示，方便用戶快捷操作。同樣其他用戶的收藏量、下單量、播放量數(shù)據(jù)也會對用戶行為產(chǎn)生影響。因此這類信息廣泛應(yīng)用在標(biāo)簽設(shè)計中，積極引導(dǎo)用戶點(diǎn)擊和轉(zhuǎn)化。

標(biāo)簽設(shè)計的要點(diǎn)

1. 精煉

標(biāo)簽通常面積比較小，主要作為輔助或者補(bǔ)充信息，幫助用戶更好的理解主體信息。因此需要精煉易懂，不適合展示大段內(nèi)容。但是過于簡單的標(biāo)簽，無法給用戶足夠的信息，容易讓用戶看不懂、產(chǎn)生疑惑。

例如美團(tuán)美食中的標(biāo)簽。"訂"是什么含義呢？提前預(yù)訂？訂座？"買"又是什么含義呢？買單？買券？當(dāng)然可能是因為我不經(jīng)常使用美團(tuán)，對標(biāo)簽有些不太理解。所以這些標(biāo)簽信息對我來說，也起不到傳遞信息的作用。

2. 視覺突出

由于面積比較小，標(biāo)簽通常會增加背景色，或者采用鮮亮的色彩、圖形吸引用戶的注意。但是在不同的產(chǎn)品中，視覺突出的方式也是不同的。我們可以通過以下 3 款產(chǎn)品的封面標(biāo)簽了解其中的微妙差異。

騰訊視頻采用的是固定背景色標(biāo)簽，標(biāo)簽本身成為了一種信息符號，重在表達(dá)產(chǎn)品視頻的特性，強(qiáng)調(diào)突出醒目。

在美團(tuán)中，標(biāo)簽采用透明底色，信息以銷量和好評率為主，作為菜品的輔助信息，更多考慮的是減少對圖片造成干擾，輔助標(biāo)簽文本信息的傳遞。

而在網(wǎng)易云音樂中，標(biāo)簽采用的是封面主色調(diào)作為底色，盡量與封面融為一體，減少對封面干擾，保證標(biāo)簽文本信息的有效傳遞。

3. 一致性與差異化

標(biāo)簽是需要遵循一致性還是差異性呢？不同的平臺給出了截然不同的答案。

在淘寶中，標(biāo)簽基本是固定在同一色系中，采用相近的視覺形式。當(dāng)然首單優(yōu)惠、次日達(dá)等重點(diǎn)服務(wù)特性則采用了明顯的差異化表現(xiàn)形式。另外電商平臺中的廣告標(biāo)簽，更多是滿足政策法規(guī)的要求，不得已而為之，因此相比價格優(yōu)惠等利益點(diǎn)標(biāo)簽，明顯被弱化了。

而在京東中，不同類型的標(biāo)簽具有明顯的差異化，整體形式、顏色都不一樣，力求通過差異化輔助標(biāo)簽信息的傳遞。

大家是如何看待標(biāo)簽的一致性和差異化的呢？歡迎大家評論區(qū)留言討論~

以上就是我對標(biāo)簽的一點(diǎn)思考，今天的分享到此結(jié)束。

子牧UXD