徽標的四種類型
徽標組件有純圓點、數(shù)值、文字、圖標4種常見的類型：
純圓點
純圓點徽標是最常用的類型，作為一個輕量級的提醒，引導用戶點擊某些特定的功能。
純圓點徽標還可以用來區(qū)分用戶的狀態(tài)，顯示用戶是否在線。
數(shù)值
帶有數(shù)值的徽標用來表示具體的數(shù)量，主要用在消息通知、添加購物車、外賣點餐等場景。例如在消息通知的場景中，消息icon上顯示的數(shù)值可以用來告訴用戶有幾條未讀的新消息。
又或者在網(wǎng)購或點餐等場景中，通過購物車的數(shù)值徽標的變化，就能知道已經(jīng)選擇了多少商品或食物。
文字
文字主要有兩種使用類型，一種是單獨的文字徽標，多用在電商運營等活動場景中，通過顯示優(yōu)惠促銷來吸引用戶。例如在某多多首頁的功能圖標區(qū)域，通過加入不同的文字徽標，能夠告訴用戶有新的“限時秒殺”活動和“立減2元”的充值優(yōu)惠，鼓勵用戶采取行動。
另一種是作為文字標簽，放在UI卡片的任意一角，用來展示某個熱門的話題或者顯示瀏覽量等。
或者放在內(nèi)容中，用來突出重要的活動。關于標簽組件，還有很有需要注意的設計點，后期設計夾會單獨出一篇文章展開講講標簽設計。
圖標
在元素基礎上疊加一個圖標來顯示當前的狀態(tài)，或者對用戶的反饋做出響應，常用的圖標狀態(tài)包括成功、失敗、警告。
在一些交友類產(chǎn)品中，可以用圖標徽標表示哪些用戶已經(jīng)過實名認證。
Tips：根據(jù)使用場景的需要，一個UI頁面中可以包含多種徽標類型。在收件箱中，使用右上角的數(shù)值徽標展示新收到的郵件數(shù)量，下方純圓點提示可以明確區(qū)分出新郵件和已讀郵件。
徽標設計的五個要素
雖然徽標看起來很簡單，但想要得到一個獨特的徽標，仍然需要考慮顏色、圓角、描邊、陰影、位置等設計要素。
顏色填充
利用徽標顏色來調(diào)整內(nèi)容優(yōu)先級。背景色100%的徽標比半透明(不透明度為15–20%)的徽標視覺效果更明顯，那么重要的內(nèi)容優(yōu)先使用100%的顏色填充，相對次要的內(nèi)容則使用半透明度的徽標。
徽標的顏色并不局限于某一種，更重要的是要靈活使用，做到在每個頁面中都能有效吸引用戶視線并且易于識別。
圓角半徑
調(diào)整徽標的圓角半徑來改變?nèi)萜鞯耐庑巍３嘶A的圓形、方形，也可以考慮使用長條狀矩形、氣泡形、不規(guī)則形狀等外形樣式。
輪廓描邊
仔細觀察就會發(fā)現(xiàn)，大多數(shù)徽標并沒有和原有元素貼在一起，而是相切一定距離的寬度。
通過給徽標加入與背景色相同的描邊，既能將徽標單獨展示出來，還能保證徽標在任何背景顏色上都能夠被看到。
添加陰影
通過給徽標設置一個平滑的陰影(使用相同的顏色)，能夠得到一個微妙而優(yōu)雅的懸停效果。
位置關系
徽標容器的長度根據(jù)根據(jù)內(nèi)容量的多少而定，容器長度可以向左、向右或從中心擴展。當徽標向右延伸時，需要注意徽標距離右側相鄰的圖標之間的距離，避免徽標太長影響相鄰圖標的顯示。
靈活運用特定的文字縮寫可以有效減少內(nèi)容量并節(jié)省空間，例如使用“99+”來表示超過100條的消息，用“4.8k”表示4800位關注者。
最后
以上就是徽標(Badge)設計容易忽略的設計點，希望通過這些細節(jié)能幫助你打磨和改善產(chǎn)品的體驗。
「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注~
最后為大家分享一套微信 WeUI 官方組件庫，包括深淺兩個版本和詳細的設計規(guī)范，數(shù)據(jù)圖表源文件, 文件已打包好, 大家后臺回復關鍵詞即可領取。
慢慢來比較快，希望對你有幫助！
資料參考: How to design Badges
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉(zhuǎn)載請注明：學UI網(wǎng)》APP上的“小紅點”設計，居然有這么多你不知道的設計細節(jié)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司