人類似乎天生對(duì)不對(duì)稱、不和諧的事物有厭煩心理，并且想要去糾正這些“錯(cuò)誤”，簡(jiǎn)而言之就是大家平時(shí)所說(shuō)的“強(qiáng)迫癥”。而小紅點(diǎn)則完美利用了這一人性的弱點(diǎn)，它就像白嫩臉頰上長(zhǎng)出的一顆小痘痘，讓人忍住不去要去擠破它。因此，小紅點(diǎn)也成為了一把產(chǎn)品運(yùn)營(yíng)利器，只要投放在某個(gè)業(yè)務(wù)入口，就幾乎沒(méi)有用戶會(huì)對(duì)它熟視無(wú)睹，而當(dāng)用戶忍不住要去輕觸消除它時(shí)，產(chǎn)品側(cè)為業(yè)務(wù)導(dǎo)流的目的也就達(dá)到了。

那么問(wèn)題來(lái)了，用戶喜歡小紅點(diǎn)嗎？在Google和必應(yīng)上搜索關(guān)鍵詞“App小紅點(diǎn)”，幾乎有一半的搜索結(jié)果是“教你如何消除小紅點(diǎn)”。

一項(xiàng)數(shù)據(jù)顯示，在用戶卸載App的7大原因中，“煩人的消息提醒”一項(xiàng)高居榜首，而小紅點(diǎn)作為提醒引導(dǎo)的形式之一也難逃其咎。

可見(jiàn)，用戶對(duì)小紅點(diǎn)實(shí)在是喜歡不起來(lái)。但是，讓用戶如此厭煩的小紅點(diǎn)真的就一無(wú)是處嗎？如果沒(méi)有小紅點(diǎn)，用戶將無(wú)法第一時(shí)間知道男神女神給自己回了微信，無(wú)法最快得知自己關(guān)注的淘寶店鋪剛剛上架了新品，也會(huì)錯(cuò)過(guò)最新的優(yōu)惠活動(dòng)和剛剛上線的有趣功能。

小紅點(diǎn)之所以變成煩人的“小妖精”，究其原因，其實(shí)是產(chǎn)品側(cè)和用戶側(cè)的目標(biāo)不一致造成的。產(chǎn)品側(cè)想要向用戶推廣新功能新業(yè)務(wù)，但這些不一定是用戶需要的，甚至?xí)驍_到用戶。所以，如何權(quán)衡好小紅點(diǎn)的業(yè)務(wù)目標(biāo)和用戶體驗(yàn)，是一項(xiàng)可以認(rèn)真討論的議題。

小紅點(diǎn)的起源

在開(kāi)始之前，我們先來(lái)追溯一下小紅點(diǎn)的起源。小紅點(diǎn)到底是由誰(shuí)最先發(fā)明的呢？眾說(shuō)紛紜，其中一個(gè)比較受大眾認(rèn)同的說(shuō)法是，小紅點(diǎn)最早來(lái)自于黑莓手機(jī)系統(tǒng)。在諾基亞仍一統(tǒng)天下的時(shí)代，新消息的提醒為圖標(biāo)+數(shù)字的形式，更像是Web端的處理方式。黑莓在2009年推出的9700系列，其搭載的黑莓系統(tǒng)開(kāi)始使用了帶星號(hào)的小紅點(diǎn)形式。

而在小紅點(diǎn)的專利歸屬上，Apple公司成為了最終贏家。Apple公司于2013年注冊(cè)了相關(guān)專利，并在iOS系統(tǒng)上開(kāi)始正式使用，小紅點(diǎn)由此逐漸被人們所熟知。

在iOS界面設(shè)計(jì)指南中，Apple公司對(duì)涉及小紅點(diǎn)的推送通知規(guī)范也有明確的闡述：

無(wú)論設(shè)備被鎖屏還是在使用中，app都能隨時(shí)利用通知來(lái)提供及時(shí)和重要的信息。每個(gè)通知都包含應(yīng)用名稱、一個(gè)app圖標(biāo)以及一條消息。通知的到來(lái)也可能伴隨聲音提示，以及app圖標(biāo)右上角小紅點(diǎn)角標(biāo)的出現(xiàn)和更新。Android隨后跟進(jìn)模仿了這一設(shè)計(jì)樣式，小紅點(diǎn)成為了通用設(shè)計(jì)的規(guī)范。如今，小紅點(diǎn)的身影在各個(gè)App中幾乎無(wú)處不在，在移動(dòng)互聯(lián)網(wǎng)的時(shí)代，它與我們的日常生活正變得密不可分起來(lái)。

小紅點(diǎn)的類型及主要的使用場(chǎng)景

隨著眾多App的功能不斷豐富，內(nèi)容的更新日漸頻繁，為了增加各個(gè)業(yè)務(wù)的曝光率，提升相關(guān)頁(yè)面的觸達(dá)率，大量的小紅點(diǎn)被投放在各個(gè)業(yè)務(wù)入口。原本形式單一的小紅點(diǎn)，也隨之演化出各種不同的形式，以滿足不同業(yè)務(wù)場(chǎng)景的需求。

眾所周知，手機(jī)QQ是一款功能豐富的社交產(chǎn)品，其涉及到的各種業(yè)務(wù)數(shù)不勝數(shù)，如果各個(gè)業(yè)務(wù)線隨心所欲的在自己的業(yè)務(wù)入口投放各種樣式的紅點(diǎn)，對(duì)用戶而言無(wú)疑是個(gè)災(zāi)難。為了保證用戶體驗(yàn)的一致性，手機(jī)QQ的QUI規(guī)范就對(duì)小紅點(diǎn)的類型進(jìn)行了歸類整理，這里再簡(jiǎn)單梳理其主要對(duì)應(yīng)的使用場(chǎng)景。

1. 小紅點(diǎn)

最基本也是最常用的紅點(diǎn)類型，也是小紅點(diǎn)的最初形態(tài)，一般被投放在業(yè)務(wù)入口處，用于內(nèi)容、功能或動(dòng)態(tài)更新的提醒。

2. 小紅點(diǎn)+數(shù)字

由基礎(chǔ)的小紅點(diǎn)樣式演化而來(lái)，可以展示未讀消息的數(shù)量，一般用于比如QQ，微信，QQ空間，朋友圈等社交場(chǎng)景，在有新的好友信息，新的點(diǎn)贊或評(píng)論時(shí)顯示。

3. 文字紅點(diǎn)

文字內(nèi)容主要有“免費(fèi)”“熱門(mén)”“新”“new”等，主要用于上新、免費(fèi)、限時(shí)搶購(gòu)等運(yùn)營(yíng)活動(dòng)，直觀的文字內(nèi)容如“免費(fèi)”一般能強(qiáng)烈的吸引用戶的點(diǎn)擊欲望。

4. 異形紅點(diǎn)

App功能和場(chǎng)景不斷拓展，使得小紅點(diǎn)形式也隨之發(fā)生了新的變化，擁有了更多的形態(tài)，雖然與基礎(chǔ)樣式的小紅點(diǎn)已經(jīng)有很大差別，但是其仍然承擔(dān)了小紅點(diǎn)的功能，從一定意義上來(lái)說(shuō)，它仍然是小紅點(diǎn)。結(jié)合圖標(biāo)或內(nèi)容縮略圖的異形紅點(diǎn)讓用戶對(duì)內(nèi)容有了提前預(yù)知，主要用于強(qiáng)力推送的運(yùn)營(yíng)活動(dòng)場(chǎng)景。

以上的幾種小紅點(diǎn)類型，基本涵蓋了目前市面上所有App的基礎(chǔ)小紅點(diǎn)形式。還有各類App根據(jù)自己的業(yè)務(wù)需求設(shè)計(jì)了更多個(gè)性化的小紅點(diǎn)形式，這里就不一一細(xì)數(shù)。當(dāng)然，小紅點(diǎn)不是孤立使用的，一項(xiàng)功能或業(yè)務(wù)的運(yùn)營(yíng)涉及多個(gè)層級(jí)多個(gè)入口，所以大多數(shù)情況下是多種小紅點(diǎn)形式結(jié)合使用的。

小紅點(diǎn)的幾個(gè)設(shè)計(jì)細(xì)節(jié)

說(shuō)到小紅點(diǎn)的設(shè)計(jì)，有些同學(xué)可能會(huì)想，一個(gè)紅色的小圓點(diǎn)，有什么好設(shè)計(jì)的？當(dāng)然，使用基礎(chǔ)的小紅點(diǎn)樣式，無(wú)疑是最省時(shí)省力的做法。但是，正如我們看到的，未經(jīng)思考設(shè)計(jì)而投放的小紅點(diǎn)，不僅讓用戶產(chǎn)生強(qiáng)烈的厭煩心理，而過(guò)多的小紅點(diǎn)也會(huì)導(dǎo)致用戶免疫，影響業(yè)務(wù)導(dǎo)流的效果。

那么，如何設(shè)計(jì)好小紅點(diǎn)呢。在這里根據(jù)平時(shí)項(xiàng)目的經(jīng)驗(yàn)以及對(duì)一些案例的分析，總結(jié)了小紅點(diǎn)設(shè)計(jì)的幾個(gè)細(xì)節(jié)：

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

每當(dāng)一項(xiàng)業(yè)務(wù)有新的動(dòng)態(tài)消息或上新的內(nèi)容時(shí)，都要在業(yè)務(wù)入口處投放小紅點(diǎn)以把用戶引導(dǎo)到最終頁(yè)面，但投放的小紅點(diǎn)往往會(huì)出現(xiàn)斷層的情況，用戶在一步步輕觸到達(dá)最終的頁(yè)面后戛然而止，不清楚產(chǎn)品側(cè)想給他展示什么內(nèi)容。

如下圖App中，在底部的tabbar的首頁(yè)tab投放了小紅點(diǎn)，但是在頁(yè)面內(nèi)容中卻看不到與小紅點(diǎn)相關(guān)的內(nèi)容。而在消息tab上沒(méi)有投放小紅點(diǎn)，卻在消息列表里卻出現(xiàn)了小紅點(diǎn)，這樣提醒引導(dǎo)出現(xiàn)了信息斷層，容易導(dǎo)致用戶產(chǎn)生困惑。

針對(duì)這一問(wèn)題，一種有效的設(shè)計(jì)方法是倒推法，即從最終要投放小紅點(diǎn)的末級(jí)頁(yè)面開(kāi)始，不斷的向上一層級(jí)的頁(yè)面倒推，思考每一個(gè)層級(jí)業(yè)務(wù)入口投放小紅點(diǎn)的合理性，如此一來(lái)每個(gè)頁(yè)面層級(jí)的小紅點(diǎn)也能繼承起來(lái)，給用戶以清晰的路徑導(dǎo)向。

2. 符合用戶預(yù)期

對(duì)于小紅點(diǎn)的投放，也要注意每個(gè)頁(yè)面層級(jí)前后信息的一致性，以符合用戶的預(yù)期。

如下圖App中，右上角的消息入口顯示紅點(diǎn)+數(shù)字5，輕觸進(jìn)入下一層級(jí)后，顯示的小紅點(diǎn)數(shù)字為1+2+1=4，與上一層級(jí)的數(shù)字5不一致，導(dǎo)致與用戶原本的預(yù)期產(chǎn)生偏差，而產(chǎn)品本身的專業(yè)性也會(huì)受到用戶質(zhì)疑。

3. 友好的消除策略

在投放小紅點(diǎn)之前，應(yīng)先確定好小紅點(diǎn)的消除策略，大部分App采用觸過(guò)即消的策略，還有一些App則需要到達(dá)最后的頁(yè)面層級(jí)，其上幾個(gè)層級(jí)入口的小紅點(diǎn)才會(huì)消除。而部分App為了對(duì)業(yè)務(wù)入口進(jìn)行強(qiáng)引導(dǎo)，在用戶輕觸后小紅點(diǎn)仍然存在，這無(wú)疑是在挑戰(zhàn)用戶的底線，甚至還有可能導(dǎo)致用戶卸載App。

筆者正在使用的Behance這款A(yù)pp，首頁(yè)右上角的紅點(diǎn)，無(wú)論嘗試多少次輕觸進(jìn)入最后層級(jí)的頁(yè)面，都無(wú)法成功將其消除，實(shí)在是令人如鯁在喉，不知道有沒(méi)有小伙伴也遇到相同的問(wèn)題。

而手機(jī)QQ早在2014年就上線的小紅點(diǎn)“一鍵下班”功能則是一個(gè)非常值得稱道的設(shè)計(jì)案例，拖拽消除小紅點(diǎn)的操作便捷又有趣味性，一鍵清除小紅點(diǎn)之后簡(jiǎn)直是神清氣爽，可見(jiàn)從小細(xì)節(jié)上給用戶帶更好的體驗(yàn)多么重要。

4. 更多樣的小紅點(diǎn)

形式小紅點(diǎn)的樣式從最初始的紅色小圓點(diǎn)形式，已經(jīng)慢慢進(jìn)化到現(xiàn)在樣式豐富的異形紅點(diǎn)，但紅色小圓點(diǎn)這一元素仍得以保留。千篇一律的樣式總是讓人感到厭倦，如果能結(jié)合自身產(chǎn)品的特征及形象設(shè)計(jì)新的小紅點(diǎn)樣式，不僅能給用戶帶來(lái)新鮮感，更能加強(qiáng)產(chǎn)品的品牌形象。

如厘米秀就使用了小膠囊的樣式，作為獲得新套裝的提醒引導(dǎo)，不僅貼合了自身品牌的形象，也與頁(yè)面其他的常規(guī)小紅點(diǎn)樣式區(qū)分開(kāi)來(lái)，更加生動(dòng)有趣。

5. 結(jié)合微動(dòng)效

如今手機(jī)的屏幕很大，用戶閱讀的視線路徑很長(zhǎng)，用戶被上一層級(jí)入口的小紅點(diǎn)引導(dǎo)到當(dāng)前頁(yè)面后，往往需要花費(fèi)一點(diǎn)時(shí)間來(lái)尋找當(dāng)前頁(yè)面的小紅點(diǎn)，而結(jié)合微動(dòng)效的小紅點(diǎn)則可以有效的解決這一問(wèn)題。因?yàn)槿祟愄焐蜁?huì)關(guān)注正在運(yùn)動(dòng)的事物，讓小紅點(diǎn)動(dòng)起來(lái)無(wú)疑是吸引用戶注意的好方法，結(jié)合微動(dòng)效的小紅點(diǎn)更具情感和趣味性，容易能給用戶帶來(lái)愉悅的體驗(yàn)。

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

投放太多小紅點(diǎn)容易產(chǎn)生兩種極端情況，一個(gè)是造成用戶產(chǎn)生厭煩心理而卸載App，另一個(gè)是用戶對(duì)小紅點(diǎn)完全產(chǎn)生免疫，尤其是在游戲App中，試問(wèn)你現(xiàn)在玩王者榮耀的時(shí)候，面對(duì)滿屏的小紅點(diǎn)，還要每次都全部消除完畢之后才會(huì)開(kāi)黑嗎。

因此，在投放小紅點(diǎn)之前，先思考一下在某一入口投放小紅點(diǎn)的目的，是不是有其他更好的方式能代替小紅點(diǎn)，即符合業(yè)務(wù)場(chǎng)景又能起到為業(yè)務(wù)導(dǎo)流的作用。

來(lái)看看幾個(gè)在同一業(yè)務(wù)入口下使用小紅點(diǎn)與非紅點(diǎn)案例的對(duì)比，第一個(gè)是QQ錢(qián)包的賬戶余額入口，非紅點(diǎn)方案采用了數(shù)字滾動(dòng)的效果，比起小紅點(diǎn)方案，不僅更能吸引用戶的注意力，也能清晰的表達(dá)錢(qián)包余額減少的概念，設(shè)計(jì)可謂十分精巧。

第二個(gè)是淘寶App首頁(yè)的“天貓國(guó)際”業(yè)務(wù)入口，非紅點(diǎn)的方案，結(jié)合了天貓的卡通形象，配合了彈出和眨眼的動(dòng)效，十分的俏皮可愛(ài)，也加強(qiáng)了自身的品牌形象。

如今這種動(dòng)態(tài)業(yè)務(wù)入口的方案正被許多電商類App采用，不僅能吸引到用戶的注意力，還能展示更多的運(yùn)營(yíng)信息內(nèi)容。

從以上幾個(gè)方案的對(duì)比，可以看到，在一些業(yè)務(wù)入口的場(chǎng)景下，投放常規(guī)的小紅點(diǎn)雖然也能滿足業(yè)務(wù)的需求，但是如果經(jīng)過(guò)精心的思考和設(shè)計(jì)，最終的方案往往能給予用戶超出意料之外的精致體驗(yàn)。

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

一款A(yù)pp有成百上千的業(yè)務(wù)入口，并不是每種小紅點(diǎn)形式都能適用。如果不確定是否要投放紅點(diǎn)，或者糾結(jié)使用哪種小紅點(diǎn)形式，在條件允許的情況下，可以通過(guò)灰度發(fā)布進(jìn)行A/B test，關(guān)注不同小紅點(diǎn)方案的轉(zhuǎn)化效果，搜集到的數(shù)據(jù)往往能為最終上線的方案提供有力的支撐。

由騰訊SNG內(nèi)部開(kāi)發(fā)的開(kāi)普勒平臺(tái)，就是一個(gè)通過(guò)數(shù)據(jù)檢驗(yàn)設(shè)計(jì)效果的得力工具，通過(guò)在各個(gè)業(yè)務(wù)入口埋點(diǎn)，持續(xù)關(guān)注線上數(shù)據(jù)的變化，搜集用戶的反饋數(shù)據(jù)。

如以下的案例，通過(guò)A/Btest，發(fā)現(xiàn)業(yè)務(wù)入口的彩色icon的平均轉(zhuǎn)化率高于純色的icon 20%左右，因此最終選用了彩色icon作為最終上線方案。通過(guò)工具搜集數(shù)據(jù)反饋，讓設(shè)計(jì)不再是主觀臆斷，也能以此為依據(jù)不斷的迭代優(yōu)化設(shè)計(jì)方案，增強(qiáng)用戶體驗(yàn)感。

結(jié)語(yǔ)

以上啰嗦了這么多，主要目的是希望廣大的互聯(lián)網(wǎng)從業(yè)者們?cè)谠O(shè)計(jì)過(guò)程中能對(duì)小紅點(diǎn)的保持一定的關(guān)注。不要在設(shè)計(jì)的最后環(huán)節(jié)才想起它，然后隨意投放應(yīng)付了事，最終不僅打擾到用戶，產(chǎn)品自身的口碑也受到影響。

當(dāng)然，每款A(yù)pp的各個(gè)業(yè)務(wù)入口和功能場(chǎng)景不盡相同，設(shè)計(jì)面臨的情況十分復(fù)雜，也不要為了追求所謂的創(chuàng)新而使用各種“炫酷”樣式的小紅點(diǎn)，應(yīng)當(dāng)回歸到用戶的價(jià)值，思考投放小紅點(diǎn)的必要性，以及小紅點(diǎn)形式與產(chǎn)品視覺(jué)風(fēng)格的一致性，如此一來(lái)，原本煩人的“小妖精”才會(huì)真正的被用戶所接受。

參考資料：

• 怎樣設(shè)計(jì)一個(gè)不好的“紅點(diǎn)”邏輯
• 手機(jī)APP設(shè)計(jì)干貨：不簡(jiǎn)單的紅點(diǎn)設(shè)計(jì)
• Mobile UX Design: What Makes a Good Notification?
• Designing the Perfect Notification UX
• Local and Remote Notification Programming Guide
• Managing notification service connections and displaying icon badges

作者：騰訊社交用戶體驗(yàn)設(shè)計(jì)部 YU

來(lái)源：zhihu

本文由 知乎賬號(hào)@騰訊?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。