動效如何構成連線 篇壹

我在遊戲介面動效的基礎理論裡說過，遊戲介面動效的三大基本功能是：連線、反饋與情感。從這篇開始，我將試圖較為深入的分析一下其中的“連線”的概念。

連線的含義本身就是字面意義所要表達的。但是遊戲介面中的圖形、資訊等紛繁複雜，所承擔的功能也非常多。因此，遊戲介面動效中的連線含義非常的豐富。

但是通過梳理具體的表現形式，我們可以將連線拆分為兩個部分的概念：聯絡與銜接。

其中，聯絡是將兩個有轉換關係的圖形進行轉化的動態過程。比如說在遊戲《控制》中出現的一些介面元素的動態效果：


圖中的“選項”在兩個介面轉場時，從主選單的原始位置移動到後一個介面的“路徑”顯示位置上，生動說明了當前頁面的邏輯位置。

可見，這種“連線”是最為直觀的一種動態設計。玩家無需動腦，也可以分辨出自己處於複雜遊戲介面系統中的什麼位置。

而銜接是在不一定有圖形上聯絡的若干頁面或者介面控制元件組之間進行設計，以使它們產生關聯的動態過程。這句話比較長，我們可以進一步詳細說明。

銜接就如蛇頭咬住蛇尾。蛇頭與蛇尾都不是單純的單個元素，它們都由數個元素構成，有圖形、文字等等介面資訊。兩組元素之間可能並沒有可以直接建立聯絡的圖形，比如共用一個底框，都有同個圖示等等。但是兩組元素間需要進行切換時就要建立銜接關係。

聰明如你，必然注意到，銜接的廣義概念會比較大，甚至會包括剛才提到的聯絡概念。但由於聯絡在本文特指圖形之間的直接轉換而非圖形組之間的關係，所以開頭我將其單列為連線概念中的一部。

最為常見的銜接就是介面之間的轉場動效，可以有非常豐富的表現形式。

除了常見的轉場動效，還能在一些有轉換效果的介面內應用到這種銜接動畫。


如上圖所示的《月神的迷宮》勝利結算動效中。“勝利”字樣就承擔了銜接結算兩個階段介面的主軸元素。在這個主軸的基礎上，其他的元素才有時間和空間騰挪轉換進行復雜的頁面切換排程。從而讓玩家在兩個介面的銜接過程中沒有感受到硬過渡。

至此，我們可以簡單的將連線概念的兩層關係形象化，畫出如下關係圖：


在銜接和聯絡兩個概念中，根據具體的表現形式又會有進一步拆分。具體是哪些，請關注本系列下一篇。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/7M40QmZnCRlXaYEW5FHDVw