手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

設計師的必備技能!你需要學會設計有意義的動效

2015-7-31    博博

 

藍藍設計m.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

        來源:優(yōu)設網(wǎng)

provide-meaning-with-motion-1

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

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

動效才是The Next Big Thing

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

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

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

大勢所趨,你需要了解的Material Design:《超全面總結!深聊MATERIAL DESIGN引領的設計趨勢》

see-more-material-design-trand

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

1404825741-YouTubeAndroidMaterialDesignRedesignConcept--pic1

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

當Facebook的設計團隊在設計流程中使用Quartz Composer設計首頁的時候 ,曾經(jīng)提到:

Julie Zhou 的設計人才觀:《FACEBOOK懸賞令!美女總監(jiān)JULIE ZHUO的13條人才金律》

無割裂的體驗

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

“精心編排的動效設計能更為有效地吸引用戶的注意力,并讓用戶專注于操作不同的步驟,經(jīng)歷不同的流程;有意味的動效設計能在界面變化、元素重新排列過程中,讓整體體驗更好?!?

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

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

pstam_app_bar_microtransitions

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

成長中的設計工具

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

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

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

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

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

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

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

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

我曾經(jīng)每天都使用 Framer.js來打造我的交互設計原型。它基本上是一個JavaScript動畫框架,所以你如果你對JS不熟悉的話還需要一段時間來了解它。不過,不同于其他的JS工具,對于網(wǎng)頁開發(fā)者而言,F(xiàn)ramer.js 非常容易上手。

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

同類型的工具還有Pixate,借助它,你可以使用簡單的拖拽來制作原型,之后還可以在你的設備上瀏覽。不過這款工具沒有網(wǎng)頁端實時預覽,目前開發(fā)進度也并不快。

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

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.88yangsc.com

存檔