編輯導語：提起“徽標設計”，不少使用者可能都會有點陌生，但其實它在我們的日常生活應用中十分常見，其相關設計也有許多細節是需要注意的。本篇文章裡，作者便總結了徽標設計上的一些設計細節，一起來看一下吧。
說到徽標（Badge）設計，可能有些讀者會覺得陌生，但是大家肯定都知道手機軟體上那些
沒完沒了的小紅點提示
，這種設計就是運用了
徽標（Badge）元件
。徽標很常見卻又很容易被忽視，除了常見的小紅點，根據使用場景的不同，徽標元件還有其他設計樣式，比如
在小紅點上加數字、文字、狀態……
而且除了圓形⭕️，徽標還有很多其他形狀，如果你也忽視了這些關於徽標的設計細節，一起來看看吧~
一、徽標的四種類型
徽標元件有純圓點、數值、文字、圖示4種常見的型別：
1. 圓點
純圓點徽標是最常用的型別，作為一個輕量級的提醒，引導使用者點選某些特定的功能。
純圓點徽標還可以用來區分使用者的狀態，顯示使用者是否線上。
2. 數值
帶有數值的徽標用來表示具體的數量，主要用在訊息通知、新增購物車、外賣點餐等場景。例如在訊息通知的場景中，訊息icon上顯示的數值可以用來告訴使用者有幾條未讀的新訊息。
又或者在網購或點餐等場景中，透過
購物車
的數值徽標的變化，就能知道已經選擇了多少商品或食物。
3. 文字
文字主要有兩種使用型別，一種是單獨的文字徽標，多用在電商運營等活動場景中，透過顯示優惠促銷來吸引使用者。
例如在某多多首頁的功能圖示區域，透過加入不同的文字徽標，能夠告訴使用者有新的“限時秒殺”活動和“立減2元”的充值優惠，鼓勵使用者採取行動。
另一種是作為文字標籤，放在UI卡片的任意一角，用來展示某個熱門的話題或者顯示瀏覽量等。
或者放在內容中，用來突出重要的活動。關於標籤元件，還有很有需要注意的設計點，後期設計夾會單獨出一篇文章展開講講標籤設計。
4. 圖示
在元素基礎上疊加一個圖示來顯示當前的狀態，或者對使用者的反饋做出響應，常用的圖示狀態包括成功、失敗、警告。
在一些交友類產品中，可以用圖示徽標表示哪些使用者已經過實名認證。
Tips：
根據使用場景的需要，一個UI頁面中可以包含多種徽標型別。在收件箱中，使用右上角的數值徽標展示新收到的郵件數量，下方純圓點提示可以明確區分出新郵件和已讀郵件。
二、徽標設計的五個要素
雖然徽標看起來很簡單，但想要得到一個獨特的徽標，仍然需要考慮顏色、圓角、描邊、陰影、位置等設計要素。
1. 顏色填充
利用徽標顏色來
調整內容優先順序
。背景色100%的徽標比半透明（不透明度為15–20%）的徽標視覺效果更明顯，那麼重要的內容優先使用100%的顏色填充，相對次要的內容則使用半透明度的徽標。
徽標的顏色並不侷限於某一種，更重要的是要靈活使用，做到在每個頁面中都能有效吸引使用者視線並且易於識別。
2. 圓角半徑
調整徽標的圓角半徑來改變容器的外形。除了基礎的圓形、方形，也可以考慮使用
長條狀矩形、氣泡形、不規則形狀
等外形樣式。
徽標大多用在原有元素的基礎上，所以在設計徽標外形時，還要考慮原有元素的樣式和風格，例如原有元素是圓形，那麼徽標也應該考慮設計成圓形，這樣才能和原有圖示統一，跟整個UI頁面搭配。
3. 輪廓描邊
仔細觀察就會發現，大多數徽標並沒有和原有元素貼在一起，而是相切一定距離的寬度。
透過給徽標加入與背景色相同的描邊，既能將徽標
單獨展示出來
，還能保證徽標在任何背景顏色上都能夠被看到。
4. 新增陰影
透過給徽標設定一個平滑的陰影（使用相同的顏色），能夠得到一個微妙而優雅的懸停效果。
5. 位置關係
徽標容器的長度根據根據內容量的多少而定，容器長度可以
向左、向右或從中心擴充套件
。當徽標向右延伸時，需要注意徽標距離右側相鄰的圖示之間的距離，避免徽標太長影響相鄰圖示的顯示。
靈活運用
特定的文字縮寫
可以有效減少內容量並節省空間，例如使用“99+”來表示超過100條的訊息，用“4。8k”表示4800位關注者。
三、最後
以上就是
徽標（Badge）設計
容易忽略的設計點，希望透過這些細節能幫助你打磨和改善產品的體驗。
「元件系列」
的其他文章，近期也會不斷更新，歡迎大家關注~
#專欄作家#
作者：Clippp，微信公眾號：Clip設計夾。每週精選設計文章，專注分享關於產品、互動、UI視覺上的設計思考。
本文原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。
