起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)APP 設(shè)計(jì)中，小紅點(diǎn)的特點(diǎn)及設(shè)計(jì)是怎樣的
小紅點(diǎn)作為中國(guó)產(chǎn)品的特色設(shè)計(jì)，和facebook的“點(diǎn)贊”類似，都有很多學(xué)問(wèn)在內(nèi)。
剛開(kāi)始工作的時(shí)候，做過(guò)一版消息的頁(yè)面，當(dāng)時(shí)雖然加上了小紅點(diǎn)，但卻不知道它為什么要這樣設(shè)計(jì)，現(xiàn)在消息頁(yè)面需要改動(dòng)，于是便想弄清楚其背后的設(shè)計(jì)原理。
我提出了一些問(wèn)題：小紅點(diǎn)的定義和作用是什么？有哪些視覺(jué)特點(diǎn)？常見(jiàn)樣式有哪些？我們?yōu)槭裁催@么想點(diǎn)擊它呢？
這篇文章就和大家分享一下關(guān)于小紅點(diǎn)的設(shè)計(jì)。
目錄
1.小紅點(diǎn)的定義
2.小紅點(diǎn)的作用
3.視覺(jué)特點(diǎn)
4.常見(jiàn)樣式
5.為什么老是想點(diǎn)擊
小紅點(diǎn)的定義
小紅點(diǎn)是我們慣用的叫法，它正式的名稱應(yīng)該叫做徽標(biāo)（Badge）。通常指出現(xiàn)在圖標(biāo)右上角的紅色圓點(diǎn)或帶數(shù)字和文字的紅點(diǎn)，如下圖：
小紅點(diǎn)的作用
它的主要作用有兩個(gè)，一個(gè)是起到通知的作用，告訴用戶有未讀的消息或有未處理的任務(wù)；另一個(gè)是起到為入口導(dǎo)流的作用，引導(dǎo)用戶點(diǎn)擊進(jìn)來(lái)，增加點(diǎn)擊量，如下圖：
以微博和安居客為例，微博頁(yè)面中的小紅點(diǎn)是為了通知用戶有20條未讀的消息，安居客頁(yè)面中的小紅點(diǎn)為了引導(dǎo)用戶去看推薦的房源信息。
視覺(jué)特點(diǎn)
主要從顏色及消除方法兩方面闡述一下小紅點(diǎn)的視覺(jué)特點(diǎn)。
1.顏色
小紅點(diǎn)為了“逼迫”人們點(diǎn)擊，通常會(huì)使用高明度+高純度的紅色，因?yàn)榧t色色彩感知強(qiáng)烈，而且有警告、危險(xiǎn)的含義。更容易和頁(yè)面形成強(qiáng)烈的對(duì)比，引起人們的注意。QQ中好友和系統(tǒng)的消息推送都使用了紅色的小紅點(diǎn)，如下圖：
但有時(shí)候?yàn)榱瞬贿^(guò)多干擾用戶，也會(huì)使用色彩感知較弱的藍(lán)色。比如QQ群助手里的消息推送就使用了淺藍(lán)色的小紅點(diǎn)。如下圖：
2.消除方式
最常見(jiàn)的消除方式就是點(diǎn)擊一下，小紅點(diǎn)就消失了；或者是把最后層級(jí)的小紅點(diǎn)點(diǎn)擊完，上面層級(jí)的小紅點(diǎn)才會(huì)消失。
而有的 APP 把這個(gè)過(guò)程做的非常有趣，如下圖：
QQ消息入口的小紅點(diǎn)可以被隨意地拉伸，然后爆炸消失，用這種趣味的方式可以減輕用戶的厭煩情緒。
最好能夠?yàn)橛脩粼O(shè)置一個(gè)一鍵消除的按鈕，這樣可以大大減少用戶的操作成本，如下圖：
以淘寶為例，因?yàn)橛脩粢捅姸嗟纳碳覝贤ǎ偌由虾芏鄷?huì)員群或者系統(tǒng)消息的推送，消息通常會(huì)非常多，而一鍵清除只需要點(diǎn)擊一次就可以消除所有的小紅點(diǎn)，大大減少了操作成本。
常見(jiàn)形式
常見(jiàn)的小紅點(diǎn)有純紅點(diǎn)、數(shù)字+背景色、文字+背景色3種形式，它們都有各自對(duì)應(yīng)的使用方法以及使用場(chǎng)景。
1.純紅點(diǎn)
這種形式常用在一些入口上面，引導(dǎo)用戶點(diǎn)擊進(jìn)入更深的層級(jí)，是最常見(jiàn)的一種形式。如下圖：
以支付寶為例，支付寶首頁(yè)中出現(xiàn)的這些純紅點(diǎn)，目的就是為了讓用戶點(diǎn)擊這些入口，把用戶引入更深的層級(jí)。
2.數(shù)字+背景色
這種形式就是在純紅點(diǎn)的基礎(chǔ)上加入了數(shù)字，主要用于消息通知的場(chǎng)景中，提醒用戶有未讀的消息并且可以向用戶顯示具體的數(shù)量。如下圖：
以淘寶和微博為例，淘寶中的訂單消息、微博的資訊消息，都使用了這種紅點(diǎn)形式。其中淘寶的訂單消息是用戶想要看到的，而微博的資訊消息是系統(tǒng)自動(dòng)推送給用戶的，用戶被動(dòng)接收不想要的消息時(shí)，會(huì)產(chǎn)生厭煩心理。
3.文字+背景色
這種形式是在純紅點(diǎn)的基礎(chǔ)上加入了文字，常用于運(yùn)營(yíng)活動(dòng)的場(chǎng)景，文字內(nèi)容通常是一些有較強(qiáng)吸引力的詞句，為了吸引用戶點(diǎn)擊。
上圖美團(tuán)的頁(yè)面中，就使用了了“贏現(xiàn)金”、“特惠”、“享特價(jià)”、“領(lǐng)券”等特別具有誘惑力的詞來(lái)吸引用戶點(diǎn)擊。
以上就是小紅點(diǎn)常見(jiàn)的三種形式，但是在實(shí)際項(xiàng)目中會(huì)涉及到多個(gè)層級(jí)和多個(gè)入口，所以一般都是多種樣式的小紅點(diǎn)組合起來(lái)使用。
為什么老是想點(diǎn)擊
這里涉及到了“知覺(jué)流暢性”，我很喜歡科學(xué)家種太陽(yáng)在果殼問(wèn)答中的觀點(diǎn)，以下是原文摘要：
為什么人腦會(huì)在加工信息時(shí)，在知覺(jué)層面上，刻意追求對(duì)信息的合理簡(jiǎn)化？
因?yàn)橥饨缧畔⑻?，大腦分分鐘過(guò)載崩潰，所以需要犧牲大量的噪音信息，把其中有意義的好理解的能記住的，篩選出來(lái)，然后作為知覺(jué)加工的產(chǎn)出。這是人腦在漫長(zhǎng)的進(jìn)化過(guò)程中逐漸習(xí)得的一種認(rèn)知習(xí)慣。
為什么人類也會(huì)“喜歡”那些本來(lái)就整齊劃一從而容易被大腦組織加工的東西呢？
因?yàn)橹X(jué)流暢性。知覺(jué)流暢性涉及個(gè)體對(duì)刺激較低水平的加工，反映了個(gè)體對(duì)知覺(jué)外部信息難易程度的主觀感受。它本身并不是一種認(rèn)知操作，只是一種有關(guān)認(rèn)知操作的感受。比如，看到雜亂無(wú)章的房間，有的人就會(huì)覺(jué)得頭很大，而看到收拾得井井有條的房間，可能就舒服多了。
簡(jiǎn)單來(lái)說(shuō)，就是人類的大腦在處理整齊劃一的事物時(shí)，因?yàn)橄牡哪芰勘容^少，所以感覺(jué)很流暢，就會(huì)產(chǎn)生愉悅感，如下圖：
圖1中所有的矩形都整齊劃一的排列，我們?cè)跒g覽的時(shí)候很流暢，但圖2中有一個(gè)矩形角度發(fā)生了變化，當(dāng)我們?yōu)g覽到這個(gè)矩形時(shí)，大腦忽然停頓了，是不是特別想把它擺正？
同樣的，小紅點(diǎn)的出現(xiàn)就是打破了整體頁(yè)面的流暢性，和頁(yè)面形成特別強(qiáng)烈的對(duì)比，讓人不得不把它點(diǎn)掉，以保持知覺(jué)的流暢性和大腦的愉悅感。
總結(jié)
今天主要分享的一件事是 APP 中小紅點(diǎn)的設(shè)計(jì)，我總結(jié)了五個(gè)點(diǎn)是：
1.小紅點(diǎn)的主要作用：一個(gè)是起到通知的作用，另一個(gè)是起到為入口導(dǎo)流的作用。
2.通常會(huì)使用紅色，這是因?yàn)榧t色色彩感知強(qiáng)烈，更容易和頁(yè)面形成強(qiáng)烈的對(duì)比；如果想不過(guò)多干擾用戶，可以使用色彩感知較弱的藍(lán)色。
3.有趣的消除方法可以較少用戶的厭煩心理，添加一鍵清除可以較少操作成本。
4.在實(shí)際項(xiàng)目中會(huì)涉及到多個(gè)層級(jí)和多個(gè)入口，一般都是多種樣式的小紅點(diǎn)組合起來(lái)使用。
5.小紅點(diǎn)借用了人類大腦會(huì)對(duì)流暢的事物產(chǎn)生愉悅感的現(xiàn)象，打破頁(yè)面流暢性，引起人們的注意而去點(diǎn)擊。
參考引文：
《【產(chǎn)品筆記】小紅點(diǎn)全面剖析 – 簡(jiǎn)書(shū)》http://t.cn/EqXSOTq
《控件詳解之「小紅點(diǎn)+索引導(dǎo)航+分段控件」》http://t.cn/R6c63Ot
《人們?yōu)槭裁聪矚g看整齊劃一的事物？》http://t.cn/EqXoX6o
《煩人的“小妖精”：淺談小紅點(diǎn)的設(shè)計(jì)》http://t.cn/RCXwmbv
《討人嫌的小紅點(diǎn)/徽標(biāo) 》http://t.cn/EqXKjo6
本文由 @望盡盡是青山 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
給個(gè)贊
人的大腦會(huì)對(duì)流暢的事情產(chǎn)生流暢性 這個(gè)講的很好
通俗易懂 挺好的，之前也查閱過(guò)關(guān)于小紅點(diǎn)的知識(shí)，收藏先。
你不說(shuō)淘寶那個(gè)，我還真不知道可以一鍵清理小紅點(diǎn)，太隱晦了！
可能是因?yàn)樗伾容^接近的原因，一開(kāi)始我也沒(méi)有注意到。
不錯(cuò)，雖然小紅點(diǎn)只是頁(yè)面中的一個(gè)小元素，但是其中的學(xué)問(wèn)還真的不可不懂，看似簡(jiǎn)單，其實(shí)仔細(xì)一看并不簡(jiǎn)單吶
是的呀 ??
不錯(cuò)，雖然小紅點(diǎn)只是頁(yè)面中的一個(gè)小元素，但是其中的學(xué)問(wèn)還真的不可不懂，看似簡(jiǎn)單，其實(shí)仔細(xì)一看并不簡(jiǎn)單吶
小紅點(diǎn)原來(lái)大有學(xué)問(wèn)，贊一個(gè)
?? 感謝