設計師需要學會設計有意義的動效

 　　關於動效設計，我們探討過很多次。直到現在，我們越來越清楚地意識到，動效設計已經無處不在，已經成為了設計師們必須掌控的一個重要技能。參加過今年的Google I/O大會之後，設計師Paul Stamatiou 也充分認識到這一點，並撰寫了這篇博客。這篇文章是一支號角，動效設計在過去還是趨勢，但是從此刻開始，它成為了我們必將面對的新陣地。

　　在今年的Google I/O大會上，我參加了一個小的討論小組，一同探討跨平台設計所面臨的挑戰。這次討論的內容信息量非常大，就像第一次去拉斯維加斯的那種目不暇接的感覺。這次Google對Android上進行了許多令人振奮的改進，比如電池省電模式和全新的鎖屏通知，許多設計比之前的第三方插件都要來的優秀。

　　動效才是The Next Big Thing

　　Android 更多的衍生版也在這次的I/O大會上發布，Android Wear、Android Auto 以及 Android TV，從此之後當你再聊起Android的時候，就不僅僅意味著智能手機和平板了——你還需要考慮汽車和可穿戴設備。

　　“如果設計沒有限制，那就不是設計，而是藝術了。” —— Android 設計主管 Matias Duarte

　　隨著Android和其他的Google系產品逐漸進入越來越多的領域，這也使得Google越來越有必要後退一步，全面地審視自己現有的設計。重新思考之後創造出的設計語言，就是Material Design。這種高屋建瓴的設計語言規定了一整套設計框架，在此框架內基於Android來設計程序的時候，Google和其他的設計團隊可以更容易地做設計決策。

　　但是，如果你仔細審視這次Google I/O大會的話，你會發現Android 5.0 和 Material Design並不是重點。谷歌通過這次大會隱晦地告訴世界，動效設計正在成為移動端軟件設計中一種極為重要的、非常必要的組成要素。在Google I/O大會的每一個環節，動效設計都會被提及、探討，也成為了開發的重點。

　　一年前，在我的的草稿中還有一篇寫了一半的文章，名為“完成工作所需的正確工具”。這篇文章主要介紹的設計過程中所必須的工具，以及如何借助它們更為有效地傳達全部的設計意圖。比如使用After Effects、Quartz Composer 來制作轉場動效，使用HTML/CSS/JS來構建原型並且使用移動設備來進行交互。

　　當Facebook的設計團隊在設計流程中使用Quartz Composer設計首頁的時候 ，曾經提到：

　　“QC不僅讓工程師的工作更加容易，也使得設計可以更容易呈現故事。所以，當你查看一個逼真、精心處理、可交互的Demo的時候，你可以立刻明白它是如何運作的……” ——Facebook 設計總監 Julie Zhou

　　無割裂的體驗

　　雖然我並沒有深入探究Material Design的動效設計中錯綜復雜的設定，但是它的特征依然非常鮮明：可信而真實的動效，響應式的互動，充滿意味的過度，令人愉悅的細節。掌握好這些特征之後，再深入探究。

　　“精心編排的動效設計能更為有效地吸引用戶的注意力，並讓用戶專注於操作不同的步驟，經歷不同的流程;有意味的動效設計能在界面變化、元素重新排列過程中，讓整體體驗更好。”

　　動效可以也應該超越單純的打磨優化。動效以一種全新的方式來呈現界面的個性，教育用戶如何同特定的元素進行交互，構建用戶於界面之間的獨特關系。

　　當整個界面隨著用戶的需求進行變化的時候，用戶會下意識查看所有的轉變，這個過程中，界面的重排和各個部分的轉場動效可以清晰地告訴用戶它們是什麼，怎麼來的，去了哪裡。

　　正如Google在Material Design中所設定的“獨特的紙”的隱喻一樣，當用戶於界面進行操作的時候，UI隨著漣漪般的動效而進行轉變，空間的變化和界面元素的變化由動效連接在一起，用戶可以輕松理解界面是怎麼回事。

　　成長中的設計工具

　　在設計小組討論中，Roman Nurik 問我們怎樣才能最好地向別人展示設計成果。Roman的這個問題促使我們深入探討了功能型原型。

　　在過去的5年裡，當我們提及原型的時候，通常想到的是通過箭頭和說明連接在一起的若干界面。但是時至今日，一切都截然不同，之前的原型設計顯得過於粗糙，而現在的原型要求能夠置於移動端設備進行演示，擁有真實的界面過度效果，可交互的元素，滾動的區域，動畫，以及必要的狀態變化。

　　在過去，設計師並沒有真正意義上充分利用After Effects來作為重新設計的工具。除了拿來制作頁面滑動效果之外，多數設計師對於其他的功能幾乎如同克林貢語一樣疏於了解。之所以會這樣，是因為其他的部分被認為並不重要，而不被重視的結果通常就會被忽視，在日程緊張的時候，這些部分甚至會被直接移除。

　　除此之外，AE還會被用作優化小過度效果，或者對象變換效果，但是也僅此而已——它僅僅只是被用作一個修修補補的工具而已。撇開這些細節，設計團隊和開發團隊的溝通是非常簡單的：點開這裡打開另一個頁面，這個界面切換到另一個界面……界面的轉變效果都差不多。

　　但是，時代不一樣了。網頁過渡效果依然存在，但是所設計到頁面元素越來越多，各種元素轉變的先後快慢都需要被編排。在接下來的幾年裡，動效設計將成為桌面端/移動端/穿戴設備/智能家居/智能汽車 中必須的組成部分。這也意味著，在設計流程中，動效設計也會被納入其中，成為必要過程。

　　在Google I/O的設計交流環節中，最常被問到的問題就是設計師如何將動效設計納入到設計流程中。Googler們提到，雖然他們推薦使用AE，但是即便是他們自己也通常只是用它來完成小過度效果、加載過程以及圖標轉變效果。不過，他們還提到，他們最新的Polymer網絡框架已經將Material Design的UI組件納入其中。

　　簡而言之，就是目前沒有完美的答案。這也意味著，對於動效設計工具的開發者而言，這是一個絕佳的機會。

　　Polymer 能幫你編排出一些沿著特定路徑運動的組件，或者一系列自由運動的動效。不過只有當你使用Material Design風格的組件的時候，效果會非常不錯，但是如果想自己定制的話，就很難說了。

　　我曾經每天都使用 Framer.js 來打造我的交互設計原型。它基本上是一個JavaScript動畫框架，所以你如果你對JS不熟悉的話還需要一段時間來了解它。不過，不同於其他的JS工具，對於網頁開發者而言，Framer.js 非常容易上手。

　　Framer 在測試小交互或將幾個不同頁連接到一起上有傑出的表現，但是作為新一代的工具，它在管理編排、跟蹤狀態、控制拖拽和滾動元素上有這更多的需求。

　　同類型的工具還有Pixate，借助它，你可以使用簡單的拖拽來制作原型，之後還可以在你的設備上浏覽。不過這款工具沒有網頁端實時預覽，目前開發進度也並不快。

　　我仍然在等待更加完美的動效設計和可交互原型設計工具。構建屬於你自己的設計的過程中，你會仔細思考如何構建以及設計的界限;許多問題只有當你遇到了才會被意識到。當然，有一點是肯定的，只有當你把一個真實的原型擺在團隊面前的時候，溝通才會更加有效。當你把一個可交互的高保真原型擺在眼前的時候，你就不用解釋點擊什麼按鈕出現什麼效果了。

　　越多設計師深入思考動效設計，才能更快地促進真正靠譜的軟件誕生，也更加有助於我們傳達設計的意圖。也只有這樣才能促進更加優秀產品的誕生，解決更多棘手的問題。動效設計正在成熟，你需要掌控它。

　　“設計就是用你所掌控的一切，來盡可能清晰的與人溝通。” —— Milton Glaser