學會設計有意義的(de)動效

作者：龍 時(shí)間：2018-08-01 浏覽：

關于動效設計，我們探討(tǎo)過很多(duō)次。直到現在，我們越來(lái)越清楚地意識到，動效設計已經無處不在，已經成爲了(le)設計師們必須掌控的(de)一個(gè)重要技能。參加過今年的(de)Google I/O大(dà)會之後，設計師Paul Stamatiou 也(yě)充分(fēn)認識到這(zhè)一點，并撰寫了(le)這(zhè)篇博客。這(zhè)篇文章(zhāng)是一支号角，動效設計在過去還(hái)是趨勢，但是從此刻開始，它成爲了(le)我們必将面對(duì)的(de)新陣地。

在今年的(de)Google I/O大(dà)會上，我參加了(le)一個(gè)小的(de)討(tǎo)論小組，一同探討(tǎo)跨平台設計所面臨的(de)挑戰。這(zhè)次討(tǎo)論的(de)内容信息量非常大(dà)，就像第一次去拉斯維加斯的(de)那種目不暇接的(de)感覺。這(zhè)次Google對(duì)Android上進行了(le)許多(duō)令人(rén)振奮的(de)改進，比如電池省電模式和(hé)全新的(de)鎖屏通(tōng)知，許多(duō)設計比之前的(de)第三方插件都要來(lái)的(de)優秀。

動效才是The Next Big Thing

Android 更多(duō)的(de)衍生版也(yě)在這(zhè)次的(de)I/O大(dà)會上發布，Android Wear、Android Auto 以及 Android TV，從此之後當你再聊起Android的(de)時(shí)候，就不僅僅意味著(zhe)智能手機和(hé)平闆了(le)——你還(hái)需要考慮汽車和(hé)可(kě)穿戴設備。

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

随著(zhe)Android和(hé)其他(tā)的(de)Google系産品逐漸進入越來(lái)越多(duō)的(de)領域，這(zhè)也(yě)使得(de)Google越來(lái)越有必要後退一步，全面地審視自己現有的(de)設計。重新思考之後創造出的(de)設計語言，就是Material Design。這(zhè)種高(gāo)屋建瓴的(de)設計語言規定了(le)一整套設計框架，在此框架内基于Android來(lái)設計程序的(de)時(shí)候，Google和(hé)其他(tā)的(de)設計團隊可(kě)以更容易地做(zuò)設計決策。

但是，如果你仔細審視這(zhè)次Google I/O大(dà)會的(de)話(huà)，你會發現Android 5.0 和(hé) Material Design并不是重點。谷歌(gē)通(tōng)過這(zhè)次大(dà)會隐晦地告訴世界，動效設計正在成爲移動端軟件設計中一種極爲重要的(de)、非常必要的(de)組成要素。在Google I/O大(dà)會的(de)每一個(gè)環節，動效設計都會被提及、探討(tǎo)，也(yě)成爲了(le)開發的(de)重點。

一年前，在我的(de)的(de)草(cǎo)稿中還(hái)有一篇寫了(le)一半的(de)文章(zhāng)，名爲“完成工作所需的(de)正确工具”。這(zhè)篇文章(zhāng)主要介紹的(de)設計過程中所必須的(de)工具，以及如何借助它們更爲有效地傳達全部的(de)設計意圖。比如使用(yòng)After Effects、Quartz Composer 來(lái)制作轉場(chǎng)動效，使用(yòng)HTML/CSS/JS來(lái)構建原型并且使用(yòng)移動設備來(lái)進行交互。

當Facebook的(de)設計團隊在設計流程中使用(yòng)Quartz Composer設計首頁的(de)時(shí)候 ，曾經提到：

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

無割裂的(de)體驗

雖然我并沒有深入探究Material Design的(de)動效設計中錯綜複雜(zá)的(de)設定，但是它的(de)特征依然非常鮮明(míng)：可(kě)信而真實的(de)動效，響應式的(de)互動，充滿意味的(de)過度，令人(rén)愉悅的(de)細節。掌握好這(zhè)些特征之後，再深入探究。

“精心編排的(de)動效設計能更爲有效地吸引用(yòng)戶的(de)注意力，并讓用(yòng)戶專注于操作不同的(de)步驟，經曆不同的(de)流程；有意味的(de)動效設計能在界面變化(huà)、元素重新排列過程中，讓整體體驗更好。”

動效可(kě)以也(yě)應該超越單純的(de)打磨優化(huà)。動效以一種全新的(de)方式來(lái)呈現界面的(de)個(gè)性，教育用(yòng)戶如何同特定的(de)元素進行交互，構建用(yòng)戶于界面之間的(de)獨特關系。

當整個(gè)界面随著(zhe)用(yòng)戶的(de)需求進行變化(huà)的(de)時(shí)候，用(yòng)戶會下(xià)意識查看所有的(de)轉變，這(zhè)個(gè)過程中，界面的(de)重排和(hé)各個(gè)部分(fēn)的(de)轉場(chǎng)動效可(kě)以清晰地告訴用(yòng)戶它們是什(shén)麽，怎麽來(lái)的(de)，去了(le)哪裏。

正如Google在Material Design中所設定的(de)“獨特的(de)紙”的(de)隐喻一樣，當用(yòng)戶于界面進行操作的(de)時(shí)候，UI随著(zhe)漣漪般的(de)動效而進行轉變，空間的(de)變化(huà)和(hé)界面元素的(de)變化(huà)由動效連接在一起，用(yòng)戶可(kě)以輕松理(lǐ)解界面是怎麽回事。

成長(cháng)中的(de)設計工具

在設計小組討(tǎo)論中，Roman Nurik 問我們怎樣才能最好地向别人(rén)展示設計成果。Roman的(de)這(zhè)個(gè)問題促使我們深入探討(tǎo)了(le)功能型原型。

在過去的(de)5年裏，當我們提及原型的(de)時(shí)候，通(tōng)常想到的(de)是通(tōng)過箭頭和(hé)說明(míng)連接在一起的(de)若幹界面。但是時(shí)至今日，一切都截然不同，之前的(de)原型設計顯得(de)過于粗糙，而現在的(de)原型要求能夠置于移動端設備進行演示，擁有真實的(de)界面過度效果，可(kě)交互的(de)元素，滾動的(de)區(qū)域，動畫(huà)，以及必要的(de)狀态變化(huà)。

在過去，設計師并沒有真正意義上充分(fēn)利用(yòng)After Effects來(lái)作爲重新設計的(de)工具。除了(le)拿來(lái)制作頁面滑動效果之外，多(duō)數設計師對(duì)于其他(tā)的(de)功能幾乎如同克林(lín)貢語一樣疏于了(le)解。之所以會這(zhè)樣，是因爲其他(tā)的(de)部分(fēn)被認爲并不重要，而不被重視的(de)結果通(tōng)常就會被忽視，在日程緊張的(de)時(shí)候，這(zhè)些部分(fēn)甚至會被直接移除。

除此之外，AE還(hái)會被用(yòng)作優化(huà)小過度效果，或者對(duì)象變換效果，但是也(yě)僅此而已——它僅僅隻是被用(yòng)作一個(gè)修修補補的(de)工具而已。撇開這(zhè)些細節，設計團隊和(hé)開發團隊的(de)溝通(tōng)是非常簡單的(de)：點開這(zhè)裏打開另一個(gè)頁面，這(zhè)個(gè)界面切換到另一個(gè)界面……界面的(de)轉變效果都差不多(duō)。

但是，時(shí)代不一樣了(le)。網頁過渡效果依然存在，但是所設計到頁面元素越來(lái)越多(duō)，各種元素轉變的(de)先後快(kuài)慢(màn)都需要被編排。在接下(xià)來(lái)的(de)幾年裏，動效設計将成爲桌面端/移動端/穿戴設備/智能家居/智能汽車 中必須的(de)組成部分(fēn)。這(zhè)也(yě)意味著(zhe)，在設計流程中，動效設計也(yě)會被納入其中，成爲必要過程。

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

簡而言之，就是目前沒有完美(měi)的(de)答(dá)案。這(zhè)也(yě)意味著(zhe)，對(duì)于動效設計工具的(de)開發者而言，這(zhè)是一個(gè)絕佳的(de)機會。

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

我曾經每天都使用(yòng) Framer.js 來(lái)打造我的(de)交互設計原型。它基本上是一個(gè)JavaScript動畫(huà)框架，所以你如果你對(duì)JS不熟悉的(de)話(huà)還(hái)需要一段時(shí)間來(lái)了(le)解它。不過，不同于其他(tā)的(de)JS工具，對(duì)于網頁開發者而言，Framer.js 非常容易上手。

Framer 在測試小交互或将幾個(gè)不同頁連接到一起上有傑出的(de)表現，但是作爲新一代的(de)工具，它在管理(lǐ)編排、跟蹤狀态、控制拖拽和(hé)滾動元素上有這(zhè)更多(duō)的(de)需求。

同類型的(de)工具還(hái)有Pixate，借助它，你可(kě)以使用(yòng)簡單的(de)拖拽來(lái)制作原型，之後還(hái)可(kě)以在你的(de)設備上浏覽。不過這(zhè)款工具沒有網頁端實時(shí)預覽，目前開發進度也(yě)并不快(kuài)。

我仍然在等待更加完美(měi)的(de)動效設計和(hé)可(kě)交互原型設計工具。構建屬于你自己的(de)設計的(de)過程中，你會仔細思考如何構建以及設計的(de)界限；許多(duō)問題隻有當你遇到了(le)才會被意識到。當然，有一點是肯定的(de)，隻有當你把一個(gè)真實的(de)原型擺在團隊面前的(de)時(shí)候，溝通(tōng)才會更加有效。當你把一個(gè)可(kě)交互的(de)高(gāo)保真原型擺在眼前的(de)時(shí)候，你就不用(yòng)解釋點擊什(shén)麽按鈕出現什(shén)麽效果了(le)。

越多(duō)設計師深入思考動效設計，才能更快(kuài)地促進真正靠譜的(de)軟件誕生，也(yě)更加有助于我們傳達設計的(de)意圖。也(yě)隻有這(zhè)樣才能促進更加優秀産品的(de)誕生，解決更多(duō)棘手的(de)問題。動效設計正在成熟，你需要掌控它。