APP上的“小紅點”設計,居然有這么多設計細節

10 評論 10030 瀏覽 27 收藏 9 分鐘

編輯導語:提起“徽標設計”,不少用戶可能都會有點陌生,但其實它在我們的日常生活應用中十分常見,其相關設計也有許多細節是需要注意的。本篇文章里,作者便總結了徽標設計上的一些設計細節,一起來看一下吧。

說到徽標(Badge)設計,可能有些讀者會覺得陌生,但是大家肯定都知道手機軟件上那些沒完沒了的小紅點提示,這種設計就是運用了徽標(Badge)組件?;諛撕艹R妳s又很容易被忽視,除了常見的小紅點,根據使用場景的不同,徽標組件還有其他設計樣式,比如在小紅點上加數字、文字、狀態……

而且除了圓形??,徽標還有很多其他形狀,如果你也忽視了這些關于徽標的設計細節,一起來看看吧~

一、徽標的四種類型

徽標組件有純圓點、數值、文字、圖標4種常見的類型:

1. 圓點

純圓點徽標是最常用的類型,作為一個輕量級的提醒,引導用戶點擊某些特定的功能。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

純圓點徽標還可以用來區分用戶的狀態,顯示用戶是否在線。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

2. 數值

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

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

又或者在網購或點餐等場景中,通過購物車的數值徽標的變化,就能知道已經選擇了多少商品或食物。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

3. 文字

文字主要有兩種使用類型,一種是單獨的文字徽標,多用在電商運營等活動場景中,通過顯示優惠促銷來吸引用戶。

例如在某多多首頁的功能圖標區域,通過加入不同的文字徽標,能夠告訴用戶有新的“限時秒殺”活動和“立減2元”的充值優惠,鼓勵用戶采取行動。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

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

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

或者放在內容中,用來突出重要的活動。關于標簽組件,還有很有需要注意的設計點,后期設計夾會單獨出一篇文章展開講講標簽設計。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

4. 圖標

在元素基礎上疊加一個圖標來顯示當前的狀態,或者對用戶的反饋做出響應,常用的圖標狀態包括成功、失敗、警告。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

在一些交友類產品中,可以用圖標徽標表示哪些用戶已經過實名認證。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

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

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

二、徽標設計的五個要素

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

1. 顏色填充

利用徽標顏色來調整內容優先級。背景色100%的徽標比半透明(不透明度為15–20%)的徽標視覺效果更明顯,那么重要的內容優先使用100%的顏色填充,相對次要的內容則使用半透明度的徽標。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

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

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

2. 圓角半徑

調整徽標的圓角半徑來改變容器的外形。除了基礎的圓形、方形,也可以考慮使用長條狀矩形、氣泡形、不規則形狀等外形樣式。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

徽標大多用在原有元素的基礎上,所以在設計徽標外形時,還要考慮原有元素的樣式和風格,例如原有元素是圓形,那么徽標也應該考慮設計成圓形,這樣才能和原有圖標統一,跟整個UI頁面搭配。

3. 輪廓描邊

仔細觀察就會發現,大多數徽標并沒有和原有元素貼在一起,而是相切一定距離的寬度。

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

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

4. 添加陰影

通過給徽標設置一個平滑的陰影(使用相同的顏色),能夠得到一個微妙而優雅的懸停效果。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

5. 位置關系

徽標容器的長度根據根據內容量的多少而定,容器長度可以向左、向右或從中心擴展。當徽標向右延伸時,需要注意徽標距離右側相鄰的圖標之間的距離,避免徽標太長影響相鄰圖標的顯示。

APP上的“小紅點”設計,居然有這么多你不知道的設計細節

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

三、最后

以上就是徽標(Badge)設計容易忽略的設計點,希望通過這些細節能幫助你打磨和改善產品的體驗。

「組件系列」的其他文章,近期也會不斷更新,歡迎大家關注~

#專欄作家#

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原來它叫徽標

    回復
  2. 強迫癥看著小紅點總有欲除之而后快的感覺,不消除就很難受

    來自河北 回復
  3. 小紅點可以很方便的看到消息情況,不過有時候強迫癥看著小紅點確實有點難受??

    回復
  4. 雖然我覺得它確實是挺方便的,但是我就是看不得有一個點點,每次都想把他點掉

    來自河南 回復
  5. 為什么是紅點,如果換成綠點,藍點會咋樣?期待。。。

    來自中國 回復
    1. 值得思考!

      來自山東 回復
  6. 不知道有沒有人和我一樣,看到小紅點就像點掉的這種。。。

    來自廣東 回復
  7. 一切都在Q化,無論是安卓變鴻蒙還是win10變win11。

    來自中國 回復
  8. 歡迎來到漲知識科普文章,有用的知識點又增加了

    來自江蘇 回復
  9. 高手啊,粉了

    回復