<legend id="25fid"></legend>
旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中標(biāo)簽設(shè)計(jì)總結(jié)

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

時(shí)間:2020-08-27來源:5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-08-27點(diǎn)擊量:作者:Gella

  在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)簽樣式,在列表頁、詳情頁都有出現(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è)頁面,提高視覺表現(xiàn)力。那么標(biāo)簽在不同類型產(chǎn)品中的應(yīng)用有什么特點(diǎn)呢,讓我們一起來看看。
 

  2.1. 內(nèi)容說明
 

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

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

 



 

  (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)擊購買,淘寶商品列表使用的標(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ū)分開,層次更加清晰,駕考寶典列表頁面用灰色標(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)品詳情頁,突出領(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)文章。


 

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

老師想和你聊一聊

?2007-2021/ 5wd995.cn 北京漫動(dòng)者教育科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖