網頁設計如果只追求靜態畫面的完美呈現，而忽略動態過程的合理表達，即使視覺效果再完美，也會讓人覺得網站欠缺靈動細膩之氣質。隨着網頁技術和硬件性能的迭代，有趣且合理的動效設計為冷冰冰的網站注入更多活力，為用戶帶來愉悅且直觀的視覺及操作體驗。
▌ 動效設計，為用戶帶來有趣而奇妙的體驗!
合理流暢的動效設計(Motion Design)，有助於創建令人愉悅且直觀的用戶介面，這不僅能夠讓網站展現出與眾不同的魅力，為用戶帶來有趣而奇妙的操作體驗;還可以有效傳遞網站/品牌相關的信息，更有利於品牌形象的的建立。
此外，動態有助於支援網站的可用性和趣味性，通過自然流暢的物理運動，凸顯元素在過渡時的關聯性與狀態變化，藉此增強用戶對網站功能上的感知。
▌ 動效設計必須是有意義，同時兼具可用性與美感!
從用戶體驗的角度而言，動效設計目的並不是單純突出介面的美觀性，而是賦予很多實質的意義，這包括增加介面趣味性、拉近與用戶之間的聯繫、增加用戶的信任等，繼而讓網站在競品中脫穎而出。
因此，為了保證動效設計同時兼具可用性與美感，我們需要遵循以下幾點動效設計原則：
1. 緩動(Easing)
緩動是指物體在物理規則下，緩慢加速或緩慢減速的現象。
緩慢動效可以使UI元素的運動變化更加符合自然規律及人類認知，並按照用戶期望的行為交互來提供連續性的操作體驗。
2. 偏移和延遲(Offset & Delay)
「偏移和延遲」是指UI元素按照一定秩序出現/消失，從而產生微妙的「一個接一個」的視覺效果。
「偏移和延遲」動效主要用於突出UI元素間的層級關係，讓用戶順理成章地將它們聯繫在一起。
3. 父子關係(Parenting)
「父子關係」是指一個UI元素的屬性關聯到其他UI元素的屬性。
由於父子元素之間的屬性是關聯的，即當父元素的屬性發生變化時，子元素的屬性也會隨之發生變化，因此適合用於創建各UI元素空間和時間的層級關係，方便用戶與多個元素互動。
4. 變形(Transformation)
變形是指UI元素由一個形態過渡到另一個形態的變化效果。
作為保證系統狀態可見性的有效方法之一，變形動效主要用於突出UI元素的變化狀態，並將用戶視線聚焦於該元素上，因此適合用於呈現元素從開始到結束的狀態變化。
5. 數值變化(Value Change)
數值變化，常用於金融類APP、電商網站等產品。
數值變化動效容易激起用戶的「神經反饋」作用，讓他們覺得的自己需求與這些數值有關聯，繼而增加他們的參與意願及主動進行目標操作。
6. 滑動/變焦(Dolly & Zoom)
滑動和變焦都是源於電影拍攝的概念，前者是通過改變用戶視覺與UI元素的距離，產生「滑動」的視覺效果;後者則是通過改變UI元素的大小，產生「縮放」的視覺效果。
滑動/變焦動效可以為網站打造出用戶如在UI元素中「穿梭」的感覺，同時還增加網站的視覺張力、景深也變得更有層次。
7. 維度(Dimensionality)
維度是指通過多個交互面來增強增強用戶體驗的動效設計。
維度動效可以賦予UI元素的景深效果，藉此幫助用戶更好地理解各元素間的關係和層級結構。此外，藉助陰影、透視、透明度等視覺效果，還可以使UI元素呈現出不同的深度和層次感，使其更真實和立體。
8. 視差(Parallax)
視差是指兩個或更多UI元素同時移動但速度不同時，所產生的視覺變化效果。
視差動效可以為各元素間建立更清晰的層級關係和結構，不僅給用戶提供更流暢的操作體驗，還可以幫助他們更好地理解介面中的信息層次結構。
9.克隆(Cloning)
克隆是把一個UI元素分裂成多個元素的一種動態行為，主要用於突出重要信息或交互選項。
當網站需要一個清晰的主元素並連結到多個副元素時，使用克隆動效使其之間存在某種連續性，有助於讓用戶更清晰地理解他們之間的關係和記憶上下文。
10.覆蓋(Overlay)
覆蓋是指根據UI元素的重要程度並從上到下佈局於不同層級，當次要元素需要隱藏/顯示時，通過改變其所在的層級來實現。
覆蓋動效計模擬現實世界中物理之間的層級關係，讓用戶更直觀地知道每一步操作的反饋和進度;同時減少用戶介面上的視覺干擾，使用戶的視線更加聚焦。
▌ 注意動效設計的細節，為網站增添更多閃光點!
網站過於單調乏味，往往難以引起用戶的注意，那不妨針對不同產品、不同場景的特點來設計有趣的動效，為網站增添更多閃光點吧!
① 結合產品調性設計
不同產品都有其獨特的產品調性，例如金融類產品強調可靠、理性;遊戲類產品的設計重點則是有趣、個性……因此，動效設計需要結合產品屬性的同時、考慮目標受眾的使用習慣，才能確保網站既符合品牌理念發展，同時又滿足目標用戶的需求。
② 動效需要符合物理定律
人類對物體運動所產生的情感反饋，絕大部分都是來自日常生活中看到類似的運動形態，因此UI元素的運動邏輯應符合物理世界的運動規律，繼而給用戶帶來熟悉的感覺和體驗，避免運動效果過於生硬和單調。
③ 注意屏幕間的過渡
設計多頁面交互體驗時，應避免突然從一個介面切換到另一個介面，因為這會讓用戶產生疑惑和不安。因此，UI元素的動態變化最好提前讓用戶所有感知，同時打造更有創意的動效過渡，以便用戶為即將發生的操作做好準備，以及拉近用戶與產品之間的距離。
④ 確保動效時長與操作相匹配
考慮每段動效應該持續多長時間。如果動效持續時間較短，有可能不利於用戶觀看，導致他們無法準確理解;如果動效持續時間較長，容易使用戶產生遲滯感，甚至懷疑是網站問題還是網絡問題。
————————
在上期課程內容，香港網頁主要分享「導航欄設計攻略」。作為網站重要的指示標，導航欄存在的意義在於告知用戶告知用戶當前的所在位置，並指引他們到達目標頁面的快速通路。
因此如果不注意導航欄的擺放位置、呈現方式以及操作方式等，很容易會搞到用戶在網站中迷路。想要知道導航欄該怎麼設計才有利於用戶體驗，看這裏☞☞掌握導航欄設計全攻略，為網站用戶體驗加分不少!
香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。
聯絡電話: 37499734 電郵地址: [email protected] 網址: www.hkweb.com.hk
