經(jīng)典的UI設(shè)計(jì)轉(zhuǎn)場動效

《經(jīng)典的UI設(shè)計(jì)轉(zhuǎn)場動效》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、經(jīng)典的UI設(shè)計(jì)轉(zhuǎn)場動效UI設(shè)計(jì)功能性動畫是一種微妙的動畫，有著明確、合理的目標(biāo)。它能減少認(rèn)知負(fù)荷，防止變化視盲,在空間上營造更好的印氨但還有一點(diǎn)，動畫讓用戶界面鮮活起來。通過組合與分割、改變形狀和尺寸，運(yùn)動可以使外表感覺鮮活。應(yīng)當(dāng)運(yùn)用功能性的動畫，流暢地在導(dǎo)航內(nèi)容間引導(dǎo)用戶，解釋屏幕元素和排列的變化，并且強(qiáng)調(diào)元素層級。成功的動效設(shè)計(jì)具有以下6個(gè)特征:1?響應(yīng)視覺反饋在UI設(shè)計(jì)中極度重要。因?yàn)樗狭擞脩舸_認(rèn)應(yīng)答的天然需要，所以它管用。在現(xiàn)實(shí)生活中,按鈕、遙控和各種物體，會響應(yīng)我們的操作，人們對事物的期待就是如此。UI設(shè)計(jì)界面應(yīng)當(dāng)快

2、速響應(yīng)用戶輸入，準(zhǔn)確地說是要在用戶觸發(fā)的一剎那響應(yīng)，展現(xiàn)岀新界面和元素與觸發(fā)它們的操作之間的關(guān)聯(lián)。在整個(gè)應(yīng)用中到處點(diǎn)擊,并且總是能知道正在發(fā)生什么，這感覺就非常棒。UI設(shè)計(jì)物體對于用戶意圖的恰當(dāng)反饋。2.關(guān)聯(lián)性把新產(chǎn)生的界面，與觸發(fā)它們的元素或操作關(guān)聯(lián)起來。關(guān)聯(lián)性背后的邏輯z能幫助用戶在界面布局中理解剛發(fā)生的變化，是什么導(dǎo)致了變化。下圖中，可以看到兩個(gè)菜單過渡效果。第一個(gè)例子中，菜單出現(xiàn)位置遠(yuǎn)離觸發(fā)它的接觸點(diǎn)，破壞了與這種輸入方式的關(guān)聯(lián)。UI設(shè)計(jì)錯(cuò)誤做法。第二個(gè)例子中.菜單正是從觸點(diǎn)產(chǎn)生。這就把這個(gè)元素與觸點(diǎn)關(guān)聯(lián)起來了。UI設(shè)計(jì)正

3、確做法。另一個(gè)例子,是操作按鈕在特定情境下改變功能?！úシ拧ê汀〞和！ò粹o或許是開關(guān)按鈕中最普遍的例子。播放變?yōu)闀和?，表現(xiàn)出這兩者是相關(guān)聯(lián)的，點(diǎn)按其中一個(gè)，就會看到另一個(gè)。應(yīng)該設(shè)計(jì)好狀態(tài)間的過渡動畫,讓它看起來流暢不間斷。UI設(shè)計(jì)播放控件的流暢過渡，向用戶展現(xiàn)按鈕功能的同時(shí)也為這個(gè)操作增加了一絲驚嘆。圖片來源:MaterialDesign3.自然避免令人意外的過渡效果。所有的運(yùn)動都應(yīng)該遵循真實(shí)世界中力的作用。現(xiàn)實(shí)中，一個(gè)物體加速減速的快慢，受它的重量和表面摩擦力影響。類似的，在好的界面設(shè)計(jì)中，啟動和停止不會立刻發(fā)生。卜圖中，可以看

4、到一個(gè)很好的例子，用戶選中列表中的一項(xiàng)，展開進(jìn)入詳情視圖。展開的過程中，小卡片沿著一條弧線移動到目標(biāo)位置，并且展開成一張更大的卡片。UI設(shè)計(jì)正確做法。在屏幕上向上移動的物體,應(yīng)該在移動時(shí)體現(xiàn)出加速的力。圖片來源：MaterialDesign4.有目的在合適的時(shí)機(jī)，將視線引導(dǎo)到適當(dāng)?shù)奈恢谩赢嬏焐褪亲罡咭患壍耐伙@。無論文字段落還是靜止圖片都無法與之相提并論。好的過渡效果引導(dǎo)用戶到下一步操作。用戶第一次無法預(yù)料某個(gè)操作觸發(fā)的結(jié)果，但適當(dāng)?shù)膭赢嬆軒椭脩舯３址较?，不會感覺內(nèi)容的突然改變。MacOS在最小化窗口時(shí)用了一種功能，注動畫。動

5、畫把前后兩個(gè)狀態(tài)聯(lián)系起來。ui設(shè)計(jì)MacOS的最小化動畫另一個(gè)好例子是由父及子的過渡,用戶選中一個(gè)列表項(xiàng)或卡片元素,放大進(jìn)入詳情視圖。這個(gè)操作讓用戶了解來龍去脈。ui設(shè)計(jì)由父及子的過渡動畫。5?快速元素在不同位置和狀態(tài)間運(yùn)動時(shí),運(yùn)動要足夠快，不要讓人等待；也不可過快,讓過渡能夠理解。不要緩慢的動畫，因?yàn)樗a(chǎn)生了不必要的停頓，延長了整個(gè)過程。UI設(shè)計(jì)錯(cuò)誤做法。交錯(cuò)和減緩多個(gè)元素的運(yùn)動會延長整個(gè)過程。SHRINEreencomIorIchairLeavethetunnelandtherainisfalling,amazingthing

6、shappenwhenyouwait.3AI5UI設(shè)計(jì)錯(cuò)誤做法：快速完成動畫，用戶就不必等待動畫結(jié)束。UI設(shè)計(jì)正確做法。保持過渡動畫簡短，因?yàn)橛脩魰l繁看到它們。讓動畫持續(xù)時(shí)間保持在300ms或更短。SHRINEreencomfortchairLeavethetunnelandtherainisfalling,amazingthingshappenwhenyouwait.UI設(shè)計(jì)正確做法。6.明確過渡效果應(yīng)當(dāng)避免一次做太多事情,因?yàn)槿绻S多物體往不同方向或沿著不同路徑運(yùn)動，它們就會令人困惑。▼,■5:00EPESTO幻PestoB

7、ruschettaPeterCarlssonUI設(shè)計(jì)錯(cuò)誤做法。過渡效果應(yīng)當(dāng)明確、簡潔、條理清晰。記住,關(guān)于動畫，少即是多。我們應(yīng)該只專注于動畫能為用戶帶來的實(shí)際價(jià)值。▼ja5:00PESTO幻PestoBruschettaPeterCarlssonUI設(shè)計(jì)正確做法。結(jié)論綜上所述，動畫不是隨意為之。每個(gè)操作背后都有其目的。動畫對它加以引導(dǎo)，顯示岀重要內(nèi)容，以防忽略。無論你的應(yīng)用是歡樂幽默還是嚴(yán)肅直接,動畫的運(yùn)用原則有助于提供明確、快速、有粘性的體驗(yàn)。謹(jǐn)慎地設(shè)計(jì)。注意每一個(gè)細(xì)節(jié)，是成功打造易用人機(jī)交互的關(guān)鍵。