視頻app應(yīng)該是每個手機上的必裝應(yīng)用，而且一裝就是一打。雖然它不是什么新鮮產(chǎn)品形態(tài)，準確的說還很老，但是這幾年行業(yè)的改變思路還是很清晰的，比如付費會員制的推行和自制內(nèi)容的崛起。小編近幾個月每天輾轉(zhuǎn)在各個視頻app之間：打開搜狐看秦明，打開騰訊看蝸牛，打開愛奇藝看余罪，打開芒果TV看很多。于是便想和大家聊幾款主流視頻app在交互和產(chǎn)品方面的使用體驗。由于視頻平臺繼各大電商之后也成長為了超級app，功能繁復(fù)又強大，小編將以4個篇幅對6款app的視頻播放功能進行闡述，而且是非會員的情況下(主要是這樣可以吐槽一下廣告)。本文選擇騰訊視頻、愛奇藝、搜狐視頻和芒果TV進行界面整體的對比，在一些局部功能上會聊到優(yōu)酷和每日開眼。使用設(shè)備為iphone6，各軟件的版本號如圖0所示，雖然不全是最新版本，但在大版本層面也是比較新的了。本系列文章的敘述順序會從播放器的豎屏模式聊到橫屏，以及其它一些重要功能如緩存、耳機與視頻播放的交互等。
很巧的是，就在小編籌備本篇文章期間參加了一個行業(yè)峰會，峰會上移動研究院以6個維度對7款視頻app進行了評測，評測結(jié)果我會在文末展示給大家。 想提前聲明的是，由于每款應(yīng)用的產(chǎn)品定位服務(wù)用戶都不相同，因此在對比相似功能時，小編不會用絕對的對錯去評判設(shè)計的好壞，而是選擇“更合理”、“好一點”等詞匯去表達。各位同行如果有不同見解，歡迎提出，大家互相交流，不勝感激。
點擊信息流里的圖片按鈕會進入視頻播放頁面，默認布局都是非全屏模式，界面上半部分是播放器，播放器下面是輔助功能。播放器為播放狀態(tài)，聲音也是揚聲狀態(tài)(無論手機是否為靜音)。如果用戶本次觀看和上一次的觀看為同一個視頻，那么播放器不會播放廣告且直接跳到上一次結(jié)束觀看的位置繼續(xù)播放(但也不是每次都奏效，我猜測和數(shù)據(jù)記錄有關(guān)，如果上一次播放的數(shù)據(jù)因網(wǎng)絡(luò)問題沒有存儲成功，那么再次點擊還是會播廣告的)。如果用戶本次觀看不是上一次觀看的視頻且不是會員，播放器會放廣告。
1.1 廣告
廣告的時長與視頻長度相關(guān)，如果是預(yù)告片或者短新聞則廣告時間是15秒，如果是電視劇則可能是45、60、75、90、105或120秒不等。除此之外，觀看過程中間會插入15或30秒廣告，有時觀看結(jié)束后也會進入一小段廣告，然后才是下一集的片頭廣告(真是很逆天呢，也不知道誰起的頭，現(xiàn)在各平臺都這么做)。 從圖1.1可以看出，豎屏模式下4個app的播放器高度的差異非常小，但每個app處理系統(tǒng)狀態(tài)欄的方式很不一樣：芒果TV、騰訊和搜狐的播放器直接頂在屏幕頂部，芒果TV將狀態(tài)欄隱藏，騰訊和搜狐的播放器和狀態(tài)欄共享一個區(qū)域;愛奇藝的播放器則是讓出了狀態(tài)欄，從屏幕頂部下方20點處放置播放器。 播放廣告時，播放器上有若干交互按鈕，圖1.1中共有的6個界面元素是：返回按鈕 廣告剩余時長
通常顯示在開通會員按鈕上，有很強的相關(guān)性，告訴用戶開通會員可以免廣告。
開通會員按鈕
點擊進入會員購買頁面，購買完成后會回到視頻播放頁面且免掉廣告。
廣告鏈接
點擊播放器上除所有按鈕外的任意位置也可以跳轉(zhuǎn)到廣告產(chǎn)品購買頁面。
廣告靜音按鈕
點擊會使廣告靜音，但只影響廣告的聲音，不影響進入正片后的音量。
全屏按鈕
切換到全屏顯示。
從圖中可以看出，只有芒果TV的廣告剩余時長沒有和開通會員按鈕形成視覺相關(guān)性;愛奇藝除了上述的6個功能點之外還多了2個按鈕：一個是暫停按鈕，點擊此按鈕廣告被暫停，個人認為這個按鈕沒有存在的必要;另一個是投屏按鈕，在可被投影的設(shè)備為開啟狀態(tài)時就會顯示此按鈕，點擊可投射到大屏幕且不會播放廣告。其實騰訊視頻也有投屏的功能，只不過要在廣告播完才會顯示，真的很有心機呢。
1.2 豎屏播放器
圖1.2是播放視頻正片時播放器的布局，和播放廣告時一樣，播放器的上下兩側(cè)各有一欄，上側(cè)欄上有回到上一層級的返回按鈕和當前播放視頻的名稱和劇集數(shù)，因此稱上側(cè)欄為導(dǎo)航欄;下側(cè)欄上的若干按鈕用來操作和管理當前頁面內(nèi)容，因此稱下側(cè)欄為工具欄。由于這兩個欄和ios標準的導(dǎo)航欄和工具欄定義不是完全吻合，因此如果各位小伙伴有其它更恰當?shù)拿椒梢愿嬖V我。圖1.2中可看出，兩個欄上共有的4個界面元素是：
除此之外，騰訊視頻多了一個投屏按鈕;愛奇藝多了一個投屏和VR按鈕。 界面元素1，2，3協(xié)助用戶在非全屏?xí)r也能輕松完成觀看體驗，這3個控件對應(yīng)的需求是觀看體驗中的剛需;全屏、投屏和VR是切換至另一種觀看模式的入口。
導(dǎo)航欄和工具欄都有兩種狀態(tài)：顯示狀態(tài)、臨時地全部或部分隱藏狀態(tài)，輕擊操作可在兩個狀態(tài)間切換。4個app處理欄隱藏的方法都不太一樣：芒果TV把兩個欄全部隱藏，包括系統(tǒng)狀態(tài)欄;而其它3個應(yīng)用都一致保留了返回按鈕和狀態(tài)欄;搜狐視頻還顯示了播放進度。 騰訊視頻、愛奇藝和搜狐視頻將返回按鈕和欄上其它幾個交互控件做了很明顯的區(qū)分對待：如果用戶想離開，只需1次點擊;如果用戶想進行與觀看視頻有關(guān)的交互，需先將欄呼出，再進行操作，需2次點擊。這樣做使用戶不感興趣時不用付出更多的邊際成本，因此小編覺得在上下欄隱藏時顯示返回按鈕會好一些。 豎屏和全屏是截然不同的觀看決策，全屏使人心無旁騖;豎屏模式下用戶可以獲取其它更多的信息，用戶可以瀏覽書寫評論、查看演員信息等。因此狀態(tài)欄和播放進度條的顯示增加了用戶可感知的信息，和豎屏的使用場景不違和。 廣告播放結(jié)束后，導(dǎo)航欄和工具欄的顯示狀態(tài)也是個很重要的細節(jié)：騰訊視頻和搜狐視頻會顯示這兩個欄，停留數(shù)秒后進入臨時半隱藏狀態(tài);而愛奇藝和芒果TV則是在廣告播完后直接進入半(全)隱藏狀態(tài)，更多的功能沒有機會告知用戶。尤其是在芒果TV里，如果用戶想有所行動，但界面上也沒有任何提示讓用戶知道可以輕擊一下播放器來重新喚出導(dǎo)航欄和工具欄，這會讓用戶不知所措。
1.3 輔助功能 豎屏模式時，播放器的下面是一些輔助功能，從圖1.1可以看出芒果TV、騰訊和搜狐的布局邏輯清晰，并且在一屏內(nèi)(iphone6)就可以看到全部的主要功能;愛奇藝的貼片廣告占用了十分關(guān)鍵的空間，而且參演明星顯示在劇集的上面，導(dǎo)致在第一屏內(nèi)無法選集。其實搜狐視頻在這個頁面也放了廣告位，但是是隱藏在播放器下面，滑動可以拉出。4個app共有的6個界面元素是：內(nèi)容介紹，包括文案和數(shù)據(jù)、收藏、緩存、分享、評論。
劇集陣列：
視頻內(nèi)容是一個線性集合時才會有劇集陣列，單個視頻不會有。它用來顯示當前播放的是第幾集，用戶也可以點擊切換到其它集。 電視劇和綜藝節(jié)目的劇集按鈕的視覺表達很不一樣，電視劇按鈕的尺寸只要滿足44點就可以了，上面帶有數(shù)字和相關(guān)狀態(tài);而綜藝節(jié)目的按鈕會比較大，描述性文字比較多，可能還會顯示圖片。綜藝節(jié)目的做法讓用戶很容易就能評估想看哪一集或者哪一集已經(jīng)看過了，因此劇集陣列是十分重要的控件。
電視劇和綜藝節(jié)目的劇集陣列顯示方式也很不一樣，本篇只說電視劇的劇集陣列： 愛奇藝的電視劇將所有劇集按鈕分布在若干個標簽頁里，每個標簽頁放15個按鈕，比較占用空間但也讓用戶對還剩多少集沒有看等相關(guān)的情況比較有感知。這也是技術(shù)成本很小的做法。 其余3個應(yīng)用都是只用一行來顯示所有劇集，并提供了查看全部劇集的按鈕，點擊是全部劇集按鈕的平鋪樣式。劇集陣列只在一行顯示時，用戶可交互的動作為點擊和滑動。在芒果TV，點擊劇集時，劇集陣列不會自動向左滑動，因此當點擊當前最右側(cè)的劇集時，需要手動將陣列向左滑動平移才能查看更多劇集。騰訊視頻和搜狐視頻在用戶點擊中間偏右的劇集時，陣列就會向左平移，將更多的劇集顯示出來，因此，當前點擊的劇集總是在屏幕垂直居中的位置(但前幾集和后幾集無法這樣顯示)。平移過程要有被點擊按鈕的狀態(tài)刷新和平移動畫，這一點騰訊視頻做的很巧妙，用刷新來代替實時地平移，雖然不是實時平移，但是使用過程很流暢;而搜狐視頻做的是實時平移，但切換劇集時要處理的數(shù)據(jù)比較多，因此實現(xiàn)效果非?？?。此處明顯看出騰訊的產(chǎn)品經(jīng)理是如何用產(chǎn)品來規(guī)避技術(shù)難點的，值得我們大家學(xué)習(xí)。 劇集陣列上的按鈕有很多狀態(tài)：當前播放，更新狀態(tài)，預(yù)告片，已緩存到本地，VIP才能觀看等。
劇集按鈕上沒有記錄該集是否觀看過的狀態(tài)及觀看了多少時長，海淘科技小編認為原因有三點：首先，應(yīng)用默認大部分用戶都是順次觀看的，每次打開視頻時應(yīng)用都會接著上一次結(jié)束觀看的位置繼續(xù)播放，用戶不用去思考哪集看過、該從哪集開始看;其次，劇集陣列上的按鈕尺寸也不允許顯示如此多的信息;最后，和娛樂型內(nèi)容相比，深度學(xué)習(xí)型內(nèi)容更適合顯示完成百分比，例如得到app里的音頻文件和網(wǎng)易公開課里的視頻，就會顯示完成的百分比或時長。
點擊豎屏模式右下角的屏幕切換按鈕，播放器進入橫屏模式。橫屏的導(dǎo)航欄和工具欄包含的控件更豐富，除此之外，左右兩側(cè)也放置了按鈕控件。在橫屏模式下更容易辨別出各家的欄設(shè)計對觀看體驗的影響。美觀與可用性之間在這個巴掌大的空間里不是很好平衡。愛奇藝的滑塊設(shè)計使它必須使用邊界清晰的工具欄，邊界清晰的欄本可以增強欄上的按鈕的辨識度，但愛奇藝并沒有做到，因為icon的線條都太細了;搜狐視頻沒有填充欄的背景色，而是在視頻內(nèi)容上蓋上一整屏的半透明深色遮罩來凸顯欄;芒果TV和騰訊視頻使用漸變來填充欄背景色，看起來更通透。4種做法的交互方式都沒問題，只是視覺的不同，但具體哪一個更好地通過大量數(shù)據(jù)統(tǒng)計得出，所以這里就不妄下結(jié)論了。
橫屏模式里有全屏狀態(tài)，全屏狀態(tài)時導(dǎo)航欄、工具欄和狀態(tài)欄都臨時隱藏了起來，給用戶營造了心無旁騖的觀看環(huán)境。輕擊一下可以再次喚起這3個欄。 各家app的欄功能不完全相同，本篇和下一篇將按照共有功能和特色功能的順序?qū)?dǎo)航欄和工具欄進行敘述。
2.1返回按鈕
4家app在橫屏模式時都去掉了切換橫豎屏按鈕，因為點擊返回就是退出橫屏。除此之外，我猜測是因為全屏?xí)r的按鈕實在太多，自然不會放置兩個有同樣功能的按鈕。雖然返回按鈕和切換橫豎屏按鈕在視覺上沒有一個很好的關(guān)聯(lián)度，但是頁面層級關(guān)系比較容易讓用戶理解。有趣的是，優(yōu)酷在全屏?xí)r保留了右下角的退出全屏按鈕。
2.2頁面標題
橫屏模式所有的導(dǎo)航欄上都顯示了頁面標題，也就是當前播放的劇集名稱和劇集數(shù)，但位置是在返回按鈕的右側(cè)。ios用戶界面手冊里提到過，要將前一層級的標題顯示在返回按鈕右側(cè)(如果可以放下的話)，這樣返回按鈕才更有意義。很顯然，這些視頻app都沒有遵循這一準則，這也是我在第一篇里說過的，稱上側(cè)欄為導(dǎo)航欄不那么恰當?shù)脑颉１M管如此，現(xiàn)在的布局更好看，用戶根據(jù)劇集數(shù)也知道返回按鈕右側(cè)的文字就是本頁標題。
2.3 暫停/播放按鈕
暫停和播放是同一個按鈕的兩種切換顯示狀態(tài)，位置在左下角。 設(shè)計理論是不贊成在一個頁面內(nèi)1個控件上切換2個功能的，但是數(shù)字設(shè)備上的暫停和播放卻可以很好違背這種觀點。原因一是數(shù)字設(shè)備可以在同一個區(qū)域顯示不同的狀態(tài)，表達邏輯上是不會出錯的，這是物理設(shè)備做不到的(例如收音機);原因二，用戶可以很輕松地辨別多媒體內(nèi)容的播放和暫停狀，要切換狀態(tài)時只知道就按那個按鈕就對了。如果放置2個按鈕在界面上，用戶要結(jié)合視頻的狀態(tài)去在兩個按鈕之間辨別該按哪一個(即使讓一個按鈕為禁用狀態(tài)，另一個為可用狀態(tài)，用戶也還是要費腦力去辨別，擬物設(shè)計還能好點)。
視頻的暫停狀態(tài)很好辨別：視頻不再播放，導(dǎo)航欄和工具欄都為顯示狀態(tài)，而且會有廣告彈窗(廣告彈窗在這時竟然起到了積極的作用);視頻為播放狀態(tài)時，可能會是全屏狀態(tài)，當視頻因速度或數(shù)據(jù)問題不再繼續(xù)播放時，一定要有反饋，例如顯示帶寬速度或告知可能出現(xiàn)的問題，沒有反饋的話，用戶會將這種情況和暫停狀態(tài)混淆。
2.4 滑塊和2個時間
滑軌和滑塊應(yīng)該是觀看視頻時十分重要的控件，它清晰地傳達了視頻的觀看進度，配合時間的顯示讓用戶十分明確該如果安排自己的活動。用戶也可以通過拖拽滑塊來使視頻快進或快退。 從圖2.1可以看出愛奇藝的滑軌是最長的，與橫屏等寬，增強了拖拽滑塊時的操作精度，但這樣做也使播放器在視覺上被切割地太明顯，視頻也被遮擋的更多;已播放時長和總時長也因此不能被放在滑軌的首尾兩側(cè)，弱化了這兩個時間與滑軌的相關(guān)性。對比圖1.2、圖2.1不難發(fā)現(xiàn)，愛奇藝在豎屏模式時并沒有讓滑軌與豎屏同寬，豎屏模式下，播放器的區(qū)域非常小，如果不這樣做的話，愛奇藝的兩個欄會擋住更多可觀看區(qū)域。 拖拽滑塊是一個高難度動作，因為滑塊尺寸非常小，而且為了保證觀看體驗，拖拽滑塊時視頻正常播放，拖拽滑塊的手指松開后，視頻才會快跳到對應(yīng)的位置。這時適當提供視覺反饋能降低操作難度。視覺反饋可分為3種，一是讓滑塊在視覺上看起來更好點擊和按壓;二是讓用戶感知拖拽的精度，以便評估自己的拖拽幅度;三是要讓用戶知道他是否將視頻調(diào)整到了他想要的位置。如圖2.2所示，用戶在騰訊視頻里按壓滑塊時，滑塊外側(cè)疊加了一個直徑112px的半透明同心圓，模擬按鈕被按壓的效果，實現(xiàn)了上文說的第1種反饋;拖拽滑塊時，滑軌左邊的時間和界面中央顯示的時間讓用戶感知拖拽精度，是第2種反饋;播放器上還有個小窗顯示了拖拽位置的關(guān)鍵幀畫面，是第3種反饋，滑塊在滑軌上的位置也屬于第3種反饋。除此之外，因為導(dǎo)航欄與拖拽動作沒有關(guān)系，因此拖拽滑塊時，騰訊視頻隱藏了導(dǎo)航欄和狀態(tài)欄;并在播放器上蒙了一個半透明深色遮罩，讓用戶將注意力更集中在小窗口上和滑軌滑塊上。 從圖2.2可以看出，其它應(yīng)用都只做到了1-2種反饋。有些app還會顯示左右的箭頭，很明顯是映射以前收音機上的快進和快退。用戶的拖拽滑塊動作比在收音機上點擊快進或快退按鍵更有沉浸感，用戶也不會混淆也不會特意去分辨他當前是在快進還是快退，用戶的目標是他要到達的地方，因此顯示快進快退的icon變的不再是必要。 無論視頻是暫停還是播放，用戶在完成拖拽后，視頻都要是播放狀態(tài)，這體現(xiàn)了一個應(yīng)用是體貼的。
搜狐視頻和優(yōu)酷除滑塊能拖拽之外，還在滑軌上放置了劇情的關(guān)鍵節(jié)點，用戶點擊滑軌上的小亮點便能呼出一個浮出層，點擊浮出層可以實現(xiàn)跳轉(zhuǎn)，如圖2.3所示。在使用體驗上，搜狐的小亮點真的非常難點，也很難看清點擊出來的浮層對應(yīng)的是哪個小亮點;浮層與滑軌之間的距離太小，點擊其它小亮點時很容易就點到了浮層;浮層的尺寸太小，不易點擊。優(yōu)酷的小亮點很好點擊，浮層尺寸也夠大，但浮層與滑軌的距離也是太小，很容易誤操作。我想這兩個app在后續(xù)更新中應(yīng)該會優(yōu)化這個功能。
2.5 左右滑動手勢
所有app都做了可以替代拖拽滑塊操作手勢，那就是手指的左右滑動，滑動方向與拖拽滑塊的方向一致，保持了很一致的映射關(guān)系。在騰訊視頻里左右滑動時的視覺反饋和拖拽滑塊時完全一樣，工具欄也還是會顯示。在愛奇藝和搜狐視頻里操作左右滑動手勢時的視覺反饋不影響上下欄的顯示狀態(tài)，因此在全屏狀態(tài)時左右滑動，欄是不會顯示的，看不到滑軌也就不太能評估究竟滑動到哪兒了，雖然有時間的顯示，但沒有滑軌好理解。愛奇藝和搜狐視頻的解決方案是乳圖2.4所示，在界面上顯示一個簡化樣式的進度條來替代滑軌，用戶可以通過這個簡化的進度條評估自己的動作幅度。
2.5 音量調(diào)節(jié)和亮度調(diào)節(jié)
調(diào)節(jié)音量的方式有2種：一種是按手機上的音量物理按鍵，另一種是在播放器上使用上下方向的滑動手勢。兩種方式適應(yīng)不同的需求，物理按鍵可以準確調(diào)節(jié)音量到滿意的位置;滑動手勢可以快速地讓音量調(diào)節(jié)到最大或最小。 調(diào)節(jié)亮度的方式有3種：手機屏幕適應(yīng)環(huán)境光來自動調(diào)節(jié)亮度;喚起手機的控制中心調(diào)節(jié)亮度滑塊;在播放器上使用上下方向的滑動手勢。自動調(diào)節(jié)的方式是隱形的設(shè)計，對用戶是0負擔，因此大部分用戶會聽由屏幕亮度的自動調(diào)節(jié);當亮度自動調(diào)節(jié)的結(jié)果滿足不了用戶時，肯定就要啟動后兩種交互方式了，控制中心的喚起會打斷視頻觀看，而且在橫屏模式下喚起的操作比較難(而且可能會誤啟動上下滑動手勢)，相比之下，滑動手勢就比較好操作了。 音量和亮度調(diào)節(jié)都需要上下滑動手勢，為了讓一個手勢在一個情景里實現(xiàn)2種功能，在播放器右側(cè)上下滑動來調(diào)節(jié)音量，在左側(cè)調(diào)節(jié)亮度，已經(jīng)成了通用的解決方案。很顯然，這是默認用戶全部為右手用戶，將高頻的音量調(diào)節(jié)交互區(qū)域放在右手操作的舒適區(qū);將低頻的亮度調(diào)節(jié)放在右手的偏僻區(qū)，或由左手完成。
在用戶第一次打開播放器的時候，會看到寫著這個交互說明的浮層，但說實話，要不是為了寫這篇文章，我早就忘了原來在播放器里面也可以調(diào)節(jié)亮度呢。 無論從人體工程學(xué)還是從用戶使用頻率數(shù)據(jù)上來看，左右分區(qū)的上下滑動手勢都是沒有問題的，但是小編認為這種方式對應(yīng)的視覺反饋有待完善。調(diào)節(jié)音量和亮度時，除了聲音和亮度本身反饋，很多應(yīng)用會調(diào)用系統(tǒng)自帶的UI反饋控件。這種控件很大而且顯示在屏幕的正中間，真的擋住很多空間呢。除此之外，這種反饋控件上的刻度調(diào)節(jié)是左右方向的，和用戶的手勢方向不匹配。搜狐視頻則是使用了兩組自定義的視覺反饋控件，但擺放位置和顯示邏輯與系統(tǒng)標準控件一樣，只是擋住播放器的區(qū)域變得比較小，也與應(yīng)用的整體形成了設(shè)計上的統(tǒng)一。
小編很喜歡像每日開眼設(shè)計的音量調(diào)節(jié)視覺反饋控件，它顯示在播放器的左側(cè)邊上，既提供了反饋又沒有擋住播放器的中間位置。但很遺憾，開眼在播放器里沒有提供亮度調(diào)節(jié)，上下滑動手勢只能調(diào)節(jié)亮度，這種顯示在播放器側(cè)邊的視覺反饋只適用于上下滑動手勢擁有單一定義時。當有2種定義時，這種布局方式的問題也非常多。小編沒有更好的主意，不知道各位同仁對于這個問題有什么更好的想法?；蛟S我提出的需求是吹毛求疵，也可能這就是設(shè)計很難兩全齊美的例子。
很多應(yīng)用嘗試在橫屏模式里喚起一個類似系統(tǒng)控制中心但又不會打斷視頻的浮層，以此來解決小編的問題，會在后面的2.10節(jié)里詳細闡述。
2.6 下一集 這是唯一一個讓小編不知道該說點什么的按鈕，嗯，真的很尷尬呢。統(tǒng)一被放在了暫停/播放按鈕的右側(cè)。當視頻類型是電影時也會有這個按鈕，真不知道它的下一個是什么呢。
2.7 清晰度 清晰度能決定觀看體驗的好壞，因此也是一個付費點。藍光級別都是會員專屬，騰訊視頻將每個等級的分辨率數(shù)值都標注了出來，進一步刺激用戶去購買會員。
2.8 選集 點擊選集按鈕會呼出一個浮層顯示所有的劇集按鈕，有時一屏可能放不下，因此在用戶打開浮層時，應(yīng)該讓當前播放的劇集按鈕顯示在屏幕內(nèi)。騰訊和搜狐視頻做到了這一點，盡管實現(xiàn)方式不一樣，搜狐視頻降低了難度將劇集按鈕做了分頁處理。愛奇藝的這個功能有些bug，要滑動一下才會出現(xiàn)當前劇集按鈕。芒果TV的這個功能做得也很好，只不過選集浮層比較像綜藝節(jié)目，劇集按鈕很大，而且是圖片按鈕帶著長文字，雖然增加了用戶選集時的滑動幅度，但也提供了更多的信息，讓用戶比較確定究竟要看哪一集。
2.9 鎖屏 芒果TV、愛奇藝和搜狐視頻都在播放器的左側(cè)放置了鎖屏按鈕。鎖屏之后，無法點擊其它功能按鈕，和手機鎖屏一樣。但是在什么情景下使用這個功能呢?播放器上所有的按鈕及功能設(shè)計讓打斷或影響視頻播放的操作都是有行為成本的，產(chǎn)生視頻中斷或退出的誤操作可能性比較小。除非在很擁擠很擁擠的地鐵里，或者在很顛很晃的公交車上。小編還假設(shè)了一個場景，是不是有可能我在擦地的時候還想聽著視頻，因此要把手機放在衣服口袋里，這時也能用到鎖屏吧?
2.10 更多功能 騰訊視頻、愛奇藝、搜狐視頻都有更多功能的按鈕，點擊會呼出一個包含多個功能的浮出層，不影響視頻正常播放。騰訊視頻在面板里放置了音量和亮度的調(diào)節(jié)，可以彌補2.5節(jié)里說的現(xiàn)有的設(shè)計缺陷，很有代替手機的控制中心的味道，適合用戶深度探索。但是這個更多按鈕的樣式太低調(diào)了，我覺得可以參考最新MacbookPro的TouchBar上對于各種多媒體調(diào)節(jié)按鈕的管理方式，當然這樣一來，這個面板里就不適合放其它功能比如緩存。愛奇藝的這個面板里沒有音量調(diào)節(jié)，看來是不認同2.5節(jié)里提到的設(shè)計缺陷。 在騰訊視頻的更多功能浮層里拖拽音量滑塊時，系統(tǒng)標準視覺反饋控件被喚起;拖拽愛奇藝的亮度滑塊時，也調(diào)用了系統(tǒng)視覺反饋控件。這都是沒有必要的二次顯示，這個細節(jié)兩家都沒有處理好呢。
2.11 投屏 投屏功能真的是小編的摯愛，可以在更大屏幕上觀看視頻，關(guān)鍵還沒廣告!!!愛奇藝、騰訊視頻和優(yōu)酷都有投屏功能，但前提是被投屏設(shè)備開啟時才會顯示此功能，要不然你永遠都會看不到這個按鈕哦～在豎屏模式里也提到了，愛奇藝在廣告播放時就可以投屏，其它應(yīng)用是必須觀看完廣告后才能投屏呢。
2.12 彈幕 除了芒果TV外，其它幾家視頻app都有彈幕功能，且都改良了顯示方式，彈幕只會占據(jù)屏幕的一部分，或者分批顯示，不會像B站那樣占據(jù)整個屏幕。 打開彈幕才可以輸入彈幕，圖2.10可以看出，輸入彈幕時的鍵盤模式，愛奇藝和搜狐視頻都處理地很好。搜狐視頻在輸入彈幕頁面算是下了功夫，但是彈幕開啟和關(guān)閉的交互做得很不好，在這里不截圖顯示了，大家體驗一下就知道了。
2.13 截屏和錄屏 騰訊視頻和優(yōu)酷有截屏和錄屏的功能，UI布局和交互流程有比較明顯的差異。騰訊視頻將截屏和錄屏按鈕并列顯示在播放器右側(cè);優(yōu)酷的右側(cè)只有一個剪刀樣式的icon，點擊能顯示兩個二級按鈕，截屏和錄屏。這么做增加了點擊成本，操作路徑太長。 點擊騰訊視頻的截屏按鈕，播放器會有閃爍效果，如圖2.11原型圖所示，截下的圖片會以一個浮層的形式顯示在截屏按鈕左側(cè)，如果應(yīng)用自動切換到全屏模式之前，用戶都沒有點擊浮層，那么浮層消失，截圖丟失;如果點擊浮層會呼出若干分享按鈕。整個過程不會打斷視頻觀看，但存在一些問題。騰訊視頻并沒有將截圖保存在手機本地相冊，那么想要使用或看到這張圖片只能通過分享的方式，也就是說從產(chǎn)品角度假設(shè)的場景是，用戶截圖就是為了分享。但截屏之后并沒有強制將用戶帶到分享界面，而是讓用戶有所選擇，這就弱化了截圖和分享操作之間的關(guān)系。除此之外，這個流程也導(dǎo)致用戶在截圖后無法再次查看截圖，當然我想這只是這個流程的結(jié)果，不是設(shè)計這個流程的目的。
相比之下，優(yōu)酷選擇了比較穩(wěn)的做法，如圖2.12所示。點擊截屏后視頻被暫停，應(yīng)用被一個模態(tài)視圖占據(jù)，視圖上顯示截取圖片和分享平臺按鈕，建立了截屏和分享的強關(guān)系。但是，優(yōu)酷將截屏圖片保存到了本地相冊，小編認為有點畫蛇添足了。如果說截圖就是為了分享，那么如果用戶沒有分享截圖，那這張截圖自然沒有保留的意義;如果用戶將這張截圖分享出去，那這張截圖的使命也就完成了，把它保存在手機相冊就沒有意義了。按照這個立場去分析，不保存截圖的做法可能合適一些。小編認為這個細節(jié)的處理沒有絕對的對錯，只是產(chǎn)品思路不同而已，小伙伴們也可以談?wù)劜煌目捶ā?
再來看看錄屏流程。騰訊視頻的錄屏至少錄3秒，最多錄9秒。因此點擊錄屏按鈕后，前3秒時只有取消操作;錄滿3秒之后，用戶既能取消，又能點擊完成，也可以等待自動錄制完畢。錄屏完成后，播放器會被暫停，播放器上會顯示一個模態(tài)視圖，視圖上有一個小窗口循環(huán)播放著剛剛錄屏的內(nèi)容以及分享按鈕，同時應(yīng)用在后臺進行視頻截取和壓縮操作，截取完成后也會告知用戶，用戶這時才可以分享。這個時間很短，并且用戶在這個時間段會先看看錄的內(nèi)容，不太可能立刻去分享，所以這個截取過程還是可以接受的。分享完成后返回騰訊視頻app，播放器恢復(fù)播放，并且會從剛剛錄屏的起始時間點播放。騰訊視頻的錄屏功能雖然不是剛需，但我覺得因開發(fā)的十分流暢，反饋效果做的也很好，搞不好會成為高頻操作。
優(yōu)酷的錄屏操作需要長按錄屏按鈕，流程如圖2.14所示。小編來說說用長按來錄屏的缺點。長按手勢是個難度系數(shù)較高的動作，通常將這一手勢用于用戶可能會因不小心的點擊而產(chǎn)生不可逆轉(zhuǎn)的誤操作的時候，例如ios里使用長按應(yīng)用圖標來卸載或移動應(yīng)用。應(yīng)用肯定是鼓勵用戶多多使用錄屏功能，但長按手勢會增大交互難度，反而起到反作用。例如，優(yōu)酷也設(shè)置了錄制最小時長，但如果用戶按壓時間不足時肯定是無法完成錄制的，用戶此時可以繼續(xù)長按錄屏按鈕，但在剛剛的過程中，視頻一直是正常播放的，第二次錄制肯定不能接著第一次錄的那一段繼續(xù)錄制，而是重新錄制，如果還想從第一次按壓時的那個時間點開始錄的話，必須退出錄制模式，將視頻后退到滿意的位置再重新錄制。為了盡可能避免這種情況出現(xiàn)，優(yōu)酷將可錄制的最小時長設(shè)置為1秒，但小編認為這彌補不了長按操作的難度。長按錄屏按鈕時，按鈕樣式?jīng)]有任何狀態(tài)的變化，再次降低了可用性。
2.14 騰訊視頻的只看TA 騰訊視頻做了一個按演員來篩選內(nèi)容的功能，叫“只看TA”?？梢灾豢幢炯哪兄?、只看女主或者男女主對手戲。但只有幾個熱播劇或自制劇有這個功能，挺好玩的，可以試一下，但是呢人物太多的段落可能就分不出來了。這個需求是否有必要，小編認為有待時間的檢驗。流程見圖2.15所示。
以上就是海淘科技為你所提供的，《4款視頻app交互設(shè)計案例分析》，并且提供APP軟件開發(fā)服務(wù)。
