01
項目背景
動效設計，是視覺設計當中不可或缺的一環。許多巧妙的動效在提升用戶體驗、活動運營和產品需求中有着較為的重要作用。設計動效的製作時間成本大，而且設計師設計製作的的炫酷的動效，很多時候和開發對接時很懵，要麼無法實現、要麼極其複雜，導致溝通成本高或效果不好！為了提升團隊工作效率和設計效果，幻視出現了！
02
幻視是什麼？
幻視是58自主研發的一款可輕鬆的編輯動效和管理動效的平台，提供了創建、編輯、測試和預覽 Lottie 等功能。通過海量的動效素材以及可視化編輯能力，幫助零基礎的用戶輕鬆完成動效製作。它是設計動效庫聚合、設計動效產物管理、lottie解析和修改集一體的平台設計工具。降低了設計與產研團隊的動效需求溝通成本、開發成本、提升協作效率。在設計工作中有很多可生成lottie和gif文件，曾經令人苦惱的性能問題和包大小一併解決，這就是我們的幻視！
通過對我們日常動效類需求進行統計，大多數的動效場景主要應用於運營類視覺中，如動態浮窗、Banner等。進一步對動效效果進行研究，發現主要動效類型有呼吸、搖晃、漂浮、掃光。
大量的研究發現在界面中最優的動畫時間是200-500ms。這個數字是根據人類大腦的認知水平得出來的。任何小於100ms的動畫用戶是很難感知到的，而其他大於1秒的動畫又會讓用戶覺得有些拖沓，不夠流暢。
此外，還有一個不能被忽視的方面，我們還需要考慮動態元素在頁面中的融合度，即動態元素視覺效果與靜態功能元素間的平衡。動態效果既要凸顯，又不能過於搶眼而影響頁面其他功能。
考慮到整體動效的一致性及規範性，我們對梳理出的主要動效類型分別制定動效規範。
下面以58APP首頁的運營浮窗動效為例，展示從動效設計到幻視平台應用的全流程。
首先需要拆分出動態元素、靜態元素、以及可替換的文本圖層，為在AE中設計動效做準備。
利用規範表格中的動效參數，將金幣添加浮動效果、紅包添加搖晃效果、按鈕添加掃光和呼吸效果，為了後續再次復用，可以將紅包上的現金數字在AE中使用文本圖層編輯，最後再導出json文件。將json文件上傳至幻視後，可在右側邊欄查看編輯每個素材的尺寸、位置等信息，並可直接編輯、替換其中的素材或修改文本信息以生成新的動效素材。
確認素材沒有問題後，下一步就是與開發對接，很簡單！只需要點擊播放進度條後的複製動畫地址按鈕，將複製的地址發給研發同學，研發可以直接使用這個地址實現動畫效果。降低了設計與技術的溝通成本，實現業務提效。
當遇到動畫不變，但裡面的文字需要改變時，可以在編輯界面直接修改，並生成新的動畫
當遇到動畫效果不變，但素材變化時，可以在編輯界面右側的操作區中找到需要替換的素材進行替換，並生成新的動畫
當您需要一個包含動畫效果的banner時，可以選擇banner組合，選擇您的banner背景，然後從左側動效中拖選需要組合的效果，即可生成一個包含動效的banner
您可以在現有動畫效果的基礎上增加一些氛圍特效，來讓您的動畫效果更加的飽滿選擇掛件後，從左側氛圍動效中拖選需要添加的氛圍效果，點擊保存後即可生成帶有氛圍的動畫
說到動效資源庫管理，我們的動效素材資源中最重要的就是將文件管理提升為生產力管理，對素材通過分組、打標籤等手段進行分類，進而提高工具查找、使用方便快捷，可快速找到需要的動效素材，大大提高了設計產出效率，方便設計團隊與公司企業部門之間的素材共享和高效協作。
目前幻視擁有1000+動效模板，復用量2000+，為58春運、到家精選、商業生態與智能發展中心、同鎮等業務線提效，節省了大量的人力成本。
留言列表