《少女前線：云圖計劃》是上海散爆網絡科技有限公司開發的一款少前系列Roguelike策略手游。于2021年9月23日開啟全平臺公測。

這是一款非常典型的“二次元”風格游戲。界面設計繼承自《少女前線》中扁平化、科技感的設計風格，但細節上有所進化。
?

《少女前線》主界面

諸多相似世界觀的“二次元”游戲幾乎標配“科技感”設計風格和精美二次元美少女立繪，這款游戲也不例外。按照游戲世界觀描述，我們在游戲中操作的角色無一例外都是“人形”少女。它們擁有不同的外貌、“派別”和技能特征。

這種調性和世界觀設定必然會導向扁平化科技感的界面設計風格。我們在“半周談”系列文章中曾經講過如何進行科技感風格的動效設計（點此回顧）。今天就來討論一下這款優秀的實例，看這些設計手法是如何結合實際情況去具體體現的。
?

融合科技感設計，是諸多“二次元”游戲中，比較流行的設計風格取向。究其原因，本質上都由它們的世界觀所決定。

相對于經典概念中的科技感風格來說，很多這類游戲的界面風格往往擁有較為粗放的設計細節。這應該源于早期同類型日式二次元游戲中相關界面設定的影響。尤其是“EVA”這類二次元風格牽引所帶來的的影響。
?

《崩壞3》與EVA聯動時，具有濃重EVA味的活動界面。 “粗大科技感元素”和“粗宋字體”是這類風格的主要特征。

《少女前線》圖鑒界面

《明日方舟》主界面

由此，這類游戲的界面設計雖然可以被歸類在“科技感”的大類中，但與嚴肅的或者“成熟”一些的科技感設計依然有所不同。其中最大的差別就是瑣碎細節的處理方式，以及對文字、紋理的處理形式。

如下圖所示的《殺出重圍：人類分裂》的界面風格，在細節處理上都更加細膩。
?

雖然如此，但它們依然用著科技感中常見的斜切硬角圖形設計，以及諸多動態上科技感常用的手法，如閃切、故障風、圖形生長等等特征。從這一點來說，這類游戲毫無疑問的屬于科技感與特定類型風格的某種交集產物。在特定語境下，簡單的說它們是科技感也未嘗不可。

《云圖計劃》的設計風格也自然如此。它與《少女前線》共享同一世界觀（《云》的故事發生在2058年，《少》的故事發生在其后約4年。），同為未來科幻背景下，云服務器世界中發生的故事。所以自然會有極多科技感元素設計。

從下圖的幾個開頭播片的片段中，可一窺《云圖》中的濃重科幻風格設計：
?

就界面設計上的沿襲與發展來講，《云圖》有著與前輩不同的細膩感。也取百家之長，交互體驗上也進行了很多的改進。

比如在類似風格游戲《明日方舟》中的這種主菜單交互形式：
?

在《云圖》中也用了同一種形式，但圖形設計上更清晰和細膩：
?

在科技感風格的細節設計上，用了常用的動態設計手法，卻做出了自己的特點。

比如常見的閃切、生長類動作，在人形資料頁入場動畫中：
?

在突破成功的提示條中：
?

以及成就經驗條的增長動畫中：
?

還有一些結合了諸多科技感設計特點的，進行了更加細膩設計的。

如抽卡階段，人形的“來源企業”圖標的生長動畫：
?

以及扇區解鎖時的過場動畫中：
?

這些動畫的細膩之處在于，賣二手手游賬號平臺對原有圖形進行了非常細節的生成式演繹。并且結合了三維以及生長、閃切的制作手法，且節奏張弛有序。

還有利用科技感動效的特點，對界面信息邏輯進行直接聯系的設計。如關卡節點切換時的效果：

《云圖》界面中最亮眼的設計，是更貼切的三維界面設計。類似設計特征可以從類似風格的二次元游戲，如《戰雙帕彌什》和《明日方舟》中看到。

如下圖的《戰雙帕彌什》主界面入場。可以看到主界面中控件的帶縱深透視的設計樣式：
?

以及下圖《明日方舟》中主界面“真3D”跟隨陀螺儀響應的效果：
?

但是《明日方舟》中的三維界面僅僅還停留在靜態表現上，唯一有互動效果的就是如上圖所示的，跟陀螺儀響應互動。即它會隨著玩家持握手機時晃動而跟著搖擺。不過這也僅僅給玩家一些特殊感受，并沒有太多實際效用。
?

“二次元”的核心應該是角色設計。在《原神》中，是性格迥異，畫風“媚宅”的角色群，在《碧藍航線》中則是畫風精致的艦娘立繪，等等。在《云圖》中自然也不能缺了二次元美少女們。

《云圖》中的二次元美少女擁有多種具體表現形式：戰斗中的二頭身三維角色、立繪以及大招時的賽璐璐風格動畫等。

她們以“人形”的概念存在于游戲世界中，也擁有多種演繹途徑：戰斗結束時的循環小動作：
?

精美的立繪，甚至2D動態立繪：
?

以及最精彩的，大招時的賽璐璐風格動畫：
?

很大程度上，吸引玩家去玩這款游戲的主要因素，恐怕是這些內容。至少可以說，主要吸引玩家的是圍繞著以這些內容為核心的一系列體驗。

不過若沒有與這種品質的美術相匹配的界面體驗，這些精美的紙片人所構建的品質，說不定會被拉下幾個檔次。
?

如上文所述，我們在《戰雙帕彌什》和《明日方舟》中就見到3DUI的應用。除了上文列舉過的那些，還有如下圖所示，《明日方舟》中利用錯層動畫，想要體現縱深感的動態設計：
?

當然，別的類型的游戲中這種形式也很多見。只是在手游上的實踐還很少有堪稱比較合理和圓潤的設計。

那種帶有三維縱深的卡片式設計，當沒有與之匹配的一整套體驗設計時，總有一種畫蛇添足之感。正如我一向堅持的那樣：“沒有必要的情況下，請不要在手游狹窄的畫面內用帶縱深的三維界面”，甚至我認為在任何平臺上，無所顧忌的使用三維界面，是一種無視游戲體驗的行為。

當然，我反對的只是“因為想用而去用”的情況。也有必然需要這種形式去表達的情況。比如在《全境封鎖》中那樣，恰到好處的去融入一些帶縱深效果的三維界面設計，體驗自然是提升的，尤其它還是有效的。如果在有限的畫面內，毫無理由的，僅僅因為“好看”而去設計三維界面，那是我所拒絕的。
?

不過在《云圖》中，我們再一次看到三維界面的應用時。感受到它這次不再是靜置的，或者僅僅只是帶有一些縱深透視的片狀物。而是充分利用了鏡頭穿梭的方式去結合實際功能，進行了細致設計的真三維界面。

如在戰斗內界面，開戰前的一整個鏡頭穿梭效果：
?

這個“鏡頭”將整個場景和場景上方界面層進行了完整的演繹。玩家跟隨鏡頭的動作，完整預覽了場景的效果，可以更快辨明界面中關卡節點與場景之間的對應關系。而且這種演繹方式所造成的視覺沖擊也非常強烈。

當場景更加復雜與縱深時，這個穿梭的效果更有沖擊力：
?

與之相配合的是真三維的關卡節點界面的交互形式：
?

也就是說，這是一個視覺效果和交互體驗完整結合的設計。

與這種設計形式相匹配的，是一整套的設計語言。最簡單的理解就是，其他界面都處于這個空間內的同一視角。

如函數卡界面：
?

結算時的一系列鏡頭動作和界面穿梭入場：
?

可以明顯的觀察到，這套界面在戰斗內有統一的透視角。不僅如此，在外圍系統中，這種三維透視關系也得到了很好的統一。它們未必在靜置時有明顯的縱深透視，或與戰斗內保持統一視角，但其轉場動畫都保持著“鏡頭穿梭”的動態設計樣式：

最典型的莫過于幾個大系統的出入場：
?

而在一些非場景化設計的系統中，也依然保持了這種縱深推進的動作趨勢：
?

還有些界面內，則是省卻了界面的縱深感，直接利用鏡頭動作來表現空間切換關系，如下圖所示的隊伍編輯界面的打開與關閉切換：
?

而在抽卡這類界面中，需要非常強情緒表現時，就將鏡頭動畫與特效進行了非常充分的利用：
?

這種設計形式是一種很恰當的設計語言，很好的詮釋了該游戲的“科幻”元素。

可以說，這種應用手段是極其成功的。整個操作過程中并沒有感受到這種設計手法的“炫技”或者感覺到“畫蛇添足”。

最核心的緣故在于，它們是基于操作體驗所做的合理設計。

針對體驗的細微設計，除了上文提到的那些之外。還有一個老生常談的問題。那就是完整的穿梭或者演繹，往往會使動效有較漫長的時長。在頭幾次播放時會引起玩家的興趣，但頻繁的重復之下，一定會引起審美疲勞。

《云圖》顯然考慮到了這一點。雖然有時界面上沒有明顯的提示，但這些“漫長”的動效可以通過點擊空白來跳過。

連續點擊，快速領取：
?

過場點擊跳過：
?

總結來看，《云圖計劃》界面動效設計的主要特點和優勢在于：

1.繼承了這類“二次元”游戲的“科技感”設計風格，但有明顯的細膩改善，使整體氣質上與同類產品在品質上拉開了差距。

2.在三維界面的設計上有非常清晰的思路，有的放矢，與整體操作體驗進行了深度結合，不再流于形式。

3.與同類游戲相比，它的動效設計并沒有非常明顯的“風格化”設計。而是將特定“二次元”細分類別結合特定“科技感”風格進行了更細膩的、收斂的設計。

以上。

總結

以上是生活随笔為你收集整理的《云图计划》的动效简析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。