編輯導語：動态設計在産品設計中十分常見，一個好的動态設計不僅能有效提升用戶體驗，還能解決很多實際問題，本篇文章作者向我們介紹了動态設計原則，感興趣的一起來看一下，希望對你有幫助。

在産品設計中動效很常見，一個好的動效方案在提升用戶視覺和心境體驗的同時，還的的确确解決了很多其他設計問題。

好的動效設計總是在比拟現實，所以當我們思考為頁面添加動效時，不應該感性的随心所欲的發揮自己的創意激情，而應該像科學一樣，有一些基本的方法原則指導來我們，以此提升動效可用性。

今天主要分享一下在數字産品中動态設計的13個基本原則，希望對大家有所幫助。

一、原則大綱

• 緩動；
• 延遲與偏移；
• 疊加；
• 蒙版；
• 弧線；
• 克隆；
• 父子綁定；
• 轉換；
• 遮罩；
• 多維度；
• 數值變化；
• 視差；
• 縮放與推拉。

‍‍‍1. 緩動

現實世界中絕大多數物體都不會突然運動，再保持勻速，最後突然停止（機械類運動除外）。而是緩慢加速或緩慢減速，這就是緩動。

緩動幾乎适用于産品中任何元素的出現或離開、以及部分圖數據加載等。

滑動内容

圖表加載

2. 延遲與偏移

在加載信息時，我們可以對信息歸類分組，并按順序依次延遲内容出場時間。

這就是延遲與偏移，可以清晰的表達内容之間的關系。

3. 疊加

在二維平面，如果信息很多，為了避免信息過載，我們可以将不重要的信息，或負面操作放置在前景内容後面，這就是疊加。

用來模拟現實紙張疊放，創建出二維平面中的前後空間感。

4. 蒙版

當我們點擊某個内容時，我們通過改變内容中某個主要元素（用于視覺引導的過渡元素）的輪廓并移動，這樣可以将用戶自然的帶入下級頁面，這就是蒙版。

通過保留過渡元素的識别性，創建出無縫過渡，降低用戶跳轉頁面時可能産生的迷失感。

5. 弧形

現實世界大多數物體運動軌迹都是弧線，所以當位于角落的元素移動時，我們調整運動軌迹呈弧線，可以讓元素運動更加流暢自然，這就是弧型。

注意：下面案例中元素上移是從左下往右上的弧線，但回來不是原軌迹返回，而是将弧線對稱反轉（類似抛物線），從右上往左下。

6. 克隆

如果一個主要操作中包含其他操作，在用戶與其互動時我們可以直接将元素分離出來，這就是克隆。

再通過模拟現實世界中液體分離，可以清晰的表達出内容的包含關系。這類設計常見于底部的舵式導航按鈕，點擊後出現一系列功能圖标。

7. 父子綁定

将兩個元素的屬性進行關聯，通過影響其中一個元素的屬性，去影響另一個元素，這就是父子級綁定。

給兩個元素創建了一個隐形的傳動軸，呈現一種用戶正與内容進行實時可控的互動方式。

下圖是通過小圓圈的旋轉屬性影響中間數值：

8. 轉換

當某個元素存在先後兩種樣式時，我們可以給元素路徑設置動态，使其形狀從起始狀态逐漸變化到結束狀态，這就是轉換。

從起點到終點的無縫過渡，清晰自然的表達出任務結束。

9. 遮罩

在一個二維空間中，一屏展示的内容有限，當觸發另外一個二維空間時，為了減少頁面跳轉，我們借助中間層并降低不透明度，或把背景模糊，這樣可以将它們同時放在一起展示，這就是遮罩。

幫助我們理解當前空間與原本空間之間的關系。

10. 多維度

當看二維平面有些乏味的時，我們可以給頁面賦予三維空間的深度，像真實世界的物體有厚度一樣，用來表達該頁面存在其他可以互動的側面，這就是多維度。

解決原本二維平面沒有深度的問題，也帶來更強的位置感。

線上産品中：

• 【哔哩哔哩】有做下圖中類似的3D頁面翻轉效果。
• 【紅闆報】有做翻頁效果，感興趣的同學可以去看下。

11. 數值變化

金融和運動類産品中數字很常見，每次加載數字時，我們可以賦予數字動态變化，這就是數值變化。

作用不僅僅是傳達出數字的動态性質，更重要的是強化數字與用戶的綁定關系（類似上秤後上漲的數字告訴你又“強壯”了。嗯？繼續努力），讓用戶更加積極的維護數據變化。

12. 視差

界面中元素的運動速度并不是始終一緻，當有多個元素時，為了建立良好的層次結構，我們可以讓重要的可交互的元素運動速度更快，非交互元素運動速度更慢。

（也可以根據設計目标反過來處理）這就是視差，将用戶視線引導到可交互元素上，同時讓非交互元素保持動态一緻性。

13. 縮放與推拉

頁面中，我們始終在處理内容的展示與空間轉換，為了能看到更多内容細節，我們讓内容支持縮放來模拟相機變焦。

為了能體現内容與内容在空間上的關系，我們模拟攝像機推進和拉遠，這就是縮放與推拉，帶來了更多的深度與空間體驗以及無縫轉換。

縮放

推拉

二、總結

原則用于參照，在理解原則的基礎上去打破。這樣，動态設計将給我們帶來了更多可能性。

盡管一些效果在當下實現上任然有着較高的成本，但相信随着技術的發展，在将來的産品設計中會看到越來越多讓我們驚豔的設計解決方案，隻是在這個過程中還需要我們共同努力鴨！

本文由 @幺零三 原創發布于人人都是産品經理。未經許可，禁止轉載。

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部