2021-8-15 資深UI設(shè)計(jì)者
消息通知可以及時(shí)地將狀態(tài)、內(nèi)容的更新觸達(dá)到用戶,用戶則可以根據(jù)收到的消息做后續(xù)判斷。但是如果沒有及時(shí)將重要消息觸達(dá)到用戶或者濫用消息,則失去了消息通知的初衷。特別是針對(duì)涉及復(fù)雜任務(wù)流程的產(chǎn)品,消息類型繁雜,難以全面盤點(diǎn)消息類型,消息系統(tǒng)的設(shè)計(jì)就顯得尤為重要。
希望通過這篇文章讓各位在設(shè)計(jì)消息通知系統(tǒng)的時(shí)候能夠更加全面高效。
消息通知需要為產(chǎn)品服務(wù),幫助用戶快速獲取對(duì)應(yīng)的通知信息。收到一條新回復(fù)的提示、工作臺(tái)展示工作進(jìn)度、朋友的來(lái)電,生活中處處是信息的交換。在 App 和網(wǎng)頁(yè)應(yīng)用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式,抽象其過程,即為“在達(dá)到某一觸發(fā)條件下,由發(fā)送方發(fā)送消息給到接收方,接收方可針對(duì)此條消息提供反饋”。需要包含以下關(guān)鍵因素:
消息觸發(fā)時(shí)間與條件(何時(shí)什么事):如按周期重復(fù)的時(shí)間點(diǎn),或系統(tǒng)狀態(tài)變更、用戶操作結(jié)果等;
消息發(fā)送方(誰(shuí)發(fā)現(xiàn)的事):可能是系統(tǒng)、第三方服務(wù)商,或者某個(gè)用戶;
消息接收方(誰(shuí)需要知道):即接收方,可能是系統(tǒng)中的全部用戶,也可能會(huì)根據(jù)權(quán)限劃分推送到某個(gè)用戶群組,或者是某個(gè)特定用戶;
消息觸達(dá)渠道(怎么找到他):短信、電話、App 內(nèi)通知等;
消息通知內(nèi)容(告訴他什么):短信的文本、電話對(duì)話內(nèi)容、通知消息的文案等消息通知;
消息操作反饋(他可以干嘛):主要分為只讀與操作反饋。只讀,即當(dāng)前消息用戶在瀏覽后不需要做更多的操作,主要以了解為主;操作反饋,即當(dāng)前消息需要用戶瀏覽,且在瀏覽后做相應(yīng)的后續(xù)操作。
好的消息系統(tǒng)要滿足什么條件:
全面:通知的消息項(xiàng)要完整全面,用戶才能放心地通過消息通知系統(tǒng)了解消息更新內(nèi)容;
及時(shí):消息的觸達(dá)方式要及時(shí)有效,在消息相關(guān)事件發(fā)生后,用戶能在第一時(shí)間獲取到信息并提供操作反饋給到消息發(fā)送方;
高效:能通過合理的消息發(fā)送途徑,允許用戶設(shè)置及合并相似信息等方式避免過多消息侵?jǐn)_用戶,讓用戶能夠高效處理消息通知。
設(shè)計(jì)全面、及時(shí)、有效的消息通知系統(tǒng)需要對(duì)消息的六個(gè)關(guān)鍵因素進(jìn)行全面盤點(diǎn),通過分步的方式逐步完成消息通知系統(tǒng)的設(shè)計(jì)。主要分為以下三步:
① 盤點(diǎn)系統(tǒng)中包含的消息項(xiàng):包含其觸發(fā)條件、通知來(lái)源及通知對(duì)象。需要盤點(diǎn)完整消息項(xiàng)從而保證消息系統(tǒng)的完整性;
② 確定消息觸達(dá)渠道:包含各消息項(xiàng)的觸達(dá)渠道。讓所有消息都能觸達(dá)到用戶的同時(shí),能夠讓重要信息更易觸達(dá),保證消息通知的及時(shí)性;
③ 撰寫通知內(nèi)容與操作反饋:包含各消息項(xiàng)的通知內(nèi)容與操作反饋。讓消息內(nèi)容能夠有效地傳達(dá)給用戶,讓用戶能快速反饋、操作。
盤點(diǎn)的過程,即對(duì)消息通知清單的梳理。與產(chǎn)品、研發(fā)等團(tuán)隊(duì)成員的溝通也將使用該清單。最終目標(biāo)即完成下方表格的填寫:
當(dāng)前步驟需要對(duì)系統(tǒng)中可能會(huì)有的消息項(xiàng)進(jìn)行完整的盤點(diǎn)。盤點(diǎn)消息項(xiàng)可以通過按消息類型走查方式完成。市場(chǎng)上比較有共識(shí)的消息的分類方式主要分為禁止、警告、成功三類。但是在實(shí)際設(shè)計(jì)工作中還需要配合以下的消息分類方式去更完整地盤點(diǎn)消息項(xiàng):
盤點(diǎn)出的每個(gè)消息項(xiàng)
都需要補(bǔ)充以下四個(gè)關(guān)鍵因素:
觸發(fā)條件:結(jié)合產(chǎn)品核心場(chǎng)景梳理完整。可通過狀態(tài)圖或泳道圖查缺補(bǔ)漏(詳見下段內(nèi)容);
通知來(lái)源:可能是某個(gè)內(nèi)部系統(tǒng),可能是某個(gè)用戶組,也可能是某個(gè)具體用戶。用戶組的劃分需要提前與產(chǎn)品、研發(fā)同事溝通完成;
通知對(duì)象:可能是全部用戶,也可能是某個(gè)用戶組或具體用戶。由觸發(fā)條件中的場(chǎng)景決定;
重要性:需要與團(tuán)隊(duì)溝通得出,可使用“高”、“中”、“低”的分類方式。
盤點(diǎn)完成的消息項(xiàng)使用下表進(jìn)行整理,方便產(chǎn)品、設(shè)計(jì)、研發(fā)之間的溝通。
用流程圖或泳道圖查缺補(bǔ)漏:
對(duì)于 ToB 或 ToG 類含有復(fù)雜狀態(tài)轉(zhuǎn)換以及任務(wù)流的產(chǎn)品,除了使用分類的方式盤點(diǎn)消息項(xiàng),還需要對(duì)照流程圖或泳道圖查缺補(bǔ)漏,避免消息類型的遺漏。
如,顧客線上購(gòu)買商品并收取商品的商品相關(guān)狀態(tài)變化如下圖所示,每個(gè)狀態(tài)都可對(duì)應(yīng)著一條消息項(xiàng):
線上購(gòu)物過程中的消息流程圖示意
當(dāng)系統(tǒng)內(nèi)包含多角色,且角色間流程有交互時(shí),則可以使用泳道圖的方式進(jìn)行梳理。在泳道圖中的每一條狀態(tài)變更線,都對(duì)應(yīng)著一個(gè)狀態(tài)變更提醒。其中角色間交互的線,由于需要角色主動(dòng)處理方可進(jìn)入下一流程狀態(tài),這條消息一般會(huì)成為一條待辦消息。
什么類型的消息不要納入消息通知系統(tǒng):
需要注意的是,雖然通知的完備性很重要,但某些消息在前期梳理時(shí)就需要從清單中剔除,包括:
確定要推送給用戶的消息類型后,需要給各消息匹配適合的通知方式。不同的通知方式會(huì)有不同的適用場(chǎng)景,可對(duì)照下表結(jié)合第一步整理的重要性配置消息的觸達(dá)渠道:
消息觸達(dá)渠道的配置結(jié)果到第一步的表格中:
平衡通知量:
一個(gè)好的消息系統(tǒng)需要能有效觸達(dá)的同時(shí)不過分侵?jǐn)_用戶。這就要求我們對(duì)系統(tǒng)實(shí)際運(yùn)行中可能會(huì)出現(xiàn)的通知量進(jìn)行預(yù)估,并適量調(diào)整通知方式,讓重要的消息能夠更有效及時(shí)地觸達(dá)到用戶。最終調(diào)整后的消息數(shù)量與提醒強(qiáng)度的關(guān)系最好能形成如下圖所示金字塔的模式。
提醒強(qiáng)度與消息數(shù)量的金字塔關(guān)系
合并重復(fù)消息:
對(duì)于出現(xiàn)頻率較高,且用戶不需及時(shí)了解每條消息的消息項(xiàng),可以通過合并消息的方式減少通知的數(shù)量。合并主要有兩種方式:合并流程過往節(jié)點(diǎn)信息和合并同類消息。
兩種合并消息方式
智能推送:有條件的系統(tǒng)可根據(jù)用戶行為分析及用戶畫像,進(jìn)行智能推送。如基于用戶畫像按類型推送運(yùn)營(yíng)類消息,基于用戶接受消息數(shù)量,判斷是否合并消息推送等。
渠道間消息項(xiàng)的延續(xù)與統(tǒng)一:
出于信息持續(xù)性的考慮,觸達(dá)渠道之間有部分關(guān)聯(lián)關(guān)系在制定消息觸達(dá)渠道時(shí)需要注意,如:
通知的內(nèi)容需要滿足簡(jiǎn)明易懂的同時(shí),還要讓用戶能夠快速處理。根據(jù)大量經(jīng)驗(yàn)總結(jié),通知內(nèi)容的撰寫可使用一個(gè)通用撰寫公式:
在應(yīng)用撰寫公式寫內(nèi)容時(shí),需注意以下要點(diǎn):
除了以上通用注意事項(xiàng),由于渠道本身的特征差異,還需注意以下渠道相關(guān)的要點(diǎn):
電話:需要設(shè)定客服話術(shù)標(biāo)準(zhǔn),一般需要在會(huì)話開始前先告知用戶來(lái)電是誰(shuí)、有什么目的。在講述完通知內(nèi)容后,還應(yīng)告知用戶如何處理當(dāng)前信息,如果想了解詳細(xì)內(nèi)容該前往哪個(gè)渠道了解。
短信-來(lái)源平臺(tái):由于通知類短信的發(fā)送號(hào)碼可能會(huì)由于服務(wù)商設(shè)置的問題導(dǎo)致有多個(gè)發(fā)送號(hào)碼發(fā)送給用戶,用戶無(wú)法根據(jù)號(hào)碼判斷發(fā)件人身份。故需要在短信最開始說明平臺(tái)來(lái)源,建立品牌認(rèn)知,避免用戶錯(cuò)認(rèn)為是垃圾短信。如:「騰訊科技」***
短信-操作反饋:由于大部分短信為純文本短信,相關(guān)操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接,鏈接最好能設(shè)置為保留根域名的短鏈,如:點(diǎn)擊了解詳情:cdc.qq.com/d8djei
郵件:與短信相似會(huì)有來(lái)源可信度問題,郵件內(nèi)容需包含品牌元素,同時(shí)發(fā)件的郵箱地址后綴使用產(chǎn)品官方網(wǎng)站。另外需要注意,某些郵件軟件會(huì)設(shè)置不自動(dòng)下載圖片,郵件重要內(nèi)容不要使用圖片。
push 推送(移動(dòng)端):是消息在移動(dòng)端的特有觸達(dá)渠道,由手機(jī)系統(tǒng)發(fā)送。發(fā)送的信息格式會(huì)受系統(tǒng)要求有所限制。最新的推送要求可參考相關(guān)設(shè)計(jì)規(guī)范文檔或接口規(guī)范。應(yīng)用的 icon 與名稱系統(tǒng)會(huì)自動(dòng)補(bǔ)充,撰寫文案時(shí)不用包含。
微信公眾號(hào)(訂閱號(hào)/服務(wù)號(hào)):由于微信對(duì)訂閱號(hào)與服務(wù)號(hào)的消息推送方式會(huì)經(jīng)常變化,需要確認(rèn)最新的要求并撰寫文案。
在完成通知內(nèi)容以及操作反饋的梳理后,對(duì)消息梳理表格進(jìn)行更新,補(bǔ)充相關(guān)信息:
自此,消息項(xiàng)的盤點(diǎn)已經(jīng)完成,后續(xù)可基于該表格與產(chǎn)品、研發(fā)溝通。當(dāng)業(yè)務(wù)出現(xiàn)變更時(shí),也需要對(duì)表格內(nèi)容進(jìn)行同步更新。
消息通知的觸達(dá)渠道中,電話、短信、push 推送的呈現(xiàn)由系統(tǒng)決定。但是若產(chǎn)品有獨(dú)立 App,往往需要消息中心去承載全量的消息列表。本章會(huì)介紹如何設(shè)計(jì)消息中心。
不同應(yīng)用的消息中心處理方式受產(chǎn)品定位、應(yīng)用框架等因素影響,設(shè)計(jì)差異化較大。但是可以通過按路徑分割去簡(jiǎn)化設(shè)計(jì):消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設(shè)置等幾個(gè)部分。
1. 消息中心入口
主要有底部 tab、個(gè)人中心附近的圖標(biāo)入口、個(gè)人中心的菜單項(xiàng)等三種入口形式:
消息中心的三種入口
2. 消息列表
從消息中心入口點(diǎn)擊后跳轉(zhuǎn)到消息列表。由于消息的即時(shí)性,需要按時(shí)間維度排列。但是如果產(chǎn)品的消息類型較多,可通過分組合并或者分 tab 的方式提升用戶觸達(dá)消息的效率。
分組合并消息列表
分 Tab 合并消息列表
對(duì)于通知類型復(fù)雜的系統(tǒng),還可使用二級(jí)列表的形式對(duì)消息進(jìn)一步分類展示,如微信及支付寶,由于其包含大量第三方服務(wù),消息復(fù)雜,均設(shè)置了二級(jí)消息列表幫助用戶分類查找消息。
二級(jí)消息列表
消息列表中的卡片有兩種樣式可選,一般在一級(jí)消息列表使用小卡片樣式,讓用戶有更高的瀏覽效率。大卡片樣式則用于二級(jí)消息列表,或當(dāng)前應(yīng)用的消息數(shù)量較少時(shí)。
消息卡片應(yīng)用示意
4. 消息中心設(shè)置
一般位于消息中心列表頁(yè)右上角,若可設(shè)置項(xiàng)較多,則提供設(shè)置入口在二級(jí)頁(yè)設(shè)置。一些常用的消息設(shè)置項(xiàng)如下:
全部已讀:對(duì)于消息數(shù)量較多,且未讀態(tài)會(huì)影響 badge 的展示時(shí)需要提供該設(shè)置項(xiàng)。點(diǎn)擊后設(shè)置列表消息項(xiàng)全部已讀。
發(fā)起對(duì)話:若系統(tǒng)包含通訊功能,一般會(huì)在消息類表頁(yè)提供發(fā)起對(duì)話的快捷入口。點(diǎn)擊后跳轉(zhuǎn)到通訊錄或好友列表。
設(shè)置通知提示方式:提供按消息類型設(shè)置某些通知項(xiàng)的接受渠道、接收時(shí)間段、各渠道之間的已讀聯(lián)動(dòng)等,如微博;或者讓用戶選擇消息通知的精確度,是否包含具體信息,如微信可接收“您收到了一條信息”的模糊消息。
打開消息推送權(quán)限:一些應(yīng)用有一些狀態(tài)更新或重要的提醒需要用戶在系統(tǒng)設(shè)置中打開當(dāng)前應(yīng)用的通知權(quán)限,會(huì)包含提示用戶打開通知的功能。這些提示需要在用戶進(jìn)行了如“辦理事項(xiàng)”、“上傳狀態(tài)”等發(fā)起流程的操作后提示。不建議在用戶啟動(dòng) App 時(shí)就彈窗提示打開通知。
本文是對(duì)消息通知系統(tǒng)設(shè)計(jì)的初步介紹,希望能幫助到新手產(chǎn)品、交互、產(chǎn)品體驗(yàn)設(shè)計(jì)師快速了解消息通知系統(tǒng)的內(nèi)容盤點(diǎn)與消息中心的設(shè)計(jì)方法,制定及時(shí)、高效、完整的消息通知系統(tǒng)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
文章來(lái)源:優(yōu)設(shè) 作者:騰訊設(shè)計(jì)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com