旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)如何消滅小紅點(diǎn)

UI設(shè)計(jì)如何消滅小紅點(diǎn)

時(shí)間:2020-11-20來源:m.5wd995.cn點(diǎn)擊量:作者:Arya
時(shí)間:2020-11-20點(diǎn)擊量:作者:Arya

  當(dāng)你想使用這個(gè)應(yīng)用程序時(shí),你可以看到整個(gè)屏幕上都是“小紅點(diǎn)”的提醒。對(duì)于強(qiáng)迫癥患者,你必須點(diǎn)擊他們,看看他們必須繼續(xù)使用什么,本文AAA教育的武老師,對(duì)UI設(shè)計(jì)如何消滅小紅點(diǎn)這個(gè)有趣的問題進(jìn)行分享。
 

UI設(shè)計(jì)如何消滅小紅點(diǎn)
 

  這種事情在微信上是可以接受的。畢竟,有必要讓你的母親聯(lián)系你,你喜歡聯(lián)系你的人,和領(lǐng)導(dǎo)聯(lián)系你。有必要用強(qiáng)烈的紅色提醒,否則你可能會(huì)錯(cuò)過重要的事情。這是UI設(shè)計(jì)的色彩心理學(xué)。
 

UI設(shè)計(jì)如何消滅小紅點(diǎn)
 

  不過,對(duì)于內(nèi)容消費(fèi)類產(chǎn)品等非IM產(chǎn)品而言,“小紅點(diǎn)”的出現(xiàn)對(duì)用戶來說并不那么重要和迫切,更重要的是將產(chǎn)品愿望強(qiáng)加給用戶(產(chǎn)品分流和推廣)。
 

  對(duì)于用戶來說,這種“小紅點(diǎn)”只是為了淘汰,或者麻木,甚至不想取消;對(duì)于平臺(tái)來說,“點(diǎn)擊淘汰”并不能帶來真正的產(chǎn)品價(jià)值。
 

  內(nèi)容產(chǎn)品的“小紅點(diǎn)”應(yīng)該如何設(shè)計(jì)?你們有什么區(qū)別對(duì)待嗎?今天,我想和大家分享一下最近的一些想法。
 

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

  說實(shí)話,我最近搞到了“小紅點(diǎn)”理論,我對(duì)它很敬畏。
 

UI設(shè)計(jì)如何消滅小紅點(diǎn)
 

  表面上看,“小紅點(diǎn)”是一個(gè)視覺設(shè)計(jì)問題,但背后是一個(gè)產(chǎn)品策略和如何安排用戶的注意力。如何安排和分配用戶的注意力是一個(gè)長(zhǎng)期的戰(zhàn)略問題。
 

  用戶對(duì)不同產(chǎn)品信息的關(guān)注度、接受度和關(guān)注度是不同的
 

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

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

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

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

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

  但如果快手/抖音/微博里的一名路人甲給我發(fā)很多消息,我可能會(huì)覺得一直推送好煩啊,忍耐度會(huì)更低。所以,適合別人的消息提醒的邏輯和設(shè)計(jì),不一定適合自己。
 

  而且,小紅點(diǎn)的設(shè)計(jì),最終需要回歸“用戶價(jià)值”。目前大部分產(chǎn)品對(duì)于“小紅點(diǎn)”所追求的是:高打開率。用戶界面如何改進(jìn)。
 

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

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

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

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

  怎么做?
 

UI設(shè)計(jì)如何消滅小紅點(diǎn)
 

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

  因?yàn)樽x我文章的更多是設(shè)計(jì)師,所以這篇重點(diǎn)聊一下“視覺樣式”。
 

  構(gòu)成消息提醒視覺樣式的核心元素有兩個(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)”的由來:它最早來自于黑莓手機(jī)系統(tǒng)。
 

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

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

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

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

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

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

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

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

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

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

  看到第4種方式時(shí),我就很開心了,因?yàn)檫@就是我想找到的答案。
 

  平常用的時(shí)候沒有意識(shí)到,在研究“小紅點(diǎn)”的時(shí)候才發(fā)現(xiàn)他們?cè)O(shè)計(jì)的挺用心。
 

  拿QQ郵箱舉例:
 

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

  如果是紅色,會(huì)有種逼迫我必須讀完才消除,對(duì)于擁有4565條未讀郵件的我,應(yīng)該想死。
 

  而且對(duì)用戶來說,并不一定每封郵件是非讀不可的。
 

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

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

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

  1)像開頭所說,用戶對(duì)于內(nèi)容型消息的“實(shí)時(shí)性”,“關(guān)系穩(wěn)定性”較弱,因此對(duì)于較強(qiáng)提示帶來干擾的忍耐度會(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)行具體問題具體分析。
 

  拓寬下大家對(duì)“內(nèi)容類產(chǎn)品”消息提示的色彩思路,不用太局限于滿屏“紅”。
 

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

  B.形狀
 

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

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

  1.小紅點(diǎn)
 

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

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

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

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

  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,微信,微博,小紅書,快手,抖音等平臺(tái),通過你關(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)”消息通知。
 

  中提醒:
 

UI設(shè)計(jì)如何消滅小紅點(diǎn)

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

  強(qiáng)提醒:
 

  當(dāng)粉絲手動(dòng)訂閱你直播或短視頻時(shí),說明他對(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ā)的訴求。不過以上的“形狀”案例只是一個(gè)簡(jiǎn)單的思路,優(yōu)秀的做法還有很多。意思是這么個(gè)意思。
 

  總結(jié)
 

  大致的結(jié)論是:基于“內(nèi)容型產(chǎn)品特點(diǎn)”和“以用戶價(jià)值為中心”角度,可以保留一級(jí)頁面“紅色”提醒,給平臺(tái)一定的控制權(quán);選擇次級(jí)界面輔助提示色,降低干擾性,給用戶更多選擇權(quán)(使他們不想消可以不消,也是舒服的)?;趦?nèi)容平臺(tái)中“內(nèi)容生產(chǎn)者”角度:可增加更多元化提醒樣式,分層處理消息類型,賦能創(chuàng)作者的同時(shí),也讓用戶不錯(cuò)過真正關(guān)心的內(nèi)容。
 

  整體來看,雖然它的名字叫“小紅點(diǎn)”,但我們?cè)谠O(shè)計(jì)的時(shí)候不能只局限于“紅”和“點(diǎn)”。它可以是任意“顏色”,它也可以是任意“形狀”,本質(zhì)是如何更高效和友好的提醒用戶。以上“小紅點(diǎn)”的相關(guān)思考,也希望這些思考對(duì)你們有所幫助。這篇文章的內(nèi)容你學(xué)到了嗎,更多資訊請(qǐng)持續(xù)關(guān)注AAA教育。

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖