跟着@miama的思路，一起來對UC浏覽器中視頻聯播頁的交互設計進行拆解，在拆解的過程中探索體驗的本質。

一、豎屏模式

• 點擊推薦信息流裡的視頻信息會進入到視頻播放聯播頁面，默認進入豎屏模式下，界面上半部分是導航欄及當前視頻播放器，播放器為播放狀态；下半部分是隊列待播放的視頻信息模塊。
• 如用戶本次觀看是上一次未看完的視頻，那麼播放内容直接跳到上一次結束觀看的位置繼續播放。

1.導航欄

• 默認狀态下導航欄為非100%顯示；
• 當用戶對聯播頁有點擊、滑動等交互操作或視頻剩餘播放時間小于等于5秒時，則100%顯示導航欄。

2.視頻信息

• 默認狀态下視頻信息100%顯示，2秒後進入非100%顯示狀态；
• 當用戶對聯播頁有點擊、滑動等交互操作或視頻剩餘播放時間小于等于5秒時，則進入100%顯示狀态；
• 交互區域為用戶點擊發布者頭像&昵稱進入到該發布者所有的視頻列表頁，點擊關注标簽提示關注成功，點擊視頻标題進入視頻詳情頁。

3.操作模塊

• 默認狀态下，操作模塊與視頻信息顯示邏輯一緻；
• 播放器右上角折疊分享的功能，左下角放置微信好友及微信朋友圈的快捷入口，點贊及評論的彙總數據與操作按鈕顯示時播放器右下角。

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

4.豎屏播放器

• 默認狀态下，播放器中隐藏工具欄，工具欄顯示邏輯與導航欄一緻；
• 播放進度條有兩種狀态，一種是不可交互狀态，另一種是可交互狀态，初始狀态下顯示為不可交互進度條。

播放進度條交互思考：播放進度條在沉浸式播放體驗當中是否需要出現，是否會給用戶心理造成緊迫感？

5.頁面全局交互手勢

• 向右拖動或滑動時，回到上一級頁面；
• 向上滑動觀看下一個視頻，視頻播放器位置錨點在導航欄下面；
• 向上拖動開始時，當前視頻（以下簡稱A視頻）播放狀态變為暫停播放狀态且非100%顯示，隊列待播放視頻（以下簡稱B視頻）中的視頻信息、播放器、操作模塊100%顯示，B視頻為暫停播放狀态；
• 向下滑動觀看上一個視頻，視頻播放器位子錨點在導航欄下面；
• 拖動狀态結束時，當B視頻中的操作模塊完整的出現在屏幕當中時，則B視頻進入開始播放狀态；
• 當B視頻停留在屏幕中間觀看時，向下拖動結束後，則開始播放A視頻。

觀看體驗：用戶觀看視頻時，手指拖動屏幕結束後，當播放器在屏幕外的情況時，是繼續遮擋觀看還是自動讓遮擋部分移入屏幕中？

二、橫屏模式

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

在這裡可以思考一個交互預期提出來給大家讨論

• 點擊橫屏模式右下角的屏幕切換按鈕是否需要進入一個特殊的豎屏模式？
• 橫屏模式下的“屏幕切換”按鈕與“返回“”按鈕預期跳轉頁面是否一緻？
• 進入到橫屏模式下的初始狀态時，播放器除視頻畫面外不出現任何元素，播放2秒後才出現（左圖所示元素），出現2秒後頁面元素再次隐藏，這樣的處理方式有必要嗎？

三、總結

@micma對于産品交互設計思考的方向：

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

本文由 @micma 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部