原文鏈接：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
作者：Pablo Stanley
Designer at InVision. Cofounder of Carbon Health. Writer at The Design Team. A teacher at Sketch Together.
Good to great UI animation tips
在外網(wǎng)看見的文章奕剃，翻下來給自己學習用的箱靴。貼出來大家也看看咯蚯妇。覺得翻的不好的可以點擊原文哈。
以下的動效歧寺，參考了 Material Motion翅雏、IBM’s Animation Principles和 The UX in Motion Manifesto∈崧耄可自行查閱隐圾。
?
Tips 1讓內(nèi)容跟隨標簽滑動
左側(cè)是淡入淡出伍掀，右側(cè)是跟隨標簽滑動的。
- 一個好的交互效果是在狀態(tài)之間切換暇藏，
- 而更好的交互效果是通過點擊狀態(tài)之間的移動來顯示轉(zhuǎn)換的連續(xù)性蜜笤。
當你在設計標簽或下拉菜單時，盡量把它放在相應能聯(lián)想操作的位置盐碱。通過這種方式把兔，你不僅能設置操作內(nèi)容的可見性，也能控制內(nèi)容的位置甸各。還有垛贤，當你在使用時，也可以添加一個輕掃手勢提示趣倾，提示你從一個內(nèi)容跳轉(zhuǎn)到另一個聘惦。
?
Tips 2頁面之間的共有元素
左側(cè)是向上滑動打開一個新的頁面，右側(cè)是擴展并填充整個屏幕儒恋。
- 一個好的交互效果是使用左推或向上滑動等過渡來展示內(nèi)容善绎，
- 而更好的交互效果是通過共有元素建立兩個頁面之間的轉(zhuǎn)換連接。
在制作不同頁面之間的動效交互時诫尽，認真查看它們之間是否存在任何共有元素能連接它們禀酱。
?
Tips 3多米諾骨牌的聯(lián)級效果
左側(cè)是通過滑動和漸隱出現(xiàn)，右側(cè)也是同樣的交互效果牧嫉，但是順序間有短暫的延遲剂跟。
- 一個好的交互效果是通過改變元素的位置和不透明度屬性來進入頁面的，
- 而更好的交互效果是快速而有序的出現(xiàn)酣藻。
要達到聯(lián)級效果曹洽，需在同一段持續(xù)時間內(nèi)，保持相同的easy ease（緩入緩出）辽剧，再逐次梯級延遲每一部分或者每一組內(nèi)容送淆，就能連貫起來。但不需要延遲頁面上所有的細小內(nèi)容怕轿，雖然他們都屬于內(nèi)容的一部分偷崩。保持每個效果即快速又活潑。
?
Tips 4讓所選內(nèi)容推開其他元素撞羽，獨占鰲頭
左側(cè)是把內(nèi)容放置于其他內(nèi)容頂部阐斜，右側(cè)是隨著內(nèi)容擴展推開了其他內(nèi)容。
- 一個好的交互效果移動并前置展示內(nèi)容放吩，
- 而更好的交互效果在內(nèi)容變化時會影響到周圍其他的元素智听。
使內(nèi)容中的元素感知周圍的環(huán)境，即元素可以吸引或排斥周圍的其他元素渡紫。
?
Tips 5使菜單躍出文中
左側(cè)的菜單自下而上顯現(xiàn)到推，右側(cè)菜單則從點擊的按鈕擴展跳出。
- 一個好的菜單交互效果從打開它們的按鈕方向顯現(xiàn)內(nèi)容惕澎，
- 而更好的菜單交互效果從點擊的按鈕接觸處擴展展現(xiàn)內(nèi)容莉测。
?
Tips 6賦予按鈕不同的狀態(tài)
左側(cè)的按鈕使用文字說明狀態(tài)，右側(cè)按鈕使用不同視覺效果清楚的展示了不同的情況唧喉。
- 一個好的交互有明顯的說明在按鈕旁捣卤，
- 而更好的交互不僅使用文字說明八孝，還利用按鈕本身來展示不同的狀態(tài)干跛。
盡量使用物體本身來展示不同狀態(tài)的視覺效果楼入。我們的想法是利用用戶已交互過的熟知特征嘉熊，就好像你可以使用頁面上重復使用過的顏色來表達按鈕確認成功狀態(tài)阐肤。
?
Tips 7為重要元素聚焦
左側(cè)的例子利用顏色和位置屬性讓元素突出孕惜，右側(cè)則使用細微的動效來吸引用戶注意诊赊。
- 一個好的設計利用顏色碧磅，大小和位置來突出用戶須知操作，
- 而更好的設計使用動效去吸引用戶注意重要操作丰榴，且不會給畫面造成破壞性四濒。
當某些重要交互需要用戶注意時盗蟆，嘗試通過動效去吸引他們的注意力喳资。從一個細微的動畫開始仆邓，并增加與交互重要程度相對等的強度屬性（大小节值，顏色和速度的變化）搞疗。Ps贴汪，僅將此作用于關(guān)鍵操作——你使用的動效次數(shù)越多扳埂，其影響力就越小……你的用戶所獲得的煩惱就越多阳懂。
?
原文鏈接：https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
