隨著各類App的業(yè)務(wù)功能不斷豐富，小紅點(diǎn)已經(jīng)成為互聯(lián)網(wǎng)從業(yè)者們最常使用的運(yùn)營工具之一，每當(dāng)有新的運(yùn)營內(nèi)容或新功能上線，大家的做法往往是“在那放個紅點(diǎn)就行了”。然而簡單粗暴的形式以及不加節(jié)制的投放，讓小紅點(diǎn)變成了人人厭煩的“小妖精”。本文從設(shè)計(jì)的角度出發(fā)淺談小紅點(diǎn)的一些設(shè)計(jì)細(xì)節(jié)，期望引起大家對小紅點(diǎn)的關(guān)注，在這里拋磚引玉，也期待感興趣的小伙伴一起探討。

煩人的小紅點(diǎn)

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

那么問題來了，用戶喜歡小紅點(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)的形式之一也難逃其咎。

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

小紅點(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)的起源

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

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

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

無論設(shè)備被鎖屏還是在使用中，app都能隨時利用通知來提供及時和重要的信息。每個通知都包含應(yīng)用名稱、一個app圖標(biāo)以及一條消息。通知的到來也可能伴隨聲音提示，以及app圖標(biāo)右上角小紅點(diǎn)角標(biāo)的出現(xiàn)和更新。

Android隨后跟進(jìn)模仿了這一設(shè)計(jì)樣式，小紅點(diǎn)成為了通用設(shè)計(jì)的規(guī)范。如今，小紅點(diǎn)的身影在各個App中幾乎無處不在，在移動互聯(lián)網(wǎng)的時代，它與我們的日常生活正變得密不可分起來。

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

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

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

1.小紅點(diǎn)

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

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

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

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

3.友好的消除策略

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

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

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

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

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

5.結(jié)合微動效

如今手機(jī)的屏幕很大，用戶閱讀的視線路徑很長，用戶被上一層級入口的小紅點(diǎn)引導(dǎo)到當(dāng)前頁面后，往往需要花費(fèi)一點(diǎn)時間來尋找當(dāng)前頁面的小紅點(diǎn)，而結(jié)合微動效的小紅點(diǎn)則可以有效的解決這一問題。

因?yàn)槿祟愄焐蜁P(guān)注正在運(yùn)動的事物，讓小紅點(diǎn)動起來無疑是吸引用戶注意的好方法，結(jié)合微動效的小紅點(diǎn)更具情感和趣味性，容易能給用戶帶來愉悅的體驗(yàn)。

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

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

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

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

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

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

如以下的案例，通過A/Btest，發(fā)現(xiàn)業(yè)務(wù)入口的彩色icon的平均轉(zhuǎn)化率高于純色的icon 20%

左右，因此最終選用了彩色icon作為最終上線方案。通過工具搜集數(shù)據(jù)反饋，讓設(shè)計(jì)不再是主觀臆斷，也能以此為依據(jù)不斷的迭代優(yōu)化設(shè)計(jì)方案。