跟著@miama的思路，一起來對UC瀏覽器中視頻聯(lián)播頁的交互設(shè)計進(jìn)行拆解，在拆解的過程中探索體驗(yàn)的本質(zhì)。

一、豎屏模式

• 點(diǎn)擊推薦信息流里的視頻信息會進(jìn)入到視頻播放聯(lián)播頁面，默認(rèn)進(jìn)入豎屏模式下，界面上半部分是導(dǎo)航欄及當(dāng)前視頻播放器，播放器為播放狀態(tài)；下半部分是隊(duì)列待播放的視頻信息模塊。
• 如用戶本次觀看是上一次未看完的視頻，那么播放內(nèi)容直接跳到上一次結(jié)束觀看的位置繼續(xù)播放。

1.導(dǎo)航欄

• 默認(rèn)狀態(tài)下導(dǎo)航欄為非100%顯示；
• 當(dāng)用戶對聯(lián)播頁有點(diǎn)擊、滑動等交互操作或視頻剩余播放時間小于等于5秒時，則100%顯示導(dǎo)航欄。

2.視頻信息

• 默認(rèn)狀態(tài)下視頻信息100%顯示，2秒后進(jìn)入非100%顯示狀態(tài)；
• 當(dāng)用戶對聯(lián)播頁有點(diǎn)擊、滑動等交互操作或視頻剩余播放時間小于等于5秒時，則進(jìn)入100%顯示狀態(tài)；
• 交互區(qū)域?yàn)橛脩酎c(diǎn)擊發(fā)布者頭像&昵稱進(jìn)入到該發(fā)布者所有的視頻列表頁，點(diǎn)擊關(guān)注標(biāo)簽提示關(guān)注成功，點(diǎn)擊視頻標(biāo)題進(jìn)入視頻詳情頁。

3.操作模塊

• 默認(rèn)狀態(tài)下，操作模塊與視頻信息顯示邏輯一致；
• 播放器右上角折疊分享的功能，左下角放置分享到微信好友及微信朋友圈的快捷入口，點(diǎn)贊及評論的匯總數(shù)據(jù)與操作按鈕顯示時播放器右下角。

功能歸類思考：分享到微信好友及朋友圈的快捷操作入口與播放器右上角的功能折疊入口在產(chǎn)品功能上屬于同一個類別，是否有必要把它們的位置距離分開的這么大？

4.豎屏播放器

• 默認(rèn)狀態(tài)下，播放器中隱藏工具欄，工具欄顯示邏輯與導(dǎo)航欄一致；
• 播放進(jìn)度條有兩種狀態(tài)，一種是不可交互狀態(tài)，另一種是可交互狀態(tài)，初始狀態(tài)下顯示為不可交互進(jìn)度條。

播放進(jìn)度條交互思考：播放進(jìn)度條在沉浸式播放體驗(yàn)當(dāng)中是否需要出現(xiàn)，是否會給用戶心理造成緊迫感？

5.頁面全局交互手勢

• 向右拖動或滑動時，回到上一級頁面；
• 向上滑動觀看下一個視頻，視頻播放器位置錨點(diǎn)在導(dǎo)航欄下面；
• 向上拖動開始時，當(dāng)前視頻（以下簡稱A視頻）播放狀態(tài)變?yōu)闀和２シ艩顟B(tài)且非100%顯示，隊(duì)列待播放視頻（以下簡稱B視頻）中的視頻信息、播放器、操作模塊100%顯示，B視頻為暫停播放狀態(tài)；
• 向下滑動觀看上一個視頻，視頻播放器位子錨點(diǎn)在導(dǎo)航欄下面；
• 拖動狀態(tài)結(jié)束時，當(dāng)B視頻中的操作模塊完整的出現(xiàn)在屏幕當(dāng)中時，則B視頻進(jìn)入開始播放狀態(tài)；
• 當(dāng)B視頻停留在屏幕中間觀看時，向下拖動結(jié)束后，則開始播放A視頻。

觀看體驗(yàn)：用戶觀看視頻時，手指拖動屏幕結(jié)束后，當(dāng)播放器在屏幕外的情況時，是繼續(xù)遮擋觀看還是自動讓遮擋部分移入屏幕中？

二、橫屏模式

• 點(diǎn)擊豎屏模式播放器右下角的屏幕切換按鈕，播放器進(jìn)入橫屏模式；
• 橫屏模式下需要觀看下一個視頻只能點(diǎn)擊右下角視頻列表入口進(jìn)行選擇，不能通過手勢切換。
• 橫屏模式下點(diǎn)擊右下角的屏幕切換按鈕，播放器進(jìn)入特殊豎屏模式；

在這里可以思考一個交互預(yù)期提出來給大家討論

• 點(diǎn)擊橫屏模式右下角的屏幕切換按鈕是否需要進(jìn)入一個特殊的豎屏模式？
• 橫屏模式下的“屏幕切換”按鈕與“返回“”按鈕預(yù)期跳轉(zhuǎn)頁面是否一致？
• 進(jìn)入到橫屏模式下的初始狀態(tài)時，播放器除視頻畫面外不出現(xiàn)任何元素，播放2秒后才出現(xiàn)（左圖所示元素），出現(xiàn)2秒后頁面元素再次隱藏，這樣的處理方式有必要嗎？

三、總結(jié)

@micma對于產(chǎn)品交互設(shè)計思考的方向：

1. 拆解界面的每一個元素所放置的位置是否合理；
2. 拆解用戶每一條使用路徑是否符合用戶預(yù)期；
3. 拆解產(chǎn)品的每一條邏輯是否清晰；
4. 拆解產(chǎn)品運(yùn)營在每一個頁面當(dāng)中是否有足夠的利用空間。

本文由 @micma 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議