1.2 認識UI動效

隨著通信科技的發展，如今的手機硬件性能已經遠非昨日能比。與此同時，用戶對于操作體驗的要求和審美度也有很大的提高。在日常生活中，我們經常會聽見有人說某某產品體驗不好。殊不知現在的用戶對于設計的需求已經越來越高。因此面臨如此情況，設計師們除了要設計出美觀易用的產品界面之外，還需要考慮到情感化設計的因素，如何增加用戶在體驗產品時的愉悅度，如何讓用戶覺得有趣。不得不說的是，當動態化UI第一次出現在我眼前的時候，一次簡單的動作所觸發的動態效果，到如今我還記憶猶新，當時的體驗真是讓我激動不已。

下面，讓我們一起來認識一下UI動效。

1.2.1 孕育中的UI動效

1. 什么是UI動效

對于UI動效來說，至今沒有人給過其一個確切的定義。UI動效設計是由互聯網和動畫行業相結合而新生出來的崗位，這里我結合自己的理解和經驗，對UI動效設計的概念做一個簡單的定義。

在我看來，UI動效設計是指在人機交互過程中，基于一定硬件性能的前提下，增強人機互動體驗的愉悅度和信息層級的清晰度，同時有一定規范屬性和功能屬性的動態可視化設計語言體系。

2. UI動效，設計師新的發力點

從PC時代開始，我們就經常會在形形色色的網站上看到一些非常新穎和酷炫的頁面動畫效果。而當PC時代最初發展到移動互聯網時代的那一段日子里，越來越多的操作體驗轉移到了手機上，但是隨之帶給用戶的驚喜也一下子少了許多。沒有HOVER的動態效果（即鼠標劃過某一個頁面元素時所產生的動態效果），沒有華麗的Flash動畫效果，整體比較低端的手機硬件性能，其實能做的非常有限。

而隨著科技的不斷發展，移動設備的多樣化和移動設備硬件性能的不斷提升，手機消費的門檻也越來越低，用戶對于手機和互聯網服務的要求不僅僅是找資料、聊天、打電話或發短信了，這也為動效技術的發展提供了更多的可能性，甚至是讓其產生了一種迫切感。尤其是所謂的“全球扁平化”風格盛行的今天，人們對于UI設計已經沒有那么多的光影和質感上的要求，而又有了新的要求。

如果我們把最初的網頁設計師比作互聯網發展的1.0版本，那么擬物化時代的設計師就是互聯網發展的2.0版本，而現在的UI動效設計設計師可以稱為互聯網發展的3.0版本。本書編寫的目的，就是要幫助大家提升你的“版本”。不管你是要做一個動態的DEMO，還是一個互聯網營銷的動畫方案，動態呈現這種表現形式似乎已經在無形之中成為互聯網設計師必備的一個技能。

既然我們生活在這樣一個動效爆炸的時代，那么就應該多學習動效，同時用動效設計來“武裝”自己。這樣做的目的既是能讓自己的設計更加新穎化、多樣化以及更加符合用戶的需求，同時也是給自己創造更多的職業機會。據我所知，目前在許多互聯網公司已經產生了“動效”這個崗位，且在實際生活中我們稱其為多媒體（動效）設計師，如圖1-17所示。

總之，無論你是否接受，互聯網設計師的“3.0時代”已經到來，而且已經成為設計師新的發力點。同時隨著時代的發展，其對于設計師動效綜合設計能力的需求也會越來越高，到那時候，孕育之后的UI動效設計行業將會全面爆發。

1.2.2 UI動效行業的現狀與發展

1. 職場現狀

大約從2005年，用戶體驗行業將網頁設計師的工作拆分為視覺設計師和交互設計師，如此拆分的主要原因也是行業本身的需求變化，使其對于崗位的職責有了更多的細分。而對于動效設計來說，其發展同樣是這個規律。隨著行業的發展和衍生，對于移動互聯網的UI動效、H5營銷動畫和品牌動態化演繹等需求也逐漸旺盛，并且現在有許多公司甚至是中小型公司已經陸陸續續開始重點招聘起了動效設計師（或稱為多媒體設計師），因此在不久的將來，我們極有可能經歷新一輪的行業升級。

就互聯網行業下的動效設計師目前的職業現狀，我結合自身的經驗和一些設計師朋友的反饋來給大家做一些分析。

（1）崗位需求量比較大

A君，男，廣東某互聯網公司資深頁面開發設計師（實際上就是重構設計師），主要任務是配合營銷方案輸出動畫，本身有超過7年以上的視覺設計經驗，同時有3年以上的H5項目經驗，屬于半路轉型的設計師典型，但設計經驗比較豐富。據他反饋，目前由于其公司主打的是娛樂內容類產品，加上原本在版本規劃中固定的運營需求，現在對于H5的內容需求量很大，經常會出現加班的情況。

（2）投遞簡歷回復比較快

劉君，女，3年以上工作經驗，在校期間制作過動畫連續劇的項目，屬于專業成績較出色的文藝女青年。以前在老家的小公司工作了兩年，后來決定來深圳。據她反饋，自己在整理好自己的作品集和簡歷并且在招聘網上投遞之后，讓她意外的是傳統的影視動畫公司打來的面試邀約電話少之又少，而互聯網相關的廣告營銷、中型的互聯網公司以及部分制作游戲的小團隊發來的面試邀請反倒比較多，且普遍看中的是她在動畫片項目有著后期的經驗。

（3）相對擁有單一技能的設計師待遇會稍好一些

晏君，男，純視覺設計師出身，工作經驗4年以上。幾個月前剛去杭州任職，先后從事過品牌、創意和傳統平面設計。他第一次接觸After Effects其實是因為看到我在某網站收集的動態DEMO（屬于是自學的那種），然后開始學習，當時他的薪資在深圳大約是9500元，后來有段時間和我聯系比較頻繁，主要是希望能盡快地學會用After Effects制作一些動效案例，目前他的薪資基本保持在14000元左右。據他反饋，他在同等資歷的設計師中相比那些只會平面而不會動效的設計師來說待遇會稍好一些。

2. 職業發展方向

根據目前行業大部分的情況來看，動效設計師基本上存在著以下幾種職業發展模型。

（1）品牌方向

在設計工作中，一部分設計師在成為動效設計師之后，會參與到品牌的規劃中，幫助品牌團隊輸出符合品牌調性的動畫方案（終端媒介不限）。進而，他們還會負責對外包或者合作方提交的動畫方案進行質量的全盤把控、團隊動效設計師崗位的新人招聘工作等。再往后，也許會作為項目的主要負責人，同時基于該產品的品牌調性基礎建立屬于品牌特有的動畫規范。

（2）復合型方向

還有一部分的全棧型人才在互聯網行業中會比較容易出現。現在的動效設計師大多是從單一屬性的設計師轉型而來，而且互聯網公司中能寫HTML且又能做設計的人本來就不少。所以，隨著時間的推移，對于曾經寫過HTML或者HTML5的視覺設計師來說，對于3個維度的認知都會越來越深刻（因為是每天在手上重復的事情），同時勢必也會有越來越多的人趨于成為全棧型的復合型人才。

（3）管理方向

就像是大公司所推崇的“管理線”和“專家線”那樣，當有人逐漸成為全棧型人才的時候，一定就會有管理型的人才出現。管理型人才會借助自己的真實經歷和項目經驗，對于項目中的人力和風險控制以及各種因素逐漸形成一套特定的方法論，能夠比較好地管理動畫相關的項目，而且能保證輸出質量。當然，這種人不一定是團隊中業務能力最強的，但絕對是最懂得把握人與事的人。

3. 關于自我的定位

任何可能達到的成功，大多數時候都是基于自己的興趣點。而對于偏重感性化的設計師行業來說，更是如此，所以找準自我的定位也一定是要先弄明白自己的興趣點在哪里。當然這并不是說一定就要做UI，或者一定就要畫原畫。

UI動效設計師是相對復合型的一個設計崗位（因為必要時，UI動效設計師在了解和掌握自身技能的同時，可能還需要了解一些簡單的代碼基礎知識和相對應的協同意識），以體驗設計為出發點，以優化提升體驗設計為依歸。在實際的工作過程中，盡管大多數人還是以“美工”來看待你，但是并不意味你僅僅只是做“美工”的活，而從嚴格意義上來講，你的自我心態則決定你對自我的定位。

對于任何一個領域和公司的動效設計師來說，首先要明確自身的崗位職責與特殊性。作為動效設計師，最應該做的就是深挖自己現有的領域，因為對于目前這個在全行業都剛剛興起的領域來說，待挖掘的和有價值的內容實在是太多了。在日常生活中我們專注任何一塊，都有可能構建出一個行業里比較新的概念或者是方法論，然后運用到自己的設計中。

4. 未來的發展

作為UI行業近幾年逐漸衍生出來的一個全新的領域，UI動效設計對于用戶體驗的提升有著非常好的指導作用。如果現在你想要成為動效設計師或者已經是一名動效設計師，那么恭喜你，至少我認為在幾年后你很可能將會成為UI行業一個重要領域的從業人員。

互聯網行業一直在探討的一個話題是：互聯網的下一發展階段會是什么樣的？是整合目前全世界都在提到的全息領域——虛擬現實（VR）、增強現實（AR）和混合現實（MR），還是和人工智能（AI）來一次親密接觸，又或者是兩者都有？關于這個問題，從每天的科技類新聞中，我們就能看到一些發展的趨勢。但是，不管互聯網進入什么樣的時代，不管科技發展到什么程度，即便有一天我們不再需要屏幕作為交互的介質，但只要是還與“人”這個個體產生著強關聯性的話，交互的行為就會一直存在。

動效作為信息化視覺體系中的一個重要組成部分，有趣生動的視覺感受只是一個最起碼的要求。從賦能的角度看，UI動效在將來極有可能會隨著科技的發展一同跳出手機屏幕，活躍在真實的世界中。在這里，我們不妨假設一下未來可能出現的場景——鍵盤可能消失，你只需要“一聲令下”，就能實現你想要完成的命令操作，全息的演示動畫可以聲色俱現地教會你某個產品到底應該怎么使用，所有的一切系統組件在你眼前仿佛有生命一般的鮮活，讓你獲得愉悅體驗感受的同時，也仿佛感覺到了他們的“溫度”。

有一天UI視覺會變得極為簡潔，交互的行為會變得極度便捷，而UI動效所承載的使命可能越來越重，那時UI動效設計師的黃金時代則將開啟。全系多媒體時代的到來，也必將引發新的行業變革。

1.2.3 UI動效的應用領域分析

在當下這個信息爆炸的時代，每天只要我們一睜開眼睛，最生活化的UI動效場景便發生在人與手機之間，如刷朋友圈、刷微博、玩游戲或者網上訂餐等。這里我所指的動效，不僅僅是只針對某個App或者某個網站的頁面切換和UI動效，而是更為廣泛的全網動效。

這里我們針對移動互聯網時代下的UI動效應用領域做一下簡單介紹。

1. App操作系統

（1）針對Android系統UI

目前在Android原生操作系統（見圖1-18）中，對于動效的重視程度已經提升到了一個前所未有的高度。就拿Material Design（谷歌推出的一套全新的設計語言）專門針對動效的規范引導來說就可見一斑了。

再拿Android原聲系統的開機動畫效果（見圖1-19）來說，它巧妙地結合了點、線、面的基本元素和字母元素，完成了豐富有趣味的動畫效果。即便有時候我們會覺得起整個動畫加載的時間有些過長，但其效果的展現還是值得我們肯定的，正如我們之前所說，美觀性和功能性都兼顧的動效方案才是好的動效方案。

基于Android原生操作系統深度定制的華為EMOTION UI（見圖1-20）在UI微動畫的表現上做了不少新的嘗試和優化，且體驗的效果也越來越好，其作為近幾年在國內手機市場份額增速驚人的“榮耀”系終端產品搭載的官方UI ROM，EMUI的動效為整體體驗增色不少。兩年前我受邀在華為終端設計團隊進行動效分享活動時，大家對于動效的專注和對體驗設計的細節把握就已經達到極高的水平，這也讓我有理由相信，他們的體驗會做得越來越好，而事實也證明他們做到了。

如圖1-21所示，同樣基于Android原生操作系統深度定制的MIUI（米柚），在UI動效的呈現上也表現得較為出色。且值得一提的是，MIUI專門針對中國手機用戶的使用習慣所做的優化設計讓人覺得非常貼心。

（2）針對iSO系統UI

iOS操作系統作為iPhone的官方操作系統，其中不乏各種讓人愉悅的動態交互效果，且從體驗細節角度上來說它是比較完善的。或許也正是因為iOS一直保持非開源的狀態和嚴格的審核機制，使得其對自我體驗和內容質量有著更好的控制能力，而其對于動效的原生開發能力則是保證動效能完美實現的堅實技術保障，如圖1-22所示。

（3）針對App產品UI

相對于上面所述的操作系統而言，App產品中也有許多優秀的UI動效的典型例子，讓我印象最深刻的是一款叫作PATH的社交軟件，其屬于較早期的一個經典交互動畫效果。在這個App產品中，讓人印象最深刻的則是其底部BAR中間的“+”鍵在觸發之后的動畫效果，如圖1-23所示。

2. 互聯網創意營銷

作為互聯網商業的重要組成部分，互聯網營銷的價值不容小覷。這種如今在大家看來已習以為常的互聯網商業手段滲透到了包括傳統行業在內的各行各業，而對于設計師來說，互聯網營銷的案例是否精彩，對互聯網產品的口碑起到至關重要的作用（當然營銷的表現形式也有可能是一些事件）。同時有一點可以肯定的是，創意化和情懷化的設計是互聯網營銷的核心。以“創意”和“情懷”為核心的營銷方案，在動畫手段盛行的今天似乎更多了一份內涵。

如今，行業內也涌現出了一大批優秀的互聯網營銷團隊。其中較具有影響力的就是騰訊TGideas創意團隊，它們是隸屬于騰訊公司互動娛樂業務系統的一支專業推廣類設計團隊，工作范圍涉及各類游戲產品的推廣設計工作。團隊成員包括視覺設計師、網站重構工程師、Web前端、Flash動畫設計師以及文案策劃等。他們是互聯網營銷團隊中的佼佼者，其很多案例都有非常好的影響力和口碑，如圖1-24所示。

對于UI動效設計來說，應用領域非常多。在我們的日常生活中，每天都有各種的以動效為載體的信息在各大互聯網系統和設備上出現。簡單來說，UI動效如何設計，主要是要抓住用戶的需求，也就是吸引用戶的眼球，讓用戶喜歡。

1.2.4 讓設計有意義地存在

之前我們說過，大約從2005年，用戶體驗行業就已將網頁設計師的工作拆分為視覺設計師和交互設計師。不過在那時，“用戶體驗”的概念在國內尚未完全形成，但是這次分工的細化也意味著中國互聯網行業對于體驗設計的整體認知更為深入了。一些資深設計人士認為，體驗式設計的本質不僅僅是依托于美感，還需要有人機交互環節當中的交互體驗的舒適感為標準。于是，交互設計師由此產生。

那么，交互設計師和UI動效有什么直接性的關聯嗎？答案是肯定的。并且不止是有直接性的關聯，在某種程度上，交互設計師和UI動效的關聯性甚至比視覺設計師更為直接。

有過一些行業設計經驗的朋友都應該知道，在實際工作過程中，交互設計師負責的是整個產品的頁面邏輯和內容層級的梳理，目的是幫助用戶在最短的時間內完成體驗的交互行為，從而滿足用戶的某一個需求。因此，對于功能性和操作便捷性的要求，是交互設計師在設計過程中最需要考慮的問題。也就是說，一個優秀的UI動效方案，除了要滿足視覺上的美觀度之外，還需要同時具有功能性與合理性。在用戶體驗過程中，你設計的某個按鍵或者元素是否會干擾到用戶的操作，是否會給用戶造成錯誤的引導，加大誤操作的概率，哪個地方該使用動效等，每一個具體的設計都需要交互設計師和UI動效設計師進行詳細的溝通，然后得出相對性價比較高的解決方案。如果一味地為了加動效而加動效，卻不顧用戶的實際體驗和需求，可能會適得其反。

對于大部分設計師來說，在設計上考慮的都是“效果優先”，但是對于程序員來說卻往往是“性能優先”，這里就延伸出一個“功能性”的話題。其實無論是對于一個操作系統，還是任何一款App產品來說，用戶的體驗行為其實都大同小異。而對于一個好的產品來說，其在效果、性能以及功能性的體驗上一定是能找到一個比較好的平衡點的。例如，后面我們要講到的Google的Material Design設計語言，就設計風格而言，很明顯是偏重功能性設計的，在更多地考慮到適配和跨終端的體驗統一性方面，毫無疑問也是行業內比較權威性的。那么對于它在動效方面的一些規則，也必然是基于“功能性優先”來進行的。

體驗設計行業所倡導的“所見即所得”式的體驗，其實就是為了盡可能省去用戶在體驗過程中來回往復的中間環節，避免讓整個體驗過程都變得非常煩瑣。信息的傳遞不對等、效率低下、不合時宜以及無價值信息的過度干擾等，都是體驗環節中有待解決的問題。

任何動態效果、視覺效果和設計思維都是本著服務于產品的第一宗旨而存在和進行著。這里并不是說在實際工作中設計師不如產品經理重要。恰恰相反，很多時候設計師需要在體驗環節帶領著產品，用意識去引導產品經理學會取舍。同時一般情況下，在設計中產品經理往往追求的是“大而全”，而設計師往往追求的是“小而美”。這兩者本身并沒有錯，但對于已經產出的視覺方案，我們在思考是否給其添加動態效果的時候一定要慎行，否則很可能會加大不必要的工作量投入和性能損耗。

總之，讓你的動效設計變得有意義，足夠符合用戶的功能性需求，要比一味追求美感更為重要。