內容類產品“小紅點”設計研究

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

編輯導語:說到手機上各類APP的“小紅點”,很多人一定會有不少感想,尤其是強迫癥患者,那是一定要把它點掉的。然而,這類“小紅點”很多時候對用戶并沒有實質性的意義,于是不少人為了點擊而點擊,失去了它的意義。那么,內容類產品的“小紅點”應該怎么設計呢?

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

內容類產品“小紅點”設計研究

這種事兒發生在微信還能接受,畢竟你媽聯系你,喜歡的人聯系你,領導聯系你,“紅色”的強提醒還是很有必要的,不然你可能錯過重要的事情。

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

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

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

一、“小紅點”認知思考

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

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

內容類產品“小紅點”設計研究

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

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

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

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

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

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

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

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

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

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

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

二、怎么做?

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

內容類產品“小紅點”設計研究

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

1. 色彩

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

1)大多數互聯網產品的提示色采用的是“紅色”

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

內容類產品“小紅點”設計研究

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

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

Apple公司在2013年注冊了相關專利,并在iOS系統上開始正式使用。

內容類產品“小紅點”設計研究

目前小紅點已經變成了一個通用的提醒機制,且出現被濫用的趨勢。

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

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

內容類產品“小紅點”設計研究

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

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

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

內容類產品“小紅點”設計研究

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

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

內容類產品“小紅點”設計研究

內容類產品“小紅點”設計研究

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

拿QQ郵箱舉例:

內容類產品“小紅點”設計研究

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

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

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

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

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

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

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

從互聯網產品角度:藍色在互聯網產品中常被用作“更新”;

內容類產品“小紅點”設計研究

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

內容類產品“小紅點”設計研究

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

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

2. 形狀

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

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

內容類產品“小紅點”設計研究

1)小紅點

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

內容類產品“小紅點”設計研究

2)數字+紅點

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

內容類產品“小紅點”設計研究

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

內容類產品“小紅點”設計研究

3)文字+紅點

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

內容類產品“小紅點”設計研究

4)頭像+紅點

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

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

內容類產品“小紅點”設計研究

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

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

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

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

內容類產品“小紅點”設計研究

弱提醒:

當內容生產者剛被關注時,只給粉絲下發普通“小紅點”或“文字+小紅點”消息通知。

內容類產品“小紅點”設計研究

中提醒:

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

內容類產品“小紅點”設計研究

強提醒:

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

內容類產品“小紅點”設計研究

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

三、總結

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

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

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

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

#專欄作家#

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

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感謝大佬,受益匪淺??!

    來自海南 回復
  2. 感謝分享~

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

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

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

    友情提示:意味 寫錯啦

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

    回復
    1. 阿里系的產品太煩人了

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

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

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

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

    來自廣東 回復
  9. 白嫖成功

    來自北京 回復
    1. good

      來自廣東 回復
  10. 這個名字好熟悉 貌似站酷也關注了你

    來自江蘇 回復
  11. 感謝分享

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

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

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

      來自上海 回復
    3. 同感

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

    來自重慶 回復
  14. 感謝分享!

    來自山東 回復