動效設計的功能性-視覺引導

前面聊完遊戲透過入場、轉場和退場來展現資訊出現、切換和消失，撇開存在感不強的退場，不管是入場、轉場還是退場，都涉及到一個問題，那就是資訊的重新整理，一個介面這麼多的資訊與控制元件，我們該如何判斷，哪個該先出現，哪個該後出現呢？又該以怎麼樣的形式入場呢？那麼接下來我們就來聊聊如何透過功能控制元件出現的先後次序形成的視覺引導，來幫助玩家更好地理解資訊。而這一句話中包含了兩個關鍵詞，一個是先後次序，另一個則是視覺引導。

先後次序

想要弄清楚控制元件的出場順序，首先要了解控制元件的作用以及它在介面中的關係：介面是由多個控制元件組成的，而控制元件就是將具有關聯性的資訊，透過聚攏的方式，也就是將彼此相關的項，統一歸組到一起，從視覺上來看會將他們歸納成一個視覺單元，從功能上來說用於接收玩家的輸入、顯示資訊和執行特定功能。而透過關聯性資訊組成的控制元件，中的“關聯性”指的是資訊與資訊之間的連線關係，而這種連線關係分別是主次關係和並列關係，主次關係： 主體以及主體的從屬資訊或控制元件；並列關係：指的是從功能上互為同一層級的資訊；因此資訊入場時，控制元件會根據資訊的連線關係，進行依次入場。


上圖只是把介面會出現的資訊標註出來，並不代表每個介面都會出現主體、主次關係的控制元件和並列關係的控制元件，就好像以列表為主體的介面，列表本身既是主體又是由並列關係的控制元件所組成的，列表的控制元件還包含了主次關係，因此仔細分辨資訊的屬性，是設計好動效的前提。


1、主次關係

主指的是介面中的主要資訊，次指的是作為主體的從屬資訊，常以擺放在主資訊旁邊的形式，來作為解釋/說明具有直接關係的資訊，又或者具有聯絡的間接資訊，在設計動效時，往往採用跟隨動畫，先是主體資訊出現，接著作為從屬的子資訊再跟隨出現，暗示元素之間的父子繼承關係，形成先後出現的層級感，因此不管是具有主次關係的介面，還是具有主次關係的控制元件，入場時都是根據跟隨動畫，資訊跟隨主體先後入場的，像下面《崩壞 星穹鐵道》的新手任務介面，資訊主體是角色形象，透過角色先出現吸引住玩家的注意力，任務列表跟隨入場，讓玩家的視線最終停留在任務列表之上，引導玩家只要完成任務後即可獲得角色。

除了入場的先後次序，我們在處理主次關係的資訊時，可以採用縮放運動，從大到小的縮放，模擬物體從上往下砸的運動趨勢，砸下來的那一刻子資訊出現，模擬主體砸下來的那一刻，在力的作用下，迸濺出碎片也就是我們的子資訊，很生動地概括主次資訊的關係，但這只是技巧之一，使用時需要考慮應用場景，比較適合運用在主次關係明確的介面上，若只是主次關係的控制元件，則不太適應，因為這個介面有自己的主體資訊，若主次關係中的子主體還採用縮放運動，則顯得太跳太吸睛了，這會導致介面層次關係不明，因此作為介面中具有主次關係的控制元件，子主體會採用先對緩和一點的出現方式，如透明出現，子資訊再隨著出現。


2、並列關係

並列關係指的是在同一系統上存在的同一層級的資訊，既然是同一層級，那控制元件入場時採用的是同時進場、同一方向進場又或者同一運動曲線進場的動畫效果，透過時間、方向或運動規律的一致性，來暗示玩家，在介面中控制元件資訊之間的平級關係。


視覺引導（引導查閱資訊 ）

主次關係和並列關係的控制元件運動我們瞭解了，但在介面中的資訊會存在上圖所列舉的情況，控制元件之間既存在主次關係又存在並列關係，而且控制元件、資訊組會有4-5個之多，那這時候的控制元件又該誰先入場？誰後入場？又該以怎麼樣的形式入場呢？

在UI設計中，設計師會根據玩家的閱讀習慣，從上到下，從左向右進行排布，在進行資訊排布時，運用視覺元素來建立一條虛擬的“線”，從而達到提高閱讀效率的作用。並在動線結尾處顯示最希望使用者看到的內容/按鈕，因為玩家的視線會根據頁面元素進行移動，最終停留在底部，而介面底部離手近，方便引導玩家參與內容，最大程度轉化玩家或提升付費率。

因此動效要做的就是透過控制元件先後出現的次序及控制元件的運動規律，將這條虛擬的視覺動線具現化，起到視覺引導的效果。例如下圖中的介面，角色是主體，7日簽到是標題，道具是資訊內容，三者之間呈主次遞進關係，因此設計動效時這三者之間是按照次序先後入場的，是玩家這時候的視線跟隨列表的運動規律停留列表末端，角色等級和角色資訊隨著出現，動效的運動規律既解釋資訊之間的關係，又暗示了簽到活動的價值，吸引玩家進行每日簽到，達到留存玩家的目的。



引導提示（引導點選）

不過視覺引導這種具有暗示性的提示方式，對於玩家來說還是過於隱晦了，更大的作用還是提高玩家的閱讀效率，但提升閱讀效率的前提得是玩家看到資訊，或者說被訊息所吸引，進而開啟進行閱讀，為了滿足開發者的需求，設計師透過控制元件、介面、技巧等作為提示的方式，來引導或強調玩家進行操作，那接下來我們來了解一下都有哪些作為提示功能的控制元件，以及它們都有怎麼樣的功能需求和表現方式吧。

引導性控制元件

1、 小紅點

功能：小紅點的主要功能是引導性，引導玩家去看，特別是開發者想要推薦的內容，例如版本玩法、最新活動等，又或者是與玩法進度相關的資訊，提示你任務進度，以及任務完成後的獎勵獲取，當然看只是一方面，最重要是引導你看完之後的操作，如任務完成後的獎勵獲取，對最新活動的參與，還有當前角色的能力提升，引導玩家在有效的時間內完成更多有效的操作，使資訊的獲取更高效。

動效：小紅點的設計是借鑑了警示燈的，不管是外在形象還是作用，透過閃爍的燈光向周圍人傳遞提示資訊，防止誤操作、無效操作等情況。因此在動效設計中，透過縮放運動模擬光的閃爍效果，小紅點外圈通常還有一圈隨之閃爍縮放的光，模擬燈光閃爍時對周圍環境的對映，不過小紅點的運動強度不宜過大，因為小紅點普遍被運用到廣泛的介面之中，特別是主介面，當小紅點過多時，如果運動強度還過大，容易對玩家造成干擾，影響玩家對介面資訊的識別。

注：小紅點除了圓形的，還有其他異形的小紅點，例如像下圖的NEW，又或者是禮盒的形狀，根據圖形結構加上對應的動效即可。


2、 公告提示/物品獲得提示

功能：公告提示指的是主介面進行走馬燈播報，用以顯示全服的公告、個人的提升、抽卡獲得、戰鬥力變化等資訊，起到提示以及炫耀的作用，引導玩家相互競爭；而物品獲得提示指的是提示玩家在遊戲的過程中獲得的獎勵物品，是針對個人的提示訊息。

動效：為什麼要把兩個不同功能的控制元件放在一起講呢，是因為它們的表現形式極為相似，都是黑底加資訊內容，放在一起方便對比進行區別，公告提示的動效是黑底靜止，文字進行播報滾動，一靜一動是為了讓玩家把注意力放在滾動播放的訊息上面。


而物品獲得提示需要依次展示物品資訊、數量及品質，因此控制元件資訊是以逐次遞進的方式出現的，如果獲得較為稀有的物品還會有相關品質的顏色掃光作為提示。


3、狀態提示

功能：常用於核心玩法，用提示玩家戰鬥開始、玩家遭遇狀況，玩家當前狀態，以及BOSS來襲等一系列訊息，確保玩家做好準備並及時調整當前操作，前面也說過，如果突如其來的視覺變化會使玩家造成對系統關係的邏輯混亂，以及驚嚇，非常不利於玩家對當前戰局的判斷，因此狀態提示一方面是為了有個緩衝時間，避免突然的視覺變化，來降低玩家被驚嚇到所帶來的不安全感，其次具有衝擊力的文字也提示了玩家激烈的戰鬥準備開始，調整好自身狀態，做好作戰的準備。

動效：不同的風格以及不同的狀態，動效的設計都會有不同的表現形式，比如BOSS來襲時的動效設計，會讓介面中元素進行激烈運動，透過高頻率的運動趨勢，給玩家營造緊張、緊急的狀態，又比如時科技風的狀態提示，會結合科技風的元素，例如類比電子故障狀態，或者用電子線路作為裝飾等來貼合世界觀，總的來說就是需要根據UI的圖形結構、世界觀等做出更符合載體運動規律的動效。


4、引導提示

功能：引導提示又被稱為強制性提示，常見於新手引導，是為了確保玩家能夠學會玩法並能夠進行熟練操作的這一個目的，因此玩家被強制要求按照設計者的方式完成操作，在指定的操作完成之前，玩家不被允許進行其他操作，是為了確保了玩家能夠按照設計者的教學流程去操作，也是對於最核心的遊戲機製作為一個託底的保護性的方法。

動效：常規的形式就是一個縮放擴散的圓，以及前後伸縮運動的手，而縮放擴散的圓，是模擬玩家點選螢幕後，表現出來的現象，就好像現實中碰觸水面，所產生擴散開來的波紋一樣，而前後伸縮運動的手就是模擬玩家點選時，手指的透視效果，透過具象模擬的形式，引導玩家往這個區域進行點選操作。


5、文字入場

文字在介面中屬於“萬金油”一般的設定，在不同的功能需求上發揮著不一樣的作用，常見的功能為：文字標題、資訊詳情、控制元件描述，劇情對話等，而文字基於不同的功能，扮演著或主體或從屬資訊的角色，接下來舉幾個較為常見的例子。（屬於入場的控制元件資訊，但由於先前還沒講到介面的主次、並列關係，因此放著這裡作為補充內容）

①文字標題：標題是對介面資訊內容或遊戲體驗的過渡凝練和概括，與內容之間存在強烈的從屬關係，因此當介面中標題才是介面主體時，前面我們也說過主次關係，主次關係的資訊往往採用跟隨動畫，先是主體資訊出現，接著作為從屬的子資訊再跟隨出現，除了先後出現的次序，為了凸顯標題中所涵蓋的內容，通常還會為其營造對應的氛圍，例如屬性/等級提升、結算勝利等會透過絢爛且富有節奏感的動效，來給玩家營造積極強烈的情感反饋，同時也是為了強調這一資訊，強調對玩家能力的認可。


②資訊詳情/控制元件描述：如果標題是主體，那資訊詳情就是那個內容，而控制元件就是將關聯的資訊內容，以聚攏的方式形成一個視覺整體，因此資訊詳情通常以一個個控制元件的形式同時或依次入場，置於同時還是依次具體要看資訊控制元件的具體功能來判斷。


③劇情對話：以文字的形式，向玩家講述遊戲的背景故事、與玩家互動的人物角色性格、以及一些列由任務、事件和衝突形成的情節發展，是給玩家帶來沉浸式遊戲體驗的重要組成部分，畢竟一個好的遊戲劇情能夠讓玩家更加投入其中，感受到遊戲的樂趣和挑戰，而文字在這裡的出場順序，是根據玩家的閱讀順序從上往下，從左往右依次出現的，形成的視覺引導，讓玩家能夠跟隨字型出現逐字進行閱讀。


提示性技巧

除了一些提示性控制元件，還有一些提示性技巧適用於在介面控制元件之上，透過給需要吸引玩家注意的資訊增加動效及細節，在靜態的介面上，十分亮眼和吸睛，引導玩家在有效的時間內完成更多有效的操作，使資訊的獲取更高效。但是由於提示性技巧並不是唯一的，它們有多種表現形式並且各有不同，還會組合起來一起使用，日常使用的場景也有所不同，所以需要我們來了解技巧的表現形式和使用場景。

①掃光

掃光是動效設計中常用到的一種技巧， 光效會隨著時間進行掃射， 利用光的移動和漸變造成一種動態視覺效果，常用於給控制元件的動效效果增加細節，以及透過吸引玩家注意，引導玩家進行操作。


②環繞光

環繞光也是動效常用技巧之一，光環繞在物體邊框上迴圈轉動，透過給物體框增加動效，來體現道具的稀有性，以此來吸引玩家的注意力，在活動性介面運用的比較多，提高活動中道具獎勵在玩家心中的價效比，進而達到引導付費或玩家留存的效果。


③抖動/搖晃

不管是抖動、搖晃還是其他動作的動效效果，都是為了讓玩家的眼睛注意到這個正在運動中的目標，來達到吸引玩家注意力的目的，繼而進行後續的操作，常用於與獎勵提示相關的控制元件


④粒子光效

粒子光效透過模擬光線穿透、反射、散射等效果，來增加控制元件的細節和視覺衝擊力，既凸顯了提示性，比如在任務系統中，提示玩家任務進度，引導任務完成後的獎勵獲取，又能給禮盒增加細節凸顯示獎勵的價值，吸引玩家繼續完成下一個任務。

除了運用在獎勵道具上比較多之外，主介面上一些比較重要的功能按鈕，例如核心玩法的功能入口以及活動入口也會用到粒子光效，透過迴圈流光吸引玩家注意，前者是為了引導玩家去體驗核心玩法，後者是引導玩家瞭解剛剛上線，價效比超高的活動，進而選擇付費或留存。



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