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