UI設(shè)計(jì)中的標(biāo)簽設(shè)計(jì)規(guī)范

　　每個(gè)平臺(tái)都會(huì)存在標(biāo)簽，我們可以根據(jù)自身平臺(tái)屬性，打造一套屬于自己的標(biāo)簽體系，今天AAA教育郭老師就把UI設(shè)計(jì)中的標(biāo)簽設(shè)計(jì)規(guī)范分享給大家。(今天我們僅討論不可點(diǎn)擊標(biāo)簽，也就是展示型標(biāo)簽)：
 

　　1.理解標(biāo)簽作用
 

　　2.整理標(biāo)簽分類(lèi)
 

　　3.細(xì)化標(biāo)簽規(guī)范
 

　　1.理解標(biāo)簽作用
 

　　咱也沒(méi)整那么多官方定義了，我個(gè)人認(rèn)為標(biāo)簽就是為了讓用戶(hù)快速看到關(guān)鍵信息，找到感興趣的內(nèi)容。
 

　　比如，我喜歡看玄幻類(lèi)漫畫(huà)，如果看到有“玄幻”的標(biāo)簽：

 

　　就會(huì)多關(guān)注一下。
 

　　再比如，我去網(wǎng)上買(mǎi)硬盤(pán)，希望質(zhì)量能有所保證，那“自營(yíng)”標(biāo)簽，對(duì)我來(lái)說(shuō)吸引力就很大：

 

　　這就是標(biāo)簽最核心的作用。
 

　　2.整理標(biāo)簽分類(lèi)
 

　　其實(shí)分類(lèi)的方法有很多，產(chǎn)品、交互、視覺(jué)都有不同的分類(lèi)方式，而且每個(gè)平臺(tái)的屬性又各不相同。所以這么復(fù)雜的情況下，我們必須保持清晰的原則，避免思路混亂。
 

　　根據(jù)自身平臺(tái)內(nèi)容，我嘗試了一種分類(lèi)方式，推薦給大家參考，按照?qǐng)鼍芭c優(yōu)先級(jí)來(lái)進(jìn)行分類(lèi)標(biāo)簽。
 

　　場(chǎng)景分為：
 

　　1.封面上的標(biāo)簽
 

　　2.文字后的標(biāo)簽

 

　　優(yōu)先級(jí)分為：
 

　　1.特殊化
 

　　2.強(qiáng)調(diào)型
 

　　3.普通型
 

　　4.弱化型
 

　　有了這樣的劃分，我們就可以根據(jù)需求進(jìn)行自由匹配了：

 

　　根據(jù)平臺(tái)目前的需求(以后根據(jù)需求可以拓展或者合并)，我們可以分為6種型式：
 

　　1.封面上的標(biāo)簽(強(qiáng)調(diào)型)
 

　　我們采用品牌色來(lái)強(qiáng)調(diào)標(biāo)簽，一般用在首頁(yè)頻道，這種標(biāo)簽不能同時(shí)出現(xiàn)太多，否則會(huì)太花哨太亂：

 

　　2.封面上的標(biāo)簽(普通型)
 

　　多個(gè)封面同時(shí)有標(biāo)簽的情況也是存在，比如分類(lèi)頁(yè)，封面上都有評(píng)分，這時(shí)候我們就需要采用普通型(非強(qiáng)調(diào))的標(biāo)簽，也就是黑色降低透明度：

 

　　封面上的標(biāo)簽暫時(shí)就這兩種，以后也可以根據(jù)需求進(jìn)行擴(kuò)展。
 

　　3.文字后的標(biāo)簽(特殊型)
 

　　特殊型在視覺(jué)上是最重的，因?yàn)槌祟伾翘畛渖?，形狀也是異形的?br />
 

　　4.文字后的標(biāo)簽(強(qiáng)調(diào)型)
 

　　強(qiáng)調(diào)型形狀上不做異形，但顏色上使用品牌色進(jìn)行填充：

 

　　5.文字后的標(biāo)簽(普通型)
 

　　普通型的標(biāo)簽，標(biāo)簽顏色會(huì)用有色相的彩色，文字使用品偏色或者其他輔助色：

 

　　6.文字后的標(biāo)簽(弱化型)
 

　　弱化型會(huì)對(duì)標(biāo)簽的視覺(jué)重量再次減弱，采用灰色標(biāo)簽：

 

　　我們可以再看下這六種標(biāo)簽的整體視覺(jué)策略：
 

　　1.封面上的標(biāo)簽(強(qiáng)調(diào)型)
 

　　2.封面上的標(biāo)簽(普通型)
 

　　3.文字后的標(biāo)簽(特殊型)
 

　　4.文字后的標(biāo)簽(強(qiáng)調(diào)型)
 

　　5.文字后的標(biāo)簽(普通型)
 

　　6.文字后的標(biāo)簽(弱化型)
 

　　我用圖片給大家概括一下
 

　　兩種封面上的標(biāo)簽：

 

　　四種文字后的標(biāo)簽：

 

　　這種方式可以參考，但還是要根據(jù)自身內(nèi)容來(lái)進(jìn)行實(shí)際分類(lèi)，只要能分的清楚、透徹，那就是好的分類(lèi)。
 

　　3.細(xì)化標(biāo)簽規(guī)范
 

　　其實(shí)整個(gè)標(biāo)簽部分，最重要的還是上一步，想清楚如何分類(lèi)。
 

　　有了分類(lèi)之后，在進(jìn)行規(guī)范的細(xì)化，相對(duì)來(lái)說(shuō)就沒(méi)那么復(fù)雜了，注意以下幾個(gè)點(diǎn)即可。
 

　　標(biāo)簽的高度，很簡(jiǎn)單，不解釋?zhuān)?br />
 

　　標(biāo)簽的寬度，因?yàn)樽謹(jǐn)?shù)不同，所以寬度是不固定的，但我們可以規(guī)定文字的左右安全邊距：

 

　　標(biāo)簽的文字顏色、大小、粗細(xì)、極限值，，其中極限值就是規(guī)定下標(biāo)簽最大字?jǐn)?shù)，一個(gè)標(biāo)簽整幾十個(gè)字，快成作文了，也不太合適是吧：

 

　　標(biāo)簽的背景色，不同類(lèi)型的標(biāo)簽顏色不同，但需要符合整體視覺(jué)策略和設(shè)計(jì)規(guī)范：

 

　　這些屬性規(guī)范好，基本就夠用了
 

　　好了，以上就是我目前對(duì)于標(biāo)簽的認(rèn)知與梳理，如果你也正在整理平臺(tái)的標(biāo)簽相關(guān)內(nèi)容，希望能夠給你點(diǎn)啟發(fā)。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。