對于APP上的小紅點，強迫癥患者很不舒適，一定要點掉消除不可。但對于產(chǎn)品設(shè)計者而言，小紅點是他們轉(zhuǎn)化的一種設(shè)計手段。本文將就如何降低或者打消小紅點為用戶帶來的支配恐懼，以及是否能夠帶來轉(zhuǎn)化這兩個方面展開分析，一起來看看。

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

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

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

一、小紅點的前世今生

1. 用戶會“喜歡”小紅點嗎？

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

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

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

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

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

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

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

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

3. UI設(shè)計中的小紅點

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

4. 深度了解小紅點

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

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

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

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

二、用戶為什么會處理小紅點

1. 打破信息自身的平衡

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

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

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

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

3. 給用戶帶來不適

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

三、小紅點設(shè)計三要素

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

1. 色彩：為什么是紅色

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

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

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

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

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

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

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

3. 位置：唯一的右上角

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

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

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

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

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

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

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

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

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

1. 純紅點

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

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

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

3. 紅點/文字組合

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

五、提升小紅點價值的小技巧

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

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

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

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

2. 匹配用戶價值

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

另外，也需要注意每個頁面前后信息的一致性，如果最外層的小紅點用了數(shù)字統(tǒng)計的樣式，那么下一層頁面所有紅點數(shù)字之和應(yīng)該與外層的數(shù)字統(tǒng)計相等，切勿將純紅點、數(shù)字組合、文字組合混合統(tǒng)計在一起，避免讓用戶產(chǎn)生疑惑，如有必要，下一頁面的小紅點可能樣式云集，那就在最上層使用純紅點就可解決這個問題。

3. 微動效的使用

因為人們天生會對動態(tài)的事物更加敏感，將這一特性運用在小紅點中是吸引用戶注意力的好方法。很多APP在金剛區(qū)圖標(biāo)小紅點中融入了動態(tài)效果，不僅能快速吸引用戶注意力，還讓小紅點具有情感化或趣味性、帶給用戶更愉悅的使用體驗。

動態(tài)效果只適用于運營、推廣性質(zhì)的文字小紅點中，如果用在純紅點、數(shù)字紅點中，可能會適得其反。

4. 友好的消除方式

早在2014年，手機QQ上線小紅點“拖拽爆炸”的消除方式廣受好評，相較于每次都要點擊跳轉(zhuǎn)頁面、再返回的單個消除方式既便捷又有趣味性，同時又能避免追求一鍵清除的便捷而造成失誤的尷尬（眼尖的網(wǎng)友會發(fā)現(xiàn)，大部分社交類型的應(yīng)用都沒有一鍵清除功能）。

我們見過的小紅點消除方式很多都是點擊即可消除，還有一些需要跳轉(zhuǎn)多個頁面觸達最終信息才能消除，同時也有部分產(chǎn)品為提供更便捷的操作，增加了「一鍵清除」功能。

那么這個頁面到底是否適合一鍵清除操作，還得根據(jù)實際情況而定，且看以下分析：

• 社交/辦公類型產(chǎn)品（數(shù)量不可控）：不適合一鍵清除功能，因為任何一條好友信息都有可能對用戶很重要，用戶有必要單獨觸達、且也有耐心一一點開并詳細查看，一鍵清除有可能導(dǎo)致用戶誤操作，造成對信息的不可控；
• 其他類型產(chǎn)品（紅點少）：無需一鍵清除，因紅點本身就較少的原因，且不是必須要打開，用戶可忽略或在感興趣之余一探究竟，單獨觸發(fā)消除即可；
• 其他類型產(chǎn)品（紅點多）：因很多紅點信息是非必要打開的，可使用一鍵清除功能處理龐大的推送信息，讓頁面瞬間清凈。

（PS：以上僅供參考，雖然沒有足夠的數(shù)據(jù)支撐，但筆者敢說的是大部分產(chǎn)品都是據(jù)此而行，而且也沒有任何一個產(chǎn)品能滿足所有用戶的需求）

5. 驗證投放效果

在一個應(yīng)用中，我們在成百上千的業(yè)務(wù)入口中挑選一部分、利用小紅點作為引流方式，即便前期做了充足的準備，在用戶真實的使用場景中，也有可能會不合適，這時候就需要提前做好數(shù)據(jù)埋點，通過后期對用戶的點擊率、轉(zhuǎn)化率、層級深入程度等進行綜合分析，如果未達預(yù)期，則需要做出優(yōu)化調(diào)整，更改小紅點投放入口或表現(xiàn)方式。

（PS：對于新方案的規(guī)劃，基于原有方案通常會設(shè)定一個提升20%~30%的預(yù)期值，10%是勉強能接受的最低標(biāo)準，如若低于10%，必定會再次做出優(yōu)化調(diào)整）

六、常見問題及處理方式

1. 避免圖標(biāo)元素自帶紅點

小紅點已成為一種內(nèi)容/消息提示的標(biāo)志性象征，只要被用戶看到就會認為有新的內(nèi)容出現(xiàn)，在正向的回應(yīng)中還好，但如果敏感的用戶刻意忽略、或者以消除紅點為目的的點擊行為，這都將增加用戶的理解成本和操作成本，得不償失。

我們在創(chuàng)作圖標(biāo)的過程中，需要避免圖標(biāo)右上角本身就自帶小紅點的情況出現(xiàn)，因為絕大多數(shù)的圖標(biāo)造型、元素形狀/大小并非無可替代，若因特殊情況不可更改，請將右上角圓點換成除紅色以外的其他顏色，這也不失為一種解決方案。

2. 小紅點需克制投放

很多產(chǎn)品為了營銷、導(dǎo)流等原因，將大量的小紅點強加給用戶，這樣很容易產(chǎn)生極端情況，要么造成用戶的厭煩心理、對產(chǎn)品的滿意度下降、甚至卸載應(yīng)用，要么用戶對過多的小紅點產(chǎn)生免疫、看到后直接忽略或為了消除而消除，最終都無法達到產(chǎn)品想要的結(jié)果。

在投放小紅點之前，除了要分析清楚投放目的及合適的入口，還需要思考是否有其他更好的方式能代替小紅點，力求發(fā)揮其最大價值，如此才不至于顧此失彼。

3. 紅點內(nèi)容的長度限制

針對數(shù)字/文字組合的小紅點，因空間有限，需提前設(shè)定好內(nèi)容的長度極限值。數(shù)字紅點在99條內(nèi)都屬于實時統(tǒng)計，超過99條通常會統(tǒng)一成“99+的樣式”；兩個字符為文字紅點的最佳展示方式，我們在設(shè)定上限時，一般不超過3個字符。

4. 主層級紅點數(shù)據(jù)統(tǒng)計

如果次級頁面的小紅點數(shù)量較多且樣式混搭、在主層級頁面需用數(shù)字紅點統(tǒng)計數(shù)量，那么只統(tǒng)計次級頁面只帶數(shù)字紅點消息的總量即可，純紅點與文字組合的直接忽略。

5. 矩形小紅點的用法

在國內(nèi)的應(yīng)用中，矩形小紅點應(yīng)該很難見到，但你可能還不知道，有很多小紅點都是矩形，只不過是將圓角半徑值調(diào)到最大、以障眼法的形式讓用戶誤以為這就是這個圓形。

不要以為這樣做多此一舉，當(dāng)內(nèi)容由少變多時，小紅點可自由縱向、橫向延伸，非常方便。例如：紅點中的“折”是圓形，當(dāng)變成“折扣”時就變成了長橢圓（圓角矩形）。

6. 紅色元素上的小紅點

當(dāng)小紅點用在紅色圖標(biāo)、圖片或色塊時，就會與之融合在一起，很難單獨看出小紅點的存在，通過給紅點描邊就能將其分離出來，確保在紅色背景或載體中能被用戶清晰的看到。

7. 添加合適的投影

除了上述所說給小紅點添加描邊外，使用投影效果也是突出小紅點不錯的方式（不適合紅色背景），通過吸取紅點色值、然后適當(dāng)加深，讓小紅點有一種懸浮效果，呼之欲出。

七、結(jié)語

整體看來，小紅點已成為頁面導(dǎo)流的一種有效途徑，雖然不同的應(yīng)用業(yè)務(wù)入口和功能使用場景也有所不同，但其設(shè)計的本質(zhì)應(yīng)該是如何更高效的、友好的提醒用戶，不要為了應(yīng)付了事而隨意投放，最終紅不僅嚴重影響用戶體驗，還有可能造成用戶流失。

在設(shè)計小紅點之前，要考慮清楚投放的必要性、以及跟產(chǎn)品風(fēng)格一致性的表現(xiàn)方式，在條件允許的情況下適當(dāng)增加趣味性，這樣才能讓那些煩人的“小紅點”真正被用戶接受，對產(chǎn)品轉(zhuǎn)化起到正向效果。

以上是筆者對小紅點的相關(guān)思考與總結(jié)，希望對大家有所幫助，如有不同意見，歡迎相互交流、取長補短。