通告欄（NoticeBar）是我們在使用智能手機時的一項重要工具。本篇文章從NoticeBar的使用場景出發(fā)，分析了在設(shè)計通告欄時所需考慮的因素及其解決的實際需求。一起來看看吧。

在朋友圈給別人點贊后，最煩的就是不斷地收到其他朋友點贊或評論那條朋友圈的提醒。今天我發(fā)現(xiàn)微信終于上了這個新功能——對于單條朋友圈設(shè)置消息不再通知。

從截圖可以看到，微信用NoticeBar在消息頁上展示通知，上次朋友圈內(nèi)容置頂?shù)墓δ芤差愃啤Ｎ也聹y微信對于這種小功能的更新會使用NoticeBar。

前一陣在工作中也遇到需要給用戶發(fā)送通知的情況，這種通知希望用戶關(guān)注到但又不強制用戶馬上處理，最終的解決方案也使用到了NoticeBar，所以本文以NoticeBar 作為重點，來復(fù)盤一下。

一、使用場景分類

通告欄是系統(tǒng)給用戶發(fā)送的一些通知，從系統(tǒng)角度來考慮可分為 2 種，主動和被動。系統(tǒng)主動給用戶發(fā)送的一些通知，比如活動，目的是提高平臺活躍度或者類似微信這種新功能提醒等。第 2 種是被動發(fā)送，用戶先進(jìn)行操作，系統(tǒng)響應(yīng)用戶給予用戶反饋。

1. 系統(tǒng)主動發(fā)送

（1）異常狀態(tài)

系統(tǒng)在運行中產(chǎn)生的一些異常狀態(tài)可能導(dǎo)致用戶無法正常使用系統(tǒng)，所以需要告知用戶。比如網(wǎng)絡(luò)連接失敗、預(yù)覽圖片缺失等。

（2）功能提醒

當(dāng)功能有差異或者提前預(yù)測用戶行為路徑后需要主動告知用戶相關(guān)功能的提醒。比如淘寶消息視覺呈現(xiàn)上會有差異，使用通告欄告知用戶差異原因。

（3）活動

這一類提醒主要是為了提高用戶活躍度，增強用戶留存、提高下單率等。比如飛豬底部的簽到活動、邀請好友活動、抖音中提醒用戶參與主題活動的提醒等。

2. 系統(tǒng)被動發(fā)送

比如百度網(wǎng)盤中，將通告欄和進(jìn)度條結(jié)合用以展示用戶操作后的狀態(tài)。用戶復(fù)制后，通告欄會顯示復(fù)制后的狀態(tài)，包括進(jìn)行中、復(fù)制成功、復(fù)制失敗。

豆瓣也是類似的設(shè)計，會展示發(fā)布中和發(fā)布失敗，但對于發(fā)布成功則使用了 Toast 。我覺得這里是合理的，對于這種輕量級的成功反饋使用 toast，也可以保持產(chǎn)品一致性。

但百度網(wǎng)盤對于復(fù)制成功依然使用通告欄，我猜測其原因可能是百度網(wǎng)盤的 Toast 在頁面底部出現(xiàn)，而 NoticeBar 在頂部出現(xiàn)，如果中間狀態(tài)在頂部，結(jié)果狀態(tài)在底部顯示，關(guān)聯(lián)不夠緊密，所以對于 NoticeBar 這里單獨做了規(guī)則定義。這也是我們在設(shè)計中需要注意的地方。

二、設(shè)計通告欄應(yīng)考慮什么？

1. 組成

從現(xiàn)有產(chǎn)品上看，基本的組成是：圖形、文本、操作按鈕、關(guān)閉。最少的應(yīng)該是只有一段文本。

圖形可以是Icon、圖片等用于視覺強化提示說明或者類似豆瓣展示發(fā)布內(nèi)容。

文本可以是一段文字提示或者是主標(biāo)題+輔助文字的形式。當(dāng)文本超長時除了可以使用省略號顯示，也可以采用跑馬燈（水平滾動），或者垂直滾動的形式。

2. 出現(xiàn)和消失的規(guī)則定義

對于被動發(fā)送的通知，當(dāng)用戶操作成功后主動消失。而對于主動發(fā)送的通知，需定義消失規(guī)則。

（1）用戶點擊關(guān)閉消失

（2）用戶點擊進(jìn)入活動詳情頁消失

（3）用戶參與活動后消失

對于（1）（2）還需考慮是否再次展示，以及再次展示的規(guī)則是什么，比如高德地圖調(diào)研活動的消失規(guī)則是，完成問卷調(diào)查或者點擊關(guān)閉后才會完全消失（實際使用測試獲得）。

3. 頁面位置

頂部。導(dǎo)航欄或者篩選欄下面，內(nèi)容列表上面的位置。根據(jù)用戶瀏覽動線從上到下，所以頂部的位置用戶更容易先看到。

中間區(qū)域。比如淘寶中的消息差異狀態(tài)提示，準(zhǔn)確來說也是在內(nèi)容列表的頂部。

底部。底部位置用戶不容易注意到所以對用戶打擾較少，比如飛豬的簽到活動就放在底部位置。

4. 當(dāng)頁面滑動時是否需要固定位置。

考慮是否需要用戶持續(xù)關(guān)注。當(dāng)通告欄固定在某一位置時意味著屏幕中其他內(nèi)容的呈現(xiàn)區(qū)域必定會減少。所以若需用戶持續(xù)關(guān)注的內(nèi)容可固定，而無需用戶持續(xù)關(guān)注則可根據(jù)頁面滑動。

比如百度網(wǎng)盤復(fù)制狀態(tài)的通告欄會固定在頁面頂部，因為復(fù)制狀態(tài)會持續(xù)一段時間，并且在這段時間內(nèi)狀態(tài)會發(fā)生變更，若跟著頁面滑動，當(dāng)通告欄被隱藏后，如何告知用戶狀態(tài)變更？所以這里固定在頂部會更合適。

5. 多條通告欄的優(yōu)先級

若同時有多條通告欄，需定義優(yōu)先級。比如微信中，當(dāng)存在系統(tǒng)功能提示和異常狀態(tài)提示時，異常狀態(tài)在上，優(yōu)先級更高一些。

三、解決實際需求

我們的問題是這樣的，用戶使用我們的app打開附件時，由于附件內(nèi)圖片質(zhì)量過大等其他問題可能會導(dǎo)致附件圖片丟失。如果用戶想要查看完整附件，可使用系統(tǒng)自帶閱讀器查看，但系統(tǒng)閱讀器存在限制，無法使用 app 原有功能。所以希望在預(yù)覽附件時提供用戶切換系統(tǒng)閱讀器查看完整附件，并且告知用戶切換后哪些功能將無法使用。

從需求判斷，這屬于希望用戶注意到但不強制用戶馬上處理的通知，所以可采用通告欄顯示。

1. 出現(xiàn)規(guī)則

當(dāng)有附件出現(xiàn)圖片丟失的狀態(tài)時，通知用戶。

2. 消失規(guī)則

需要用戶持續(xù)關(guān)注，所以不展示消失按鈕。原因是缺失圖片會導(dǎo)致附件內(nèi)容不完整，從用戶目標(biāo)來理解，也就是阻礙了用戶瀏覽附件的任務(wù)，那么用戶采用更好的解決方案完成任務(wù)的概率很高，所以通知需用戶持續(xù)關(guān)注，常顯無取消。

3. 放在什么位置？

固定在內(nèi)容區(qū)之上頂部位置。附件內(nèi)容長度不確定，圖片丟失狀況不確定，所以當(dāng)用戶未查看附件內(nèi)容時，也無法判斷是否需要采用系統(tǒng)閱讀器。當(dāng)用戶瀏覽附件后，若發(fā)現(xiàn)圖片丟失嚴(yán)重，內(nèi)容完整性很差，此時通告欄固定在頂部就可一鍵切換到系統(tǒng)閱讀器，去查看完整附件。

四、最后

前兩天看《大創(chuàng)業(yè)家》里有這樣一句話，“人會成為他每天想成為的那個人”，好雞湯，哈哈，我喜歡雞湯，就醬～