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