設(shè)計(jì)師需要學(xué)會(huì)設(shè)計(jì)有意義的動(dòng)效(2)
“精心編排的動(dòng)效設(shè)計(jì)能更為有效地吸引用戶的注意力,并讓用戶專注于操作不同的步驟,經(jīng)歷不同的流程;有意味的動(dòng)效設(shè)計(jì)能在界面變化、元素重新排列過程中,讓整體體驗(yàn)更好。”
動(dòng)效可以也應(yīng)該超越單純的打磨優(yōu)化。動(dòng)效以一種全新的方式來呈現(xiàn)界面的個(gè)性,教育用戶如何同特定的元素進(jìn)行交互,構(gòu)建用戶于界面之間的獨(dú)特關(guān)系。
當(dāng)整個(gè)界面隨著用戶的需求進(jìn)行變化的時(shí)候,用戶會(huì)下意識(shí)查看所有的轉(zhuǎn)變,這個(gè)過程中,界面的重排和各個(gè)部分的轉(zhuǎn)場(chǎng)動(dòng)效可以清晰地告訴用戶它們是什么,怎么來的,去了哪里。
正如Google在Material Design中所設(shè)定的“獨(dú)特的紙”的隱喻一樣,當(dāng)用戶于界面進(jìn)行操作的時(shí)候,UI隨著漣漪般的動(dòng)效而進(jìn)行轉(zhuǎn)變,空間的變化和界面元素的變化由動(dòng)效連接在一起,用戶可以輕松理解界面是怎么回事。
成長中的設(shè)計(jì)工具
在設(shè)計(jì)小組討論中,Roman Nurik 問我們?cè)鯓硬拍茏詈玫叵騽e人展示設(shè)計(jì)成果。Roman的這個(gè)問題促使我們深入探討了功能型原型。
在過去的5年里,當(dāng)我們提及原型的時(shí)候,通常想到的是通過箭頭和說明連接在一起的若干界面。但是時(shí)至今日,一切都截然不同,之前的原型設(shè)計(jì)顯得過于粗糙,而現(xiàn)在的原型要求能夠置于移動(dòng)端設(shè)備進(jìn)行演示,擁有真實(shí)的界面過度效果,可交互的元素,滾動(dòng)的區(qū)域,動(dòng)畫,以及必要的狀態(tài)變化。
在過去,設(shè)計(jì)師并沒有真正意義上充分利用After Effects來作為重新設(shè)計(jì)的工具。除了拿來制作頁面滑動(dòng)效果之外,多數(shù)設(shè)計(jì)師對(duì)于其他的功能幾乎如同克林貢語一樣疏于了解。之所以會(huì)這樣,是因?yàn)槠渌牟糠直徽J(rèn)為并不重要,而不被重視的結(jié)果通常就會(huì)被忽視,在日程緊張的時(shí)候,這些部分甚至?xí)恢苯右瞥?/p>
除此之外,AE還會(huì)被用作優(yōu)化小過度效果,或者對(duì)象變換效果,但是也僅此而已——它僅僅只是被用作一個(gè)修修補(bǔ)補(bǔ)的工具而已。撇開這些細(xì)節(jié),設(shè)計(jì)團(tuán)隊(duì)和開發(fā)團(tuán)隊(duì)的溝通是非常簡(jiǎn)單的:點(diǎn)開這里打開另一個(gè)頁面,這個(gè)界面切換到另一個(gè)界面……界面的轉(zhuǎn)變效果都差不多。
但是,時(shí)代不一樣了。網(wǎng)頁過渡效果依然存在,但是所設(shè)計(jì)到頁面元素越來越多,各種元素轉(zhuǎn)變的先后快慢都需要被編排。在接下來的幾年里,動(dòng)效設(shè)計(jì)將成為桌面端/移動(dòng)端/穿戴設(shè)備/智能家居/智能汽車 中必須的組成部分。這也意味著,在設(shè)計(jì)流程中,動(dòng)效設(shè)計(jì)也會(huì)被納入其中,成為必要過程。
學(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ì)的影響