在產品設計中動效很常見，一個好的動效方案在提升用戶視覺和心境體驗的同時，還的的確確解決了很多其他設計問題。
好的動效設計總是在比擬現實，所以當我們思考為頁面添加動效時，不應該感性的隨心所欲的發(fā)揮自己的創(chuàng)意激情，而應該像科學一樣，有一些基本的方法原則指導來我們，以此提升動效可用性。
今天主要分享一下在數字產品中動態(tài)設計的13個基本原則，希望對大家有所幫助。
02 原則大綱
- 緩動
- 延遲與偏移
- 疊加
- 蒙版
- 弧線
- 克隆
- 父子綁定
- 轉換
- 遮罩
- 多維度
- 數值變化
- 視差
- 縮放與推拉
▍緩動 ?
現實世界中絕大多數物體都不會突然運動，再保持勻速，最后突然停止（機械類運動除外）。而是緩慢加速或緩慢減速，這就是緩動。
緩動幾乎適用于產品中任何元素的出現或離開、以及部分圖數據加載等。
滑動內容
圖表加載
▍延遲與偏移 ?
在加載信息時，我們可以對信息歸類分組，并按順序依次延遲內容出場時間。這就是延遲與偏移，可以清晰的表達內容之間的關系。
▍疊加 ?
在二維平面，如果信息很多，為了避免信息過載，我們可以將不重要的信息，或負面操作放置在前景內容后面，這就是疊加。用來模擬現實紙張疊放，創(chuàng)建出二維平面中的前后空間感。
▍蒙版 ?
當我們點擊某個內容時，我們通過改變內容中某個主要元素（用于視覺引導的過渡元素）的輪廓并移動，這樣可以將用戶自然的帶入下級頁面，這就是蒙版。通過保留過渡元素的識別性，創(chuàng)建出無縫過渡，降低用戶跳轉頁面時可能產生的迷失感。
▍弧形 ?
現實世界大多數物體運動軌跡都是弧線，所以當位于角落的元素移動時，我們調整運動軌跡呈弧線，可以讓元素運動更加流暢自然，這就是弧型。
注意：下面案例中元素上移是從左下往右上的弧線，但回來不是原軌跡返回，而是將弧線對稱反轉（類似拋物線），從右上往左下。
▍克隆 ?
如果一個主要操作中包含其他操作，在用戶與其互動時我們可以直接將元素分離出來，這就是克隆。再通過模擬現實世界中液體分離，可以清晰的表達出內容的包含關系。這類設計常見于底部的舵式導航按鈕，點擊后出現一系列功能圖標。
▍父子綁定 ?
將兩個元素的屬性進行關聯，通過影響其中一個元素的屬性，去影響另一個元素，這就是父子級綁定。給兩個元素創(chuàng)建了一個隱形的傳動軸，呈現一種用戶正與內容進行實時可控的互動方式。
下圖是通過小圓圈的旋轉屬性影響中間數值。
▍轉換 ?
當某個元素存在先后兩種樣式時，我們可以給元素路徑設置動態(tài)，使其形狀從起始狀態(tài)逐漸變化到結束狀態(tài)，這就是轉換。從起點到終點的無縫過渡，清晰自然的表達出任務結束。
▍遮罩 ?
在一個二維空間中，一屏展示的內容有限，當觸發(fā)另外一個二維空間時，為了減少頁面跳轉，我們借助中間層并降低不透明度，或把背景模糊，這樣可以將它們同時放在一起展示，這就是遮罩。幫助我們理解當前空間與原本空間之間的關系。
▍多維度 ?
當看二維平面有些乏味的時，我們可以給頁面賦予三維空間的深度，像真實世界的物體有厚度一樣，用來表達該頁面存在其他可以互動的側面。這就是多維度，解決原本二維平面沒有深度的問題，也帶來更強的位置感。
線上產品中：
【嗶哩嗶哩】有做下圖中類似的3D頁面翻轉效果（我一時忘記在哪個模塊，有知道的同學可以留言告訴我，謝謝）。
【紅板報】有做翻頁效果，感興趣的同學可以去看下。
▍數值變化 ?
金融和運動類產品中數字很常見，每次加載數字時，我們可以賦予數字動態(tài)變化，這就是數值變化。作用不僅僅是傳達出數字的動態(tài)性質，更重要的是強化數字與用戶的綁定關系（類似上秤后上漲的數字告訴你又“強壯”了。嗯？繼續(xù)努力），讓用戶更加積極的維護數據變化。
▍視差 ?
界面中元素的運動速度并不是始終一致，當有多個元素時，為了建立良好的層次結構，我們可以讓重要的可交互的元素運動速度更快，非交互元素運動速度更慢。（也可以根據設計目標反過來處理）這就是視差，將用戶視線引導到可交互元素上，同時讓非交互元素保持動態(tài)一致性。
▍縮放與推拉 ?
頁面中，我們始終在處理內容的展示與空間轉換，為了能看到更多內容細節(jié)，我們讓內容支持縮放來模擬相機變焦。為了能體現內容與內容在空間上的關系，我們模擬攝像機推進和拉遠，這就是縮放與推拉，帶來了更多的深度與空間體驗以及無縫轉換。
縮放
推拉
03 總結
原則用于參照，在理解原則的基礎上去打破。這樣，動態(tài)設計將給我們帶來了更多可能性。
盡管一些效果在當下實現上任然有著較高的成本，但相信隨著技術的發(fā)展，在將來的產品設計中會看到越來越多讓我們驚艷的設計解決方案，只是在這個過程中還需要我們共同努力鴨！
參考文獻：
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
作者：幺零三
轉載請注明：學UI網》UI動效設計原則
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bjlzjm.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司