淺談動效設計，幫你掌握視覺都需要的動效知識

《淺談動效設計，幫你掌握視覺都需要的動效知識》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

1、淺談動效設計，幫你掌握視覺都需要的動效知識　　精細而恰當的動畫效果可以傳達狀態(tài)，增強用戶對于直接操縱的感知，通過視覺化的方式向用戶呈現操作結果?！　　　∫?、什么是動效及作用？　　動效是物體空間關系與功能有意識的流動之美，它讓用戶更了解交互?！　≡贗OS7官方guideline中，給動效賦予了一個新的定義：精細而恰當的動畫效果可以傳達狀態(tài)，增強用戶對于直接操縱的感知，通過視覺化的方式向用戶呈現操作結果?！　槭裁船F在的產品越來越注重動效了那？我們先從人對于產品元素的感知?！　№樞騺砜?？不難看出人們對動態(tài)的信息感知是最強的。　　　

2、　那么動效能給給產品設計帶來什么好處那？讓體驗更連貫：幫助用戶理解界面之間的關系，縮短用戶和界面之間的鴻溝。消除屏幕傷的跳變。告訴用戶元素從哪來到哪去。消化引導流程，降低學習成本：在最恰當的時機給用戶有意義的引導。減輕認知負擔，讓體驗更愉快?？臻g擴展：讓當下用戶不需要的信息隱藏，適當的時機出現。賦予設計趣味和活力：讓錯誤不那么沮喪，讓等待不那么無聊，讓你的產品看起來更具活力。　　二、動效是不是越多越酷炫越好那？　　在平時項目中，我們有些設計師經常為了追求酷炫，生硬的在產品中展現。一個好的動效應該是自然，舒適，錦上添花絕對不是為

3、了僅僅去吸引眼球，生拉硬套。所以要把握好動效的輕與重，先考慮用戶使用的場景、頻繁程度來確定動效的注目程度，其次重視整體性的編排?！　∠旅嫖覀儊砜匆幌陆洺Ｔ贏PP里面使用動效的場景：　　1.開機啟動圖　　強化產品品牌，動畫短小。僅為簡單變形，旨在突出產品logo。因為開啟啟動圖時間非常短，復雜的動畫延遲了界面的過渡。　　　　2.poplayer動畫　　強調驚喜，有創(chuàng)意的，有互動性的動（手淘的雙十一活動）　　　　3.界面之間切換跳轉　　幫助用戶理解界面剛發(fā)生的變化，讓用戶知道自己在哪。例如頁面之間的轉場，彈出等。　　　　4.擴展空

4、間場景　　強調關聯(lián)性的場景，展開，放大縮小，翻轉等?！　　　?.強調狀態(tài)　　抓住用戶注意力，也可以說是分散用戶注意力，例如加載時，出錯時等?！　　　?.聚合入口　　　　7.突出元素，增加情趣（播放器播放暫停案件）　　　　三、我們在項目中是怎么推進動效落地的？　　我什么我們覺得超酷超美的UI動效，似乎很少在真實的App上看到它們被實現。技術門檻降低了這些UI動效的可行性也許是最大的一個原因；除此之外，設計師們在提出這些UI動效時，往往都缺乏使用情境。切記為了漂亮而漂亮?！　〕Ｓ玫囊恍┬〖记桑毫_列全局動效改進點列表提出概念方案，向

5、團隊推介不同情況下的原型復雜程度取舍，簡單可以直接拿樣品和技術溝通，標志性動效細膩還原。有些動效可能比較簡單，如果我們能用線上的例子說明你所需的動效效果，可以節(jié)省你做demo的時間，把重點放在重點細膩動效上。視覺和交互的通力合作　　我們增加動效是為了更好的闡述產品邏輯，它與交互緊密相關，所以跟你團隊一起推進動效的產出事半功倍?！　∥?、動效的工具　　雖然身為設計師，可以定義非?？犰诺膭有?，但是由于技術成本限制可能被摒棄。所以作為設計師同樣需要理解技術實現的基本原理。下面為大家介紹以下工具：　　1.交互性動效　　如果你做了案例，動

6、效只是為了說明你的設計，闡述你的交互邏輯，那么下面四款都可以滿足的你的基本需求。Principle和Flinto都可以直接置入你的sketch設計稿，跟你的設計產生聯(lián)動。頁面也很簡單，完成轉場的交互極其便捷，另外還可以做一些基本時間軸動畫，調節(jié)單個元素的曲線變量等。Hype3實現的效果可能不那么精致，但是可以直接導出對應的代碼。　　Pixate除了一些基礎的控件供你使用，特殊的動效可能需要一定的代碼才能完成，可能對于沒有語言基礎的設計而言效果過于簡單。　　　　　　　　　　2.復合型動效　　Origami是一款基于QuartzC

7、omposer的插件，它提供了很多自定義的控件。但界面相對設計師而言不夠友好?！　　　?.創(chuàng)意性動效工具　　如果你要做一個很酷的開機動畫，那么你可以選擇AE或者C4D。你可以專注在你的創(chuàng)意上而不被代碼表達式干擾。　　　　很多新手會問，哪個軟件是最好的？其實并沒有完全的類比，在恰當的需求下選擇恰當的軟件，用最低的成本完成你的需求就好。你可能會用AE去做一個復雜的開機動效，用flinto展現了交互邏輯都是ok的?！　∽詈?，推薦一些值得參考的站：CapptivateUIanimationLitterBigDetail