UI設計中的標簽設計規(guī)范

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

　　1.理解標簽作用
 

　　2.整理標簽分類
 

　　3.細化標簽規(guī)范
 

　　1.理解標簽作用
 

　　咱也沒整那么多官方定義了，我個人認為標簽就是為了讓用戶快速看到關鍵信息，找到感興趣的內容。
 

　　比如，我喜歡看玄幻類漫畫，如果看到有“玄幻”的標簽：

 

　　就會多關注一下。
 

　　再比如，我去網(wǎng)上買硬盤，希望質量能有所保證，那“自營”標簽，對我來說吸引力就很大：

 

　　這就是標簽最核心的作用。
 

　　2.整理標簽分類
 

　　其實分類的方法有很多，產品、交互、視覺都有不同的分類方式，而且每個平臺的屬性又各不相同。所以這么復雜的情況下，我們必須保持清晰的原則，避免思路混亂。
 

　　根據(jù)自身平臺內容，我嘗試了一種分類方式，推薦給大家參考，按照場景與優(yōu)先級來進行分類標簽。
 

　　場景分為：
 

　　1.封面上的標簽
 

　　2.文字后的標簽

 

　　優(yōu)先級分為：
 

　　1.特殊化
 

　　2.強調型
 

　　3.普通型
 

　　4.弱化型
 

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

 

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

　　1.封面上的標簽(強調型)
 

　　我們采用品牌色來強調標簽，一般用在首頁頻道，這種標簽不能同時出現(xiàn)太多，否則會太花哨太亂：

 

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

　　多個封面同時有標簽的情況也是存在，比如分類頁，封面上都有評分，這時候我們就需要采用普通型(非強調)的標簽，也就是黑色降低透明度：

 

　　封面上的標簽暫時就這兩種，以后也可以根據(jù)需求進行擴展。
 

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

　　特殊型在視覺上是最重的，因為除了顏色是填充色外，形狀也是異形的：

 

　　4.文字后的標簽(強調型)
 

　　強調型形狀上不做異形，但顏色上使用品牌色進行填充：

 

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

　　普通型的標簽，標簽顏色會用有色相的彩色，文字使用品偏色或者其他輔助色：

 

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

　　弱化型會對標簽的視覺重量再次減弱，采用灰色標簽：

 

　　我們可以再看下這六種標簽的整體視覺策略：
 

　　1.封面上的標簽(強調型)
 

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

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

　　4.文字后的標簽(強調型)
 

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

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

　　我用圖片給大家概括一下
 

　　兩種封面上的標簽：

 

　　四種文字后的標簽：

 

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

　　3.細化標簽規(guī)范
 

　　其實整個標簽部分，最重要的還是上一步，想清楚如何分類。
 

　　有了分類之后，在進行規(guī)范的細化，相對來說就沒那么復雜了，注意以下幾個點即可。
 

　　標簽的高度，很簡單，不解釋：

 

　　標簽的寬度，因為字數(shù)不同，所以寬度是不固定的，但我們可以規(guī)定文字的左右安全邊距：

 

　　標簽的文字顏色、大小、粗細、極限值，，其中極限值就是規(guī)定下標簽最大字數(shù)，一個標簽整幾十個字，快成作文了，也不太合適是吧：

 

　　標簽的背景色，不同類型的標簽顏色不同，但需要符合整體視覺策略和設計規(guī)范：

 

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

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