向左向右——“逆向”進度條設計的一點思考 1.倒計時場景 2.特殊語義場景 3.嘗試一下垂直的柱狀圖?

我們經常見到有關進度條的設計,比如在頁面加載、應用的安裝、文件的上傳下載、音視頻播放等場景。但在有些場景下,用進度條作爲表現形式卻讓人覺得有些“彆扭”。

1.倒計時場景

時間是向前的,不管從左到右的水平進度條,或是順時針的環形進度條,進度條給人的感覺都是“向前”的。

常見的倒計時場景包括首頁開屏廣告倒計時、登錄註冊驗證碼重發倒計時、匹配聊天的時長倒計時等。如果在倒計時場景中用到進度條似乎應該是“逆向”的才更合理,更符合邏輯的。

之前並不覺得有些APP的開屏廣告倒計時的順時針有什麼問題,直到我在友盟裏看到一個“自動刷新”倒計時,它用了一個進度條的設計,而這個進度條的方向居然是“從右向左”的。

如下圖所示,那個白色條帶是“從右向左”逐漸縮短的,然後“滿上”,開始一個新的循環。第一次看到既有驚喜又有疑惑,然後有點思考。

與之類似的是手機電量消耗場景,如下圖所示,電量是從右向左衰減的(至少看到iOS是這樣)。當然針對手機電量還有一個問題,那就是正負極的方向應該怎麼放呢?左or右?有條件的可以找幾個不同品牌的手機對比一下。

2.特殊語義場景

從時間場景擴展到一般資源。

今天做一個預約應用,裏面涉及到資源“佔用”與“空閒”信息的展示,因爲無法準確預判用戶對佔用率還是空閒率哪個更敏感、更關注、更有感知,於是陷入了糾結之中。如果加入條形圖(可理解爲進度條)進行視覺化設計,那麼體現量的加還是減更好呢?因爲我們很想強化空閒率,進而讓用戶把空閒率和舒適度建立關聯,可是條形圖卻在強調“佔用”。

進一步調研發現了移動和聯通關於套餐內“餘量”和“消耗量”的不同的處理方式。

聯通展示的是消耗量,從左到右,消耗量逐漸增加,條形圖變長,並在結尾用大字號標記了套餐餘量。

移動則正好相反,從左到右,餘量逐漸減少,條形圖縮短,然後再展示餘量。

可能核心還在於預判用戶更關注“餘量”還是“消耗量”。

3.嘗試一下垂直的柱狀圖?

我們應該感謝地心引力,比如用垂直的柱狀圖去表示油、水等物質的剩餘量,似乎認知起來就沒有左還是右問題了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章