起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識交互動效 | 優(yōu)秀的UI動畫設(shè)計技巧
本文筆者將為大家展示一些UI動畫的案例，期以通過這些案例，幫助大家在為交互添加動畫時做出更好的決策。
讓我們看一些UI動畫從好到優(yōu)秀的例子，通過這里和那里的一些調(diào)整，你可以使用動畫提升你的UI模式。
列出的交互表示狀態(tài)之間的連續(xù)性，表示共享元素之間的關(guān)系，并將用戶的注意力引用到他們應(yīng)注意和采取行動的事物上。
為了創(chuàng)建這些動畫，我遵循了Material Motion、IBM的動畫原則和UX in Motion Manifesto中的指導(dǎo)原則。
所有的交互都是使用InVision Studio的早期訪問版本完成的。
01 使標(biāo)簽中的內(nèi)容滑動
左邊的內(nèi)容淡入淡出。右邊那個帶標(biāo)簽的幻燈片。
- 一個好的動畫將內(nèi)容從一個狀態(tài)轉(zhuǎn)換為另一個狀態(tài)。
- 一個優(yōu)秀的動畫通過使內(nèi)容在狀態(tài)之間移動來顯示轉(zhuǎn)換的連續(xù)性。
當(dāng)您設(shè)計像標(biāo)簽或彈出菜單這樣的交互時，請嘗試將內(nèi)容的位置相對于打開它的操作。這樣，您不僅可以設(shè)置內(nèi)容的可見性，還可以設(shè)置位置的動畫。哦，當(dāng)你在瀏覽它的時候，添加一個輕掃手勢，將你從一個內(nèi)容帶到另一個內(nèi)容。
02 連接卡片的共享元素
左邊的內(nèi)容打開了一個新的屏幕，可以向上滑動。右邊的卡片展開并填滿屏幕。
- 一個好的動畫使用左推或向上滑動等過渡來在細(xì)節(jié)屏幕上顯示內(nèi)容。
- 一個優(yōu)秀的動畫通過動畫共享內(nèi)容在兩個狀態(tài)之間建立連接。
在不同狀態(tài)之間制作動畫時，查看它們之間是否存在任何共享元素并連接它們。使用InVision Studio時，在創(chuàng)建Motion轉(zhuǎn)換時會自動連接兩個鏈接屏幕之間重復(fù)的組件，這使得原型制作動畫變得輕而易舉。
查看Motion Manifesto，了解您可以應(yīng)用的動畫類型。上面的示例使用了Masking、Transformation、Parenting和Easing原則的組合。
03 在您的內(nèi)容中使用級聯(lián)效果
左側(cè)的卡片通過滑動和淡入顯示。右側(cè)的卡片具有相同的動畫，但每張卡片都有短暫的延遲。
- 一個好的動畫會在材料進(jìn)入屏幕時改變材質(zhì)的位置和不透明度。
- 一個優(yōu)秀的動畫很快就會錯開每個組或元素的外觀。
要完成瀑布效果，請嘗試對每個內(nèi)容或每組內(nèi)容應(yīng)用延遲。保持相同的緩和和持續(xù)時間，因此感覺一致。
盡管如此，不要對每個小元素進(jìn)行級聯(lián)，使內(nèi)容組具有動畫效果。保持動畫的快速和活潑。谷歌建議開始每個元素不超過20毫秒。查看Material Motion中的編排原理以查看更多示例。
04 使內(nèi)容將其他元素排除在外
左邊的動畫在其他內(nèi)容之上進(jìn)行動畫。右邊的動畫隨著內(nèi)容的增長將內(nèi)容推出。
- 好的動畫移動并在上下文中顯示元素。
- 優(yōu)秀的動畫在變化時會顯示影響周圍環(huán)境的元素。
使你內(nèi)容中的元素了解周圍環(huán)境。這意味著使內(nèi)容吸引或排斥其周圍的元素。有關(guān)更多示例，請查看Material Design中的Aware運(yùn)動原理。
05 使菜單顯示在上下文中
左邊的菜單從下面飛進(jìn)來。右邊的菜單從創(chuàng)建它的操作按鈕展開。
- 好的動畫菜單顯示從打開它們的按鈕方向出現(xiàn)的內(nèi)容。
- 優(yōu)秀的動畫從創(chuàng)造它們的動作中出現(xiàn)了很棒的動畫菜單，從觸摸點開始增長。
06 使用按鈕顯示不同的狀態(tài)
左側(cè)的按鈕顯示指示狀態(tài)的文本。右側(cè)的按鈕使用容器顯示不同的事件。
- 良好的交互顯示按鈕旁邊的事件。
- 優(yōu)秀的交互使用按鈕本身來顯示不同的狀態(tài)。
嘗試使用按鈕的容器來提供狀態(tài)的可視反饋，例如：你可以使用微調(diào)器或加載動畫替換CTA;或者你可以在顯示進(jìn)度的背景中添加動畫。
解決方案取決于你，我們的想法是使用用戶已經(jīng)與之交互的空間。如果你使用按鈕顏色并復(fù)制以確認(rèn)成功狀態(tài)，則獎勵積分。
07 注意重要的事情
左側(cè)的示例使用顏色和位置使元素脫穎而出。右側(cè)的那個使用微妙的動畫來引起用戶的注意。
- 好的設(shè)計使用顏色，大小和位置來突出用戶需要注意或采取的重要行動。
- 優(yōu)秀的設(shè)計使用動畫來引起對重要動作的注意，而不會造成破壞性。
當(dāng)用戶需要對重要事項采取行動時，請嘗試設(shè)置動作以吸引他們的注意力。從一個微妙的動畫開始，增加與動作重要程度相關(guān)的強(qiáng)度（大小，顏色和速度的變化），僅將其用于關(guān)鍵操作——你使用此效果的次數(shù)越多，其影響就越小……用戶獲得的煩惱越多。
結(jié)論
我希望這些示例可以幫助您在為交互添加動畫時做出更好的決策。借助InVision studio等新動畫和原型制作工具，我預(yù)測我們很快就會看到創(chuàng)意互動的復(fù)興。我們只需要記住認(rèn)真負(fù)責(zé)地使用這個新的強(qiáng)大工具。
讓我們應(yīng)用動畫來解釋狀態(tài)的變化，引起對必要動作的注意，確定元素之間的關(guān)系，并為我們的產(chǎn)品添加一些樂趣和特征。通過遵循這些原則，我們將動畫從好轉(zhuǎn)變?yōu)閮?yōu)秀。
本文由@Chris 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash, 基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
