訪問手機版

掃瞄體驗手機版

訪客您好
第三方帳號登入
  • 點擊聯絡客服

    在線時間:永遠不在

    客服電話

    暫不提供

    電子郵件

    pinkyuei@gmail.com
  • MO次元APP

    随時随地分享快樂

  • 掃瞄QR code

    關注MO次元粉專

推薦文章 更多
up主
Lv.9
第 2 號會員,5356活躍度
  • 16202發文
  • 10868主题
  • 0關注
  • 0粉絲
這個人很懶,什麼也没有留下。
  • mayuyu應援

    mayuyu應援
  • 阿醬應援

    阿醬應援
  • 優子應援

    優子應援
  • mariko

    mariko
  • 由紀應援

    由紀應援
最近評論
热門專题

[閒聊] 騰訊內部拆解:爲什麽說《明日方舟》的這個視覺細節設計既好看,又先進?

[複製鏈接]
admin 發表於 2019-7-19 21:36:41 | 顯示全部樓層 |閱讀模式 打印 上一主題 下一主題 |

內容來源于騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元産品,無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外,它的UI/UX設計也值得一提,本文中,騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
qMNMAgczt0tG3q7E.jpg



綜述

《明日方舟》(後文簡稱「方舟」)上線至今已經超過兩個月,其突出的美術風格和國內遊戲罕見的世界觀題材、爲重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法,行業內外許多前輩都紛紛給出了不同的解讀和評析。
FL0lrsCo4sC0AiCc.jpg

但對于筆者來說,第一次通過 PRTS 接入羅德島時最爲眼前一亮的,卻是它的 UI —— 它喚醒了我對于很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入,方舟的頁面交互與其紮實的平面設計功底深得我心,因而決定動筆記錄,分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點,中間穿插較多的對比與發散,因而描述重點時而會跳出方舟本身,部分內容涉及動效、氛圍、美術和外延話題的探討,可能超出了頁面與交互的定義範圍,筆者會盡可能地保證延伸都有一定的基准點。這六點是:
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感?
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒?
3. 界面扁平化後如何追求交互空間和所承載內容的深度?
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風?
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別?
6. 有哪些過場銜接技巧降低了頁面層級的數量,並構建了場景化的系統結構?
最後,筆者會分享一些在遊戲過程中的有趣發現,並淺談個人對于方舟的頁面與交互未來的展望。

一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感?

與「畫內界面」相對應的是「畫外界面」,如果這個詞比較陌生,那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外,即場景中的某個信息單元僅僅呈現給觀衆(玩家),而非呈現給劇中的角色。在多數遊戲界面中,用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD(Heads-up Display)的方式出現,例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反,「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家,從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區,增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式,其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內,而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同,子彈的指示方式成爲了槍支特性之一。另一個案例是《生化危機》,困難模式下角色的血量通過屏幕的整個顔色和視野模糊程度來指示,受傷情況越嚴重越看不清楚,加上搖晃力度變大,模擬了角色的真實體征。
Or1FWWF6a8Lz97az.jpg

方舟中出現畫內界面的案例並不多,但最爲直觀也最爲大家熟悉的就是遊戲的主看板了。根據劇情,博士第一次操作島內事務的時候,人並不身處羅德島中,而是通過一個名爲 PRTS(Prmitive Rhodesisland Terminal Service)的系統進行遠程接入,所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
WjQzDvEcGluFWuGr.jpg

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

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

二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒?
Fluent Design 是微軟在 2017 年提出的設計系統,這套設計系統據稱將爲其産品視覺提供貫穿多平台的能力,並對當時分散在多個大産品中的零碎的設計風格進行收束。
在最初的介紹視頻中,整個設計風格被拆解成以下五個方面:Light 光線,Depth 深度,Motion 動作,Material 材質,Scale 比例。通過 Specs 指引,我們可以知道每個分類在底層系統設計上的具體意義;但就我個人理解來說,它在視覺上的本質表現是對「擬物」的簡化,核心是「質感」
如何設計一個 Fluent 的元素?首先找到這一元素在現實世界中最具有代表性的材質,重現這一種材質的紋理,剝離這種紋理的細部表現,最後加入光照的變化和交互時的強調方式。到此爲止,一個基礎 Fluent 組件的視覺呈現便設計完成了。
ghl9yKh0kkhHN9o0.jpg

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

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

前面舉例如何創作一個 Fluent 組件時,敘述了筆者「提取材質,剝離細部」的核心思路,這樣的結果其實是物件的「積木化」:積木作爲孩童的啓蒙玩具,需要承擔讓認知的功能(辨識度),同時又必須保持其可玩性的特點。關于美術層面的質感追求,日本畫師 @池上幸輝 稍早之前公布了一組自己的練手稿,充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由于方舟是一款手遊,因此交互上沒有辦法做指針懸停效果,在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染(例如簽到日曆的背光效果、得到材料獎勵時的背後光圈),期待以後有更多産品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素,界面更好的表現能力意味著更豐富的操作引導可能性。
vwaaKNakAJRB9arn.jpg

三、界面扁平化後如何追求交互空間和所承載內容的深度?
開個玩笑,微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素,其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成爲了扁平化最大的誤區:扁平的出發點是減少頁面中和交互無關的細節,提升産品使用效率,並且加強設計元素的視覺統一性。如果單純理解爲「平」,就會導致用戶學習成本增高和畫面失焦的後果。
dDnnBp3CD3xTnBNW.jpg

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

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

在尋訪界面中加入的視差效果也是亮點之一,幹員本身有大小區別(暗示遠近)的情況下,加入視差可以讓透視感成型,這和整體的平面設計要素是一脈相承的,可以說非常走心。當然,筆者認爲這裏還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出,複現預熱宣傳 pv 裏面的樣式。
o2Iej95UUqz9DqhQ.jpg

四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風?
第一印象中,方舟頁面明顯的特點是使用了大量的襯線字體,但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中,襯線體更多以中文襯線體的方式出現,因其筆畫顯著的粗細差異而具有相當的可讀性,以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯系。
這種設計風格在同類的《少女前線》中也有同樣的呈現,後者甚至因其背景特點而更加依賴這種字型所帶來的複古金屬感,也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因制作人海貓的特殊經曆而與少前密切相關。
當襯線體被用于拉丁文體時,風格的變化會更加嚴謹一些,因而使用需要作出區分。它的出現可以追溯到古羅馬時期,經過不斷的發展演繹至今,風格區分因人而異,筆者喜歡分爲以下四種基礎類型:
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中,襯線和比劃之間的粗細差別越來越大,字肩的弧度切角越來越平直,背後體現了刻字技術的專精細致,排印風格由傳統的手寫轉爲現代印刷的過度脈絡。從這個發展路徑可以看出,襯線拉丁體其實樣式豐富,「襯線字體代表了古典、嚴謹;無襯線字體則代表了現代」的准則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時,保留了精致的襯線裝飾,是時尚行業偏愛的選擇。
KHTa39SGTFFTzCfV.jpg

筆者非常喜愛作戰章節選擇頁面,裏面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印,結合古典的襯線字型顯得別有韻味。但即使如此,這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章爲例,經多個 OCR 工具的交叉檢驗和筆者的經驗,「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans(CJK 對應即思源宋體,典型的 Modern 襯線體),這種偏現代的襯線字樣古典感稍有不足,感覺是爲了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的,便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」(即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ),字型圓潤而粗大,大幅度擠占畫面空間,並徹底脫離了烏薩斯標志所透露出的莊重和威嚴感。
MleV06hHEEH26NhB.jpg

在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中,拉丁文選擇了 Trajan 這種更偏向于 Old Style 風格的字體,且字距縮進,中文字重進一步調低,無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材,估計當時的 VI 設定是用現代字型(甚至是無襯線)來匹配科技先進、光怪陸離的移動城市龍門,而用較爲古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作爲核心舞台的章節裏,複古的騎士短暫落幕,代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
zXHwn8Z97vV0d0xX.jpg

在基建系統中常見的工業風僞等距字體 Bender 也是方舟中比較有特色的字體之一(「僞」是因爲其看上去很像現代等距體,但實際只有少部分字符是等距的),它的加入讓整個基建系統的科技風格硬核了不少,要不然玩家真的以爲在玩「天災避難所」(笑)。
p75h5hhsYSYz3S9u.jpg

最後想談一下中英結合的設計手法。以筆者自身的經驗,中英(或多語言)一起進行文本搭配設計總能夠比較「好看」,在多數場景爲裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源于幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資(如日本的零食或者醫院裏面的吊針藥包),所以潛移默化地植入了這種認知;再加上科幻啓蒙小說和電影多源自國外,把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容,無論是在界面層面的裝飾性文本,還是在各類基礎美術資源中的設計,無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下,目前的劇情對白展開,顯得刻意又無力,絲毫沒有塑造人物個性的能力,僅僅爲過場所用,亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別?
關于頁面深度的探討,前文已經有所提及,敘述更多是基于扁平化頁面組件之間的層級關系和交互透視感。在此之外,方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度(畫面多層級)和內容深度(傳達信息)的表現。
先舉一個頁面之外的例子:以第一次進入采購中心時可露希爾的介紹插畫爲例,在光線的設置上,用亮度溢出的背景中心搭配人物插畫本身的光影處理,輔以多束散射的橫光,來在一個平面中表現有多個光源存在的立體空間;在元素的重疊上:多個處在人物前後的裝飾文本突出元素彼此之間的立體關系;最後在焦距的控制上:通過失焦的背景凸顯畫面中心,又在部分前景元素上做更多的邊緣失焦處理,讓人物前後的縱深得到了體現。
筆者認爲,Out of focus foreground framing(前景模糊取鏡)自 iPhone 的人像模式推出之後便得到了快速的普及,現在已經成爲了大家日常拍照的慣用手法,大衆接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有余的空間。
G1h8zYV7zPZY7zQN.jpg

元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置,核心始終是突出主體,使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見,比較有特點的則是:
1. 噪點與漫畫網點紙風格的底圖處理方法,增強畫面細膩度,並見諸所有視覺出口;
2. 局部不穩定馬賽克化,營造出帶梗的信息暗示,爲故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶,網點紙應該是有多種類型的,比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋,前者相當于 Grain effect(噪化效果)的低密度高顆粒度版本,用在基礎組件(如按鈕上)可以使留白不顯得單薄,用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度;後者主要指粗條紋,類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
UKWRRi4DGlY2p40W.jpg

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

綜合來說,方舟有著非常嚴格的視覺規範和鮮明的品牌特點,這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程,在最新的章節資料片預告中,已經可以看到許多新的元素被陸續加入,但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量,並構建了場景化的系統結構?
這一部分主要包括三方面,以此來探究方舟是如何通過減少頁面的層級和切換次數,以及在必要時提供合適的捷徑,來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌,其中一個核心槽點就是新手引導的時候紮堆灌輸各種系統玩法,讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬于新手引導的節奏設置問題,我們暫時不談,僅僅專注在界面的設計上。它們是:
1. 過場銜接動畫體現頁面的自然切換邏輯;
2. 風格化的堆疊浮窗與局部位移減少頁面層級;
3. 全局物品導航和系統功能外的空間聯系。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫,並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較爲獨立的系統之間使用簡單的深色淡出,而有邏輯聯系的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時,除了動畫效果還會展示插畫,減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到,方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感,一些較爲次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋;在基建系統裏,則通過設施的主題色來進一步增強頁面的從屬關系。
除了浮窗,某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式,最經典的例子就是幹員的養成頁面—— 裏面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面,而是多少保持著和幹員信息頁的聯系:升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換,玩家在複雜的養成系統中一直沒有離開過同一張 canvas,筆者認爲這是方舟交互最爲典範的界面之一。
oNL3gh3OnHVnRZN3.jpg

最後提一下系統導航,主要分爲兩部分:
1. 全局捷徑;
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和産出途徑的問題。相比于做一個獨立的遊戲內圖鑒,遊戲加入了全局指示鏈功能,在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落幾率,這種組件化的設計極大地降低了玩家對于養成科技樹的學習成本,甚至在不需要完全摸清楚材料層級關系前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕,玩家可以通過這個導航快速進入任何一個系統中,而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的,而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域,通過賦予各系統一種空間上的聯系與包裝,使玩家的交互路徑更加具有代入感,産生沉浸的遊戲記憶。
Cpt1u66E3zIyg5sK.jpg

七、對于頁面與交互的未來展望
一個精心雕琢的産品值得更多的回望和遐想,在此筆者也希望提出幾點關于方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議,沒有加入可行性考量,不足爲訓。
1. 界面元素對玩家的操作反饋待提升
對玩家持續而穩定的刺激是保證其遊戲心流的重要基礎,對于非局內頁面以偏靜態呈現爲主的方舟來說,在視覺層面提供足夠持續的刺激和交互的的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節,比如面板右上角光線的變化,管道中溢出的煙霧,飄散的塵埃和雪花,以及部分地圖內表示天災的彌散光影等 —— 此舉下畫面的呼吸感得到了增強,提升了遊戲的整體品質。
但粒子效果貼圖不受玩家的操作輸入而産生變化,最後的觀感仿佛是在欣賞精致生動的電影,而非體驗一個交互豐富的遊戲。如果粒子效果可以隨著玩家的操作輸入而有所變化,例如在章節選擇界面中,對章節卡片的拉動可以改變部分塵埃的飛行路線,産生阻擋和撞擊效果,整體反饋感將會增強許多。
2. 頁面交互方式的多樣性有提升空間
頁面關系和系統連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規的交互模式,但存在體驗單調的問題。現代産品設計中諸多新的嘗試,例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作,在非局內的多數靜態頁面中被使用到的情況比較有限。
其實方舟的設計風格非常適合嵌入更現代的交互方式,在幹員列表和基建系統這類使用了大量傳統 GUI 組件的系統中尤其如此。幾個簡單的腦洞:比如在編隊管理頁面中允許拖拽卡片來改變幹員的編排位置和出陣選擇;確認貿易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片並配合一定的縮放效果動畫;調整制造站的制作量時,使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經典 4 picker 模式。諸如此類,都是優化交互節奏、改善目前單純靠點擊操作而産生的粘滯手感的一些可能。
Nb8j0HjhCF8ZHm81.jpg

3. 其他一些有趣的發現
芯片搜索任務卡片上的 caption 是「Motor Learning | Powered by DeepMentality™」,Motor Learning(技能學習)理論是認知學研究框架中的核心,它探討了個體學習一項技能時的心理結構、場景介入因素、影響效能的行爲、以及先天性的能力缺乏等問題。無論是對複雜機體能力的學習(如運動、使用樂器)還是對持續性的身體應激反應調整都有系統性的拆解分析。
有趣的是,在機器學習算法和腦機接口技術成熟的未來,傳統認知理論思想或許將被遷移融合,人類機體對新技能的掌握過程被無限縮短,甚至可能通過「插入芯片」來實現。在此聯想開來:遊戲設定幹員升階需要芯片這種材料,但這個項目的名稱還是被定義爲 Motor Learning 而非 Machine Learning,背後蘊含了對人體邊界的探討 —— 在截肢義體改造、藥化電子腦盛行的科幻未來中,人類通過自身意志形成的行爲認知,會剩下多少呢?
誠然,方舟是一款結合了部分經典文學意向作爲背景考據的二次元遊戲,題材更偏向廢土而非賽博朋克。後者自身蘊含的時代先鋒性,在一個地外與未來的溫床中,應該能做出更多關于跨域種族、性別和人類意識的思考。筆者也因此對明年的《賽博朋克2077》期待萬分。
dVVpyv15iQ4YFEYr.jpg


結語

明日方舟是手遊領域內非常罕見、有著極高美術質感追求和高度統一視覺規範標准的産品,輔以觀察和拆解,可以發現藏在「好看」背後先進的設計理念。它的成功絕對不是一次爆冷或者偶然。方舟在運營和受衆捕捉層面已經有足夠的案例值得分析學習,其頁面與交互最終也要成爲一個好玩法的載體。雖然不會成爲主角,但依舊有不可取代的作用。
界面于筆者而言,是連接系統邏輯與人的意志輸入之間唯一的紐帶和窗口。我們看到的每一個像素點,眼球每次細微的轉動,手指的每一個操作,都依賴界面傳達信息輸入,並期待其返還我們意料之中的結果。發展至今,我們看到了《荒野大镖客》電影模式中完全「去 UI 化」的界面思想,也能看到《女神異聞錄 5》一樣把界面作爲其美術風格的核心演繹環節的極端案例。人機交互的進步,是對人類感知觸點(sensual touch point)和信息處理能力的不斷探索,會在未來更加多樣化、更加精巧。
回復

使用道具 舉報

精彩评论23

falcon521528 發表於 2019-7-19 21:39:17 | 顯示全部樓層
ui在全球遊戲業內,育碧說第二,沒人敢說第一 育碧遊戲不一定是最好的,但是育碧的ui一定是最舒服的,少前雲母組,海貓都對育碧的ui都有所學習,才能發展至明日方舟
回復 支持 反對

使用道具 舉報

snake1266 發表於 2019-7-19 21:41:53 | 顯示全部樓層
一個遊戲都能研究出來這麽多東西,厲害了
回復 支持 反對

使用道具 舉報

1020307747 發表於 2019-7-19 21:44:29 | 顯示全部樓層
好的遊戲,剛進頁面舒適感就油然而生
回復 支持 反對

使用道具 舉報

jhunhoon 發表於 2019-7-19 21:47:05 | 顯示全部樓層
扯太多了,就是個ui而已沒有本質上的變化
回復 支持 反對

使用道具 舉報

b85040312 發表於 2019-7-19 21:49:41 | 顯示全部樓層
表面精致。實際體驗比較一般。由于...有的東西玩了一個月也沒明白,怕說錯,就不多說了。
回復 支持 反對

使用道具 舉報

i3i3 發表於 2019-7-19 21:52:17 | 顯示全部樓層
舟學家
回復 支持 反對

使用道具 舉報

a0972353814 發表於 2019-7-19 21:54:53 | 顯示全部樓層
騰訊的遊戲從畫面和交互上講都是好的産品,但一點感受不到主創人員對遊戲的熱愛。
回復 支持 反對

使用道具 舉報

fhjfjdggdf 發表於 2019-7-19 21:57:29 | 顯示全部樓層
立繪美如畫,反正進了遊戲都是大頭娃娃
回復 支持 反對

使用道具 舉報

fate9544 發表於 2019-7-19 22:00:05 | 顯示全部樓層
界面太暗,指揮官根本適應不了,棄了
回復 支持 反對

使用道具 舉報

cloudyzp 發表於 2019-7-19 22:02:41 | 顯示全部樓層
知道你在誇方舟,但是看不懂
回復 支持 反對

使用道具 舉報

xdsevgftnjhu 發表於 2019-7-19 22:05:17 | 顯示全部樓層
你去看下崩壞三的聖痕,那才叫解密
回復 支持 反對

使用道具 舉報

GothKimNg 發表於 2019-7-19 22:07:53 | 顯示全部樓層
這種UI真的看習慣了,少前、三崩子都差不多,這遊戲唯一吸引我的事立繪和養肝系統
回復 支持 反對

使用道具 舉報

fate9544 發表於 2019-7-19 22:10:29 | 顯示全部樓層
鵝廠的充值界面能學學人家那麽幹淨明朗就謝天謝地了,還研究[黑線]
回復 支持 反對

使用道具 舉報

cccfff 發表於 2019-7-19 22:13:05 | 顯示全部樓層
我記得方舟公測之前,有人用同樣的行文分析了方舟必然失敗的幾個點[靈光一閃]
回復 支持 反對

使用道具 舉報

neo84716 發表於 2019-7-19 22:15:41 | 顯示全部樓層
ui在全球遊戲業內,育碧說第二,沒人敢說第一
育碧遊戲不一定是最好的,但是育碧的ui一定是最舒服的,少前雲母組,海貓都對育碧的ui都有所學習,才能發展至明日方舟
回復 支持 反對

使用道具 舉報

RedArcueid 發表於 2019-7-19 22:18:17 | 顯示全部樓層
舟學家????????
回復 支持 反對

使用道具 舉報

rickwu101 發表於 2019-7-19 22:20:53 | 顯示全部樓層
立繪很好看,戰鬥直接變成尼瑪幼兒園簡筆畫,戰鬥人物必須弄好看,因爲戰鬥時間比你在大廳時間多多了
回復 支持 反對

使用道具 舉報

魯路修 發表於 2019-7-19 22:23:29 | 顯示全部樓層
所以說,我相信騰訊模仿出的新遊戲會比這個更好
回復 支持 反對

使用道具 舉報

ww260624 發表於 2019-7-19 22:26:05 | 顯示全部樓層
失望,想學東西才進來的,收錢了吧,有的解鎖真的強行
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 加入會員 Sign in with facebook

本版積分規則

關於本站:萌MO次元-ACG一站式分享平台,包含 動漫、遊戲、資訊、cosplay、動漫美图、動漫周邊,動漫音樂等跟二次元相關内容,
  • 2007~2009 SDGO鋼彈基地
  • 2009~2020 遊戲戰紀
  • 2020~萌MO次元
  • 違法訊息舉報信箱:pinkyuei@gmail.com

掃瞄QRcode

體驗手機端

聲明:本站不提供任何視聽上傳服務,所有內容均來自視頻分享站點所提供的公開引用資源,作品版權歸原作者所有 禁止商用 違者必究。

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 星点互联设计