中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這篇文章，我們來一起看一些可以將UI設(shè)計從優(yōu)秀提升到卓越的案例，通過一些細(xì)節(jié)的調(diào)整，你可以通過動效來提升整體的UI設(shè)計水平。

交互設(shè)計的作用是展示不同狀態(tài)之間的連續(xù)性、闡述共享元素之間的關(guān)系、將用戶的注意力吸引到他們應(yīng)該注意或者需要操作的元素上來。

這篇文章中的案例（我做出的動效）遵循了以下這些規(guī)范：（這三篇文章需要在外網(wǎng)上查看）

• Material Motion
• IBM’s Animation Principles
• The UX in Motion Manifesto

讓標(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)

圖左的按鈕依靠旁邊的文本來表達(dá)其狀態(tài)；圖右的按鈕則變換成進度條來展示不同時段的事件。

• 一般的交互靠按鈕旁邊的文本來展示事件；
• 卓越的交互則可以運用按鈕本身來展示事件的不同階段。

試著用按鈕特效來提供視覺反饋，比如你把“Get App”替換成一個loading動畫，或者你可以在整個背景上做一個動效來展示進程，用什么方法，取決于你。另外可以將通過恢復(fù)按鈕并改變其顏色來表達(dá)成功狀態(tài)。

將注意力拉到重要的元素上

圖左利用顏色和位置來使右下角的元素突出；圖右則使用微動效來吸引用戶的注意力

• 一般的設(shè)計會利用顏色、尺寸、位置來著重突出用戶需要注意的比較重要的操作或者信息；
• 卓越的設(shè)計則可以利用微動效，在不破壞原有設(shè)計的基礎(chǔ)上吸引用戶的注意力。

當(dāng)用戶需要去操作一些比較重要的功能時，可以嘗試使用動效來喚起他們的注意力。你可以先從一個微動效開始，然后根據(jù)這個操作的重要性來考慮是否增加動效的強度（變化尺寸、顏色和速度）。當(dāng)然，值得注意的是，這種動效要運用在至關(guān)重要的操作上，這種方式用得越多，它的效果反而會越低，甚至?xí)蓴_用戶的注意力，得到適得其反的效果。

總結(jié)

我希望這些案例能夠在你做交互動效時幫你做出一個比較合適的決定。我們可以通過動效來展示在變化中的不同階段，將用戶的注意力拉到重要的功能操作上來，確定元素之間的關(guān)系，為我們的產(chǎn)品增加趣味和鮮明的特征。

參考以上這些原則，我們可以讓我們的動效水平提升至卓越。

加油！

原文作者：?Pablo Stanley

原文鏈接：Good to great UI animation tips

翻? ? ? ?譯：藍(lán)湖

微信公眾號：藍(lán)湖產(chǎn)品設(shè)計協(xié)作

本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議