2017-8-18 資深UI設(shè)計者
隨著各類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è)計的角度出發(fā)淺談小紅點(diǎn)的一些設(shè)計細(xì)節(jié)，期望引起大家對小紅點(diǎn)的關(guā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)”。
一項數(shù)據(jù)顯示，在用戶卸載App的7大原因中，“煩人的消息提醒”一項高居榜首，而小紅點(diǎn)作為提醒引導(dǎo)的形式之一也難逃其咎。
可見，用戶對小紅點(diǎn)實在是喜歡不起來。但是，讓用戶如此厭煩的小紅點(diǎn)真的就一無是處嗎？如果沒有小紅點(diǎn)，用戶將無法第一時間知道男神女神給自己回了微信，無法最快得知自己關(guān)注的淘寶店鋪剛剛上架了新品，也會錯過的優(yōu)惠活動和剛剛上線的有趣功能。
小紅點(diǎn)之所以變成煩人的“小妖精”，究其原因，其實是產(chǎn)品側(cè)和用戶側(cè)的目標(biāo)不一致造成的。產(chǎn)品側(cè)想要向用戶推廣新功能新業(yè)務(wù)，但這些不一定是用戶需要的，甚至?xí)驍_到用戶。所以，如何權(quán)衡好小紅點(diǎn)的業(yè)務(wù)目標(biāo)和用戶體驗，是一項可以認(rè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è)計指南中，Apple公司對涉及小紅點(diǎn)的推送通知規(guī)范也有明確的闡述：
無論設(shè)備被鎖屏還是在使用中，app都能隨時利用通知來提供及時和重要的信息。每個通知都包含應(yīng)用名稱、一個app圖標(biāo)以及一條消息。通知的到來也可能伴隨聲音提示，以及app圖標(biāo)右上角小紅點(diǎn)角標(biāo)的出現(xiàn)和更新。
Android隨后跟進(jìn)模仿了這一設(shè)計樣式，小紅點(diǎn)成為了通用設(shè)計的規(guī)范。如今，小紅點(diǎn)的身影在各個App中幾乎無處不在，在移動互聯(lián)網(wǎng)的時代，它與我們的日常生活正變得密不可分起來。
隨著眾多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)難。為了保證用戶體驗的一致性，手機(jī)QQ的QUI規(guī)范就對小紅點(diǎn)的類型進(jìn)行了歸類整理，這里再簡單梳理其主要對應(yīng)的使用場景。
最基本也是最常用的紅點(diǎn)類型，是小紅點(diǎn)的最初形態(tài)，一般被投放在業(yè)務(wù)入口處，用于內(nèi)容、功能或動態(tài)更新的提醒。
由基礎(chǔ)的小紅點(diǎn)樣式演化而來，可以展示未讀消息的數(shù)量，一般用于比如QQ，微信，QQ空間，朋友圈等社交場景，在有新的好友信息，新的點(diǎn)贊或評論時顯示。
文字內(nèi)容主要有“免費(fèi)”“熱門”“新”“new”等，主要用于上新、免費(fèi)、限時搶購等運(yùn)營活動，直觀的文字內(nèi)容如“免費(fèi)”一般能強(qiáng)烈的吸引用戶的點(diǎn)擊欲望。
App功能和場景不斷拓展，使得小紅點(diǎn)形式也隨之發(fā)生了新的變化，擁有了更多的形態(tài)，雖然與基礎(chǔ)樣式的小紅點(diǎn)已經(jīng)有很大差別，但是其仍然承擔(dān)了小紅點(diǎn)的功能，從一定意義上來說，它仍然是小紅點(diǎn)。結(jié)合圖標(biāo)或內(nèi)容縮略圖的異形紅點(diǎn)讓用戶對內(nèi)容有了提前預(yù)知，主要用于強(qiáng)力推送的運(yùn)營活動場景。
（以上圖片來源于QUI規(guī)范文檔 )
以上的幾種小紅點(diǎn)類型，基本涵蓋了目前市面上所有App的基礎(chǔ)小紅點(diǎn)形式。還有各類App根據(jù)自己的業(yè)務(wù)需求設(shè)計了更多個性化的小紅點(diǎn)形式，這里就不一一細(xì)數(shù)。當(dāng)然，小紅點(diǎn)不是孤立使用的，一項功能或業(yè)務(wù)的運(yùn)營涉及多個層級多個入口，所以大多數(shù)情況下是多種小紅點(diǎn)形式結(jié)合使用的。
說到小紅點(diǎn)的設(shè)計，有些同學(xué)可能會想，一個紅色的小圓點(diǎn)，有什么好設(shè)計的？當(dāng)然，使用基礎(chǔ)的小紅點(diǎn)樣式，無疑是最省時省力的做法。但是，正如我們看到的，未經(jīng)思考設(shè)計而投放的小紅點(diǎn)，不僅讓用戶產(chǎn)生強(qiáng)烈的厭煩心理，而過多的小紅點(diǎn)也會導(dǎo)致用戶免疫，影響業(yè)務(wù)導(dǎo)流的效果。
那么，如何設(shè)計好小紅點(diǎn)呢。在這里我根據(jù)平時項目的經(jīng)驗以及對一些案例的分析，總結(jié)了小紅點(diǎn)設(shè)計的幾個細(xì)節(jié)：
每當(dāng)一項業(yè)務(wù)有新的動態(tài)消息或上新的內(nèi)容時，都要在業(yè)務(wù)入口處投放小紅點(diǎn)以把用戶引導(dǎo)到最終頁面，但投放的小紅點(diǎn)往往會出現(xiàn)斷層的情況，用戶在一步步輕觸到達(dá)最終的頁面后戛然而止，不清楚產(chǎn)品側(cè)想給他展示什么內(nèi)容。
如下圖App中，在底部的tabbar的首頁tab投放了小紅點(diǎn)，但是在頁面內(nèi)容中卻看不到與小紅點(diǎn)相關(guān)的內(nèi)容。而在消息tab上沒有投放小紅點(diǎn)，卻在消息列表里卻出現(xiàn)了小紅點(diǎn)，這樣提醒引導(dǎo)出現(xiàn)了信息斷層，容易導(dǎo)致用戶產(chǎn)生困惑。
針對這一問題，一種有效的設(shè)計方法是倒推法，即從最終要投放小紅點(diǎn)的末級頁面開始，不斷的向上一層級的頁面倒推，思考每一個層級業(yè)務(wù)入口投放小紅點(diǎn)的合理性，如此一來每個頁面層級的小紅點(diǎn)也能繼承起來，給用戶以清晰的路徑導(dǎo)向。
對于小紅點(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ì)疑。
在投放小紅點(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)入最后層級的頁面，都無法成功將其消除，實在是令人如鯁在喉，不知道有沒有小伙伴也遇到相同的問題。
而手機(jī)QQ早在2014年就上線的小紅點(diǎn)“一鍵下班”功能則是一個非常值得稱道的設(shè)計案例，拖拽消除小紅點(diǎn)的操作便捷又有趣味性，一鍵清除小紅點(diǎn)之后簡直是神清氣爽。
小紅點(diǎn)的樣式從最初始的紅色小圓點(diǎn)形式，已經(jīng)慢慢進(jìn)化到現(xiàn)在樣式豐富的異形紅點(diǎn)，但紅色小圓點(diǎn)這一元素仍得以保留。千篇一律的樣式總是讓人感到厭倦，如果能結(jié)合自身產(chǎn)品的特征及形象設(shè)計新的小紅點(diǎn)樣式，不僅能給用戶帶來新鮮感，更能加強(qiáng)產(chǎn)品的品牌形象。
如厘米秀就使用了小膠囊的樣式，作為獲得新套裝的提醒引導(dǎo)，不僅貼合了自身品牌的形象，也與頁面其他的常規(guī)小紅點(diǎn)樣式區(qū)分開來，更加生動有趣。
如今手機(jī)的屏幕很大，用戶閱讀的視線路徑很長，用戶被上一層級入口的小紅點(diǎn)引導(dǎo)到當(dāng)前頁面后，往往需要花費(fèi)一點(diǎn)時間來尋找當(dāng)前頁面的小紅點(diǎn)，而結(jié)合微動效的小紅點(diǎn)則可以有效的解決這一問題。
因為人類天生就會關(guān)注正在運(yùn)動的事物，讓小紅點(diǎn)動起來無疑是吸引用戶注意的好方法，結(jié)合微動效的小紅點(diǎn)更具情感和趣味性，容易能給用戶帶來愉悅的體驗。
以上圖片來源于dribbble )
投放太多小紅點(diǎn)容易產(chǎn)生兩種極端情況，一個是造成用戶產(chǎn)生厭煩心理而卸載App，另一個是用戶對小紅點(diǎn)完全產(chǎn)生免疫，尤其是在游戲App中，試問你現(xiàn)在玩王者榮耀的時候，面對滿屏的小紅點(diǎn)，還要每次都全部消除完畢之后才會開黑嗎。
想要克制的投放小紅點(diǎn)，首先要有一套清晰的運(yùn)營策略，一個平臺級的產(chǎn)品涉及的業(yè)務(wù)入口十分繁多，如果沒有清晰的運(yùn)營策略，不同業(yè)務(wù)各自為政濫投小紅點(diǎn)，那將對產(chǎn)品的用戶體驗造成災(zāi)難性的打擊。關(guān)于小紅點(diǎn)的運(yùn)營策略，這里有幾點(diǎn)建議：
舉個例子，一個產(chǎn)品有5個主業(yè)務(wù)，主業(yè)務(wù)下又有不同的細(xì)分業(yè)務(wù)。該產(chǎn)品限定每月投放紅點(diǎn)的數(shù)量為4000w，各個主業(yè)務(wù)每月平均分配到的紅點(diǎn)配額就有800w，各個主業(yè)務(wù)根據(jù)細(xì)分業(yè)務(wù)的需求，又可以繼續(xù)分配每月紅點(diǎn)配額。如此限定投放每月小紅點(diǎn)的數(shù)量，一線的執(zhí)行者在投放小紅點(diǎn)的時候也會更加珍惜每月的配額，從一定程度上限制了小紅點(diǎn)的泛濫投放。
一個細(xì)分的業(yè)務(wù)，每月給同一用戶投放的小紅點(diǎn)不應(yīng)超過8個（根據(jù)具體業(yè)務(wù)情況而定），同一個功能入口，在一個月內(nèi)不應(yīng)該給同一用戶重復(fù)投放2次小紅點(diǎn)。
每次投放小紅點(diǎn)，應(yīng)該不是面向所有的用戶進(jìn)行全量投放。可以結(jié)合大數(shù)據(jù)分析技術(shù)，根據(jù)后臺的流動模型判斷用戶的當(dāng)前屬性，并以此為依據(jù)決定是否要向該用戶投放小紅點(diǎn)。舉個例子，一個用戶在上個月1號的時候，充值了一筆話費(fèi)，根據(jù)流動模型的分析，該用戶以往充話費(fèi)的頻次大概為每月一次，如果到本月初，話費(fèi)業(yè)務(wù)正好上線了一個優(yōu)惠活動，那么，面向該用戶可以在話費(fèi)業(yè)務(wù)的入口投放優(yōu)惠活動的紅點(diǎn)，如此一來，用戶因為關(guān)注到小紅點(diǎn)而獲得了優(yōu)惠，業(yè)務(wù)本身也提升了轉(zhuǎn)化率，而小紅點(diǎn)也給用戶帶來了真正的價值。
除此之外，在投放小紅點(diǎn)之前，可以先思考在某一入口投放小紅點(diǎn)的目的，是不是有其他更好的方式能代替小紅點(diǎn)，即符合業(yè)務(wù)場景又能起到為業(yè)務(wù)導(dǎo)流的作用。
來看看幾個在同一業(yè)務(wù)入口下使用小紅點(diǎn)與非紅點(diǎn)案例的對比，第一個是QQ錢包的賬戶余額入口，非紅點(diǎn)方案采用了數(shù)字滾動的效果，比起小紅點(diǎn)方案，不僅更能吸引用戶的注意力，也能清晰的表達(dá)錢包余額減少的概念，設(shè)計可謂十分精巧。
第二個是淘寶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è)計，最終的方案往往能給予用戶超出意料之外的精致體驗。
一款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ù)檢驗設(shè)計效果的得力工具，通過在各個業(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ù)不斷的迭代優(yōu)化設(shè)計方案。
以上說了這么多，主要目的是希望廣大的互聯(lián)網(wǎng)從業(yè)者們在設(shè)計過程中能對小紅點(diǎn)的保持一定的關(guān)注。不要在設(shè)計的最后環(huán)節(jié)才想起它，然后隨意投放應(yīng)付了事，最終不僅打擾到用戶，產(chǎn)品自身的口碑也受到影響。
當(dāng)然，每款A(yù)pp的各個業(yè)務(wù)入口和功能場景不盡相同，設(shè)計面臨的情況十分復(fù)雜，也不要為了追求所謂的創(chuàng)新而使用各種“炫酷”樣式的小紅點(diǎn)，應(yīng)當(dāng)回歸到用戶的價值，思考投放小紅點(diǎn)的必要性，以及小紅點(diǎn)形式與產(chǎn)品視覺風(fēng)格的一致性，如此一來，原本煩人的“小妖精”才會真正的被用戶所接受。
藍(lán)藍(lán)設(shè)計( m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.miumiuwan.com