手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析

2024-10-8    資深UI設(shè)計者 設(shè)計管理與成長

 
 
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
 
 
 
商家會做各種力度的促銷活動。大家現(xiàn)在打開APP會不會下意識會關(guān)注下標(biāo)簽Tag里的信息,比如電商類活動,我們會關(guān)注有沒有折扣、活動、高性價比的服務(wù)等等~
 
內(nèi)容類的會關(guān)注是否帶話題、發(fā)布人或是內(nèi)容的屬性;功能類的會關(guān)注類型選擇或者是相關(guān)引導(dǎo)操作。
其實(shí)不同用戶對不同平臺的標(biāo)簽感知度以及能夠投入的注意力是不同的。
 
比如大多用戶對
重消費(fèi)重決策
的電商產(chǎn)品標(biāo)簽的關(guān)注度要遠(yuǎn)遠(yuǎn)高于內(nèi)容型和功能型產(chǎn)品。但凡商品有優(yōu)惠,用戶火眼金睛一定會關(guān)注到,生怕錯過一根羊毛;那這個情況下,用戶對標(biāo)簽的感知度是比較強(qiáng)的,樣式設(shè)計的相對突出用戶是不會太反感的。
而像偏瀏覽型的內(nèi)容產(chǎn)品,如果露出太多且太重,用戶可能會被打斷瀏覽動線從而產(chǎn)生不好的使用體驗。
所以不同類型產(chǎn)品,標(biāo)簽設(shè)計一定要適用于自身的產(chǎn)品調(diào)性。不違和且恰到好處的提醒用戶達(dá)成產(chǎn)品策略。
 
目錄
一、標(biāo)簽的了解
二、為什么需要標(biāo)簽
三、標(biāo)簽的分類
四、不同標(biāo)簽類型的使用與設(shè)計
五、總結(jié)
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
一般對標(biāo)簽給出的定義是“用來進(jìn)行標(biāo)記和分類”。一是用于標(biāo)記事物的屬性和維度,二是進(jìn)行分類。
整體基于功能屬性和信息層級,將標(biāo)簽的樣式區(qū)分了多種樣式。由此拓展到移動端我們在做標(biāo)簽的設(shè)計時可以以此作為參考。
功能維度
來看分為七種,分別是:
1、基本標(biāo)簽
2、動態(tài)添加和刪除
3、添加動畫
4、可選擇標(biāo)簽
5、預(yù)設(shè)狀態(tài)的標(biāo)簽
6、多彩標(biāo)簽
7、圖標(biāo)按鈕
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
視覺維度
分為五種,分別是:
1、灰色描邊
2、透明度彩色
3、透明度彩色+圖標(biāo)
4、實(shí)色彩色
5、實(shí)色彩色+圖標(biāo)
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
維基百科給出的定義是:標(biāo)簽是指貼在包裝或產(chǎn)品上的一張紙、塑料薄膜、布、金屬或其他材料,上面寫有相關(guān)產(chǎn)品或物品的信息。衣服上的標(biāo)簽又稱吊牌,它通過繩子或長條的塑料與衣服相連。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
不管是誰的定義,我們可以觀察到幾個關(guān)鍵詞,比如
“分類” “標(biāo)記” “相關(guān)信息” “向用戶展示” “警告用戶”
;通過幾個關(guān)鍵詞我們可以接著思考,標(biāo)簽為什么會被逐漸應(yīng)用到移動產(chǎn)品當(dāng)中?其次標(biāo)簽在產(chǎn)品中又有那些分類呢?
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
從兩個維度來看:一是對于產(chǎn)品而言為什么需要展示標(biāo)簽【標(biāo)簽對產(chǎn)品實(shí)際產(chǎn)生的價值/收入?】;二是對于用戶而言為什么需要展示標(biāo)簽【用戶可以通過標(biāo)簽獲得什么價值/體驗?】
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
我分別從電商產(chǎn)品、內(nèi)容產(chǎn)品、功能產(chǎn)品,看一看標(biāo)簽對于產(chǎn)品方和用戶方的作用是哪些。
 
一、電商產(chǎn)品
產(chǎn)品側(cè):
1、通過
條件性讓利
使消費(fèi)者感到占了便宜,從而刺激消費(fèi)
提升轉(zhuǎn)化
,而標(biāo)簽就是吸引用戶注意力的抓手。
2、通過標(biāo)簽為用戶提供更多的
個性化推薦
,以及被搜索引擎和推薦系統(tǒng)發(fā)現(xiàn)和推薦,提升商品的
曝光率和銷量
。
用戶側(cè):
1、及時通過標(biāo)簽識別關(guān)注并享受到優(yōu)惠,
薅的到羊毛
2、通過標(biāo)簽
獲得更多信息
。
 
二、內(nèi)容平臺
產(chǎn)品側(cè):
關(guān)注的更多是
內(nèi)容引流
,而標(biāo)簽則是用來
內(nèi)容歸類及提示用戶
的媒介。
用戶側(cè):
通過標(biāo)簽來
識別判斷
優(yōu)質(zhì)的博主及內(nèi)容、或是感興趣且合適的內(nèi)容信息。
 
三、功能平臺
產(chǎn)品側(cè):
關(guān)注的更多是
引導(dǎo)用戶操作
,而標(biāo)簽可以用來
信息傳遞和提示用戶
用戶側(cè):
標(biāo)簽可以適時輔助用戶
高效完成任務(wù)
,快速獲取到信息且有一個較好的使用體驗。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
接下來還是從電商、內(nèi)容、功能這三大類產(chǎn)品來進(jìn)行標(biāo)簽種類的劃分,將其劃分為6種:
 
1、功能標(biāo)簽
2、內(nèi)容標(biāo)簽
3、商品標(biāo)簽
4、活動標(biāo)簽
5、價格標(biāo)簽
6、用戶標(biāo)簽
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
1·功能標(biāo)簽
功能標(biāo)簽劃分為
篩選分類
內(nèi)容聚合
兩種。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
2·內(nèi)容標(biāo)簽
內(nèi)容標(biāo)簽劃分為 
話題、內(nèi)容屬性、內(nèi)容提煉、內(nèi)容彈幕 四種。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
3·商品標(biāo)簽
商品標(biāo)簽劃分為 
品牌/平臺、促銷利益點(diǎn)、服務(wù)保障、物流時效 四種。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
4·活動標(biāo)簽
活動標(biāo)簽劃分為 
大促角標(biāo)、營銷活動、營銷招手、榜單 四種。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
5·價格標(biāo)簽
價格標(biāo)簽劃分為 
促銷價、專享價 兩種。
[促銷價] 指商品設(shè)置了促銷,這個價格就需要自動計算并展示給消費(fèi)者,一般包含了補(bǔ)貼,滿減,預(yù)售,以及直降折扣等等。
[專享價] 指商品提供給某一些人群或某一個區(qū)域的價格,比如店鋪會員,平臺會員等
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
6·用戶標(biāo)簽
用戶標(biāo)簽劃分為 
用戶交易行為、用戶身份屬性 兩種。
用戶交易行為是指用戶過往在平臺的一些購買記錄、評論數(shù)據(jù);而用戶身份屬性大多是指會員等級劃分。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
上面了解了標(biāo)簽的定義、用處、分類,接下來再看看如何去進(jìn)行標(biāo)簽設(shè)計~
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
主要從
視覺維度
切入,拆分為三點(diǎn)來看:
標(biāo)簽的色彩、標(biāo)簽的形狀、標(biāo)簽的構(gòu)成
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
一、標(biāo)簽色彩
不同色彩、用色的面積/重量,給到用戶的感知以及品牌傳達(dá)是不同的。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
1·品牌色延展
不同產(chǎn)品的標(biāo)簽多采用 品牌色 延展應(yīng)用。比如,京東紅、知乎藍(lán)、豆瓣綠;當(dāng)然除了主要應(yīng)用自身的品牌色,依據(jù)品牌顏色映射以及業(yè)務(wù)自有顏色,也會延展出一些輔助色。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
2·用色面積/重量
用色面積和重量,可以拆分五個維度去看分別是:區(qū)塊面積、描邊粗細(xì)、顏色飽和、字體、字重字色變化。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
而標(biāo)簽用色面積主要依賴于標(biāo)簽想要 
傳遞的信息及層級的劃分。
我拿電商產(chǎn)品舉例 (上圖由左往右分別是京東、淘寶、拼多多):
對于用戶而言是 
重要決策信息
時,一般會采用飽和較高的紅色進(jìn)行完全填充。
對于用戶而言是 
次要決策信息
時,可采用正負(fù)形樣式。
對于用戶而言是 
一般決策信息
時,可采用淺色描邊樣式。
對于用戶而言是 
弱決策信息
時,可采用灰色描邊或者淡淺色拖底標(biāo)簽。
通過不同層次的顏色表達(dá),來進(jìn)行整體內(nèi)容層級的劃分,并將多個信息有序的傳遞給用戶。以此去更好的承接產(chǎn)品策略。
 
二、標(biāo)簽形狀
標(biāo)簽的形狀決定了整體的 體積占比、對文字信息的承載包容 、與周邊環(huán)境的互相作用。
主要的標(biāo)簽形狀有方形、橢圓、氣泡、異形四種。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
1·方形標(biāo)簽
方形標(biāo)簽更接近現(xiàn)實(shí)生活中我們隨處可見的一些標(biāo)簽樣式,比如衣服上的標(biāo)簽、一些危險警告標(biāo)簽,其次在頁面場景中較多標(biāo)簽排序時,方形標(biāo)簽顯得更
規(guī)整有序
。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
2·橢圓標(biāo)簽
橢圓標(biāo)簽,更圓潤,隨著進(jìn)來各大APP推崇大圓角卡片的設(shè)計手法以來,一些 
信息歸類 
多用橢圓形標(biāo)簽表達(dá)。其次當(dāng)頁面多為方形標(biāo)簽時,一個橢圓標(biāo)簽恰恰能差異化突出該信息。
【需要注意的是,橢圓標(biāo)簽類似可操作的button,多用于可點(diǎn)擊或者選擇觸發(fā)的一些標(biāo)簽樣式】
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
3·氣泡標(biāo)簽
氣泡標(biāo)簽有 
明確的指向性
且 
相對獨(dú)立
,多用在價格表達(dá)、營銷招手以及一些新功能提示上。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
4·異形標(biāo)簽
異形標(biāo)簽一般形狀會更自由一些,設(shè)計師發(fā)揮的空間相對較大,用于表達(dá)較強(qiáng)業(yè)務(wù)屬性上,比如大促、營銷活動、
重點(diǎn)內(nèi)容引流
。因為形狀的差異性表達(dá),用戶一般會首先注意到。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
【正因為異形標(biāo)簽形狀相對自由,因此需要注意與周邊環(huán)境的相互作用,當(dāng)異形標(biāo)簽放置在圖片上方時,我們要依據(jù)圖片的大小和圖片上方的信息,考量標(biāo)簽的樣式以及兩者之間的排版關(guān)系?!?/div>
 
三、標(biāo)簽構(gòu)成
標(biāo)簽的構(gòu)成主要是標(biāo)簽的組合表達(dá),常規(guī)來看是一個框框里面一段文字,除此之外還有純文字表達(dá)、以及特殊樣式【文字+ICON】
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
 
純文字表達(dá)
純文字表達(dá)的應(yīng)用場景主要有兩種。
第一種在內(nèi)容產(chǎn)品中多表示話題,與前后內(nèi)容關(guān)聯(lián),以此觸發(fā)用戶流入下一層內(nèi)容池。
第二種應(yīng)用在多產(chǎn)品中的次提醒內(nèi)容,比如商品的輔助信息、用戶的交易行為、或者文章的關(guān)鍵詞、作者屬性等。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
ICON+文字
這種一般可以劃分為三類,分別是常規(guī)樣式(獨(dú)立icon+標(biāo)簽字段)、正負(fù)形|色塊區(qū)隔(獨(dú)立色塊強(qiáng)化展示icon)、修飾文字(文字作為主修飾元素展示)
我們可以發(fā)現(xiàn),這三種類型的標(biāo)簽區(qū)塊面積的逐級增加,透傳能力也隨之逐級增強(qiáng)。
此外這幾種結(jié)構(gòu)的標(biāo)簽主要應(yīng)用在
品牌/平臺、營銷活動、用戶身份、功能屬性。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
不同的產(chǎn)品依據(jù)自身的調(diào)性和訴求會呈現(xiàn)出不同層級樣式的標(biāo)簽,盡管如此我們在設(shè)計中始終要注意:
在保持整體表達(dá)手法統(tǒng)一的情況下尋找差異;除了基礎(chǔ)屬性的統(tǒng)一,還需要盡量和自身產(chǎn)品的設(shè)計手法保持一致。
超多案例|不容小覷的標(biāo)簽Tag設(shè)計分析
 
 
標(biāo)簽雖然只是一個小小的視覺表達(dá),TA可以是不同的形狀、大小、顏色,但卻很考量設(shè)計師是否能夠著眼于細(xì)節(jié)。基于產(chǎn)品策略和用戶體驗去設(shè)計,助力產(chǎn)品正向的提升轉(zhuǎn)化、有效的傳遞信息、友好的引導(dǎo)用戶操作、并能形成統(tǒng)一的設(shè)計體系。
 
總結(jié)下來有幾個關(guān)鍵點(diǎn)需要注意:
1、
明確標(biāo)簽的作用和用途:
在設(shè)計標(biāo)簽之前,設(shè)計師需要了解標(biāo)簽的作用和用途。有助于我們更好地選擇適當(dāng)?shù)臉邮?、顏色和位置?/div>
2、
選擇適當(dāng)?shù)念伾蜆邮剑?/div>
標(biāo)簽的顏色和樣式應(yīng)該與整個UI設(shè)計風(fēng)格保持一致,同時需要注意與其他元素的整體性和對比,確保標(biāo)簽易于辨認(rèn)和識別。一般情況下我們可以選擇相對突出的顏色,吸引用戶的注意力,但也要注意避免過多的顏色使用導(dǎo)致視覺混亂。
3、
考慮標(biāo)簽的位置和大?。?/div>
標(biāo)簽的位置和大小也非常重要,因為它們決定了標(biāo)簽的可見性和易用性。標(biāo)簽通常放置在內(nèi)容上方或下方,并且與內(nèi)容之間有一定的距離,以避免視覺混亂。標(biāo)簽的大小應(yīng)該根據(jù)其重要性和內(nèi)容長度來確定,以確保標(biāo)簽的易讀性和易操作性。
4、
使用簡潔明確的文本:
標(biāo)簽的文本應(yīng)該簡明扼要,而且具有表達(dá)清晰、易懂的特點(diǎn)。
5、
確保標(biāo)簽的一致性和可預(yù)測性:
標(biāo)簽的一致性和可預(yù)測性是保證用戶體驗的關(guān)鍵。它以避免用戶的困惑和誤解。例如,標(biāo)簽的樣式、位置和文本應(yīng)該在整個UI中保持一致,以便用戶更容易理解和使用。

 
 

作者:cclava
鏈接:https://www.zcool.com.cn/article/ZMTYzNTc2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

 

藍(lán)藍(lán)設(shè)計(m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

 

分享本文至:

日歷

鏈接

個人資料

存檔