動圖告訴你，為什麼你的設計既成不了擺設也稱不上技術
外交部長說：沒有腦洞的設計師不是好設計師！▲這門夠酷炫！▲理髮店的趕緊來領你的名片，設計好了！▲你的眼睛被騙了吧！▲只能說計算的真精準▲這個打包裝置夠便捷...
'騰訊內部拆解：為什麼說《明日方舟》的這個視覺細節設計既好看，又先進？'
""
"
"
內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
最後提一下系統導航，主要分為兩部分：
1. 全局捷徑；
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產出途徑的問題。相比於做一個獨立的遊戲內圖鑑，遊戲加入了全局指示鏈功能，在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落機率，這種組件化的設計極大地降低了玩家對於養成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關係前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域，通過賦予各系統一種空間上的聯繫與包裝，使玩家的交互路徑更加具有代入感，產生沉浸的遊戲記憶。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
最後提一下系統導航，主要分為兩部分：
1. 全局捷徑；
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產出途徑的問題。相比於做一個獨立的遊戲內圖鑑，遊戲加入了全局指示鏈功能，在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落機率，這種組件化的設計極大地降低了玩家對於養成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關係前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域，通過賦予各系統一種空間上的聯繫與包裝，使玩家的交互路徑更加具有代入感，產生沉浸的遊戲記憶。
七、對於頁面與交互的未來展望
一個精心雕琢的產品值得更多的回望和遐想，在此筆者也希望提出幾點關於方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議，沒有加入可行性考量，不足為訓。
1. 界面元素對玩家的操作反饋待提升
對玩家持續而穩定的刺激是保證其遊戲心流的重要基礎，對於非局內頁面以偏靜態呈現為主的方舟來說，在視覺層面提供足夠持續的刺激和交互的的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節，比如面板右上角光線的變化，管道中溢出的煙霧，飄散的塵埃和雪花，以及部分地圖內表示天災的彌散光影等 —— 此舉下畫面的呼吸感得到了增強，提升了遊戲的整體品質。
但粒子效果貼圖不受玩家的操作輸入而產生變化，最後的觀感彷彿是在欣賞精緻生動的電影，而非體驗一個交互豐富的遊戲。如果粒子效果可以隨著玩家的操作輸入而有所變化，例如在章節選擇界面中，對章節卡片的拉動可以改變部分塵埃的飛行路線，產生阻擋和撞擊效果，整體反饋感將會增強許多。
2. 頁面交互方式的多樣性有提升空間
頁面關係和系統連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規的交互模式，但存在體驗單調的問題。現代產品設計中諸多新的嘗試，例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作，在非局內的多數靜態頁面中被使用到的情況比較有限。
其實方舟的設計風格非常適合嵌入更現代的交互方式，在幹員列表和基建系統這類使用了大量傳統 GUI 組件的系統中尤其如此。幾個簡單的腦洞：比如在編隊管理頁面中允許拖拽卡片來改變幹員的編排位置和出陣選擇；確認貿易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片並配合一定的縮放效果動畫；調整製造站的製作量時，使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經典 4 picker 模式。諸如此類，都是優化交互節奏、改善目前單純靠點擊操作而產生的粘滯手感的一些可能。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
最後提一下系統導航，主要分為兩部分：
1. 全局捷徑；
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產出途徑的問題。相比於做一個獨立的遊戲內圖鑑，遊戲加入了全局指示鏈功能，在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落機率，這種組件化的設計極大地降低了玩家對於養成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關係前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域，通過賦予各系統一種空間上的聯繫與包裝，使玩家的交互路徑更加具有代入感，產生沉浸的遊戲記憶。
七、對於頁面與交互的未來展望
一個精心雕琢的產品值得更多的回望和遐想，在此筆者也希望提出幾點關於方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議，沒有加入可行性考量，不足為訓。
1. 界面元素對玩家的操作反饋待提升
對玩家持續而穩定的刺激是保證其遊戲心流的重要基礎，對於非局內頁面以偏靜態呈現為主的方舟來說，在視覺層面提供足夠持續的刺激和交互的的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節，比如面板右上角光線的變化，管道中溢出的煙霧，飄散的塵埃和雪花，以及部分地圖內表示天災的彌散光影等 —— 此舉下畫面的呼吸感得到了增強，提升了遊戲的整體品質。
但粒子效果貼圖不受玩家的操作輸入而產生變化，最後的觀感彷彿是在欣賞精緻生動的電影，而非體驗一個交互豐富的遊戲。如果粒子效果可以隨著玩家的操作輸入而有所變化，例如在章節選擇界面中，對章節卡片的拉動可以改變部分塵埃的飛行路線，產生阻擋和撞擊效果，整體反饋感將會增強許多。
2. 頁面交互方式的多樣性有提升空間
頁面關係和系統連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規的交互模式，但存在體驗單調的問題。現代產品設計中諸多新的嘗試，例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作，在非局內的多數靜態頁面中被使用到的情況比較有限。
其實方舟的設計風格非常適合嵌入更現代的交互方式，在幹員列表和基建系統這類使用了大量傳統 GUI 組件的系統中尤其如此。幾個簡單的腦洞：比如在編隊管理頁面中允許拖拽卡片來改變幹員的編排位置和出陣選擇；確認貿易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片並配合一定的縮放效果動畫；調整製造站的製作量時，使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經典 4 picker 模式。諸如此類，都是優化交互節奏、改善目前單純靠點擊操作而產生的粘滯手感的一些可能。
3. 其他一些有趣的發現
芯片搜索任務卡片上的 caption 是「Motor Learning | Powered by DeepMentality™」，Motor Learning（技能學習）理論是認知學研究框架中的核心，它探討了個體學習一項技能時的心理結構、場景介入因素、影響效能的行為、以及先天性的能力缺乏等問題。無論是對複雜機體能力的學習（如運動、使用樂器）還是對持續性的身體應激反應調整都有系統性的拆解分析。
有趣的是，在機器學習算法和腦機接口技術成熟的未來，傳統認知理論思想或許將被遷移融合，人類機體對新技能的掌握過程被無限縮短，甚至可能通過「插入芯片」來實現。在此聯想開來：遊戲設定幹員升階需要芯片這種材料，但這個項目的名稱還是被定義為 Motor Learning 而非 Machine Learning，背後蘊含了對人體邊界的探討 —— 在截肢義體改造、藥化電子腦盛行的科幻未來中，人類通過自身意志形成的行為認知，會剩下多少呢？
誠然，方舟是一款結合了部分經典文學意向作為背景考據的二次元遊戲，題材更偏向廢土而非賽博朋克。後者自身蘊含的時代先鋒性，在一個地外與未來的溫床中，應該能做出更多關於跨域種族、性別和人類意識的思考。筆者也因此對明年的《賽博朋克2077》期待萬分。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
最後提一下系統導航，主要分為兩部分：
1. 全局捷徑；
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產出途徑的問題。相比於做一個獨立的遊戲內圖鑑，遊戲加入了全局指示鏈功能，在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落機率，這種組件化的設計極大地降低了玩家對於養成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關係前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域，通過賦予各系統一種空間上的聯繫與包裝，使玩家的交互路徑更加具有代入感，產生沉浸的遊戲記憶。
七、對於頁面與交互的未來展望
一個精心雕琢的產品值得更多的回望和遐想，在此筆者也希望提出幾點關於方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議，沒有加入可行性考量，不足為訓。
1. 界面元素對玩家的操作反饋待提升
對玩家持續而穩定的刺激是保證其遊戲心流的重要基礎，對於非局內頁面以偏靜態呈現為主的方舟來說，在視覺層面提供足夠持續的刺激和交互的的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節，比如面板右上角光線的變化，管道中溢出的煙霧，飄散的塵埃和雪花，以及部分地圖內表示天災的彌散光影等 —— 此舉下畫面的呼吸感得到了增強，提升了遊戲的整體品質。
但粒子效果貼圖不受玩家的操作輸入而產生變化，最後的觀感彷彿是在欣賞精緻生動的電影，而非體驗一個交互豐富的遊戲。如果粒子效果可以隨著玩家的操作輸入而有所變化，例如在章節選擇界面中，對章節卡片的拉動可以改變部分塵埃的飛行路線，產生阻擋和撞擊效果，整體反饋感將會增強許多。
2. 頁面交互方式的多樣性有提升空間
頁面關係和系統連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規的交互模式，但存在體驗單調的問題。現代產品設計中諸多新的嘗試，例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作，在非局內的多數靜態頁面中被使用到的情況比較有限。
其實方舟的設計風格非常適合嵌入更現代的交互方式，在幹員列表和基建系統這類使用了大量傳統 GUI 組件的系統中尤其如此。幾個簡單的腦洞：比如在編隊管理頁面中允許拖拽卡片來改變幹員的編排位置和出陣選擇；確認貿易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片並配合一定的縮放效果動畫；調整製造站的製作量時，使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經典 4 picker 模式。諸如此類，都是優化交互節奏、改善目前單純靠點擊操作而產生的粘滯手感的一些可能。
3. 其他一些有趣的發現
芯片搜索任務卡片上的 caption 是「Motor Learning | Powered by DeepMentality™」，Motor Learning（技能學習）理論是認知學研究框架中的核心，它探討了個體學習一項技能時的心理結構、場景介入因素、影響效能的行為、以及先天性的能力缺乏等問題。無論是對複雜機體能力的學習（如運動、使用樂器）還是對持續性的身體應激反應調整都有系統性的拆解分析。
有趣的是，在機器學習算法和腦機接口技術成熟的未來，傳統認知理論思想或許將被遷移融合，人類機體對新技能的掌握過程被無限縮短，甚至可能通過「插入芯片」來實現。在此聯想開來：遊戲設定幹員升階需要芯片這種材料，但這個項目的名稱還是被定義為 Motor Learning 而非 Machine Learning，背後蘊含了對人體邊界的探討 —— 在截肢義體改造、藥化電子腦盛行的科幻未來中，人類通過自身意志形成的行為認知，會剩下多少呢？
誠然，方舟是一款結合了部分經典文學意向作為背景考據的二次元遊戲，題材更偏向廢土而非賽博朋克。後者自身蘊含的時代先鋒性，在一個地外與未來的溫床中，應該能做出更多關於跨域種族、性別和人類意識的思考。筆者也因此對明年的《賽博朋克2077》期待萬分。
結語
明日方舟是手遊領域內非常罕見、有著極高美術質感追求和高度統一視覺規範標準的產品，輔以觀察和拆解，可以發現藏在「好看」背後先進的設計理念。它的成功絕對不是一次爆冷或者偶然。方舟在運營和受眾捕捉層面已經有足夠的案例值得分析學習，其頁面與交互最終也要成為一個好玩法的載體。雖然不會成為主角，但依舊有不可取代的作用。
界面於筆者而言，是連接系統邏輯與人的意志輸入之間唯一的紐帶和窗口。我們看到的每一個像素點，眼球每次細微的轉動，手指的每一個操作，都依賴界面傳達信息輸入，並期待其返還我們意料之中的結果。發展至今，我們看到了《荒野大鏢客》電影模式中完全「去 UI 化」的界面思想，也能看到《女神異聞錄 5》一樣把界面作為其美術風格的核心演繹環節的極端案例。人機交互的進步，是對人類感知觸點（sensual touch point）和信息處理能力的不斷探索，會在未來更加多樣化、更加精巧。
"內容來源於騰訊遊戲學院《真經閣》欄目。
《明日方舟》是今年遊戲市場最受關注的一款二次元產品，無論是美術題材還是戰鬥玩法都具備一定的標杆特質。其實除此之外，它的UI/UX設計也值得一提，本文中，騰訊IEG互動娛樂事業群/互動娛樂發行線的講師AJ將從6個不同的角度展開分析。
綜述
《明日方舟》（後文簡稱「方舟」）上線至今已經超過兩個月，其突出的美術風格和國內遊戲罕見的世界觀題材、為重度二次元玩家和塔防策略愛好者都津津樂道的戰鬥玩法，行業內外許多前輩都紛紛給出了不同的解讀和評析。
但對於筆者來說，第一次通過 PRTS 接入羅德島時最為眼前一亮的，卻是它的 UI —— 它喚醒了我對於很多遊戲的記憶和一些設計風格的懷舊。隨著遊戲體驗的深入，方舟的頁面交互與其紮實的平面設計功底深得我心，因而決定動筆記錄，分享一下對方舟在界面設計層面的部分認知和思考。
我將從以下 6 個不同的角度分析方舟 UI/UX 的特點，中間穿插較多的對比與發散，因而描述重點時而會跳出方舟本身，部分內容涉及動效、氛圍、美術和外延話題的探討，可能超出了頁面與交互的定義範圍，筆者會盡可能地保證延伸都有一定的基準點。這六點是：
1. Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
2. 類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
3. 界面扁平化後如何追求交互空間和所承載內容的深度？
4. 風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
5. 焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
6. 有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
最後，筆者會分享一些在遊戲過程中的有趣發現，並淺談個人對於方舟的頁面與交互未來的展望。
一、Diegetic Interface 風格的主看板觀瞄投影設計如何增強沉浸感？
與「畫內界面」相對應的是「畫外界面」，如果這個詞比較陌生，那「畫外音」肯定是我們日常所熟知的影像元素。所謂畫外，即場景中的某個信息單元僅僅呈現給觀眾（玩家），而非呈現給劇中的角色。在多數遊戲界面中，用來向玩家展現其所需要時刻知曉的信息的界面通常以 HUD（Heads-up Display）的方式出現，例如格鬥遊戲《拳王》中雙方的血量條、怒氣值等組件。
與之相反，「畫內界面」則試圖把畫面中角色所能夠看到的信息以相同的方式展現給玩家，從而打破玩家和遊戲角色「隔著一個屏幕」的舒適區，增強沉浸感。
最近比較印象深刻的例子是《Apex 英雄》中槍械的彈藥數指示方式，其並不像大多數 FPS 遊戲一樣出現在一個單獨的角落方塊內，而是顯示在在每一把槍支瞄鏡側方的彈藥狀態面板上。不同的槍支屏幕面板不同，子彈的指示方式成為了槍支特性之一。另一個案例是《生化危機》，困難模式下角色的血量通過屏幕的整個顏色和視野模糊程度來指示，受傷情況越嚴重越看不清楚，加上搖晃力度變大，模擬了角色的真實體徵。
方舟中出現畫內界面的案例並不多，但最為直觀也最為大家熟悉的就是遊戲的主看板了。根據劇情，博士第一次操作島內事務的時候，人並不身處羅德島中，而是通過一個名為 PRTS（Prmitive Rhodesisland Terminal Service）的系統進行遠程接入，所以通過一個仿若鋼鐵俠頭盔內的漂浮投影界面很好地突出了這種狀態。
這個界面實在是和《全境封鎖》中角色的物品欄界面如出一轍，全息投影、虛擬指示窗、高科技的觀瞄設備，這些元素和後啟示錄科幻戰爭聯想有著密不可分的關係，而方舟在題材上的共通成為了這種設計契合的原因。當手機設備的電量、信號和時間信息都被按照統一風格放入了對應的浮窗中，並且隨著陀螺儀的感應整體移動 —— 方舟在一開始就為玩家提供了強大的沉浸感。
當然，作為一款二次元養成戰略手遊，它的幾個系統本身帶有分隔，且在小屏幕上對於可用性的關注遠在美學之上，畫內界面元素的表現並不能和端遊大作相提並論。關於 Diegetic Interface，筆者最初是從 EA 的《死亡空間》中深刻體會到的，在 2013 年的 GDC 上，EA Visceral Games 的時任 UI 總監 Dino Ignacio 詳細地展示了遊戲初期的開發歷程，探究了各種團隊為了提供更多畫面沉浸感的嘗試，並對 Skeuomorphs（擬物）的概念如何貫穿遊戲 UI 設計進行了深入的分析。關於這一點，後文也會簡單提到。
二、類 Fluent Design 設計思想的多元質感在哪些細節中勾勒？
Fluent Design 是微軟在 2017 年提出的設計系統，這套設計系統據稱將為其產品視覺提供貫穿多平臺的能力，並對當時分散在多個大產品中的零碎的設計風格進行收束。
在最初的介紹視頻中，整個設計風格被拆解成以下五個方面：Light 光線，Depth 深度，Motion 動作，Material 材質，Scale 比例。通過 Specs 指引，我們可以知道每個分類在底層系統設計上的具體意義；但就我個人理解來說，它在視覺上的本質表現是對「擬物」的簡化，核心是「質感」。
如何設計一個 Fluent 的元素？首先找到這一元素在現實世界中最具有代表性的材質，重現這一種材質的紋理，剝離這種紋理的細部表現，最後加入光照的變化和交互時的強調方式。到此為止，一個基礎 Fluent 組件的視覺呈現便設計完成了。
在眾多的材料選擇中，微軟從 Windows 7 時代開始便極其偏好的要素是毛玻璃（Frosted Glass），理由顯而易見：在不同的光線環境和物品重疊下，其所代表的「背景模糊」效果不同於一般的漸變，色彩結合更加柔和，能夠和畫面中銳化過的部分（如正文）產生鮮明的對比。在 Fluent 系統中，背景模糊仍然在面板樣式層面扮演了重要的角色，不過進一步被改進成了「亞克力材料」（Acrylic Material）風格，通過對亞力克板的仿真來構建視覺層級。
方舟的 UI 一個突出特點就是層級對比度極高，這裡除了有高質量的平面設計思想和符合世界觀的警戒亮色加持之外，多處使用背景模糊效果來突出畫面需要關注的交互部分也是原因之一。背景模糊的另外一個好處是它的覆蓋特性：對一個特定界面進行背景模糊，再在其上加入新的頁面組件，可以讓玩家「窺」見之前的頁面被覆蓋在了下方。關於這點，後文會再次提到。
前面舉例如何創作一個 Fluent 組件時，敘述了筆者「提取材質，剝離細部」的核心思路，這樣的結果其實是物件的「積木化」：積木作為孩童的啟蒙玩具，需要承擔讓認知的功能（辨識度），同時又必須保持其可玩性的特點。關於美術層面的質感追求，日本畫師 @池上幸輝 稍早之前公佈了一組自己的練手稿，充分體現了材質之間核心差異感的魅力。
最後提一下 UI 上光線的使用。由於方舟是一款手遊，因此交互上沒有辦法做指針懸停效果，在光線控制上除了用陀螺儀似乎沒有太多的想象空間。目前遊戲內所有對打光有刻意表現的地方多用靜態貼圖而非即時渲染（例如簽到日曆的背光效果、得到材料獎勵時的背後光圈），期待以後有更多產品能夠在 UI 層面就開始考慮 shading & lighting 這些原本在建模階段才會考慮的元素，界面更好的表現能力意味著更豐富的操作引導可能性。
三、界面扁平化後如何追求交互空間和所承載內容的深度？
開個玩笑，微軟刻意強調 Fluent 系統中的 Depth 深度與 Scale 比例這兩個元素，其實無非是之前整個 Windows 的系統級界面都太平了 —— 這成為了扁平化最大的誤區：扁平的出發點是減少頁面中和交互無關的細節，提升產品使用效率，並且加強設計元素的視覺統一性。如果單純理解為「平」，就會導致用戶學習成本增高和畫面失焦的後果。
從 Material Design 的概念被提出和 iOS 11 推出開始，扁平化設計三板斧「卡片陰影加圓角」廣為人知，方舟沒有逃出囹圄，在採購中心、基建等不少頁面處都使用了卡片設計。卡片搭配陰影的目的是形成層級，簡而言之，越要抓住用戶的元素，就擺得離其越近，在界面圖層上相對應的高度也就升高。這是扁平化凸顯頁面深度的方法之一。
在作戰章節選擇的界面中，加了粗白邊框的章節主題圖彷彿打印出來的相片一樣被夾在細繩上，如果仔細觀察，可以發現一圈內投影佈於頁面周圍。這種在攝影領域被稱為 vignette effect的效果最初來源於因遮光物或者透鏡排布問題而導致的影像中心的明度和飽和度比四周高的情況，也稱為「熱點效應」。現代平面設計中多作為一種創意效果加入到畫面中，以此來突出頁面中心的信息。這個設計實際還存在於方舟的多個頁面，通過這種方式來突出頁面中的卡片元素，視覺層級清楚分明。
在尋訪界面中加入的視差效果也是亮點之一，幹員本身有大小區別（暗示遠近）的情況下，加入視差可以讓透視感成型，這和整體的平面設計要素是一脈相承的，可以說非常走心。當然，筆者認為這裡還可以用骨骼動畫 + 粒子效果的美術加持讓每次主打的某位幹員更加突出，復現預熱宣傳 pv 裡面的樣式。
四、風格化的裝飾字體如何同時成功地表達古典騎士精神與科幻軍工風？
第一印象中，方舟頁面明顯的特點是使用了大量的襯線字體，但實際上襯線體並不是遊戲內最被廣泛使用的字型。在主面板中，襯線體更多以中文襯線體的方式出現，因其筆畫顯著的粗細差異而具有相當的可讀性，以「警戒」字型的意向與懸浮視窗、以及遠景中的工廠格納庫風插畫形成一種統一的工業感聯繫。
這種設計風格在同類的《少女前線》中也有同樣的呈現，後者甚至因其背景特點而更加依賴這種字型所帶來的復古金屬感，也正是這類似的設定讓很多玩家拿到方舟後大呼面板的設計因製作人海貓的特殊經歷而與少前密切相關。
當襯線體被用於拉丁文體時，風格的變化會更加嚴謹一些，因而使用需要作出區分。它的出現可以追溯到古羅馬時期，經過不斷的發展演繹至今，風格區分因人而異，筆者喜歡分為以下四種基礎類型：
1. Roman
2. Renaissance (Old-Style)
3. Transitional
4. Modern
在整體的變化中，襯線和比劃之間的粗細差別越來越大，字肩的弧度切角越來越平直，背後體現了刻字技術的專精細緻，排印風格由傳統的手寫轉為現代印刷的過度脈絡。從這個發展路徑可以看出，襯線拉丁體其實樣式豐富，「襯線字體代表了古典、嚴謹；無襯線字體則代表了現代」的準則有所偏頗。著名的 Modern 襯線字型如 Didot, Bodoni 等充滿了銳利的現代感的同時，保留了精緻的襯線裝飾，是時尚行業偏愛的選擇。
筆者非常喜愛作戰章節選擇頁面，裡面五個章節的主題圖宛如唱片封面。局部失焦和高亮的 Color Dodge 圖案水印，結合古典的襯線字型顯得別有韻味。但即使如此，這五幅圖片仍能反映出方舟設計風格的部分不統一。
序章、第一章、第二章三張主題圖的英文字體使用和後面兩章存在明顯的不同 —— 以第一章為例，經多個 OCR 工具的交叉檢驗和筆者的經驗，「EVIL TIME」 選擇了襯線與筆畫粗細相差極大的 Source Han Sans（CJK 對應即思源宋體，典型的 Modern 襯線體），這種偏現代的襯線字樣古典感稍有不足，感覺是為了配合「黑暗時代」標題的粗細而刻意妥協的結果。
加上背景人物塔露拉的衣著有著經典歐洲皇室裝束褶飾領的設計、其使用冷兵器的武器風格... 現代向的字型就進一步顯得格格不入。最終讓畫面異物感最強烈的，便是最下方的兩行俄語「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire [切爾諾伯格 | 烏薩斯帝國] ），字型圓潤而粗大，大幅度擠佔畫面空間，並徹底脫離了烏薩斯標誌所透露出的莊重和威嚴感。
在後續的兩個章節主題圖以及方舟第一個帶新內容的活動「騎兵與獵人」KV 中，拉丁文選擇了 Trajan 這種更偏向於 Old Style 風格的字體，且字距縮進，中文字重進一步調低，無論是協調性還是和插畫的匹配度都提升了不少。
筆者後來回顧了下早在 2017 年方舟一測之前就流出的部分素材，估計當時的 VI 設定是用現代字型（甚至是無襯線）來匹配科技先進、光怪陸離的移動城市龍門，而用較為古典的字型來搭配切爾諾伯格和烏薩斯等建制城邦。這個設計理念在即將推出的第五章劇情 PV 中可以管中窺豹 —— 在以龍門作為核心舞臺的章節裡，復古的騎士短暫落幕，代表了賽博風格的點陣、無人機、精鋼和無襯線字體開始活躍。
在基建系統中常見的工業風偽等距字體 Bender 也是方舟中比較有特色的字體之一（「偽」是因為其看上去很像現代等距體，但實際只有少部分字符是等距的），它的加入讓整個基建系統的科技風格硬核了不少，要不然玩家真的以為在玩「天災避難所」（笑）。
最後想談一下中英結合的設計手法。以筆者自身的經驗，中英（或多語言）一起進行文本搭配設計總能夠比較「好看」，在多數場景為裝飾考慮。原因大致是字型的變化多樣而不單調、且異域文字的組合給人一種莫名的逼格—— 這可能是源於幼年時期我們接觸到的帶多語言文本的商品多是進口的稀有物資（如日本的零食或者醫院裡面的吊針藥包），所以潛移默化地植入了這種認知；再加上科幻啟蒙小說和電影多源自國外，把西文和「科技感」進行聯想是再正常不過的事情。
方舟在大量的的組件內都加入了英文內容，無論是在界面層面的裝飾性文本，還是在各類基礎美術資源中的設計，無處不在凸顯硬派風格。各類量劑和藥品的描述與插圖更是把 SCP 基金會臨床文風 氛圍鋪墊到相當不錯的程度。在這樣的配置下，目前的劇情對白展開，顯得刻意又無力，絲毫沒有塑造人物個性的能力，僅僅為過場所用，亟待改善。
五、焦距控制和底圖處理等平面設計基礎手法如何塑造統一的視覺識別？
關於頁面深度的探討，前文已經有所提及，敘述更多是基於扁平化頁面組件之間的層級關係和交互透視感。在此之外，方舟還通過焦距控制和使用統一風格化底圖處理方式來在靜態設計層面加大頁面深度（畫面多層級）和內容深度（傳達信息）的表現。
先舉一個頁面之外的例子：以第一次進入採購中心時可露希爾的介紹插畫為例，在光線的設置上，用亮度溢出的背景中心搭配人物插畫本身的光影處理，輔以多束散射的橫光，來在一個平面中表現有多個光源存在的立體空間；在元素的重疊上：多個處在人物前後的裝飾文本突出元素彼此之間的立體關係；最後在焦距的控制上：通過失焦的背景凸顯畫面中心，又在部分前景元素上做更多的邊緣失焦處理，讓人物前後的縱深得到了體現。
筆者認為，Out of focus foreground framing（前景模糊取鏡）自 iPhone 的人像模式推出之後便得到了快速的普及，現在已經成為了大家日常拍照的慣用手法，大眾接受度提高讓設計師在處理「模糊」這一增強效果時有了更多遊刃有餘的空間。
元素的重疊和豐富頁面表現是平面設計中最基礎也是最無法避開的一環。不同的信息層分揀在不同的位置，核心始終是突出主體，使之與整體 VI 更加統一。常見的局部覆蓋、色塊透明度處理、淡陰影的浮雕效果等方法在方舟的界面中屢見不見，比較有特點的則是：
1. 噪點與漫畫網點紙風格的底圖處理方法，增強畫面細膩度，並見諸所有視覺出口；
2. 局部不穩定馬賽克化，營造出帶梗的信息暗示，為故事做鋪墊。
根據筆者一些看漫畫素描書的依稀記憶，網點紙應該是有多種類型的，比如各類花紋或者背景專用的淺色灰階。目前方舟用得較多的設計是散點和條紋，前者相當於 Grain effect（噪化效果）的低密度高顆粒度版本，用在基礎組件（如按鈕上）可以使留白不顯得單薄，用在各類卡片的背景或者平面設計的底圖中則能夠提升對比度；後者主要指粗條紋，類似警戒線的風格展現設計的工業感。這種底圖處理風格在遊戲內外均以驚人的統一性被使用。
在幹員報道的界面（動態）、剿滅作戰背景地圖（靜態）等地方均可以找到局部馬賽克化的設計，不少注意到的玩家應該可以立刻反應出「失去同步」這個已經有十年曆史的梗。在《刺客信條》的艾吉歐三部曲中，每當出現人物記憶模糊或者連接不穩定的設定情況，場景便會進入類似的狀態。綜合方舟加載遊戲時所提到的「釋放神經遞質...建立連接」、阿米婭的背景故事和 PV 信息等線索，筆者估計玩家實際上並不在遊戲中扮演博士自身，而是作為獨立的個體，利用系統接入博士的記憶中（正如戴斯蒙德利用 Animus 進入先祖的記憶片段中一樣，metagame）。在此筆者不做過多猜想，期待後續的劇情延展。
綜合來說，方舟有著非常嚴格的視覺規範和鮮明的品牌特點，這是統一埋入極具風格化的視覺單元、並嚴格把控所有素材出口的結果。平面設計風格是一個不斷進化的增量過程，在最新的章節資料片預告中，已經可以看到許多新的元素被陸續加入，但依然可以找到原有風格的演變點。
六、有哪些過場銜接技巧降低了頁面層級的數量，並構建了場景化的系統結構？
這一部分主要包括三方面，以此來探究方舟是如何通過減少頁面的層級和切換次數，以及在必要時提供合適的捷徑，來讓用戶對系統的學習成本降到最低。我們知道方舟在三測期間口碑暴跌，其中一個核心槽點就是新手引導的時候扎堆灌輸各種系統玩法，讓玩家在序章還沒有打完的時候就必須掌握 15 種打法、認識 7 種貨幣和近百種材料。這部分屬於新手引導的節奏設置問題，我們暫時不談，僅僅專注在界面的設計上。它們是：
1. 過場銜接動畫體現頁面的自然切換邏輯；
2. 風格化的堆疊浮窗與局部位移減少頁面層級；
3. 全局物品導航和系統功能外的空間聯繫。
方舟在每一個需要進行頁面切換的地方都加入了過場動畫，並且根據頁面之間的實際邏輯針對性地對動畫效果進行了選擇。如兩個較為獨立的系統之間使用簡單的深色淡出，而有邏輯聯繫的關卡主題和關卡選擇之間則有明顯的 zoom-in zoom-out 效果。進入基建等需要一定時間加載資源的系統時，除了動畫效果還會展示插畫，減少玩家的感知等待時間。
上文敘述毛玻璃背景模糊效果時提到，方舟常常用背景模糊覆蓋浮窗的方式來降低玩家對忽然跳出的新頁面的抗拒感，一些較為次級的系統直接通過在原有頁面之上呼出的形式提升玩家對頁面導航的把控。例如簽到、郵件、通知、設置等頁面的呼出都是在原頁面之上進行了覆蓋；在基建系統裡，則通過設施的主題色來進一步增強頁面的從屬關係。
除了浮窗，某元素的局部位移來形成新的信息展示空間也是常見的簡化信息層級的交互方式，最經典的例子就是幹員的養成頁面—— 裡面每一個可以點擊的按鈕都沒有引導至一個完全嶄新的頁面，而是多少保持著和幹員信息頁的聯繫：升級 - 橫移淡入動畫、升階 - 人物位移、合卡 - 人物位移、升技能 - 頁面背景不變、查看天賦 - 彈出透明浮窗、查看職業詳情 - 彈出毛玻璃彈窗、查看屬性詳情 - 數值直接向右展開、查看背景故事 - 人物位移、查看時裝 - 彈出毛玻璃彈窗... 再加上頁面拖拽滑動可以直接實現幹員的切換，玩家在複雜的養成系統中一直沒有離開過同一張 canvas，筆者認為這是方舟交互最為典範的界面之一。
最後提一下系統導航，主要分為兩部分：
1. 全局捷徑；
2. 系統場景化包裝。
第一部分主要針對複雜的材料樹幾乎不可能讓玩家記住每種物品的等級和產出途徑的問題。相比於做一個獨立的遊戲內圖鑑，遊戲加入了全局指示鏈功能，在任何一個物品 icon 出現的地方查看物品詳情都可以直接跳轉到對應的掉落關卡和查看對應的掉落機率，這種組件化的設計極大地降低了玩家對於養成科技樹的學習成本，甚至在不需要完全摸清楚材料層級關係前就可以進行收集和養成了。
第二部分則是頁面左上角的主界面按鈕，玩家可以通過這個導航快速進入任何一個系統中，而不需要進行枯燥的返回面板再進入。這個導航欄獨特的地方是它的系統並不是零散的，而是被放置在「羅德島」這個建立在倒懸鯨骨之上的「方舟」的不同區域，通過賦予各系統一種空間上的聯繫與包裝，使玩家的交互路徑更加具有代入感，產生沉浸的遊戲記憶。
七、對於頁面與交互的未來展望
一個精心雕琢的產品值得更多的回望和遐想，在此筆者也希望提出幾點關於方舟的界面交互在未來的提升空間。以下都是單純站在體驗的角度提出的建議，沒有加入可行性考量，不足為訓。
1. 界面元素對玩家的操作反饋待提升
對玩家持續而穩定的刺激是保證其遊戲心流的重要基礎，對於非局內頁面以偏靜態呈現為主的方舟來說，在視覺層面提供足夠持續的刺激和交互的的雙向反饋有一定困難。方舟的一個解決方案是在界面中加入了大量明顯的粒子效果來烘托頁面細節，比如面板右上角光線的變化，管道中溢出的煙霧，飄散的塵埃和雪花，以及部分地圖內表示天災的彌散光影等 —— 此舉下畫面的呼吸感得到了增強，提升了遊戲的整體品質。
但粒子效果貼圖不受玩家的操作輸入而產生變化，最後的觀感彷彿是在欣賞精緻生動的電影，而非體驗一個交互豐富的遊戲。如果粒子效果可以隨著玩家的操作輸入而有所變化，例如在章節選擇界面中，對章節卡片的拉動可以改變部分塵埃的飛行路線，產生阻擋和撞擊效果，整體反饋感將會增強許多。
2. 頁面交互方式的多樣性有提升空間
頁面關係和系統連接之間的順滑一定程度上掩蓋了方舟在人機交互方式選擇上的保守。對按鈕的點擊操作是最泛用和常規的交互模式，但存在體驗單調的問題。現代產品設計中諸多新的嘗試，例如拖拽、旋鈕、縮放、配套的 haptic 效果、甚至是多指或屏幕邊緣的操作，在非局內的多數靜態頁面中被使用到的情況比較有限。
其實方舟的設計風格非常適合嵌入更現代的交互方式，在幹員列表和基建系統這類使用了大量傳統 GUI 組件的系統中尤其如此。幾個簡單的腦洞：比如在編隊管理頁面中允許拖拽卡片來改變幹員的編排位置和出陣選擇；確認貿易站訂單時可以直接 swipe up/down 接受或刪除該訂單卡片並配合一定的縮放效果動畫；調整製造站的製作量時，使用旋鈕或者 slider 組件的交互便捷性會遠超目前 [max + - min] 的經典 4 picker 模式。諸如此類，都是優化交互節奏、改善目前單純靠點擊操作而產生的粘滯手感的一些可能。
3. 其他一些有趣的發現
芯片搜索任務卡片上的 caption 是「Motor Learning | Powered by DeepMentality™」，Motor Learning（技能學習）理論是認知學研究框架中的核心，它探討了個體學習一項技能時的心理結構、場景介入因素、影響效能的行為、以及先天性的能力缺乏等問題。無論是對複雜機體能力的學習（如運動、使用樂器）還是對持續性的身體應激反應調整都有系統性的拆解分析。
有趣的是，在機器學習算法和腦機接口技術成熟的未來，傳統認知理論思想或許將被遷移融合，人類機體對新技能的掌握過程被無限縮短，甚至可能通過「插入芯片」來實現。在此聯想開來：遊戲設定幹員升階需要芯片這種材料，但這個項目的名稱還是被定義為 Motor Learning 而非 Machine Learning，背後蘊含了對人體邊界的探討 —— 在截肢義體改造、藥化電子腦盛行的科幻未來中，人類通過自身意志形成的行為認知，會剩下多少呢？
誠然，方舟是一款結合了部分經典文學意向作為背景考據的二次元遊戲，題材更偏向廢土而非賽博朋克。後者自身蘊含的時代先鋒性，在一個地外與未來的溫床中，應該能做出更多關於跨域種族、性別和人類意識的思考。筆者也因此對明年的《賽博朋克2077》期待萬分。
結語
明日方舟是手遊領域內非常罕見、有著極高美術質感追求和高度統一視覺規範標準的產品，輔以觀察和拆解，可以發現藏在「好看」背後先進的設計理念。它的成功絕對不是一次爆冷或者偶然。方舟在運營和受眾捕捉層面已經有足夠的案例值得分析學習，其頁面與交互最終也要成為一個好玩法的載體。雖然不會成為主角，但依舊有不可取代的作用。
界面於筆者而言，是連接系統邏輯與人的意志輸入之間唯一的紐帶和窗口。我們看到的每一個像素點，眼球每次細微的轉動，手指的每一個操作，都依賴界面傳達信息輸入，並期待其返還我們意料之中的結果。發展至今，我們看到了《荒野大鏢客》電影模式中完全「去 UI 化」的界面思想，也能看到《女神異聞錄 5》一樣把界面作為其美術風格的核心演繹環節的極端案例。人機交互的進步，是對人類感知觸點（sensual touch point）和信息處理能力的不斷探索，會在未來更加多樣化、更加精巧。
相關推薦
'明日方舟：為什麼隕星越來越被重視，該不會是顏值高吧？'
"【遊戲沒有圈兒】《明日方舟》是一款TD（塔防）遊戲，與其他類型遊戲最大不同的是，在這裡只有PVE方面的玩法內容。好處自然也是有目共睹，幹員（遊戲角色）的平衡不需要特意修改數值與技能，換言之關卡的設計直接影響幹員的強與弱。早期的《明日方舟》並沒有太多幹員與關卡，致使打法單一...
'我為什麼喜歡明日方舟？'
"自2016《陰陽師》強勢崛起，二次元手遊市場，就成為了人人爭搶的大蛋糕。多年來，這個市場起起伏伏，卻一直沒有一款遊戲能和《陰陽師》一樣再次引爆市場。直到《明日方舟》出現，時隔三年，二次元手遊裡又出現了一匹黑馬。【五百年後的呼喚】對二次元手游來說，劇情能夠幫助玩家理解人物的...
'比闊腿褲高級，比拖地褲好看，為什麼說“襯衫+奶奶褲”火了'
"今年的時尚圈，十個流行的裡面，有八個包含著復古元素。今天，我們要講的奶奶褲，也是潮流的復古元素之一。 01什麼是奶奶褲？奶奶褲是指版型寬鬆的褲子，是闊腿褲和緊身褲的升級，沒有闊腿褲的寬大，同樣，也除去了緊身褲的束縛，整體版型寬鬆，褲口微收緊設計。寬鬆的版型，穿著舒適，巧...
'為什麼你的界面看著不舒服？騰訊設計師從這 3 個維度優化設計'
"@菜心設計鋪 ：界面設計是一個很龐大的體系，具有很多原則，比如輕量、容錯、清晰等等，其中包含了交互層面以及視覺層面等，今天我想單獨把視覺剝離出來，來講一講我對界面設計「視覺層面」的理解與認知。在我看來，界面設計的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創意...
'《明日方舟》10萬賬號被封，你知道都是因為什麼嗎？'
"【遊戲沒有圈兒】《明日方舟》憑藉出色的玩法與美術風格吸引了大批玩家，在當下手遊市場可謂特立獨行。基於逐漸衰落的塔防（TD）遊戲為背景，增加幹員擺放朝向使其在對戰中更具針對性，這是對玩法上的創新。而立繪的高要求也是嚴格牴觸“賣肉”，角色大氣不失莊重，跟同類型的二次元手遊相比...
明日方舟：全遊戲被值班最嚴重的六星 為什麼都說夜鶯不如白麵鴞
明日方舟近日因為夜鶯再次在卡池中迎來UP，且二進宮可兌換的原因引發了極大的爭議，而不知情的玩家在問及到夜鶯強度的時候，也被有些經驗的老玩家教育，夜鶯不如白...
推薦中...