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

文章主要分為 3 部分：

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

標(biāo)簽是什么？

1. 功能標(biāo)簽

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

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

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

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

2. 標(biāo)簽組件

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

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

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

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

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

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

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

2. 用戶行為

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

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

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

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

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

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

1. 精煉

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

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

2. 視覺(jué)突出

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

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

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

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

3. 一致性與差異化

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

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

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

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

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

子牧UXD