作者對騰訊視頻、愛奇藝、搜狐視頻和芒果TV進行界面的整體對比，希望能給各位帶來一些收獲和啟發。

視頻app應該是每個手機上的必裝應用，而且一裝就是一打。雖然它不是什么新鮮產品形態，準確的說還很老，但是這幾年行業的改變思路還是很清晰的，比如付費會員制的推行和自制內容的崛起。我近幾個月每天輾轉在各個視頻app之間：打開搜狐看秦明，打開騰訊看蝸牛，打開愛奇藝看余罪，打開芒果TV看很多。。。于是便想和大家聊幾款主流視頻app在交互和產品方面的使用體驗。

由于視頻平臺繼各大電商之后也成長為了超級app，功能繁復又強大，以下將對6款app的視頻播放功能進行闡述，而且是非會員的情況下（主要是這樣可以吐槽一下廣告）。本文選擇騰訊視頻、愛奇藝、搜狐視頻和芒果TV進行界面整體的對比，在一些局部功能上會聊到優酷和每日開眼。使用設備為iphone6，各軟件的版本號如圖0所示，雖然不全是最新版本，但在大版本層面也是比較新的了。本系列文章的敘述順序會從播放器的豎屏模式聊到橫屏，以及其它一些重要功能如緩存、耳機與視頻播放的交互等。

很巧的是，就在我籌備本篇文章期間參加了一個行業峰會，峰會上移動研究院以6個維度對7款視頻app進行了評測，評測結果我會在文末展示給大家。

想提前聲明的是，由于每款應用的產品定位服務用戶都不相同，因此在對比相似功能時，小編不會用絕對的對錯去評判設計的好壞，而是選擇“更合理”、“好一點”等詞匯去表達。各位同行如果有不同見解，歡迎提出，大家互相交流，不勝感激。

1. 豎屏模式

點擊信息流里的圖片按鈕會進入視頻播放頁面，默認布局都是非全屏模式，界面上半部分是播放器，播放器下面是輔助功能。播放器為播放狀態，聲音也是揚聲狀態（無論手機是否為靜音）。如果用戶本次觀看和上一次的觀看為同一個視頻，那么播放器不會播放廣告且直接跳到上一次結束觀看的位置繼續播放（但也不是每次都奏效，我猜測和數據記錄有關，如果上一次播放的數據因網絡問題沒有存儲成功，那么再次點擊還是會播廣告的）。如果用戶本次觀看不是上一次觀看的視頻且不是會員，播放器會放廣告。

?1.1 廣告

廣告的時長與視頻長度相關，如果是預告片或者短新聞則廣告時間是15秒，如果是電視劇則可能是45、60、75、90、105或120秒不等。除此之外，觀看過程中間會插入15或30秒廣告，有時觀看結束后也會進入一小段廣告，然后才是下一集的片頭廣告（真是很逆天呢，也不知道誰起的頭，現在各平臺都這么做）。

從圖1.1可以看出，豎屏模式下4個app的播放器高度的差異非常小，但每個app處理系統狀態欄的方式很不一樣：芒果TV、騰訊和搜狐的播放器直接頂在屏幕頂部，芒果TV將狀態欄隱藏，騰訊和搜狐的播放器和狀態欄共享一個區域；愛奇藝的播放器則是讓出了狀態欄，從屏幕頂部下方20點處放置播放器。

播放廣告時，播放器上有若干交互按鈕，圖1.1中共有的6個界面元素是：

1.返回按鈕 廣告剩余時長

通常顯示在開通會員按鈕上，有很強的相關性，告訴用戶開通會員可以免廣告。

2.開通會員按鈕

點擊進入會員購買頁面，購買完成后會回到視頻播放頁面且免掉廣告。

3.廣告鏈接

點擊播放器上除所有按鈕外的任意位置也可以跳轉到廣告產品購買頁面。

4.廣告靜音按鈕

點擊會使廣告靜音，但只影響廣告的聲音，不影響進入正片后的音量。

5.全屏按鈕

切換到全屏顯示。

從圖中可以看出，只有芒果TV的廣告剩余時長沒有和開通會員按鈕形成視覺相關性；愛奇藝除了上述的6個功能點之外還多了2個按鈕：一個是暫停按鈕，點擊此按鈕廣告被暫停，個人認為這個按鈕沒有存在的必要；另一個是投屏按鈕，在可被投影的設備為開啟狀態時就會顯示此按鈕，點擊可投射到大屏幕且不會播放廣告。其實騰訊視頻也有投屏的功能，只不過要在廣告播完才會顯示，真的很有心機呢。

1.2 豎屏播放器

圖1.2是播放視頻正片時播放器的布局，和播放廣告時一樣，播放器的上下兩側各有一欄，上側欄上有回到上一層級的返回按鈕和當前播放視頻的名稱和劇集數，因此稱上側欄為導航欄；下側欄上的若干按鈕用來操作和管理當前頁面內容，因此稱下側欄為工具欄。由于這兩個欄和ios標準的導航欄和工具欄定義不是完全吻合，因此如果各位小伙伴有其它更恰當的命名方法可以告訴我。圖1.2中可看出，兩個欄上共有的4個界面元素是：

• 返回按鈕
• 暫停／播放按鈕
• 滑軌、滑塊和兩個時間字段
• 全屏按鈕

除此之外，騰訊視頻多了一個投屏按鈕；愛奇藝多了一個投屏和VR按鈕。

界面元素1，2，3協助用戶在非全屏時也能輕松完成觀看體驗，這3個控件對應的需求是觀看體驗中的剛需；全屏、投屏和VR是切換至另一種觀看模式的入口。

導航欄和工具欄都有兩種狀態：顯示狀態、臨時地全部或部分隱藏狀態，輕擊操作可在兩個狀態間切換。4個app處理欄隱藏的方法都不太一樣：芒果TV把兩個欄全部隱藏，包括系統狀態欄；而其它3個應用都一致保留了返回按鈕和狀態欄；搜狐視頻還顯示了播放進度。

騰訊視頻、愛奇藝和搜狐視頻將返回按鈕和欄上其它幾個交互控件做了很明顯的區分對待：如果用戶想離開，只需1次點擊；如果用戶想進行與觀看視頻有關的交互，需先將欄呼出，再進行操作，需2次點擊。這樣做使用戶不感興趣時不用付出更多的邊際成本，因此小編覺得在上下欄隱藏時顯示返回按鈕會好一些。

豎屏和全屏是截然不同的觀看決策，全屏使人心無旁騖；豎屏模式下用戶可以獲取其它更多的信息，用戶可以瀏覽書寫評論、查看演員信息等。因此狀態欄和播放進度條的顯示增加了用戶可感知的信息，和豎屏的使用場景不違和。

廣告播放結束后，導航欄和工具欄的顯示狀態也是個很重要的細節：騰訊視頻和搜狐視頻會顯示這兩個欄，停留數秒后進入臨時半隱藏狀態；而愛奇藝和芒果TV則是在廣告播完后直接進入半（全）隱藏狀態，更多的功能沒有機會告知用戶。尤其是在芒果TV里，如果用戶想有所行動，但界面上也沒有任何提示讓用戶知道可以輕擊一下播放器來重新喚出導航欄和工具欄，這會讓用戶不知所措。

1.3 輔助功能

豎屏模式時，播放器的下面是一些輔助功能，從圖1.1可以看出芒果TV、騰訊和搜狐的布局邏輯清晰，并且在一屏內（iphone6）就可以看到全部的主要功能；愛奇藝的貼片廣告占用了十分關鍵的空間，而且參演明星顯示在劇集的上面，導致在第一屏內無法選集。其實搜狐視頻在這個頁面也放了廣告位，但是是隱藏在播放器下面，滑動可以拉出。4個app共有的6個界面元素是：

• 內容介紹，包括文案和數據
• 收藏
• 緩存
• 分享
• 評論
• 劇集陣列：

視頻內容是一個線性集合時才會有劇集陣列，單個視頻不會有。它用來顯示當前播放的是第幾集，用戶也可以點擊切換到其它集。

電視劇和綜藝節目的劇集按鈕的視覺表達很不一樣，電視劇按鈕的尺寸只要滿足44點就可以了，上面帶有數字和相關狀態；而綜藝節目的按鈕會比較大，描述性文字比較多，可能還會顯示圖片。綜藝節目的做法讓用戶很容易就能評估想看哪一集或者哪一集已經看過了，因此劇集陣列是十分重要的控件。

電視劇和綜藝節目的劇集陣列顯示方式也很不一樣，本篇只說電視劇的劇集陣列：

愛奇藝的電視劇將所有劇集按鈕分布在若干個標簽頁里，每個標簽頁放15個按鈕，比較占用空間但也讓用戶對還剩多少集沒有看等相關的情況比較有感知。這也是技術成本很小的做法。

其余3個應用都是只用一行來顯示所有劇集，并提供了查看全部劇集的按鈕，點擊是全部劇集按鈕的平鋪樣式。劇集陣列只在一行顯示時，用戶可交互的動作為點擊和滑動。在芒果TV，點擊劇集時，劇集陣列不會自動向左滑動，因此當點擊當前最右側的劇集時，需要手動將陣列向左滑動平移才能查看更多劇集。騰訊視頻和搜狐視頻在用戶點擊中間偏右的劇集時，陣列就會向左平移，將更多的劇集顯示出來，因此，當前點擊的劇集總是在屏幕垂直居中的位置（但前幾集和后幾集無法這樣顯示）。平移過程要有被點擊按鈕的狀態刷新和平移動畫，這一點騰訊視頻做的很巧妙，用刷新來代替實時地平移，雖然不是實時平移，但是使用過程很流暢；而搜狐視頻做的是實時平移，但切換劇集時要處理的數據比較多，因此實現效果非?？?。此處明顯看出騰訊的產品經理是如何用產品來規避技術難點的，值得我們大家學習。

劇集陣列上的按鈕有很多狀態：當前播放，更新狀態，預告片，已緩存到本地，VIP才能觀看等。劇集按鈕上沒有記錄該集是否觀看過的狀態及觀看了多少時長，小編認為原因有三點：首先，應用默認大部分用戶都是順次觀看的，每次打開視頻時應用都會接著上一次結束觀看的位置繼續播放，用戶不用去思考哪集看過、該從哪集開始看；其次，劇集陣列上的按鈕尺寸也不允許顯示如此多的信息；最后，和娛樂型內容相比，深度學習型內容更適合顯示完成百分比，例如得到app里的音頻文件和網易公開課里的視頻，就會顯示完成的百分比或時長。

2.0 橫屏模式

點擊豎屏模式右下角的屏幕切換按鈕，播放器進入橫屏模式。橫屏的導航欄和工具欄包含的控件更豐富，除此之外，左右兩側也放置了按鈕控件。在橫屏模式下更容易辨別出各家的欄設計對觀看體驗的影響。美觀與可用性之間在這個巴掌大的空間里不是很好平衡。愛奇藝的滑塊設計使它必須使用邊界清晰的工具欄，邊界清晰的欄本可以增強欄上的按鈕的辨識度，但愛奇藝并沒有做到，因為icon的線條都太細了；搜狐視頻沒有填充欄的背景色，而是在視頻內容上蓋上一整屏的半透明深色遮罩來凸顯欄；芒果TV和騰訊視頻使用漸變來填充欄背景色，看起來更通透。4種做法的交互方式都沒問題，只是視覺的不同，但具體哪一個更好地通過大量數據統計得出，所以這里就不妄下結論了。

橫屏模式里有全屏狀態，全屏狀態時導航欄、工具欄和狀態欄都臨時隱藏了起來，給用戶營造了心無旁騖的觀看環境。輕擊一下可以再次喚起這3個欄。

各家app的欄功能不完全相同，本篇和下一篇將按照共有功能和特色功能的順序對導航欄和工具欄進行敘述。

2.1返回按鈕

4家app在橫屏模式時都去掉了切換橫豎屏按鈕，因為點擊返回就是退出橫屏。除此之外，我猜測是因為全屏時的按鈕實在太多，自然不會放置兩個有同樣功能的按鈕。雖然返回按鈕和切換橫豎屏按鈕在視覺上沒有一個很好的關聯度，但是頁面層級關系比較容易讓用戶理解。有趣的是，優酷在全屏時保留了右下角的退出全屏按鈕。

2.2頁面標題

橫屏模式所有的導航欄上都顯示了頁面標題，也就是當前播放的劇集名稱和劇集數，但位置是在返回按鈕的右側。ios用戶界面手冊里提到過，要將前一層級的標題顯示在返回按鈕右側（如果可以放下的話），這樣返回按鈕才更有意義。很顯然，這些視頻app都沒有遵循這一準則，這也是我在第一篇里說過的，稱上側欄為導航欄不那么恰當的原因。盡管如此，現在的布局更好看，用戶根據劇集數也知道返回按鈕右側的文字就是本頁標題。

2.3 暫停／播放按鈕

暫停和播放是同一個按鈕的兩種切換顯示狀態，位置在左下角。

設計理論是不贊成在一個頁面內1個控件上切換2個功能的，但是數字設備上的暫停和播放卻可以很好違背這種觀點。原因一是數字設備可以在同一個區域顯示不同的狀態，表達邏輯上是不會出錯的，這是物理設備做不到的（例如收音機）；原因二，用戶可以很輕松地辨別多媒體內容的播放和暫停狀，要切換狀態時只知道就按那個按鈕就對了。如果放置2個按鈕在界面上，用戶要結合視頻的狀態去在兩個按鈕之間辨別該按哪一個（即使讓一個按鈕為禁用狀態，另一個為可用狀態，用戶也還是要費腦力去辨別，擬物設計還能好點）。

視頻的暫停狀態很好辨別：視頻不再播放，導航欄和工具欄都為顯示狀態，而且會有廣告彈窗（廣告彈窗在這時竟然起到了積極的作用）；視頻為播放狀態時，可能會是全屏狀態，當視頻因速度或數據問題不再繼續播放時，一定要有反饋，例如顯示帶寬速度或告知可能出現的問題，沒有反饋的話，用戶會將這種情況和暫停狀態混淆。

2.4 滑塊和2個時間

滑軌和滑塊應該是觀看視頻時十分重要的控件，它清晰地傳達了視頻的觀看進度，配合時間的顯示讓用戶十分明確該如果安排自己的活動。用戶也可以通過拖拽滑塊來使視頻快進或快退。

從圖2.1可以看出愛奇藝的滑軌是最長的，與橫屏等寬，增強了拖拽滑塊時的操作精度，但這樣做也使播放器在視覺上被切割地太明顯，視頻也被遮擋的更多；已播放時長和總時長也因此不能被放在滑軌的首尾兩側，弱化了這兩個時間與滑軌的相關性。對比圖1.2、圖2.1不難發現，愛奇藝在豎屏模式時并沒有讓滑軌與豎屏同寬，豎屏模式下，播放器的區域非常小，如果不這樣做的話，愛奇藝的兩個欄會擋住更多可觀看區域。

拖拽滑塊是一個高難度動作，因為滑塊尺寸非常小，而且為了保證觀看體驗，拖拽滑塊時視頻正常播放，拖拽滑塊的手指松開后，視頻才會快跳到對應的位置。這時適當提供視覺反饋能降低操作難度。視覺反饋可分為3種，一是讓滑塊在視覺上看起來更好點擊和按壓；二是讓用戶感知拖拽的精度，以便評估自己的拖拽幅度；三是要讓用戶知道他是否將視頻調整到了他想要的位置。如圖2.2所示，用戶在騰訊視頻里按壓滑塊時，滑塊外側疊加了一個直徑112px的半透明同心圓，模擬按鈕被按壓的效果，實現了上文說的第1種反饋；拖拽滑塊時，滑軌左邊的時間和界面中央顯示的時間讓用戶感知拖拽精度，是第2種反饋；播放器上還有個小窗顯示了拖拽位置的關鍵幀畫面，是第3種反饋，滑塊在滑軌上的位置也屬于第3種反饋。除此之外，因為導航欄與拖拽動作沒有關系，因此拖拽滑塊時，騰訊視頻隱藏了導航欄和狀態欄；并在播放器上蒙了一個半透明深色遮罩，讓用戶將注意力更集中在小窗口上和滑軌滑塊上。

從圖2.2可以看出，其它應用都只做到了1-2種反饋。有些app還會顯示左右的箭頭，很明顯是映射以前收音機上的快進和快退。用戶的拖拽滑塊動作比在收音機上點擊快進或快退按鍵更有沉浸感，用戶也不會混淆也不會特意去分辨他當前是在快進還是快退，用戶的目標是他要到達的地方，因此顯示快進快退的icon變的不再是必要。

無論視頻是暫停還是播放，用戶在完成拖拽后，視頻都要是播放狀態，這體現了一個應用是體貼的。

搜狐視頻和優酷除滑塊能拖拽之外，還在滑軌上放置了劇情的關鍵節點，用戶點擊滑軌上的小亮點便能呼出一個浮出層，點擊浮出層可以實現跳轉，如圖2.3所示。在使用體驗上，搜狐的小亮點真的非常難點，也很難看清點擊出來的浮層對應的是哪個小亮點；浮層與滑軌之間的距離太小，點擊其它小亮點時很容易就點到了浮層；浮層的尺寸太小，不易點擊。優酷的小亮點很好點擊，浮層尺寸也夠大，但浮層與滑軌的距離也是太小，很容易誤操作。我想這兩個app在后續更新中應該會優化這個功能。

2.5 左右滑動手勢

所有app都做了可以替代拖拽滑塊操作手勢，那就是手指的左右滑動，滑動方向與拖拽滑塊的方向一致，保持了很一致的映射關系。在騰訊視頻里左右滑動時的視覺反饋和拖拽滑塊時完全一樣，工具欄也還是會顯示。在愛奇藝和搜狐視頻里操作左右滑動手勢時的視覺反饋不影響上下欄的顯示狀態，因此在全屏狀態時左右滑動，欄是不會顯示的，看不到滑軌也就不太能評估究竟滑動到哪兒了，雖然有時間的顯示，但沒有滑軌好理解。愛奇藝和搜狐視頻的解決方案是乳圖2.4所示，在界面上顯示一個簡化樣式的進度條來替代滑軌，用戶可以通過這個簡化的進度條評估自己的動作幅度。

2.5 音量調節和亮度調節

調節音量的方式有2種：一種是按手機上的音量物理按鍵，另一種是在播放器上使用上下方向的滑動手勢。兩種方式適應不同的需求，物理按鍵可以準確調節音量到滿意的位置；滑動手勢可以快速地讓音量調節到最大或最小。

調節亮度的方式有3種：手機屏幕適應環境光來自動調節亮度；喚起手機的控制中心調節亮度滑塊；在播放器上使用上下方向的滑動手勢。自動調節的方式是隱形的設計，對用戶是0負擔，因此大部分用戶會聽由屏幕亮度的自動調節；當亮度自動調節的結果滿足不了用戶時，肯定就要啟動后兩種交互方式了，控制中心的喚起會打斷視頻觀看，而且在橫屏模式下喚起的操作比較難（而且可能會誤啟動上下滑動手勢），相比之下，滑動手勢就比較好操作了。

音量和亮度調節都需要上下滑動手勢，為了讓一個手勢在一個情景里實現2種功能，在播放器右側上下滑動來調節音量，在左側調節亮度，已經成了通用的解決方案。很顯然，這是默認用戶全部為右手用戶，將高頻的音量調節交互區域放在右手操作的舒適區；將低頻的亮度調節放在右手的偏僻區，或由左手完成。在用戶第一次打開播放器的時候，會看到寫著這個交互說明的浮層，但說實話，要不是為了寫這篇文章，我早就忘了原來在播放器里面也可以調節亮度呢。

無論從人體工程學還是從用戶使用頻率數據上來看，左右分區的上下滑動手勢都是沒有問題的，但是小編認為這種方式對應的視覺反饋有待完善。調節音量和亮度時，除了聲音和亮度本身反饋，很多應用會調用系統自帶的UI反饋控件。這種控件很大而且顯示在屏幕的正中間，真的擋住很多空間呢。除此之外，這種反饋控件上的刻度調節是左右方向的，和用戶的手勢方向不匹配。搜狐視頻則是使用了兩組自定義的視覺反饋控件，但擺放位置和顯示邏輯與系統標準控件一樣，只是擋住播放器的區域變得比較小，也與應用的整體形成了設計上的統一。小編很喜歡像每日開眼設計的音量調節視覺反饋控件，它顯示在播放器的左側邊上，既提供了反饋又沒有擋住播放器的中間位置。但很遺憾，開眼在播放器里沒有提供亮度調節，上下滑動手勢只能調節亮度，這種顯示在播放器側邊的視覺反饋只適用于上下滑動手勢擁有單一定義時。當有2種定義時，這種布局方式的問題也非常多。小編沒有更好的主意，不知道各位同仁對于這個問題有什么更好的想法?；蛟S我提出的需求是吹毛求疵，也可能這就是設計很難兩全齊美的例子。

很多應用嘗試在橫屏模式里喚起一個類似系統控制中心但又不會打斷視頻的浮層，以此來解決小編的問題，會在后面的2.10節里詳細闡述。

2.6 下一集

這是唯一一個讓小編不知道該說點什么的按鈕，嗯，真的很尷尬呢。統一被放在了暫停／播放按鈕的右側。當視頻類型是電影時也會有這個按鈕，真不知道它的下一個是什么呢。

2.7 清晰度

清晰度能決定觀看體驗的好壞，因此也是一個付費點。藍光級別都是會員專屬，騰訊視頻將每個等級的分辨率數值都標注了出來，進一步刺激用戶去購買會員。

2.8 選集

點擊選集按鈕會呼出一個浮層顯示所有的劇集按鈕，有時一屏可能放不下，因此在用戶打開浮層時，應該讓當前播放的劇集按鈕顯示在屏幕內。騰訊和搜狐視頻做到了這一點，盡管實現方式不一樣，搜狐視頻降低了難度將劇集按鈕做了分頁處理。愛奇藝的這個功能有些bug，要滑動一下才會出現當前劇集按鈕。芒果TV的這個功能做得也很好，只不過選集浮層比較像綜藝節目，劇集按鈕很大，而且是圖片按鈕帶著長文字，雖然增加了用戶選集時的滑動幅度，但也提供了更多的信息，讓用戶比較確定究竟要看哪一集。

2.9 鎖屏

芒果TV、愛奇藝和搜狐視頻都在播放器的左側放置了鎖屏按鈕。鎖屏之后，無法點擊其它功能按鈕，和手機鎖屏一樣。但是在什么情景下使用這個功能呢？播放器上所有的按鈕及功能設計讓打斷或影響視頻播放的操作都是有行為成本的，產生視頻中斷或退出的誤操作可能性比較小。除非在很擁擠很擁擠的地鐵里，或者在很顛很晃的公交車上。小編還假設了一個場景，是不是有可能我在擦地的時候還想聽著視頻，因此要把手機放在衣服口袋里，這時也能用到鎖屏吧？

2.10 更多功能

騰訊視頻、愛奇藝、搜狐視頻都有更多功能的按鈕，點擊會呼出一個包含多個功能的浮出層，不影響視頻正常播放。騰訊視頻在面板里放置了音量和亮度的調節，可以彌補2.5節里說的現有的設計缺陷，很有代替手機的控制中心的味道，適合用戶深度探索。但是這個更多按鈕的樣式太低調了，我覺得可以參考最新MacbookPro的TouchBar上對于各種多媒體調節按鈕的管理方式，當然這樣一來，這個面板里就不適合放其它功能比如緩存。愛奇藝的這個面板里沒有音量調節，看來是不認同2.5節里提到的設計缺陷。

在騰訊視頻的更多功能浮層里拖拽音量滑塊時，系統標準視覺反饋控件被喚起；拖拽愛奇藝的亮度滑塊時，也調用了系統視覺反饋控件。這都是沒有必要的二次顯示，這個細節兩家都沒有處理好呢。

2.11 投屏

投屏功能真的是小編的摯愛，可以在更大屏幕上觀看視頻，關鍵還沒廣告?。?！愛奇藝、騰訊視頻和優酷都有投屏功能，但前提是被投屏設備開啟時才會顯示此功能，要不然你永遠都會看不到這個按鈕哦～在豎屏模式里也提到了，愛奇藝在廣告播放時就可以投屏，其它應用是必須觀看完廣告后才能投屏呢。

2.12 彈幕

除了芒果TV外，其它幾家視頻app都有彈幕功能，且都改良了顯示方式，彈幕只會占據屏幕的一部分，或者分批顯示，不會像B站那樣占據整個屏幕。

打開彈幕才可以輸入彈幕，圖2.10可以看出，輸入彈幕時的鍵盤模式，愛奇藝和搜狐視頻都處理地很好。搜狐視頻在輸入彈幕頁面算是下了功夫，但是彈幕開啟和關閉的交互做得很不好，在這里不截圖顯示了，大家體驗一下就知道了。

2.13 截屏和錄屏

騰訊視頻和優酷有截屏和錄屏的功能，UI布局和交互流程有比較明顯的差異。騰訊視頻將截屏和錄屏按鈕并列顯示在播放器右側；優酷的右側只有一個剪刀樣式的icon，點擊能顯示兩個二級按鈕，截屏和錄屏。這么做增加了點擊成本，操作路徑太長。

點擊騰訊視頻的截屏按鈕，播放器會有閃爍效果，如圖2.11原型圖所示，截下的圖片會以一個浮層的形式顯示在截屏按鈕左側，如果應用自動切換到全屏模式之前，用戶都沒有點擊浮層，那么浮層消失，截圖丟失；如果點擊浮層會呼出若干分享按鈕。整個過程不會打斷視頻觀看，但存在一些問題。騰訊視頻并沒有將截圖保存在手機本地相冊，那么想要使用或看到這張圖片只能通過分享的方式，也就是說從產品角度假設的場景是，用戶截圖就是為了分享。但截屏之后并沒有強制將用戶帶到分享界面，而是讓用戶有所選擇，這就弱化了截圖和分享操作之間的關系。除此之外，這個流程也導致用戶在截圖后無法再次查看截圖，當然我想這只是這個流程的結果，不是設計這個流程的目的。

相比之下，優酷選擇了比較穩的做法，如圖2.12所示。點擊截屏后視頻被暫停，應用被一個模態視圖占據，視圖上顯示截取圖片和分享平臺按鈕，建立了截屏和分享的強關系。但是，優酷將截屏圖片保存到了本地相冊，小編認為有點畫蛇添足了。如果說截圖就是為了分享，那么如果用戶沒有分享截圖，那這張截圖自然沒有保留的意義；如果用戶將這張截圖分享出去，那這張截圖的使命也就完成了，把它保存在手機相冊就沒有意義了。按照這個立場去分析，不保存截圖的做法可能合適一些。小編認為這個細節的處理沒有絕對的對錯，只是產品思路不同而已，小伙伴們也可以談談不同的看法。

再來看看錄屏流程。騰訊視頻的錄屏至少錄3秒，最多錄9秒。因此點擊錄屏按鈕后，前3秒時只有取消操作；錄滿3秒之后，用戶既能取消，又能點擊完成，也可以等待自動錄制完畢。錄屏完成后，播放器會被暫停，播放器上會顯示一個模態視圖，視圖上有一個小窗口循環播放著剛剛錄屏的內容以及分享按鈕，同時應用在后臺進行視頻截取和壓縮操作，截取完成后也會告知用戶，用戶這時才可以分享。這個時間很短，并且用戶在這個時間段會先看看錄的內容，不太可能立刻去分享，所以這個截取過程還是可以接受的。分享完成后返回騰訊視頻app，播放器恢復播放，并且會從剛剛錄屏的起始時間點播放。騰訊視頻的錄屏功能雖然不是剛需，但我覺得因開發的十分流暢，反饋效果做的也很好，搞不好會成為高頻操作。

優酷的錄屏操作需要長按錄屏按鈕，流程如圖2.14所示。小編來說說用長按來錄屏的缺點。長按手勢是個難度系數較高的動作，通常將這一手勢用于用戶可能會因不小心的點擊而產生不可逆轉的誤操作的時候，例如ios里使用長按應用圖標來卸載或移動應用。應用肯定是鼓勵用戶多多使用錄屏功能，但長按手勢會增大交互難度，反而起到反作用。例如，優酷也設置了錄制最小時長，但如果用戶按壓時間不足時肯定是無法完成錄制的，用戶此時可以繼續長按錄屏按鈕，但在剛剛的過程中，視頻一直是正常播放的，第二次錄制肯定不能接著第一次錄的那一段繼續錄制，而是重新錄制，如果還想從第一次按壓時的那個時間點開始錄的話，必須退出錄制模式，將視頻后退到滿意的位置再重新錄制。為了盡可能避免這種情況出現，優酷將可錄制的最小時長設置為1秒，但小編認為這彌補不了長按操作的難度。長按錄屏按鈕時，按鈕樣式沒有任何狀態的變化，再次降低了可用性。

2.14 騰訊視頻的只看TA

騰訊視頻做了一個按演員來篩選內容的功能，叫“只看TA”?？梢灾豢幢炯哪兄?、只看女主或者男女主對手戲。但只有幾個熱播劇或自制劇有這個功能，挺好玩的，可以試一下，但是呢人物太多的段落可能就分不出來了。這個需求是否有必要，小編認為有待時間的檢驗。流程見圖2.15所示。

3. 離線下載

離線下載也可以被稱為離線緩存，指的就是用戶可以在wifi條件下將視頻下載到本地，供非wifi條件下觀看，下載好的內容通常都放在“我的”標簽頁里。并不是所有的視頻內容都可以離線下載，例如只有VIP才能觀看的內容，即使是VIP也無法下載。離線下載下來的視頻也不是永遠都可以離線觀看，可能會有可觀看時間區間。離線下載是個重要且復雜的流程，設計細節非常多，改天可以單開一個篇幅來說說。在這里只說一個點，就是在豎屏模式時，點擊下載按鈕后的頁面打開方式。

點擊下載按鈕后，騰訊視頻和愛奇藝會新開一個頁面來顯示所有的劇集按鈕，用戶在這個頁面決定緩存哪一集，也可以選擇緩存的清晰度。由于是新開頁面，此時處在前一級頁面的播放器會被暫停。

在芒果TV和搜狐視頻里點擊下載時不會新開一頁，而是在當前頁面彈出一個面板，播放器的播放狀態不會被打斷。芒果TV彈出的是一個模態面板，用戶不能操作播放器，播放器的顯示區域被縮小，使播放器和這個模態面板的前后關系十分清晰，點擊選集面板之外的區域，便可退出當前模態。但是在這個模態面板里點擊清晰度時，又會再次喚起一個模態面板，這種雙重模態面板的方式不是ios用戶手冊指南里鼓勵的做法，但是如果不這樣做的話可能也沒有更好的辦法。比如將幾個清晰度以按鈕的樣式擺放在這個面板上方，那面板需要的高度更多，且分散用戶注意力的交互控件也就越多。

點擊搜狐視頻的下載按鈕，喚起的面板是個非模態面板，用戶仍然可以操作播放器。下載功能本身不是一個復雜流程（復雜的是管理下載內容），因此不用太擔心非模態方式會讓用戶不聚焦任務，但是關閉這個面板的提示不是特別明顯。

手機沒有網絡情況下觀看離線視頻，只有橫屏模式，沒有豎屏模式，因為豎屏模式除了播放器以外顯示的字段都需要網絡連接。觀看離線視頻時，點擊“選集”按鈕，選集面板里應該只顯示已經下載了的劇集，這是個很小的細節，但只有愛奇藝做到了。

4. 聲音相關

在第1部分里就提到過和聲音相關的交互，視頻播放時，聲音是不受手機硬件靜音按鈕的限制的。

用戶佩戴耳機使用多媒體應用時屬于個人私密行為，在拔掉耳機后，一定不會想讓別人也聽到自己剛才聽到的內容。因此用戶在觀看視頻時將耳機拔出，將視頻暫停是比較合理的做法，本文分析的app里，只有愛奇藝和優酷做到了這一點；如果視頻是暫停狀態，耳機插入時，應該自動被播放，只有優酷做到了這一點。

5. 歷史播放

應用再次啟動時，都會在主屏提醒用戶是否要繼續觀看上一次的觀看內容。在圖5.1中為了讓大家更看得更清晰，小編弱化了通知欄之外的區域。4個app采用的形式是一樣的，應用啟動后用一個通知欄來提醒用戶，通知欄停留一段時間后會自動消失。這與手機處理通知的方式是一致的。

優酷、愛奇藝和搜狐視頻的通知欄都遮擋了底部的界面，因此優酷和愛奇藝的通知欄上都有關閉按鈕；騰訊視頻的通知欄是臨時占用的一部分空間，并沒有擋住任何界面，因此沒有關閉按鈕。

在顯示的信息上，騰訊視頻顯示的信息最多，有剩余時間的顯示，但優先級不高，在最末端，很可能會因一個長標題而顯示不出來。愛奇藝的關閉按鈕和繼續播放文案的距離太近，這兩者是反相關，在布局上不應該挨在一起。

騰訊視頻啟動后，通知欄才顯示，而且顯示的過程是從上向下的位移，主屏的內容（除頂部導航欄、狀態欄和底部的標簽欄）也都被整體的順次向下做了位移，使通知欄更能引起用戶的注意力。雖然愛奇藝和搜狐視頻也對通知欄添加了動態漸入動畫，但還是沒有騰訊視頻整體的位移更能引起關注。

6.一些交互細節

豎屏模式下，視頻剛開始播放時導航欄和工具欄的狀態是顯示還是隱藏，各個app處理得不一樣，如圖6.1可以看到，騰訊視頻和搜狐視頻默認是先讓欄顯示，芒果TV和愛奇藝是直接讓欄隱藏。小編認為，如果在豎屏模式里最先做的是切換到橫屏的用戶更多，那么豎屏模式默認顯示欄還是有必要的（如果用戶關閉了屏幕自動旋轉，小編的這個按鈕就是長年關閉狀態）。同理，如果在豎屏模式里默認顯示欄，那么切換到橫屏之后仍然顯示欄可以讓界面顯示統一，也讓用戶看到更多的功能；但這也是一種干擾，畢竟用戶用橫屏是為了更好的享受觀看體驗，而不是為了查看更多的功能，因此豎屏切換到橫屏時，要讓欄顯示還是隱藏取決于產品定位。

上一段提到了，從豎屏切換到橫屏時，騰訊視頻和搜狐視頻會默認顯示欄，那么在屏幕翻轉的過程中，欄是怎樣翻轉的也是一個細節（芒果TV和愛奇藝在此處便可以巧妙的躲過這個細節）。如圖6.2所示，是騰訊視頻屏幕翻轉時的細節展示，豎屏會先黑屏一下，然后翻轉成橫屏，翻轉過程中欄一直顯示，且也跟著翻轉；如圖6.3所示是搜狐視頻的屏幕翻轉，搜狐視頻在翻轉過程中沒有黑屏閃爍的現象，但是翻轉過程中沒有顯示欄，直到播放器翻轉完成后，欄才顯示。兩種不同的實現方式可能和技術相關，小編的個人感覺是騰訊視頻翻轉時黑屏閃一下的效果不是很舒服。

7. 總結

到此為止，關于視頻app播放器部分的交互淺析全部結束。騰訊視頻、愛奇藝、搜狐視頻和優酷的播放器功能都已經非常完善，各有各的亮點和產品著重點，也有各自的缺點和不足；芒果TV的發展沒有前幾家那么久，因此目前提供的只是基礎必需功能，但現有的這些功能也都設計的還不錯；每日開眼是一個短視頻平臺，在產品戰略上和以上幾家有本質區別，因此在本系列文章中只是稍微帶過，但它仍然是小而美的產品。本系列分享就是這些，感謝您的耐心閱讀，如有問題或不同意見歡迎留言交流。

作者：bala198904

來源：http://www.ui.cn/detail/198023.html

版權：人人都是產品經理遵循行業規范，任何轉載的稿件都會明確標注作者和來源，若標注有誤，請聯系主編QQ：419293505