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