<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          超多案例|不容小覷的標簽Tag設計分析

          2024-10-8    資深UI設計者

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

           
           

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

           

          藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

          關鍵詞:UI咨詢、UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司、數據可視化設計公司用戶體驗公司、高端網站設計公司

          銀行金融軟件UI界面設計能源及監控軟件UI界面設計、氣象行業UI界面設計軌道交通界面設計、地理信息系統GIS UI界面設計航天軍工軟件UI界面設計、醫療行業軟件UI界面設計教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發軟件wpf開發、軟件vue開發

           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合