編輯導(dǎo)語(yǔ)：動(dòng)態(tài)設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中十分常見，一個(gè)好的動(dòng)態(tài)設(shè)計(jì)不僅能有效提升用戶體驗(yàn)，還能解決很多實(shí)際問(wèn)題，本篇文章作者向我們介紹了動(dòng)態(tài)設(shè)計(jì)原則，感興趣的一起來(lái)看一下，希望對(duì)你有幫助。

在產(chǎn)品設(shè)計(jì)中動(dòng)效很常見，一個(gè)好的動(dòng)效方案在提升用戶視覺和心境體驗(yàn)的同時(shí)，還的的確確解決了很多其他設(shè)計(jì)問(wèn)題。

好的動(dòng)效設(shè)計(jì)總是在比擬現(xiàn)實(shí)，所以當(dāng)我們思考為頁(yè)面添加動(dòng)效時(shí)，不應(yīng)該感性的隨心所欲的發(fā)揮自己的創(chuàng)意激情，而應(yīng)該像科學(xué)一樣，有一些基本的方法原則指導(dǎo)來(lái)我們，以此提升動(dòng)效可用性。

今天主要分享一下在數(shù)字產(chǎn)品中動(dòng)態(tài)設(shè)計(jì)的13個(gè)基本原則，希望對(duì)大家有所幫助。

一、原則大綱

• 緩動(dòng)；
• 延遲與偏移；
• 疊加；
• 蒙版；
• 弧線；
• 克隆；
• 父子綁定；
• 轉(zhuǎn)換；
• 遮罩；
• 多維度；
• 數(shù)值變化；
• 視差；
• 縮放與推拉。

???1. 緩動(dòng)

現(xiàn)實(shí)世界中絕大多數(shù)物體都不會(huì)突然運(yùn)動(dòng)，再保持勻速，最后突然停止（機(jī)械類運(yùn)動(dòng)除外）。而是緩慢加速或緩慢減速，這就是緩動(dòng)。

緩動(dòng)幾乎適用于產(chǎn)品中任何元素的出現(xiàn)或離開、以及部分圖數(shù)據(jù)加載等。

滑動(dòng)內(nèi)容

圖表加載

2. 延遲與偏移

在加載信息時(shí)，我們可以對(duì)信息歸類分組，并按順序依次延遲內(nèi)容出場(chǎng)時(shí)間。

這就是延遲與偏移，可以清晰的表達(dá)內(nèi)容之間的關(guān)系。

3. 疊加

在二維平面，如果信息很多，為了避免信息過(guò)載，我們可以將不重要的信息，或負(fù)面操作放置在前景內(nèi)容后面，這就是疊加。

用來(lái)模擬現(xiàn)實(shí)紙張疊放，創(chuàng)建出二維平面中的前后空間感。

4. 蒙版

當(dāng)我們點(diǎn)擊某個(gè)內(nèi)容時(shí)，我們通過(guò)改變內(nèi)容中某個(gè)主要元素（用于視覺引導(dǎo)的過(guò)渡元素）的輪廓并移動(dòng)，這樣可以將用戶自然的帶入下級(jí)頁(yè)面，這就是蒙版。

通過(guò)保留過(guò)渡元素的識(shí)別性，創(chuàng)建出無(wú)縫過(guò)渡，降低用戶跳轉(zhuǎn)頁(yè)面時(shí)可能產(chǎn)生的迷失感。

5. 弧形

現(xiàn)實(shí)世界大多數(shù)物體運(yùn)動(dòng)軌跡都是弧線，所以當(dāng)位于角落的元素移動(dòng)時(shí)，我們調(diào)整運(yùn)動(dòng)軌跡呈弧線，可以讓元素運(yùn)動(dòng)更加流暢自然，這就是弧型。

注意：下面案例中元素上移是從左下往右上的弧線，但回來(lái)不是原軌跡返回，而是將弧線對(duì)稱反轉(zhuǎn)（類似拋物線），從右上往左下。

6. 克隆

如果一個(gè)主要操作中包含其他操作，在用戶與其互動(dòng)時(shí)我們可以直接將元素分離出來(lái)，這就是克隆。

再通過(guò)模擬現(xiàn)實(shí)世界中液體分離，可以清晰的表達(dá)出內(nèi)容的包含關(guān)系。這類設(shè)計(jì)常見于底部的舵式導(dǎo)航按鈕，點(diǎn)擊后出現(xiàn)一系列功能圖標(biāo)。

7. 父子綁定

將兩個(gè)元素的屬性進(jìn)行關(guān)聯(lián)，通過(guò)影響其中一個(gè)元素的屬性，去影響另一個(gè)元素，這就是父子級(jí)綁定。

給兩個(gè)元素創(chuàng)建了一個(gè)隱形的傳動(dòng)軸，呈現(xiàn)一種用戶正與內(nèi)容進(jìn)行實(shí)時(shí)可控的互動(dòng)方式。

下圖是通過(guò)小圓圈的旋轉(zhuǎn)屬性影響中間數(shù)值：

8. 轉(zhuǎn)換

當(dāng)某個(gè)元素存在先后兩種樣式時(shí)，我們可以給元素路徑設(shè)置動(dòng)態(tài)，使其形狀從起始狀態(tài)逐漸變化到結(jié)束狀態(tài)，這就是轉(zhuǎn)換。

從起點(diǎn)到終點(diǎn)的無(wú)縫過(guò)渡，清晰自然的表達(dá)出任務(wù)結(jié)束。

9. 遮罩

在一個(gè)二維空間中，一屏展示的內(nèi)容有限，當(dāng)觸發(fā)另外一個(gè)二維空間時(shí)，為了減少頁(yè)面跳轉(zhuǎn)，我們借助中間層并降低不透明度，或把背景模糊，這樣可以將它們同時(shí)放在一起展示，這就是遮罩。

幫助我們理解當(dāng)前空間與原本空間之間的關(guān)系。

10. 多維度

當(dāng)看二維平面有些乏味的時(shí)，我們可以給頁(yè)面賦予三維空間的深度，像真實(shí)世界的物體有厚度一樣，用來(lái)表達(dá)該頁(yè)面存在其他可以互動(dòng)的側(cè)面，這就是多維度。

解決原本二維平面沒有深度的問(wèn)題，也帶來(lái)更強(qiáng)的位置感。

線上產(chǎn)品中：

• 【嗶哩嗶哩】有做下圖中類似的3D頁(yè)面翻轉(zhuǎn)效果。
• 【紅板報(bào)】有做翻頁(yè)效果，感興趣的同學(xué)可以去看下。

11. 數(shù)值變化

金融和運(yùn)動(dòng)類產(chǎn)品中數(shù)字很常見，每次加載數(shù)字時(shí)，我們可以賦予數(shù)字動(dòng)態(tài)變化，這就是數(shù)值變化。

作用不僅僅是傳達(dá)出數(shù)字的動(dòng)態(tài)性質(zhì)，更重要的是強(qiáng)化數(shù)字與用戶的綁定關(guān)系（類似上秤后上漲的數(shù)字告訴你又“強(qiáng)壯”了。嗯？繼續(xù)努力），讓用戶更加積極的維護(hù)數(shù)據(jù)變化。

12. 視差

界面中元素的運(yùn)動(dòng)速度并不是始終一致，當(dāng)有多個(gè)元素時(shí)，為了建立良好的層次結(jié)構(gòu)，我們可以讓重要的可交互的元素運(yùn)動(dòng)速度更快，非交互元素運(yùn)動(dòng)速度更慢。

（也可以根據(jù)設(shè)計(jì)目標(biāo)反過(guò)來(lái)處理）這就是視差，將用戶視線引導(dǎo)到可交互元素上，同時(shí)讓非交互元素保持動(dòng)態(tài)一致性。

13. 縮放與推拉

頁(yè)面中，我們始終在處理內(nèi)容的展示與空間轉(zhuǎn)換，為了能看到更多內(nèi)容細(xì)節(jié)，我們讓內(nèi)容支持縮放來(lái)模擬相機(jī)變焦。

為了能體現(xiàn)內(nèi)容與內(nèi)容在空間上的關(guān)系，我們模擬攝像機(jī)推進(jìn)和拉遠(yuǎn)，這就是縮放與推拉，帶來(lái)了更多的深度與空間體驗(yàn)以及無(wú)縫轉(zhuǎn)換。

縮放

推拉

二、總結(jié)

原則用于參照，在理解原則的基礎(chǔ)上去打破。這樣，動(dòng)態(tài)設(shè)計(jì)將給我們帶來(lái)了更多可能性。

盡管一些效果在當(dāng)下實(shí)現(xiàn)上任然有著較高的成本，但相信隨著技術(shù)的發(fā)展，在將來(lái)的產(chǎn)品設(shè)計(jì)中會(huì)看到越來(lái)越多讓我們驚艷的設(shè)計(jì)解決方案，只是在這個(gè)過(guò)程中還需要我們共同努力鴨！

本文由 @幺零三 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。