人妻少妇精品无码专区漫画_亚洲国产精品一区二区sm_内地无码毛片手机在线_亚洲av大精永久无码精品

（圖片來源：ZURB University）

功能性的動(dòng)效是指一種微妙且具有清晰合理目的的動(dòng)畫效果。它能減少認(rèn)知負(fù)荷，防止對(duì)(界面)變化的忽視、還能幫助用戶在界面的空間關(guān)系之中建立慣性回憶。更重要的是，動(dòng)效給用戶界面賦予了生命。

通過對(duì)界面元素進(jìn)行組合、拆分、改變他們的形狀和大小，動(dòng)效可以讓界面更加生動(dòng)。你應(yīng)當(dāng)使用功能性動(dòng)效流暢地在上下文間引導(dǎo)用戶，解釋屏幕上元素排列的變化，以及加強(qiáng)元素層次結(jié)構(gòu)。

成功的動(dòng)效設(shè)計(jì)具有以下六大特點(diǎn)。

1、響應(yīng)

視覺反饋在用戶界面設(shè)計(jì)中是非常重要的，因?yàn)榭释�得到確認(rèn)反饋信息是用戶的一種天性。在現(xiàn)實(shí)生活中，按鈕、控制鍵和其它物體會(huì)因我們的操作而產(chǎn)生相應(yīng)的反饋，這已經(jīng)是人們習(xí)以為常的交互方式。

用戶界面應(yīng)該在用戶點(diǎn)擊輸入框時(shí)，就準(zhǔn)確及時(shí)地給予響應(yīng)，表現(xiàn)出上一界面和當(dāng)前界面的關(guān)系，以及哪些元素和操作導(dǎo)致了當(dāng)前界面的出現(xiàn)。用戶通過點(diǎn)擊應(yīng)用程序總是能知道發(fā)生了什么，這感覺很好。

（元素對(duì)用戶的操作意圖給出了合適的回應(yīng)）

2、關(guān)聯(lián)

新出現(xiàn)的界面需要和那些導(dǎo)致它出現(xiàn)的元素或操作聯(lián)系起來。這種聯(lián)想式關(guān)系所隱含的邏輯，能幫助用戶理解剛剛在視圖的布局中發(fā)生的變化和什么觸發(fā)了變化。

下面你能看到兩個(gè)導(dǎo)航菜單的動(dòng)效案例。第一個(gè)案例中，菜單從用戶點(diǎn)擊點(diǎn)以外很遠(yuǎn)的地方開始浮現(xiàn)，這就打破了點(diǎn)擊行為和菜單動(dòng)效的聯(lián)系。

在第二個(gè)例子中菜單從接觸點(diǎn)出現(xiàn)，這就將元素關(guān)聯(lián)在了接觸點(diǎn)上。

另一個(gè)例子是在特定條件下操作按鈕功能的變化�！安シ拧焙汀巴Ｖ埂卑粹o可能是切換開關(guān)最常見的例子。將播放按鈕轉(zhuǎn)換為暫停按鈕意味著這兩個(gè)動(dòng)作是相連的，并且點(diǎn)擊一個(gè)按鈕后另一個(gè)按鈕才會(huì)出現(xiàn)。你應(yīng)該提供按鈕動(dòng)效讓這兩種狀態(tài)轉(zhuǎn)換地更為流暢且避免間斷感。

（平滑地過渡到一個(gè)播放控件并告知用戶按鈕的功能，同時(shí)增加了一個(gè)驚喜的交互元素。圖片來源：Material Design）

3、自然

避免令人詫異的過渡，每一個(gè)運(yùn)動(dòng)都應(yīng)該遵循現(xiàn)實(shí)世界中的作用力。在現(xiàn)實(shí)世界中，一個(gè)物體加速或減速的能力受重量和摩擦力的影響。同樣的，好的界面設(shè)計(jì)中，動(dòng)效的啟動(dòng)和停止也不能過于突兀。

下面你可以看到一個(gè)很好的例子，用戶選擇列表中的一項(xiàng)放大到詳細(xì)視圖。在擴(kuò)展過程中，小卡片沿著弧線移動(dòng)到它的目的地，擴(kuò)展成一個(gè)更大的卡。

（正確方式。在屏幕上向上移動(dòng)的元素應(yīng)該在運(yùn)動(dòng)過程中出現(xiàn)加速的力）

4、有意圖的

操作指南關(guān)注的是如何在合適的地點(diǎn)、合適的時(shí)間給出引導(dǎo)提示。而動(dòng)態(tài)效果，因?yàn)槠涮匦�，則擁有界面上最高的可見性（譯者補(bǔ)充：運(yùn)動(dòng)中的東西最易被人眼察覺）。無論是文本段落，還是靜態(tài)圖像都無法超越它。好的過渡有助于引導(dǎo)用戶下一步的交互。

第一次使用時(shí)用戶無法真正預(yù)測(cè)即將發(fā)生的交互，但適當(dāng)?shù)膭?dòng)效可以幫助用戶引導(dǎo)方向，不會(huì)覺得內(nèi)容突然發(fā)生變化。

Mac OS最小化窗口時(shí)使用的功能性動(dòng)效，這個(gè)動(dòng)效將第一個(gè)狀態(tài)和第二個(gè)狀態(tài)連接起來。

（Mac OS最小化窗口動(dòng)效）

層級(jí)跳轉(zhuǎn)間使用的過渡動(dòng)效，用戶在列表中選擇一個(gè)項(xiàng)目或卡片元素，并放大到詳細(xì)視圖。這個(gè)交互動(dòng)效能夠讓用戶保持維持對(duì)界面情景的認(rèn)知。

（層級(jí)跳轉(zhuǎn)間的過渡動(dòng)效）

5、快速

當(dāng)元素在位置或狀態(tài)之間移動(dòng)時(shí)，運(yùn)動(dòng)應(yīng)該足夠簡(jiǎn)潔快速，不要造成用戶的等待，同時(shí)又能保證過渡動(dòng)效能夠被用戶所察覺并理解。

避免過慢的動(dòng)畫，因?yàn)樗鼤?huì)造成不必要的遲緩并增加完成操作的耗時(shí)。

（錯(cuò)誤方式）

錯(cuò)開和放慢過多元素的運(yùn)動(dòng)會(huì)延長(zhǎng)持續(xù)時(shí)間。

（錯(cuò)誤方式。圖片來源：MaterialDesign）

快速的動(dòng)效，讓用戶不必等待動(dòng)效完成。

（正確方式）

用戶會(huì)經(jīng)�？吹剿鼈�，所以應(yīng)保持過渡時(shí)間短，保持動(dòng)效持續(xù)時(shí)間在300毫秒內(nèi)。

（正確方式）

6、清晰

避免在一次動(dòng)效中做多件事情，因?yàn)楫?dāng)多個(gè)項(xiàng)目需要在不同的方向或交叉路徑移動(dòng)時(shí)，它們就會(huì)變得很混亂，讓用戶暈頭轉(zhuǎn)向。

（錯(cuò)誤方式）

過渡應(yīng)該是清晰的，簡(jiǎn)潔的，連貫的。關(guān)于動(dòng)效，請(qǐng)記住少即是多。因此，我們應(yīng)該只關(guān)注動(dòng)效對(duì)用戶的實(shí)際價(jià)值。

（正確方式）

結(jié)論

總之，運(yùn)動(dòng)不是隨意的，每個(gè)動(dòng)作都是有目的的。運(yùn)動(dòng)原理是動(dòng)效設(shè)計(jì)的基礎(chǔ)原則，運(yùn)動(dòng)也能突出重點(diǎn)讓你不會(huì)淹沒在界面元素里。無論您的應(yīng)用程序是有趣好玩或嚴(yán)肅直接的，使用運(yùn)動(dòng)原理能幫你建立一種清晰又具有凝聚力的界面體驗(yàn)。

謹(jǐn)慎設(shè)計(jì)。關(guān)注每一個(gè)細(xì)節(jié)是使人機(jī)交互易于使用的關(guān)鍵。

注： 本文圖片來源MaterialDesign等設(shè)計(jì)網(wǎng)站

英文原文：Nick Babich, Functional Animation In UX Design: What Makes a Good Transition?

原文地址：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e#.i3v9b5n7e