通知設計綜合指南

數字產品中的外圍消息（統稱為通知）不應損害用戶體驗。 相反，他們必須為幫助人們實現目標的體驗做出貢獻。 在產品設計過程的早期解決通知設計將產生更好的結果。

想像一下，一群建築師設計了一棟三層樓的房子，為藍圖工作了幾個月。 令人印象深刻！ 真漂亮！ 但就在他們接近完成圖表時，其中一個驚呼道：“等等！ 人們如何從一樓到三樓？ “他們忘了樓梯！

同樣，產品設計師傾向於最後考慮小而關鍵的用戶體驗增強。 與空狀態一樣，設計人員傾向於將通知的設計（警報、錯誤消息、確認、公告和確認）留到最後。 當開發人員詢問“我們如何處理錯誤？ ” 因為這是事後才想到的，這種附加方法經常會產生草率的“怪誕設計”，這會損害用戶體驗。

為了避免這種情況，最好使用集成的通知設計方法來增強用戶體驗。 儘管設計人員可能無法觸手可及所有信息，但在產品設計生命週期中設計一個全面的通知​​框架將有助於產品為不可預見的用例做好準備。

在著手進行通知設計時，要牢記的基本設計原則是它們必須幫助（而不是阻礙）人們執行任務。 必須儘早測試產品原型並繪製外圍消息在協助交互方面有價值的用例。 但是，與用戶交流的最佳方式會有所不同，並取決於幾個關鍵因素：

• 傳達的信息類型
• 信息的緊迫性——是否需要立即查看
• 是否需要用戶操作作為信息的結果

除了通知的樣式和行為之外，它們的基調還需要通過 UX 副本來確定。 通知的所有副本必須清晰、簡潔且有用。 精心設計的通知系統在設計時也考慮到了可訪問性，並具有適應不同語言的靈活性。

用於通知的術語往往相似，但會因團隊和項目而略有不同。 設計者有責任確定通知框架的術語——所謂的什麼——以及讓每個人都了解其使用的基本原理：什麼、在哪里以及如何。

通過更好的通知設計更好的可用性

通知在產品可用性方面發揮著重要作用。 “系統狀態的可見性”在 Nielsen Norman Group 的“用戶界面設計的 10 個可用性啟發式”列表中排名第一。 該規則規定“系統應始終通過在合理時間內通過適當的反饋讓用戶了解正在發生的事情。 ”

通知系統是數字產品用戶體驗的重要組成部分，沒有它，產品會感覺好像遺漏了一些東西。 如果沒有“系統狀態的可見性”和反饋，就類似於駕駛沒有儀表板的汽車。

汽車的儀表板充滿了儀表、圖標和燈光，旨在提供對汽車操作系統的可見性，並確保安全可靠的可操作性。 當我們開車時，一組關於發動機溫度、電池健康狀況、油壓、燈光、剎車、安全氣囊等的讀數和通知讓我們隨時了解情況。 當我們想要轉彎時，轉向信號燈會閃爍，伴隨著咔噠聲，兩者都為我們提供反饋。 我們還有一個油箱計量器，可以指示油箱何時低。

它與數字產品的工作方式相同。 在可用性方面，系統狀態和反饋的可見性是基礎，而可用性是出色用戶體驗的基石。

建立一個有用的通知框架

為了設計好通知框架，從“信號強度”的角度考慮通知可能會有所幫助。 哪些外圍信息需要更多或更少的關注？ 例如，可能具有破壞性的交互需要“更響亮”的通知，而非破壞性的交互需要“更安靜”的通知。

向人們發送適量的通知是一種平衡行為，而過度使用則充滿危險； 該產品可能會收到很多負面反饋，或者最壞的情況是，使人們疏遠到他們會放棄它的程度。 因此，設計師需要仔細考慮用戶體驗，並且只發送具有明確目的的消息。 讓用戶靈活地關閉所有或至少部分通知也是一個好主意。

通知設計的初始方法需要在三個級別上進行分類：高、中和低關注度，即“嚴重性級別”。 之後，需要通過這三個級別上的特定屬性進一步定義通知類型，無論它們是警報、警告、確認、錯誤、成功消息還是狀態指示器。

一旦確定了通知屬性，就可以創建構成框架的各種通知的分類。 以下絕不是一個詳盡的列表——通知的類型將根據產品、用例和其他變量而有所不同。 （請注意：如前所述，不同的團隊使用各種術語。例如，我們將“確認”稱為需要用戶批准才能進行破壞性交互的通知。一些團隊可能使用“確認”作為術語成功消息。）

高度關注

• 警報（需要立即註意）
• 錯誤（需要立即採取行動）
• 異常（系統異常，某些東西不起作用）
• 確認（需要用戶確認才能繼續的潛在破壞性操作）

中等關注度

• 警告（無需立即採取行動）
• 致謝（對用戶操作的反饋）
• 成功消息

注意力不集中

• 信息性消息（又名被動通知，可以查看的內容）
• 徽章（通常在圖標上，表示自上次互動以來的新事物）
• 狀態指示燈（系統反饋）

設計出色的通知 UX

要設計具有出色 UX 的產品，設計師需要列出通知可能有用的所有用例。 建議與開發人員合作完成此過程，因為在大多數情況下，他們可以是公正的，並且能夠幫助解決設計人員可能沒有考慮的邊緣情況。

設計師還應該記錄用戶測試期間的所有交互，其中通知可能會為增強用戶體驗提供價值。

一旦掌握了列表，下一步就是根據所需的注意力級別和屬性對通知進行分類。 同樣，因為通知不應該是侵入性的，所以這需要小心。 在此過程中要問的一些問題是：

• 什麼會觸發通知？
• 正在傳達什麼類型的反饋？
• 通知將出現在哪里以及如何出現？
• 哪個通知需要立即交互？
• 通知是持久的還是非持久的？

接下來，需要確定顏色編碼和圖標並將其放入設計系統（或樣式指南）中。 在完成此過程時，設計人員需要考慮通知出現的每個實例，並確保它們在所有背景上正確呈現。

通知的位置也很關鍵。 冒著明顯的風險，為避免遮擋界面，通知應出現在頂部或底部，或靠近 UI 的角落。 更重要的是，如果設計是響應式的，設計者需要用各種視口測試通知的外觀。 在響應式移動表單可能顯示錯誤消息的地方尤為重要。

設計一個通知框架並不容易。 需要考慮在不同場景下發生的許多小細節。 除了可訪問性和易讀性之外，還需要牢記未來的本地化。 在德語或日語平台上使用時，在英語中看起來很完美的通知系統可能會完全崩潰。

在定義通知的行為時要問的更多問題：

• 如果警報或警告是持久的，設計師如何確保人們在離開初始屏幕後仍然可以訪問它們？
• 是否需要在可以看到通知存檔的地方合併帶有徽章的警報圖標？
• 如果通知是非持久性的，它會消失多長時間，是否應該有一個選項可以在它消失之前將其關閉？

對於移動應用，不僅應用內通知，推送通知（系統級，應用外）也需要精心設計。 它們大多是中斷，因此查看通知的副本以及如何以及何時請求發送它們的許可至關重要。 使用過多，他們可能會阻止人們使用該應用程序。 過多的非必要通知會使用戶感到沮喪，然後他們可能會將通知靜音或完全停止使用該應用程序。

設計師還應該考慮讓人們在不打開應用程序的情況下提高工作效率的可操作通知。 使用戶能夠在不進入應用程序的情況下完成小任務可以成為增強用戶體驗的強大工具。

對於移動推送通知，UX 最佳實踐是延遲任何類型的通知（請求訪問某人的位置、發送推送通知等），直到人們有機會稍微探索一下應用程序。

出色用戶體驗的通知最佳實踐

遵循以下最佳實踐將確保人們將通知視為提供價值，而不是中斷，從而增強用戶體驗。 在設計通知系統並將其放入設計系統之前，請考慮以下基本最佳實踐：

• 按前面討論的三個關注級別對通知進行分類。 然後，定義這三個級別內各種形式的通知的分類。
• 在為通知系統創建樣式指南時，請指定將發布的所有語言的通知的最大字符長度。
• 特別注意適應不同內容類型和文本長度的適應性和靈活性。
• 為三個注意力級別以及一致的圖標創建一致的配色方案。
• 創建簡潔易讀的通知，提供有用的信息。
• 仔細考慮發送什麼以及何時發送。 在移動設備上，延遲在新下載的應用程序上發送通知，以避免疏遠人們。 仔細檢查上下文和用例。
• 在顯示較少通知方面犯錯，無論它們是警報或警告，還是其他高度到中等關注的狀態更新。 相反，將它們放在人們想要查看它們時可以訪問的列表中（由 UI 中的圖標徽章表示）。
• 考慮一個系統，可以選擇將通知標記為“不再顯示”。
• 諸如“小吃條”之類的非持久性確認應在至少 4 秒至最多 8 秒後從屏幕上消失，並且可以選擇盡快將其關閉並在適當的情況下“撤消”。
• 對於移動設備上的高關注度通知，盡可能考慮聲音和触覺反饋。
• 確保通知的可讀性以及通知出現的背景之間有適當的對比。 請注意，使用流暢的響應式設計，背景可能會在通知下發生變化。

錯誤消息的最佳實踐

• 錯誤消息應該簡單直接，最好是可操作的，以易於閱讀和快速理解的語言編寫。
• 避免使用晦澀的代碼和縮寫，例如“收到的響應成功是錯誤的。 ”
• 提供簡明、清晰的問題描述，而不是“發生錯誤。 ”
• 避免責備他人或告訴他們做錯了什麼——例如，說這是“非法命令”。 ”
• 提供上下文中的建設性錯誤消息，以便人們可以解決問題。
• 避免僅通過將字段變為紅色來指示錯誤。 它不會讓殘疾人士使用它。 最好包括色盲可以看到的其他視覺提示。
• 對錶單上的輸入字段使用內聯驗證。
• 在人們解決問題之前，錯誤消息不應消失。

概括

通知有助於幫助人們實現目標的體驗，並且應該像任何其他數字產品組件一樣對待。 但是，通知可以雙向切割。 如果處理得當，它們可以提升用戶體驗並幫助參與，但如果執行不當，則可能會成為煩惱。 取得適當的平衡是關鍵。

不應將通知視為事後的想法。 為了正確地完成它們，設計人員必須及早解決用例，在產品設計生命週期中定義各種形式，並對其進行廣泛測試。

快速回顧一下設計通知的正確方法：

• 儘早開始通知設計，而不是事後才考慮。
• 按三個關注級別對通知進行分類：高、中和低。
• 顏色編碼、分配圖標並確定展示位置。
• 按類型對它們進行分類：持久或非持久、彈出、橫幅、對話框等。
• 將它們整合到設計系統中。

了解何時以及如何使用通知對於在產品消息傳遞中提供出色的可用性和建立一致性至關重要。 通過仔細評估需要在適當的時候展示的外圍信息，設計師可以提高產品的效率並增強其用戶體驗。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

• 如何在最重要的時候遠程工作
• 如何輕鬆進行遠程工作過渡
• 移動應用程序設計最佳實踐和錯誤
• 電子商務網站設計終極指南
• 聊天崩潰——當聊天機器人失敗時