起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識小小的進度條竟有這么多設計細節！
編輯導語：什么情況下刷短視頻APP允許拖動進度條呢？本篇作者在刷一些短視頻APP時，發現各家APP對進度條的設計各不相同，有了一些思考體會，與你分享。
一、什么情況下允許拖動進度條？
我們在刷短視頻的時候，經常會遇到有的進度條可以拖動，有的不能拖動，那么怎么去判定呢？這是由產品的定位和視頻的時長去決定的。
對主流的短視頻APP分析后，總結了一下，沒有進度條的視頻一般沒有超過30s，而有進度條的視頻多數也超過了30s（30s是一個閾值）。相對抖音初期設定的15s視頻來說，30 ~ 60s其實是一個比較尷尬的時間，想要在短短的十幾秒內甚至幾秒內去對視頻感興趣，是很有很大難度的。
不過細致回想一下，抖音剛火的時候，視頻就是簡短精致、快節奏的風格，用戶無需過多的思考，就很容易去接受和理解，很容易陷入刷刷刷的陷阱里去，如果在這時有一條走動的進度條，勢必會給用戶帶來一種焦慮感，時刻告訴用戶視頻馬上結束，這樣會少了些刷刷的刺激感了。
不過現在抖音隨著用戶群體以及內容的增多，長視頻也逐漸被接受，可以通過對比發現目前長視頻的節奏感明顯慢下來，拖動進度條就是不可缺少的事情，畢竟內容多了，垃圾內容也就多了。
我們再看看后起之秀——微信視頻號，他目前的策略就是走抖音之前的策略方法。
一開始所有的視頻都沒有進度條，視頻的時間上也是盡量簡短，讓用戶更好的沉浸式豎視頻，享受刷視頻的快感，從而讓用戶去慢慢的接受微信去刷短視頻，在后續微信大概率也是要加進度條的，目前是加了時間的信息，雖然不是很明顯（慢慢習慣，逐步適用）。
二、設計時候需要考慮什么？
進度條的設計原則首先要保證減少對用戶最大程度上的干擾，其次是要做到及時反饋、讓用戶能夠快速get到主要信息，最后是設計細節上精益求精，追求細節上的極致，從這三個原則去考慮設計，從而提升用戶體驗。
1. 減少干擾
短視頻的最主要的原則還是沉浸式刷刷刷，如何讓用戶全身心的投入是我們要考慮的。
1）拖動前
在用戶刷視頻時候，減少過多的設計干擾，用戶應該更多時間、更專注的瀏覽短視頻的內容，無需過度突出底部進度條，只需要稍微可以識別即可。常見的就是用線條和圓點，通過白色不透明度去設計樣式。
我們可以從抖音短視頻去分析，以沉浸式體驗設計為出發點，當用戶瀏覽視頻時，幾乎所有的注意力都是聚焦在內容的本身，而進度條如果突出顯示會分散掉用戶的一部分注意力，容易產生焦慮，本可以通過內容給用戶帶來非常良好的體驗的價值被大打折扣。
2）拖動時
當用戶沉浸在短視頻的內容的時候，對用戶來說，用戶可能就想在進度條那隨意拖動下就可以快進和快退，無需過多的時間去把聚焦內容的精力分散到進度條身上，這才是他們想要的。如果去打斷他們的精力，誤操作跳出了頁面，肯定會無法做到沉浸式的體驗，可能再往下看的欲望會大大折扣，對產品來說是一種得不償失的體驗。
比如抖音能拖動的視頻，進度條附近是可以盲操作的，不用過多的去分散精力；再比如進度條拖動開始和結束的時候，如果進度條兩端在屏幕兩邊，可能會有一些誤操作在里面。比如容易右滑進入，左滑進入。所以我們設計時候要加大手指拖動熱區，當用戶拖動時候，整個屏幕都是拖動的熱區。
下圖淘票票就是一個很好的反例：
拖動過程中，盡量減少對用戶干擾，用戶還沒有離開看的視頻，雖然有時間元素和進度條去分散了用戶的精力，但是我們還要通過減少其他的干擾去從其他地方爭取一些精力。
比如常見的有在視頻上進行蒙層處理，這還好，還可以觀看內容；體驗更糟糕的是進度條在視頻內容上顯示，下面還有蒙層遮罩，極大的影響了觀看體驗，長視頻這么做其實影響不是很大，但是短視頻3S我就可以劃走它。
合理一點的做設計是：用戶滑動進度時候，進度條和時間清晰可見且對應自然，然后通過屏蔽其他功能區域去提升用戶的專注度，這樣可以把干擾降到最低。
2. 及時反饋
首先滑動進度條，我們首先要得到反饋是時間了，我們拖到了哪里？總時長多長？等等，時間文字過小、過大、過輕都會影響瀏覽體驗。
其次是進度條本身，拖動時候要和為拖動時候合理區分，俗話說親兄弟還要明算賬，要給予用戶明顯的操作反饋提示。
包括拖動結束后，應該給用戶一個短暫的考慮機會（冷靜期），如果看的內容還不是想看的部分，還是可以及時反悔，用戶再次短時間內拖動進度條，無需再次喚醒。
另外，用戶在滑動進度條的時候，主要精力是在視頻的內容上的，其實是對開始和結束是無感知的，所以有時候可能劃著劃著就滑到了開始和結束兩個端點，如果能給一個反饋（除了時間上的反饋），那么體驗上就能夠錦上添花了。
比如微信朋友圈視頻有震動反饋。設計建議：在進度條兩端建議增加震動反饋，提升無障礙（無障礙并不是指殘障人士）使用體驗。
當然也有其他的更細致的反饋形式分類，比如微博，當視頻時長在30s內時，用戶拖動進度條的時候，是只有時間進度的；但當視頻時長超過30s內時，用戶拖動進度條的時候，就變成了另一種設計樣式，帶有縮略圖和時間，縮略圖的比例也是根據視頻自身的比例去選擇。
3. 極致體驗
在滿足正常刷視頻的情況下，如果能更好的提升用戶體驗，去解決提升體驗，當然是最好不過了，下面從這幾個點去分析下：
1）進度條拖動絲滑效果
有的視頻進度條拖動起來特別的卡、不流暢、不絲滑、經常中斷，用戶體驗極差，另外進度條出現和消失時，進度條的動效也是非常的自然流程。
下圖是愛奇藝的效果，拖動起來有點卡頓：
2）進度條設計細節
① 視頻加載loading（不是頁面loading，兩者不同）：很多人會把頁面加載loading和視頻加載loading共用一個，其實是兩碼事。
我們細致體驗下抖音和快手，他們的視頻加載動效是和進度條合在一起的，非常的自然，不是很生硬，可以讓用戶更沉浸的去刷刷刷。
愛奇藝的頁面加載loading和視頻加載loading就是共用一個。
② 設計細節還原：我截取了快手、微視、抖音的三個產品的進度條，對其進行放大細致觀看。
可以發現抖音的進度條的錨點上是有一顆分割線（應該不是這么故意設計的吧），設計細節還原度還是有待提高的。微視這邊的錨點直接被裁掉了一點點，相比較快手的設計細節上更好一些。
另外，我們整體看一下，三家目前已走的進度開始都是帶圓角的，而灰色進度條是沒有的，這也是一個設計還原的細節問題。
3）進度條點、拖交互手勢的選擇
為什么進度條一般主要是靠拖動的交互手勢去操作？因為在這么小的空間上去手勢操作、而且下方多為可點擊的tab或者上方有其他功能區，所以滑動相比較點擊是更為精準的操作。
如果進度條上必須要加點擊功能，建議可加大點擊熱區，和上下功能區區分開，避免誤操作。另外點擊的時候給與一個細節上的反饋，與拖動手勢的效果區分開。
下面是愛奇藝和微視兩個對比：
愛奇藝點擊經常會誤操作，點擊到下方的tab區域，進度條點擊后跟正常播放沒有任何區別。
微視的設計相對來說點擊誤操作率更低，以及點擊后有一個閃動漸現的效果、且有錨點的出現。
4）時間數字
這個地方也是一個很細節的點，由于進度條在拖動的時候，時間也跟隨著走動。淘票票（圖四）的當前時間和視頻總長時間設計在一起，滑動時候就會有忽長忽短的情況，設計上不夠精致、略細粗糙。
微視的設計雖然兩個時間是分開了，但是由于數字不是等寬字體，造成了每個 數字的寬度都不一樣，仍然有長短變化。
快手的設計是使用等寬字體且是特殊數字字體，這樣設計后就顯得很精致，但是這里面的時間數字中間的冒號是底對齊，視覺上還是疏忽了一個細節點。
抖音雖然也有數字不是等寬字體，但是由于它是位移移動的，把數字寬度不一致的影響降到了最底，不過又會帶來一個全新的問題，時間太晃動，看不清楚了。
三、小結
通過上述分析，可以總結看到抖音和快手能在短視頻類產品中脫穎而出，雖說離不開運營和產品，但是很多細節上也是設計師可以去學習和思考的。
在產品逐漸完善的今天、市場接近飽和的環境下，作為設計師的我們，要更多的去關注設計細節、提升體驗、做到極致體驗，堅持用戶至上的原則去設計產品，才能在眾多產品中脫穎而出，去營造出一個近乎完美的沉浸式體驗，發揮出設計的價值，讓設計更好的去賦能與商業。
本文由 @飛哥 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
get
設計細節的優化提升用戶體驗感
贊同
分析的很到位！
謝謝，歡迎關注
學到了