?

作者丨AJ，騰訊互動娛樂 游戲運營

綜述

《明日方舟》（后文簡稱「方舟」）上線至今已經(jīng)超過兩個月，其突出的美術(shù)風格和國內(nèi)游戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者津津樂道的戰(zhàn)斗玩法，讓行業(yè)內(nèi)外許多前輩紛紛給出了不同的解讀和評析。

但對于筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的卻是它的 UI —— 它喚醒了我對于很多游戲的記憶和一些設(shè)計風格的思考。隨著游戲體驗的深入，方舟的頁面交互與其扎實的平面設(shè)計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設(shè)計層面的部分認知和思考。

我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發(fā)散，因而描述重點時而會跳出方舟本身，部分內(nèi)容涉及動效、氛圍、美術(shù)和外延話題的探討，可能超出了頁面與交互的定義范圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：

• Diegetic Interface 風格的主看板觀瞄投影設(shè)計如何增強沉浸感？
• 類 Fluent Design 設(shè)計思想的多元質(zhì)感在哪些細節(jié)中勾勒？
• 界面扁平化后如何追求交互空間和所承載內(nèi)容的深度？
• 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
• 焦距控制和底圖處理等平面設(shè)計基礎(chǔ)手法如何塑造統(tǒng)一的視覺識別？
• 有哪些過場銜接技巧降低了頁面層級的數(shù)量，并構(gòu)建了場景化的系統(tǒng)結(jié)構(gòu)？

最后，筆者會分享一些在游戲過程中的有趣發(fā)現(xiàn)，并淺談個人對于方舟的頁面與交互未來的展望。

1 Diegetic Interface 風格的主看板觀瞄投影設(shè)計如何增強沉浸感？

與「畫內(nèi)界面」相對應(yīng)的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們?nèi)粘Ｋ熘挠跋裨亍?strong>所謂畫外，即場景中的某個信息單元僅僅呈現(xiàn)給觀眾（玩家），而非呈現(xiàn)給劇中的角色。在多數(shù)游戲界面中，用來向玩家展現(xiàn)其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現(xiàn)，例如格斗游戲《拳王》中雙方的血量條、怒氣值等組件。

與之相反，「畫內(nèi)界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現(xiàn)給玩家，從而打破玩家和游戲角色「隔著一個屏幕」的舒適區(qū)，增強沉浸感。

最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數(shù)指示方式，其并不像大多數(shù) FPS 游戲一樣出現(xiàn)在一個單獨的角落方塊內(nèi)，而是顯示在每一把槍支瞄鏡側(cè)方的彈藥狀態(tài)面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體征。

方舟中出現(xiàn)畫內(nèi)界面的案例并不多，但最為直觀也最為大家熟悉的就是游戲的主看板了。根據(jù)劇情，博士第一次操作島內(nèi)事務(wù)的時候，人并不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統(tǒng)進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內(nèi)的漂浮投影界面很好地突出了這種狀態(tài)。

這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設(shè)備，這些元素和后啟示錄科幻戰(zhàn)爭聯(lián)想有著密不可分的關(guān)系，而方舟在題材上的共通成為了這種設(shè)計契合的原因。當手機設(shè)備的電量、信號和時間信息都被按照統(tǒng)一風格放入了對應(yīng)的浮窗中，并且隨著陀螺儀的感應(yīng)整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。

當然，作為一款二次元養(yǎng)成戰(zhàn)略手游，它的幾個系統(tǒng)本身帶有分隔，且在小屏幕上對于可用性的關(guān)注遠在美學之上，畫內(nèi)界面元素的表現(xiàn)并不能和端游大作相提并論。關(guān)于 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監(jiān) Dino Ignacio 詳細地展示了游戲初期的開發(fā)歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，并對 Skeuomorphs（擬物）的概念如何貫穿游戲 UI 設(shè)計進行了深入的分析。關(guān)于這一點，后文也會簡單提到。

2 類 Fluent Design 設(shè)計思想的多元質(zhì)感在哪些細節(jié)中勾勒？

Fluent Design 是微軟在 2017 年提出的設(shè)計系統(tǒng)，這套設(shè)計系統(tǒng)據(jù)稱將為其產(chǎn)品視覺提供貫穿多平臺的能力，并對當時分散在多個大產(chǎn)品中的零碎的設(shè)計風格進行收束。

在最初的介紹視頻中，整個設(shè)計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質(zhì)，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統(tǒng)設(shè)計上的具體意義；但就我個人理解來說，它在視覺上的本質(zhì)表現(xiàn)是對「擬物」的簡化，核心是「質(zhì)感」。

如何設(shè)計一個 Fluent 的元素？首先找到這一元素在現(xiàn)實世界中最具有代表性的材質(zhì)，重現(xiàn)這一種材質(zhì)的紋理，剝離這種紋理的細部表現(xiàn)，最后加入光照的變化和交互時的強調(diào)方式。到此為止，一個基礎(chǔ) Fluent 組件的視覺呈現(xiàn)便設(shè)計完成了。

在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環(huán)境和物品重疊下，其所代表的「背景模糊」效果不同于一般的漸變，色彩結(jié)合更加柔和，能夠和畫面中銳化過的部分（如正文）產(chǎn)生鮮明的對比。在 Fluent 系統(tǒng)中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構(gòu)建視覺層級。

方舟的 UI 一個突出特點就是層級對比度極高，這里除了有高質(zhì)量的平面設(shè)計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關(guān)注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關(guān)于這點，后文會再次提到。

前面舉例如何創(chuàng)作一個 Fluent 組件時，敘述了筆者「提取材質(zhì)，剝離細部」的核心思路，這樣的結(jié)果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔認知的功能（辨識度），同時又必須保持其可玩性的特點。關(guān)于美術(shù)層面的質(zhì)感追求，日本畫師 @池上幸輝 稍早之前公布了一組自己的練手稿，充分體現(xiàn)了材質(zhì)之間核心差異感的魅力。

最后提一下 UI 上光線的使用。由于方舟是一款手游，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前游戲內(nèi)所有對打光有刻意表現(xiàn)的地方多用靜態(tài)貼圖而非即時渲染（例如簽到日歷的背光效果、得到材料獎勵時的背后光圈），期待以后有更多產(chǎn)品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現(xiàn)能力意味著更豐富的操作引導可能性。

3 界面扁平化后如何追求交互空間和所承載內(nèi)容的深度？

開個玩笑，微軟刻意強調(diào) Fluent 系統(tǒng)中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統(tǒng)級界面都太平了 —— 這成為了扁平化最大的誤區(qū)：扁平的出發(fā)點是減少頁面中和交互無關(guān)的細節(jié)，提升產(chǎn)品使用效率，并且加強設(shè)計元素的視覺統(tǒng)一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的后果。

從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設(shè)計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在采購中心、基建等不少頁面出都使用了卡片設(shè)計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應(yīng)的高度也就升高。這是扁平化凸顯頁面深度的方法之一。

在作戰(zhàn)章節(jié)選擇的界面中，加了粗白邊框的章節(jié)主題圖仿佛打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發(fā)現(xiàn)一圈內(nèi)投影布于頁面周圍。這種在攝影領(lǐng)域被稱為 vignette effect 的效果最初來源于因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應(yīng)」。現(xiàn)代平面設(shè)計中多作為一種創(chuàng)意效果加入到畫面中，以此來突出頁面中心的信息。這個設(shè)計實際還存在于方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。

在尋訪界面中加入的視差效果也是亮點之一，干員本身有大小區(qū)別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設(shè)計要素是一脈相承的，可以說非常走心。當然，筆者認為這里還可以用骨骼動畫+粒子效果的美術(shù)加持讓每次主打的某位干員更加突出，復現(xiàn)預(yù)熱宣傳 pv 里面的樣式。

4 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？

第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體并不是游戲內(nèi)最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現(xiàn)，因其筆畫顯著的粗細差異而具有相當?shù)目勺x性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統(tǒng)一的工業(yè)感聯(lián)系。

這種設(shè)計風格在同類的《少女前線》中也有同樣的呈現(xiàn)，后者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設(shè)定讓很多玩家拿到方舟后大呼面板的設(shè)計因制作人海貓的特殊經(jīng)歷而與少前密切相關(guān)。

當襯線體被用于拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區(qū)分。它的出現(xiàn)可以追溯到古羅馬時期，經(jīng)過不斷的發(fā)展演繹至今，風格區(qū)分因人而異，筆者喜歡分為以下四種基礎(chǔ)類型：

· Roman

· Renaissance (Old-Style)

· Transitional

· Modern

在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背后體現(xiàn)了刻字技術(shù)的專精細致，排印風格由傳統(tǒng)的手寫轉(zhuǎn)為現(xiàn)代印刷的過度脈絡(luò)。從這個發(fā)展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現(xiàn)代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現(xiàn)代感的同時，保留了精致的襯線裝飾，是時尚行業(yè)偏愛的選擇。

筆者非常喜愛作戰(zhàn)章節(jié)選擇頁面，里面五個章節(jié)的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結(jié)合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設(shè)計風格的部分不統(tǒng)一。

序章、第一章、第二章三張主題圖的英文字體使用和后面兩章存在明顯的不同 —— 以第一章為例，經(jīng)多個 OCR 工具的交叉檢驗和筆者的經(jīng)驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應(yīng)即思源宋體，典型的 Modern 襯線體），這種偏現(xiàn)代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協(xié)的結(jié)果。

加上背景人物塔露拉的衣著有著經(jīng)典歐洲皇室裝束褶飾領(lǐng)的設(shè)計、其使用冷兵器的武器風格... 現(xiàn)代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠占畫面空間，并徹底脫離了烏薩斯標志所透露出的莊重和威嚴感。

在后續(xù)的兩個章節(jié)主題圖以及方舟第一個帶新內(nèi)容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向于 Old Style 風格的字體，且字距縮進，中文字重進一步調(diào)低，無論是協(xié)調(diào)性還是和插畫的匹配度都提升了不少。

筆者后來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設(shè)定是用現(xiàn)代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設(shè)計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節(jié)里，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。

在基建系統(tǒng)中常見的工業(yè)風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現(xiàn)代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統(tǒng)的科技風格硬核了不少，要不然玩家真的以為在玩「天災(zāi)避難所」（笑）。

最后想談一下中英結(jié)合的設(shè)計手法。以筆者自身的經(jīng)驗，中英（或多語言）一起進行文本搭配設(shè)計總能夠比較「好看」，在多數(shù)場景為裝飾考慮。原因大致是字型的變化多樣而不單調(diào)、且異域文字的組合給人一種莫名的逼格 —— 這可能是源于幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫(yī)院里面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯(lián)想是再正常不過的事情。

方舟在大量的組件內(nèi)都加入了英文內(nèi)容，無論是在界面層面的裝飾性文本，還是在各類基礎(chǔ)美術(shù)資源中的設(shè)計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。

5 焦距控制和底圖處理等平面設(shè)計基礎(chǔ)手法如何塑造統(tǒng)一的視覺識別？

關(guān)于頁面深度的探討，前文已經(jīng)有所提及，敘述更多是基于扁平化頁面組件之間的層級關(guān)系和交互透視感。在此之外，方舟還通過焦距控制和使用統(tǒng)一風格化底圖處理方式來在靜態(tài)設(shè)計層面加大頁面深度（畫面多層級）和內(nèi)容深度（傳達信息）的表現(xiàn)。

先舉一個頁面之外的例子：以第一次進入采購中心時可露希爾的介紹插畫為例，在光線的設(shè)置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現(xiàn)有多個光源存在的立體空間；在元素的重疊上：多個處在人物前后的裝飾文本突出元素彼此之間的立體關(guān)系；最后在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前后的縱深得到了體現(xiàn)。

筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之后便得到了快速的普及，現(xiàn)在已經(jīng)成為了大家日常拍照的慣用手法，大眾接受度提高讓設(shè)計師在處理「模糊」這一增強效果時有了更多游刃有余的空間。

元素的重疊和豐富頁面表現(xiàn)是平面設(shè)計中最基礎(chǔ)也是最無法避開的一環(huán)。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統(tǒng)一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：

1. 噪點與漫畫網(wǎng)點紙風格的底圖處理方法，增強畫面細膩度，并見諸所有視覺出口；

2. 局部不穩(wěn)定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。

根據(jù)筆者一些看漫畫素描書的依稀記憶，網(wǎng)點紙應(yīng)該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設(shè)計是散點和條紋，前者相當于 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎(chǔ)組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設(shè)計的底圖中則能夠提升對比度；后者主要指粗條紋，類似警戒線的風格展現(xiàn)設(shè)計的工業(yè)感。這種底圖處理風格在游戲內(nèi)外均以驚人的統(tǒng)一性被使用。

在干員報道的界面（動態(tài)）、剿滅作戰(zhàn)背景地圖（靜態(tài)）等地方均可以找到局部馬賽克化的設(shè)計，不少注意到的玩家應(yīng)該可以立刻反應(yīng)出「失去同步」這個已經(jīng)有十年歷史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現(xiàn)人物記憶模糊或者連接不穩(wěn)定的設(shè)定情況，場景便會進入類似的狀態(tài)。綜合方舟加載游戲時所提到的「釋放神經(jīng)遞質(zhì)...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上并不在游戲中扮演博士自身，而是作為獨立的個體，利用系統(tǒng)接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待后續(xù)的劇情延展。

綜合來說，方舟有著非常嚴格的視覺規(guī)范和鮮明的品牌特點，這是統(tǒng)一埋入極具風格化的視覺單元、并嚴格把控所有素材出口的結(jié)果。平面設(shè)計風格是一個不斷進化的增量過程，在最新的章節(jié)資料片預(yù)告中，已經(jīng)可以看到許多新的元素被陸續(xù)加入，但依然可以找到原有風格的演變點。

6 有哪些過場銜接技巧降低了頁面層級的數(shù)量，并構(gòu)建了場景化的系統(tǒng)結(jié)構(gòu)？

這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數(shù)，以及在必要時提供合適的捷徑，來讓用戶對系統(tǒng)的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統(tǒng)玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬于新手引導的節(jié)奏設(shè)置問題，我們暫時不談，僅僅專注在界面的設(shè)計上。它們是：

1. 過場銜接動畫體現(xiàn)頁面的自然切換邏輯；

2. 風格化的堆疊浮窗與局部位移減少頁面層級；

3. 全局物品導航和系統(tǒng)功能外的空間聯(lián)系。

方舟在每一個需要進行頁面切換的地方都加入了過場動畫，并且根據(jù)頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統(tǒng)之間使用簡單的深色淡出，而有邏輯聯(lián)系的關(guān)卡主題和關(guān)卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統(tǒng)時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。

上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統(tǒng)直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設(shè)置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統(tǒng)里，則通過設(shè)施的主題色來進一步增強頁面的從屬關(guān)系。

除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經(jīng)典的例子就是干員的養(yǎng)成頁面 —— 里面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和干員信息頁的聯(lián)系：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業(yè)詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數(shù)值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現(xiàn)干員的切換，玩家在復雜的養(yǎng)成系統(tǒng)中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典范的界面之一。

最后提一下系統(tǒng)導航，主要分為兩部分：

1. 全局捷徑；

2. 系統(tǒng)場景化包裝。

第一部分主要針對復雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產(chǎn)出途徑的問題。相比于做一個獨立的游戲內(nèi)圖鑒，游戲加入了全局指示鏈功能，在任何一個物品 icon 出現(xiàn)的地方查看物品詳情都可以直接跳轉(zhuǎn)到對應(yīng)的掉落關(guān)卡和查看對應(yīng)的掉落幾率，這種組件化的設(shè)計極大地降低了玩家對于養(yǎng)成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關(guān)系前就可以進行收集和養(yǎng)成了。

第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統(tǒng)中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統(tǒng)并不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區(qū)域，通過賦予各系統(tǒng)一種空間上的聯(lián)系與包裝，使玩家的交互路徑更加具有代入感，產(chǎn)生沉浸的游戲記憶。

7 對于頁面與交互的未來展望

一個精心雕琢的產(chǎn)品值得更多的回望和遐想，在此筆者也希望提出幾點關(guān)于方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議，沒有加入可行性考量，不足為訓。

1. 界面元素對玩家的操作反饋待提升

對玩家持續(xù)而穩(wěn)定的刺激是保證其游戲心流的重要基礎(chǔ)，對于非局內(nèi)頁面以偏靜態(tài)呈現(xiàn)為主的方舟來說，在視覺層面提供足夠持續(xù)的刺激和交互的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節(jié)，比如面板右上角光線的變化，管道中溢出的煙霧，飄散的塵埃和雪花，以及部分地圖內(nèi)表示天災(zāi)的彌散光影等 —— 此舉下畫面的呼吸感得到了增強，提升了游戲的整體品質(zhì)。

但粒子效果貼圖不受玩家的操作輸入而產(chǎn)生變化，最后的觀感仿佛是在欣賞精致生動的電影，而非體驗一個交互豐富的游戲。如果粒子效果可以隨著玩家的操作輸入而有所變化，例如在章節(jié)選擇界面中，對章節(jié)卡片的拉動可以改變部分塵埃的飛行路線，產(chǎn)生阻擋和撞擊效果，整體反饋感將會增強許多。

2. 頁面交互方式的多樣性有提升空間

頁面關(guān)系和系統(tǒng)連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規(guī)的交互模式，但存在體驗單調(diào)的問題。現(xiàn)代產(chǎn)品設(shè)計中諸多新的嘗試，例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作，在非局內(nèi)的多數(shù)靜態(tài)頁面中被使用到的情況比較有限。

其實方舟的設(shè)計風格非常適合嵌入更現(xiàn)代的交互方式，在干員列表和基建系統(tǒng)這類使用了大量傳統(tǒng) GUI 組件的系統(tǒng)中尤其如此。幾個簡單的腦洞：比如在編隊管理頁面中允許拖拽卡片來改變干員的編排位置和出陣選擇；確認貿(mào)易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片并配合一定的縮放效果動畫；調(diào)整制造站的制作量時，使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經(jīng)典 4 picker 模式。諸如此類，都是優(yōu)化交互節(jié)奏、改善目前單純靠點擊操作而產(chǎn)生的粘滯手感的一些可能。

3. 其他一些有趣的發(fā)現(xiàn)

芯片搜索任務(wù)卡片上的 caption 是「Motor Learning | Powered by DeepMentality?」，Motor Learning（技能學習）理論是認知學研究框架中的核心，它探討了個體學習一項技能時的心理結(jié)構(gòu)、場景介入因素、影響效能的行為、以及先天性的能力缺乏等問題。無論是對復雜機體能力的學習（如運動、使用樂器）還是對持續(xù)性的身體應(yīng)激反應(yīng)調(diào)整都有系統(tǒng)性的拆解分析。

有趣的是，在機器學習算法和腦機接口技術(shù)成熟的未來，傳統(tǒng)認知理論思想或許將被遷移融合，人類機體對新技能的掌握過程被無限縮短，甚至可能通過「插入芯片」來實現(xiàn)。在此聯(lián)想開來：游戲設(shè)定干員升階需要芯片這種材料，但這個項目的名稱還是被定義為 Motor Learning 而非 Machine Learning，背后蘊含了對人體邊界的探討 —— 在截肢義體改造、藥化電子腦盛行的科幻未來中，人類通過自身意志形成的行為認知，會剩下多少呢？

誠然，方舟是一款結(jié)合了部分經(jīng)典文學意向作為背景考據(jù)的二次元游戲，題材更偏向廢土而非賽博朋克。后者自身蘊含的時代先鋒性，在一個地外與未來的溫床中，應(yīng)該能做出更多關(guān)于跨域種族、性別和人類意識的思考。筆者也因此對明年的《賽博朋克2077》期待萬分。

結(jié)語

明日方舟是手游領(lǐng)域內(nèi)非常罕見、有著極高美術(shù)質(zhì)感追求和高度統(tǒng)一視覺規(guī)范標準的產(chǎn)品，輔以觀察和拆解，可以發(fā)現(xiàn)藏在「好看」背后先進的設(shè)計理念，它的成功絕對不是一次爆冷或者偶然。方舟在運營和受眾捕捉層面已經(jīng)有足夠的案例值得分析學習，其頁面與交互最終也要成為一個好玩法的載體。雖然不會成為主角，但依舊有不可取代的作用。

界面于筆者而言，是連接系統(tǒng)邏輯與人的意志輸入之間唯一的紐帶和窗口。我們看到的每一個像素點，眼球每次細微的轉(zhuǎn)動，手指的每一個操作，都依賴界面?zhèn)鬟_信息輸入，并期待其返還我們意料之中的結(jié)果。發(fā)展至今，我們看到了《荒野大鏢客》電影模式中完全「去 UI 化」的界面思想，也能看到《女神異聞錄 5》一樣把界面作為其美術(shù)風格的核心演繹環(huán)節(jié)的極端案例。人機交互的進步，是對人類感知觸點（sensual touch point）和信息處理能力的不斷探索，會在未來更加多樣化、更加精巧。