一個優秀的游戲，自然是每個方面都獨具特色，連界面動效也不例外。

作者 |瓜瓜

雷火藝術中心動效設計師

《逆水寒》手游從2019年11月立項到2023年6月正式上線，團隊投入了大量的時間和精力去開發，才最終呈現出了今天被玩家津津樂道的游戲畫面。

此前，我們已經分享過。而今天我們會把目光投向界面和動效領域，將游戲通用動效的迭代歷程劃分為功能、迭代和設計升華三個階段，進行詳細的復盤與分享。同時，還會詳細介紹該如何通過動畫節奏和設計元素等完成個性化的融入，以凸顯《逆水寒》手游獨具特色的“會呼吸的江湖”。

一、通用動效概述及案例分析

1.1 界面通用內容概述

從美術設計的角度出發，游戲界面中的通用內容，指的就是在游戲風格確立后，基于用戶界面，提供界面基礎功能與統一標準的控件及界面內容，其中包含但不限于設計規范、通用控件樣式、通用界面樣式等。而通用動效就是針對這些基礎內容展開的動效設計。

設計規范就是類似游戲中使用的字體、字號、顏色、布局等關聯性的設計標準。不同的色彩、字體都能夠體現出不同游戲屬于自己的風格基調和時代情緒。越是后期上線的游戲，其字體樣式就會更加簡約，色調飽和度也更清雅。而在這一層動效通常不會做效果，以免干擾字體識別。

通用控件則包含游戲中的各類各級別按鈕、開關、菜單欄、滑動條等。鑒于手游畫幅比較小，游戲內各類控件觸面也會比較小，所以為了能提示玩家此處可點、并且在點擊時接受到及時的信息，動效層面經常會在按鈕控件中加入引導和點擊效果，通過視覺刺激將物理按鈕的點擊手感視覺化，以此形成信息的反饋。

通用界面內容則比較雜，包括但不限于界面通用背景、彈窗、tips等。通過相同顏色、紋理、控件規范、布局排版等讓不同的系統界面形成統一而又相對獨立的個體。也能夠讓玩家在游戲中通過不斷接觸相同的元素，形成對游戲界面的整體印象。動效層面最直接有效的方式就是用節奏建立關聯，例如界面的出現關閉、列表和信息的律動方式等，通過多次同頻達到多界面的聯動共振效果。

1.2 通用動效分類

通用動效由于以界面基礎信息和基礎操作為基點，其出現頻率和操作次數貫穿整個游戲體驗，所以恰當的動效設計能夠為交互操作起到錦上添花的作用。根據設計要點和動效功能，可以初步將通用動效劃分為以下四類：

一、引導提示及點擊反饋動效

引導提示是通過視覺效果和動畫表現來吸引玩家注意，引導玩家進行點擊或特定操作。通常以常駐的形式用于item物品、按鈕、標題欄上，在操作完成后消失，具備一定的功能性。

反饋動效則是在玩家點擊特定按鈕或者區域時，通過動畫、音效或者震動等方式來提供瞬時可視或可感的反饋，以增加操作的響應性和交互的可感知性。常見的有按鈕點擊、鼠標點擊、解鎖等效果。

二、切換動效

切換動效是界面切換過程中使用的出現、消失、過渡效果。其中通用界面的切換動效往往有統一的律動形式，這個統一不是指具體數值完全一致，而是呈現給玩家的第一印象具有一致性。而重度包裝的界面，則會使用個性化的切換動效。

三、氛圍動效

游戲界面動效中的氛圍動效是指通過視覺環境、動畫來營造特定氛圍或情緒的一種設計手法。在通用層面則可用局部的氛圍起到增加細節、烘托情緒的作用。

從功能性上來講，引導提示動效>反饋動效>切換動效>氛圍動效。根據時間和性能要求，可以按重要性進行取舍。對于一些常駐的功能性界面，例如禮包簽到等，適度的氛圍動效可以用較少的成本實現較好的視覺效果。

1.3 端游案例分析

相較于純手游而言，以端游為基礎的游戲在移植到手游平臺時，界面動效不僅要考慮端游原有的設計風格，也需要和手游自身美術風格相匹配，在吸引新的移動端玩家時，也滿足原端游玩家對手游的訴求。《逆水寒》手游之前已有成功的端游，因此在正式制作之前，我們也要著重分析一下《逆水寒》端游的界面動效表現。

《逆水寒》端游是在2018年6月上線的，相較于同時期的競品它更重視玩家的游戲體驗。在界面美術風格方面，采用了簡約而細膩的設計風格，主要以“竹”與“水墨”為設計元素，并根據界面類型采用多個色彩體系，通用以深藍、深褐的低飽和色調為主，付費、活動類則多采用高飽和彩色系，以此將元素和系統結構進行風格統一，凸顯游戲的古風美學。

在動效設計上，端游也延續界面的設計調性，圍繞“竹”與“墨”為設計元素，將其以氛圍和暈染的形式進行運用。除了常規的反饋動效，《逆水寒》是端游中少有的重視切換動效和氛圍動效的游戲。

首先說竹元素。在很多通用面板中的標題會有竹子的裝飾，動效會重點表現與竹子相關的氛圍，給予微弱的掃光和飄落動畫，可以讓相對深色的面板在局部有動態點綴，讓界面上靜態的竹葉有一種被風吹動的感覺，帶有自然、呼吸的意味。

墨的使用范圍則比較廣了，首先是含有墨元素本身的設計，例如logo文字的出現、地點提示等等，會著重表現墨的筆觸紋理。而非墨元素的界面，例如活動界面的打開，則會用墨的暈染樣式作為過渡。

端游很少有全屏的界面，基本都是半屏，所以在界面按鈕放置的側邊欄，大部分都是非靜態的，而是設計有氛圍動畫。相較于靜態界面，動態的內容讓界面更生動，同時也能讓玩家注意到按鈕分頁的內容。

引導提示和反饋提示的設計上通常比較簡潔，以光效和點狀粒子為主，光效主要以各型線性掃光為主，強調動態變化。

使用頻率較高的界面都加入了切換動畫，并且配有一定的氛圍動效，使界面在切換時更為流暢，不會出現界面加載卡頓的問題。而在動畫節奏上，則是根據界面功能進行區分。通用界面的出現及消失采用了模仿空間折疊的形式，常規活動界面和部分系統界面則是小幅度的縮放漸隱漸顯，重點活動界面則單獨制作更為復雜的切換動畫。

1.4 小結

通過分析可以發現，在一些通用內容上加入動效具有一些顯著的效用：

1. 功能上可以展示交互原型，引導用戶操作，并且在用戶操作后給予有效的信息反饋；

2. 審美上可以將靜態的界面進行設計延伸，使界面更生動有趣，輔助進行品牌塑造；

3. 資源上復用性高，還可以針對不同機型性能，進行分級優化，提高高配設備的游戲美術效果。

但我們在進行通用動效設計之前，也一定要考慮到它的設計必要性：是否在加入動效后能起到1+1>2的效果，是否會畫蛇添足？對于動效設計師而言，通用內容在結構上會比較簡單，考慮到性能問題，設計上往往需要簡而精，所以如何用簡單的效果體現出設計的層次感，也是動效設計師需要考慮的問題。

二、《逆水寒》手游通用動效迭代歷程

其實手游的通用動效也是經歷過多次迭代，才有了如今玩家看到的上線效果。根據手游的版本迭代周期和動效比較集中迭代的階段，我初步將alpha里程碑前歸為第一個功能階段；beta期間因為對外一測有一波小調整，歸為迭代階段；第二次外測后上線前的C1里程為升華階段：

2.1 第一階段：功能階段

和端游相比，手游的美術風格相對一致，還是以簡約清雅為主，但在基本色調上飽和度有做調整，整體更時尚、年輕。前期界面的通用內容在設計上相對簡約，以大面積色塊為主，局部有一些暈染的紋理。

因為手游一直想表現的主題是“會呼吸的江湖”，所以在動效設計上也是契合界面風格，以輕盈為主，提取暈染的材質去表現過渡時輕薄的質感，并延續使用了竹葉的元素去進行氛圍渲染。前期的動效在設計上會在精簡的基礎上盡量細致地去做氛圍上的表現，不過動效還未鋪量，大多還是以功能性為主。

例如通用背景的設計上采用了無框的透明度過渡，比較柔和，所以動效設計的出現采用了比較舒緩的節奏。半屏和全屏在背景上都有比較明顯的竹葉，為了體現細節，竹葉也有做微微晃動的動態。

信息的出現方式上，整體列表以從下到上為主，節奏相對緊湊一些。但也可以看到，不同分頁間的節奏和出現方式并沒有完全統一。

?界面按鈕在設計上比較場景化，動效并沒有加額外的設計防止信息干擾，只是在出現方式上做了左到右的統一。包括主界面上UI控件的功能性提示，也是盡量以簡約為主，只用了掃光和粒子做點綴，沒有加太多的紋理信息。

2.2 第二階段：迭代階段

在第二階段，因為要對外一測，為了能帶給玩家更加整體化的印象，所以針對現有的設計做了鋪量。一方面對舊的效果進行精細化調整，另一方面根據用戶體驗增加了新的設計。

先展示下GUI迭代后的控件樣式，增加了按鈕形態，使用標準上做了進一步規范。所以一開始也是先對按鈕做了動效上的調整。

在原有的切換上新增了一級tab按鈕的點擊和常駐效果。出現采用了暈染的形式，并在常駐根據紋理特征加入了輕微的擾動效果。然后統一了不同界面列表、信息的出現方向和時間。

?動效細節上的調整主要偏向輕量化，例如技能按鈕上的動效將紋理質感處理得更輕薄，減弱紋理的復雜度，節奏上也做了調整。按鈕的CD結束提示，考慮到玩家操作的頻率，減少了點擊后的殘留效果，節奏也更干脆。

?背景上弱化了墨的厚重感，強調水在暈染時候輕盈的質感，并將出現方式由中心擴散調整為從左到右。

?

與此同時也開始進行性能測試，并將任務欄的動效進行分級。嘗試取消粒子節點，對材質的使用層級進行限制。同期也對性能消耗較大的系統界面進行了動效方向的大幅優化。

2.3 第三階段：設計升華

在對外一測后我們也收到了很多玩家的反饋，梳理了一部分關于UI的評價，例如按鈕小容易誤觸、字體顏色花、按鈕質感輕等。通過內部復盤，總結確實有層級引導性弱，系統界面風格差異大，UI設計質感不夠等問題。

所以針對于此，我們也希望后續的優化中能夠將UI層級功能劃分得更明確，將不同系統間無論是元素還是色調都做得更統一，包括設計元素本身的存在感，都更強調《逆水寒》會呼吸的特征。

由于通用是界面中占比最大，玩家感受最多的內容，所以首先針對界面風格做了預演嘗試。考慮到迭代效率和功能的推進，選取了任務和組隊界面先進行控件和層級上的優化。下圖展示到的是任務界面迭代前后的視覺效果，在設計上突出“竹”、“水”兩個元素的特征，特別將竹節的造型紋理運用在按鈕樣式中。功能區域的劃分還是比照三大分區，各級tab從顏色量感上進行劃分，強調玩家需要點擊操作的按鈕層級，界面背景的視覺重心也不在集中在左側，而是分攤到信息比較集中的UI部分。

替代前后對于動效來講，設計上的變化并不是非常強烈，更多是在細節上的調整，例如水墨元素的使用。所謂墨分五色，濃淡干濕焦，源于墨里面水分含量不同，以及畫畫時筆鋒上所含墨量的差異，造就了層次豐富，變化萬千的水墨形態。很多游戲里使用的墨趨向于濃墨，更注重水墨紋理的表現，質感偏厚重。我們在后續設計中希望將濕墨暈染的質感和水的清透相結合，突出墨的輕盈感，強調水的漣漪質感。在動態規律上，也參考竹葉的擺動方式，還原竹葉的實際律動。

?左圖為11 B it Studios的 《冰汽時代》， 右圖為CDPR的 《巫師》

按上述思路選取任務界面進行了預演嘗試，整體設計在節奏上以干凈利落，先快后滯緩為主；氛圍上沿用粒子、光斑，嘗試表現竹子投影在水面波光粼粼的質感。同時也有嘗試新的表現方式，例如按鈕點擊效果也試著將竹子上絲狀的紋理進行放大處理（終版未采用，還是希望更多強調水和墨的質感）；材質上在暈染溶解的基礎上加入隨機的漣漪效果。

終版效果如下，基本可以確立后續的修改方向：

1. 水墨加在出現動效上，采用更柔和的水墨紋理，避免太刺狀的形態；

2. 常駐氛圍加入漣漪的運用，線性漣漪紋理不要太細碎；

3. 節奏強調快到滯緩，統一不同頁面信息的出現方向和頻率；

4. ?層級劃分后，不同層級的按鈕針對性加入點擊和氛圍做強調。

?接著就是大面積的鋪量，這邊展示到一些有代表性的迭代案例：

①背景類：出現+常駐氛圍

通用全屏和通用半屏

通用橫屏彈窗和二次確認彈窗

②按鈕類：點擊、氛圍

Tab按鈕

一、二級按鈕和異形按鈕背景氛圍

按鈕點擊提示

?可以看到按鈕和背景上都強化了漣漪和水的概念，節奏和紋理都有一致性，通過相同元素的多次運用，讓整體在細節上形成風格上的統一。并在細節處增加動態表現，例如靜態按鈕上添加輕微掃光紋理、點擊刷新按鈕時，將按鈕的反饋操作可視化等。

③任務欄（功能向）

??④Loading

常規場景loading有兩類，一類是可點擊滑動產生實時動態漣漪效果，但是無常駐氛圍的，一類是無交互但帶有常駐氛圍的，以優化玩家枯燥的等待時間。

?同時針對一些由于場景切換，有較長等待時間的內容，例如選角轉捏臉、外觀轉捏臉等，由于其系統風格相對獨立，也制作了單獨的風格化loading。而這個風格化切換形式對于一些只需要略微等待幾秒、加載實際場景模型的界面，其效果適配性也很高。例如武功特質界面和組隊界面的切換，若在點擊后加入常規loading多少會有中斷感，快速的風格化轉場給玩家的體驗會更好。?

三、設計總結

3.1 設計思路總結

通用的迭代，多是在整體?風格已有的情況下，先將通用內容鋪量統一，再進行風格的打磨。具體來講就是先將動效核心的節奏和設計元素把握住，再將概念貫穿到各個內容。

首先是動畫節奏如何進行統一關聯，主要內容包括：

1. 每個界面的信息出現方式需要統一，例如列表、返回按鈕等，它們的出現方式和節奏需要具有一致性；

2. 通用界面的進場和切換也需要統一；

3. 部分點擊反饋效果可以采用統一的形式，例如item領取提示；

4. 部分活動界面的統一，例如手游呼吸活動界面，每個分頁的出現有各自的氛圍和出現細節，但其出現方式皆為從大到小的鏡頭縮放。

風格上如何去表現差異性，主要是體現在細節的設計上，用元素進行呼應，在一些細節設計上做與通用有關聯但是表現形式又不同的內容。包括但不限于：

1. 通用背景的氛圍與同色系界面的氛圍、元素和設計方向類似；

2. 鼠標的點擊反饋和loading這種高頻出現的內容，采用動效統一核心seed元素，但擁有各自的表現形式；

3. 在不影響操作的前提下，界面可以適當加入一些趣味性效果，進行元素上的關聯，例如背包新物品提示，采用動效來代替紅點等。

另外，通用動效的優勢就是用最高的性價比去實現界面中風格的刻畫和運用。當整體基調已定，后續的制作也可以有跡可循，節省了同類型內容的制作成本。

3.2 迭代歷程總結

考慮到通用動效的復用性和可持續性，迭代期間，經常會在性能、適配上花費較多的時間。相較于不加通用動效的界面，加上動效肯定會額外增加性能的消耗，所以如何盡可能地減少消耗，保留最優質的效果，也是我們在后期迭代過程中工作的大頭。

在性能優化上我們主要做了兩點：一方面在效果上先做最高配效果，審稿通過后，再去拉數據測試，做刪減優化。刪減方向主要包含部分層級刪減、圖片合并、效果合并、粒子限制等。另一方面劃分高低配兩個等級，高配采用高配效果，低配單獨制作低配效果，將動效表現減到最低，滿足基本需求即可。

下圖展示的是全屏背景的高低配動效對比。相較于高配表現，低配去掉了光效和粒子，僅保留了設計出現效果的暈染層級，并且在整體合并后層級大幅減少。

?

由于通用動效在迭代前已經在界面上有引用，所以在修改通用文件后會有可能出現適配性的問題。例如動效文件內部適配不同，導致外層修改尺寸后出現適配異常。還有不同設備尺寸不同，導致不同機型安全區適配有誤。最后就是引用檢查遺漏，導致個別界面沒有同步到新的動效文件。因此在通用動效修改后，也需要謹慎對引用界面進行檢查，防止遺漏。

以上便是個人在《逆水寒》手游的通用動效設計過程中總結出來的一些小小心得，希望能給各位帶來一些幫助~

··· END ···

CG姐妹互懟日常？3D萌妹模型在線拆臺

《黑神話：悟空》廢稿首次公開！600多件展品的主題藝術展開幕！

《哪吒2》再發威，都沖上日票房第二了？!