UI設(shè)計(jì)中標(biāo)簽設(shè)計(jì)總結(jié)

　　在UI設(shè)計(jì)中，標(biāo)簽的特征跟生活中的標(biāo)簽也很相似，用以標(biāo)注內(nèi)容分類或內(nèi)容要點(diǎn)，方便用戶快速定位自己需要的內(nèi)容目標(biāo)。標(biāo)簽還有滿足用戶的隱形需求的作用，當(dāng)用戶在猶豫是否要進(jìn)行下一步操作的時(shí)候，標(biāo)簽在一定程度上加強(qiáng)了用戶的需求欲望，促進(jìn)下一步操作。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中標(biāo)簽設(shè)計(jì)總結(jié)進(jìn)行簡(jiǎn)單的說明。
 

　　一、標(biāo)簽的樣式
 

　　1.1線框標(biāo)簽
 

　　線框標(biāo)簽是比較弱的標(biāo)簽樣式，在列表頁(yè)、詳情頁(yè)都有出現(xiàn)，可單個(gè)或多個(gè)組合，分為彩色和灰色2種。1)彩色線框標(biāo)簽：在模塊中信息層級(jí)較高，是希望引起用戶關(guān)注的內(nèi)容。2)灰色線框標(biāo)簽：是所有標(biāo)簽類型中視覺表現(xiàn)力最弱的形式之一，常作為配角使用。
 

　　1.2. 淺色色塊背景，深色文字標(biāo)簽
 

　　設(shè)計(jì)要點(diǎn)：背景和文字顏色在同一色相內(nèi)，明度和飽和度適當(dāng)調(diào)整相對(duì)于線框標(biāo)簽的視覺表現(xiàn)力和整體性都更強(qiáng)一些，常單個(gè)或單個(gè)類群出現(xiàn)。1)彩色標(biāo)簽：在列表中信息層級(jí)較高2)灰色標(biāo)簽：相對(duì)于灰色線框標(biāo)簽表現(xiàn)力更強(qiáng)一些，常與有顏色的標(biāo)簽搭配使用。
 

　　1.3. 淺色色塊背景加邊框，深色文字標(biāo)簽
 

　　是前2種標(biāo)簽類型的集合，整體表現(xiàn)形式相對(duì)更強(qiáng)一些。
 

　　1.4. 深色塊標(biāo)簽
 

　　深色塊標(biāo)簽視覺表現(xiàn)力更強(qiáng)一些，所以多應(yīng)用在信息層級(jí)較高的場(chǎng)景中，如果需要標(biāo)簽的類型更突出還可以在色塊上增加圖標(biāo)。
 

　　1.5. 圖形標(biāo)簽
 

　　視覺效果更加直觀，設(shè)計(jì)要點(diǎn)：圖形需要表意明確，在用戶認(rèn)知范圍內(nèi)。
 

　　1.6. 組合型標(biāo)簽
 

　　色塊標(biāo)簽、線框標(biāo)簽、圖形標(biāo)簽等多種標(biāo)簽類型的組合，適用于表達(dá)豐富的內(nèi)容。
 

　　1.7. 文字說明型標(biāo)簽
 

　　通常采用高飽和度彩色文字說明，起到輔助說明的作用。

 

　　二、標(biāo)簽在不同類型產(chǎn)品中的應(yīng)用
 

　　對(duì)于用戶來說，標(biāo)簽相當(dāng)于內(nèi)容的關(guān)鍵詞，可以提高用戶的瀏覽效率，對(duì)于設(shè)計(jì)來說，多樣化的信息展現(xiàn)方式可以豐富整個(gè)頁(yè)面，提高視覺表現(xiàn)力。那么標(biāo)簽在不同類型產(chǎn)品中的應(yīng)用有什么特點(diǎn)呢，讓我們一起來看看。
 

　　2.1. 內(nèi)容說明
 

　　內(nèi)容說明標(biāo)簽可分為：1.文字列表為主的信息說明 2.圖片上的說明
 

　　(1) 文字列表為主的信息說明：使用在以文字內(nèi)容為主的頁(yè)面、圖文結(jié)合的feed流頁(yè)面中。

 

　　(2) 圖片上的說明：如視頻類產(chǎn)品，在圖片上增加標(biāo)簽時(shí)多使用飽和度比較高的色塊標(biāo)簽，因?yàn)檫@類圖片本身色彩比較復(fù)雜，標(biāo)簽作為輔助說明需要提高視覺表現(xiàn)力來突出展現(xiàn)。

 

　　2.2. 內(nèi)容互動(dòng)(話題標(biāo)簽)
 

　　內(nèi)容平臺(tái)類產(chǎn)品，為達(dá)到跟其他同屬性內(nèi)容引流的目的，通過標(biāo)簽來滿足用戶想瀏覽其他相關(guān)內(nèi)容的潛在需求。如小紅書的話題標(biāo)簽，圖蟲的圈子標(biāo)簽。

 

　　2.3. 圖片說明
 

　　以圖片為主的UGC和社交領(lǐng)域，用戶通過圖片上的標(biāo)簽找到了自己感興趣的內(nèi)容，這些屬性就是用戶的興趣點(diǎn)，對(duì)內(nèi)容和圖片可以更快速的解讀，大大降低了閱讀成本。

 

　　以小紅書為例，當(dāng)用戶觸摸屏幕時(shí)，圖片上會(huì)出現(xiàn)添加的相關(guān)標(biāo)簽，以白色描邊+黑色半透明磨砂質(zhì)感作為標(biāo)簽背景，同時(shí)有位置指向，一張圖片可以添加文字、語音、背景音樂等標(biāo)簽類型。這種方式也是一種新的溝通方式，效果比圖片加上大段文字描述生動(dòng)了很多。當(dāng)這張圖片被賦予了多個(gè)屬性，標(biāo)簽和用戶之間的互動(dòng)就發(fā)生了。
 

　　2.4. 產(chǎn)品展示
 

　　電商快銷類產(chǎn)品為了達(dá)到業(yè)務(wù)目標(biāo)，會(huì)在產(chǎn)品列表里添加很多促銷或者價(jià)格標(biāo)簽來吸引用戶點(diǎn)擊購(gòu)買，淘寶商品列表使用的標(biāo)簽都是彩色線框標(biāo)簽，網(wǎng)易考拉的會(huì)員優(yōu)惠標(biāo)簽用深色塊樣式突出信息層級(jí)，這么設(shè)計(jì)應(yīng)該是引導(dǎo)用戶開通會(huì)員。如下圖：

 

　　攜程、美團(tuán)酒店模塊，不同的內(nèi)容標(biāo)簽用不同顏色區(qū)分開，層次更加清晰，駕考寶典列表頁(yè)面用灰色標(biāo)簽提煉賣點(diǎn)，用彩色標(biāo)簽突出優(yōu)惠信息。如下圖：

 

　　美團(tuán)外賣以彩色線框標(biāo)簽搭配淺色底深色字的評(píng)語標(biāo)簽來吸引用戶，大眾點(diǎn)評(píng)以單個(gè)文字色塊的樣式突出折扣信息。如下圖：

 

　　餓了么的標(biāo)簽，關(guān)于折扣使用的是彩色線框標(biāo)簽、搭配淺色深字的評(píng)語標(biāo)簽來吸引用戶，到了產(chǎn)品詳情頁(yè)，突出領(lǐng)取優(yōu)惠標(biāo)簽，為什么這么設(shè)計(jì)呢?因?yàn)闈M減的同時(shí)還有優(yōu)惠券可領(lǐng)，這屬于超出預(yù)期值的需求點(diǎn)，能夠很大的提高用戶點(diǎn)外賣的體驗(yàn)。如下圖：

 

　　好了，以上就是今天分享的內(nèi)容，歡迎大家留言討論。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。