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

編輯導(dǎo)語：動(dòng)效設(shè)計(jì)如今是非常重要的，我們手機(jī)里有各種App，你使用時(shí)如果連個(gè)最基本的加載的動(dòng)態(tài)效果都沒有，是不是會(huì)覺得很奇怪；優(yōu)秀的動(dòng)效設(shè)計(jì)可以提升產(chǎn)品體驗(yàn)，提高用戶粘性；本文作者分享了關(guān)于動(dòng)效設(shè)計(jì)原理，我們一起來看一下。

動(dòng)效在產(chǎn)品設(shè)計(jì)中扮演著重要角色，它的好壞與否直接影響了用戶的使用體驗(yàn)和對(duì)產(chǎn)品的印象。

動(dòng)效對(duì)產(chǎn)品的可用性體驗(yàn)有多維度的影響，在界面中動(dòng)效不僅僅是一種視覺裝飾，它能夠提升產(chǎn)品的參與度并擴(kuò)展交流的范圍。

本文追根溯源，先從動(dòng)效的起源講起，一步步推進(jìn)與產(chǎn)品、體驗(yàn)之間的關(guān)系；最后通過案例分析動(dòng)效設(shè)計(jì)的原理和應(yīng)用，一起來看看吧～

一、動(dòng)效設(shè)計(jì)的起源

動(dòng)效與用戶體驗(yàn)的結(jié)合相對(duì)較新，其根源是迪士尼動(dòng)畫設(shè)計(jì)的十二個(gè)條基本原理。

迪士尼動(dòng)畫原理是為了講故事而提煉出的基本的物理運(yùn)動(dòng)規(guī)律，這些原理能讓繪制的卡通角色移動(dòng)和表演，但不能充分滿足現(xiàn)代UI界面的交互需求。

為了彌合這個(gè)差距，動(dòng)效專家Canedo Estrada改編的《動(dòng)效設(shè)計(jì)的10條原理》更適合應(yīng)用到數(shù)字產(chǎn)品設(shè)計(jì)中。

在圍繞界面元素建立用戶體驗(yàn)時(shí)，重新定位動(dòng)效原理的關(guān)鍵在于：

• 將動(dòng)效設(shè)計(jì)與UI動(dòng)畫區(qū)分開；
• 闡明動(dòng)效如何幫助可用性；
• 解開核心動(dòng)效的內(nèi)部工作機(jī)制。

二、動(dòng)效設(shè)計(jì)與用戶體驗(yàn)

在討論動(dòng)效設(shè)計(jì)的原理之前，重要的是要強(qiáng)調(diào)動(dòng)效不僅僅是裝飾，而是一種用來幫助用戶體驗(yàn)的行為。

動(dòng)效設(shè)計(jì)涉及兩種基本的交互類型：實(shí)時(shí)和非實(shí)時(shí)。

1. 實(shí)時(shí)

當(dāng)用戶在屏幕上點(diǎn)擊UI元素時(shí)，實(shí)時(shí)交互提供即時(shí)反饋，會(huì)對(duì)用戶的操作做出即時(shí)響應(yīng)。

2. 非實(shí)時(shí)

非實(shí)時(shí)交互發(fā)生在用戶操作后，這意味著用戶需要經(jīng)過短暫的轉(zhuǎn)場(chǎng)才能看到結(jié)果，然后再繼續(xù)。

另外動(dòng)效設(shè)計(jì)通過四種不同的方式來提升產(chǎn)品的可用性：

• 期望：當(dāng)用戶與界面交互時(shí)，他們期望看到哪些行為？動(dòng)效是否符合預(yù)期或引起混亂？
• 連續(xù)性：交互在整個(gè)體驗(yàn)中是否發(fā)生一致的運(yùn)動(dòng)行為？
• 敘述：觸發(fā)的動(dòng)作是否與滿足用戶意圖的事件的邏輯進(jìn)程相關(guān)聯(lián)？
• 關(guān)系：UI界面的空間、美學(xué)和層級(jí)結(jié)構(gòu)如何相互關(guān)聯(lián)并影響用戶的決策？動(dòng)效如何影響各種元素的關(guān)系？

三、產(chǎn)品動(dòng)效設(shè)計(jì)原理

這里提供12種動(dòng)效設(shè)計(jì)原理的解析，每一種對(duì)應(yīng)不同的案例，從更直觀的角度來解讀抽象的原理。

1. 緩動(dòng)（Easing）

緩動(dòng)效果模擬了現(xiàn)實(shí)世界中對(duì)象隨時(shí)間加速或減速的方式，它適用于所有運(yùn)動(dòng)的UI元素；下圖中的卡片和對(duì)應(yīng)的椅子移動(dòng)速度很快，但由于緩動(dòng)效果它們可以平穩(wěn)地受到控制。

2. 偏移和延遲（Offset & Delay）

當(dāng)多個(gè)UI元素同時(shí)快速移動(dòng)時(shí)，用戶傾向于將它們組合在一起，而忽略了每個(gè)元素自身的功能性。

偏移和延遲會(huì)在移動(dòng)的UI元素之間創(chuàng)建層級(jí)結(jié)構(gòu)，并傳達(dá)它們相關(guān)但又不同的消息。

元素的時(shí)間、速度和間距不是完全同步的，而是交錯(cuò)排列從而產(chǎn)生一種微妙的“一個(gè)接一個(gè)”的效果；當(dāng)用戶在屏幕之間穿梭時(shí)，偏移和延遲表明存在多個(gè)交互選項(xiàng)。

3. 父子關(guān)系（Parenting）

父子關(guān)系將一個(gè)元素的屬性鏈接到其他元素中，當(dāng)父元素中的屬性更改時(shí)，子元素的鏈接屬性也會(huì)更改，同時(shí)所有元素的屬性都可以相互鏈接。

在下圖中，將父元素（藍(lán)色滑塊）的位置與子元素（燈泡發(fā)光效果&光照強(qiáng)度）相關(guān)聯(lián)；當(dāng)父元素左右移動(dòng)時(shí)，子元素的發(fā)光效果的范圍和光照強(qiáng)度的數(shù)值會(huì)發(fā)生變化。

父子關(guān)系在元素間創(chuàng)建關(guān)系并建立層級(jí)結(jié)構(gòu)，允許多個(gè)元素同時(shí)與用戶交互。因此這種效果非常適用于實(shí)時(shí)交互中。

4. 轉(zhuǎn)換（Transformation）

當(dāng)一種UI元素變成另一種形式時(shí)就會(huì)發(fā)生轉(zhuǎn)換；例如，轉(zhuǎn)換展示了下載的開始、中間和完成狀態(tài)——下載按鈕轉(zhuǎn)換為進(jìn)度條，進(jìn)度條轉(zhuǎn)換為完成圖標(biāo)。

從UX角度看，轉(zhuǎn)換效果告知用戶元素的狀態(tài)發(fā)生了變化并將信息傳遞給用戶，提高了用戶的認(rèn)知度。

5. 數(shù)值變化（Value Change）

數(shù)值的變化（數(shù)字、文本或圖形）在數(shù)字界面中非常豐富，從銀行APP到日歷到電商網(wǎng)站的各種產(chǎn)品中都會(huì)出現(xiàn)。

在某種程度上，數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對(duì)數(shù)據(jù)的價(jià)值產(chǎn)生影響；例如下圖中的數(shù)值被動(dòng)態(tài)引入，向用戶顯示他們有能力影響數(shù)據(jù)，提升了參與活動(dòng)的意愿。

6. 遮罩（Masking）

遮罩是對(duì)界面上的部分內(nèi)容進(jìn)行戰(zhàn)略性的顯示和隱藏；通過改變?cè)氐男螤詈捅壤?，在改變?cè)匦Ч耐瑫r(shí)允許元素本身保持可識(shí)別性；因此，照片和插圖等視覺形式是理想的選擇。

從可用性的角度來看，設(shè)計(jì)師可以通過遮罩向用戶展示產(chǎn)品正在進(jìn)行一系列的交互。

7. 覆蓋（Overlay）

二維空間中沒有深度，元素只能沿X或Y軸移動(dòng)，疊加在界面中創(chuàng)造出前景/背景相區(qū)分的位置關(guān)系；通過模擬深度，覆蓋可以根據(jù)用戶的需要隱藏和顯示元素。

在使用覆蓋時(shí)，信息層級(jí)結(jié)構(gòu)是重要的考慮因素；例如，用戶在筆記應(yīng)用中首先應(yīng)該看到的是筆記列表，然后使用覆蓋來顯示每個(gè)筆記的輔助選項(xiàng)，如刪除或歸檔。

8. 克?。–loning）

克隆是將現(xiàn)有的對(duì)象拆分成新對(duì)象，這是一種突出顯示重要信息或交互選項(xiàng)的方法；通過克隆將元素與界面相鏈接，如果元素只是突然出現(xiàn)或消失沒有關(guān)聯(lián)性，那么用戶將缺乏信心去交互。

9. 模糊（Obscuration）

想象一扇磨砂玻璃門，雖然看不清門后的東西但是我們能察覺到門后事物的存在。

模糊的工作原理是一樣的，它為用戶提供提示，讓用戶意識(shí)到自己正在操作的界面之后還有其他的層級(jí)結(jié)構(gòu)，導(dǎo)航菜單、密碼屏幕和文件窗口是常見的示例。

10. 視差（Parallax）

當(dāng)兩個(gè)(或更多)元素同時(shí)以不同的速度移動(dòng)時(shí)會(huì)構(gòu)成視差效果。

視差的主要目的是劃分層級(jí)結(jié)構(gòu)：

• 可交互的元素移動(dòng)速度更快，出現(xiàn)在前景中；
• 非交互式元素移動(dòng)速度較慢，退到背景中。

視差引導(dǎo)用戶點(diǎn)擊可交互的元素，同時(shí)允許非交互的元素保留在屏幕上并保持設(shè)計(jì)的統(tǒng)一性。

11. 維度（Dimensionality）

維度使界面元素具備具多個(gè)方向的交互，這種行為是使元素看起來是可折疊、可翻轉(zhuǎn)、浮動(dòng)的或具有深度。

作為一種敘述性工具，維度意味著元素的不同側(cè)面是相互聯(lián)系的，并且可以實(shí)現(xiàn)無縫的屏幕過渡。

12. 平移與縮放（Dolly & Zoom）

平移與縮放通過視角的變化能產(chǎn)生更多空間上的體驗(yàn)，逐級(jí)遞進(jìn)顯示更高級(jí)別的細(xì)節(jié)。

平移：點(diǎn)擊元素后發(fā)生距離遠(yuǎn)近的平移，用戶的視點(diǎn)會(huì)越來越接近圖像（一個(gè)人拿著照相機(jī)走到一朵花前面近距離拍攝）。

縮放：用戶的視角與圖像的距離保持不變，但圖像在屏幕中的比例會(huì)增加（這個(gè)人站在原地不動(dòng)，只利用相機(jī)的變焦功能使花顯得更大）。

三、總結(jié)——?jiǎng)有Ъ唇涣?/h2>

互動(dòng)體驗(yàn)要求動(dòng)效具備敏捷和微妙的形式，堅(jiān)持動(dòng)效設(shè)計(jì)原理，即使最基本的界面元素也能成為交流的復(fù)雜媒介。

動(dòng)效設(shè)計(jì)與產(chǎn)品用戶體驗(yàn)之間的關(guān)系正在迅速成熟，而且動(dòng)效跨越了二維屏幕上元素的抽象運(yùn)動(dòng)和3D世界中對(duì)運(yùn)動(dòng)的感知之間的鴻溝。

 

原文：toptal.com/designers/ux/motion-design-principles

原文作者：Micah Bowers

譯者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}