大家好，我是 Clippp，今天為大家分享的是「徽標(biāo)設(shè)計」。說到徽標(biāo)（Badge）設(shè)計，可能有些讀者會覺得陌生，但是大家肯定都知道手機軟件上那些沒完沒了的小紅點提示，這種設(shè)計就是運用了徽標(biāo)（Badge）組件。

徽標(biāo)很常見卻又很容易被忽視，除了常見的小紅點，根據(jù)使用場景的不同，徽標(biāo)組件還有其他設(shè)計樣式，比如在小紅點上加數(shù)字、文字、狀態(tài)……而且除了圓形，徽標(biāo)還有很多其他形狀，如果你也忽視了這些關(guān)于徽標(biāo)的設(shè)計細(xì)節(jié)，一起來看看吧~

徽標(biāo)的四種類型

徽標(biāo)組件有純圓點、數(shù)值、文字、圖標(biāo) 4 種常見的類型：

1. 純圓點

純圓點徽標(biāo)是最常用的類型，作為一個輕量級的提醒，引導(dǎo)用戶點擊某些特定的功能。

純圓點徽標(biāo)還可以用來區(qū)分用戶的狀態(tài)，顯示用戶是否在線。

2. 數(shù)值

帶有數(shù)值的徽標(biāo)用來表示具體的數(shù)量，主要用在消息通知、添加購物車、外賣點餐等場景。例如在消息通知的場景中，消息 icon 上顯示的數(shù)值可以用來告訴用戶有幾條未讀的新消息。

又或者在網(wǎng)購或點餐等場景中，通過購物車的數(shù)值徽標(biāo)的變化，就能知道已經(jīng)選擇了多少商品或食物。

3. 文字

文字主要有兩種使用類型，一種是單獨的文字徽標(biāo)，多用在電商運營等活動場景中，通過顯示優(yōu)惠促銷來吸引用戶。例如在某多多首頁的功能圖標(biāo)區(qū)域，通過加入不同的文字徽標(biāo)，能夠告訴用戶有新的“限時秒殺”活動和“立減 2 元”的充值優(yōu)惠，鼓勵用戶采取行動。

另一種是作為文字標(biāo)簽，放在 UI 卡片的任意一角，用來展示某個熱門的話題或者顯示瀏覽量等。

或者放在內(nèi)容中，用來突出重要的活動。關(guān)于標(biāo)簽組件，還有很有需要注意的設(shè)計點，后期我會單獨出一篇文章展開講講標(biāo)簽設(shè)計。

4. 圖標(biāo)

在元素基礎(chǔ)上疊加一個圖標(biāo)來顯示當(dāng)前的狀態(tài)，或者對用戶的反饋做出響應(yīng)，常用的圖標(biāo)狀態(tài)包括成功、失敗、警告。

在一些交友類產(chǎn)品中，可以用圖標(biāo)徽標(biāo)表示哪些用戶已經(jīng)過實名認(rèn)證。

Tips：根據(jù)使用場景的需要，一個 UI 頁面中可以包含多種徽標(biāo)類型。在收件箱中，使用右上角的數(shù)值徽標(biāo)展示新收到的郵件數(shù)量，下方純圓點提示可以明確區(qū)分出新郵件和已讀郵件。

徽標(biāo)設(shè)計的五個要素

雖然徽標(biāo)看起來很簡單，但想要得到一個獨特的徽標(biāo)，仍然需要考慮顏色、圓角、描邊、陰影、位置等設(shè)計要素。

1. 顏色填充

利用徽標(biāo)顏色來調(diào)整內(nèi)容優(yōu)先級。背景色 100%的徽標(biāo)比半透明(不透明度為 15–20%)的徽標(biāo)視覺效果更明顯，那么重要的內(nèi)容優(yōu)先使用100%的顏色填充，相對次要的內(nèi)容則使用半透明度的徽標(biāo)。

徽標(biāo)的顏色并不局限于某一種，更重要的是要靈活使用，做到在每個頁面中都能有效吸引用戶視線并且易于識別。

2. 圓角半徑

調(diào)整徽標(biāo)的圓角半徑來改變?nèi)萜鞯耐庑?。除了基礎(chǔ)的圓形、方形，也可以考慮使用長條狀矩形、氣泡形、不規(guī)則形狀等外形樣式。

徽標(biāo)大多用在原有元素的基礎(chǔ)上，所以在設(shè)計徽標(biāo)外形時，還要考慮原有元素的樣式和風(fēng)格，例如原有元素是圓形，那么徽標(biāo)也應(yīng)該考慮設(shè)計成圓形，這樣才能和原有圖標(biāo)統(tǒng)一，跟整個 UI 頁面搭配。

3. 輪廓描邊

仔細(xì)觀察就會發(fā)現(xiàn)，大多數(shù)徽標(biāo)并沒有和原有元素貼在一起，而是相切一定距離的寬度。

通過給徽標(biāo)加入與背景色相同的描邊，既能將徽標(biāo)單獨展示出來，還能保證徽標(biāo)在任何背景顏色上都能夠被看到。

4. 添加陰影

通過給徽標(biāo)設(shè)置一個平滑的陰影(使用相同的顏色)，能夠得到一個微妙而優(yōu)雅的懸停效果。

5. 位置關(guān)系

徽標(biāo)容器的長度根據(jù)內(nèi)容量的多少而定，容器長度可以向左、向右或從中心擴展。當(dāng)徽標(biāo)向右延伸時，需要注意徽標(biāo)距離右側(cè)相鄰的圖標(biāo)之間的距離，避免徽標(biāo)太長影響相鄰圖標(biāo)的顯示。

靈活運用特定的文字縮寫可以有效減少內(nèi)容量并節(jié)省空間，例如使用“99+”來表示超過 100 條的消息，用“4.8k”表示 4800 位關(guān)注者。

最后

以上就是徽標(biāo)(Badge)設(shè)計容易忽略的設(shè)計點，希望通過這些細(xì)節(jié)能幫助你打磨和改善產(chǎn)品的體驗。

「組件系列」的其他文章，近期也會不斷更新，歡迎大家關(guān)注~

歡迎關(guān)注作者微信公眾號：「Clip設(shè)計夾」