如何用賦予UI 動效靈性

如何用賦予UI 動效靈性

如何用賦予UI 動效靈性,觀點,楊沐晨曦,原創文章站酷網,中國設計師互動平台。

它是Ollie Johnston 和Frank Thomas 在他們的書《生命的幻覺》中所提出的。雖然這些原則最初是應用在動畫設計當中,但是實際上在如今的UI 界面當中,同樣是適用,並且效果拔群的。這12條原則當中,絕大多數都可以應用到UI 的動效和交互設計當中,從而讓交互和體驗更上一層樓。這篇文章基於這12條原則,梳理出了9 條適用於UI 設計的原則,一起來看看吧:

1、擠壓和拉伸

在動畫當中,擠壓和拉伸主要體現在對像在受到重力影響的情況下,物體的表現,這種動畫效果能夠體現出質量、重量和柔韌感。當彈球在撞擊地面的時候,會呈現出這樣的擠壓和拉伸。在UI 界面當中,擠壓和拉伸則多呈現在按鈕類的元素上。

比如當按鈕被按下的時候,可以加入擠壓拉伸的效果,通過這種動效能夠很快讓按鈕呈現出接近真實的物理感。當然,除了按鈕之外,它還可以體現在很多其他的交互元素上。

2、預備動作

預備動作,通常指的是提前告知用戶即將發生的事情,讓設計和用戶的預期貼合起來。一個角色要將箭射出去,他需要抬起手臂向後拉,你會清晰地看到射箭之前「引而不發」的狀態,然後你會對於箭射出有所預期。在用戶界面當中,當你懸停在按鈕之上的時候,按鈕會變化,進入「懸停」狀態,它就昭示著它是可被點擊的,這就是它的預備動作。

懸停交互會告訴用戶下一步可以做什麼。

水平滾動的控件通常會展示出某些元素的一部分,讓用戶意識到可以滑動交互。

3、時間控制

在傳統的動畫當中,時間控制決定了幀數的繪製數量和內容。幀數越多,動畫就越流暢,相應的內容變化也可能更慢。同時,一個動畫所耗費的時間長短,也會影響到其中角色的表現力和用戶的心情。

時間控制是動畫設計的基礎。時間控制和緩動在動畫編排中發揮著重要的作用,過於漫長的過渡會讓用戶等太久,如果太快,用戶可能會覺得錯過重要的信息。通常,絕大多數的動畫時長會控制在200ms 到600ms 之間,諸如懸停和點擊反饋通常會控制在300ms,而過渡則多為500ms,你可以參考Material Design 中動畫的時間處理。

右側的過渡會讓用戶覺得等待太久。

4、漸快和漸慢

現實世界當中,絕大多數的事物的運動規律都遵循緩動的規律。換句話說,沒有東西是突然開始運動,又突然停止的,自由落體也是有加速過程的。

所以,向UI 元素當中添加緩動效果,能夠讓元素看起來更加自然,符合預期,結合緩動和時間控制,就能夠定義整個界面的運動系統了。

左側的為勻速運動,沒有緩動,而右側加了緩動之後,看起來更加自然。

5、表演與呈現方式

為角色設置舞台,讓角色像登上舞台一樣進入場景。換句話說,你需要藉用動畫效果來進行「敘事」,考慮如何讓它進入場景,如何呈現,怎樣表演,如何借用鏡頭語言來引導用戶的注意力。

在UI 界面當中,表演和呈現方式對應的就是元素的放置位置,以及元素如何進入界面,怎麼抓住用戶注意力,進行合理的動畫編排。

當你在思考如何呈現一個音樂APP 的界面的時候,你可能需要基於用戶喜好來推薦類似歌曲,那麼喜歡/收藏音樂將會是一個重要的交互,和這首歌相關的歌曲可能需要一個獨立的界面來呈現,於是你要凸顯喜歡/收藏按鈕,要讓歌曲從列表中跳出,並且在下方列舉出相關的音樂。

6、弧形運動軌跡

純粹的直線運動的事物很少,從高出拋出的球的運動軌跡是弧形的。很多時候弧形軌跡更符合自然規律也符合我們的日常認知。

在UI 界面當中,重要的元素可以使用弧形運動軌跡來呈現,會顯得更加自然舒適,尤其是那種沿著對角線運動的元素。

7、附屬動作

在傳統動畫中,附屬動作主要是用來支撐和輔助主要動作的。比如一個正在行走的角色,他的頭部的擺動和轉動通常會被視作為附屬動作,

在UI 界面當中,輔助動作可以讓主要的動畫效果更加突出。這些元素在需要用戶反饋的地方,顯得非常有用。所有的微交互幾乎都是基於「附屬動作」的原理來進行設計的。

此處的粒子效果增強了按鈕本身的功能。

8、誇張

在很多場景當中,角色需要具備有足夠的吸引人,那麼可以使用某些誇張的動作來吸引更多的關注。

在UI 界面當中,最重要的交互可以使用誇張的動效來強化,引起用戶的注意。 Material Design 當中的FAB 動效就是一個最典型的誇張式的動效,它最終的靜態效果是很吸引人的,因為它將一個按鈕的色彩擴展到整個界面,並且在所有元素的最上層,強調到了極致。

使用FAB 動效來進行誇張

在支付類APP中使用誇張的效果來強化

9、跟隨動作和重疊動作

沒有任何一種物體會突然停滯,通常運動是一個接著一個的。還有一個更加簡潔的表述為「動者恆動」。想像一下一隻兔子從高出跳下,當兔子開始運動的時候,它的耳朵會隨著運動而自然地偏移和擺動,當兔子落地的時候,身體基本靜止之後,它的耳朵可能還在動。前一種情況是「跟隨動作」,視差滾動就是典型的跟隨動作。而後者則是「重疊動作」,前一個動作停止之後,某些部分仍然處於運動的狀態。

在UI 界面當中,可以讓元素在靜止之前,調用一個其他的交互和動效,從而讓整個動效和交互更加流暢連貫,且自然。

模態彈出框的跟隨動作,在底層動效停止之後依然運動,然後才靜止下來。

在滾動的時候,卡片和底部的元素以不同的速率運動,類似視差。

結束語

在實際的設計過程中,UI動效和交互應當根據實際的情況來靈活調整,讓整個UI界面在保持自然的情況下,在正確的位置加入不同的交互、動效以及微交互,這回讓整個交互和UI界面本身的功能更深層地結合到一起。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。