設(shè)計(jì)師需要學(xué)會(huì)設(shè)計(jì)有意義的動(dòng)效
關(guān)于動(dòng)效設(shè)計(jì),我們探討過很多次。直到現(xiàn)在,我們?cè)絹碓角宄匾庾R(shí)到,動(dòng)效設(shè)計(jì)已經(jīng)無處不在,已經(jīng)成為了設(shè)計(jì)師們必須掌控的一個(gè)重要技能。參加過今年的Google I/O大會(huì)之后,設(shè)計(jì)師Paul Stamatiou 也充分認(rèn)識(shí)到這一點(diǎn),并撰寫了這篇博客。這篇文章是一支號(hào)角,動(dòng)效設(shè)計(jì)在過去還是趨勢(shì),但是從此刻開始,它成為了我們必將面對(duì)的新陣地。
在今年的Google I/O大會(huì)上,我參加了一個(gè)小的討論小組,一同探討跨平臺(tái)設(shè)計(jì)所面臨的挑戰(zhàn)。這次討論的內(nèi)容信息量非常大,就像第一次去拉斯維加斯的那種目不暇接的感覺。這次Google對(duì)Android上進(jìn)行了許多令人振奮的改進(jìn),比如電池省電模式和全新的鎖屏通知,許多設(shè)計(jì)比之前的第三方插件都要來的優(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ì)沒有限制,那就不是設(shè)計(jì),而是藝術(shù)了。”—— Android 設(shè)計(jì)主管 Matias Duarte
隨著Android和其他的Google系產(chǎn)品逐漸進(jìn)入越來越多的領(lǐng)域,這也使得Google越來越有必要后退一步,全面地審視自己現(xiàn)有的設(shè)計(jì)。重新思考之后創(chuàng)造出的設(shè)計(jì)語言,就是Material Design。這種高屋建瓴的設(shè)計(jì)語言規(guī)定了一整套設(shè)計(jì)框架,在此框架內(nèi)基于Android來設(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)。谷歌通過這次大會(huì)隱晦地告訴世界,動(dòng)效設(shè)計(jì)正在成為移動(dòng)端軟件設(shè)計(jì)中一種極為重要的、非常必要的組成要素。在Google I/O大會(huì)的每一個(gè)環(huán)節(jié),動(dòng)效設(shè)計(jì)都會(huì)被提及、探討,也成為了開發(fā)的重點(diǎn)。
一年前,在我的的草稿中還有一篇寫了一半的文章,名為“完成工作所需的正確工具”。這篇文章主要介紹的設(shè)計(jì)過程中所必須的工具,以及如何借助它們更為有效地傳達(dá)全部的設(shè)計(jì)意圖。比如使用After Effects、Quartz Composer 來制作轉(zhuǎn)場(chǎng)動(dòng)效,使用HTML/CSS/JS來構(gòu)建原型并且使用移動(dòng)設(shè)備來進(jìn)行交互。
當(dāng)Facebook的設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)流程中使用Quartz Composer設(shè)計(jì)首頁的時(shí)候 ,曾經(jīng)提到:
“QC不僅讓工程師的工作更加容易,也使得設(shè)計(jì)可以更容易呈現(xiàn)故事。所以,當(dāng)你查看一個(gè)逼真、精心處理、可交互的Demo的時(shí)候,你可以立刻明白它是如何運(yùn)作的……” ——Facebook 設(shè)計(jì)總監(jiān) Julie Zhou
無割裂的體驗(yàn)
雖然我并沒有深入探究Material Design的動(dòng)效設(shè)計(jì)中錯(cuò)綜復(fù)雜的設(shè)定,但是它的特征依然非常鮮明:可信而真實(shí)的動(dòng)效,響應(yīng)式的互動(dòng),充滿意味的過度,令人愉悅的細(xì)節(jié)。掌握好這些特征之后,再深入探究。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop初級(jí)教程-命令的技巧
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響