隨著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)在向我們招手了。俗話(huà)說(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)畫(huà)大師乃特維克的畢生經(jīng)驗(yàn)濃縮成一句話(huà)就是“動(dòng)畫(huà)的一切皆在于時(shí)間點(diǎn)和空間幅度”，動(dòng)效設(shè)計(jì)和做動(dòng)畫(huà)是一脈相通的，我們不是要做寫(xiě)實(shí)主義的動(dòng)畫(huà)，而是要通過(guò)時(shí)間點(diǎn)和空間幅度的設(shè)置為用戶(hù)建立運(yùn)動(dòng)的可信度。
在設(shè)計(jì)開(kāi)發(fā)的過(guò)程中，當(dāng)設(shè)計(jì)師做好了一套靜態(tài)頁(yè)面而且設(shè)想出N種有趣的交互動(dòng)畫(huà)，再交付前端進(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)效，在動(dòng)效設(shè)計(jì)的初期階段，我們需要從業(yè)務(wù)和用戶(hù)兩個(gè)方面對(duì)對(duì)項(xiàng)目本身進(jìn)行一個(gè)需求分析，從中得出動(dòng)效在其中的作用，業(yè)務(wù)方面是引導(dǎo)用戶(hù)，層級(jí)信息展示，用戶(hù)方面是頁(yè)面過(guò)度，改善用戶(hù)體驗(yàn)，動(dòng)效設(shè)計(jì)的目的是為了自然流暢的呈現(xiàn)B類(lèi)電商網(wǎng)站信息，并且，體現(xiàn)出專(zhuān)業(yè)和誠(chéng)信的氣質(zhì)。
接下來(lái)，具體到如何做動(dòng)效，正所謂設(shè)計(jì)來(lái)源于生活，運(yùn)動(dòng)過(guò)程的定義都是基于我們?nèi)粘５纳罱?jīng)驗(yàn)的，為了給B類(lèi)用戶(hù)制造熟悉感，我們?cè)O(shè)置了一個(gè)動(dòng)效設(shè)計(jì)的切入點(diǎn)——B類(lèi)商務(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)用的；
流水線(xiàn)，一個(gè)完整的流水線(xiàn)場(chǎng)景中基本包含頁(yè)面motion的所有動(dòng)作，可提煉易發(fā)散，同時(shí)，我們B類(lèi)電商承載了從設(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)。從用戶(hù)看到一個(gè)頁(yè)面的瞬間開(kāi)始，如果在展示面積相同的情況下，用戶(hù)的注意力被吸引的情況是：動(dòng)態(tài)>顏色>形狀。判斷一個(gè)區(qū)塊是否需要?jiǎng)有е饕谝韵聝牲c(diǎn)：
1.交互上，是否包含隱藏信息；
2.視覺(jué)上，是否需要輔助渲染。
所以，對(duì)于1688首頁(yè)上點(diǎn)擊率最高的搜索和隱藏信息最多的類(lèi)目、banner將會(huì)是我們?cè)O(shè)計(jì)的重點(diǎn)。
下面我們來(lái)具體分析一下剛才確定的三個(gè)重點(diǎn)區(qū)塊的動(dòng)效設(shè)計(jì)，對(duì)于一般的輸入框，需要用戶(hù)在輸入框中產(chǎn)生點(diǎn)擊之后才能開(kāi)始輸入操作，在1688首頁(yè)項(xiàng)目中，我們改進(jìn)了輸入框的方式，設(shè)定了一個(gè)閾值的時(shí)間，讓用戶(hù)鼠標(biāo)hover到輸入框后，停留時(shí)間超過(guò)閾值則激活輸入框，用戶(hù)可以直接進(jìn)行輸入的操作，減少用戶(hù)點(diǎn)擊，讓操作更加流暢。