天天看點

動效設計中的隐喻-1

界面中靜态視覺語言有隐喻,這個我們都知道。

這些隐喻有些是常識中的某些共識,有些則是設計師通過長年累月的傳達,讓使用者逐漸培養出的一種習慣。這種習慣看似是理所當然的。設計師們也樂于在各個設計角落布置諸多隐喻來幫助達到設計目的。

比如說紅色通常用來警示,黃色代表引導,綠色代表安全。露出一角表明下邊還有,而箭頭方向往往讓你控制不住的去看對應方向上到底藏着什麼,等等

作為界面的重要組成部分,動效有沒有類似的隐喻呢?

當然有,而且有很多。我們來看下常見的都有哪些,你可憑此有的放矢的設計動畫,以實作設計目标。

趨勢型

有些控件本身要表達的含義會決定動畫的整體趨勢。這類控件的動畫往往通過這種趨勢來表達某些特定功能含義。

自我增強的動作往往由内而外,如更新,新消息提示。

如下圖所示的遊戲《Gran Saga》中的“更新提示”動效,就是一種由内而外“爆開”的動态效果。

動效設計中的隐喻-1

下圖所示的《全民奇迹》中的小型彈窗,被設計成一種冒出式的動效。雖然這是一種全局統一的動态樣式,但用在獎勵提示中也非常的吻合“獎勵到達”的含義。

動效設計中的隐喻-1

獲得外部增益的含義則需要動畫有由外而内的動作趨勢,如獲得類彈窗,勝利結算等。

如下圖所示的遊戲《Gran Saga》中的“任務完成”彈窗動效。就用了由外而内趨勢的“摔入”動畫效果。

動效設計中的隐喻-1

功能型

不同的細節功能,則需要固定類型的動畫。

1.視覺層級層面。界面所表達的資訊越重要,其動畫往往需要有越劇烈的運動。

比如,下圖所示的手遊《尼爾:轉生》中的“技能更新”與“人物升階”的動态效果就表現出明顯不同的層次感。

動效設計中的隐喻-1
動效設計中的隐喻-1

2.界面銜接層面。常見的界面入場的動作趨勢,或保活狀态的動效,往往也具有引導使用者操作的作用。這是一種利用動畫去表現或引導功能的做法。

如下圖所示的《機動都市阿爾法》S3賽季的賽季卡界面入場動效中,就有很多隐喻:多彩色的前奏設計以及同樣樣式的多控件出現形式,都在點題該賽季“玩具派對”的主題。拖尾階段右側紅色卡片的抖動,則是引導玩家去點選購買的意思。

動效設計中的隐喻-1

又如在下圖《有殺氣童話2》的“提示彈窗”中,表示否定含義的藍色“取消”按鈕上被設計了保活動效,就是一種不恰當的設計。因為即便在靜态設計上,二手手遊買号平台表示肯定含義的紅色“确認”按鈕的色彩比表示否定含義的藍色“取消”按鈕要更加明顯(這本身就表明設計者想要引導玩家去點選“确認”按鈕),但一旦加入動效,這種區分強化效果就被減弱了很多。玩家會不自覺的被界面中“動态”的物品吸引,進而導緻設計者不期待的操作,即點選那個看起來更明顯的藍色“取消”按鈕。

動效設計中的隐喻-1

3.圖形細節層面。不同圖形會擁有固有的運動趨勢與固定含義,請勿亂用。

比如箭頭多數用來訓示目标,但把它當成平常圖示并設計動效,會造成了解混亂。

動效設計中的隐喻-1

上圖所示的這種圖示,如果不是為了刻意訓示其下方的某個物件,就要避免類似的設計。因為其中央的箭頭形狀有很強的目标訓示暗示。如果将三角形作為一個普通的圖示去處理,正好又按照這種圖形的運動趨勢設計了運動形式,就會造成很大的誤解。玩家不會認為這是個有其他含義(如特定的陣營圖示等)的圖示,而隻是個單純訓示目标物件的提示。如果對應方向上沒有要訓示的标的物,就會造成了解困難。

又如鋒利的折線運動不能配合彈動運動,這樣不符合“圖形對應特定運動模式”的規律,自然也無法在此基礎上傳達隐喻含義。

如下圖所示的閃電型圖形,如果用彈動的出場形式,就差了很多氣勢。當然,在特定的風格氛圍下,這樣的動作也不是不可接受,隻是那樣的整體風格“語境”裡,恐怕圖形的設計都要設計得更加圓潤一些才比較合适。

動效設計中的隐喻-1

針對這一示例,我們認為比較合适的動作還是偏向震撼和淩厲一些比較好,比如說設計成下圖這樣爆破式動畫可能會更好一些:

動效設計中的隐喻-1

在這種效果基礎上,你才可以憑借圖形與動态的一緻性,去給玩家傳達合适的隐喻資訊。

遊戲界面動效還有哪些隐喻?如何更好的利用這些隐喻規則?更多内容請期待本系列的下一篇。

繼續閱讀