激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

滾動交互設(shè)計探討: 游戲世界里的視覺互動創(chuàng)新

發(fā)布時間：2024-04-22 09:16:50 瀏覽量：173次

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

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

一、滾動交互的作用與類型

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

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

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

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

二、滾動交互的設(shè)計方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

參考文獻： [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)

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定