你是否遇到這種場(chǎng)景，打開(kāi)一個(gè)APP想趕緊用呢，結(jié)果滿屏“小紅點(diǎn)”提醒，強(qiáng)迫癥的你必須咬咬牙把它們先消掉，才能舒心的正常使用。

這種事兒發(fā)生在微信還能接受，畢竟你媽聯(lián)系你，喜歡的人聯(lián)系你，領(lǐng)導(dǎo)聯(lián)系你，“紅色”的強(qiáng)提醒還是很有必要的，不然你可能錯(cuò)過(guò)重要的事情。

但對(duì)于非IM產(chǎn)品，比如內(nèi)容消費(fèi)類產(chǎn)品，大多“小紅點(diǎn)”的出現(xiàn)對(duì)用戶并沒(méi)有那么重要和緊急，更多的是把產(chǎn)品意愿強(qiáng)加給用戶（產(chǎn)品導(dǎo)流、提活）。

這種“小紅點(diǎn)”對(duì)用戶來(lái)說(shuō)，只是為了消除而點(diǎn)擊，或者麻木了連消都不想消；對(duì)平臺(tái)來(lái)說(shuō)“為了消除而點(diǎn)擊的行為”也帶不來(lái)真正的產(chǎn)品價(jià)值。

那內(nèi)容類產(chǎn)品的“小紅點(diǎn)”應(yīng)該怎么設(shè)計(jì)呢？有什么差異化的處理手法嗎？今天跟大家分享下大牙最近的思考。

 “小紅點(diǎn)”認(rèn)知思考 

說(shuō)實(shí)話我最近理“小紅點(diǎn)”理的，對(duì)它都起了敬畏之心。

“小紅點(diǎn)”表面上是一個(gè)視覺(jué)設(shè)計(jì)問(wèn)題，但背后其實(shí)是一個(gè)產(chǎn)品策略和如何調(diào)度用戶注意力的問(wèn)題。而用戶的注意力如何被調(diào)度和分配，更是一個(gè)產(chǎn)品長(zhǎng)期戰(zhàn)略問(wèn)題。

用戶對(duì)不同產(chǎn)品消息提醒，接受度和投入的注意力是不同的：

比如，用戶對(duì)于微信（IM產(chǎn)品）消息的 時(shí)效性要高于快手/抖音/微博（內(nèi)容型產(chǎn)品）；

這意味著：我媽在微信上給我發(fā)消息，我希望微信及時(shí)推送過(guò)來(lái)，不然她看我一直不回會(huì)以為我出啥事了；

而快手/抖音/微博的消息在時(shí)間上我可能沒(méi)那么強(qiáng)的訴求，有可能白天給我推，我太忙點(diǎn)了也沒(méi)時(shí)間看，反而晚上躺到床上你給我推我就看了。

用戶對(duì)于微信（IM產(chǎn)品） 關(guān)系親密度和穩(wěn)定性高于快手/抖音/微博（內(nèi)容型產(chǎn)品）。

這意味著：微信里都是熟人朋友，就算他們給我發(fā)很多消息，微信提醒我，我也覺(jué)得還好，畢竟是我朋友嘛；

但如果快手/抖音/微博里的一名路人甲給我發(fā)很多消息，我可能會(huì)覺(jué)得一直推送好煩啊，忍耐度會(huì)更低。

所以，適合別人的消息提醒的邏輯和設(shè)計(jì)，不一定適合自己。

而且，小紅點(diǎn)的設(shè)計(jì)，最終需要回歸“用戶價(jià)值”。目前大部分產(chǎn)品對(duì)于“小紅點(diǎn)”所追求的是：高打開(kāi)率。

這個(gè)訴求在短期內(nèi)可以用產(chǎn)品或設(shè)計(jì)手段來(lái)滿足，無(wú)非就是“紅點(diǎn)”出現(xiàn)的更多、更大、更閃亮。

但長(zhǎng)期是需要靠 “紅點(diǎn)通知的價(jià)值”是否與“對(duì)用戶的價(jià)值”相匹配，通俗的說(shuō)，再醒目的設(shè)計(jì)，如果內(nèi)容對(duì)于用戶沒(méi)有價(jià)值，那么最終也只是一個(gè)“狼來(lái)了”的案例。

其實(shí)用戶不是怕打擾，用戶只是關(guān)心它跟“我”有什么關(guān)系。

因此，在做“內(nèi)容類產(chǎn)品小紅點(diǎn)”提示時(shí)最需要思考的是：如何產(chǎn)出符合內(nèi)容型產(chǎn)品特點(diǎn)，以用戶價(jià)值為中心的通知提醒設(shè)計(jì)方案。

 怎么做？

解答這個(gè)問(wèn)題的核心切入點(diǎn)有兩個(gè)：1.視覺(jué)樣式（長(zhǎng)啥樣），2.展示策略（啥時(shí)候出現(xiàn)）。

因?yàn)樽x我文章的更多是設(shè)計(jì)師，所以這篇重點(diǎn)聊一下“視覺(jué)樣式”。構(gòu)成消息提醒視覺(jué)樣式的核心元素有兩個(gè)：a.色彩；b.形狀。

 a.色彩

看了下市面大部分產(chǎn)品對(duì)“小紅點(diǎn)”的色彩解法，得出以下結(jié)論：

1）大多數(shù)互聯(lián)網(wǎng)產(chǎn)品的提示色采用的是“紅色”；

猜測(cè)原因：大家本能的認(rèn)為用“紅色”總不會(huì)出錯(cuò)。

追溯了下“小紅點(diǎn)”的由來(lái)：它最早來(lái)自于黑莓手機(jī)系統(tǒng)。

在諾基亞一統(tǒng)天下的時(shí)代，新消息的提醒是圖標(biāo)+數(shù)字的形式。黑莓在2009年推出的9700系列，搭載的黑莓系統(tǒng)開(kāi)始使用了帶星號(hào)的小紅點(diǎn)形式。

Apple公司在2013年注冊(cè)了相關(guān)專利，并在iOS系統(tǒng)上開(kāi)始正式使用。

目前小紅點(diǎn)已經(jīng)變成了一個(gè)通用的提醒機(jī)制，且出現(xiàn)被濫用的趨勢(shì)。

2）“品牌主色”與“紅色”接近的產(chǎn)品，大多傾向于采用“品牌主色”作為提示色；

猜測(cè)原因：“紅色”和“橙紅，玫紅，粉紅等相近主色”并存且柔和到一起時(shí)，頁(yè)面會(huì)顯得混亂，所以他們把自己“主色”也作為提示色。

不過(guò)這種處理手法也一般，還是亂。

3）雖然“黃色”也具備一定的警惕和提示性，但僅存在于少數(shù)的黑色界面產(chǎn)品中；

猜測(cè)原因：黃色在白色背景上看不清。

4）部分產(chǎn)品采用“兩種消息提醒色”，進(jìn)行分層處理（1級(jí)頁(yè)面紅色，2級(jí)頁(yè)面其他顏色）。

猜測(cè)原因：1級(jí)頁(yè)面強(qiáng)提醒，2級(jí)頁(yè)面用弱級(jí)色彩，降低消息的打擾度，增加用戶可控感。

看到第4種方式時(shí)，我就很開(kāi)心了，因?yàn)檫@就是我想找到的答案。平常用的時(shí)候沒(méi)有意識(shí)到，在研究“小紅點(diǎn)”的時(shí)候才發(fā)現(xiàn)他們?cè)O(shè)計(jì)的挺用心。

拿QQ郵箱舉例：

左圖，當(dāng)收件箱已經(jīng)有4000多封未讀郵件時(shí)，它并不是出紅點(diǎn)，或者紅點(diǎn)上“...”或“99+”來(lái)警示我。而僅是弱化的藍(lán)底+數(shù)字，告訴我里面有多少封。

如果是紅色，會(huì)有種逼迫我必須讀完才消除，對(duì)于擁有4565條未讀郵件的我，應(yīng)該想死。而且對(duì)用戶來(lái)說(shuō)，并不一定每封郵件是非讀不可的。

類似“每日悅讀”，采用小紅點(diǎn)通知，能夠滿足平臺(tái)的可控權(quán)（合理的下發(fā)策略），進(jìn)行流量的分配。

右圖，二級(jí)頁(yè)采用的也是藍(lán)色點(diǎn)，將閱讀的選擇權(quán)交給用戶，節(jié)省用戶有限的注意力，不過(guò)多打擾。

基于以上分析，我覺(jué)得第四種處理方式同樣適用于內(nèi)容類產(chǎn)品，原因是：

1）像開(kāi)頭所說(shuō)，用戶對(duì)于內(nèi)容型消息的“實(shí)時(shí)性”，“關(guān)系穩(wěn)定性”較弱，因此對(duì)于較強(qiáng)提示帶來(lái)干擾的忍耐度會(huì)更低。而“紅色”給人給人非看不可，不看不消的印象。

基于內(nèi)容型平臺(tái)特點(diǎn)，其實(shí)并不是所有的消息都需要全局“紅色”那么強(qiáng)化。“紅色”可在一級(jí)界面保留，滿足從平臺(tái)角度的可控性即可。

2）“藍(lán)色”是第二種輔助提示色的備選方案，從以下幾個(gè)角度分析：

a.從互聯(lián)網(wǎng)產(chǎn)品角度：藍(lán)色在互聯(lián)網(wǎng)產(chǎn)品中常被用作“更新”；

b.從交通系統(tǒng)色彩心理角度：藍(lán)色有“指示性”作用；

當(dāng)然，這也不是絕對(duì)的，有時(shí)候也得基于自己產(chǎn)品的主色進(jìn)行具體問(wèn)題具體分析。拓寬下大家對(duì)“內(nèi)容類產(chǎn)品”消息提示的色彩思路，不用太局限于滿屏“紅”。

好，說(shuō)完“色彩”接下來(lái)我們來(lái)聊聊“形狀”。

 b.形狀 

“形狀”決定著提醒控件的：色彩占比、承載信息、透穿能力。

目前市面上常見(jiàn)的形狀有幾種：1.小紅點(diǎn)、2.數(shù)字+紅點(diǎn)、3.文字+紅點(diǎn)、4.頭像+紅點(diǎn)。

1.小紅點(diǎn)

這個(gè)就不用多說(shuō)了，一般有“小紅點(diǎn)”的出現(xiàn)就以為著“這里有個(gè)新消息”或“這里有個(gè)新內(nèi)容”，快來(lái)戳我。

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

它是由小紅點(diǎn)演變而來(lái)的，增加“數(shù)字”代表里面具體有多少條未讀，一般用在社交場(chǎng)景或與消息相關(guān)的APP中居多，輔助用戶獲取更多信息，做出判斷。

但也有一些平臺(tái)，為了吸引用戶更多的點(diǎn)擊，或者對(duì)于“數(shù)字+紅點(diǎn)”下發(fā)的策略和規(guī)則不夠完善，濫用這種形式，內(nèi)容的價(jià)值并沒(méi)有與這種形式相匹配，同時(shí)采用過(guò)于警示的紅色，有些干擾用戶。

3.文字+紅點(diǎn)

不可否認(rèn)，有些場(chǎng)景光靠一個(gè)“小紅點(diǎn)”是傳遞不清晰的，采用“文字”的透穿能夠讓用戶點(diǎn)擊之前更多的了解信息，決策是否需要點(diǎn)擊，這種形式還是友好的，但別滿屏都是就行。

4.頭像+紅點(diǎn)

越是跟“人”相關(guān)的產(chǎn)品，越適合采用這種形式，以“人”為抓手促進(jìn)點(diǎn)擊。

常用于QQ，微信，微博，小紅書(shū)，快手，抖音等平臺(tái)，通過(guò)你關(guān)注大V或你朋友頭像外顯，吸引你點(diǎn)擊。

這些形狀，一般跟著產(chǎn)品的訴求進(jìn)行靈活使用，或者并行使用。

那針對(duì)內(nèi)容類平臺(tái)如何選擇形狀呢？

對(duì)于內(nèi)容類產(chǎn)品，一般會(huì)涉及到“內(nèi)容消費(fèi)者”和“內(nèi)容生產(chǎn)者”，作為平臺(tái)方如何采用更合適的提示樣式對(duì)他們賦能，也是需要設(shè)計(jì)時(shí)思考的。

作為內(nèi)容生產(chǎn)者，肯定希望自己發(fā)布內(nèi)容push給更多粉絲，這樣才有更多的流量嘛。

但平臺(tái)也要考慮消費(fèi)者的體驗(yàn)（不被打擾），所以平臺(tái)可以根據(jù)用戶消費(fèi)的歷史行為或數(shù)據(jù)進(jìn)行精準(zhǔn)匹配不同的樣式。

拿短視頻產(chǎn)品舉例，消息提醒可分為：強(qiáng)、中、弱不同提示樣式。

弱提醒：

當(dāng)內(nèi)容生產(chǎn)者剛被關(guān)注時(shí)，只給粉絲下發(fā)普通“小紅點(diǎn)”或“文字+小紅點(diǎn)”消息通知。

中提醒：

當(dāng)通過(guò)粉絲歷史操作/觀看數(shù)據(jù)，發(fā)現(xiàn)TA對(duì)你的內(nèi)容高度感興趣，你更新時(shí)他都愿意看且完播率高時(shí)，那平臺(tái)就可以賦能“中提醒”的樣式給你，外露更多信息帶來(lái)更多流量（轉(zhuǎn)化如果不高可再打回“小紅點(diǎn)”）；

強(qiáng)提醒：

當(dāng)粉絲手動(dòng)訂閱你直播或短視頻時(shí)，說(shuō)明他對(duì)你足夠感興趣，這時(shí)候平臺(tái)可以給你“強(qiáng)通知”樣式的特權(quán)，將內(nèi)容推送給用戶（但要給用戶提供關(guān)閉提醒的入口）。

作為內(nèi)容平臺(tái)，這種做法即保證了消費(fèi)者的體驗(yàn)，也滿足了內(nèi)容生產(chǎn)者的流量分發(fā)的訴求。不過(guò)以上的“形狀”案例只是一個(gè)簡(jiǎn)單的思路，優(yōu)秀的做法還有很多。

意思是這么個(gè)意思。

 總結(jié)

大致的結(jié)論是： 基于“內(nèi)容型產(chǎn)品特點(diǎn)”和“以用戶價(jià)值為中心”角度，可以保留一級(jí)頁(yè)面“紅色”提醒，給平臺(tái)一定的控制權(quán)；選擇次級(jí)界面輔助提示色，降低干擾性，給用戶更多選擇權(quán)（使他們不想消可以不消，也是舒服的）。

基于內(nèi)容平臺(tái)中“內(nèi)容生產(chǎn)者”角度：可增加更多元化提醒樣式，分層處理消息類型，賦能創(chuàng)作者的同時(shí)，也讓用戶不錯(cuò)過(guò)真正關(guān)心的內(nèi)容。

整體來(lái)看，雖然它的名字叫“小紅點(diǎn)”，但我們?cè)谠O(shè)計(jì)的時(shí)候不能只局限于“紅”和“點(diǎn)”。它可以是任意“顏色”，它也可以是任意“形狀”，本質(zhì)是如何更和友好的提醒用戶。

文章來(lái)源：站酷    作者：蘇大牙

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)