更多小紅點設計干貨：

引言

墨一影：你有沒有注意到，很多手機 APP 上總愛在那些新消息、未讀通知旁邊放個小紅點？這個小家伙看起來不起眼，但作用可不小，它能一下子抓住你的眼球，告訴你：“嘿，這邊有新鮮事兒！”不過，你知道嗎？設計這個小紅點也是有講究的。要是用得不對，它可能就會變成個煩人精，讓你看著就頭疼。那么，在 UI 設計中，我們的小紅點到底該怎么用才算是用對了呢？

這篇文章就來跟你聊聊這個話題~

一、正確認識小紅點

1. 你真的了解小紅點嗎？

小紅點是最通俗的叫法，在 UI 設計中還有一個名稱叫徽標（Badge），它指的是出現在圖標或文字右上角、可帶有數字或文字的紅色圓點，小紅點的出現則意味著有新內容或者待處理的信息，其目的是為了入口導流，起到引導用戶操作、增加點擊量的作用。

小紅點的常見形態

小紅點其實很多程度上利用用戶的強迫癥心理，而“強迫癥”這一術語，實際上描述的是個體對于環境或事物中不對稱、不和諧狀態的自然反感，并傾向于糾正這種感知上的“不完美”。小紅點作為一種視覺元素，巧妙地利用了這種心理傾向，成為營銷手段中的有效工具，用以吸引用戶的注意并促使他們采取行動。

然而，當我們深入探討用戶的真實感受時，不難發現一個有趣的現象：盡管小紅點設計之初是為了吸引用戶，但許多用戶卻對其產生了復雜的情緒。在網絡上，充斥著大量關于“如何快速清除小紅點”的教程和技巧，這反映了相當一部分用戶對于小紅點的態度并非全然喜愛，而是希望能夠有效管理或消除這些視覺上的“干擾”。

進一步地，從用戶行為的數據中我們也能窺見一二。在用戶選擇卸載 APP 的眾多原因中，“消息提醒”這一類別常常占據前列，而小紅點作為消息提醒的標志性元素，無疑在其中扮演了重要角色。這表明，對于那些覺得小紅點過于頻繁或侵擾的用戶來說，它們可能成為了卸載決策中的一個關鍵因素。

2. 小紅點在界面中的正面作用

① 及時通知與提醒

小紅點最顯著的作用是作為未讀消息、待辦事項、新內容的即時通知標志，幫助用戶快速識別并處理重要信息。這種即時反饋機制提高了用戶的信息獲取效率，減少了遺漏重要信息的風險。

② 增強用戶參與度

通過吸引用戶的注意力，小紅點鼓勵用戶更頻繁地打開和使用 APP，從而增加了用戶的參與度和活躍度。這對于提升 APP 的留存率、用戶粘性和商業價值具有重要意義。

③ 業務導流與曝光

小紅點作為一種視覺元素，能夠有效地引導用戶點擊并探索 APP 中的新功能、新內容或優惠活動。這種導流作用有助于提升 APP 內特定頁面的曝光率和點擊率，促進業務的增長和發展。

3. 小紅點在界面中的負面影響

① 紅點強迫癥

部分用戶可能會形成“紅點強迫癥”，即看到小紅點就忍不住要點開查看或消除。這種心理現象不僅會影響用戶的日常生活習慣，還可能對用戶的記憶和決策產生負面影響（如前文提到的研究所示）。

② 分散注意力與干擾

頻繁出現的小紅點可能會分散用戶的注意力，干擾用戶的正常工作和生活。尤其是在信息爆炸的時代，過多的未讀消息和待辦事項可能會給用戶帶來壓力和焦慮感。

③ 誤導與濫用

在某些情況下，開發者可能會濫用小紅點來吸引用戶的注意力，即使沒有真正的未讀消息或待辦事項也會故意顯示小紅點。這種誤導行為可能會損害用戶的信任感和忠誠度。

二、小紅點的展現形式

1. 小紅點的構成

小紅點的/徽標由容器、內容構成，內容形式可以是數字和文字

容器：承載內容的容器，一般由圓角矩形構成

內容：數字、文字、通常表示未讀信息的數量和狀態，或營銷場景的引導

2. 小紅點的類型

① 單純的小紅點

純紅點作為一種直觀而高效的提示元素，廣泛應用于各類應用與平臺中，它象征著“新內容待探索”或“消息更新”，以非侵入性的方式輕觸用戶注意力。這種設計旨在引導用戶自然而然地深入瀏覽，解鎖新信息或功能，進而促進用戶活躍度，顯著提升內容的點擊率及業務的整體曝光度。無論是社交圈子的最新資訊、APP 版本的更新通知，還是功能模塊的新增亮點，純紅點都以其簡潔明了的特點，成為連接用戶與新鮮內容的橋梁。

② 數字+紅點

在眾多提示方式中，這一紅點加數字的組合提醒機制堪稱最為高效且引人注目的設計之一。它脫胎于傳統的純紅點標記，廣泛應用于社交及信息密集型的功能模塊，通過直觀展示未讀消息或通知的具體數量，巧妙地將用戶的注意力聚焦于關鍵信息上。這種設計不僅促進了信息的有效傳達，還助力用戶迅速瀏覽并作出相應決策，尤其是在處理如會話列表中的未讀消息、系統重要通知等場景時，其優勢尤為顯著。

③ 文字+紅點

在運營活動的廣闊舞臺上，巧妙運用“免費”、“立減”、“新品”、“有獎”等極具吸引力的詞匯，如同磁石般牢牢抓住用戶的注意力，精準地觸達了他們內心對于優惠、新奇事物的渴望。這種策略深刻洞察了人性中對于小確幸的追求與對未知世界的好奇，巧妙地利用了用戶的心理傾向，激發了他們強烈的點擊沖動與參與欲望。最終，這一系列精心設計的營銷手段成功引導用戶走向預設的轉化路徑，實現了品牌宣傳與產品銷售的營銷目的。

④ 圖標/縮略圖+小紅點

主要用于吸引用戶注意、提示更新或未讀信息，并引導用戶進行點擊操作,而把小紅點跟圖標或者縮略圖結合起來，給人表達的含義就指向性更明確。

3. 小紅點的視覺特點

APP 中的小紅點在視覺設計上具有色彩鮮明、形狀簡單、尺寸小巧、位置關鍵等特征。

① 小紅點的顏色

顧名思義，既然叫小紅點，那么自然就是以紅色為主了，確實也如此。這是因為紅色在視覺上具有突出的效果，能夠迅速吸引用戶的注意力。在眾多顏色中，紅色通常被視為代表警告、重要性和緊急性，這與小紅點的功能相吻合。

但是最近隨著互聯網的快速發展，有一些產品深入挖掘用戶的需求，在部分產品上也采用了其他顏色，例如主題色、或者其他飽和度更低顏色，以減弱紅點的信息層級，在界面中追求更加協調、舒適的用戶感受。這種情況只存在單純的小紅點中，因為這種設計一般是要弱化處理，而如果數字+紅點還采用這種色彩來設計，就南轅北轍了。

② 小紅點的形狀

小紅點的設計傾向于簡約風格，主要采用圓形或近似圓形的形態。這種簡潔的形狀不僅使得小紅點容易被用戶捕捉和記憶，還確保了視覺上的平衡與和諧，有效避免了視覺上的冗余和負擔。此外，簡單的形狀設計使得小紅點能夠靈活融入各種界面背景之中，保持高度的辨識度和一致性，從而為用戶帶來更加流暢和直觀的體驗。

③ 小紅點的位置

在探討小紅點（常用于消息提醒的標識）最佳放置位置時，我們首先要認識到其作為輔助提示元素，需緊密依附于主體信息但又不能干擾其主導地位。將主體信息視為一個視覺整體，其各部位（特別是中心與四角）因力場不同，對用戶吸引力各異。通過邏輯排除法，我們可以這樣分析：

中心位置排除：為避免小紅點遮擋或混淆主體信息的核心部分，直接影響其識別性，首先排除將小紅點置于元素中心的做法。

左上角非優選項：根據尼爾森的用戶閱讀視線模型，用戶習慣于從左至右、從上至下的瀏覽路徑。將小紅點置于左上角可能會過分吸引注意，從而削弱了主體信息的首要地位，造成視覺上的主次顛倒，故非最佳位置。

左下角與右下角的不穩定性：受自然界重力影響，人類的視覺感知中，物體下部尤其是右下角區域給人以“下沉”或“不穩定”的感覺。因此，將小紅點置于這些位置會引發視覺上的不平衡感，如同倒三角形狀給人的不穩固印象，不利于營造穩定和諧的視覺體驗。

右上角成為相對合理選擇：在排除了上述所有不利位置后，右上角成為了一個相對合理的選擇。盡管它也可能對整體畫面構成輕微干擾，但相較于其他位置，其劣勢顯得不那么顯著。無論是從產品功能需求的角度出發，還是考慮用戶的視覺舒適度和接受度，右上角都更能達到平衡，使得小紅點既能有效提示用戶，又不至于過分突兀。

⑤ 小紅點的視覺表現技巧

投影：為了在投影設計中突出小紅點樣式，尤其是在非紅色背景下避免視覺沖突，可以采取以下策略：首先，精確提取小紅點的顏色值，隨后對該顏色進行適度的加深處理，以增強其視覺深度。通過這樣的色彩調整，小紅點將呈現出一種懸浮于界面之上的效果，既醒目又不與背景融為一體，從而提升整體的視覺層次感和吸引力。

描邊：當小紅點樣式被應用于紅色圖標、圖片或色塊上時，由于顏色相近，其突出性會受到挑戰。為了有效解決這一問題，我們可以通過為小紅點添加明確的描邊邊框，將其從背景中清晰分離出來。這一設計手法確保了即使在紅色或其他相似色調的載體上，小紅點也能被用戶準確無誤地識別，從而增強了視覺元素的辨識度和整體界面的可用性。

三、不同產品中小紅點的需求不同

不同產品在設計小紅點時會有不同的策略，這些策略通常基于產品的類型、目標用戶群體以及期望達到的效果。我們千萬不能生搬硬套，不去分析所在產品需求而去盲目使用紅點，一旦使用不當會造成嚴重后果，也就是前問所說的負面影響。

以下是一些常見類型的產品及其在小紅點設計上的特點：

1. 社交辦公類：

典型產品：微信/釘釘/QQ 等

在社交與辦公媒體應用中，小紅點扮演著至關重要的角色，它作為視覺提示，專門用于標記用戶的未讀消息、新評論、好友請求等關鍵信息。這類應用深度融合了用戶的生活與工作環境，成為即時通訊與溝通不可或缺的工具。為了確保用戶能夠迅速注意到這些重要更新，應用開發者傾向于采用醒目的顏色（尤其是紅色）來設計小紅點，并將其巧妙地安置在消息中心或個人資料圖標的顯眼位置。

這種設計策略巧妙地利用了人類的好奇心和即時反饋機制，營造出一種“非看不可，不看不消”的緊迫感，促使用戶在看到小紅點時，往往會立即采取行動，如點開查看并回復消息。即便在沒有小紅點提示的情況下，許多用戶也會出于習慣或擔心錯過重要信息的心理，主動檢查會話列表，確保不錯過任何一條消息。因此，小紅點不僅是一個簡單的視覺元素，更是提升用戶參與度、保持應用活躍度的有效手段。

2. 社區資訊類：

典型產品：抖音、微博、小紅書、快手

在社區資訊類應用中，用戶的主要目的傾向于消遣娛樂與資訊獲取，這種使用場景相較于即時通訊（IM）應用，對小紅點的設計需求顯得更為溫和。因此，在設計這類應用中的小紅點提示時，可以考慮在視覺上采取更為柔和的處理方式，不必像 IM 應用那樣強烈地吸引用戶注意。

具體而言，可以使用單純的紅點而不是數字加紅點，以減少對用戶瀏覽體驗的干擾。同時，在布局上也可以靈活調整，比如僅在主頁面上使用紅色或其他較為鮮明的色彩來標識關鍵更新，而在二級頁面或具體資訊詳情頁中，則可以采用更為低調的色彩或設計，以提示用戶有新內容，同時避免造成過度的視覺壓力。

這樣的設計策略既能夠滿足用戶對于新資訊的及時獲知需求，又能夠保持應用的整體美觀性和用戶瀏覽的流暢性，從而提升用戶體驗。

3. 工具服務類：

典型產品：夸克、字由、懂車帝等

對于工具服務類應用而言，其核心在于滿足用戶的即時需求，倡導“即用即走”的便捷體驗，避免過度占用用戶注意力。在設計時，應審慎使用紅色等醒目色彩，確保其在必要時有效傳達通知信息，同時避免色彩濫用導致的視覺干擾。特別是當消息或通知累積過多，影響到應用內主要內容的清晰展示時，不僅會降低用戶體驗，還可能引發用戶的反感情緒，最終影響其對應用的持續使用意愿和忠誠度。因此，優化消息管理機制，確保信息的適時適量展現，是維護良好用戶體驗、提升應用滿意度的關鍵所在。

四、實際產品中小紅點的設計策略

小紅點看起來簡單而又不簡單

近期深入探究“小紅點”的設計，我對其產生了以往工作中不同的看法。表面上看，它僅僅是視覺設計中的一個細微元素，但實質上，它觸及了產品策略的核心——即如何精妙地調度與分配用戶的注意力。而這一過程，遠非簡單的界面布局所能涵蓋，它關乎產品如何構建長期吸引用戶、促進互動與留存的整體戰略考量。因此，“小紅點”的設計，實則是產品智慧與用戶心理博弈的微妙體現。

1. 設計目的匹配用戶需求

在設計小紅點時，首要任務是清晰界定其核心目的。小紅點作為一種視覺提示手段，主要旨在通知用戶存在未處理的信息，如未讀消息、待辦事項或新發布的內容。這一設計的根本驅動力在于通過吸引用戶的注意力，引導他們進行點擊操作，從而有效提升產品的用戶參與度與互動性，并進而加深用戶的粘性，促進更頻繁和持久的使用行為。

① 以營銷為目的的紅點設計

在營銷策略中，紅點設計被精心運用以視覺沖擊力引導用戶行為，旨在激活產品使用頻率、增強用戶互動，并促進關鍵功能的轉化效率。這些紅點作為導流工具，扮演著類似微型廣告的角色，其提醒效果尤為顯著。然而，正因其高強度特性，設計此類紅點時必須采取謹慎克制的態度，避免過度使用，以免對用戶體驗造成負面影響，甚至引發用戶的反感和抵觸情緒。因此，在設計策略上，需精準定位、適度展現，確保紅點的出現既能吸引用戶注意，又不至于成為用戶的負擔。

② 需用戶反饋及操作類強提醒

通知作用：告知用戶有未讀消息、未處理任務或新內容更新，引起用戶的注意。

引導作用：旨在提升用戶體驗、增強用戶參與度，并促進用戶完成關鍵操作。

③ 消息通知、應用更新類弱提醒

在即時通訊類應用中，如微信、QQ 等，小紅點常用于提醒用戶有未讀消息。這些消息可能來自好友、群聊或系統通知，但小紅點本身不會顯示具體的消息數量或內容。

在內容型應用中，如新聞閱讀、視頻觀看、銀行等，小紅點可以用于提醒用戶有新的內容更新或推薦內容。由于這類應用的內容更新頻率較高，使用小紅點可以避免用戶因頻繁收到通知而產生厭煩感。

2. 小紅點設計內在邏輯與原則

① 并集原則

小紅點的顯示應遵循父節點的小紅點為子節點小紅點的并集的原則。即，如果子路徑上有小紅點，則其父路徑上也應顯示小紅點，只有當所有子路徑上的小紅點都被清除后，父路徑上的小紅點才會消失。

② 多層級關聯

在設計小紅點的顯示邏輯時，需要考慮到不同層級之間的關聯。例如，在微信中，tab 上的小紅點顯示的是聊天列表里未讀消息的總和，只有當所有未讀消息都清空時，tab 上的小紅點才會消失。

③ 動態更新

小紅點的顯示應能夠根據服務器推送的內容更新或用戶操作（如閱讀消息、完成任務）而動態變化。這要求系統能夠實時監測路徑所對應的小紅點的變化，并逐層分發到每一個父路徑。

3. 小紅點在實際項目中的應對策略

① 同層級內紅點層級根據用戶需求差異化

針對同一層級內的小紅點提醒系統，為了滿足用戶多樣化的需求，可以采取差異化的提示策略。以消息提醒為例，對于較為久遠的信息，鑒于用戶對這類信息的關注度可能相對較低，可以適當降低其提示的強度，比如減少閃爍頻率或調整顏色飽和度，以此來減輕用戶的視覺負擔和心理焦慮感，使得提醒系統更加人性化與高效。

② 同一路徑不同層級的提醒

在實際項目中，部分產品系統層級比較深，如果采用同樣的小紅點提醒，會導致信息層級較弱，比如微信訂閱號中，訂閱號本身提醒只是采用了單純的紅點設計，進去以后，有不同的訂閱號也有更新提醒，如果還是采用前面一樣的紅點設計，會導致用戶識別障礙，微信這里巧妙的使用產品主題綠色，既做了區分又降低了用戶負擔，也達到了產品設計目的。

4. 小紅點的友好的消除方式

小紅點的消除方式多種多樣，體現了不同產品設計理念下的用戶體驗差異。最常見且直接的方式是，用戶通過簡單的點擊操作即可即時消除小紅點，這種即時反饋增強了用戶界面的清晰度和操作的便捷性。然而，也有部分產品設計需要用戶跳轉至多個頁面，逐步深入才能觸達并處理導致小紅點出現的具體信息，這種設計可能增加了操作的復雜度，但也為用戶提供了更詳細的上下文信息。

① 一鍵清除

為了進一步優化用戶體驗，不少產品還創新性地引入了“一鍵清除”、“全部已讀”功能，該功能允許用戶在不需要逐一查看或處理每條通知的情況下，快速批量消除所有小紅點，極大地提升了操作的效率和便捷性，滿足了用戶對于快速清理界面雜亂元素的需求。

② 關閉不必要的通知

在系統設置中，用戶可以關閉不需要的應用通知，以減少小紅點的出現。這有助于保持界面的整潔和用戶的專注。

五、小紅點設計的注意要點

在設計小紅點時需要注意的幾個關鍵點包括：

1. 小紅點與標簽有什么不同？

小紅點通常是一個小型的圓形或點狀圖標，用于吸引用戶的注意力并提示有新的、未處理的信息或任務，通常是臨時出現的，一旦用戶查看或處理了相關信息，小紅點就會消失。

而標簽是一種用于分類或標記內容的文本或圖標，幫助用戶快速找到和理解特定類型的信息，是持久性的導航和信息標記工具。

2. 小紅點可以使用其他顏色嗎？

設計小紅點時，可以考慮是否使用其他顏色，這取決于多個因素的綜合考量。

用戶體驗是設計小紅點時必須考慮的關鍵因素。紅色雖然醒目，能夠迅速吸引用戶的注意力，但在某些情況下可能會給用戶帶來壓力或焦慮感。例如，在需要用戶放松或享受的應用場景中，使用過于強烈的紅色可能會破壞氛圍。因此，設計師需要根據應用的性質和目標用戶群體來選擇適合的顏色。

再者，消息類型和優先級也是決定顏色選擇的重要因素。不同類型的消息可能需要不同的顏色來區分其重要性和緊急性。例如，重要且緊急的消息可能仍然適合使用紅色來突出顯示，而一般性的通知或提醒則可以使用其他顏色來降低其視覺沖擊力。

最后，場景適應性也是設計小紅點時需要考慮的。不同的應用場景可能需要不同的顏色來適應其特定的氛圍和需求。例如，在暗色背景或者紅色背景的應用中，使用明亮的顏色（如藍色或黃色）的小紅點可能更容易被用戶注意到。

3. 要注意適度性，不可濫用

小紅點設計需要特別注意適度性，避免濫用。小紅點作為一種視覺提示元素，其主要目的是吸引用戶的注意力，引導用戶關注并處理重要信息或未完成的任務。然而，如果過度使用或濫用小紅點，不僅無法達到預期的效果，反而可能給用戶帶來困擾和焦慮，甚至影響用戶對產品的整體印象和體驗。

4. 其他注意事項（在前文已講過）

可控性：提供選項讓用戶能夠根據自己的偏好調整或關閉小紅點提示。

位置安排：將小紅點放置在用戶容易注意到且不會遮擋重要內容的位置。

一致性：在整個應用中保持小紅點的設計風格一致，以便用戶能夠快速適應和理解。

總結

總體而言，小紅點作為一種頁面引導元素，在提升用戶導航效率方面展現出了顯著成效。盡管各應用因其業務特性和功能場景的差異，對小紅點的運用方式各不相同，但其核心設計理念應聚焦于如何以高效且友好的方式吸引用戶注意，避免盲目投放導致的負面效應，比如過度干擾用戶體驗乃至引發用戶流失。

咱們得先琢磨琢磨，它是不是真有必要出現，得是能真正幫到用戶，讓他們用起來更順手，或者讓產品的功能更容易被發現和利用。接著，得讓這小紅點跟咱們產品的“氣質”合拍，就像穿衣服得搭配好一樣，這樣用戶看著才舒服，也能更認同咱們的品牌。要是還能加點好玩的元素進去，那就更棒了！這樣一來，那些原本可能讓人覺得煩的小紅點，就變成了用戶愿意點、喜歡點的小玩意兒，自然而然地就提升了咱們產品的吸引力和用戶的粘性。

以上是我對小紅點設計策略的一些思考與提煉，希望能為相關從業者提供有價值的參考。當然，設計領域充滿創意與多樣性，歡迎各位同行分享不同見解，共同探索更加優化的用戶體驗之道。