轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   yvirxh.cn  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

為何有的產(chǎn)品、服務(wù)特別受歡迎？

是因為這些產(chǎn)品、服務(wù)在內(nèi)容、外觀、設(shè)計、可用性、功能等方面具有無可匹敵的優(yōu)勢。其實，所有的這些層面都屬于交互設(shè)計的細(xì)節(jié)，其中一個關(guān)鍵點便是動效。

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

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

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

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

動效滾動

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

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

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

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

再來和這種設(shè)計比較一下：

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

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

狀態(tài)切換

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

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

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

下拉填表、評論動效

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

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

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

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

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

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