每個平臺都會存在標(biāo)簽,我們可以根據(jù)自身平臺屬性,打造一套屬于自己的標(biāo)簽體系,今天AAA教育郭老師就把UI設(shè)計(jì)中的標(biāo)簽設(shè)計(jì)規(guī)范分享給大家。(今天我們僅討論不可點(diǎn)擊標(biāo)簽,也就是展示型標(biāo)簽):
1.理解標(biāo)簽作用
2.整理標(biāo)簽分類
3.細(xì)化標(biāo)簽規(guī)范
1.理解標(biāo)簽作用
咱也沒整那么多官方定義了,我個人認(rèn)為標(biāo)簽就是為了讓用戶快速看到關(guān)鍵信息,找到感興趣的內(nèi)容。
比如,我喜歡看玄幻類漫畫,如果看到有“玄幻”的標(biāo)簽:
就會多關(guān)注一下。
再比如,我去網(wǎng)上買硬盤,希望質(zhì)量能有所保證,那“自營”標(biāo)簽,對我來說吸引力就很大:
這就是標(biāo)簽最核心的作用。
2.整理標(biāo)簽分類
其實(shí)分類的方法有很多,產(chǎn)品、交互、視覺都有不同的分類方式,而且每個平臺的屬性又各不相同。所以這么復(fù)雜的情況下,我們必須保持清晰的原則,避免思路混亂。
根據(jù)自身平臺內(nèi)容,我嘗試了一種分類方式,推薦給大家參考,按照場景與優(yōu)先級來進(jìn)行分類標(biāo)簽。
場景分為:
1.封面上的標(biāo)簽
2.文字后的標(biāo)簽
優(yōu)先級分為:
1.特殊化
2.強(qiáng)調(diào)型
3.普通型
4.弱化型
有了這樣的劃分,我們就可以根據(jù)需求進(jìn)行自由匹配了:
根據(jù)平臺目前的需求(以后根據(jù)需求可以拓展或者合并),我們可以分為6種型式:
1.封面上的標(biāo)簽(強(qiáng)調(diào)型)
我們采用品牌色來強(qiáng)調(diào)標(biāo)簽,一般用在首頁頻道,這種標(biāo)簽不能同時出現(xiàn)太多,否則會太花哨太亂:
2.封面上的標(biāo)簽(普通型)
多個封面同時有標(biāo)簽的情況也是存在,比如分類頁,封面上都有評分,這時候我們就需要采用普通型(非強(qiáng)調(diào))的標(biāo)簽,也就是黑色降低透明度:
封面上的標(biāo)簽暫時就這兩種,以后也可以根據(jù)需求進(jìn)行擴(kuò)展。
3.文字后的標(biāo)簽(特殊型)
特殊型在視覺上是最重的,因?yàn)槌祟伾翘畛渖?,形狀也是異形的?br />
4.文字后的標(biāo)簽(強(qiáng)調(diào)型)
強(qiáng)調(diào)型形狀上不做異形,但顏色上使用品牌色進(jìn)行填充:
5.文字后的標(biāo)簽(普通型)
普通型的標(biāo)簽,標(biāo)簽顏色會用有色相的彩色,文字使用品偏色或者其他輔助色:
6.文字后的標(biāo)簽(弱化型)
弱化型會對標(biāo)簽的視覺重量再次減弱,采用灰色標(biāo)簽:
我們可以再看下這六種標(biāo)簽的整體視覺策略:
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)容來進(jìn)行實(shí)際分類,只要能分的清楚、透徹,那就是好的分類。
3.細(xì)化標(biāo)簽規(guī)范
其實(shí)整個標(biāo)簽部分,最重要的還是上一步,想清楚如何分類。
有了分類之后,在進(jìn)行規(guī)范的細(xì)化,相對來說就沒那么復(fù)雜了,注意以下幾個點(diǎn)即可。
標(biāo)簽的高度,很簡單,不解釋:
標(biāo)簽的寬度,因?yàn)樽謹(jǐn)?shù)不同,所以寬度是不固定的,但我們可以規(guī)定文字的左右安全邊距:
標(biāo)簽的文字顏色、大小、粗細(xì)、極限值,,其中極限值就是規(guī)定下標(biāo)簽最大字?jǐn)?shù),一個標(biāo)簽整幾十個字,快成作文了,也不太合適是吧:
標(biāo)簽的背景色,不同類型的標(biāo)簽顏色不同,但需要符合整體視覺策略和設(shè)計(jì)規(guī)范:
這些屬性規(guī)范好,基本就夠用了
好了,以上就是我目前對于標(biāo)簽的認(rèn)知與梳理,如果你也正在整理平臺的標(biāo)簽相關(guān)內(nèi)容,希望能夠給你點(diǎn)啟發(fā)。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc