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

微交互是明年流行的設計趨勢，至于原因，來看這4個用動效完成微交互的設計實例你就懂了。

動效可以告訴我們一些故事。例如「現在就讓我看看吧?！?、「操作已經完成了」等等，像這樣既不會很長，又不會很復雜的故事。

動效的目的，并不是為了娛樂用戶，而是為了讓用戶理解現在所發生的事情，更有效的說明他們的使用方法。

我們不再只是去設計一個靜態的畫面。去思考怎樣才能將用戶從單純的畫面，引導到實際操作的內容對設計來說是非常重要的。

為了讓動效變得好看，功能統一，可以廣泛的應用于內容之中。用戶的行為和條件狀況，被用戶注意的地方、或者成功的傳達執行動作所得到的結果這樣各種各樣的要素影響著。

這一次，為了改善UI設計的體驗。讓我們用一些具體的實例來一起看看可以添加動效的位置和情況吧。

1. 不要讓載入時間變得又長又無聊

如果無論如何打開網頁都需要很長的時間的話，就想辦法讓用戶在等待的時候感受到樂趣吧。動效可以作為能夠消除用戶的無聊感的代替（讓用戶不會感覺到一直在等待）。通過利用幾個連續的動畫，讓用戶感覺到并不是一直在等待，這在絕大多數網站都是十分管用的方法。

例如左側的列表型屏幕，在內容完全載入之前，我們可以看到，UI是一點一點分開顯示出來的。

2. 不要讓頁面切換變得生硬

利用動畫效果，可以在切換頁面（英: Transition）的時候，讓用戶清楚的看到什么時候在哪里開始，又是在哪里結束。精心設計你的轉場，不僅可以吸引用戶的注意，還能讓他們很快理解現在所發生事情。

當點擊鏈接的時候，滾動可以很好的幫助用戶來理解當前所發生的事情。首先讓我們來看看下面這個例子，瞬間的切換頁面能讓人感受到僵硬和牽強的感覺。

突然的切換讓人感到強烈的不適感，讓用戶在接下來的操作上會感到困惑。

然后讓我們來看下面這個案例，追加了滑動的動畫效果。

通過添加了滑動的動效，讓頁面的切換變得流暢順滑。

如你所見，通過這樣動態的切換界面，可以幫助用戶理解當前狀態，也可以很好的誘導用戶，再銜接到下面的頁面。

3. 說明各個要素之間的關聯性

動畫，可以直接的提高操作感。

例如通常在導航欄菜單，可以添加平滑的動畫來使操作更流暢平穩。利用這種效果，可以讓用戶輕松的明白按鈕有著怎樣的功能。

在下面這個例子中，播放按鈕和停止按鈕這兩個圖標在切換的過程中添加了使他們具有關聯性的動效，意味著當你使用其中一個的時候，另一個將不能被使用。

在這種情況下，通過利用動效，屏幕上的音樂播放器變得能吸引用戶注意而展現在了屏幕中央。

讓我們再來看另一個案例。在材料設計中我們可以看到，當我們點擊浮動的圖標時，加號的圖標變換成了鉛筆。通過這樣的一個小細節，我們可以知道每個圖標會有什么作用，接下來又會發生些什么。

為了強調一些有趣的事情，讓我們來利用反饋吧。

動效，可以為用戶的操作進行一些輔助。

例如這個登錄框，通過添加一些動效，便可以極大的引起重視。如果他輸入的是正確的內容，我們可以通過添加一個簡單的「點頭效果（英: Nod）」的動畫，來表示輸入完成。另一方面，我們可以通過添加水平方向的震動來表示輸入錯誤的效果。當用戶看到這樣的動畫時，便可以立刻明白其中的含義。

利用上面所介紹的這種動效，可以很方面的讓用戶理解“你還沒有輸入”這樣的意思。

4. 為了表示已經完成，讓我們給用戶一個反饋

動效，在給用戶的行為動作的結果一個視覺化的反饋時也是非常有用的?！溉ケ憩F，而不是說。（英: Show, don’t tell）」基于這樣的動效設計原則，為了讓用戶明白，他們做了些什么，是否已經完成，你可以使用動效來給用戶一個反饋。

在下面的設計案例中，當用戶點擊付款按鈕之后，便可以插入一個支付完成的小動畫。對號這樣的動效，可以告訴用戶支付已經完成，這樣的細節對用戶體驗來說也是非常重要的。

最后

通過不斷的摸索與使用，動效也會成為你一個非常強大的工具。怎樣的動效是必須的，怎樣又是不需要的，通過不斷的反思，總結經驗對于設計這來說是非常必要的。

在網頁設計的開始階段，首先來好好考慮一下接下來會用到哪些動效吧。像這樣來完成設計，可以將內容以視覺性的效果呈現出來。

原文地址：photoshopvip

譯文地址：微信公眾號【喪心病狂的翻譯站】

版權聲明：人人都是產品經理尊重行業規范，所轉載的文章都注明作者和來源，若標注有誤，請聯系主編QQ：419297645更改。