UI設(shè)計(jì)中最常見的小紅點(diǎn)該如何設(shè)計(jì)？本文從小紅點(diǎn)的前世今生、設(shè)計(jì)要素、應(yīng)用場景、提升價(jià)值的技巧等6個(gè)方面，幫你完整掌握。

前言

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

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

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

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

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

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

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

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

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

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

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

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

iOS 設(shè)計(jì)指南中，在推送通知方面對小紅點(diǎn)的使用有明確的規(guī)范說明：每個(gè)通知都包含一個(gè)應(yīng)用名稱、APP 圖標(biāo)及一條消息，通知的到來伴隨著聲音提示、小紅點(diǎn)即會出現(xiàn)在圖標(biāo)的右上角。隨后，AndROId 也采用了小紅點(diǎn)的這種視覺表現(xiàn)方式，以至于后來用戶逐漸習(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)品營銷策略及如何調(diào)度用戶注意力的問題，所以我們在設(shè)計(jì)時(shí)要有敬畏之心，切勿亂用/濫用小紅點(diǎn)，需要在產(chǎn)品的長期運(yùn)行中不斷尋找合理的契機(jī)再伺機(jī)而為，畢竟用戶體驗(yàn)與產(chǎn)品利益掛鉤。

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

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

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

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

1. 打破信息自身的平衡

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

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

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

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

3. 給用戶帶來不適

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

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

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

1. 色彩：為什么是紅色

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

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

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

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

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

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

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

3. 位置：唯一的右上角

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

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

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

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

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

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

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

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

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

1. 純紅點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 微動效的使用

因?yàn)槿藗兲焐鷷討B(tài)的事物更加敏感，將這一特性運(yùn)用在小紅點(diǎn)中是吸引用戶注意力的好方法。很多 APP 在金剛區(qū)圖標(biāo)小紅點(diǎn)中融入了動態(tài)效果，不僅能快速吸引用戶注意力，還讓小紅點(diǎn)具有情感化或趣味性、帶給用戶更愉悅的使用體驗(yàn)。

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

4. 友好的消除方式

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

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

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

社交/辦公類型產(chǎn)品（數(shù)量不可控）：不適合一鍵清除功能，因?yàn)槿魏我粭l好友信息都有可能對用戶很重要，用戶有必要單獨(dú)觸達(dá)、且也有耐心一一點(diǎn)開并詳細(xì)查看，一鍵清除有可能導(dǎo)致用戶誤操作，造成對信息的不可控；

其他類型產(chǎn)品（紅點(diǎn)少）：無需一鍵清除，因紅點(diǎn)本身就較少的原因，且不是必須要打開，用戶可忽略或在感興趣之余一探究竟，單獨(dú)觸發(fā)消除即可；

其他類型產(chǎn)品（紅點(diǎn)多）：因很多紅點(diǎn)信息是非必要打開的，可使用一鍵清除功能處理龐大的推送信息，讓頁面瞬間清凈。

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

5. 驗(yàn)證投放效果

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

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

六、常見問題及處理方式

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

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

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

2. 小紅點(diǎn)需克制投放

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

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

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

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

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

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

5. 矩形小紅點(diǎn)的用法

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

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

6. 紅色元素上的小紅點(diǎn)

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

7. 添加合適的投影

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

七、結(jié)語

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

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

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

作者：能量眼球