這篇文章打厘，我們來一起看一些可以將UI設(shè)計從優(yōu)秀提升到卓越的技巧绪穆，通過一些細節(jié)的調(diào)整纳猫，你可以通過動效來提升整體的UI設(shè)計水平磅网。
交互設(shè)計的作用是展示不同狀態(tài)之間的連續(xù)性谈截、闡述共享元素之間的關(guān)系、將用戶的注意力吸引到他們應(yīng)該注意或者需要操作的元素上來。
一.讓標(biāo)簽下的內(nèi)容滑動起來
圖左是將新標(biāo)簽下的內(nèi)容直接覆蓋上來傻盟；
圖右是將新標(biāo)簽下的內(nèi)容自然地從左/右滑動進來速蕊。
◆ 一般的內(nèi)容切換動效是將標(biāo)簽下對應(yīng)的內(nèi)容直接覆蓋展現(xiàn)或者消失變沒。
◆?卓越的內(nèi)容切換動效會將不同單元的轉(zhuǎn)換過渡非常流暢地展現(xiàn)出來娘赴。
當(dāng)你設(shè)計一個標(biāo)簽或者飛出式菜單的交互時规哲，試著擺放一下其對應(yīng)打開的內(nèi)容的位置。
這樣你不但可以保證交互動效中內(nèi)容的可見性诽表，也可以確定內(nèi)容出場/消失的起止位置唉锌。
最后，添加滑動的效果竿奏，讓內(nèi)容從一個單元切換到另一個單元呈現(xiàn)出順滑的過程袄简。
二.鏈接共享一張卡片的元素
圖左打開的內(nèi)容呈以上滑的方式打開了一個新的頁面；
圖右的卡片則是拉伸并鋪滿了真?zhèn)€屏幕泛啸。
◆?一般的動效基本上是采用向左推動或者向上滑動等過渡形式推出一整屏的內(nèi)容绿语。
◆?卓越的動效則是在共享元素上做文章，通過共享的元素建立兩個單元的自然鏈接候址。
在做鏈接多單元的動效時吕粹，觀察一下，在它們之間是否有共享的元素岗仑，或者它們中間有沒有其他的鏈接匹耕。
三.在你的目錄中使用層級效果
圖左的目錄直接便完整出現(xiàn)了；
圖右目錄出現(xiàn)的動效是一樣的荠雕，但是每個卡片出現(xiàn)呈層級延遲出現(xiàn)稳其。
◆?一般的動效是在新頁面或者新單元進入屏幕時改變其整體的位置或者不透明度。
◆?卓越的動效則在每一組甚至每一個元素上做文章炸卑，讓它們有序且快速地出現(xiàn)在屏幕中既鞠。
要實現(xiàn)這種瀑布效果，需要將每一組元素的進場時間做延遲矾兜。保持一致的間隔和持續(xù)時間损趋，因此它們看起來很和諧。
但是椅寺，不要每一個小小的元素都做這種效果，將元素分組蒋失，類似目錄卡片那樣就好返帕。
萬事過猶不及，我們還要保證動效的干凈利落篙挽。Google 建議每組元素之間的間隔不要超過20毫秒荆萤。
四.讓新展出的內(nèi)容將其他內(nèi)容推出屏幕
圖左的動效是新打開內(nèi)容直接覆蓋在其他元素上；
圖右的動效是新打開的內(nèi)容在展開的同時把其他元素推出了屏幕。
◆?一般的動效是單純移動链韭、展示出現(xiàn)的元素偏竟；
◆?卓越的動效則會呈現(xiàn)出，當(dāng)一個元素出現(xiàn)或者發(fā)生改變時敞峭，它對周邊其他元素產(chǎn)生了怎樣的影響踊谋。
在設(shè)計的過程中注意元素周邊的環(huán)境，也就是說旋讹，讓你設(shè)計中的元素的變化去影響周邊元素的變化殖蚕。
五.讓你的菜單從特定環(huán)境中出現(xiàn)
圖左的菜單是從底部飛上來的；
圖右的菜單是從觸發(fā)的按鈕位置延展出來的沉迹。
◆?一般的菜單動效睦疫，其內(nèi)容是在按鈕觸發(fā)后直接從某個特性方向進場。
◆?卓越的菜單動效鞭呕，其內(nèi)容是由觸發(fā)按鈕這一個點擴展出來的蛤育。
六.用按鈕來展示不同的狀態(tài)
圖左的按鈕依靠旁邊的文本來表達其狀態(tài)；
圖右的按鈕則變換成進度條來展示不同時段的事件葫松。
◆?一般的交互靠按鈕旁邊的文本來展示事件缨伊；
◆?卓越的交互則可以運用按鈕本身來展示事件的不同階段。
試著用按鈕特效來提供視覺反饋进宝，比如你把“Get App”替換成一個loading動畫刻坊，
或者你可以在整個背景上做一個動效來展示進程，用什么方法党晋，取決于你谭胚。另外可以將通過恢復(fù)按鈕并改變其顏色來表達成功狀態(tài)。
七.將注意力拉到重要的元素上
圖左利用顏色和位置來使右下角的元素突出未玻；
圖右則使用微動效來吸引用戶的注意力
◆?一般的設(shè)計會利用顏色灾而、尺寸、位置來著重突出用戶需要注意的比較重要的操作或者信息扳剿；
◆?卓越的設(shè)計則可以利用微動效旁趟，在不破壞原有設(shè)計的基礎(chǔ)上吸引用戶的注意力。
當(dāng)用戶需要去操作一些比較重要的功能時庇绽，可以嘗試使用動效來喚起他們的注意力锡搜。
你可以先從一個微動效開始，然后根據(jù)這個操作的重要性來考慮是否增加動效的強度（變化尺寸瞧掺、顏色和速度）耕餐。
當(dāng)然，值得注意的是辟狈，這種動效要運用在至關(guān)重要的操作上肠缔。
這種方式用得越多夏跷，它的效果反而會越低，甚至?xí)蓴_用戶的注意力明未，得到適得其反的效果槽华。
總結(jié)
我希望這些案例能夠在你做交互動效時幫你做出一個合適的決定。
我們可以通過動效來展示在變化中的不同階段趟妥，將用戶的注意力拉到重要的功能操作上來猫态，確定元素之間的關(guān)系，為我們的產(chǎn)品增加趣味和鮮明的特征煮纵。
參考以上這些原則懂鸵，我們可以讓我們的動效水平提升至卓越。
加油行疏！
原文作者：Pablo Stanley
