以下文章來源于網(wǎng)易雷火UX用戶體驗(yàn)中心，作者雷火UX

作為一種重要的界面設(shè)計(jì)元素，滾動(dòng)被廣泛應(yīng)用在游戲界面中。但滾動(dòng)交互有利也有弊，根據(jù)用戶目的、控制設(shè)備等的不同，需要采取不同形式的滾動(dòng)交互。在這篇文章中，我們將會(huì)介紹滾動(dòng)交互設(shè)計(jì)的一些概念和規(guī)范，并結(jié)合游戲界面設(shè)計(jì)案例，深入分析如何設(shè)計(jì)合理的滾動(dòng)交互。

一、滾動(dòng)交互的作用與類型

電子屏幕使人們得以在有限的物理空間中飽覽無限的信息，于是，滾動(dòng)交互對(duì)于人們在有限空間中控制內(nèi)容可見部分至關(guān)重要。從古代的羊皮卷軸出現(xiàn)算起，用戶界面中的滾動(dòng)已存在了4500多年。

根據(jù)滾動(dòng)操作的觸發(fā)條件，界面中的滾動(dòng)可以分為滾動(dòng)條等手動(dòng)滾動(dòng)、以及輪播圖等自動(dòng)滾動(dòng)方式。

小小的滾動(dòng)條使用戶能夠自由控制屏幕中的可見內(nèi)容。自鼠標(biāo)這種外接控制工具出現(xiàn)后，計(jì)算機(jī)界面中的滾動(dòng)條設(shè)計(jì)也不斷經(jīng)歷著變革。目前鼠標(biāo)控制下的滾動(dòng)條操作主要有兩種方式，分別為鼠標(biāo)左鍵按下并拖動(dòng)和鼠標(biāo)滾輪轉(zhuǎn)動(dòng)。

輪播等自動(dòng)滾動(dòng)方法使靜態(tài)的界面自然轉(zhuǎn)化為動(dòng)態(tài)界面。它十分適合視覺向內(nèi)容且結(jié)構(gòu)相對(duì)扁平的情況，其中每個(gè)內(nèi)容單元都屬于同一類別，而且激發(fā)的用戶興趣類似。自動(dòng)滾動(dòng)界面有助于吸引用戶的注意，使他們沉浸其中，帶給用戶兼具美感與互動(dòng)性的體驗(yàn)。

二、滾動(dòng)交互的設(shè)計(jì)方法

滾動(dòng)條的基本組成部分包括滾動(dòng)框、滾動(dòng)滑塊和滾動(dòng)箭頭。滾動(dòng)框代表內(nèi)容的長度或?qū)挾?、滾動(dòng)滑塊映射當(dāng)前顯示區(qū)域、滾動(dòng)箭頭指示滾動(dòng)方向。近年來隨著界面中的信息密度提高，滾動(dòng)條設(shè)計(jì)逐漸趨向于簡化。

在游戲《永劫無間》中，滾動(dòng)條的設(shè)計(jì)在此基礎(chǔ)上進(jìn)一步優(yōu)化，例如在“外觀”界面中：

• 滾動(dòng)條可見的部分在界面中所占面積很小，有利于玩家的視覺中心集中于需要突出的部分，即不斷旋轉(zhuǎn)的外觀模型。
• 滾動(dòng)箭頭對(duì)于滾動(dòng)條并非是必需的，這里豎直擺放的滾動(dòng)條已說明了方向?yàn)樯舷聺L動(dòng)，因此滾動(dòng)箭頭被簡化，體現(xiàn)了“Less is More”（少即是多）的設(shè)計(jì)原則。

而對(duì)于手機(jī)游戲界面，玩家一般可直接拖動(dòng)屏幕實(shí)現(xiàn)手動(dòng)滾動(dòng)，所以滾動(dòng)條在手游界面中不常出現(xiàn)。

關(guān)于如何定量分析滾動(dòng)條的設(shè)計(jì)，常用的方法是使用菲茨定律。

菲茨定律最早由保羅·菲茨在1954年提出，是用來預(yù)測從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型。該模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、和移動(dòng)的最短時(shí)間。

根據(jù)以上公式，可以得出：

• 設(shè)備當(dāng)前位置和目標(biāo)位置的距離D越長，所用時(shí)間越長
• 目標(biāo)的寬度大小W越大，所用時(shí)間越短

這個(gè)看似簡單的心理學(xué)模型，在人機(jī)交互和設(shè)計(jì)領(lǐng)域具有廣泛和深遠(yuǎn)的影響，也為滾動(dòng)條的交互設(shè)計(jì)提供了一個(gè)度量的法則，例如：

• 如何降低操作復(fù)雜度？——考慮改變滾動(dòng)條熱區(qū)的尺寸
• 如何提高操作效率？——改變滾動(dòng)條距離視覺熱區(qū)的位置

依然以《永劫無間》為例，上文提到，游戲界面中滾動(dòng)條的可見部分很小，大部分界面中寬度只有4像素。然而，小尺寸的滾動(dòng)條會(huì)導(dǎo)致電腦端用戶使用鼠標(biāo)的操作復(fù)雜度較大。因此滾動(dòng)條實(shí)際的熱區(qū)寬度W比看起來更大，例如在外觀界面中它達(dá)到了36像素。此外，滾動(dòng)條操作熱區(qū)緊貼可滾動(dòng)的外觀列表，使得距離D較小，從而保證操作效率，帶給用戶順暢的使用體驗(yàn)。

明確目標(biāo)，揚(yáng)長避短

在《永劫無間》中，玩家每日首次進(jìn)入游戲時(shí)會(huì)打開一個(gè)自動(dòng)滾動(dòng)的界面，有利于快速了解近期游戲更新內(nèi)容和熱點(diǎn)，該界面包括了以下組件：

• 若干主視覺圖的輪播占據(jù)了界面主體，激發(fā)玩家的興趣。
• 界面兩側(cè)的箭頭可響應(yīng)點(diǎn)擊行為，滿足玩家的查看意圖。
• 下方縮略圖列表有利于玩家獲得在輪播界面中的位置感知，此外也可響應(yīng)點(diǎn)擊行為。

自動(dòng)滾動(dòng)的缺點(diǎn)是不利于用戶專注于他們需要的信息。因此，對(duì)于目標(biāo)導(dǎo)向的任務(wù)（如需要用戶定位特定內(nèi)容或進(jìn)行比較的任務(wù)），不推薦使用自動(dòng)滾動(dòng)。這種情況下，更合適的做法是根據(jù)信息相關(guān)性與用戶期望進(jìn)行分組和分層，劃分為多個(gè)頁面。

《永劫無間》的“商店”功能中的“推薦”頁面含有新商品的自動(dòng)輪播，這樣的設(shè)計(jì)有利于展示不同的新上內(nèi)容，引起玩家的查看及購買興趣。

而在“總覽”頁面中，一些玩家?guī)еx購特定商品的目標(biāo)而來，點(diǎn)擊下拉菜單切換分類，并手動(dòng)拖動(dòng)滾動(dòng)條，有利于玩家高效完成查找、比較、選購商品的目標(biāo)。

統(tǒng)一邏輯，順應(yīng)直覺

《永劫無間》主機(jī)版可適配手柄交互，因此在界面交互設(shè)計(jì)中需要同時(shí)考慮手柄玩家的體驗(yàn)。對(duì)手柄玩家而言，滾動(dòng)條無法直接拖拽，而是起到指示滾動(dòng)方向和當(dāng)前位置的作用。以主流的XBOX手柄為例，《永劫無間》的做法是所有局外界面中的手動(dòng)滾動(dòng)都可以通過右搖桿實(shí)現(xiàn)，體現(xiàn)手柄操作的通用邏輯。根據(jù)界面滾動(dòng)方向，統(tǒng)一分為左右移動(dòng)右搖桿和上下移動(dòng)右搖桿兩類。

有時(shí)，在同一層級(jí)的界面中需要多個(gè)滾動(dòng)條的存在，如果此時(shí)移動(dòng)右搖桿，應(yīng)當(dāng)如何判斷滾動(dòng)對(duì)象呢？解決辦法可以是統(tǒng)一判斷當(dāng)前游標(biāo)所在的位置，只有左搖桿游標(biāo)正處在對(duì)應(yīng)區(qū)域時(shí)，才能實(shí)現(xiàn)滾動(dòng)。

例如在下圖的“自定義房間”界面中，同時(shí)存在房間列表與房間設(shè)置的豎直方向滾動(dòng)條，而此時(shí)的游標(biāo)正處于設(shè)置區(qū)域，所以當(dāng)玩家上下移動(dòng)右搖桿時(shí)，設(shè)置區(qū)域發(fā)生滾動(dòng)。同理，如果游標(biāo)既不在列表區(qū)域也不在設(shè)置區(qū)域，二者都無法滾動(dòng)。

這條適用于手柄的通用規(guī)則本質(zhì)上與鼠標(biāo)操作的規(guī)則是一致的，使用鼠標(biāo)作為控制設(shè)備時(shí)，只有鼠標(biāo)光標(biāo)在滾動(dòng)區(qū)域內(nèi)時(shí)方可轉(zhuǎn)動(dòng)滾輪，實(shí)現(xiàn)該區(qū)域的滾動(dòng)。保持不同控制設(shè)備中底層邏輯的相通性，符合玩家的直覺，也有利于降低切換控制設(shè)備的學(xué)習(xí)成本。

總結(jié)

滾動(dòng)是計(jì)算機(jī)圖形界面史上變革最大的交互機(jī)制之一，它與計(jì)算機(jī)控件的變革息息相關(guān)。在過去，滾動(dòng)條隨著鼠標(biāo)的進(jìn)化而誕生；滑動(dòng)手勢借助筆記本電腦的觸控板而實(shí)現(xiàn)。而現(xiàn)在，移動(dòng)設(shè)備的遍及使越來越多的用戶使用較小的屏幕，因此滾動(dòng)機(jī)制的設(shè)計(jì)也變得越來越重要。同時(shí)，新的技術(shù)正在催生新的交互方式，例如在增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)中，可通過手勢或眼動(dòng)交互實(shí)現(xiàn)界面中的滾動(dòng)操作。期待在未來，我們能見到更多有趣的交互方式 ，構(gòu)筑更優(yōu)秀的用戶體驗(yàn)。