改進(jìn)UI微交互的實(shí)用建議
讓我們看一些UI動畫從良好到優(yōu)秀的例子。只要稍稍調(diào)整阻肩，就可以使用動畫來提升UI模式坎弯。
列出的交互顯示了狀態(tài)之間的連續(xù)性褂策，表示共享元素之間的關(guān)系，并將用戶的注意力吸引到他們應(yīng)該注意并采取行動的事情上旺聚。
為了創(chuàng)建這些動畫，我遵循了Material Motion，IBM的動畫原則和Motion Manifesto中的用戶體驗(yàn)煎谍。
所有的交互都是使用早期版本的InVision Studio制作的。你可以在這里下載源文件龙屉。
將標(biāo)簽頁中的內(nèi)容做成幻燈片
左側(cè)的內(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)容的位置與打開它的動作相關(guān)聯(lián)五芝。通過這種方式痘儡，你不僅可以使內(nèi)容的可見性動畫化，還可以使位置動畫化枢步。哦沉删，當(dāng)你在看的時候，添加一個滑動手勢醉途，將讓你從一個內(nèi)容帶到另一個內(nèi)容矾瑰。
連接卡片的共享元素
左邊的內(nèi)容將打開一個新的屏幕，并向上面滑動结蟋。右邊的卡片展開并填充屏幕脯倚。
·一個良好的動畫會使用像向左或向上滑動這樣的過渡來顯示細(xì)節(jié)屏幕上的內(nèi)容。
?·一個優(yōu)秀的動畫通過動畫共享內(nèi)容來建立兩個狀態(tài)之間的連接嵌屎。
當(dāng)在不同狀態(tài)之間進(jìn)行動畫時推正，查看它們之間是否有任何共享元素并將它們連接起來。在InVision Studio中宝惰，當(dāng)您創(chuàng)建動作轉(zhuǎn)換時植榕，在兩個鏈接屏幕之間重復(fù)的組件將自動連接。這使得原型動畫變得輕而易舉尼夺。
查看Motion Manifesto以查看可以應(yīng)用的動畫類型尊残。上面的例子使用掩蔽炒瘸、轉(zhuǎn)換、養(yǎng)育和放松的原則的組合寝衫。
在內(nèi)容中使用級聯(lián)效果
左邊的卡片通過滑動和淡入來顯示顷扩。右邊的是同樣的動畫，但是每張卡片都有一個短暫的延遲慰毅。
·一個良好的動畫會改變素材進(jìn)入屏幕時的位置和不透明度隘截。
·一個優(yōu)秀的動畫會迅速錯開每個組或元素的外觀。
為了完成瀑布效應(yīng)汹胃，嘗試將延遲應(yīng)用到每一件或一組內(nèi)容上婶芭。保持相同的放松和持續(xù)時間，所以感覺是一致的着饥。不要將每一個小元素串聯(lián)起來犀农，而是將這些內(nèi)容組合起來。保持動畫快速宰掉、流暢呵哨。谷歌推薦開始每個元素不超過20毫秒。
查看Material Motion中的編排原理以查看更多示例贵扰。
讓內(nèi)容將其他元素排除在外
左邊的動畫在其他內(nèi)容的頂部動畫仇穗。右邊的動畫會隨著內(nèi)容的增長而將其推出。
·好的動畫在上下文中移動和顯示元素戚绕。
·優(yōu)秀的動畫顯示當(dāng)他們改變時會影響周圍環(huán)境的元素纹坐。
讓你的內(nèi)容中的元素意識到他們的環(huán)境。這意味著使內(nèi)容吸引或排斥它周圍的元素舞丛。
有關(guān)更多示例耘子，請查看材料設(shè)計中的Aware運(yùn)動原理。
使菜單出現(xiàn)在上下文中
左邊的菜單從下面飛進(jìn)來球切。右邊的菜單從創(chuàng)建它的動作展開谷誓。
·好的動畫菜單顯示了從按鈕方向顯示的內(nèi)容。
·優(yōu)秀的動畫菜單從創(chuàng)建它們的動作中浮現(xiàn)出來吨凑，從觸摸點(diǎn)發(fā)展而來捍歪。
使用按鈕顯示不同的狀態(tài)
左邊的按鈕顯示文本指示狀態(tài)。右邊的按鈕使用容器顯示不同的事件鸵钝。
·良好的交互顯示按鈕旁邊的事件糙臼。?
·優(yōu)秀的交互使用按鈕本身來顯示不同的狀態(tài)。?
嘗試使用按鈕的容器來提供狀態(tài)的視覺反饋恩商。例如变逃，您可以用旋轉(zhuǎn)器或加載動畫替換CTA;或者你可以在背景中添加一個顯示進(jìn)度的動畫。解決方案取決于你怠堪，想法是利用用戶已經(jīng)與之交互的空間揽乱。如果您使用按鈕顏色和復(fù)制來確認(rèn)成功狀態(tài)名眉，可以獲得額外的積分。
引起重視
左邊的例子使用顏色和位置來使元素脫穎而出凰棉。右邊的一個使用微妙的?動畫來喚起用戶的注意力损拢。
·良好的設(shè)計使用顏色，大小和位置突出顯示用戶需要注意或采取行動的重要動作渊啰。
·優(yōu)秀的設(shè)計使用動畫來引起人們對重要動作的注意探橱，而不具有破壞性。
當(dāng)用戶需要處理一些重要的事情時绘证，嘗試用動畫來吸引他們的注意力。從一個微妙的動畫開始哗讥，增加力度(大小嚷那、顏色和速度的變化)與動作的重要性相關(guān)。只在關(guān)鍵的操作中使用它——您使用這個效果越多杆煞，它就變得越?jīng)]有影響力……用戶就越惱火魏宽。
結(jié)論
我希望這些例子能幫助您在向交互中添加動畫時做出更好的決策。有了新的動畫和原型工具决乎，比如InVision的工作室队询，我預(yù)計我們將很快看到創(chuàng)造性互動的復(fù)興。我們只需要記住負(fù)責(zé)任地使用這個新的超級大國构诚。 讓我們應(yīng)用動畫來解釋狀態(tài)的變化蚌斩，引起人們對必要動作的注意，確定元素之間的關(guān)系范嘱，并為我們的產(chǎn)品添加一些樂趣和特色送膳。通過遵循這些原則，我們將把動畫從優(yōu)秀變成卓越丑蛤。
快樂動畫叠聋！
三米工作室“TF三缺一與他們的經(jīng)紀(jì)人”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃04篇--《Good to great UI animation tips（很好的UI動畫技巧）》。 Medium英文原文鏈接https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
?作者：TF三缺一與他們的經(jīng)紀(jì)人
作者：Ayaoii
鏈接：http://www.reibang.com/p/4a2e9180bcff
來源：簡書
簡書著作權(quán)歸作者所有受裹，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處碌补。
