在日常生活中，我們經(jīng)常會給他人貼上標(biāo)簽。這些標(biāo)簽可能是基于個人特征、行為或經(jīng)歷而形成的，它們可以幫助我們更好地理解和分類他人。例如，當(dāng)我們初次見到一個人時，我們可能會根據(jù)他們的外貌、穿著和言談舉止來給他們貼上一個“自信”、“開朗”或“膽小”、“內(nèi)向”的標(biāo)簽。我們不可避免地會貼標(biāo)簽或被貼標(biāo)簽，因?yàn)檫@是一種快速且低門檻的有效記憶方式。
關(guān)注不同平臺的標(biāo)簽設(shè)計，發(fā)現(xiàn)平時不太注意的小標(biāo)簽承擔(dān)了許多重要的作用。在電商類設(shè)計中，標(biāo)簽可以強(qiáng)化商品折扣、優(yōu)惠信息、服務(wù)特色等吸引用戶。對于偏向?yàn)g覽和文章發(fā)布類產(chǎn)品，標(biāo)簽設(shè)計旨在方便讀者更好地理解文章內(nèi)容，平臺還可以根據(jù)標(biāo)簽聚合同類文章，建立目錄索引，引導(dǎo)讀者快速查看標(biāo)簽文章。
看似簡單的標(biāo)簽卻有這么強(qiáng)的作用，以下將根據(jù)標(biāo)簽的定義、屬性特征及使用場景作出一些思考和探索，幫助大家對標(biāo)簽有一個更清晰的認(rèn)識。
百度百科對網(wǎng)絡(luò)標(biāo)簽(Tag)定義是：
一種互聯(lián)網(wǎng)內(nèi)容組織方式，是相關(guān)性很強(qiáng)的關(guān)鍵字，它幫助人們輕松的描述和分類內(nèi)容，以便于檢索和分享，Tag已經(jīng)成為web 2.0的重要元素。
Ant Design 對標(biāo)簽給出的定義是：用來進(jìn)行標(biāo)記和分類。使用場景：1.用于標(biāo)記事物的屬性和維度；2.進(jìn)行分類。
TDesign對標(biāo)簽給出的定義是:用于表明主體的類目，屬性或狀態(tài)。
標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統(tǒng)識別。
標(biāo)簽可以幫助傳達(dá)信息、建立可預(yù)知操作、產(chǎn)品分類和營銷引流、優(yōu)化搜索等。通過使用標(biāo)簽，方便用戶快速識別，提升信息轉(zhuǎn)化的效率，在UI設(shè)計中，標(biāo)簽是最常用的設(shè)計組件之一。
標(biāo)簽由容器、文本、圖標(biāo)等元素組成。
三者都是可選的，它們可以隨機(jī)組合，常見的是這5種組合：文本、圖標(biāo)、容器+文本、容器+圖標(biāo)、容器+文本+圖標(biāo)。
文本標(biāo)簽：
更直觀地表達(dá)含義，主要用于抽象的、或分類較多的標(biāo)簽，這種類型標(biāo)簽通常也以#+文字的形式呈現(xiàn)為超鏈接，主要出現(xiàn)在文字內(nèi)容較多的列表頁面、詳情頁的開頭或結(jié)尾。它們也可以被理解為常說的話題標(biāo)簽。通過這些標(biāo)簽，用戶可以快速了解到內(nèi)容的主題和核心，并能夠方便地鏈接到與該內(nèi)容相關(guān)聯(lián)的信息。
圖標(biāo)標(biāo)簽：
更富有設(shè)計感且吸引眼球，但這種圖標(biāo)必須是用戶熟識的、一看就明白含義的；
容器+文本標(biāo)簽：
主要為突出特色、賣點(diǎn)來進(jìn)行促銷，類型及樣式比較多元化，且單個產(chǎn)品可能多達(dá) 4~5 個標(biāo)簽，以此來吸引用戶購買。
圖標(biāo)+文本標(biāo)簽：
面積會較大，視覺沖擊很強(qiáng)，有的出于交互功能的需要，有的則是用在節(jié)日和特別專題。
容器+文本+圖標(biāo)標(biāo)簽：
而圖標(biāo)則是為了進(jìn)一步強(qiáng)調(diào)或補(bǔ)充標(biāo)簽文本的信息，增強(qiáng)用戶的視覺感知。
標(biāo)簽的顏色選擇和搭配對于信息傳遞和品牌塑造具有重要影響。不同的顏色和用色的面積/重量會給用戶帶來不同的感知，比如，綠色代表清新、免費(fèi)，黃色棕色代表尊貴VIP，紅色象征火爆熱門。同時也會對品牌形象產(chǎn)生影響。
-
在白色背景下，我們可以自由地選擇任何顏色作為標(biāo)簽的主體色、輔助色和點(diǎn)綴色。當(dāng)面對同一組信息多個標(biāo)簽時，我們可以通過混合不同顏色來更好地區(qū)分它們。例如，我們可以將主要標(biāo)簽設(shè)置為紅色，次要標(biāo)簽設(shè)置為藍(lán)色，然后將它們組合在一起以形成一個更豐富的視覺層次結(jié)構(gòu)。
-
在圖片背景下，我們的選擇受到了很大的限制。由于圖片本身已經(jīng)具有了豐富的顏色和紋理，因此我們需要謹(jǐn)慎選擇標(biāo)簽的顏色以避免與圖片產(chǎn)生沖突。通常情況下，我們會使用白色/黑色+不透明度或主體色作為標(biāo)簽容器，并將文字設(shè)置為黑色或反白處理以確保其可讀性。
總之，無論是白色背景還是圖片背景都有其獨(dú)特的優(yōu)勢和適用場景。在選擇背景時應(yīng)根據(jù)具體情況進(jìn)行權(quán)衡并做出最佳決策。
標(biāo)簽的形狀設(shè)計在信息視覺傳達(dá)中扮演著重要的角色，不同的形狀代表著不同的信息特性和情感色彩。常用的標(biāo)簽形狀有圓形、矩形（半圓角、全圓角）、氣泡或異形等。
形狀是標(biāo)簽信息傳遞中的視覺輪廓表現(xiàn)，它作為承載信息的容器，對文字元素的包容性極強(qiáng)，能夠使標(biāo)簽信息更加聚焦，讓用戶在獲取內(nèi)容和進(jìn)行信息歸類時更加專注。
在UI設(shè)計中，標(biāo)簽的特征跟生活中的標(biāo)簽也很相似，用以標(biāo)注內(nèi)容分類或內(nèi)容要點(diǎn)，方便用戶快速定位自己需要的內(nèi)容目標(biāo)。 標(biāo)簽還有滿足用戶的隱形需求的作用，當(dāng)用戶在猶豫是否要進(jìn)行下一步操作的時候，標(biāo)簽在一定程度上加強(qiáng)了用戶的需求欲望，促進(jìn)下一步操作。那標(biāo)簽到底有什么作用？
標(biāo)簽的基本功能是分類和突出內(nèi)容要點(diǎn)，以方便用戶快速定位他們需要的信息或功能。標(biāo)簽常用于傳達(dá)產(chǎn)品基本信息、折扣信息、優(yōu)惠信息、產(chǎn)品賣點(diǎn)等。對產(chǎn)品而言，它能優(yōu)化信息層級，又能簡單明確地傳達(dá)產(chǎn)品特點(diǎn)；對用戶而言，可以第一時間獲取關(guān)鍵信息，降低用戶閱讀門檻，所以標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達(dá)特色信息。
例如，美團(tuán)天天神劵、折扣信息等，淘寶里的直降低多少錢、同款低價，讓用戶潛意識地認(rèn)為能夠降低經(jīng)濟(jì)成本。
標(biāo)簽還可以用于建立用戶操作的預(yù)期，讓用戶在使用產(chǎn)品之前就知道點(diǎn)擊后可能發(fā)生的效果，從而增加用戶點(diǎn)擊的興趣和滿意度。
例如：音頻標(biāo)簽、視頻標(biāo)簽“獨(dú)播”、“vip”等，讓用戶在點(diǎn)擊前預(yù)知點(diǎn)擊后的效果。標(biāo)簽還可以用作行為引導(dǎo)，告知某操作的結(jié)果，如淘寶里“常逛的店”，讓用戶提前知悉操作之后得到的結(jié)果，加強(qiáng)點(diǎn)擊的動機(jī)。
品牌性質(zhì)的標(biāo)簽，讓消費(fèi)者對產(chǎn)品產(chǎn)生信任感。同時，標(biāo)簽也是品牌與消費(fèi)者之間的溝通橋梁，通過簡潔明了的文字和視覺元素，傳達(dá)產(chǎn)品的特點(diǎn)和優(yōu)勢。
例如如：“百億補(bǔ)貼”、“官方店”、“品牌”。許多用戶在瀏覽列表時，會通過標(biāo)簽快速判斷是否有必要點(diǎn)擊查看詳情。此外，標(biāo)簽內(nèi)展示強(qiáng)公信力的信息（榜單排名/評分等），可以加強(qiáng)內(nèi)容可靠性及優(yōu)質(zhì)性。
標(biāo)簽廣泛用于用戶區(qū)分產(chǎn)品內(nèi)容，進(jìn)行分類，進(jìn)而確定關(guān)鍵詞，優(yōu)化搜索。避免用戶因浪費(fèi)大量時間瀏覽了非需求內(nèi)的信息而失去耐心。
例如：京東水果蔬菜“時令熱賣”標(biāo)簽和淘寶里的評價標(biāo)簽，用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息，提高瀏覽效率，節(jié)約時間成本。
為用戶打上不同的標(biāo)簽，用于區(qū)分不同用戶群體，分類精準(zhǔn)定向推送產(chǎn)品。標(biāo)簽既能突出產(chǎn)品特色信息、又不會占用太多空間，所以通過對用戶建立好感、吸引其注意力進(jìn)行引流也是一個很不錯的方式。
如：小紅書文末的文字標(biāo)簽、淘寶搜索的“探索發(fā)現(xiàn)”
在營銷中，利用從眾心理可以引導(dǎo)用戶做出購買決策，這類信息廣泛應(yīng)用在標(biāo)簽設(shè)計中，積極引導(dǎo)用戶點(diǎn)擊和轉(zhuǎn)化。
例如，可以展示其他用戶的購買記錄或評價，讓用戶看到其他人對該產(chǎn)品的認(rèn)可和好評，從而增加他們的信任感和購買欲望。像淘寶里的“多少人回購”，銀行理財里的“多少人次購買”等等，都會對當(dāng)前用戶的心理產(chǎn)生極大影響，很多時候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認(rèn)知。 當(dāng)用戶無法決策時，從眾心理會成為影響用戶決策的重要因素。
當(dāng)內(nèi)容狀態(tài)變化且產(chǎn)品希望提示用戶知悉時，標(biāo)簽可以作為告知當(dāng)前狀態(tài)的提示，如上新的“New”、“直播中”等。
此外，告知當(dāng)前狀態(tài)還有營造稀缺性的作用。如“限購多少件”、“即將售罄”，促使用快速決策。
標(biāo)簽不僅僅是產(chǎn)品信息的載體，更是營造氛圍的重要元素。通過選擇適合的色彩、字體和圖案，標(biāo)簽可以傳達(dá)出不同的情感和氛圍，吸引消費(fèi)者的注意力，激發(fā)購買欲望。
例如：“38換新節(jié)”、“上新啦”，有的產(chǎn)品確實(shí)是基于熱度展示的標(biāo)簽，也有的產(chǎn)品只是為了吸引用戶注意力而展示。
在UI設(shè)計中，標(biāo)簽是一個不可或缺的元素，那如何設(shè)計才能達(dá)成業(yè)務(wù)目標(biāo)？
標(biāo)簽設(shè)計的文案（字段）長短盡量簡短清晰，具有一定的識別性、易通性，避免使用復(fù)雜的詞匯和句子。用戶在瀏覽界面時，應(yīng)該能夠快速理解標(biāo)簽的含義。這里所說的精煉并非一味地求短，雖然“短”是標(biāo)簽必備的因素，但有時候過于簡短的標(biāo)簽根本沒辦法給用戶傳達(dá)足夠的信息，甚至?xí)?dǎo)致用戶更加疑惑，這也失去了添加標(biāo)簽的初衷。
在不同的頁面和場景中，標(biāo)簽的設(shè)計應(yīng)該保持一致的風(fēng)格和格式。這包括顏色、字體、大小、布局和位置等方面的一致性。這樣做有助于用戶建立認(rèn)知模型，提高他們的使用效率。然而，盡管標(biāo)簽設(shè)計需要保持一致性，但也需要一定的差異性。這種差異性是針對不同類型和視覺權(quán)重的標(biāo)簽，通過不同的視覺樣式和色彩來體現(xiàn)信息的層級關(guān)系。因此，雖然表面上看起來存在沖突，但實(shí)際上并不矛盾。
標(biāo)簽的顏色應(yīng)該與背景顏色形成對比，以便用戶能夠清楚地看到。同時，顏色的選擇也應(yīng)該考慮到品牌的形象和用戶的視覺感受。
標(biāo)簽的位置應(yīng)該方便用戶操作。例如，重要的標(biāo)簽應(yīng)該放在顯眼的位置，而不太重要的標(biāo)簽信息可以放在次要的位置。
UI 設(shè)計中的標(biāo)簽跟我們?nèi)粘Ｉ钪械臉?biāo)簽很相似，它不僅能對產(chǎn)品作分類、特色標(biāo)記，還能在用戶猶豫不決的時候起到一定的推動作用，是平臺內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過程中至關(guān)重要的一環(huán)。根據(jù)產(chǎn)品的目的和需求，在不同時間和場景下使用合適的標(biāo)簽是至關(guān)重要的。通過簡單精煉的表達(dá)方式，標(biāo)簽?zāi)軌蛟谟邢薜目臻g內(nèi)提供更多的信息維度，吸引用戶的注意并激發(fā)他們的好奇心、提升信息轉(zhuǎn)化的效率。
作者：滿滿滴滴
來源：站酷
藍(lán)藍(lán)設(shè)計(m.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(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è)計公司、用戶體驗(yàn)公司、高端網(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ā)
