中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：總是會在手機、電腦看到各種小動畫，這些動態的界面有什么小細節可以考量呢？本文作者分別從動畫組件、動畫功能、智能設備動效、動效設計工具四個方面講述了交互動畫設計，希望對你有所啟發。

大屏手機中的交互設計越來越講究用戶體驗，而對設計來說提升用戶體驗除了完善友好的產品鏈路和精致的視覺體驗之外，還有一個被越來越多設計師重視起來的地方，就是交互動畫設計。

我們熟知的蘋果開關按鈕就是使用交互動畫的典型案例，它精準的模仿了現實中用戶按下按鈕后的轉換過程并且給到用戶實時的點擊反饋。

蘋果經典按鈕開關

添加動畫效果是為界面服務并給到用戶能夠控制的預期，用戶在操作頁面的同時也樂于看到生動活潑的情感化響應。

制作時需要注意一些規則，比如參考現實中物體的運動規律，這樣會使頁面功能的展示方式更加豐富、更富有吸引力，但動畫的加入要根據場景和功能而定，不宜過多，否則會使用戶感覺混亂分散注意力。

一、動畫組件-有溫度的設計

安卓和iOS的動畫組件庫都支持針對目標的基礎動畫屬性調整，如目標的透明度、大小、旋轉角度，顏色變化等，經過不同的組合后便成為了豐富的動畫樣式。具體表現形式可以參考Jorge Rolando Canedo Estrada基于迪士尼動畫原理提煉的十條動畫設計原則。

動畫設計的十個原則

1. 漸進漸出

漸進漸出模仿了現實中目標進入和滑出的方式，會伴有加速和減速的過程，部分樣式還會加入彈跳的效果，這種樣式多用于表現頁面的上下級切換。

漸進漸出動效

2. 縮放

這種動畫效果模擬了現實中近大遠小的物理關系，多用于圖片內容的查看，一般會配合上下滑動來切換。

頁面縮放動效

3. 疊加遮罩

疊加遮罩的效果動畫常用于界面中的彈層展示和一些細節界面，常伴隨著同一頁面中前后目標之間的形變和轉換。

疊加遮罩動效

二、動畫功能-附魔產品

1. 轉場動效- 貼近現實的動畫

針對多層且復雜的頁面層級需要在多個頁面之間轉換，這些場景中往往需要簡單的滑動和點擊操作向用戶傳達清楚頁面之間的層級鏈路關系，而默認的動畫效果如橫滑和平移并不能很好的加深用戶的印象，這時可以結合app的特性來添加動畫以強化屬性。

比如下圖中這款圖書類的app設計對頁面的轉場加入了翻滾的動效，用戶在操作時和現實中的翻書類似，很好的串聯了界面前后轉換的過程，強化了界面之間的關系。

閱讀app的翻頁動效

下面這個日歷app也模擬了現實中紙張的層疊效果，滑動切換待辦事件就可以輕松丟掉已完成事項的便箋，讓完成的動作更輕松有趣，同時也賦予了用戶成就感。

日歷app的層疊動效??????????????

當頁面中有詳細信息但又不至于跳轉頁面的時候也可以使用疊加效果，對頁面的局部信息進行放大，同時弱化模糊其他非必要信息，可以有效的幫助用戶抓到內容重點。

圖片app瀏覽動效

2. 加載動效-趣味化的設計

現實使用過程中常常會因為硬件配置和網絡等因素導致頁面的加載速度極不穩定，為了讓用戶感知到當前頁面正在運行，通過豐富有趣的小動畫可以很好地緩解用戶在等待中產生的焦慮情緒。

loading動畫

空白頁面的加載也可以和過場動畫相結合，如下圖所示，首先是擬物化的卡片抽出效果，之后的數據讀取用色塊的滑動效果取代死板的填充。同時卡片成功刪除后的效果并不是直接確認的生硬文案，而是符合現實中消除卡片的粉碎動畫，幫助用戶加深確認效果。

支付app的加載和刪除動效

下圖中足球比賽的app也用到了同樣的設計方式，當用戶點擊球隊比分時會顯示詳細的進球數據，因為是實況比賽用戶需要快速閱讀了解當下比分，這時的加載畫面用球場的輪廓形狀展現，這樣既切合了app本身的屬性，也弱化了用戶對數據加載的焦急等待。

體育app的加載動效

3. 引導動效-情緒的引導

在app版本升級和一些頁面新功能介紹時我們經?？吹竭@類動畫效果，主要功能是給用戶介紹更新內容，ios15更新后將多國語言的hello文字轉換成更加友好的動畫形式，增加了溫度也更貼合用戶的情感需求。

iOS15設置歡迎引導

支付寶的集五?；顒影盐甯Ｗ龀闪碎_屏動畫，動畫結束時落在了頁面的頂部五?；顒尤肟冢瑒赢嬌系那昂鬅o縫承接既起到了活動入口宣傳的作用也幫助用戶強化了對于活動的理解。

支付寶集五福開屏動效

三、智能設備動效

智能設備逐漸普及的當下，很多交互界面是非常規或是沒有屏幕的，這就更需要利用軟硬件的結合動效來傳達用戶的操控反饋，這些動畫效果和特殊的硬件設計結合在一起起到了1+1>2的效果。

LV智能手表三代

LV采用鴻蒙系統的三代智能手表，與特殊印花表盤結合的動畫效果在非常的炫酷流暢，凸顯了品牌的調性。

LV智能手表表盤動畫

蘋果Homepod mini的觸控面板動畫模仿了手機上呼出siri的動畫效果，讓用戶在呼叫音箱的時候代入了手機的操作體驗，延續了體驗的一致性。

Home pod mini

Home pod mini操作動效

四、動效設計工具

目前安卓和ios平臺都有自己的工具來支持開發者制作交互動畫，可以直接加入貝塞爾曲線來設置動畫目標的各項參數，這里分享兩款常用動畫制作軟件，都支持精致且舒適的動畫效果，讓吸引人的動畫效果向用戶呈現操作結果，傳達界面狀態，增強用戶的感知。

貝塞爾曲線

Adobe After Effects擁有豐富的圖層效果和動畫參數設置選項，可以根據需求輸出多種格式，缺點是上手有一定難度，在導入素材時一些常用的設計軟件無法很好的兼容。

Adobe AE 2021

相較之下Principle則更為小巧便捷，可以直接導入sketch和figma的源文件，并且默認設置了多種轉場的交互動畫和預置的貝塞爾動畫參數供使用者選擇，可以用來快速的制作交互動畫原型。

Principle

五、寫在最后

隨著智能設備硬件的不斷升級，平時習以為常的設計細節也需要不斷地推陳出新。不論是基礎組件還是鏈路設計，都可以結合實際界面做出驚艷的動畫效果，幫助用戶帶來更好的體驗，交互動畫設計將是未來設計師必備的一項專業技能。

作者：Troy；公眾號：淘寶設計

原文鏈接：https://mp.weixin.qq.com/s/TrK0ggIn3HB1_o9AirxaSQ

本文由@淘寶設計?授權發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。