控件|設計NoticeBar該考慮什么?

0 評論 3239 瀏覽 6 收藏 10 分鐘

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

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

不急,你可以等會再看

從截圖可以看到,微信用NoticeBar在消息頁上展示通知,上次朋友圈內容置頂的功能也類似。我猜測微信對于這種小功能的更新會使用NoticeBar。

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

一、使用場景分類

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

1. 系統主動發送

(1)異常狀態

不急,你可以等會再看

系統在運行中產生的一些異常狀態可能導致用戶無法正常使用系統,所以需要告知用戶。比如網絡連接失敗、預覽圖片缺失等。

(2)功能提醒

不急,你可以等會再看

當功能有差異或者提前預測用戶行為路徑后需要主動告知用戶相關功能的提醒。比如淘寶消息視覺呈現上會有差異,使用通告欄告知用戶差異原因。

(3)活動

不急,你可以等會再看

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

2. 系統被動發送

比如百度網盤中,將通告欄和進度條結合用以展示用戶操作后的狀態。用戶復制后,通告欄會顯示復制后的狀態,包括進行中、復制成功、復制失敗。

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

不急,你可以等會再看

但百度網盤對于復制成功依然使用通告欄,我猜測其原因可能是百度網盤的 Toast 在頁面底部出現,而 NoticeBar 在頂部出現,如果中間狀態在頂部,結果狀態在底部顯示,關聯不夠緊密,所以對于 NoticeBar 這里單獨做了規則定義。這也是我們在設計中需要注意的地方。

二、設計通告欄應考慮什么?

1. 組成

從現有產品上看,基本的組成是:圖形、文本、操作按鈕、關閉。最少的應該是只有一段文本。

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

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

2. 出現和消失的規則定義

對于被動發送的通知,當用戶操作成功后主動消失。而對于主動發送的通知,需定義消失規則。

(1)用戶點擊關閉消失

(2)用戶點擊進入活動詳情頁消失

(3)用戶參與活動后消失

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

不急,你可以等會再看

3. 頁面位置

頂部。導航欄或者篩選欄下面,內容列表上面的位置。根據用戶瀏覽動線從上到下,所以頂部的位置用戶更容易先看到。

中間區域。比如淘寶中的消息差異狀態提示,準確來說也是在內容列表的頂部。

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

4. 當頁面滑動時是否需要固定位置。

考慮是否需要用戶持續關注。當通告欄固定在某一位置時意味著屏幕中其他內容的呈現區域必定會減少。所以若需用戶持續關注的內容可固定,而無需用戶持續關注則可根據頁面滑動。

比如百度網盤復制狀態的通告欄會固定在頁面頂部,因為復制狀態會持續一段時間,并且在這段時間內狀態會發生變更,若跟著頁面滑動,當通告欄被隱藏后,如何告知用戶狀態變更?所以這里固定在頂部會更合適。

5. 多條通告欄的優先級

若同時有多條通告欄,需定義優先級。比如微信中,當存在系統功能提示和異常狀態提示時,異常狀態在上,優先級更高一些。

不急,你可以等會再看

三、解決實際需求

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

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

1. 出現規則

當有附件出現圖片丟失的狀態時,通知用戶。

2. 消失規則

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

3. 放在什么位置?

固定在內容區之上頂部位置。附件內容長度不確定,圖片丟失狀況不確定,所以當用戶未查看附件內容時,也無法判斷是否需要采用系統閱讀器。當用戶瀏覽附件后,若發現圖片丟失嚴重,內容完整性很差,此時通告欄固定在頂部就可一鍵切換到系統閱讀器,去查看完整附件。

不急,你可以等會再看

四、最后

前兩天看《大創業家》里有這樣一句話,“人會成為他每天想成為的那個人”,好雞湯,哈哈,我喜歡雞湯,就醬~

專欄作家

阿青,公眾號:阿青碎碎念,人人都是產品經理專欄作家。B端UX設計師。

本文原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!