為何有的產(chǎn)品、服務(wù)特別受歡迎？
是因?yàn)檫@些產(chǎn)品、服務(wù)在內(nèi)容、外觀、設(shè)計(jì)、可用性、功能等方面具有無(wú)可匹敵的優(yōu)勢(shì)。其實(shí)，所有的這些層面都屬于交互設(shè)計(jì)的細(xì)節(jié)，其中一個(gè)關(guān)鍵點(diǎn)便是動(dòng)效。

本文將介紹幾種常見(jiàn)的動(dòng)效模式（用GIF圖演示），分析一下為何這些簡(jiǎn)單的設(shè)計(jì)模式在實(shí)際應(yīng)用中能夠奏效。
當(dāng)我們?cè)O(shè)計(jì)數(shù)碼產(chǎn)品時(shí)，我們一般用PS或者Sketch這種設(shè)計(jì)軟件來(lái)進(jìn)行設(shè)計(jì)。

了解設(shè)計(jì)的人明白這樣一個(gè)道理：設(shè)計(jì)不光只是視覺(jué)表達(dá)。設(shè)計(jì)也不應(yīng)該是靜態(tài)的。喬布斯說(shuō)過(guò)這樣一句話：

設(shè)計(jì)并非外觀怎樣，感覺(jué)如何。核心在于，它是怎樣工作的。

影響用戶(hù)對(duì)產(chǎn)品的體驗(yàn)與印象的因素有很多，交互在其中扮演著關(guān)鍵性角色。我們不能再簡(jiǎn)單的把用戶(hù)界面當(dāng)成一種靜態(tài)界面而設(shè)計(jì)。我們應(yīng)該順應(yīng)互聯(lián)網(wǎng)動(dòng)態(tài)的本質(zhì)，打造更加動(dòng)態(tài)的圖形用戶(hù)界面。
好了，廢話不多說(shuō)，我們來(lái)看看，什么叫做更智能的交互、更精致的動(dòng)效?？纯催@些設(shè)計(jì)模式是怎樣提高用戶(hù)體驗(yàn)的。

動(dòng)效滾動(dòng)

超鏈接是互聯(lián)網(wǎng)的雙刃劍，當(dāng)你點(diǎn)擊鏈接時(shí)，你可以在互聯(lián)網(wǎng)中任意遨游，隨心所欲。

可是過(guò)度自由好嗎？不見(jiàn)得，比方說(shuō)你在瀏覽一款精美的產(chǎn)品頁(yè)面，然后你點(diǎn)擊了一下頁(yè)面中的鏈接，突然導(dǎo)入了一款令人毛骨悚然的木偶商店頁(yè)面。這就是超鏈接的弊端，有時(shí)候的頁(yè)面轉(zhuǎn)換太突然，缺少過(guò)度，讓用戶(hù)一時(shí)不能接受。

我們可以看看書(shū)籍的用戶(hù)體驗(yàn)：故事發(fā)展一般是線性的，每一章都和上文有所聯(lián)系。想要閱讀第二章，必須先閱讀第一章，以便大致了解書(shū)中的環(huán)境與人物關(guān)系。如果你"跳章"閱讀，不可避免的會(huì)錯(cuò)過(guò)一些關(guān)鍵劇情，因此無(wú)法理解有些內(nèi)容。

在網(wǎng)頁(yè)設(shè)計(jì)中，同理，尤其是那種內(nèi)容比較大，頁(yè)面比較長(zhǎng)得網(wǎng)站，這種情況經(jīng)常無(wú)意識(shí)的發(fā)生：用戶(hù)會(huì)錯(cuò)過(guò)之前的某些關(guān)鍵內(nèi)容，而且又缺少提示，因此很難理解當(dāng)前內(nèi)容，通過(guò)添加動(dòng)效滾動(dòng)，可以修正這一問(wèn)題。

再來(lái)和這種設(shè)計(jì)比較一下：

第一種動(dòng)效，錨鏈接的"名稱(chēng)"會(huì)有從左向右移動(dòng)的行為。這樣進(jìn)行"跳章"時(shí)，用戶(hù)便能做好心理準(zhǔn)備。因?yàn)閺?Home"移動(dòng)到了"Contact"，用戶(hù)便能了解，從主頁(yè)轉(zhuǎn)到了聯(lián)系方式頁(yè)面。而如果突然轉(zhuǎn)變，毫無(wú)過(guò)度的動(dòng)效，用戶(hù)很難理解發(fā)生了什么。

注意：界面的突然改變會(huì)讓用戶(hù)難以適應(yīng)，千萬(wàn)不要這么設(shè)計(jì)這不符合用戶(hù)的預(yù)期。要滿(mǎn)足用戶(hù)的預(yù)期，同時(shí)合理的引導(dǎo)。

狀態(tài)切換

正如上面提到的那樣，突然改變，毫無(wú)過(guò)渡，這樣的局面用戶(hù)是無(wú)法接受的，我們需要讓界面動(dòng)態(tài)一點(diǎn)，達(dá)成圓滑的過(guò)度。動(dòng)效能夠幫助用戶(hù)理解界面之間的轉(zhuǎn)換。我們可以字面的想一下，突然往往不自然，因?yàn)樘炝?，而且現(xiàn)實(shí)世界中萬(wàn)物的運(yùn)轉(zhuǎn)也都是緩慢、協(xié)調(diào)、自然的，很少有突兀的改變。我們?cè)賮?lái)看看切換菜單。這個(gè)"加號(hào)"有效的引起了行為召喚，用戶(hù)會(huì)忍不住點(diǎn)擊，點(diǎn)擊后便側(cè)拉出另外一個(gè)界面。這時(shí)加號(hào)會(huì)旋轉(zhuǎn)45度，變成"叉號(hào)"，再點(diǎn)一下便回到原頁(yè)面。很協(xié)調(diào)的設(shè)計(jì)，也符合用戶(hù)顯示生活中的預(yù)期：加號(hào)是添加，叉號(hào)是刪除。

這種簡(jiǎn)單的過(guò)度，需要圖標(biāo)承載更多的意義。設(shè)計(jì)師首先需要掌握用戶(hù)心理，知曉用戶(hù)的預(yù)期，然后選擇合適的圖標(biāo)，在細(xì)節(jié)上狠下功夫。結(jié)果呢？看看上面這個(gè)小動(dòng)圖，這種切換模式非常的友好，而且讓用戶(hù)對(duì)信息層級(jí)有了更深刻的認(rèn)識(shí)。同時(shí)，圖標(biāo)能夠有效的引導(dǎo)用戶(hù)操作。

注意：你的頁(yè)面元素在各個(gè)狀態(tài)下都要易于理解。

下拉填表、評(píng)論動(dòng)效

很多網(wǎng)站的填表和評(píng)論設(shè)計(jì)的并不好。為何？因?yàn)橛袝r(shí)候你只想評(píng)論，結(jié)果跳轉(zhuǎn)至其他頁(yè)面，填寫(xiě)了一大堆不相干的個(gè)人信息后才能評(píng)論。非常煩人。

為了鼓勵(lì)用戶(hù)評(píng)論，增加網(wǎng)站的互動(dòng)性，我們可以設(shè)計(jì)一些下拉評(píng)論動(dòng)效。這樣用戶(hù)不用切換界面，而且只需填寫(xiě)最基本的個(gè)人信息即可?？梢钥纯聪旅孢@個(gè)New York Times的網(wǎng)站：

但其實(shí)我們可以更進(jìn)一步，這種設(shè)計(jì)還有個(gè)不便之處：用戶(hù)若想評(píng)論，還需要拉到頁(yè)面最低端進(jìn)行評(píng)論。應(yīng)該滿(mǎn)足用戶(hù)隨時(shí)隨地評(píng)論的需求?？赏ㄟ^(guò)下面的動(dòng)效實(shí)現(xiàn)。

可以把這個(gè)評(píng)論域固定在頂部，然后根據(jù)用戶(hù)需求，選擇是否動(dòng)效顯示。

這樣，就能減少評(píng)論時(shí)的界面繁雜感，讓人感覺(jué)你是誠(chéng)心誠(chéng)意邀請(qǐng)用戶(hù)評(píng)論。而第一種方法需要拉到頁(yè)底，加之慣例是由上到下自動(dòng)載入最新評(píng)論，如果一篇文章的評(píng)論很多，用戶(hù)若想評(píng)論，必定要經(jīng)歷痛苦的翻頁(yè)。這就是這個(gè)辦法解決的問(wèn)題。

注意： 有些UI組件可以簡(jiǎn)化成最基本的形式，當(dāng)用戶(hù)需要時(shí)通過(guò)動(dòng)效來(lái)進(jìn)行拓展。

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

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

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量56萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(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)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：