內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

21 評論 20261 瀏覽 207 收藏 18 分鐘

編輯導(dǎo)語:說到手機上各類APP的“小紅點”,很多人一定會有不少感想,尤其是強迫癥患者,那是一定要把它點掉的。然而,這類“小紅點”很多時候?qū)τ脩舨]有實質(zhì)性的意義,于是不少人為了點擊而點擊,失去了它的意義。那么,內(nèi)容類產(chǎn)品的“小紅點”應(yīng)該怎么設(shè)計呢?

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

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

這種“小紅點”對用戶來說,只是為了消除而點擊,或者麻木了連消都不想消;對平臺來說“為了消除而點擊的行為”也帶不來真正的產(chǎn)品價值。

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

一、“小紅點”認知思考

說實話我最近理“小紅點”理的,對它都起了敬畏之心。

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

比如,用戶對于微信(IM產(chǎn)品)消息的時效性要高于快手/抖音/微博(內(nèi)容型產(chǎn)品)。這意味著,我媽在微信上給我發(fā)消息,我希望微信及時推送過來,不然她看我一直不回會以為我出啥事了。

而快手/抖音/微博的消息在時間上我可能沒那么強的訴求,有可能白天給我推,我太忙點了也沒時間看,反而晚上躺到床上你給我推我就看了。

用戶對于微信(IM產(chǎn)品)關(guān)系親密度和穩(wěn)定性高于快手/抖音/微博(內(nèi)容型產(chǎn)品),這意味著:微信里都是熟人朋友,就算他們給我發(fā)很多消息,微信提醒我,我也覺得還好,畢竟是我朋友嘛。

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

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

而且,小紅點的設(shè)計,最終需要回歸“用戶價值”。目前大部分產(chǎn)品對于“小紅點”所追求的是:高打開率。

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

但長期是需要靠“紅點通知的價值”是否與“對用戶的價值”相匹配,通俗的說,再醒目的設(shè)計,如果內(nèi)容對于用戶沒有價值,那么最終也只是一個“狼來了”的案例。

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

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

二、怎么做?

解答這個問題的核心切入點有兩個:視覺樣式(長啥樣)、展示策略(啥時候出現(xiàn))。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

因為讀我文章的更多是設(shè)計師,所以這篇重點聊一下“視覺樣式”,構(gòu)成消息提醒視覺樣式的核心元素有兩個:色彩、形狀。

1. 色彩

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

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

猜測原因:大家本能的認為用“紅色”總不會出錯。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

追溯了下“小紅點”的由來:它最早來自于黑莓手機系統(tǒng)。

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

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

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

猜測原因:“紅色”和“橙紅,玫紅,粉紅等相近主色”并存且柔和到一起時,頁面會顯得混亂,所以他們把自己“主色”也作為提示色。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

不過這種處理手法也一般,還是亂。

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

猜測原因:黃色在白色背景上看不清。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

4)部分產(chǎn)品采用“兩種消息提醒色”,進行分層處理(1級頁面紅色,2級頁面其他顏色)

猜測原因:級頁面強提醒、2級頁面用弱級色彩、降低消息的打擾度、增加用戶可控感。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

看到第4種方式時,我就很開心了,因為這就是我想找到的答案。平常用的時候沒有意識到,在研究“小紅點”的時候才發(fā)現(xiàn)他們設(shè)計的挺用心。

拿QQ郵箱舉例:

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

如果是紅色,會有種逼迫我必須讀完才消除,對于擁有4565條未讀郵件的我,應(yīng)該想死。而且對用戶來說,并不一定每封郵件是非讀不可的。類似“每日悅讀”,采用小紅點通知,能夠滿足平臺的可控權(quán)(合理的下發(fā)策略),進行流量的分配。

右圖,二級頁采用的也是藍色點,將閱讀的選擇權(quán)交給用戶,節(jié)省用戶有限的注意力,不過多打擾。

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

1)像開頭所說,用戶對于內(nèi)容型消息的“實時性”,“關(guān)系穩(wěn)定性”較弱,因此對于較強提示帶來干擾的忍耐度會更低

而“紅色”給人給人非看不可,不看不消的印象?;趦?nèi)容型平臺特點,其實并不是所有的消息都需要全局“紅色”那么強化。“紅色”可在一級界面保留,滿足從平臺角度的可控性即可。

2)“藍色”是第二種輔助提示色的備選方案,從以下幾個角度分析:

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

從交通系統(tǒng)色彩心理角度:藍色有“指示性”作用;

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

好,說完“色彩”接下來我們來聊聊“形狀”。

2. 形狀

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

目前市面上常見的形狀有幾種:小紅點、數(shù)字+紅點、文字+紅點、頭像+紅點。

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

1)小紅點

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

2)數(shù)字+紅點

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

3)文字+紅點

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

4)頭像+紅點

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

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

這些形狀,一般跟著產(chǎn)品的訴求進行靈活使用,或者并行使用,那針對內(nèi)容類平臺如何選擇形狀呢?

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

作為內(nèi)容生產(chǎn)者,肯定希望自己發(fā)布內(nèi)容push給更多粉絲,這樣才有更多的流量嘛。但平臺也要考慮消費者的體驗(不被打擾),所以平臺可以根據(jù)用戶消費的歷史行為或數(shù)據(jù)進行精準匹配不同的樣式。

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

弱提醒:

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

中提醒:

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

強提醒:

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

內(nèi)容類產(chǎn)品“小紅點”設(shè)計研究

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

三、總結(jié)

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

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

整體來看,雖然它的名字叫“小紅點”,但我們在設(shè)計的時候不能只局限于“紅”和“點”。它可以是任意“顏色”,它也可以是任意“形狀”,本質(zhì)是如何更高效和友好的提醒用戶。

以上“小紅點”的相關(guān)思考,同時感謝我的好朋友FC,跟我對這個話題進行激烈的討論和信息的輸入,也希望這些思考對你們有所幫助。

#專欄作家#

大牙,微信公眾號:大牙的設(shè)計筆記,人人都是產(chǎn)品經(jīng)理專欄作家。一個對生活充滿好奇心,擅長用直白的語言去分析產(chǎn)品、交互、視覺的同學(xué)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝大佬,受益匪淺!!

    來自海南 回復(fù)
  2. 感謝分享~

    回復(fù)
  3. 設(shè)計紅點是為了以突出的方式提醒用戶查看新消息,屬于強提醒。紅點設(shè)計成多種樣式將信息分層,不同程度的突出效果顯示不同重要程度的信息;重要的信息應(yīng)該以突出的紅點設(shè)計,能夠吸引用戶查看消息幾率;而次重要信息,應(yīng)該用相對不明顯的紅點設(shè)計來提示用戶查看消息。
    紅點設(shè)計呈現(xiàn)泛濫之勢的根本原因在于信息傳遞需求增加。當一個產(chǎn)品處于成熟階段時,比如支付寶其信息傳遞量以超越了用戶的信息處理能力,出現(xiàn)“信息過載”現(xiàn)象,每次打開支付寶總是有數(shù)不清的小紅點,怎么查看都消除不徹底,索性就都不點隨他去了,任由他一直紅著。
    而這種放任這些紅點一直紅著的結(jié)果,違背了設(shè)計紅點的初衷——以突出的方式提示用戶查看新消息。

    回復(fù)
    1. 這已經(jīng)不僅僅是設(shè)計師能解決的問題了,需要產(chǎn)品經(jīng)理在產(chǎn)品設(shè)計之初,通過產(chǎn)品功能結(jié)構(gòu)對信息重要程度進行分層,重要信息、次重要信息用不同樣式的紅點進行顯示。對于用戶可看可不可的信息以單獨頁面顯示且做弱提醒。減少紅點數(shù)量,才能體現(xiàn)紅點的本來作用!

      回復(fù)
  4. 這個就不用多說了,一般有“小紅點”的出現(xiàn)就以為著“這里有個新消息”或“這里有個新內(nèi)容”,快來戳我

    友情提示:意味 寫錯啦

    來自廣東 回復(fù)
  5. @淘寶 @阿里巴巴 快來看看,然后優(yōu)化一下你們的消息功能吧!

    回復(fù)
    1. 阿里系的產(chǎn)品太煩人了

      來自上海 回復(fù)
    2. 真實,淘寶支付寶都太多消息紅點了,還不能一次性消除

      回復(fù)
  6. 最近剛好有這方面的疑惑,感謝分享?? !?。?/p>

    來自廣東 回復(fù)
  7. 用戶不是怕打擾,用戶只是關(guān)心它跟“我”有什么關(guān)系。說的對極了,一句點醒~

    來自江蘇 回復(fù)
  8. 這個改設(shè)計師考慮還是設(shè)計師考慮的。我們的設(shè)計師絕對不對考慮這些的。。╮(╯▽╰)╭

    來自廣東 回復(fù)
  9. 白嫖成功

    來自北京 回復(fù)
    1. good

      來自廣東 回復(fù)
  10. 這個名字好熟悉 貌似站酷也關(guān)注了你

    來自江蘇 回復(fù)
  11. 感謝分享

    來自河南 回復(fù)
  12. 感謝作者對小紅點這樣透徹的解讀,受益良多

    來自上海 回復(fù)
    1. 感謝作者對小紅點這樣透徹的解讀,受益良多

      來自上海 回復(fù)
    2. 感謝作者對小紅點這樣透徹的解讀,受益良多

      來自上海 回復(fù)
    3. 同感

      來自廣東 回復(fù)
  13. 感謝作者對小紅點這樣透徹的解讀,受益良多

    來自重慶 回復(fù)
  14. 感謝分享!

    來自山東 回復(fù)