動效設計中的隱喻-1
這些隱喻有些是常識中的某些共識,有些則是設計師通過長年累月的傳達,讓使用者逐漸培養出的一種習慣。這種習慣看似是理所當然的。設計師們也樂於在各個設計角落佈置諸多隱喻來幫助達到設計目的。
比如說紅色通常用來警示,黃色代表引導,綠色代表安全。露出一角表明下邊還有,而箭頭方向往往讓你控制不住的去看對應方向上到底藏著什麼,等等
作為介面的重要組成部分,動效有沒有類似的隱喻呢?
當然有,而且有很多。我們來看下常見的都有哪些,你可憑此有的放矢的設計動畫,以實現設計目標。
趨勢型
有些控制元件本身要表達的含義會決定動畫的整體趨勢。這類控制元件的動畫往往通過這種趨勢來表達某些特定功能含義。
自我增強的動作往往由內而外,如升級,新訊息提示。
如下圖所示的遊戲《Gran Saga》中的“升級提示”動效,就是一種由內而外“爆開”的動態效果。
下圖所示的《全民奇蹟》中的小型彈窗,被設計成一種冒出式的動效。雖然這是一種全域性統一的動態樣式,但用在獎勵提示中也非常的吻合“獎勵到達”的含義。
獲得外部增益的含義則需要動畫有由外而內的動作趨勢,如獲得類彈窗,勝利結算等。
如下圖所示的遊戲《Gran Saga》中的“任務完成”彈窗動效。就用了由外而內趨勢的“摔入”動畫效果。
功能型
不同的細節功能,則需要固定型別的動畫。
1.視覺層級層面。介面所表達的資訊越重要,其動畫往往需要有越劇烈的運動。
比如,下圖所示的手遊《尼爾:轉生》中的“技能升級”與“人物升階”的動態效果就表現出明顯不同的層次感。
2.介面銜接層面。常見的介面入場的動作趨勢,或保活狀態的動效,往往也具有引導使用者操作的作用。這是一種利用動畫去表現或引導功能的做法。
如下圖所示的《機動都市阿爾法》S3賽季的賽季卡介面入場動效中,就有很多隱喻:多彩色的前奏設計以及同樣樣式的多控制元件出現形式,都在點題該賽季“玩具派對”的主題。拖尾階段右側紅色卡片的抖動,則是引導玩家去點選購買的意思。
又如在下圖《有殺氣童話2》的“提示彈窗”中,表示否定含義的藍色“取消”按鈕上被設計了保活動效,就是一種不恰當的設計。因為即便在靜態設計上,表示肯定含義的紅色“確認”按鈕的色彩比表示否定含義的藍色“取消”按鈕要更加明顯(這本身就表明設計者想要引導玩家去點選“確認”按鈕),但一旦加入動效,這種區分強化效果就被減弱了很多。玩家會不自覺的被介面中“動態”的物品吸引,從而導致設計者不期待的操作,即點選那個看起來更明顯的藍色“取消”按鈕。
3.圖形細節層面。不同圖形會擁有固有的運動趨勢與固定含義,請勿亂用。
比如箭頭多數用來指示目標,但把它當成平常圖示並設計動效,會造成理解混亂。
上圖所示的這種圖示,如果不是為了刻意指示其下方的某個物件,就要避免類似的設計。因為其中央的箭頭形狀有很強的目標指示暗示。如果將三角形作為一個普通的圖示去處理,正好又按照這種圖形的運動趨勢設計了運動形式,就會造成很大的誤解。玩家不會認為這是個有其他含義(如特定的陣營圖示等)的圖示,而只是個單純指示目標物件的提示。如果對應方向上沒有要指示的標的物,就會造成理解困難。
又如鋒利的折線運動不能配合彈動運動,這樣不符合“圖形對應特定運動模式”的規律,自然也無法在此基礎上傳達隱喻含義。
如下圖所示的閃電型圖形,如果用彈動的出場形式,就差了很多氣勢。當然,在特定的風格氛圍下,這樣的動作也不是不可接受,只是那樣的整體風格“語境”裡,恐怕圖形的設計都要設計得更加圓潤一些才比較合適。
針對這一示例,我們認為比較合適的動作還是偏向震撼和凌厲一些比較好,比如說設計成下圖這樣爆破式動畫可能會更好一些:
在這種效果基礎上,你才可以憑藉圖形與動態的一致性,去給玩家傳達合適的隱喻資訊。
遊戲介面動效還有哪些隱喻?如何更好的利用這些隱喻規則?更多內容請期待本系列的下一篇。
以上。
來源:COTA五號
原文:https://mp.weixin.qq.com/s/og-D5afsxWm8fAFk4LcYuw
相關文章
- 動效設計中的隱喻-2
- 一個隱喻故事
- 軟體構建和隱喻
- Principle如何製作動效設計?簡單易學的Principle動效設計教程
- UI | 一組有趣的互動動效設計作品UI
- 通過動效學習UI設計UI
- 接納自己,學會勇敢——《蔚藍》與它的情感隱喻
- AI、聲效、震動:聊聊動作遊戲的其他設計AI遊戲
- canvas 中普通動效與粒子動效的實現Canvas
- 動效設計的功能性-視覺引導視覺
- 動效設計的功能性-轉場退場
- 資料模型是一種隱喻修辭手法 - brcommunity模型Unity
- 什麼是產品設計中的HiPPO效應?
- 電競比賽包裝中的動效設計-使命召喚聯賽CDL
- Qt實現控制元件的漸隱漸現動效QT控制元件
- 想要做好遊戲介面動效?這個最基本的動效設計準則該收藏了!遊戲
- 《逆轉裁判1》關卡設計:你的選擇是無效的
- 君子喻於義,小人喻於利
- [譯] APP 動效設計,看完就會!(Material Design 設計者撰寫)APPMaterial Design
- 拆解任天堂教科書般的介面動效設計
- 動效如何表達情感-1
- 用動效建立的可用性:動效中的使用者體驗宣言
- 複雜性系統隱喻:修剪比砍樹更靈活 - Dave
- 如何讓動效更有細節-1
- 遊戲中的活動設計遊戲
- 【附案例】UI互動設計不會做?設計大神帶你開啟動效靈感之路UI
- 隱喻現實的《律法之地》,是如何通過細節提升劇情帶入感的?
- 8個最佳動效網頁設計,告別枯燥體驗!網頁
- 隱私計算在智慧城市建設中的應用:平衡公共安全與個人隱私
- JavaScript中的領域驅動設計JavaScript
- 關於 rxjs 程式設計中的 take(1) 操作JS程式設計
- 前端中的簡單程式設計題-字串(1)前端程式設計字串
- 如何有效學習互動設計1
- 績效管理體系的設計方法有哪些?
- 工具推薦|2020年最值得推薦的10款UI動效設計工具UI
- 關於動態音樂設計的思考-Part 1-設計分類學
- vue中設定height:100%無效的問題Vue
- 動效,一種屬於前端程式設計師的浪漫,無與倫比的體驗前端程式設計師