設(shè)計(jì)師的必備技能!你需要學(xué)會(huì)設(shè)計(jì)有意義的動(dòng)效
在今年的Google I/O大會(huì)上,我參加了一個(gè)小的討論小組,一同探討跨平臺(tái)設(shè)計(jì)所面臨的挑戰(zhàn)。這次討論的內(nèi)容信息量非常大,就像第一次去拉斯維加斯的那種目不暇接的感覺(jué)。 這次Google對(duì)Android上進(jìn)行了許多令人振奮的改進(jìn),比如電池省電模式和全新的鎖屏通知,許多設(shè)計(jì)比之前的第三方插件都要來(lái)的優(yōu)秀。
動(dòng)效才是The Next Big Thing
Android 更多的衍生版也在這次的I/O大會(huì)上發(fā)布,Android Wear、Android Auto 以及 Android TV,從此之后當(dāng)你再聊起Android的時(shí)候,就不僅僅意味著智能手機(jī)和平板了——你還需要考慮汽車和可穿戴設(shè)備。
“如果設(shè)計(jì)沒(méi)有限制,那就不是設(shè)計(jì),而是藝術(shù)了?!?—— Android 設(shè)計(jì)主管 Matias Duarte
隨著Android和其他的Google系產(chǎn)品逐漸進(jìn)入越來(lái)越多的領(lǐng)域,這也使得Google越來(lái)越有必要后退一步,全面地審視自己現(xiàn)有的設(shè)計(jì)。重 新思考之后創(chuàng)造出的設(shè)計(jì)語(yǔ)言,就是Material Design。這種高屋建瓴的設(shè)計(jì)語(yǔ)言規(guī)定了一整套設(shè)計(jì)框架,在此框架內(nèi)基于Android來(lái)設(shè)計(jì)程序的時(shí)候,Google和其他的設(shè)計(jì)團(tuán)隊(duì)可以更容易地 做設(shè)計(jì)決策。
但是,如果你仔細(xì)審視這次Google I/O大會(huì)的話,你會(huì)發(fā)現(xiàn)Android 5.0 和 Material Design并不是重點(diǎn)。谷歌通過(guò)這次大會(huì)隱晦地告訴世界,動(dòng)效設(shè)計(jì)正在成為移動(dòng)端軟件設(shè)計(jì)中一種極為重要的、非常必要的組成要素。在Google I/O大會(huì)的每一個(gè)環(huán)節(jié),動(dòng)效設(shè)計(jì)都會(huì)被提及、探討,也成為了開(kāi)發(fā)的重點(diǎn)。
一年前,在我的的草稿中還有一篇寫了一半的文章,名為“完成工作所需的正確工具”。這篇文章主要介紹的設(shè)計(jì)過(guò)程中所必須的工具,以及如何借助它們更 為有效地傳達(dá)全部的設(shè)計(jì)意圖。比如使用After Effects、Quartz Composer 來(lái)制作轉(zhuǎn)場(chǎng)動(dòng)效,使用HTML/CSS/JS來(lái)構(gòu)建原型并且使用移動(dòng)設(shè)備來(lái)進(jìn)行交互。
當(dāng)Facebook的設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)流程中使用Quartz Composer設(shè)計(jì)首頁(yè)的時(shí)候 ,曾經(jīng)提到:
“QC不僅讓工程師的工作更加容易,也使得設(shè)計(jì)可以更容易呈現(xiàn)故事。所以,當(dāng)你查看一個(gè)逼真、精心處理、可交互的Demo的時(shí)候,你可以立刻明白它是如何運(yùn)作的……” ——Facebook 設(shè)計(jì)總監(jiān) Julie Zhou
無(wú)割裂的體驗(yàn)
雖然我并沒(méi)有深入探究Material Design的動(dòng)效設(shè)計(jì)中錯(cuò)綜復(fù)雜的設(shè)定,但是它的特征依然非常鮮明:可信而真實(shí)的動(dòng)效,響應(yīng)式的互動(dòng),充滿意味的過(guò)度,令人愉悅的細(xì)節(jié)。掌握好這些特征之后,再深入探究。
“精心編排的動(dòng)效設(shè)計(jì)能更為有效地吸引用戶的注意力,并讓用戶專注于操作不同的步驟,經(jīng)歷不同的流程;有意味的動(dòng)效設(shè)計(jì)能在界面變化、元素重新排列過(guò)程中,讓整體體驗(yàn)更好。”
動(dòng)效可以也應(yīng)該超越單純的打磨優(yōu)化。動(dòng)效以一種全新的方式來(lái)呈現(xiàn)界面的個(gè)性,教育用戶如何同特定的元素進(jìn)行交互,構(gòu)建用戶于界面之間的獨(dú)特關(guān)系。
當(dāng)整個(gè)界面隨著用戶的需求進(jìn)行變化的時(shí)候,用戶會(huì)下意識(shí)查看所有的轉(zhuǎn)變,這個(gè)過(guò)程中,界面的重排和各個(gè)部分的轉(zhuǎn)場(chǎng)動(dòng)效可以清晰地告訴用戶它們是什么,怎么來(lái)的,去了哪里。
正如Google在Material Design中所設(shè)定的“獨(dú)特的紙”的隱喻一樣,當(dāng)用戶于界面進(jìn)行操作的時(shí)候,UI隨著漣漪般的動(dòng)效而進(jìn)行轉(zhuǎn)變,空間的變化和界面元素的變化由動(dòng)效連接在一起,用戶可以輕松理解界面是怎么回事。
成長(zhǎng)中的設(shè)計(jì)工具
在設(shè)計(jì)小組討論中,Roman Nurik 問(wèn)我們?cè)鯓硬拍茏詈玫叵騽e人展示設(shè)計(jì)成果。Roman的這個(gè)問(wèn)題促使我們深入探討了功能型原型。
在過(guò)去的5年里,當(dāng)我們提及原型的時(shí)候,通常想到的是通過(guò)箭頭和說(shuō)明連接在一起的若干界面。但是時(shí)至今日,一切都截然不同,之前的原型設(shè)計(jì)顯得過(guò)于 粗糙,而現(xiàn)在的原型要求能夠置于移動(dòng)端設(shè)備進(jìn)行演示,擁有真實(shí)的界面過(guò)度效果,可交互的元素,滾動(dòng)的區(qū)域,動(dòng)畫,以及必要的狀態(tài)變化。
在過(guò)去,設(shè)計(jì)師并沒(méi)有真正意義上充分利用After Effects來(lái)作為重新設(shè)計(jì)的工具。除了拿來(lái)制作頁(yè)面滑動(dòng)效果之外,多數(shù)設(shè)計(jì)師對(duì)于其他的功能幾乎如同克林貢語(yǔ)一樣疏于了解。之所以會(huì)這樣,是因?yàn)槠渌?的部分被認(rèn)為并不重要,而不被重視的結(jié)果通常就會(huì)被忽視,在日程緊張的時(shí)候,這些部分甚至?xí)恢苯右瞥?/p>
除此之外,AE還會(huì)被用作優(yōu)化小過(guò)度效果,或者對(duì)象變換效果,但是也僅此而已——它僅僅只是被用作一個(gè)修修補(bǔ)補(bǔ)的工具而已。撇開(kāi)這些細(xì)節(jié),設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)的溝通是非常簡(jiǎn)單的:點(diǎn)開(kāi)這里打開(kāi)另一個(gè)頁(yè)面,這個(gè)界面切換到另一個(gè)界面……界面的轉(zhuǎn)變效果都差不多。
但是,時(shí)代不一樣了。網(wǎng)頁(yè)過(guò)渡效果依然存在,但是所設(shè)計(jì)到頁(yè)面元素越來(lái)越多,各種元素轉(zhuǎn)變的先后快慢都需要被編排。在接下來(lái)的幾年里,動(dòng)效設(shè)計(jì)將成 為桌面端/移動(dòng)端/穿戴設(shè)備/智能家居/智能汽車 中必須的組成部分。這也意味著,在設(shè)計(jì)流程中,動(dòng)效設(shè)計(jì)也會(huì)被納入其中,成為必要過(guò)程。
在Google I/O的設(shè)計(jì)交流環(huán)節(jié)中,最常被問(wèn)到的問(wèn)題就是設(shè)計(jì)師如何將動(dòng)效設(shè)計(jì)納入到設(shè)計(jì)流程中。Googler們提到,雖然他們推薦使用AE,但是即便是他們自己 也通常只是用它來(lái)完成小過(guò)度效果、加載過(guò)程以及圖標(biāo)轉(zhuǎn)變效果。不過(guò),他們還提到,他們最新的Polymer網(wǎng)絡(luò)框架已經(jīng)將Material Design的UI組件納入其中。
簡(jiǎn)而言之,就是目前沒(méi)有完美的答案。這也意味著,對(duì)于動(dòng)效設(shè)計(jì)工具的開(kāi)發(fā)者而言,這是一個(gè)絕佳的機(jī)會(huì)。
Polymer 能幫你編排出一些沿著特定路徑運(yùn)動(dòng)的組件,或者一系列自由運(yùn)動(dòng)的動(dòng)效。不過(guò)只有當(dāng)你使用Material Design風(fēng)格的組件的時(shí)候,效果會(huì)非常不錯(cuò),但是如果想自己定制的話,就很難說(shuō)了。
我曾經(jīng)每天都使用 Framer.js 來(lái)打造我的交互設(shè)計(jì)原型。它基本上是一個(gè)JavaScript動(dòng)畫框架,所以你如果你對(duì)JS不熟悉的話還需要一段時(shí)間來(lái)了解它。不過(guò),不同于其他的JS工具,對(duì)于網(wǎng)頁(yè)開(kāi)發(fā)者而言,F(xiàn)ramer.js 非常容易上手。
Framer 在測(cè)試小交互或?qū)讉€(gè)不同頁(yè)連接到一起上有杰出的表現(xiàn),但是作為新一代的工具,它在管理編排、跟蹤狀態(tài)、控制拖拽和滾動(dòng)元素上有這更多的需求。
同類型的工具還有Pixate,借助它,你可以使用簡(jiǎn)單的拖拽來(lái)制作原型,之后還可以在你的設(shè)備上瀏覽。不過(guò)這款工具沒(méi)有網(wǎng)頁(yè)端實(shí)時(shí)預(yù)覽,目前開(kāi)發(fā)進(jìn)度也并不快。
我仍然在等待更加完美的動(dòng)效設(shè)計(jì)和可交互原型設(shè)計(jì)工具。構(gòu)建屬于你自己的設(shè)計(jì)的過(guò)程中,你會(huì)仔細(xì)思考如何構(gòu)建以及設(shè)計(jì)的界限;許多問(wèn)題只有當(dāng)你遇到 了才會(huì)被意識(shí)到。當(dāng)然,有一點(diǎn)是肯定的,只有當(dāng)你把一個(gè)真實(shí)的原型擺在團(tuán)隊(duì)面前的時(shí)候,溝通才會(huì)更加有效。當(dāng)你把一個(gè)可交互的高保真原型擺在眼前的時(shí)候, 你就不用解釋點(diǎn)擊什么按鈕出現(xiàn)什么效果了。
越多設(shè)計(jì)師深入思考動(dòng)效設(shè)計(jì),才能更快地促進(jìn)真正靠譜的軟件誕生,也更加有助于我們傳達(dá)設(shè)計(jì)的意圖。也只有這樣才能促進(jìn)更加優(yōu)秀產(chǎn)品的誕生,解決更多棘手的問(wèn)題。動(dòng)效設(shè)計(jì)正在成熟,你需要掌控它。
“設(shè)計(jì)就是用你所掌控的一切,來(lái)盡可能清晰的與人溝通。” —— Milton Glaser
原文來(lái)自:優(yōu)設(shè)
原文地址:paulstamatiou
優(yōu)設(shè)網(wǎng)譯者:@陳子木
- 目前還沒(méi)評(píng)論,等你發(fā)揮!