0/1
Motion Design Principle
Motion Graphic Design & Animation Design Principles Website 是由 Zajino digital studio 所製作的網站,主要說明在數位設計中,動態如何影響使用者的體驗。
整個網站有 9 個部分,分別是動態的基本介紹、緩動函式、偏移和延遲,以及六個在網頁設計中常用的動態技巧,包括漸入漸出、變形、遮罩、深度、視差、和縮放等等。
視覺風格
在動態基本介紹的這個部分,畫面中只使用黑白兩個顏色,以色塊和線條搭配簡化過的圖像,穿插醒目的文字說明,讓使用者視線能不受干擾的專注在會動的元素上。
接著後面不同單元都使用飽和度低的顏色做背景,架構皆是先以文字講解,接著提供實例參考,若有經典動畫能輔助說明,則會再插入以噪點裝飾背景,模擬像是早期電視機的區塊,外連到相關的經典動畫。
整體使用許多圓角,較獨特的設計是當一個區塊結束,下一個區塊疊上來時,色塊左右有像是被切掉部分的圓角,讓整個色塊看起來像是漏斗的形狀。
動態特效
在介紹中提到動態分為會與使用者實時互動的以及使用者觸發播放的兩種,這些都有在這個網站中實際示範出來。整個網站以捲動特效完成,讓使用者以捲動控制畫面中元素動態的播放速度和進度;另一方面,也放了許多會持續播放的影像。
配合扁平圖像和色塊的設計風格,整體運用許多前後堆疊元素的手法,讓原本的內容固定在畫面中,下個區塊的元素往上覆蓋,讓網頁中的元素像是浮動在空間中。例如第一個部分以白色小球串連每個段落,小球會與背景元素互動,引導使用者觀看的視線;也會有前景的物件蓋過小球,讓畫面較有深度;小球也會展開和縮小,像是開啟和關閉不同段落的說明。
