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