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

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

純圓點(diǎn)

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

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

數(shù)值

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

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

文字

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

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

或者放在內(nèi)容中，用來(lái)突出重要的活動(dòng)。關(guān)于標(biāo)簽組件，還有很有需要注意的設(shè)計(jì)點(diǎn)，后期設(shè)計(jì)夾會(huì)單獨(dú)出一篇文章展開(kāi)講講標(biāo)簽設(shè)計(jì)。

圖標(biāo)

在元素基礎(chǔ)上疊加一個(gè)圖標(biāo)來(lái)顯示當(dāng)前的狀態(tài)，或者對(duì)用戶的反饋?zhàn)龀鲰憫?yīng)，常用的圖標(biāo)狀態(tài)包括成功、失敗、警告。

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

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

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

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

顏色填充

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

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

圓角半徑

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

輪廓描邊

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

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

添加陰影

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

位置關(guān)系

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

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

最后

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

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

最后為大家分享一套微信 WeUI 官方組件庫(kù)，包括深淺兩個(gè)版本和詳細(xì)的設(shè)計(jì)規(guī)范，數(shù)據(jù)圖表源文件, 文件已打包好, 大家后臺(tái)回復(fù)關(guān)鍵詞即可領(lǐng)取。

慢慢來(lái)比較快，希望對(duì)你有幫助！

資料參考: How to design Badges

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》APP上的“小紅點(diǎn)”設(shè)計(jì)，居然有這么多你不知道的設(shè)計(jì)細(xì)節(jié)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司