2016-12-7 濤濤
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
@十圓QCee ：以前在團(tuán)隊(duì)內(nèi)部做過(guò)一個(gè)關(guān)于動(dòng)效的分享，當(dāng)時(shí)，是從現(xiàn)實(shí)參照、功能性、品牌，等維度進(jìn)行分析。這次為了更全面的了解界面動(dòng)效，我參考了5W2H分析法。5W2H又稱(chēng)七何分析法，分別是：What、Why、Who、When、Where、How、How much。
什么是界面動(dòng)效？大家對(duì)其的理解大致是，用戶(hù)界面上所有運(yùn)動(dòng)的效果，也可以視其為界面設(shè)計(jì)（UI design）與動(dòng)態(tài)設(shè)計(jì)（motion design）的交集。
具體可以參考下圖：The Disciplines of User Experience Design
作為多學(xué)科交集的界面動(dòng)效，其設(shè)計(jì)者可以交互，也可以是UI，甚至很多時(shí)候是前端開(kāi)發(fā)直接完成的。而我碰到的很多比較完整的設(shè)計(jì)團(tuán)隊(duì)，專(zhuān)門(mén)招的動(dòng)效設(shè)計(jì)師，除了做界面動(dòng)效外，還會(huì)做與產(chǎn)品推廣相關(guān)的motion graphic。
而我們所要講解的界面動(dòng)效（UI motion）區(qū)別于motion graphic 最大的差別，就是界面動(dòng)效需要以用戶(hù)體驗(yàn)與界面設(shè)計(jì)為大前提，來(lái)進(jìn)行動(dòng)效設(shè)計(jì)。所以下面很多觀(guān)點(diǎn)也是基于此來(lái)進(jìn)行說(shuō)明的。
另一個(gè)值得注意的是，界面動(dòng)效在設(shè)計(jì)師設(shè)計(jì)完成后，需要開(kāi)發(fā)實(shí)現(xiàn)才能與用戶(hù)見(jiàn)面。而不像MG動(dòng)畫(huà)，直接由設(shè)計(jì)師輸出。
為什么需要界面動(dòng)效？在我的理解里這是5W里最重要的一點(diǎn)。設(shè)計(jì)交流網(wǎng)站上有很多純粹追求酷炫，或?yàn)榱藙?dòng)起來(lái)而做的動(dòng)效。他們?nèi)绻皇菫榱苏故驹O(shè)計(jì)技術(shù)，或者博得關(guān)注自然無(wú)妨。但是，界面動(dòng)效畢竟要在真實(shí)產(chǎn)品中展示的，其目的自然需要符合產(chǎn)品的整體訴求。這里的目的，我總結(jié)了兩方面：
1，保證產(chǎn)品的流暢體驗(yàn)。產(chǎn)品只要跟用戶(hù)有互動(dòng)，就會(huì)有狀態(tài)的變化，而絕大多數(shù)的變化都是由界面視覺(jué)展示的。這時(shí)，界面上的狀態(tài)變化，是否有過(guò)渡，過(guò)渡的是否流暢，就直接的影響著用戶(hù)的感受。
2.傳遞產(chǎn)品信息。動(dòng)效其實(shí)跟交互，跟UI一樣，都是傳遞產(chǎn)品信息的一種渠道。而這里的信息會(huì)有很多可能，可以是：趨勢(shì)、來(lái)源、去向、結(jié)構(gòu)、情感、屬性，等。運(yùn)用合理的動(dòng)效傳遞信息，能大大增強(qiáng)產(chǎn)品的表現(xiàn)力，同時(shí)也能減少用戶(hù)的理解成本。
這里的Who，不是指的人，而是表示的動(dòng)效的對(duì)象。這個(gè)對(duì)象又是一個(gè)或多個(gè)界面元素組成。單個(gè)元素，大家比較好理解。多個(gè)元素的動(dòng)效，除了表現(xiàn)元素屬性變化以外，還會(huì)將這些元素之前的關(guān)系傳遞出來(lái)：譬如：主次、聯(lián)動(dòng)、并列先后、因果，等。
使用動(dòng)效的時(shí)機(jī)，對(duì)于動(dòng)效來(lái)說(shuō)，是非常基礎(chǔ)的存在。用的好或不好，直接決定用戶(hù)體驗(yàn)的感受。首先是實(shí)時(shí)性，動(dòng)效作為人機(jī)交互反饋過(guò)程中的重要表現(xiàn)方式，必須做到快速，明確的表達(dá)當(dāng)前的狀態(tài)。這就類(lèi)似，你跟人交談，對(duì)方對(duì)你所說(shuō)，完全沒(méi)有回應(yīng)，無(wú)動(dòng)于衷。這會(huì)讓你感到不確定，不認(rèn)同甚至是疏遠(yuǎn)。
其次是動(dòng)效過(guò)載，動(dòng)效與界面視覺(jué)一樣，當(dāng)出現(xiàn)大量過(guò)于復(fù)雜或者重復(fù)的效果時(shí)，都會(huì)讓人視覺(jué)疲勞，抓不住要點(diǎn)。而且動(dòng)態(tài)的畫(huà)面會(huì)讓這種感受更加強(qiáng)烈。
動(dòng)效用在哪里？根據(jù)“WHY”里所說(shuō)，所有的元素只要狀態(tài)發(fā)生變化，就可以用動(dòng)效來(lái)過(guò)渡。那么這些位置都把動(dòng)效用起來(lái)就可以了嗎？然而事實(shí)是，很多時(shí)候動(dòng)效并不是產(chǎn)品設(shè)計(jì)的必選項(xiàng)，其對(duì)可用性幾乎沒(méi)有影響，對(duì)于易用性有一定的影響。所以，資源有限的團(tuán)隊(duì)把動(dòng)效的優(yōu)先級(jí)放到很靠后的位置。那么，有沒(méi)有哪兒的動(dòng)效是必須的？哪兒的動(dòng)效優(yōu)先級(jí)比較高呢？同樣可以從“WHY”中的兩點(diǎn)目的來(lái)入手。
首先，是流暢度。其影響因素主要是，畫(huà)面切換時(shí)變化太大，視覺(jué)的割裂讓用戶(hù)產(chǎn)出跳脫感。所以，當(dāng)狀態(tài)變化前后差異很大時(shí)，如：元素大小、顏色、明暗、位置等，就需要做適當(dāng)?shù)倪^(guò)渡來(lái)改善這種割裂感。
另一個(gè)，是信息傳遞，功能說(shuō)明。動(dòng)效是產(chǎn)品信息傳遞的方式之一，除此還有：文字，圖形、音效，音頻，視頻等。在信息傳遞過(guò)程中，動(dòng)效的是否必要取決于信息本身的重要性，以及動(dòng)效是否比其他傳遞方式更。最常見(jiàn)的例子就是上文多次提到的加載，不管是文字，還是圖形，都很難達(dá)到類(lèi)似“轉(zhuǎn)菊花”動(dòng)效的詮釋效率。
終于來(lái)到了HOW，之前的5W大家大致知道了界面動(dòng)效的目的和使用尺度，都是相對(duì)基礎(chǔ)的。接下來(lái)的HOW會(huì)講它的運(yùn)動(dòng)過(guò)程該如何表現(xiàn)。這個(gè)過(guò)程在設(shè)計(jì)時(shí)，需要具備兩大特征：自然、統(tǒng)一。
先說(shuō)自然，在宏觀(guān)物理世界（人類(lèi)可觀(guān)測(cè)）的所有的運(yùn)動(dòng)，都是符合經(jīng)典物理定律的，它反映的是運(yùn)動(dòng)相關(guān)對(duì)象的質(zhì)量、密度、質(zhì)地、阻力，等。然后這些運(yùn)動(dòng)又是通過(guò)物體狀態(tài)、時(shí)間、緩動(dòng)，等讓我們感受到周?chē)氖澜纭?dòng)效的不自然感受，也就是源自運(yùn)動(dòng)方式并不是人們?nèi)粘Ｉ钪谐Ｓ^(guān)察到的，大家無(wú)法從運(yùn)動(dòng)想象其背后的物體屬性及關(guān)系。
在界面動(dòng)效中來(lái)表現(xiàn)自然，我們主要通過(guò)形變、運(yùn)動(dòng)時(shí)間及緩動(dòng)曲線(xiàn)來(lái)體現(xiàn)。形變表現(xiàn)的是運(yùn)動(dòng)對(duì)象自身的質(zhì)地，而運(yùn)動(dòng)時(shí)間及緩動(dòng)曲線(xiàn)則是表現(xiàn)運(yùn)動(dòng)對(duì)象周?chē)沫h(huán)境。
至于，如何設(shè)置緩動(dòng)曲線(xiàn)與時(shí)間讓動(dòng)效更加自然，可以看下面的一些總結(jié)，或許有些幫助。
1.linear曲線(xiàn)（勻速運(yùn)動(dòng)）除了一些特殊場(chǎng)景如加載、星空背景外，很少被使用。
2.easeIn（先緩后快）使用場(chǎng)景較少，主要在掉落、toWhere的動(dòng)畫(huà)中使用。
3.easeInOut（頭尾緩、中間快）通常在輪轉(zhuǎn)切換的動(dòng)畫(huà)中使用（One Out One In），這類(lèi)動(dòng)畫(huà)的觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象并不是同一個(gè)元素。
4.easeOut（先快后緩）最常見(jiàn)的效果，其觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象往往是同一個(gè)。主要用在展開(kāi)、收起、出現(xiàn)、移動(dòng)等動(dòng)畫(huà)中。當(dāng)不知道用哪個(gè)緩動(dòng)曲線(xiàn)時(shí)，用這個(gè)一般不會(huì)錯(cuò)。
5.曲度主要表現(xiàn)運(yùn)動(dòng)過(guò)程的力的大小，曲度越大，啟示力或阻力越大。
6.回彈則表現(xiàn)的是運(yùn)動(dòng)的劇烈程度及對(duì)象的質(zhì)地。
7.運(yùn)動(dòng)時(shí)間一般都控制在0.3s-0.8s之間，過(guò)長(zhǎng)的時(shí)間會(huì)讓人感覺(jué)拖沓，不自然。
常見(jiàn)的緩動(dòng)曲線(xiàn)類(lèi)型：http://easings.net/zh-cn
自定義緩動(dòng)曲線(xiàn)，可參考：https://matthewlein.com/ceaser/
統(tǒng)一，是界面動(dòng)效需要具備的除自然外另一個(gè)重要指標(biāo)。表現(xiàn)主要包括空間與環(huán)境質(zhì)地這兩方面。同時(shí)，整個(gè)產(chǎn)品設(shè)計(jì)的品牌特性也需要通過(guò)統(tǒng)一才能得以體現(xiàn)。
動(dòng)效的空間表意需要我們構(gòu)建一個(gè)由頁(yè)面與元素組成的虛擬空間關(guān)系，以此來(lái)表達(dá)各元素的結(jié)構(gòu)關(guān)系及功能。
環(huán)境質(zhì)地在動(dòng)效中主要需要通過(guò)緩動(dòng)曲線(xiàn)、元素形變等來(lái)實(shí)現(xiàn)。他們與界面視覺(jué)所表現(xiàn)出的環(huán)境質(zhì)地也需要統(tǒng)一。舉個(gè)簡(jiǎn)單的例子，一個(gè)金屬質(zhì)感的控件，動(dòng)效出現(xiàn)彈性形變，肯定是不合適的。
品牌特性的提煉。好的產(chǎn)品在設(shè)計(jì)之初都會(huì)基于自身的特色、目標(biāo)人群及競(jìng)品等，確立自身的品牌特性。這些特性又需要具備可認(rèn)知、有價(jià)值、特有性、長(zhǎng)期性、規(guī)律性的特征。簡(jiǎn)單說(shuō)就是界面元素、交互行為以及動(dòng)效的符號(hào)化。讓這些符號(hào)在產(chǎn)品中反復(fù)出現(xiàn)，加深用戶(hù)的認(rèn)知記憶。隨著現(xiàn)在技術(shù)的提升，通過(guò)動(dòng)效表達(dá)品牌特質(zhì)的案例月來(lái)越多。
iOS的品牌特性透過(guò)三大設(shè)計(jì)原則來(lái)體現(xiàn)：Deference（遵從）、Clarity（清晰）、Depth（深度）。其中的深度完整的表述是Use Depth to Communicate（有層次的表達(dá)）。這正是在空間表意這個(gè)場(chǎng)景中，iOS找了深度這種方式來(lái)作為其設(shè)計(jì)原則。
Android的品牌特性表現(xiàn)在其的設(shè)計(jì)語(yǔ)言Material design中。其核心觀(guān)點(diǎn)Material is the metaphor（材料的隱喻）所講的就是將不同的物品屬性按照不同的場(chǎng)景賦予到界面元素中，讓用戶(hù)有親切的感受。Andriod挖掘品牌特質(zhì)的場(chǎng)景，恰恰是通過(guò)動(dòng)效來(lái)表現(xiàn)的元素質(zhì)地。
綜上，界面動(dòng)效需要具備自然和統(tǒng)一這兩點(diǎn)。結(jié)合前面所提到的流暢、信息說(shuō)明、對(duì)象關(guān)系、實(shí)時(shí)性、防止過(guò)載、必要性，等幾個(gè)方面，我們可以對(duì)界面動(dòng)效該如何呈現(xiàn)，有大致的了解。而關(guān)于動(dòng)效如何實(shí)現(xiàn)，平時(shí)如何提高動(dòng)效設(shè)計(jì)的能力，動(dòng)效設(shè)計(jì)時(shí)有哪些技巧等，后續(xù)看時(shí)間，可以繼續(xù)補(bǔ)充。
最后，我們要講下界面動(dòng)效的投入產(chǎn)出比，也就是性?xún)r(jià)比的問(wèn)題。在Where我們提到，動(dòng)效并不是產(chǎn)品界面設(shè)計(jì)中必不可少的部分，產(chǎn)品規(guī)劃也往往會(huì)把其放到優(yōu)先級(jí)比較低的位置，最關(guān)鍵的是，你設(shè)計(jì)出來(lái)動(dòng)效，要在用戶(hù)面前展現(xiàn)，實(shí)現(xiàn)其價(jià)值，需要通過(guò)前端編碼這一必不可少的環(huán)節(jié)。很多設(shè)計(jì)同學(xué)會(huì)為此郁悶和糾結(jié)，我們不妨對(duì)比下不同狀況下界面動(dòng)效的投入與產(chǎn)出，看看如何處理更為合理。
我們先看下界面動(dòng)效的成本，這里的成本主要的就是設(shè)計(jì)與開(kāi)發(fā)的時(shí)間。動(dòng)效的難易度與動(dòng)效 使用的多少直接決定了所需的時(shí)間。
難易程度方面，較常見(jiàn)的大小、位移、旋轉(zhuǎn)、透明度等的變化，是最常見(jiàn)的屬性，實(shí)現(xiàn)起來(lái)也是比較方便的。
非常見(jiàn)屬性的動(dòng)畫(huà)類(lèi)型，如：SVG路徑動(dòng)畫(huà)，濾鏡動(dòng)畫(huà)，動(dòng)畫(huà)等，對(duì)于一般開(kāi)發(fā)人員還是有一定成本的。首先，你要將你要的效果準(zhǔn)確的表述給開(kāi)發(fā)人員。同時(shí)，他們還要查閱相關(guān)的案例，來(lái)實(shí)現(xiàn)方案并優(yōu)化性能。這時(shí)作為一個(gè)設(shè)計(jì)者要做的，除了做動(dòng)效demo外，還要將相關(guān)的屬性及變化信息告訴開(kāi)發(fā)人員，最好還能提供類(lèi)似案例的源碼。很多設(shè)計(jì)同學(xué)會(huì)覺(jué)得，沒(méi)有必要，覺(jué)得將動(dòng)效demo做出來(lái)就ok了。但是，在實(shí)際工作中，你做的動(dòng)效，開(kāi)發(fā)需要分解，反編譯，同時(shí)量化后再以其代碼表現(xiàn)出來(lái)。這個(gè)過(guò)程很容易產(chǎn)生彼此認(rèn)知的偏差，然后開(kāi)發(fā)產(chǎn)出的不是你想要的，你是讓他改呢？還是改呢？改呢…所以，動(dòng)畫(huà)信息的量化表述，可以減少很多“我認(rèn)為”的空間，同時(shí)提供案例源碼，可以給開(kāi)發(fā)提供參考，以免被一句“沒(méi)法實(shí)現(xiàn)”給打發(fā)回來(lái)。
關(guān)于動(dòng)效的量，在“where”中有提到，界面動(dòng)效如果做足做全，將是相對(duì)巨大的工作量。面對(duì)這樣的成本，我們要怎樣解決呢？答案是，規(guī)范與組件化。在前期設(shè)計(jì)時(shí)，與產(chǎn)品充分討論，考慮組控件各種使用場(chǎng)景，制定相應(yīng)的規(guī)范；同時(shí)，前端以組件化的方式開(kāi)發(fā)，類(lèi)似的效果只寫(xiě)一次，其他都通過(guò)組件復(fù)用。當(dāng)然，要做到這些，需要各崗位的同學(xué)有很強(qiáng)的專(zhuān)業(yè)能力，同時(shí)團(tuán)隊(duì)的溝通協(xié)作又很順暢。而對(duì)于，資源緊張，業(yè)務(wù)變化大的團(tuán)隊(duì)，產(chǎn)品中動(dòng)效的運(yùn)用就需要收斂在必要的環(huán)節(jié)上了。
說(shuō)完成本，我們看看動(dòng)效的產(chǎn)出價(jià)值。前面說(shuō)了很多，包括：信息表述的功能價(jià)值以及流暢，自然，品牌這些體驗(yàn)價(jià)值，這里就不再贅述。我們說(shuō)說(shuō)動(dòng)效的場(chǎng)景價(jià)值。
首先是業(yè)務(wù)場(chǎng)景。在不同業(yè)務(wù)場(chǎng)景下，對(duì)動(dòng)效的需求是不同的。譬如，一個(gè)后臺(tái)產(chǎn)品和一個(gè)前臺(tái)產(chǎn)品，前臺(tái)產(chǎn)品會(huì)更注重體驗(yàn)的順暢性，后臺(tái)產(chǎn)品更強(qiáng)調(diào)產(chǎn)品的穩(wěn)定性（只是相對(duì)來(lái)說(shuō)，在同質(zhì)化嚴(yán)重的情況下也越來(lái)越強(qiáng)調(diào)體驗(yàn)）。所以前臺(tái)的產(chǎn)品更需要通過(guò)動(dòng)效來(lái)打差異，增加自身的附加值。
同時(shí)，不同功能場(chǎng)景下，動(dòng)效也發(fā)揮著不同程度的價(jià)值。產(chǎn)品介紹頁(yè)，往往會(huì)通過(guò)動(dòng)效強(qiáng)化品牌質(zhì)感，如蘋(píng)果的新品介紹頁(yè)。活動(dòng)頁(yè)，則會(huì)用動(dòng)效來(lái)強(qiáng)化活動(dòng)氛圍。互動(dòng)傳播頁(yè)面，動(dòng)效除了渲染氛圍，同時(shí)還有講故事的作用。因?yàn)樵谶@些頁(yè)面里體驗(yàn)、設(shè)計(jì)、動(dòng)效相對(duì)于產(chǎn)品功能，更能吸引用戶(hù)關(guān)注，價(jià)值也被放的更大。
在不同平臺(tái)場(chǎng)景下，動(dòng)效會(huì)受到不同的技術(shù)限制。最常見(jiàn)的就是通過(guò)Native與H5來(lái)實(shí)現(xiàn)動(dòng)效，性能和展現(xiàn)效果都會(huì)有所差異。一般來(lái)說(shuō)，動(dòng)效在系統(tǒng)層優(yōu)于應(yīng)用層優(yōu)于web層。當(dāng)然這里面的差距會(huì)隨時(shí)間越來(lái)越小，現(xiàn)在很多簡(jiǎn)單的動(dòng)效已經(jīng)可以做到無(wú)差異了。
最后，將上述的相關(guān)內(nèi)容整理了一張圖片，如果不足之處歡迎大家補(bǔ)充。
原文地址：zhuanlan.zhihu
藍(lán)藍(lán)設(shè)計(jì)( www.ywne.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ywne.cn