你是否在打開QQ、微信后，看到滿屏的小紅點(diǎn)，在強(qiáng)迫癥的趨勢(shì)下必須把它們?nèi)肯舨鸥杏X到能正常使用，針對(duì)社交類型的產(chǎn)品，我們也許愿意一一點(diǎn)開、逐個(gè)消除，但對(duì)非社交產(chǎn)品來(lái)說，很多小紅點(diǎn)一無(wú)是處，點(diǎn)開純屬浪費(fèi)時(shí)間、不消掉著實(shí)看著不舒服。

現(xiàn)實(shí)世界中存在兩種人，一種是不管應(yīng)用中有多少小紅點(diǎn)都能做到“不管不問”，有需要時(shí)就點(diǎn)開對(duì)應(yīng)的一項(xiàng)，對(duì)其他的直接無(wú)視；另一種是不把小紅點(diǎn)處理干凈就會(huì)原地“爆炸”的人，這就好比一覺醒來(lái)，發(fā)現(xiàn)臉上長(zhǎng)了幾顆痘，不擠掉渾身難受。

在筆者看來(lái)，小紅點(diǎn)不管是為了消除而消除、還是為了將用戶吸引到某處，這都是在利用設(shè)計(jì)手段為產(chǎn)品帶來(lái)價(jià)值。作為設(shè)計(jì)師，需要思考的是如果降低或打消用戶被小紅點(diǎn)支配的恐懼、用戶是否會(huì)跟隨小紅點(diǎn)的指示而產(chǎn)生轉(zhuǎn)化，今天就來(lái)跟大家一起嘮嘮。

一、小紅點(diǎn)的前世今生

1. 用戶會(huì)“喜歡”小紅點(diǎn)嗎？

“強(qiáng)迫癥”是指人們天生的對(duì)事/物的不對(duì)稱、不和諧產(chǎn)生厭煩心理，并且打心底想要去消除這些“錯(cuò)誤”，小紅點(diǎn)正是利用了這一人性的弱點(diǎn)而成為了一把營(yíng)銷人手中利器。

那么用戶真的會(huì)“喜歡”小紅點(diǎn)嗎？稍微查看一些資料就不難發(fā)現(xiàn)，大部分都是教我們“如何消除小紅點(diǎn)”的內(nèi)容，以至于很多應(yīng)用被迫上線的“一鍵消除”操作。另外，據(jù)公開資料顯示，在用戶卸載APP的原因統(tǒng)計(jì)中，“消息提醒”名列前茅，這其中，小紅點(diǎn)定然有著莫大的功勞。

事實(shí)證明，用戶對(duì)小紅點(diǎn)真的喜歡不起來(lái)，可有沒有想過，一旦沒了小紅點(diǎn)，朋友發(fā)來(lái)的微信消息不能及時(shí)看到、愛人發(fā)來(lái)的蜜汁短信沒無(wú)法第一時(shí)間回應(yīng)、釘釘上領(lǐng)導(dǎo)發(fā)來(lái)的工作任務(wù)都沒能按時(shí)完成、線上購(gòu)物的快遞包裹被人直到順走了才想起去找、等待打折購(gòu)買的商品也跟你無(wú)緣……不巧不成書，當(dāng)自己沒有碰到損失就想不到小紅點(diǎn)還有用處。

用戶對(duì)小紅點(diǎn)可謂是又愛又恨（表面上恨大于愛），于是產(chǎn)品只要將其放在某些功能入口，用戶要么無(wú)視它、要么刻意消除或點(diǎn)進(jìn)去一探究竟，不管如何，站在產(chǎn)品角度目的就此達(dá)成。強(qiáng)調(diào)一點(diǎn)，別因?yàn)橛脩舨坏貌唤邮芫秃翢o(wú)底線的干擾用戶，必須要在產(chǎn)品需求和用戶體驗(yàn)上做到平衡，盡量想辦法降低用戶的抵觸心理，不要天真的以為有了第一次就有很多次，沒準(zhǔn)這就是用戶最后一次使用。

2. 小紅點(diǎn)的發(fā)展歷程

在如今的移動(dòng)互聯(lián)網(wǎng)時(shí)代，各大APP中幾乎都有小紅點(diǎn)的身影，它已然與我們的日常生活變的密不可分。那么，這些隨處可見的小紅點(diǎn)最初到底從何而來(lái)，先來(lái)了解一下小紅點(diǎn)的起源。

關(guān)于小紅點(diǎn)的發(fā)源地雖然眾說蕓蕓，但其中有一個(gè)較受大眾認(rèn)可的說法，那就是小紅點(diǎn)最早來(lái)自于黑莓手機(jī)系統(tǒng)。2009年，黑莓推出9700系列，所搭載的黑莓系統(tǒng)使用了帶“*”號(hào)的小紅點(diǎn)，到了2013年，Apple公司注冊(cè)了相關(guān)專利并在iOS系統(tǒng)中使用小紅點(diǎn)，從此，Apple成為最終贏家、并在iPhone中將小紅點(diǎn)發(fā)揚(yáng)光大。

iOS設(shè)計(jì)指南中，在推送通知方面對(duì)小紅點(diǎn)的使用有明確的規(guī)范說明：每個(gè)通知都包含一個(gè)應(yīng)用名稱、APP圖標(biāo)及一條消息，通知的到來(lái)伴隨著聲音提示、小紅點(diǎn)即會(huì)出現(xiàn)在圖標(biāo)的右上角。隨后，Android也采用了小紅點(diǎn)的這種視覺表現(xiàn)方式，以至于后來(lái)用戶逐漸習(xí)慣了這種設(shè)計(jì)，小紅點(diǎn)也成為了各APP的通用設(shè)計(jì)規(guī)范。

3. UI設(shè)計(jì)中的小紅點(diǎn)

小紅點(diǎn)是大家最通俗的叫法，在UI設(shè)計(jì)中還有一個(gè)名稱叫徽標(biāo)（Badge），它指的是出現(xiàn)在圖標(biāo)或文字右上角、可帶有數(shù)字或文字的紅色圓點(diǎn)，小紅點(diǎn)的出現(xiàn)則意味著有新內(nèi)容或待處理的信息，其目的是為入口導(dǎo)流，起到引導(dǎo)用戶操作、增加點(diǎn)擊量的作用。

4. 深度了解小紅點(diǎn)

小紅點(diǎn)作為消息提醒的一種方式，并不僅僅只是表面上看到的視覺設(shè)計(jì)問題，它真正是一個(gè)產(chǎn)品營(yíng)銷策略及如何調(diào)度用戶注意力的問題，所以我們?cè)谠O(shè)計(jì)時(shí)要有敬畏之心，切勿亂用/濫用小紅點(diǎn)，需要在產(chǎn)品的長(zhǎng)期運(yùn)行中不斷尋找合理的契機(jī)再伺機(jī)而為，畢竟用戶體驗(yàn)與產(chǎn)品利益掛鉤。

用戶對(duì)不同類型產(chǎn)品的消息提醒，其投入的精力成本和接受程度是不一樣的。例如對(duì)QQ、微信等即時(shí)通訊類產(chǎn)品消息的處理效率可以說是非常高，不管是認(rèn)識(shí)的還是不認(rèn)識(shí)的，只要是列表中的好友發(fā)來(lái)消息，有很大的概率立即點(diǎn)開回復(fù)，甚至在沒有小紅點(diǎn)的情況下也會(huì)去檢查會(huì)話列表，以防有什么消息被漏掉；而抖音、快手這種內(nèi)容型產(chǎn)品明顯不一樣，基于產(chǎn)品本身就沒有那么強(qiáng)的訴求，一旦消息過多影響內(nèi)容瀏覽就會(huì)讓用戶產(chǎn)生反感，直至忍耐度降低，就算熟人發(fā)來(lái)消息，大多數(shù)人都沒有立即打開、即時(shí)回復(fù)的欲望。

這里必須要明確一點(diǎn)的是：適合其他產(chǎn)品內(nèi)容提醒的小紅點(diǎn)設(shè)計(jì)、并不一定適合自己的產(chǎn)品。

一味追求「高打開率」的小紅點(diǎn)設(shè)計(jì)在短期內(nèi)或可滿足產(chǎn)品需求，在用戶心中，不會(huì)刻意在乎小紅點(diǎn)的多少，真正關(guān)注的是這個(gè)提醒是否跟“我”有關(guān)，如果產(chǎn)品不懂得節(jié)制，僅依靠“紅點(diǎn)”的堆積來(lái)時(shí)刻吸引用戶注意力，時(shí)間一長(zhǎng)用戶就會(huì)麻木，可能直接忽略掉小紅點(diǎn)或因?yàn)椴粔驅(qū)Ｗ⒍z漏掉與自己相關(guān)的內(nèi)容。所以在設(shè)計(jì)小紅點(diǎn)之前，需要對(duì)其有一個(gè)清晰的認(rèn)識(shí)，了解小紅點(diǎn)的屬性、使用場(chǎng)景及設(shè)計(jì)原則，然后酌情使用。

二、用戶為什么會(huì)處理小紅點(diǎn)

1. 打破信息自身的平衡

在正常情況下，任何內(nèi)容都是沒有小紅點(diǎn)的，一旦某個(gè)地方突然出現(xiàn)小紅點(diǎn)則意味著信息發(fā)生了變化或出現(xiàn)了異常，極度破壞原本信息的平衡，用戶在本能反應(yīng)的驅(qū)使下可能會(huì)不由自主的點(diǎn)開，消除紅點(diǎn)或者一探究竟，不管如何，小紅點(diǎn)誘發(fā)用戶點(diǎn)擊的目標(biāo)就完成了。

2. 破壞周邊環(huán)境的和諧

「相似性」原理告訴我們：共同視覺元素的物體看起來(lái)更有關(guān)聯(lián)性，我們傾向于將看起來(lái)相似的對(duì)象視為一組或者一個(gè)模式，例如用顏色、形狀，大小，方向以及紋理等視覺元素，共同組成相近的樣式。

小紅點(diǎn)的出現(xiàn)就嚴(yán)重破壞了周邊的平衡、以及畫面的和諧，讓其中的某個(gè)內(nèi)容變得與眾不同并快速引起用戶重視并誘發(fā)用戶的點(diǎn)擊行為。利用此種方式達(dá)到目的的還有如底部標(biāo)簽欄引人注目的「發(fā)布」按鈕、金剛區(qū)的某個(gè)動(dòng)效icon…

3. 給用戶帶來(lái)不適

具有強(qiáng)迫癥心理的人都明白，他們喜歡追求極致的完美，對(duì)于不和諧、不對(duì)稱的事物會(huì)產(chǎn)生厭煩心理，并且會(huì)試圖去糾正這些“錯(cuò)誤”。小紅點(diǎn)正是利用了人們的這個(gè)弱點(diǎn)，通過打破原本信息平衡，給用戶帶來(lái)不適，讓用戶主動(dòng)點(diǎn)擊并消除它，業(yè)務(wù)導(dǎo)流的目的也就此達(dá)成。

三、小紅點(diǎn)設(shè)計(jì)三要素

小紅點(diǎn)的天然使命就是為用戶提供明確提醒，它可以是系統(tǒng)強(qiáng)加給用戶的（功能/內(nèi)容更新）、也可以是用戶之間被動(dòng)產(chǎn)生（對(duì)方發(fā)來(lái)的消息）或因用戶自己的主動(dòng)行為產(chǎn)生（操作結(jié)果反饋），不管以何種形式出現(xiàn)，它必須符合用戶固有認(rèn)知以及具備很強(qiáng)的可視性，這里我們可以從小紅點(diǎn)的色彩、位置、形狀三個(gè)方面來(lái)了解。

1. 色彩：為什么是紅色

設(shè)計(jì)師都知道，紅色會(huì)有一種危險(xiǎn)、警示的感覺，并能與其他信息形成強(qiáng)烈的對(duì)比，很容易引用戶起注意，所以小紅點(diǎn)使用了高亮度的紅色用以吸引用戶注意力，促使用戶去點(diǎn)擊。

如下圖所示，在不同顏色的徽標(biāo)中，你是否對(duì)小紅點(diǎn)情有獨(dú)鐘？

當(dāng)然，也有一些產(chǎn)品將其他主題色用在圓點(diǎn)徽標(biāo)中（國(guó)外產(chǎn)品居多），在視覺上顯得與眾不同，不過這也只是在少部分場(chǎng)景中用到，并非都統(tǒng)一成了主題色，且這跟產(chǎn)品想傳達(dá)的信息權(quán)重、用戶群體及內(nèi)容屬性有很大的關(guān)系，如果你對(duì)這一塊拿捏的不是特別準(zhǔn)，建議不要嘗試，小紅點(diǎn)雖然很大眾化、很普通，可至少不會(huì)出錯(cuò)。

2. 形狀：圓形的優(yōu)勢(shì)

相較于圓形，沒有任何鋒利的邊緣及棱角，它本身的簡(jiǎn)潔性能讓界面看起來(lái)更和諧、對(duì)用戶更友好，且能將視線聚焦至圓的中心點(diǎn)，對(duì)于凸顯圓形當(dāng)中的文本再合適不過了。

設(shè)想一下，如果小紅點(diǎn)用的是三角形、矩形或其他奇奇怪怪的形狀，你看到后的第一反應(yīng)會(huì)是什么？

一些文本內(nèi)容稍多的小紅點(diǎn)會(huì)使用圓角矩形（長(zhǎng)方形），通過將圓角值調(diào)到最大，依然不影響使用，不存在任何棱角的圓角矩形，用戶看到后的第一感覺是近乎橢圓形。

3. 位置：唯一的右上角

大家所看到的小紅點(diǎn)絕大多數(shù)都是在元素的右上角，前面講到過，小紅點(diǎn)主要用于消息提醒，所以必然要依附于某個(gè)主體信息、作為輔助提示的存在，我們把主體信息看作一個(gè)整體（物體），那么它的中心點(diǎn)和四角存在不同的力場(chǎng)，會(huì)對(duì)用戶產(chǎn)生不同的吸引力，下面將用排除法幫你找到小紅點(diǎn)最合適的位置。

首先，為了不影響主體信息的識(shí)別性，直接排除小紅點(diǎn)出現(xiàn)在元素中心位置的可能；

其次，在尼爾森的用戶閱讀視線模型中說過，用戶瀏覽信息的視覺動(dòng)線是從左到右、從上到下，小紅點(diǎn)既然是輔助信息，放在元素左上角就會(huì)喧賓奪主，不太合適；

再者，因受到重力的影響，如果小紅點(diǎn)出現(xiàn)在元素的左下角、右下角，總有一種向下傾斜的感覺，明顯也不合適，這就是為什么倒三角“▽”總感覺立不起來(lái)、有種要倒下的感覺，而正三角“△”卻能保持平衡，具有較強(qiáng)的穩(wěn)定性；

最后只剩下右上角，雖然筆者也無(wú)法說出放在右上角的好處，甚至同樣會(huì)對(duì)畫面造成一定的破壞，但與出其現(xiàn)其他位置相比，右上角的劣勢(shì)沒那么明顯，不管是出于產(chǎn)品需求、還是視覺體驗(yàn)，用戶的接受程度自然會(huì)高一些。

（PS：不要去玩那一套，為了證明某個(gè)觀點(diǎn)的正確性就使勁吹噓正面、或拼命抹黑對(duì)立面，小紅點(diǎn)放在右上角與其說明好處，倒不如說是別無(wú)選擇）

有時(shí)候，我們?cè)谠氐撞恳矔?huì)看到類似小紅點(diǎn)的存在，例如頭像下方的VIP標(biāo)記、右下角的性別提示（女：小紅點(diǎn)）、用戶在線狀態(tài)等，這些只是信息組合的一種方式，并非小紅點(diǎn)。需記住一定，小紅點(diǎn)的使命是傳遞新的消息、引導(dǎo)用戶點(diǎn)擊，用戶一旦操作，小紅點(diǎn)的目的就此達(dá)成、即刻消失。

四、應(yīng)用場(chǎng)景及視覺表現(xiàn)方式

很多產(chǎn)品都會(huì)不停的更新迭代，其功能也在不斷的豐富，為了提升用戶對(duì)相關(guān)內(nèi)容的點(diǎn)擊率，于是小紅點(diǎn)就被運(yùn)用在了各個(gè)業(yè)務(wù)入口。因?yàn)槭褂脠?chǎng)景及內(nèi)容的重要程度不同，小紅點(diǎn)也衍生出了幾種不同的形式以滿足對(duì)應(yīng)的使用場(chǎng)景，筆者在這里作出了整理歸類，分別對(duì)以下三種常見的樣式進(jìn)行分析。

1. 純紅點(diǎn)

純紅點(diǎn)是較為常見的類型，它的出現(xiàn)意味著“有新的內(nèi)容、新的消息”，是一種較為輕量級(jí)的提醒方式，引導(dǎo)用戶進(jìn)入更深的層級(jí)或打開特定內(nèi)容，從而達(dá)到增加點(diǎn)擊量、提升業(yè)務(wù)曝光率的目的。例如：圈子有最新動(dòng)態(tài)、APP有版本、功能有新增內(nèi)容等。

2. 紅點(diǎn)/數(shù)字組合

相較于其他方式，這算是最強(qiáng)的紅點(diǎn)提醒了，這種方式由純紅點(diǎn)演變而來(lái)，大多使用在與社交相關(guān)的功能模塊中，通過紅點(diǎn)加數(shù)字（具體數(shù)量）的消息提醒，吸引用戶注意力，輔助用戶獲取更多信息并快速做出判斷。例如：會(huì)話列表的未讀消息、系統(tǒng)消息通知等。

3. 紅點(diǎn)/文字組合

常用于運(yùn)營(yíng)活動(dòng)場(chǎng)景中，通過“免費(fèi)、熱門、新、New…”等較為熱門的文案，對(duì)用戶產(chǎn)生很大的吸引力，這也是基于大多數(shù)用戶的貪小便宜心理、獵奇心理等，促使用戶產(chǎn)生強(qiáng)烈的點(diǎn)擊欲望，從而達(dá)到營(yíng)銷的目的。

五、提升小紅點(diǎn)價(jià)值的小技巧

1. 確保清晰的路徑導(dǎo)向

不管是哪種類型的應(yīng)用，在投放紅點(diǎn)之前一定要考慮清楚每個(gè)層級(jí)的合理性，讓所有頁(yè)面的信息層級(jí)能夠串聯(lián)起來(lái)，確保用戶有一個(gè)清晰的路徑導(dǎo)向。

在一些體驗(yàn)較差應(yīng)用中，點(diǎn)擊小紅點(diǎn)跳轉(zhuǎn)至對(duì)應(yīng)的頁(yè)面后、卻找不到與小紅點(diǎn)相關(guān)的內(nèi)容，直接導(dǎo)致了信息斷層，用戶根本不清楚產(chǎn)品到底想提示什么，返回到上層頁(yè)面后，小紅點(diǎn)依舊無(wú)法消除，這時(shí)候用戶只能是一臉茫然，甚至一度吐槽、產(chǎn)生反感。

針對(duì)初/中的設(shè)計(jì)師，如果產(chǎn)品的功能信息繁雜、層級(jí)很難理清，可以嘗試從小紅點(diǎn)內(nèi)容的最終級(jí)頁(yè)面逐漸向上一層推導(dǎo)，這樣做便于每個(gè)頁(yè)面的小紅點(diǎn)層級(jí)關(guān)系能很好地繼承起來(lái)。

2. 匹配用戶價(jià)值

對(duì)于小紅點(diǎn)的投放，不能一味的圖“更多、更大、更有吸引力”這種為了投放而投放的自嗨，必須要讓當(dāng)前內(nèi)容與用戶價(jià)值相匹配，才能起到小紅點(diǎn)真正意義上的作用。