|
UI設(shè)計(jì) 功能性動(dòng)畫是一種微妙的動(dòng)畫,，有著明確,、合理的目標(biāo)。它能減少認(rèn)知負(fù)荷,，防止變化視盲,，在空間上營造更好的印象,。但還有一點(diǎn)，動(dòng)畫讓用戶界面鮮活起來,。 通過組合與分割,、改變形狀和尺寸，運(yùn)動(dòng)可以使外表感覺鮮活,。應(yīng)當(dāng)運(yùn)用功能性的動(dòng)畫,，流暢地在導(dǎo)航內(nèi)容間引導(dǎo)用戶，解釋屏幕元素和排列的變化,，并且強(qiáng)調(diào)元素層級(jí),。 成功的動(dòng)效設(shè)計(jì)具有以下6個(gè)特征： 1. 響應(yīng) 視覺反饋在UI設(shè)計(jì)中極度重要。因?yàn)樗狭擞脩舸_認(rèn)應(yīng)答的天然需要,，所以它管用,。在現(xiàn)實(shí)生活中，按鈕,、遙控和各種物體,，會(huì)響應(yīng)我們的操作，人們對(duì)事物的期待就是如此,。 UI設(shè)計(jì) 界面應(yīng)當(dāng)快速響應(yīng)用戶輸入,，準(zhǔn)確地說是要在用戶觸發(fā)的一剎那響應(yīng)，展現(xiàn)出新界面和元素與觸發(fā)它們的操作之間的關(guān)聯(lián),。在整個(gè)應(yīng)用中到處點(diǎn)擊,，并且總是能知道正在發(fā)生什么，這感覺就非常棒,。 UI設(shè)計(jì) 物體對(duì)于用戶意圖的恰當(dāng)反饋,。 2. 關(guān)聯(lián)性 把新產(chǎn)生的界面，與觸發(fā)它們的元素或操作關(guān)聯(lián)起來,。關(guān)聯(lián)性背后的邏輯,，能幫助用戶在界面布局中理解剛發(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ì) 正確做法,。 另一個(gè)例子，是操作按鈕在特定情境下改變功能,?！安シ拧焙汀皶和！卑粹o或許是開關(guān)按鈕中最普遍的例子,。播放變?yōu)闀和?，表現(xiàn)出這兩者是相關(guān)聯(lián)的，點(diǎn)按其中一個(gè),，就會(huì)看到另一個(gè),。應(yīng)該設(shè)計(jì)好狀態(tài)間的過渡動(dòng)畫，讓它看起來流暢不間斷,。 UI設(shè)計(jì) 播放控件的流暢過渡,，向用戶展現(xiàn)按鈕功能的同時(shí)，也為這個(gè)操作增加了一絲驚嘆,。圖片來源：Material Design 3. 自然 避免令人意外的過渡效果,。所有的運(yùn)動(dòng)都應(yīng)該遵循真實(shí)世界中力的作用。現(xiàn)實(shí)中,，一個(gè)物體加速減速的快慢,，受它的重量和表面摩擦力影響。類似的,，在好的界面設(shè)計(jì)中,，啟動(dòng)和停止不會(huì)立刻發(fā)生。 下圖中,，可以看到一個(gè)很好的例子,，用戶選中列表中的一項(xiàng)，展開進(jìn)入詳情視圖,。展開的過程中,，小卡片沿著一條弧線移動(dòng)到目標(biāo)位置，并且展開成一張更大的卡片,。 UI設(shè)計(jì) 正確做法,。在屏幕上向上移動(dòng)的物體，應(yīng)該在移動(dòng)時(shí)體現(xiàn)出加速的力,。圖片來源：Material Design 4. 有目的 在合適的時(shí)機(jī),，將視線引導(dǎo)到適當(dāng)?shù)奈恢谩?dòng)畫天生就是最高一級(jí)的突顯,。無論文字段落還是靜止圖片都無法與之相提并論,。好的過渡效果引導(dǎo)用戶到下一步操作。 用戶第一次無法預(yù)料某個(gè)操作觸發(fā)的結(jié)果，但適當(dāng)?shù)膭?dòng)畫能幫助用戶保持方向,，不會(huì)感覺內(nèi)容的突然改變,。 Mac OS在最小化窗口時(shí)用了一種功能性動(dòng)畫。動(dòng)畫把前后兩個(gè)狀態(tài)聯(lián)系起來,。 UI設(shè)計(jì) Mac OS的最小化動(dòng)畫 另一個(gè)好例子是由父及子的過渡,，用戶選中一個(gè)列表項(xiàng)或卡片元素，放大進(jìn)入詳情視圖,。這個(gè)操作讓用戶了解來龍去脈,。 UI設(shè)計(jì) 由父及子的過渡動(dòng)畫。 5. 快速 元素在不同位置和狀態(tài)間運(yùn)動(dòng)時(shí),，運(yùn)動(dòng)要足夠快,，不要讓人等待；也不可過快,，讓過渡能夠理解,。 不要緩慢的動(dòng)畫，因?yàn)樗a(chǎn)生了不必要的停頓,，延長了整個(gè)過程,。 UI設(shè)計(jì) 錯(cuò)誤做法。 交錯(cuò)和減緩多個(gè)元素的運(yùn)動(dòng)會(huì)延長整個(gè)過程,。
UI設(shè)計(jì) 錯(cuò)誤做法： 快速完成動(dòng)畫,，用戶就不必等待動(dòng)畫結(jié)束。
UI設(shè)計(jì) 正確做法,。 保持過渡動(dòng)畫簡短,，因?yàn)橛脩魰?huì)頻繁看到它們。讓動(dòng)畫持續(xù)時(shí)間保持在300ms或更短,。
UI設(shè)計(jì) 正確做法,。 6. 明確 過渡效果應(yīng)當(dāng)避免一次做太多事情，因?yàn)槿绻S多物體往不同方向或沿著不同路徑運(yùn)動(dòng),，它們就會(huì)令人困惑,。
UI設(shè)計(jì) 錯(cuò)誤做法。 過渡效果應(yīng)當(dāng)明確,、簡潔,、條理清晰。記住,，關(guān)于動(dòng)畫,，少即是多。我們應(yīng)該只專注于動(dòng)畫能為用戶帶來的實(shí)際價(jià)值,。
UI設(shè)計(jì) 正確做法,。 結(jié)論 綜上所述，動(dòng)畫不是隨意為之。每個(gè)操作背后都有其目的,。動(dòng)畫對(duì)它加以引導(dǎo)，顯示出重要內(nèi)容,，以防忽略,。無論你的應(yīng)用是歡樂幽默還是嚴(yán)肅直接，動(dòng)畫的運(yùn)用原則有助于提供明確,、快速,、有粘性的體驗(yàn)。 謹(jǐn)慎地設(shè)計(jì),。注意每一個(gè)細(xì)節(jié),，是成功打造易用人機(jī)交互的關(guān)鍵。 |
|
|
