UI設(shè)計如何消滅小紅點

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

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

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

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

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

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

　　說實話，我最近搞到了“小紅點”理論，我對它很敬畏。
 

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

　　用戶對不同產(chǎn)品信息的關(guān)注度、接受度和關(guā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è)計方案。
 

　　怎么做?
 

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

　　因為讀我文章的更多是設(shè)計師，所以這篇重點聊一下“視覺樣式”。
 

　　構(gòu)成消息提醒視覺樣式的核心元素有兩個：a.色彩;b.形狀。
 

　　A.色彩
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　看到第4種方式時，我就很開心了，因為這就是我想找到的答案。
 

　　平常用的時候沒有意識到，在研究“小紅點”的時候才發(fā)現(xiàn)他們設(shè)計的挺用心。
 

　　拿QQ郵箱舉例：
 

　　當(dāng)收件箱已經(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)“藍色”是第二種輔助提示色的備選方案，從以下幾個角度分析：a.從互聯(lián)網(wǎng)產(chǎn)品角度：藍色在互聯(lián)網(wǎng)產(chǎn)品中常被用作“更新”;
 

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

　　當(dāng)然，這也不是絕對的，有時候也得基于自己產(chǎn)品的主色進行具體問題具體分析。
 

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

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

　　B.形狀
 

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

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

　　1.小紅點
 

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

　　2.數(shù)字+紅點
 

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

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

　　3.文字+紅點
 

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

　　4.頭像+紅點
 

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

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

　　這些形狀，一般跟著產(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ù)進行精準(zhǔn)匹配不同的樣式。拿短視頻產(chǎn)品舉例，消息提醒可分為：強、中、弱不同提示樣式。
 

　　弱提醒：
 

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

　　中提醒：
 

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

　　強提醒：
 

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

　　作為內(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)思考，也希望這些思考對你們有所幫助。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請持續(xù)關(guān)注AAA教育。