編輯導(dǎo)語：標(biāo)簽是什么？標(biāo)簽可以幫助我們對某類內(nèi)容進(jìn)行標(biāo)識或定義，然而隨著我們的業(yè)務(wù)場景越來越復(fù)雜，“標(biāo)簽”也需要進(jìn)行“迭代”，以適應(yīng)更多樣化的實際場景。具體應(yīng)該如何做標(biāo)簽管理，不如來看看作者基于實際業(yè)務(wù)問題上的總結(jié)。

隨著管理平臺的業(yè)務(wù)越來越復(fù)雜，場景的范圍不斷擴(kuò)大，設(shè)計的細(xì)節(jié)內(nèi)容也會不斷放大，適應(yīng)需求，應(yīng)用到場景中，從單一的屬性走向批量。走向批量那必然會暴露出一些問題。

這一篇目的是說明在復(fù)雜業(yè)務(wù)下的多種場景中，即使一個標(biāo)簽，也會被放大來看。且不再對設(shè)計細(xì)節(jié)具體設(shè)計展示，旨在提供一種方式。

此項整理是因為和產(chǎn)品的討論，產(chǎn)品說遇到一個問題，關(guān)于業(yè)務(wù)復(fù)雜后標(biāo)簽管理問題。

百度百科對“標(biāo)簽”的定義是用來標(biāo)志產(chǎn)品目標(biāo)和分類或內(nèi)容，便于查找和定位目標(biāo)的工具，等更詳細(xì)的表述。以個人在工作中的看法，標(biāo)簽就是對數(shù)據(jù)信息的分類標(biāo)記，也會附帶部分功能，比如對標(biāo)簽的刪除。

一、在項目中發(fā)現(xiàn)了幾種現(xiàn)象

1. 結(jié)果數(shù)據(jù)表格中有多個不同的數(shù)據(jù)字段類型標(biāo)簽區(qū)分不明顯；
2. 標(biāo)簽樣式不能滿足需求更新后的更多復(fù)雜場景。

問題

標(biāo)簽需要制作區(qū)分不同場景的標(biāo)簽樣式，以及多種類型標(biāo)簽同時出現(xiàn)。

簡單來說就是對多場景中標(biāo)簽視覺樣式進(jìn)行定義，避免交叉場景中出現(xiàn)視覺干擾問題。

為了區(qū)分不同場景下應(yīng)用的標(biāo)簽，對標(biāo)簽也需要進(jìn)行分類設(shè)計，同時不同標(biāo)簽也會在某以場景下交叉出現(xiàn)，此時需要對標(biāo)簽進(jìn)行不同設(shè)計。

二、標(biāo)簽應(yīng)用的幾個場景

1. 常用于表格、列表的標(biāo)簽；
2. 查詢模塊內(nèi)的分類、數(shù)據(jù)細(xì)分篩選；
3. 數(shù)據(jù)字段內(nèi)的多個標(biāo)記；
4. 精確表意的數(shù)據(jù)內(nèi)，圖標(biāo)代替字段標(biāo)簽。

三、標(biāo)簽場景類型

1. 狀態(tài)標(biāo)簽：表格、列表

管理系統(tǒng)里最常用的標(biāo)簽類型。

1）列表狀態(tài)標(biāo)簽

一般表述為當(dāng)前數(shù)據(jù)相關(guān)的業(yè)務(wù)流轉(zhuǎn)到一個階段的標(biāo)記。

2）卡片狀態(tài)標(biāo)簽

在視覺表現(xiàn)上與列表狀態(tài)區(qū)分，但所表達(dá)意思是同樣的。根據(jù)數(shù)據(jù)內(nèi)容以及功能要求，對布局的調(diào)整。

（文字處理后的內(nèi)容）

2. 選擇標(biāo)簽：查詢模塊、細(xì)分篩選

常用于查詢篩選功能區(qū)，從大數(shù)據(jù)里查詢需要的數(shù)據(jù)，需要精細(xì)篩選，精細(xì)篩選一種是搜索，另一種是關(guān)鍵字篩選，同電商平臺那種。

3. 分類頭部標(biāo)記標(biāo)簽：數(shù)據(jù)結(jié)果（段落式、模板式）

數(shù)據(jù)內(nèi)容的要求，沒法像列表展示，所以段落式的表現(xiàn)形式，標(biāo)記標(biāo)簽放置段首。

4. 數(shù)據(jù)類標(biāo)簽：數(shù)據(jù)歸類

這類標(biāo)簽出現(xiàn)的相對來說比較少，附帶操作功能了。以下圖為例，簡單來說是將術(shù)語類歸類到某個實體下。

5. 字段標(biāo)記標(biāo)簽：多個分段數(shù)據(jù)信息標(biāo)記及優(yōu)先級

存在數(shù)據(jù)字段內(nèi)的標(biāo)簽標(biāo)記內(nèi)容，此類字段最長長度有上限，所以在字段內(nèi)允許顯示。

亦如下圖多種標(biāo)簽交叉顯示，字段標(biāo)簽更好地顯示數(shù)據(jù)的重點關(guān)鍵字。不同的字段標(biāo)記樣式，也是為了數(shù)據(jù)展示的優(yōu)先級進(jìn)行分層。

6. 圖標(biāo)標(biāo)簽：意符表意，圖形化的可快速感知的標(biāo)記

圖標(biāo)代替文字，一是在視覺上更容易識別區(qū)分，表意準(zhǔn)確且直接；在空間利用上，減少空間占據(jù)。

上圖中環(huán)形圖比較準(zhǔn)確直觀的表達(dá)男女占比情況；下圖中的“是”“否”用圖標(biāo)代替，并且用顏色作為區(qū)分，更突出。

7. 多種標(biāo)簽混合

圖標(biāo)、狀態(tài)混合的標(biāo)簽在同一個數(shù)據(jù)場景里出現(xiàn)。

最后說一丟丟，勿以末小而不為，細(xì)枝末節(jié)也會影響使用。

本文由 @Ychen（啊嗚計） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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