中 標籤 UI設計中的標籤設計規範

2021-10-14 20:59:20 字數 2458 閱讀 7261

1.理解標籤作用

2.整理標籤分類

3.細化標籤規範

1.理解標籤作用

咱也沒整那麼多官方定義了,我個人認為標籤就是為了讓使用者快速看到關鍵資訊,找到感興趣的內容。

比如,我喜歡看玄幻類漫畫,如果看到有「玄幻」的標籤:

就會多關注一下。

再比如,我去網上買硬碟,希望質量能有所保證,那「自營」標籤,對我來說吸引力就很大:

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

2.整理標籤分類

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

場景分為:

1.封面上的標籤

2.文字後的標籤

優先順序分為:

1.特殊化

2.強調型

3.普通型

4.弱化型

有了這樣的劃分,我們就可以根據需求進行自由匹配了:

根據平台目前的需求(以後根據需求可以拓展或者合併),我們可以分為6種型式:

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

我們採用品牌色來強調標籤,一般用在首頁頻道,這種標籤不能同時出現太多,否則會太花哨太亂:

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

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

封面上的標籤暫時就這兩種,以後也可以根據需求進行擴充套件。

3.文字後的標籤(特殊型)

特殊型在視覺上是最重的,ui設計中的標籤設計規範因為除了顏色是填充色外,形狀也是異形的:

4.文字後的標籤(強調型)

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

5.文字後的標籤(普通型)

普通型的標籤,標籤顏色會用有色相的彩色,文字使用品偏色或者其他輔助色:

6.文字後的標籤(弱化型)

弱化型會對標籤的視覺重量再次減弱,採用灰色標籤:

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

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

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

3.文字後的標籤(特殊型)

4.文字後的標籤(強調型)

5.文字後的標籤(普通型)

6.文字後的標籤(弱化型)

兩種封面上的標籤:

四種文字後的標籤:

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

3.細化標籤規範

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

有了分類之後,在進行規範的細化,相對來說就沒那麼複雜了,注意以下幾個點即可。

標籤的高度,很簡單,不解釋:

標籤的寬度,因為字數不同,所以寬度是不固定的,但我們可以規定文字的左右安全邊距:

標籤的文字顏色、大小、粗細、極限值,,其中極限值就是規定下標籤最大字數,乙個標籤整幾十個字,快成作文了,也不太合適是吧:

標籤的背景色,不同型別的標籤顏色不同,但需要符合整體視覺策略和設計規範:

這些屬性規範好,基本就夠用了

越努力越幸運:ui設計必備基礎知識2​zhuanlan.zhihu.com

越努力越幸運:ui設計必備基礎知識3​zhuanlan.zhihu.com

越努力越幸運:ui設計中的按鈕設計分析​zhuanlan.zhihu.com

越努力越幸運:ui設計中的暗黑模式​zhuanlan.zhihu.com

越努力越幸運:如何在ui設計中達到畫面平衡​zhuanlan.zhihu.com

UI設計規範

以使用者為中心。設計由使用者控制的介面,而不是介面控制使用者。清楚一致的設計。所有介面的風格保持一致,所有具有相同含義的術語保持一致,且易於理解 較快的響應速度。簡單且美觀。使用者介面設計的乙個重要原則是使用者應該總是感覺在控制軟體而不是感覺被軟體所控制。操作上假設是使用者 而不是計算機或軟體 開始...

中 標籤 HTML中的標籤

講一下html中檔案標籤和文字標籤的使用 目的是學會使用,所以借助工具可以省好多時間 1.檔案標籤 構成html最基本的標籤 html html文件的根標籤 head 頭標籤。用於引入html文件的一些屬性。引入外部的一些資源 title 標題標籤 body 體標籤 html5中定義該文件是html...

SEO優化 網頁中標籤設計

網頁標題的設計 網路營銷策劃機構 這部分表示網頁標題,網頁標題對網頁在google中的排名有著很大的影響,而且對該網頁在其他搜尋引擎中的排名也同樣有著很大的影響.所以,標題的設計是非常關鍵的.設計網頁標題有以下幾點原則 網頁標籤的設計 以上部分內容是網頁mata標籤,另外還有許多種網頁標籤,不過以上...