超實(shí)用的動(dòng)效設(shè)計(jì)入門小手冊(cè)

　　最近幾年UI設(shè)計(jì)領(lǐng)域最大的變化便是越來(lái)越強(qiáng)調(diào)用戶體驗(yàn)設(shè)計(jì)，而在Web或者App中使用動(dòng)效也就成了一大趨勢(shì)。這種趨勢(shì)是如此強(qiáng)烈，以至于我看到越來(lái)越多的應(yīng)用中所使用的那些動(dòng)效已經(jīng)不再是為了提升用戶體驗(yàn)，而更多是為了強(qiáng)調(diào)動(dòng)效本身了。

　　設(shè)計(jì)師 Pasquale D’Silva 在 Web Direction South 大會(huì)上曾這樣說(shuō)過(guò)：好的動(dòng)效應(yīng)該是隱形的。(作為用戶的)你不應(yīng)該注意到你正在看一個(gè)動(dòng)效。

　　這是一個(gè)非常棒的動(dòng)效設(shè)計(jì)建議，甚至可以說(shuō)是原則。作為這些Web或者App的設(shè)計(jì)和開(kāi)發(fā)者，在我們?cè)O(shè)計(jì)和開(kāi)發(fā)動(dòng)效之前，首先應(yīng)該明確什么才是正確的動(dòng)效：動(dòng)效應(yīng)該是以提高可用性為前提，并且以令人覺(jué)得自然，含蓄的方式提供有效用戶反饋的一種機(jī)制。

　　了解動(dòng)效

　　優(yōu)秀的動(dòng)效往往會(huì)被無(wú)視，而糟糕的動(dòng)效卻迫使用戶去注意界面，而非內(nèi)容本身。用戶都是帶著明確的目的來(lái)使用你的網(wǎng)站或者App的：買一件東西、學(xué)習(xí)新的知識(shí)、發(fā)現(xiàn)新音樂(lè)、或者僅僅是尋找最近的吃飯地點(diǎn)。他們不會(huì)只為了把玩你精心設(shè)計(jì)的界面而來(lái)，實(shí)際上，用戶根本不在意界面設(shè)計(jì)而只關(guān)心能否在你這兒方便地達(dá)到他們的目的。優(yōu)秀的動(dòng)效應(yīng)該對(duì)用戶的點(diǎn)擊或手勢(shì)給予恰當(dāng)?shù)姆答?，使用戶能夠非常方便地按照自己的意愿去掌控?yīng)用的行為，從而增強(qiáng)應(yīng)用的使用體驗(yàn)。

　　基本動(dòng)效

　　我們平時(shí)在Web或App中看到的動(dòng)效其實(shí)都是由一些最基本的動(dòng)效組合而成的，這些基本動(dòng)效包括：移動(dòng)(Translate)，旋轉(zhuǎn)(Rotate)，縮放(Scale)。在一些動(dòng)效設(shè)計(jì)工具的幫助下，一般你只需要設(shè)置它的起點(diǎn)和終點(diǎn)，并告訴它你想要什么類型的動(dòng)效，設(shè)計(jì)工具便會(huì)根據(jù)你的這些設(shè)置去渲染出整個(gè)動(dòng)效。

　　移動(dòng) — Translate

　　移動(dòng)，顧名思義就是將一個(gè)物體從位置A移動(dòng)到位置B，這是最常見(jiàn)的一種動(dòng)效，像滑動(dòng)，彈跳，振動(dòng)這些動(dòng)效中都能看到。

　　旋轉(zhuǎn) – Rotate 通過(guò)改變物體的角度，產(chǎn)生旋轉(zhuǎn)的效果。在頁(yè)面加載，或點(diǎn)擊某個(gè)按鈕觸發(fā)一個(gè)較長(zhǎng)時(shí)間操作時(shí)，經(jīng)常使用到的Loading效果或一些菜單圖標(biāo)的變換都會(huì)使用旋轉(zhuǎn)動(dòng)效。

　　縮放 – Scale 縮放在App應(yīng)用中被廣泛地使用，如點(diǎn)擊一個(gè)App圖標(biāo)，打開(kāi)App全屏界面時(shí)，以及通過(guò)點(diǎn)擊一張縮略圖查看具體內(nèi)容時(shí)。

　　動(dòng)效曲線自然界大部分物體的運(yùn)動(dòng)都不是線性的，而是按照物理規(guī)律呈曲線性運(yùn)動(dòng)的。通俗點(diǎn)來(lái)說(shuō)，就是動(dòng)效的響應(yīng)變化與執(zhí)行動(dòng)效的物體本身質(zhì)量有關(guān)。優(yōu)秀的動(dòng)效應(yīng)該反映真實(shí)的物理現(xiàn)象，如果你想表現(xiàn)的對(duì)象是一個(gè)沉甸甸的物體，那么他們的起始動(dòng)畫(huà)響應(yīng)/參數(shù)的變化會(huì)比較慢。反之，物體如果是輕巧的，那么其起始動(dòng)畫(huà)響應(yīng)/參數(shù)的變化會(huì)比較快。

　　你也可以在easings.net中查看所有的動(dòng)效曲線，獲取它們對(duì)應(yīng)的CSS，JS代碼，并在你的項(xiàng)目中使用。

　　屬性變換

　　屬性變換是非常常見(jiàn)的一種動(dòng)效。比如可以通過(guò)改變透明度來(lái)實(shí)現(xiàn)淡入/淡出效果等。同時(shí)你還可以改變對(duì)象的大小，顏色，位置等幾乎所有屬性來(lái)體現(xiàn)動(dòng)畫(huà)效果。

　　注意下面這個(gè)動(dòng)效的底部的菜單欄，當(dāng)他的高度減小的同時(shí)，他的透明度也相應(yīng)地降低，從而產(chǎn)生出一種折疊的效果。

　　組合動(dòng)效

　　在大多數(shù)場(chǎng)景中，我們需要同時(shí)使用2種以上的動(dòng)效，將它們有效地組合在一起，以達(dá)到更好的效果。另外你仍需要讓你的動(dòng)效遵循普遍的物理規(guī)律，這樣才能使它們更容易被用戶接受。

　　動(dòng)效不應(yīng)該太慢

　　我認(rèn)為理想的動(dòng)效時(shí)長(zhǎng)應(yīng)該在0.5-1秒之間,當(dāng)你設(shè)計(jì)淡入淡出，滑動(dòng)，縮放等動(dòng)效時(shí)都應(yīng)將時(shí)長(zhǎng)控制在這個(gè)范圍內(nèi)。如果動(dòng)效時(shí)長(zhǎng)設(shè)置得太短，會(huì)讓人看不清效果，甚至更糟的是給用戶造成壓迫感。反過(guò)來(lái)如果動(dòng)效持續(xù)時(shí)間過(guò)長(zhǎng)，又會(huì)使人感覺(jué)無(wú)聊，特別是當(dāng)用戶在使用App的過(guò)程中，反復(fù)看到同一動(dòng)效的時(shí)候。

　　動(dòng)效的開(kāi)發(fā)

　　很多設(shè)計(jì)人員往往會(huì)遇到這樣的困擾，他們看到的最終產(chǎn)品中出現(xiàn)的動(dòng)效與他們?cè)谠O(shè)計(jì)階段定義的有很大出入。那是因?yàn)椋m然作為設(shè)計(jì)師，可以定義非?？犰诺膭?dòng)效，但由于技術(shù)或成本上的限制，有些動(dòng)效往往由于開(kāi)發(fā)代價(jià)過(guò)高而被擯棄了。所以作為設(shè)計(jì)師，你可能需要同時(shí)理解如何設(shè)計(jì)動(dòng)效，以及動(dòng)效背后所使用的技術(shù)。這會(huì)幫助我們?cè)谡麄€(gè)項(xiàng)目的設(shè)計(jì)階段就能作出明智的取舍，從而節(jié)省大量的開(kāi)發(fā)成本。

　　動(dòng)效制作工具

　　目前有一些非常流行的動(dòng)效設(shè)計(jì)工具，它們基于不同的技術(shù)，也有各自的特點(diǎn)。你可以從中選擇你最喜歡的來(lái)使用。

　　Framer

　　Framer是一個(gè)基于JavaScript的原型設(shè)計(jì)工具,并且它是一個(gè)開(kāi)源項(xiàng)目。Framer有以下一些特點(diǎn)：支持手勢(shì)、動(dòng)效、狀態(tài)、基于網(wǎng)頁(yè)、容易實(shí)現(xiàn)、可在任何設(shè)備上瀏覽。如果你很精通Javascript，那么這個(gè)工具應(yīng)該會(huì)適合你。

　　Principle Principle 可能是所有動(dòng)效工具中最簡(jiǎn)單易用的。你只需要設(shè)置屏幕A和屏幕B，Principle就能自動(dòng)地產(chǎn)生這兩個(gè)屏幕之間的過(guò)渡動(dòng)效。當(dāng)然，你也可以通過(guò)設(shè)置不同的時(shí)間和動(dòng)效曲線，來(lái)調(diào)整動(dòng)效。Principle是一個(gè)桌面應(yīng)用，它的界面和Sketch非常像，另外，你可以方便地將Sketch中的設(shè)計(jì)直接拷貝到Principle中使用。

　　Flinto Flinto 和Principle一樣，也非常簡(jiǎn)單易用。特別的是，它提供了一個(gè)[Skech插件] ，能夠直接將你Sketch中的Artbords和3D transform導(dǎo)出到Flinto中。

　　Pixate Pixate 是一個(gè)Web App，能夠幫助你快速地制作原型。與Flinto或者M(jìn)arvel不同，你可以區(qū)分層(layers)和嵌入的交互，如拖拽，點(diǎn)擊，雙擊等。制作出來(lái)的原型保存在Web上，你可以使用一個(gè)iOS app來(lái)預(yù)覽原型的效果。

　　Origami Origami是一款免費(fèi)的Quartz Composer的插件，Origami使QC的界面變得更加友好，更加適合進(jìn)行移動(dòng)App的界面設(shè)計(jì)。從2013年5月開(kāi)始，F(xiàn)acebook的產(chǎn)品設(shè)計(jì)師們就開(kāi)始開(kāi)發(fā)這款QC插件。Origami的開(kāi)發(fā)過(guò)程與Paper一同進(jìn)行，隨著Paper的功能越來(lái)越復(fù)雜，Origami也變得越來(lái)越強(qiáng)大，Paper上的每個(gè)動(dòng)畫(huà)效果都是由設(shè)計(jì)師首先在Origami上制作成型后，再由iOS工程師編寫的。

　　After Effects

　　After Effect簡(jiǎn)稱稱AE，是adobe公司開(kāi)發(fā)的一個(gè)動(dòng)效設(shè)計(jì)軟件。對(duì)于那些不碰代碼的純?cè)O(shè)計(jì)師來(lái)說(shuō)是非常理想的動(dòng)畫(huà)設(shè)計(jì)工具。在Dribbble上有很多使用AE制作的優(yōu)秀動(dòng)效作品。相比其他工具，AE是一個(gè)比較傳統(tǒng)的工具，使用禎和層來(lái)定義動(dòng)畫(huà)。作為Adobe的產(chǎn)品，它的很多功能和Photoshop很像， 但針對(duì)動(dòng)效有很多附加功能。