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