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