2020-4-24 資深UI設(shè)計者
每個平臺都會存在標(biāo)簽，我們可以根據(jù)自身平臺屬性，打造一套屬于自己的標(biāo)簽體系，幾個思路點分享給大家（今天我們僅討論不可點擊標(biāo)簽，也就是展示型標(biāo)簽）。
咱也沒整那么多官方定義了，我個人認(rèn)為標(biāo)簽就是為了讓用戶快速看到關(guān)鍵信息，找到感興趣的內(nèi)容。
比如，我喜歡看玄幻類漫畫，如果看到有「玄幻」的標(biāo)簽：
就會多關(guān)注一下。
再比如，我去網(wǎng)上買硬盤，希望質(zhì)量能有所保證，那「自營」標(biāo)簽，對我來說吸引力就很大：
這就是標(biāo)簽最核心的作用。
其實分類的方法有很多，產(chǎn)品、交互、視覺都有不同的分類方式，而且每個平臺的屬性又各不相同。所以這么復(fù)雜的情況下，我們必須保持清晰的原則，避免思路混亂。
根據(jù)自身平臺內(nèi)容，我嘗試了一種分類方式，推薦給大家參考，按照場景與優(yōu)先級來進行標(biāo)簽分類。
場景分為：
優(yōu)先級分為：
有了這樣的劃分，我們就可以根據(jù)需求進行自由匹配了：
根據(jù)平臺目前的需求（以后根據(jù)需求可以拓展或者合并），我們可以分為6種型式：
1. 封面上的標(biāo)簽（強調(diào)型）
我們采用品牌色來強調(diào)標(biāo)簽，一般用在首頁頻道，這種標(biāo)簽不能同時出現(xiàn)太多，否則會太花哨太亂：
2. 封面上的標(biāo)簽（普通型）
多個封面同時有標(biāo)簽的情況也是存在，比如分類頁，封面上都有評分，這時候我們就需要采用普通型（非強調(diào)）的標(biāo)簽，也就是黑色降低透明度：
封面上的標(biāo)簽暫時就這兩種，以后也可以根據(jù)需求進行擴展。
3. 文字后的標(biāo)簽（特殊型）
特殊型在視覺上是最重的，因為除了顏色是填充色外，形狀也是異形的：
4. 文字后的標(biāo)簽（強調(diào)型）
強調(diào)型形狀上不做異形，但顏色上使用品牌色進行填充：
5. 文字后的標(biāo)簽（普通型）
普通型的標(biāo)簽，標(biāo)簽顏色會用有色相的彩色，文字使用品偏色或者其他輔助色：
6. 文字后的標(biāo)簽（弱化型）
弱化型會對標(biāo)簽的視覺重量再次減弱，采用灰色標(biāo)簽：
我們可以再看下這六種標(biāo)簽的整體視覺策略：
我用圖片給大家概括一下
兩種封面上的標(biāo)簽：
四種文字后的標(biāo)簽：
這種方式可以參考，但還是要根據(jù)自身內(nèi)容來進行實際分類，只要能分得清楚、透徹，那就是好的分類。
其實整個標(biāo)簽部分，最重要的還是上一步，想清楚如何分類。
有了分類之后，再進行規(guī)范的細化，相對來說就沒那么復(fù)雜了，注意以下幾個點即可。
標(biāo)簽的高度，很簡單，不解釋：
標(biāo)簽的寬度，因為字?jǐn)?shù)不同，所以寬度是不固定的，但我們可以規(guī)定文字的左右安全邊距：
標(biāo)簽的文字顏色、大小、粗細、極限值，其中極限值就是規(guī)定下標(biāo)簽最大字?jǐn)?shù)，一個標(biāo)簽整幾十個字，快成作文了，也不太合適，是吧：
標(biāo)簽的背景色，不同類型的標(biāo)簽顏色不同，但需要符合整體視覺策略和設(shè)計規(guī)范：
這些屬性規(guī)范好，基本就夠用了
文章來源：優(yōu)設(shè) 作者：
藍藍設(shè)計的小編 http://m.88yangsc.com