動效如何構成連線 篇叄

本系列的上一篇文章中，我們進一步的把動效的連線概念中，聯絡和銜接的概念進行了細分。並且列舉了一些示例，這篇就討論下這些概念在實際工作中的應用。

在此之前先複習下這幾個概念的關係圖：





首先要明確的一點是，動效的連線功能幾乎無處不在，即便我們將這個概念拆分，並且分別進行了定義，也不代表實際狀況都能夠跟這些概念完全的一一對應。也不意味著你需要刻板的對應這些概念去設計相應的動效。

實際上應該去做的就是將這種概念或者思維方式融入在千變萬化的介面設計模式當中過去。

實際工作中，我們所設計的連線動效很多時候都是無意間進行的。只有當你所設計的動效產生了一定問題時，才需要去下意識的分析，到底是哪裡的連線沒有交代清楚。

當我們的介面中有一定的操作時，就一定會有反饋，這種反饋在客觀上會形成介面控制元件或者元件之間的連線關係。如果你的設計效果沒有被理解，基本上可以判斷是連線出了問題。

比如現在有這樣一個介面：


這個介面上會出現一個彈窗如下：



在點選這個彈窗中的按鈕表示“確定”之後，介面中會發生一些變化，如下圖所示：



新出現的框體與剛才的彈窗顯然有某種聯絡。如果想讓這個操作過程中，彈窗與新框體之間產生連線關係，如果僅用閃切是不夠的，比如下圖這樣的效果：



這看似是一個“此起彼伏”的連線關係。但是如果原本介面內就有諸多框體，而且框體內有不少保活動效。在彈窗入場與退場之間，玩家會很難注意到角落裡新增加的框體的。這種效果就會被減弱。

因此，我們必須要讓新框體的出現形式更加引人注意。比如為它設計一個簡單的入場動畫：



這才是這種情況下比較合適的“此起彼伏”的控制元件間連線方式。

但如果這種間接聯絡仍然不足以醒目。就要使用直接聯絡方式了。比如讓彈窗與新框體之間有型體上的直接變化：



這樣設計的話，玩家無論如何都會注意到這兩個控制元件之間的聯絡了。

另外，利用“直接聯絡”設計時，應該避免跳切。跳切會造成圖形變化的同時，頁面佈局發生變化。玩家會在某個瞬間無法理解介面的變化過程。比如我們在前邊文章中列舉過的一個例子：



這是《使命召喚手遊》中一個介面中各個模式間切換的效果。

其中每個模式都會有個展開的動畫，這對單個模式自己來說顯然是一種直接聯絡。但是在模式間缺乏原選中模式收起到新模式張開的變化，而是進行了直接閃切。由於控制元件的張開會改變原先介面中控制元件的佈局關係，這種收起張開的狀態必然會影響玩家操作前後頁面整體的佈局。當沒有收起到張開變化的切換動畫時，這種切換就是不合適的硬切，相對於有這個變化的順滑效果，這種硬切很容易在切換的瞬間讓玩家鬧不明白髮生了什麼。

而類似的效果在《黑潮之上》中的處理就比較恰當，這也符合動效需要交代“從哪裡來，到哪裡去”的設計原則：



還有更多關於動效“連線”相關的設計，請關注本系列的下一篇。歡迎你的意見和建議，並期待你的實踐應用與反饋。

以上。



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