方寸之間見天地：遊戲介面中的滾動互動設計方法

作為一種重要的介面設計元素，滾動被廣泛應用在遊戲介面中。但滾動互動有利也有弊，根據使用者目的、控制裝置等的不同，需要採取不同形式的滾動互動。在這篇文章中，我們將會介紹滾動互動設計的一些概念和規範，並結合遊戲介面設計案例，深入分析如何設計合理的滾動互動。

一、滾動互動的作用與型別

方寸之間見天地

電子螢幕使人們得以在有限的物理空間中飽覽無限的資訊，於是，滾動互動對於人們在有限空間中控制內容可見部分至關重要。從古代的羊皮卷軸出現算起，使用者介面中的滾動已存在了4500多年。

根據滾動操作的觸發條件，介面中的滾動可以分為捲軸等手動滾動、以及輪播圖等自動滾動方式。

細微之處有乾坤

小小的捲軸使使用者能夠自由控制螢幕中的可見內容。自滑鼠這種外接控制工具出現後，計算機介面中的捲軸設計也不斷經歷著變革。目前滑鼠控制下的捲軸操作主要有兩種方式，分別為滑鼠左鍵按下並拖動和滑鼠滾輪轉動。



亂花漸欲迷人眼

輪播等自動滾動方法使靜態的介面自然轉化為動態介面。它十分適合視覺向內容且結構相對扁平的情況，其中每個內容單元都屬於同一類別，而且激發的使用者興趣類似。自動滾動介面有助於吸引使用者的注意，使他們沉浸其中，帶給使用者兼具美感與互動性的體驗。

二、滾動互動的設計方法

化繁為簡，降低負荷

捲軸的基本組成部分包括滾動框、滾動滑塊和滾動箭頭。滾動框代表內容的長度或寬度、滾動滑塊對映當前顯示區域、滾動箭頭指示滾動方向。近年來隨著介面中的資訊密度提高，捲軸設計逐漸趨向於簡化。


在遊戲《永劫無間》中，捲軸的設計在此基礎上進一步最佳化，例如在“外觀”介面中：

• 捲軸可見的部分在介面中所佔面積很小，有利於玩家的視覺中心集中於需要突出的部分，即不斷旋轉的外觀模型。
• 滾動箭頭對於捲軸並非是必需的，這裡豎直襬放的捲軸已說明了方向為上下滾動，因此滾動箭頭被簡化，體現了“Less is More”（少即是多）的設計原則。
  

而對於手機遊戲介面，玩家一般可直接拖動螢幕實現手動滾動，所以捲軸在手遊介面中不常出現。

定量分析，提高效率

關於如何定量分析捲軸的設計，常用的方法是使用菲茨定律。

菲茨定律最早由保羅·菲茨在1954年提出，是用來預測從任意一點到目標位置所需時間的數學模型。該模型考慮了使用者定位點的初始位置與目標的相對距離、目標的大小、和移動的最短時間。

三者之間關係公式為：T=a+b log2(D/W+1)。其中T為移動所需時長；a,b為經驗常量，D為裝置起始位置與目標位置之間的距離；W為目標的寬度。


根據以上公式，可以得出：

• 裝置當前位置和目標位置的距離D越長，所用時間越長
• 目標的寬度大小W越大，所用時間越短
  

這個看似簡單的心理學模型，在人機互動和設計領域具有廣泛和深遠的影響，也為捲軸的互動設計提供了一個度量的法則，例如：

• 如何降低操作複雜度？——考慮改變捲軸熱區的尺寸
• 如何提高操作效率？——改變捲軸距離視覺熱區的位置
  

依然以《永劫無間》為例，上文提到，遊戲介面中捲軸的可見部分很小，大部分介面中寬度只有4畫素。然而，小尺寸的捲軸會導致電腦端使用者使用滑鼠的操作複雜度較大。因此捲軸實際的熱區寬度W比看起來更大，例如在外觀介面中它達到了36畫素。此外，捲軸操作熱區緊貼可滾動的外觀列表，使得距離D較小，從而保證操作效率，帶給使用者順暢的使用體驗。


明確目標，揚長避短

在《永劫無間》中，玩家每日首次進入遊戲時會開啟一個自動滾動的介面，有利於快速瞭解近期遊戲更新內容和熱點，該介面包括了以下元件：

• 若干主視覺圖的輪播佔據了介面主體，激發玩家的興趣。
• 介面兩側的箭頭可響應點選行為，滿足玩家的檢視意圖。
• 下方縮圖列表有利於玩家獲得在輪播介面中的位置感知，此外也可響應點選行為。
  

自動滾動的缺點是不利於使用者專注於他們需要的資訊。因此，對於目標導向的任務（如需要使用者定位特定內容或進行比較的任務），不推薦使用自動滾動。這種情況下，更合適的做法是根據資訊相關性與使用者期望進行分組和分層，劃分為多個頁面。

《永劫無間》的“商店”功能中的“推薦”頁面含有新商品的自動輪播，這樣的設計有利於展示不同的新上內容，引起玩家的檢視及購買興趣。


而在“總覽”頁面中，一些玩家帶著選購特定商品的目標而來，點選下拉選單切換分類，並手動拖動捲軸，有利於玩家高效完成查詢、比較、選購商品的目標。


統一邏輯，順應直覺

《永劫無間》主機版可適配手柄互動，因此在介面互動設計中需要同時考慮手柄玩家的體驗。對手柄玩家而言，捲軸無法直接拖拽，而是起到指示滾動方向和當前位置的作用。以主流的XBOX手柄為例，《永劫無間》的做法是所有局外介面中的手動滾動都可以透過右搖桿實現，體現手柄操作的通用邏輯。根據介面滾動方向，統一分為左右移動右搖桿和上下移動右搖桿兩類。


有時，在同一層級的介面中需要多個捲軸的存在，如果此時移動右搖桿，應當如何判斷滾動物件呢？解決辦法可以是統一判斷當前遊標所在的位置，只有左搖桿遊標正處在對應區域時，才能實現滾動。

例如在下圖的“自定義房間”介面中，同時存在房間列表與房間設定的豎直方向捲軸，而此時的遊標正處於設定區域，所以當玩家上下移動右搖桿時，設定區域發生滾動。同理，如果遊標既不在列表區域也不在設定區域，二者都無法滾動。


這條適用於手柄的通用規則本質上與滑鼠操作的規則是一致的，使用滑鼠作為控制裝置時，只有滑鼠游標在滾動區域內時方可轉動滾輪，實現該區域的滾動。保持不同控制裝置中底層邏輯的相通性，符合玩家的直覺，也有利於降低切換控制裝置的學習成本。

總結

滾動是計算機圖形介面史上變革最大的互動機制之一，它與計算機控制元件的變革息息相關。在過去，捲軸隨著滑鼠的進化而誕生；滑動手勢藉助膝上型電腦的觸控板而實現。而現在，移動裝置的遍及使越來越多的使用者使用較小的螢幕，因此滾動機制的設計也變得越來越重要。同時，新的技術正在催生新的互動方式，例如在擴增實境和虛擬現實中，可透過手勢或眼動互動實現介面中的滾動操作。期待在未來，我們能見到更多有趣的互動方式 ，構築更優秀的使用者體驗。

參考文獻：
[1]. A usability evaluation of Web user interface scrolling types | First Monday
[2]. Scroll ring performance evaluation | CHI '03 Extended Abstracts on Human Factors in Computing Systems (acm.org)
[3]. ScrollTest: Evaluating Scrolling Speed and Accuracy (arxiv.org)
[4]. Quantitative analysis of scrolling techniques | Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (acm.org)



來源：網易雷火UX使用者體驗中心