動效設計中的隱喻-2

在《 動效設計中的隱喻-1》中，我們談到了一些常見的介面動效設計隱喻。

這次我們再看一些別的有關隱喻（或曰明示）的設計。

示意關係

所謂示意關係，就是通過特定的動作來表明介面中控制元件之間的某些關係，包括包含關係、前後關係和位置關係。其實就是我們以前討論過的連線的一種。有一些比較常見的連線動作，可以很明確的表明介面變化過程中控制元件之間的關係。

如下圖的遊戲《Wonderbox:冒險製造者》中的“級別提升”的動效，就是一個表現控制元件關係的隱喻：所獲得的點數直接飄到經驗條上，接著進度條出現增長動畫。這就很直接的表現兩者之間的從屬關係。


如下圖所示的遊戲《刺客信條：起源》中的“技能升級”介面動效。就通過動態過程解釋了技能之間的遞進關係：一個技能的解鎖動效之後，會有黃色線條出現，將已解鎖技能圖示與下一個可解鎖圖示相連線。雖然如果沒有這個動態過程，兩者之間的關係也可以直觀的看到，但這種動態過程其實是對“逐漸升級”的最佳隱喻。所以這段動效其實是不可或缺的。


如下圖所示的遊戲《羞辱2》中的“黑市”介面動效。這個介面巧妙的利用了場景動畫與介面動畫結合的方式來解決物品的方位與圖示識別性的問題：左側的畫面中，貨架上的物品與右側皮膚中物品圖示的位置一一對應，切換右側的圖示時，左側的畫面鏡頭就對焦到具體的物體上。這樣即便右側的圖示較小，也可以通過左側的畫面物品看清楚物品。而且右側圖示的佈局設計一目瞭然，玩家也不會因為左側是特寫鏡頭而搞錯選擇方向。


示意層級

這也屬於連線的一種，屬於一種邏輯關係連線示意。一般通過平面二維展開，也會結合一些縱深空間關係來明確這一點。

如下圖所示的遊戲《刺客信條：起源》中的人物裝備操作介面。這裡的裝備詳情控制元件的出現動效，就是在前一個介面“人物詳情”往縱深後退之後出現的。並且裝備圖示本身還有一個位移動畫，為附屬控制元件騰挪控制元件。整個過程的空間感比較強，兩層介面之間的層級關係，在這個動態過程裡被解釋得一清二楚。


如下圖所示的遊戲《殺出重圍：人類分裂》的“郵件”介面裡的切換動效。這是個非常常見的表示介面層級關係的效果：切換第一級，展開第二級。操作第二級，會有第三級內容進行相應。


除上邊這些從屬邏輯的層級外，另外一些層級是屬於遞進邏輯的，比如不同等級的情緒。這種蘊含了情緒的層級，需要比較綜合的動態設計手段。

如下圖所示的遊戲《無畏契約》（Valorant）中連續爆頭提示動效：


這幾個擊殺圖示的設計本身就有層級關係，連續擊殺一個的圖示和連續擊殺三個的圖示顯然並不一樣。除了靜態樣式的不同，在圖示的動態設計上也需要有所差別，以便增強相關操作發生時的反饋強度，更深入的去表達這一提示所蘊含的情緒。

示意情緒

動效的存在目的之一就是表達情緒。而一些細微的情緒表現，也被附著在動效設計之中。或優雅或急躁，或催促或安撫，都可以通過不同的動作設計來表現。當然，這離不開視覺設計上的一些情緒元素去輔助。

如下圖的遊戲《Wonderbox:冒險製造者》中的“獲得冒險之心”的動效，就是一個表現強烈獲得感情緒的隱喻。動態的綵帶噴出與諸多光效的結合設計，都在靜態圖的情緒表現上有了很大提升。


關於更多情緒表達的東西，我們會專門有系列文章來討論，這裡不再展開更多。

還有哪些關於動效的隱喻設計曾經幫助你解決設計上的難題？歡迎評論指出，也期待你的意見和反饋。

以上。


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