本文上篇：《掌握動(dòng)效設(shè)計(jì)！讓你的設(shè)計(jì)富有未來科技感（上）》

基于情景的消隱

這是iOS上的Chrome，有著基于情景的消隱動(dòng)效。

當(dāng)向下滾動(dòng)時(shí)，導(dǎo)航控件自動(dòng)消隱。用戶向上滾動(dòng)時(shí)，導(dǎo)航控件出現(xiàn)。優(yōu)設(shè)哥發(fā)現(xiàn)這一點(diǎn)上，騰訊網(wǎng)的新聞詳情頁已經(jīng)采用了。案例圍觀地址（上下滾動(dòng)鼠標(biāo)滑輪，注意頁面頂部導(dǎo)航的變化）：http://news.qq.com/a/20131104/001730.htm 。這種方法既能提高瀏覽體驗(yàn)、也拓展了有限的瀏覽空間。這對于空間限制較大的移動(dòng)設(shè)備來說，尤為重要。

用戶會(huì)快速掃描內(nèi)容，略過不感興趣的內(nèi)容。當(dāng)用戶停止快速瀏覽時(shí)，說明上面或者當(dāng)前有用戶感興趣的內(nèi)容，為了便于導(dǎo)航，導(dǎo)航控件再次出現(xiàn)。這是一種動(dòng)態(tài)的界面。

注意： 基于情景的消隱，目的在于提高用戶的注意力以及節(jié)省屏幕空間。

拉動(dòng)刷新

可能這則動(dòng)效大家最為熟悉，也就是下拉刷新。通過該動(dòng)效，用戶可以刷新最新內(nèi)容。下圖是Twitter的應(yīng)用，看看是怎樣利用這個(gè)動(dòng)效刷新信息流的。

為什么這種動(dòng)效效果如此好？因?yàn)橄吕⑿率怯幸罁?jù)的，首先，桌面時(shí)代，用戶就喜歡按刷新鍵來載入新內(nèi)容。其次用戶渴望把舊內(nèi)容向下拉開，這樣就給更多的新內(nèi)容騰出了地方。所以下拉和刷新結(jié)合了起來。

注意： 在設(shè)計(jì)中，將用戶的習(xí)慣/預(yù)期與行為結(jié)合，能打造無縫的體驗(yàn)。

可接受的轉(zhuǎn)換

可接受性的概念來自認(rèn)知學(xué)理論，主要面向引導(dǎo)用戶這一問題。
用戶界面需要一種可接受性——軟件界面能夠自然、合乎用戶情理的完成轉(zhuǎn)換。

我們可在iOS的照相應(yīng)用中發(fā)展這種UX理論。

比如說解鎖漣漪效果，便說明操作有效。這給用戶以提示，用戶便能接受下一步的轉(zhuǎn)換。然而在iOS7中，蘋果移除了這一特性，因?yàn)橛脩粢呀?jīng)全盤習(xí)慣、熟知了這種操作，用戶已經(jīng)適應(yīng)了這種轉(zhuǎn)換，因此動(dòng)效作為"引導(dǎo)"已經(jīng)沒有存在的必要。我想這大概就是扁平取代擬物的原因——之前iOS的擬物隱喻眾人熟知，已無引導(dǎo)用戶的必要。但是還是要贊一下曾經(jīng)的漣漪效果，用戶引導(dǎo)效果非常棒。推薦閱讀《全世界都被拍扁！你應(yīng)如何理性對待扁平化設(shè)計(jì)》

注意: 賦予元素高可接受性，能為用戶指明操作方法。

焦點(diǎn)轉(zhuǎn)換動(dòng)效

一周前，Nikita Vasilyev，這位多倫多的UI設(shè)計(jì)師提出了一個(gè)理念。寫了一個(gè)腳本，賦予焦點(diǎn)元素動(dòng)效。仍處于試驗(yàn)中，但是非常有趣，感興趣的可以自行youtube這位仁兄的實(shí)驗(yàn)。

當(dāng)使用鍵盤進(jìn)行導(dǎo)航時(shí)，用戶按Tab往往無法很好的掌握"自己在頁面中的所處"，這種動(dòng)效設(shè)計(jì)會(huì)賦予焦點(diǎn)動(dòng)效，能夠讓轉(zhuǎn)換更清晰，讓用戶更能明白自己所處的元素位置

這個(gè)腳本的地址：http://n12v.com/focus-transition/

注意：引導(dǎo)用戶，無論用戶以何種方式導(dǎo)航，都能一清二楚。

結(jié)論

本文例舉的事例不是很多。目的并不是為了展示最新的交互技術(shù)，而是要突出一點(diǎn)：一切交互技術(shù)的更新、變革，目的都是為了更好的用戶體驗(yàn)。以提高用戶體驗(yàn)為出發(fā)點(diǎn)，你的設(shè)計(jì)會(huì)更棒。

我們不能固步自封，應(yīng)該保持探索和實(shí)驗(yàn)。

最后給英文好的童鞋一點(diǎn)福利：http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/ 非常不錯(cuò)的動(dòng)效實(shí)現(xiàn)教程。

本文上篇：《掌握動(dòng)效設(shè)計(jì)！讓你的設(shè)計(jì)富有未來時(shí)尚科技感（上）》

原文地址：smashingmagazine
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量56萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：