隨著CSS3和HTML5的發(fā)展，越來(lái)越多狂拽炫酷叼炸天的動(dòng)效在網(wǎng)頁(yè)設(shè)計(jì)上遍地開(kāi)花，根據(jù)最新的瀏覽器市場(chǎng)份額報(bào)告，IE6的份額已經(jīng)降到了5.21%，這簡(jiǎn)直是一個(gè)喜大普奔的消息，做動(dòng)效可以完全不care低端瀏覽器的時(shí)代已經(jīng)在向我們招手了。俗話說(shuō)得好，顏值不夠，動(dòng)效來(lái)湊，Web動(dòng)效已經(jīng)不僅僅是網(wǎng)頁(yè)設(shè)計(jì)的潤(rùn)滑劑了，它的功能更多的體現(xiàn)在了交互邏輯、視覺(jué)渲染和創(chuàng)新實(shí)踐上，上能引人注目，下能潛移默化。

下面將通過(guò)經(jīng)典的黃金圈法則來(lái)為大家講解我們?cè)贐2B聚合頁(yè)——1688首頁(yè)項(xiàng)目上的動(dòng)效設(shè)計(jì)，主要分為三個(gè)部分，動(dòng)效設(shè)計(jì)的目的、方法和方案。

首先來(lái)一發(fā)大師金句，迪士尼動(dòng)畫大師乃特維克的畢生經(jīng)驗(yàn)濃縮成一句話就是“動(dòng)畫的一切皆在于時(shí)間點(diǎn)和空間幅度”，動(dòng)效設(shè)計(jì)和做動(dòng)畫是一脈相通的，我們不是要做寫實(shí)主義的動(dòng)畫，而是要通過(guò)時(shí)間點(diǎn)和空間幅度的設(shè)置為用戶建立運(yùn)動(dòng)的可信度。

在設(shè)計(jì)開(kāi)發(fā)的過(guò)程中，當(dāng)設(shè)計(jì)師做好了一套靜態(tài)頁(yè)面而且設(shè)想出N種有趣的交互動(dòng)畫，再交付前端進(jìn)行重構(gòu)還原頁(yè)面的時(shí)候，由于無(wú)法提供精確的動(dòng)態(tài)參數(shù)，導(dǎo)致溝通和制作的成本增加，而最終的測(cè)試demo也差強(qiáng)人意。因此，我們?cè)?688首頁(yè)項(xiàng)目的動(dòng)效設(shè)計(jì)中總結(jié)歸納出一套適于設(shè)計(jì)師表達(dá)動(dòng)效概念的方法和流程。

動(dòng)效設(shè)計(jì)的目的

首先，為什么做動(dòng)效，在動(dòng)效設(shè)計(jì)的初期階段，我們需要從業(yè)務(wù)和用戶兩個(gè)方面對(duì)對(duì)項(xiàng)目本身進(jìn)行一個(gè)需求分析，從中得出動(dòng)效在其中的作用，業(yè)務(wù)方面是引導(dǎo)用戶，層級(jí)信息展示，用戶方面是頁(yè)面過(guò)度，改善用戶體驗(yàn)，動(dòng)效設(shè)計(jì)的目的是為了自然流暢的呈現(xiàn)B類電商網(wǎng)站信息，并且，體現(xiàn)出專業(yè)和誠(chéng)信的氣質(zhì)。

動(dòng)效設(shè)計(jì)的方法

接下來(lái)，具體到如何做動(dòng)效，正所謂設(shè)計(jì)來(lái)源于生活，運(yùn)動(dòng)過(guò)程的定義都是基于我們?nèi)粘５纳罱?jīng)驗(yàn)的，為了給B類用戶制造熟悉感，我們?cè)O(shè)置了一個(gè)動(dòng)效設(shè)計(jì)的切入點(diǎn)——B類商務(wù)特色動(dòng)作，并為每一個(gè)動(dòng)作提煉了一個(gè)動(dòng)效方式，包括:

蓋章，狀態(tài)切換不好把控，動(dòng)作銜接有難度；

交換名片，切換動(dòng)作可參考；

掃碼，科技感過(guò)重，應(yīng)用較難；

包裝，3D動(dòng)作幅度大，過(guò)度不自然；

握手，效果單一，可參考；

簽名，這個(gè)效果是無(wú)法應(yīng)用的；

流水線，一個(gè)完整的流水線場(chǎng)景中基本包含頁(yè)面motion的所有動(dòng)作，可提煉易發(fā)散，同時(shí)，我們B類電商承載了從設(shè)計(jì)師、原料商、生產(chǎn)商、批發(fā)商、零售商中各個(gè)環(huán)節(jié)的業(yè)務(wù)，包含底層的支付物流等等，就是一個(gè)宏觀的傳送帶，因此作為B2B業(yè)務(wù)的聚合頁(yè)，我們把傳送帶作為1688首頁(yè)動(dòng)效設(shè)計(jì)的基本動(dòng)作。

確定好了基本動(dòng)作之后，我們需要結(jié)合頁(yè)面的交互框架對(duì)區(qū)塊進(jìn)行一個(gè)層次分級(jí)，設(shè)定節(jié)奏，突出重點(diǎn)。從用戶看到一個(gè)頁(yè)面的瞬間開(kāi)始，如果在展示面積相同的情況下，用戶的注意力被吸引的情況是：動(dòng)態(tài)>顏色>形狀。判斷一個(gè)區(qū)塊是否需要?jiǎng)有е饕谝韵聝牲c(diǎn)：1.交互上，是否包含隱藏信息；2.視覺(jué)上，是否需要輔助渲染。所以，對(duì)于1688首頁(yè)上點(diǎn)擊率最高的搜索和隱藏信息最多的類目、banner將會(huì)是我們?cè)O(shè)計(jì)的重點(diǎn)。

下面我們來(lái)具體分析一下剛才確定的三個(gè)重點(diǎn)區(qū)塊的動(dòng)效設(shè)計(jì)，對(duì)于一般的輸入框，需要用戶在輸入框中產(chǎn)生點(diǎn)擊之后才能開(kāi)始輸入操作，在1688首頁(yè)項(xiàng)目中，我們改進(jìn)了輸入框的方式，設(shè)定了一個(gè)閾值的時(shí)間，讓用戶鼠標(biāo)hover到輸入框后，停留時(shí)間超過(guò)閾值則激活輸入框，用戶可以直接進(jìn)行輸入的操作，減少用戶點(diǎn)擊，讓操作更加流暢。

類目區(qū)域，共分為三級(jí)菜單，我們用次級(jí)物體運(yùn)動(dòng)來(lái)表達(dá)這三級(jí)菜單之間的關(guān)系，附屬性質(zhì)的次級(jí)物體運(yùn)動(dòng)是伴隨著主要物體運(yùn)動(dòng)產(chǎn)生的，次級(jí)運(yùn)動(dòng)相較主要物體運(yùn)動(dòng)有一定的延遲，所以我們?cè)陬惸繀^(qū)域也是通過(guò)運(yùn)動(dòng)的時(shí)間差帶來(lái)邏輯上的關(guān)系，一級(jí)菜單牽引出二級(jí)菜單，二級(jí)菜單牽引出三級(jí)菜單。

banner的視差滾動(dòng)效果以及樓層的分屏加載效果是模擬傳送帶的運(yùn)動(dòng)過(guò)程，我們把主體看成是受力方，傳送帶看成是施力方來(lái)進(jìn)行分析。整個(gè)運(yùn)動(dòng)過(guò)程分為三種狀態(tài)，啟動(dòng)態(tài)、中間態(tài)、收尾態(tài)，根據(jù)牛頓第二定律得到物體分別作勻加速、勻速和勻減速直線運(yùn)動(dòng)。

根據(jù)之前的分析，我們可以繪制出物體運(yùn)動(dòng)的速度-時(shí)間曲線和位移-時(shí)間曲線，大家可以看到下面這條曲線就是由上面這條曲線積分得到的，那么問(wèn)題來(lái)了！為什么動(dòng)效設(shè)計(jì)要畫出這樣的運(yùn)動(dòng)曲線呢？

前端同學(xué)可以運(yùn)用曲線進(jìn)行運(yùn)動(dòng)定義，CSS屬性中的transition和animation可指定緩動(dòng)函數(shù)，但不支持全部函數(shù)，可通過(guò)貝塞爾曲線的繪制達(dá)到自定義的運(yùn)動(dòng)效果，固定貝塞爾曲線中頭、尾兩個(gè)點(diǎn)，通過(guò)這兩個(gè)點(diǎn)引申出的錨點(diǎn)來(lái)確定曲線的弧度，任何運(yùn)動(dòng)曲線都可以拆解為一段段的貝塞爾曲線來(lái)進(jìn)行定義。 貝塞爾曲線繪制函數(shù)：http://cubic-bezier.com/#.63,0,1,1

通過(guò)CSS為運(yùn)動(dòng)曲線專門設(shè)置的VIP屬性來(lái)確定兩個(gè)錨點(diǎn)位置，流暢的動(dòng)效就搞定了

這里再給大家提供一個(gè)更加省事兒的辦法，SCSS，也就是CSS的進(jìn)階版本，還有Javascript可以直接調(diào)用緩動(dòng)函數(shù)庫(kù)，大家或許會(huì)對(duì)下面這種復(fù)雜扭曲的函數(shù)有疑惑，其實(shí)這些是具有反饋效果的運(yùn)動(dòng)曲線。根據(jù)我們之前的分析，由于1688首頁(yè)采用的是內(nèi)容靠前的設(shè)計(jì)策略以及簡(jiǎn)約的視覺(jué)風(fēng)格，所以我們的動(dòng)效動(dòng)作一定是“穩(wěn)、準(zhǔn)、狠”，絕不拖泥帶水，也絕不喧賓奪主，所以這樣比較Q彈的動(dòng)作是我們極力避免的。其實(shí)這些曲線更適合應(yīng)用在無(wú)線端，由于在無(wú)線端用戶直接使用手指來(lái)進(jìn)行操作，當(dāng)我們需要表達(dá)區(qū)塊元素的彈性、紙質(zhì)或者是卡片的材料隱喻時(shí)，用反饋效果來(lái)表達(dá)材料和重力是比較恰當(dāng)?shù)摹?緩動(dòng)函數(shù)速查表：http://easings.net/zh-cn#

動(dòng)效設(shè)計(jì)方案

最終我們會(huì)得到一個(gè)包含時(shí)間點(diǎn)、關(guān)鍵幀、觸發(fā)條件、運(yùn)動(dòng)過(guò)程和空間幅度的完整時(shí)間軸，清晰的顯示出頁(yè)面區(qū)塊元素在每一個(gè)時(shí)間點(diǎn)的樣式和樣式之間的過(guò)度，有了這樣的規(guī)范輸出，麻麻再也不用擔(dān)心我的動(dòng)效還原了。具體動(dòng)效請(qǐng)線上查看：http://www.1688.com/

其實(shí)今天文中提到的技術(shù)方案是有一個(gè)保質(zhì)期的，由于技術(shù)的迭代迅猛，也不知道這個(gè)保質(zhì)期能夠持續(xù)多久，但是按照時(shí)間軸和關(guān)鍵幀的動(dòng)效設(shè)計(jì)思路是不會(huì)過(guò)期的，迪士尼從白雪公主時(shí)期建立的動(dòng)畫設(shè)計(jì)精髓到了今天的超能陸戰(zhàn)隊(duì)上依然成立，大白的每一個(gè)動(dòng)作設(shè)計(jì)從本質(zhì)上來(lái)說(shuō)仍舊是時(shí)間點(diǎn)和空間幅度，所以說(shuō)，作為動(dòng)效設(shè)計(jì)師，只要謹(jǐn)記這一點(diǎn)，一個(gè)好的動(dòng)效方案就成功了一半，另外的一半就是結(jié)合業(yè)務(wù)和用戶的思考了。

最后總結(jié)一下動(dòng)效設(shè)計(jì)的工作流程，通過(guò)對(duì)項(xiàng)目需求和架構(gòu)的綜合分析找到動(dòng)效的切入點(diǎn)，提煉發(fā)散出一個(gè)關(guān)鍵動(dòng)作，結(jié)合前端的實(shí)現(xiàn)框架，確定流程邏輯和運(yùn)動(dòng)，反復(fù)實(shí)踐檢驗(yàn)得到最優(yōu)方案，別忘了為用戶設(shè)置一個(gè)驚喜，就大功告成了！

來(lái)源：阿里巴巴（中國(guó)站）用戶體驗(yàn)設(shè)計(jì)部博客

原文地址：http://www.aliued.cn/2015/03/26/b類電商業(yè)務(wù)的web動(dòng)效實(shí)踐.html