卡在99%的進度條,讓我越來越焦慮
如今,在做Web或App設計時,除了常見的載入動效外,“進度條”也是設計師們常常要花費時間與精力來著重思考的元件設計。
進度條可以理解成視覺化等待,能緩解使用者在等待過程中的焦慮情緒,及時給予使用者反饋和提示,降低使用者在等待過程中跳出的頻率。
你是不是看到Loading0%的進度條很是焦慮?
那麼,進度條的設計究竟要如何既能兼顧使用者體驗,又能利用精美炫酷的色彩、動效抓住使用者眼球?
下面,小摹給大家整理了一些創意十足的進度條設計案例,一起來看看吧。
創意進度條設計例項
首先,咱們來看看這款進度條:
不得不說,使用者心理被設計師拿捏的死死的。
一開始小拖車拉著進度條走的很快,走到中間便開始勻速運動,動畫效果的展現形式,使用者會很有耐心地等待進度條走完。
中間的等待過程,軟體也進行了自身的載入,何樂而不為。
在滴滴打車時,介面中展示等待時間、已等待時間、前方排隊人數等細節,有了這些量化的資料,使用者可以自由安排時間。
如遇到打車難的情況,即使正在等待中,看到自己已等待的沉沒時間,也很難取消訂單,直至成功打到車。
將進度條像雪花般打散,是不是很能吸引到你的注意力,很大程度幫你緩解負面情緒呢?
甚至搞搞創意,利用各種小動畫來轉移人們的注意力,讓使用者意識不到需要等待。
對於某些進度資訊無法在短時間內徹底完成,那麼可以儘量將精準度與真實情況靠近,讓使用者知道目前最新進展,緩解使用者的焦慮之情。
這一點,淘寶的物流設計就十分可圈可點。
從最初的僅更新文字物流資訊,到現在從地圖上就能直觀地展示包裹已送至何處,預計送達時間是多久,越來越人性化了~
除此以外,紅綠燈上的讀秒、地鐵站中預計下一趟地鐵多久到達、外出吃飯,實時掃碼檢視前方還有多少桌在等待……這一切的一切,進度條發揮了應有的貢獻。
往小了說,進度安撫了人心,往大了說,進度讓生活得以安穩繼續。
在看過這麼多優秀的進度條設計後,接下來,咱們再來聊聊設計進度條時需要考慮什麼?
設計時需要考慮什麼?
在我看來,進度條設計的原則有三點:
1)降低干擾頻率
2)及時反饋
3)極致的使用者體驗
降低干擾頻率
對於內容型產品,在設計進度條時可儘量弱化其存在,讓使用者能更沉浸式體驗內容本身。
類似於抖音,本身一條視訊的時間就比較短,使用者操作進度條的需求不高,因此弱化進度條,儘可能保證視訊的完播率。
當我們在看電影或電視劇這類時間較長的視訊時,快進、跳過等需求頻率大幅增加,因此在點選螢幕時,下面的進度條自動顯示,可便於使用者控制視訊的進度。
根據產品屬性規劃進度條出現的頻率,能有效幫助使用者更專注於內容本身,提升使用者體驗。
及時反饋
我們滑動進度條的目的在於加快或減慢進度,所以設計進度條時最需要考慮的是給使用者反饋時間。
總視訊的時長是多久?拖到了哪裡?是不是我想看的那一部分?
例如騰訊視訊,在播放過程中拖動進度條時,當前視訊內容可以正常播放,並會給整個螢幕加上一層蒙版後,中間展現拖動的時間和縮略畫面,以此在不妨礙當前播放的前提下,使用者還能及時知曉進度條進度和拖動的位置是否正確。
極致的使用者體驗
從操作方式來說,可以儘量避免將所有操作都限制在進度條中,例如在騰訊視訊中,長按螢幕可支援3倍快進/快退,整體視訊播放比拖拽進度條更加流暢。這樣可以避免喚醒進度條,誤觸風險產生。
從分散注意力方面而言,在王者榮耀即將對戰的loading中,左側會顯示所選英雄的使用小tips,右側的小拳頭動效可以點選,為一會兒的賽場加油打氣。在看攻略和加油助力的過程中,有些很快就能載入好,馬上就能全軍出擊了~
最後
一款優秀的產品脫穎而出,雖說離不開產品及運營團隊的助力,可我們身為設計師,也要為產品設計做出應有的貢獻。
關注設計細節、提升使用者體驗、堅持使用者至上的原則來設計產品,這都是我們應該遵循的設計準則。雖然進度條只是一個很小的元件,但當我們把每一個小小的元件都設計精緻後,相信使用者體驗必能進階一大步!
(文中圖片均用“更懂中國設計師的設計工具——摹客DT”完成)
- 實採6位產品經理,他們轉行都去了哪裡?
- 從4k到30k,產品路上我從未後悔
- 裁員潮下,我月薪3W依舊堅挺
- 沉浸式刷視訊,抖音的產品設計妙在何處?
- 卡在99%的進度條,讓我越來越焦慮
- 改bug神器,ChatGPT分分鐘掃描,真香!
- 摹客外掛上新,Ai摳圖實用、千款icon免費!
- 嘿嘿嘿,10個我經常逛的“小網站”,不騙人!
- 細思極恐,為什麼大多產品經理很水?
- 程式設計師轉行做運營,降薪降得心甘情願
- 摹客RP,新增圖文選項卡元件!
- 為了讓使用者買買買,小紅書做對了哪些事?
- 4個優秀PM必備的溝通技能,你Get多少?
- UX、PX、CX,產品經理必須要搞清楚的3個X是什麼
- 羊了個羊火爆全網,原來自己做個小遊戲這麼簡單!
- 開發說這個需求實現不了,怎麼破?
- Adobe砸200億添全家桶新成員,Figma後來居上!
- 一個Behance被封,還有無數國內網站給我靈感
- PM都用什麼軟體做原型設計
- Adobe砸200億添全家桶新成員,Figma後來居上!