小紅點作為中國產(chǎn)品的特色設計，和facebook的“點贊”類似，都有很多學問在內(nèi)。

剛開始工作的時候，做過一版消息的頁面，當時雖然加上了小紅點，但卻不知道它為什么要這樣設計，現(xiàn)在消息頁面需要改動，于是便想弄清楚其背后的設計原理。

我提出了一些問題：小紅點的定義和作用是什么？有哪些視覺特點？常見樣式有哪些？我們?yōu)槭裁催@么想點擊它呢？

這篇文章就和大家分享一下關于小紅點的設計。

目錄

1.小紅點的定義

2.小紅點的作用

3.視覺特點

4.常見樣式

5.為什么老是想點擊

小紅點的定義

小紅點是我們慣用的叫法，它正式的名稱應該叫做徽標（Badge）。通常指出現(xiàn)在圖標右上角的紅色圓點或帶數(shù)字和文字的紅點，如下圖：

小紅點的作用

它的主要作用有兩個，一個是起到通知的作用，告訴用戶有未讀的消息或有未處理的任務；另一個是起到為入口導流的作用，引導用戶點擊進來，增加點擊量，如下圖：

以微博和安居客為例，微博頁面中的小紅點是為了通知用戶有20條未讀的消息，安居客頁面中的小紅點為了引導用戶去看推薦的房源信息。

視覺特點

主要從顏色及消除方法兩方面闡述一下小紅點的視覺特點。

1.顏色

小紅點為了“逼迫”人們點擊，通常會使用高明度+高純度的紅色，因為紅色色彩感知強烈，而且有警告、危險的含義。更容易和頁面形成強烈的對比，引起人們的注意。QQ中好友和系統(tǒng)的消息推送都使用了紅色的小紅點，如下圖：

但有時候為了不過多干擾用戶，也會使用色彩感知較弱的藍色。比如QQ群助手里的消息推送就使用了淺藍色的小紅點。如下圖：

2.消除方式

最常見的消除方式就是點擊一下，小紅點就消失了；或者是把最后層級的小紅點點擊完，上面層級的小紅點才會消失。

而有的 APP 把這個過程做的非常有趣，如下圖：

QQ消息入口的小紅點可以被隨意地拉伸，然后爆炸消失，用這種趣味的方式可以減輕用戶的厭煩情緒。

最好能夠為用戶設置一個一鍵消除的按鈕，這樣可以大大減少用戶的操作成本，如下圖：

以淘寶為例，因為用戶要和眾多的商家溝通，再加上很多會員群或者系統(tǒng)消息的推送，消息通常會非常多，而一鍵清除只需要點擊一次就可以消除所有的小紅點，大大減少了操作成本。

常見形式

常見的小紅點有純紅點、數(shù)字+背景色、文字+背景色3種形式，它們都有各自對應的使用方法以及使用場景。

1.純紅點

這種形式常用在一些入口上面，引導用戶點擊進入更深的層級，是最常見的一種形式。如下圖：

以支付寶為例，支付寶首頁中出現(xiàn)的這些純紅點，目的就是為了讓用戶點擊這些入口，把用戶引入更深的層級。

2.數(shù)字+背景色

這種形式就是在純紅點的基礎上加入了數(shù)字，主要用于消息通知的場景中，提醒用戶有未讀的消息并且可以向用戶顯示具體的數(shù)量。如下圖：

以淘寶和微博為例，淘寶中的訂單消息、微博的資訊消息，都使用了這種紅點形式。其中淘寶的訂單消息是用戶想要看到的，而微博的資訊消息是系統(tǒng)自動推送給用戶的，用戶被動接收不想要的消息時，會產(chǎn)生厭煩心理。

3.文字+背景色

這種形式是在純紅點的基礎上加入了文字，常用于運營活動的場景，文字內(nèi)容通常是一些有較強吸引力的詞句，為了吸引用戶點擊。

上圖美團的頁面中，就使用了了“贏現(xiàn)金”、“特惠”、“享特價”、“領券”等特別具有誘惑力的詞來吸引用戶點擊。

以上就是小紅點常見的三種形式，但是在實際項目中會涉及到多個層級和多個入口，所以一般都是多種樣式的小紅點組合起來使用。

為什么老是想點擊

這里涉及到了“知覺流暢性”，我很喜歡科學家種太陽在果殼問答中的觀點，以下是原文摘要：

為什么人腦會在加工信息時，在知覺層面上，刻意追求對信息的合理簡化？

因為外界信息太多，大腦分分鐘過載崩潰，所以需要犧牲大量的噪音信息，把其中有意義的好理解的能記住的，篩選出來，然后作為知覺加工的產(chǎn)出。這是人腦在漫長的進化過程中逐漸習得的一種認知習慣。

為什么人類也會“喜歡”那些本來就整齊劃一從而容易被大腦組織加工的東西呢？

因為知覺流暢性。知覺流暢性涉及個體對刺激較低水平的加工，反映了個體對知覺外部信息難易程度的主觀感受。它本身并不是一種認知操作，只是一種有關認知操作的感受。比如，看到雜亂無章的房間，有的人就會覺得頭很大，而看到收拾得井井有條的房間，可能就舒服多了。

簡單來說，就是人類的大腦在處理整齊劃一的事物時，因為消耗的能量比較少，所以感覺很流暢，就會產(chǎn)生愉悅感，如下圖：

圖1中所有的矩形都整齊劃一的排列，我們在瀏覽的時候很流暢，但圖2中有一個矩形角度發(fā)生了變化，當我們?yōu)g覽到這個矩形時，大腦忽然停頓了，是不是特別想把它擺正？

同樣的，小紅點的出現(xiàn)就是打破了整體頁面的流暢性，和頁面形成特別強烈的對比，讓人不得不把它點掉，以保持知覺的流暢性和大腦的愉悅感。

總結

今天主要分享的一件事是 APP 中小紅點的設計，我總結了五個點是：

1.小紅點的主要作用：一個是起到通知的作用，另一個是起到為入口導流的作用。

2.通常會使用紅色，這是因為紅色色彩感知強烈，更容易和頁面形成強烈的對比；如果想不過多干擾用戶，可以使用色彩感知較弱的藍色。

3.有趣的消除方法可以較少用戶的厭煩心理，添加一鍵清除可以較少操作成本。

4.在實際項目中會涉及到多個層級和多個入口，一般都是多種樣式的小紅點組合起來使用。

5.小紅點借用了人類大腦會對流暢的事物產(chǎn)生愉悅感的現(xiàn)象，打破頁面流暢性，引起人們的注意而去點擊。

參考引文：

《【產(chǎn)品筆記】小紅點全面剖析 – 簡書》http://t.cn/EqXSOTq

《控件詳解之「小紅點+索引導航+分段控件」》http://t.cn/R6c63Ot

《人們?yōu)槭裁聪矚g看整齊劃一的事物？》http://t.cn/EqXoX6o

《煩人的“小妖精”：淺談小紅點的設計》http://t.cn/RCXwmbv

《討人嫌的小紅點/徽標 》http://t.cn/EqXKjo6

本文由 @望盡盡是青山 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議