開放世界地圖設計的秘訣:圖示的多維應用
地圖作為記錄真實世界中的幾何資訊的載體,從人類文明之初便一直扮演著關鍵的角色。而在致力於向玩家提供沉浸體驗的開放世界遊戲中,地圖的存在是保證這個遊戲完整性的關鍵——它是宏大場景與豐富元素的縮影,象徵著開放世界的完整性。
作為地圖的關鍵元素,圖示的設計應充分為地圖的角色和功能服務。本文將討論遊戲開發者在圖示設計過程中需要考慮的因素,並探討這些圖示如何作用於地圖、遊戲和玩家。
一、任務清單:需要為地圖系統設計哪些圖示?
區別於傳統紙質地圖,遊戲地圖介面中的圖示設計,需包含地理位置資訊之外的多種形式的內容。以下羅列出的內容,基本可以囊括所有會在開放世界地圖介面中出現的圖示。
- 常規地點:標註遊戲世界中可供玩家探索的位置。
- 角色/重要道具所在地點:指示目前角色/重要道具所在的位置或方向。
- 傳送點:玩家可以從當前位置直接傳送至其所在的位置。
- 提示標記:提示玩家有未完成的任務或未領取的道具。
- 使用者自定義標記:部分遊戲中,玩家可以選擇地圖系統提供的某一圖示去標記某個位置。
- 方向指示:在廣闊的場景中方向至關重要,部分地圖中有類似羅盤功能的圖示。
- 準星和游標:選中地點的工具,常見於用手柄或鍵盤移動的地圖中。
- 地圖外部資訊提示:交代經緯度、天氣、時間等資訊。
二、保證沉浸體驗的前提:如何提高圖示易用性?
遊戲中的虛擬場景和現實場景相似,均透過各種“觸點”(touch point)實現與人的互動。
在遊戲場景中,觸點可能是各類特殊的場景、物體或角色(如NPC等)。地圖通常將遊戲中的觸點以2D或2.5D形式呈現給玩家,在玩家從地圖介面回到3D遊戲場景中時,難免會產生體驗到割裂感。因此,圖示的易用性越高,玩家越能夠將注意力集中在遊戲場景中,所獲得的沉浸體驗越強。
易於理解:快速準確傳達含義
為了避免玩家在地圖和場景介面之間反覆切換來確認資訊,保證遊玩體驗的連續性,開發人員需要讓玩家輕鬆明白地圖圖示與遊戲場景中觸點的聯絡。
圖示設計的本質在於符號的選取,合適的符號讓玩家更容易理解圖示的含義,從而能夠使其含義更加易於理解。同時,圖示的選材還應符合遊戲世界的背景設定,保證易理解的同時兼顧敘事。
以具有“傳送”功能的圖示為例,《賽博朋克2077》中的傳送圖示(快速移動)是類似現代地圖中的地點定位標記;《塞爾達傳說:王國之淚》中的傳送圖示是取材於海拉魯大陸中的神廟;而《艾爾登法環》中的傳送圖示(賜福點)是取材於遊戲世界中真實的賜福點場景。這些圖示在能夠讓玩家快速明白其含義的同時,也讓遊戲的敘事更加完整。
上圖依次擷取於《賽博朋克 2077》、《塞爾達傳說:王國之淚》、《艾爾登法環》
易於學習:一看就會,一用就對
部分遊戲地圖中的圖示具有更加複雜的資訊互動功能,為圖示新增文字提示是最簡單的增強易學性的手段。
首先,文字內容應儘可能做到去除冗餘資訊,因為一切額外的文字內容在現實世界中均不存在,過多的文字介紹將會破壞玩家真實、沉浸體驗。
《塞爾達傳說:王國之淚》中僅用鍵盤圖示+傳送二字作為指示
其次,要保證提示文字在視覺上充分易讀,從減輕玩家在閱讀時的視覺負荷,提升閱讀效率;與此同時,文字的呈現應儘量與遊戲中其他介面的文字在設計規範上保持一致,確保文字系統作為一個整體易於玩家理解。
《賽博朋克2077》:相似的文字內容採用類似的配色與字型
易於操作:適配不同裝置
與現實中的紙質地圖不同,玩家需要與遊戲地圖的圖示互動才能夠獲取關鍵資訊。玩家主要透過三種方式接觸圖示:滑鼠、鍵盤或手柄滾輪(平板上的遊戲暫不考慮),因此圖示的大小是決定圖示易操作性的核心因素。
顯然,越大的圖示越容易選中,而為了儘可能呈現更多的資訊,同時避免過大的圖示影響玩家的視覺與操作體驗,圖示設計首先要確定其啟用範圍。
在最常見的透過移動滑鼠選擇圖示的介面中,由於滑鼠具有較高的精確性和移動速度,圖示可以透過減少啟用範圍,來換取地圖介面整體的資訊豐富度;而透過鍵盤或手柄滾輪來選擇圖示的過程更加複雜,圖示需要更大的啟用範圍;
《賽博朋克2077》:使用滑鼠選擇與使用滾輪選擇的啟用範圍對比
此外,額外的輔助功能可以讓玩家更輕鬆地選中圖示。比如《塞爾達傳說:王國之淚》中,在地圖中心有不會消失的選擇框,在靠近某個圖示時會自動放大或吸附。
《塞爾達傳說:王國之淚》中的輔助選擇設計
吸引性:引人注目,但不喧賓奪主
吸引性自然不可或缺,然而過度的吸引性會破壞某一介面的沉浸感與視覺平衡。開發者首先需要在傳達資訊和提供沉浸體驗之間找到一個平衡,再確定該如何賦予圖示整體的吸引性。
例如,《艾爾登法環》和《荒野大鏢客2:救贖》中的圖示吸引性較低,地圖中的圖示與背景的結合相對緊密,玩家需要將更多的注意力放在地形元素(如山脈、河流)的識別上,從而在不經意間獲得更多對遊戲場景的宏觀記憶;
《艾爾登法環》地圖
《荒野大鏢客:救贖》地圖
而在《賽博朋克2077》中,圖示的吸引性遠高於背景,玩家可以快速將注意力鎖定到目標地點上,而在背景中相似度較高的各種建築,也會在瀏覽地圖過程中被忽略。
《賽博朋克 2077》地圖
同時,不同類別圖示的吸引性也應做到有所區分,應根據訪問頻率、對遊戲程序的貢獻等因素劃分不同的等級,但這類等級並不是多多益善。設定過多的等級可能會引起排序混亂;同時更多的等級意味著更大的視覺權重跨度,會使部分圖示過於刺眼或隱蔽,加重玩家視覺負擔。通常圖示的吸引性等級不超過4級。
《賽博朋克2077》中圖示的吸引性等級劃分
此外,不同的視覺權重決定了圖示之間吸引性的差異。通常,不規則的造型,與背景強烈的色彩搭配,以及發光、陰影或運動的特效會增加某一圖示的視覺權重。
三、不只於符號:如何賦予圖示功能?
圖示的功能決定了玩家探索遊戲世界的效率,甚至影響到了遊戲的機制玩法。開放世界中存在豐富的細節供玩家探索;而地圖作為輔助玩家的關鍵道具,需要為玩家提供合理的功能,為其體驗錦上添花。
解放玩家定製權,實現探索自由
遊戲與電影有著相似的核心構成元素——向玩家/觀眾呈現故事。傳統遊戲中的線性關卡設定更像是由“導演”剪輯後呈現給觀眾的電影,玩家更像是在被動接受故事的輸出;而開放世界則需要玩家主動探索故事,每個玩家都有屬於自己的探索方式與歷程,這也是開放世界遊戲的魅力所在。
開放世界遊戲與傳統遊戲探索故事方式的不同(示意),右側為開放世界
在開放世界中,地圖不僅傳達位置資訊,也需標明關卡資訊,為玩家提供任務清單;同時為了能讓玩家獲得自由的探索體驗,地圖介面中有時要允許玩家新增屬於自己的標註,賦予玩家定製目標、決策程序的權利。
《塞爾達傳說:王國之淚》中,玩家可以在某個特殊的地點(如鍋爐、火山)中新增圖章以便於後續尋找,且有不同型別的圖章供玩家選擇。
《艾爾登法環》中的標記圖示
在探索世界的過程中,不同的玩家最終會得到不同的地圖——玩家將自己的性格、喜好與情感投射到地圖上,並獲得了屬於自己的畫像。有些玩家會用圖章將重要的資源點標註出來,而有些玩家熱衷於標註所有風景優美或者有趣的地方。每位玩家的獨一無二的地圖,也將成為通關後承載其體驗與回憶的載體。
與遊戲場景聯動,打破介面隔閡
依據地圖圖示和玩家在遊戲場景中行為的關聯程度分類,關聯性最弱且最常見的圖示提供地點資訊,通常以圖文形式向玩家呈現場景中的資訊;其次是使用傳送點移動,玩家選中並點選圖示即可來到對應的地點;而關聯性最強的圖示通常是地點標註圖示,由於玩家需要在場景中找到在地圖中標註的地點,這類圖示的設計需要與場景中的標記緊密結合。
在《塞爾達傳說:王國之淚》中,玩家總共有6枚不同顏色的地圖釘來標註地圖中的地點,當玩家切換至場景中時,使用望遠鏡便可找到對應顏色的光柱,來指引角色走向地點。
如前文所說,這一類圖示的造型便取材於場景中光柱的造型,增強易理解性的同時,也很好地與場景進行聯動;此外,圖示中的發光特效也沿用了場景中的光效。
《塞爾達傳說:王國之淚》中地圖釘在地圖介面與遊戲場景中的呈現方式
總結
遊戲圖示的設計過程不僅是簡單的藝術創作與介面排版,更是開發人員不斷深入遊戲世界與玩家內心的過程——不僅要實現美觀的介面與高效的資訊傳達,也要與遊戲世界的世界觀一脈相承,共同觸達玩家的內心世界。
只有從多個維度打磨圖示的設計,才能為玩家提供最為沉浸、獨特而難忘的遊戲體驗。
來源:網易雷火UX使用者體驗中心
相關文章
- JRPG開放世界地圖的標杆,《異度神劍》系列地圖設計的祕訣地圖
- 開放世界地圖如何設計?② ——七巧板法則地圖
- 遊戲圖示的設計跟其它應用的圖示設計有何不同?遊戲
- 世界先得真實,開放地圖才有意義地圖
- 絕佳的API設計秘訣 - DZone整合API
- 「資訊地圖」開發輔助工具如何影響《艾爾登法環》的開放地圖設計?地圖
- 產品設計中的地圖學思維地圖
- 字型圖示的應用
- 開放世界關卡設計:《空洞騎士》的奧祕,2D地圖如何實現探索感?地圖
- 應用架構圖的設計應用架構
- <多人PvP射擊遊戲融入開放世界玩法>地圖與關卡設計要點遊戲地圖
- 百度地圖開發-顯示地圖預設介面 03地圖
- 開發世界地圖如何設計?①——3-6-1法則地圖
- Serverless 應用最佳化四則秘訣Server
- 開放世界遊戲地圖越大,玩家感官會越自由嗎?遊戲地圖
- 《艾爾登法環》如何效率化、自動化地構築宏大的開放世界地圖?地圖
- 三維展示圖怎麼做,視覺化地圖設計用什麼軟體?視覺化地圖
- 【Qt開發】更改應用程式圖示和工作列圖示QT
- 遊戲UX設計:地圖設計的考量遊戲UX地圖
- 戰鬥設計基礎(七)——用演算法生成《率土之濱》的世界地圖演算法地圖
- 育碧製作開放世界地圖的資料,都是由這個團隊調研收集的地圖
- 設計完圖示如何選擇圖示格式給到開發?
- ESMap三維地圖開發流程地圖
- SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖試讀版UI地圖
- 用HMS Core地圖服務自定義地圖樣式,給你的應用製作專屬個性化地圖地圖
- 30張地圖 30個世界《坦克世界》1.0地圖旅遊指南地圖
- 使用flutter_map計算相應的高德地圖zoom值與地圖的centerFlutter地圖OOM
- 高德地圖app怎麼使用北斗地圖? 高德地圖設定北斗地圖的教程地圖APP
- 室內三維地圖開發,製作商圈圖用什麼軟體地圖
- 高效儲存的秘訣:bitmap 資料結構在標籤中的應用資料結構
- 開源軟體在地圖資料處理中的應用地圖
- 微軟在應用程式新圖示設計中加入Windows 10X的元素微軟Windows
- 聊聊用演算法生成《率土之濱》的世界地圖演算法地圖
- 開放世界的探索感?—— 為好奇心設計
- 替換macOS Big Sur 應用圖示的教程Mac
- 圖解設計模式:身份認證場景的應用圖解設計模式
- 關於億圖圖示縮放鎖定1%的問題
- PPT怎麼設計圖示並列式目錄?PPT設計簡潔的圖示並列式目錄