電影學校如何幫助我獲得更好的用戶體驗

我最近的60天CSS動畫挑戰賽，重點是以殭屍為主題的作品，意外地重新點燃了我的電影學校的學習。電影製作和網絡動畫之間的相似之處，尤其是關於講故事和視覺技巧的相似之處，這是令人驚訝的。在莎拉·德拉斯納（Sarah Drasner）對劇院發展連接的見解的基礎上，我探索了電影原理如何提升網絡體驗。

通過敘述吸引用戶

人類本質地吸引了故事。敘述尤其是在網絡動畫中，可以大大提高參與度。對於簡潔的網絡動畫，一個引人入勝的故事只需要兩個要素：一個角色和煽動性事件。

我的Codepen“ Magical OOPS”演示說明了這一點：

簡單的互動（科學家的收縮射線故障）創造了微型敘事。雖然觀眾可能與角色（科學家和殭屍）無親自相關，但意外的事件產生了陰謀。語氣可以是嬉戲，認真的，也可以是介於兩者之間的任何東西；關鍵與網站上下文相關。

擬人化體驗

人類自然會擬人化。想想我們與皮克斯角色建立的情感聯繫。該原則即使沒有字面字符也適用於網絡動畫。在清除未讀消息後，請考慮Slack的慶祝動畫。這巧妙地使用戶的成就化，將功能性動作轉變為有意義的敘事時刻。

將個性添加到動畫中使它們更令人難忘和相關。用戶成為故事的參與者，增強了他們的整體體驗。觀察我的“不死座椅駕駛員” Codepen中的微妙傻笑：這個小細節增加了情緒深度和相關性。

掌握視覺深度和聚焦

公民凱恩（Kane）的革命性深層攝影攝影，使多個焦點飛機保持敏銳，提供了寶貴的教訓。儘管網絡開發人員不受相機鏡頭的限制，但引導不同視覺層的注意力的原則仍然至關重要。

視差滾動和模態模式已經使用了此概念。我的“嘿，嘿，嘿！” Codepen展示了前景和背景元素之間的焦點：

相反，“除了我們的人類之外，沒有人……2”扭轉了這一點，從遙遠的角色開始，將前景引起了人們的焦點：

將網站視為三維空間可以解鎖創意的可能性。諸如陰影，陰影和大小操縱之類的技術可以模擬深度，如“最後，單獨使用我的三明治……”所示，堆疊順序會產生多維的效果：

通過場景過渡提升動畫

我最成功的動畫超出了簡單的角色互動。 “殭屍中午2”巧妙地改變了觀眾的觀點，將它們轉變為敘事中的角色：

同樣，“午餐（午餐）中午”也使用了第一人稱視角，最終在場景過渡中，重點是令人驚訝的新角色：

戰略攝像機的工作 - 通過動畫技術來構圖 - 持有人的參與度。雖然並非每個動畫都需要戲劇性的攝像頭動作，但周到的視角轉移可以顯著改善用戶體驗。

我的電影學校背景在網絡動畫中已證明是無價的。講故事和攝影的原則直接轉化為創造更多引人入勝且令人難忘的在線體驗。

但是，至關重要的是要注意敘事並不總是合適的。條款和條件頁面上的故事驅動的動畫可能會適得其反。考慮用戶偏好，尤其是那些運動設置減少的偏好。這些技術是增強用戶體驗的工具，而不是通用解決方案。

以上是電影學校如何幫助我獲得更好的用戶體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！