動效設計的功能性-轉場退場

資訊切換-轉場

轉場指的是從一個系統跳轉到另一個系統中去，前面講到玩法流程有多個系統組合而成，系統又由多個介面組合而成，透過介面又可以實現系統與系統之間的跳轉，這是開發者設計的系統邏輯，而作為玩家他是無法感知介面與介面之間的邏輯關係的，正是因為沒有預期，如果隨意在介面中切換，玩家就會產生疑惑，這個是什麼系統？跟之前的介面有什麼關係？我怎麼突然跳轉到這裡來了，在沒有輔助解釋的的情況下，玩家只能透過經驗去理解，並且不斷地去嘗試，這是一個使玩家感到非常挫折的體驗。

因此動效就需要幫助玩家理解介面與介面之間的連線關係，但是在設計之前我們還需要考慮玩家的使用需求，畢竟很多玩家不僅僅只玩過一款遊戲，在市場教育下，玩家對於介面之間的邏輯還是有所瞭解的，他們更趨向於透過自己已有的經驗去嘗試，拖沓的解釋動畫反而造成他們的反感，就算毫無經驗的新玩家，在新手引導下，對於高頻率點選的系統， 也會對介面與介面直接的邏輯有所理解，導致在後期時，過多設計技巧用於解釋的動畫效果，在玩家的眼中就會顯得有些多餘，因此在設計的時候，需要將介面按需求劃分，再決定要不要，以及要怎麼樣設計具有解釋介面層級關係的轉場動畫。

不需要解釋層級的轉場效果

需求：

以功能類資訊為主的介面，這類介面的設計目的主要以解說資訊，方便操作為核心，又與核心玩法息息相關，需要玩家進行高頻率操作，因此對於熟悉此玩法流程的玩家對於介面的連線關係是十分熟悉的，而對於新玩家來說，在如此高頻率的操作下，對介面的連線關係也不陌生，因此此類介面都會選擇樣式簡單，轉場迅速且不需要解釋介面層級關係的轉場樣式。

動效設計：

1、直接轉場

沒有任何的過渡效果，直接跳轉到另一個系統，然後另一個系統的資訊重新整理入場，優勢：是轉場效果簡單，耗費時間少，方便玩家快速地進行瀏覽資訊和作業系統，劣勢：是玩家對介面跳轉沒有任何預期，在完全沒有過渡的情況下，容易給玩家造成驚嚇


2、黑幕轉場

黑幕轉場是基於直接轉場上做的最佳化處理，在介面與介面直接做了一個黑幕過渡，是希望既能保留直接跳轉的優勢：轉場效果簡單，耗費時間少，又希望透過一個黑幕作為介面與介面之間跳轉的緩衝，避免突然的視覺變化，來降低玩家被驚嚇到所帶來的不安全感。


3、圖形轉場

圖形轉場基於黑幕轉場上做的最佳化處理，原先過於單調的黑幕，透過提取世界觀元素，把元素概括成圖形的方式，將設計好的圖形最後與過渡的幕布結合在一起，組成圖形轉場。而圖形轉場則繼承以上轉場的所有的優點：轉場效果簡單，耗費時間少，有幕布作為緩衝，避免突然的視覺變化，又給轉場增加了設計細節，起到豐富畫面的作用。


需要解釋層級的轉場效果

需求：

一種情況是：在同一個系統下具有多個功能，且每個功能都具有關聯性的情況下，資訊繁多，層級複雜，因此就需要透過動畫效果作為引導和解釋。另一種情況：則是以表現類相關的需求， 這類介面的設計目的主要以增強體驗和代入感為主，因此透過動畫，營造氛圍，增強儀式感的形式，幫助玩家獲得強烈的情感反饋。還有一種情況，就是同為表現類相關的需求，但介面的設計目是透過優秀的包裝能讓商品更自然的融入到遊戲世界中，而動效扮演的角色就是商品增加“故事性”，在符合世界觀的設定下，強化商品價值，引導玩家進行付費。

引導和解釋

遊戲功能中有諸多且有不同的層級關係，當介面區別不大時，玩家容易對操作路徑產生遺忘，無法進行正確的操作，使玩家獲得糟糕的遊戲體驗，對此為了降低玩家的學習成本，使玩家的體驗變得更加流暢，設計師會透過利用空間關係來幫助玩家記住資訊，而最後呈現的效果則需要靠鏡頭語言來表達。

動效設計：

1、鏡頭轉場-平移、垂直（並列關係）

平移鏡頭是指將鏡頭在不改變物體大小的前提下，從一個地方移動到另一個地方，從而改變物體在畫面中的位置，因為只是鏡頭的移動，物體之間都是在同一運動路徑上的，強調了兩者之間的關聯性，因此鏡頭平移在介面轉場中，多用表達的介面之間的並列關係。


當然除了平移還有垂直，攝像機透過垂直弧面的平滑移動——朝上或朝下，這種方法的視覺衝擊力很強，常常用來顯示一些高得無法用一個整畫面完整表現的景物，效果跟平移一樣，多用表達的介面之間的並列關係。


2、鏡頭轉場-推進、拉遠（層級關係）

拉遠或推近是指攝像機向前或向後移動，使得畫面中的物體變得更大或更小，這種方式常用來突出某一物體或者表達物體的遠近感，因此在動效設計中，推拉的方式通常用於表達介面與介面之間的層次關係，可以讓玩家很直觀的理解介面跳轉的邏輯和各個資訊層級之間的關係。 例如在《宿命迴響》的角色資訊系統中，如果不是透過不斷地向前推近的鏡頭效果，以及以角色因推近鏡頭不斷變大作為判斷錨點，其實我們很難識別自己在哪一層級的介面中。



而拉遠鏡頭，是透過對人物/景物向後拉遠，逐漸遠離主體的一個過程，畫面從主體區域性逐漸擴充套件，玩家也跟隨鏡頭視角後移，看到區域性和整體之間的聯絡，從下面的例子中也可以看出，透過拉遠鏡頭展示當前戰場衝突作為區域性，以及衝突列表作為區域性到整體的過程，暗示了區域性資訊整體之間的關聯性。


總的來說推近鏡頭是透過將畫面中的主體不斷的放大，使玩家的視角從整體到區域性，來解釋介面中系統與子系統之間的遞進關係；而拉遠鏡頭，則是透過將畫面中放大的主體縮小，整體資訊出現，來解說主體與資訊之間是區域性與整體之間的關係。

3、鏡頭轉場-環繞

鏡頭圍繞畫面某一中心點進行弧線運動， 水平環繞的運鏡手法，可以更好的渲染主體，這種鏡頭效果主要目的是為了突出主體，因此他的用法也較為廣泛，可以以角色作為主體直接進行轉場，又或者以角色作為中心點，透過切換不同的頁面/點選不同選項時，對系統內的子系統進行詳細的解釋。


以上就是以“功能性”為主導的轉場效果，負責解說功能，方便玩家迅速瀏覽資訊，理解介面層級關係，獲得便捷舒適的操作；但前面也說了，還有以“表現類”為主導的轉場設計，透過動畫，營造氛圍，增強儀式感的形式，增強代入感的同時給予玩家強烈的情感反饋，會在後面轉場的設計篇中一一講到。

資訊關閉-退場

開啟-切換-關閉是介面互動的一個迴圈規律，資訊的突然出現、切換和消失都會使玩家感到困惑，而動效要做的就是提供必要的視覺線索，讓玩家能夠理解動作前後發生了什麼。允許玩家專注當前目標，無須記住操作路徑，從而提高使用效率。但入場和轉場都有很多表現的方法和技巧，唯獨是退場很少被提及，是因為對於需要玩家進行高頻率操作的介面，如果給退場設計動畫效果，在玩家看來就是介面響應時間過於長，遊戲體驗不流暢，進而產生著急、焦慮的情緒，因此介面退場多會以簡單迅速、直接消失的效果作為表現形式，如黑屏過渡，漸變消失，迅速縮放等，但如果介面有做擬物化相關的包裝設計，動效也會根據UI的圖形結構、世界觀等做出更符合載體運動規律的退場動效，如書本的開啟和閉合等。


解釋資訊消失的這個動作，比起退場和適合運用在轉場中，前面對頁籤的說明中可以瞭解到，點選頁籤切換資訊，系統迅速響應玩家切換介面的需求，幫助玩家找到目標介面，右側切換的資訊重新入場，表示資訊已切換/已重新整理，在這一過程中，可以看到資訊的再次入場，並沒有退場這一動作，因此玩家會對資訊的效果消失多少會產生疑惑，如果資訊退場後再次入場，從邏輯上來說就合理多了，既解釋了介面之間的邏輯關係，退場所帶來的緩衝時間，又能避免視覺上的突然變化給玩家造成驚嚇。

不過這個轉場設計只適合用在需要展示表現力\低頻率使用\較為重要的資訊介面中，因為高頻率使用的介面，玩家對它的需求是迅速響應，以便快速地進行瀏覽資訊和作業系統，轉場設計較為費時長，與玩家的核心需求背道而馳；其次系統與系統之間的跳轉非常平常且繁多的一個操作，轉場設計需要耗費較多的人工成本，所以理應好刀要用在刀刃上。


相關閱讀：

動效設計的功能性-入場


來源：全棧設計交流
原文：https://mp.weixin.qq.com/s/ZlR5BR8_UegAjIaZW_8uyw