2020 年 3 季度數據顯示，我國移動端在線視頻滲透率已經穩定超越了 75%，短視頻滲透率也已超過 70%，隨時隨地使用手機觀看視頻的方式正逐漸取代 PC 端和電視端時代的觀看習慣。在視頻消費規?？焖僭鲩L的趨勢下，QQ 瀏覽器作為提供視頻消費的平臺，如何為用戶提供更優秀的視頻觀看體驗成為了一個重要的課題。

在 QQ 瀏覽器中，我們為用戶提供了豐富的視頻播放功能，以及三種播放模式，分別是：全屏模式、懸浮模式以及小窗模式。接下來和大家分享我們在升級版播放器的設計過程中的四點思考。

設計思考 1:

如何讓功能布局貼近用戶使用習慣，提高功能的易用性?

橫屏播放能夠提升觀看視頻的沉浸感，但橫屏狀態下對功能布局的挑戰也變得更高。根據菲茨定律，手指到目標的距離(D)和目標的大小(W)，決定了用戶完成操作的耗時和難度(物理交互成本)，大且近的目標讓用戶能夠輕松觸達，反之將給用戶留下「難用」的印象。

觸控熱區是一個人機工程學概念，Steven Hoober 在 2013 年發表的研究中定義了握持時手指舒適的操控范圍，團隊通過 1300 余次的實地觀察，統計了大眾用戶使用移動設備的操作方式，研究發現約 75%的點擊行為是由拇指驅動的。Hoober 指出為了獲得舒適的人機體驗，應將重要的點擊目標放置在「觸控熱區」中，但此研究僅針對了手機豎屏操作，我們無法確定橫屏場景是否同樣適用。因此我們通過用戶調研去了解用戶在橫屏觀看視頻時的操作習慣，定義橫屏觀看視頻時的觸控熱區范圍，目的是保證播放器界面的可用性并讓用戶愿意去主動探索播放器的優質功能。

在調研結果中我們發現：全屏觀看視頻時，約 70%的用戶習慣右手拇指操作，且有一半的用戶單手持機，與 Hoober 的研究結果基本吻合。這就意味著我們應該將用戶高頻使用的功能入口布局在屏幕右側。雖然左側同樣存在觸摸熱區，但因左手持機的用戶較少，所以使用頻率較低可以考慮布局在屏幕左側。需要注意的是，人的因素(手的尺寸、行走或靜止狀態、握持姿勢)和機器因素(屏幕尺寸、重量、造型)都會導致熱區范圍波動，所以觸控熱區指的是人機交互中的觸控參考范圍，而不是恒定的某塊區域。

根據上述提到的觸控熱區，我們進一步引入柵格系統來細化新版播放器界面布局，由面及點地規劃功能按鈕位置?？紤]到拇指能夠觸達的觸控熱區不會隨著屏幕尺寸縮放，播放器柵格采用“兩端固定，中心拉伸”的適配邏輯，保證功能按鈕在大屏手機上也能夠輕松觸達。此外，拇指和屏幕的接觸面積普遍在 8-12mm 之間，我們將單個柵格的寬度控制在 12mm(以 iPhone X 屏幕尺寸為例)，避免按鈕誤觸影響操作體驗。

結合觸摸熱區和建立柵格體系，我們劃定了三類功能區域，分別容納高頻、中頻、低頻的操作按鈕。這種布局規則能夠讓用戶在維持姿勢舒適的情況下觸發更多常用功能，同時也能夠幫助我們驗證接下來手勢設計的可用性。

設計思考 2：

符合自然隱喻 靈活自由切換

QQ 瀏覽器平臺內共有三種窗口尺寸，分別是小窗模式、懸浮模式以及全屏模式。窗口大小對應著用戶對內容的專注度。我們希望設計一組通用的手勢，讓播放器能夠在三種形態中自由切換，以滿足不同專注程度的觀看需求。

在研究手勢操作案例時，我們發現其實很多手勢功能的使用率并不高，有相當多的用戶從來沒有使用過除單指滑動和點擊之外手勢。其原因是手勢相對于點擊操作更復雜且缺少視覺引導、學習成本高，很多用戶甚至從未發現手勢操作。那么我們應該怎么設計手勢操作達到我們預期的設計目的呢?這種情況下，我們恰恰可以將用戶常用手勢作為設計切入點，建立符合用戶心智模型的手勢，降低手勢操作的發現和學習成本。

最終我們選擇了用戶最常用的雙指縮放手勢，控制窗口逐層放大或縮小。

設計思考 3：

優化現有手勢 打造操控爽感

新版播放器增加了長按多級倍速功能，用戶長按屏幕熱區可以根據需求自由選擇觀看速度。在這種差異化功能的設計時，我們思考如何提升操控的快感、爽感。

在保證可用性的基礎上，我們嘗試在操作反饋的細節里繼續打磨。切換倍速時檔位熱區會跟隨用戶的手指停留亮起，在此之上又給每次撥動添加了輕度的振動反饋，既能明確感知當前的狀態、又能加強用戶的操控感。

設計思考 4：

洞察用戶需求 強化隱私認知

隱私保護是瀏覽器產品為用戶提供的服務，我們在設計播放器的時候也在思考如何將隱私保護服務向更深、更細的場景拓展。通過對用戶的行為觀察，我們發現非獨居的年輕人在家看視頻突然受到父母、室友打擾的時候，會有關掉視頻保護隱私的動作。從這個場景，我們延展思考到其他移動視頻播放的場景，大多是相對獨立，但不是密閉的空間，例如合租房客廳、地鐵、工位等等，用戶都有在突然受到外界打擾，快速關閉視頻窗口保護隱私的需求。

為了滿足用戶快速退出播放窗口的需求，同時減短復購路徑，在新播放器的全屏場景下設計引入了雙指下拉的手勢，通過雙指下拉既能關掉當前播放窗口，秒回瀏覽器首頁。被關掉的播放內容會保留在多窗口中，點擊即可恢復觀看。

總結

播放器是內容的容器，一切功能都是為營造沉浸觀看的體驗而服務，交互設計當以「內容優先」為原則，保持設計上的克制，不斷打磨產品細節。