移動使用者體驗設計新要素

無論是在一系列草圖間快速切換,還是螢幕與螢幕之間的切換,或者其它類似場景,想要在這些場景切換中加入動效進行完美過渡,並不是一件容易的事情。這是一門需要耐心的藝術,需要用眼睛仔細的觀察 ,人和物體如何在時間和空間兩個維度中運動與變化。

這種非常巧妙的動效和動畫,正在慢慢成為一種新的、有意思的移動體驗設計要素。並值得使用者體驗從業者去學習,最終學會如何有效率和優雅的使用在自己的設計中。好的動效和過場動畫可以傳達給使用者更加清晰的當前所處場景和層級關係,甚至帶給使用者一種愉悅和有趣的感受。然而,過多的或者太誇張的動效,則可能毀掉一個完美的移動使用者體驗。所以想要巧妙的並且藝術的在設計中運用動效的第一步就是要理解動畫藝術的原則和原理。

談到對動畫藝術理解,可以說沒有人比在沃爾特-迪士尼工作的兩位傑出的動畫師Ollie Johnston和Frank Thomas理解的更加深刻。幸運的是,這兩位動畫師把在迪士尼動畫製作過程中的總結出來的動畫的法則寫成了一本書,分享給大家《The illusion of life :D isney Animation》。

讀到這裡你可能想知道到在移動使用者體驗設計中動畫需要扮演什麼角色。雖然動畫藝術的起源是在電影和電視行業,但從一開始動畫藝術就在電腦和數位媒體藝術領域中體現了重大的價值,而現在行動裝置中也開始運用動畫和動效。不論是螢幕與螢幕之間的過渡,還是UI元素與手勢進行交互,動畫和動效都已經成為行動裝置介面設計的重要元素。設計師可以用動效引導使用者沿著自己設計出來的體驗路徑進行操作。

還是從那兩位動畫大師說起,後文會從他們出版的書 《The illusion of life :D isney Animation》中摘抄一部分來解釋動畫的12條基本原則。儘管這本書主要闡述的是電影和電視領域的動畫,但這些基本原理在當今的行動裝置上仍然適用。如果能夠把動效精巧的運用在行動裝置介面上,不僅能夠提升行動裝置使用者體驗,甚至會讓使用者感受到一點點夢幻的感覺。

a07.04 (1)

《The illusion of Life: Disney Animation》描述了動畫的12條基本原則

下面書中描述動畫的12條基本原則

  1. 擠壓和拉伸
  2. 預期
  3. 展現
  4. 連貫動作法和關鍵動作法
  5. 重複與迴圈動作
  6. 慢入和慢出
  7. 弧度
  8. 次要運動
  9. 時機
  10. 誇張
  11. 可靠的草圖
  12. 感染力

 </p>

動畫12條基本原則

原則1. 擠壓和拉伸

人和物體都有其固有的品質。 當物體移動時,其移動時的狀態往往反映了物體的剛性。在真實世界中的物體,比如說書架和木椅,屬於剛性比較強,靈活性比較大。而柔軟的曲面,像衣服和樹葉等物體,則剛性比較差,但有更好的靈活性。擠壓和拉伸這條動畫法則就用來精確的表現一個物體的剛性如何。

a07.05

像一個盛滿水的氣球有有機和柔軟曲面的物體,就在其外形上就有一定程度的靈活性。擠壓和拉伸這一動畫原則就恰好能描述這種狀態。

a07.06
a07.07

上圖是用Flipboard 和iBooks作了一個對比,Flipboard表現出的在UI元素是堅硬的像木板似的。與此相反,iBooks的介面的過渡則用擠壓和拉伸原則表現了像真實世界書本翻頁的那種柔軟的效果

原則2. 預期

當我們試圖描述一個物體或者人物運動的狀態時,為了讓這個運動顯得更加真實,有三個獨立的階段需要去考慮:

  1. 在運動發生前的準備階段
  2. 運動過程本身
  3. 運動產生的結果

比如說,一個棒球擊球手在擊球前準備階段會把身體弓起來的狀態,一個彈簧壓縮後彈起前的那個狀態。預期這個原則就是描述物體運動前的準備狀態,就像是精心策劃一個舞臺劇場景——燈光 、佈局、道具和人物的組成等,這一切就是為了給使用者一個線索什麼即將發生。

a07.08

一個保齡球手扔出球之前蹲下的狀態,這個姿勢和動作就是預期原則所應用的一個最好的例證

預期原則在移動使用者體驗領域中同樣適用。預期原則就是讓使用者有一種預感即將發生什麼。舉例來說,這個原則可以運用在「閃屏」介面的視覺設計中,也可以用在不同體驗的過渡中,還可以用來説明增加手勢的可見度。總得來說,預期可以為元素在介面中將要運動的速度和方向還有哪些手勢可以使用提供線索。

a07.09

這個光圈的動畫在很多智慧手機中的camera應用中被使用,它描述了使用者在進行拍照前準備的那個階段。

a07.11

這個Palm的卡片流的UI設計給了使用者關於手勢運用的可見度

a07.10

這個windows phone 7鎖屏跳動的動畫也是用了預期原則,讓使用者可以提前瞥一眼windows phone 7動感的瓦片UI設計

原則3. 展現

比較善於賣房的的房產經濟經常按照一個流程去「展現」各個房間,為的就是讓各個房間的使用展現的非常清楚。展現原則在動畫裡的功能和房產經紀人非常相似,好的展現方式可以讓觀看動畫的人清楚的理解動畫想要說明的中心思想。在移動使用者體驗領域裡,在介面過渡和切換時,展現這個原則至關重要。好的對話模式會把高亮,顏色,佈局和動效精確的展現並傳達到使用者的眼中。該原則應用合理的會讓行動裝置使用者感受到流暢和舒適,該原則應用不合理會讓使用者感覺到雜亂和脫節。

a07.12

右邊這個展現的比較好,清楚的表達出兩個人物在進行著對話和討論。而左邊這個展現的比較差,沒有描述出兩個人物之間的動態,讓所要表達的中心思想不明確。

在移動使用者體驗設計中使用動畫和動效時,如何去展現是一個難以描述但又非常重要的要素。在創造natural user interface過程中最大的挑戰就是缺少一個概念上的起始點。因此很多新接觸 natural UI的使用者在體驗觸屏導航體驗時,總是感覺到沒有一個穩定的起始點。如果能在移動使用者體驗設計中把動畫和動效合理的展現出來,使用者就能夠清楚的理解整個介面並願意與其發生交互。

a07.13

舉例來說,Keynote的iPad 版本動效的展現就比較合理,使用者可以清晰的感覺到哪個檔正在編輯,所編輯的檔在所有檔中處在哪個層級。這種動效,讓使用者可以更清楚感受到當前所處位置並更好的理解整個UI介面

原則 4 連貫動作法和關鍵動作法

在動畫草圖繪製過程中經常使用連貫動作法和關鍵動作法。為了抓取非常快速且不規則的運動,動畫師經常使用連貫動作法把整個運動過程中每一幀都抓取出來。而關鍵動作發則用動作的關鍵幀和關鍵幀之間的補間幀來描繪整個運動的過程。

a07.14

上面這幅插圖描述了連貫動作的草圖繪製方法,而下面這幅則描述關鍵動作草圖繪製方法

大部分移動端用到的動畫和動效都可以用關鍵動作法進行繪製,關鍵動作法使用起來工作量較小也能滿足大部分移動端動效的表現。針對特別複雜且不常規的運動動效則可以選擇連貫動作法進行表現。

a07.15

植物大戰僵屍就是使用的關鍵動作方法來繪製的

a07.16

像水果忍者這樣運動軌跡比較複雜的遊戲,就可以用連貫動作法描述動態運動軌跡

原則5 重複與迴圈動作

想像一下一隻有著比較大的下頜的狗,當這只狗搖頭的時候,它的下頜兩邊的皮膚晃動起來的狀態。這就是動畫的第五條原則:重複與迴圈動作。預期這條原則解釋的是動作前準備的狀態,第五條原則闡述的是動作進行直到結束的過程。大多數動作一般來說不會突然的結束,而是重複漸漸變弱直到終止的一個過程。重複與迴圈動作描述物體本身(狗的頭部)停止運動,物體的一部分像(狗下頜旁邊的皮膚)仍然保持運動的一種狀態。

a07.17

重複與迴圈動作描述了物體的不同部分以不同的速率進行運動的狀態(狗的頭部下頜兩邊的皮膚)

現在想像一下上面圖片中的大狗和它的主人走在人行道上,狗的整個身體正在移動,但是狗腿移動的頻率,狗的尾巴晃動的頻率,還有狗的頭部晃動的頻率各不相同。迴圈動作原則就是用來描述一個物體的不同部分是如何按照不同的頻率進行運動的,即使運動頻率差異非常小,如果能精確描述出來,會讓動畫看起來更加真實。通常來說,在下一個動作開始前,上一個動作都不會完全結束。在移動端體驗設計層面來說,需要多個UI元素整體考慮動效的重複和迴圈的速率,這有助於解釋清楚各個UI元素之間的關係。

a07.18

採用動態tile的windows phone就是一個重複與迴圈動作的很好的例證。這些動態的tiles並不是按照一個整體運動,不同的tile運動按照不同的速率。

原則6:慢入慢出

無論是一輛車的啟動過程還是一個完全壓縮的彈簧突然展開的過程,物體運動開始時都需要慢慢加速,物體停止的過程都是慢慢減速停止。而慢入慢出原則就是為了準確的描述人和物體在一個空間中運動的固有的慣性。

在動畫中,有一個簡單的方法描述這一過程:在物體運動開始和結束加入更多的幀,在運動過程中使用較少的幀。

a07.19

動畫中,描述物體本身的慣性,在運動開始和結束加入更多的幀。

慢入慢出原則適用于描述一個角色在兩個狀態之間的運動,比如說坐下和站起;也可以描述物體的運動,比如說一個球掉在地上不斷彈起的過程。移動端體驗設計中是在一個螢幕後面的世界進行設計,如果能夠引入一些真實世界中的物理定律,則會讓使用者感覺到更加真實。無論是一個清單或者資料的滾動,還是一個app打開的動效,慢入和慢出原則會讓動效的體驗對使用者來說更加自然。

a07.20a07.21

很多app的清單滾動都運用了慢入慢出原則,更多的幀在運動的開始和結束時。這也體現真實世界中物體的慣性定律

a07.22a07.23

iPhone和iPad在home進行滾動時也同樣使用了慢入慢出的原則

原則7:弧度

一般來說,物體在空間中都是沿著一定的軌跡運動,這個軌跡受到推力、風阻和重力影響,而不是隨意運動。 此外,物體運動軌跡一般都不可見,除了一些煙火,還有汽車刹車片刹車時的火花,這種情況下,火花的運動軌跡可見。

a07.24

一般來說物體運動軌跡都是不可見的,除了像上述圖中的火花,可以看見運動軌跡

一般來說大部分物體運動軌跡人眼是無法觀察到的,但是物體運動軌跡是有一定規律的。剛性和機械性物體像火車、汽車和自行車、它們總是試圖沿著直線軌跡進行運動。而一些自然有機形態的物體的運動軌跡總是有一定弧度的。

為了讓動畫看的更真實,在設計過程中要把這些規律在物體運動過程中要表現出來。

a07.25

自然中的物體像魚和水的運動軌跡都是有一定弧度的,如果在移動應用中表現亦應如此

a07.26

Android系統中的UI元素都是按照直線進行運動的,給人一種機械和現代的感覺

原則8:次要運動

想像一下一個松鼠在草坪上跑動最終跳躍到一棵樹上的過程。如果用動畫描述,在松鼠的腿部一定會儘量表現敏捷、輕快、活潑的感覺。而至於松鼠的尾巴,也是一種敏捷的,不停起伏的運動。如上文所述,尾巴運動頻率肯定與腿部不同。尾巴運動與腿部運動相比可以稱作為次要運動,用來輔助表現腿部的主要運動。a07.27

松鼠的腿部運動作為主要運動,尾巴運動作為次要運動,兩者結合在一起表現讓動畫看起來更加真實

松鼠的尾巴是一個比較典型的次要運動,它支援著動畫中描繪腿部的主要運動,同時並不讓觀眾分心。次要運動就是用來加強主要運動動畫的感染力和表現力,但又不搶主要運動的吸引力。再舉一個例子,就是在iPhone 的郵件應用中點擊一個URL。主要運動是瀏覽器視窗浮現到螢幕上,而次要運動是郵件應用慢慢消失在螢幕後。兩個運動同時發生,但郵件應用消失的次要運動起到的是對瀏覽器出現的一個輔助說明

。 1367836355_35

郵件打開連結彈起瀏覽器的例子解釋主要運動和次要運動

原則 9:時機

在動畫中,時機意味著一切,是動畫的靈魂。當我們為某些物體或者角色甚至生命本身感到太過緩慢或者太過迅捷的時候,這就反映了時機的重要性。在動畫世界裡,時機就是當一個運動從開始到結束所使用的幀數,這在影片中就直接表現成動作的速率。時機之所以是動畫師必須掌握的技巧,是因為時機説明反映物體和角色的物理屬性如重量、大小和體積,而且時機可以展現物體遵守真實世界的物理定律,此外時機還可以説明表現一個物體或角色的心情、情感狀態和個性。比如,關於時機的微妙調整可以反映出全神貫注的 Wile E. Coyote(北美草原小狼)興奮的追逐著跑的很輕鬆和愜意的Road Runner(天生跑的很快一種動物)

a07.29

無論是一個清單滾動的速度,還是一個不同介面切換時動效的節奏。時機的把握是一個很微妙又非常重要的事情,對於移動端體驗來說,時機的把控需要多打磨和練習。在設計過程中,需要花時間想清楚UI元素在不同的速率和節奏的運動中想要說明的是什麼,同時需要花時間進行試驗找到合適的時機。

a07.32

iPad自帶的圖片展開方式類似于一疊卡牌,它的展開時機的設計要超過真實的速率,表現出一種輕鬆和快速的感覺

原則10:誇張

所有動畫原則中最能夠讓動畫變得有趣就是誇張原則。這條原則讓所有運動變得更加動態、自然和有趣——比如說經典人物 Ren 和 Stimpy。

加拿大動畫師John Kricfalusi 在Ren和 Stimpy 系列動畫中大師級的運用了誇張的手法

動畫中如果完全沒有誇張的元素可能看起來會非常的準確,但會讓人感覺非常的機械和呆板。要想掌握誇張在動畫中的運用,首先要確認在一個運動中的各個元素,然後確定出哪些元素在運動過程中可以改變形狀和大小等等,通過這樣的方式給動畫加入一些戲劇性和表現力。當然,誇張並不意味著把物體形狀進行極度的扭曲。

Disney關於誇張的經典定義是這樣的:在保持真實的基礎上,展現成一個更具表現力的樣式。當誇張的原則運動在移動端體驗時,需要在整體上有所控制。比如說一個場景有多個元素,運用誇張原則時需要考慮各個元素之間的平衡,避免某個元素過於誇張反而讓使用者對整體感到迷惑。

a07.34

iPad home頁面和打開app之間放大的動效也是一種誇張的手法,這讓打開app的過程感覺有趣,像一個彈簧蹦床的感覺一樣

原則11和12:可靠的草圖和展現

Johnston and Thomas 關於動畫的12條原則中的最後兩條可靠的草圖和感染力,是與角色動畫最為相關的兩條,也是和移動使用者體驗最不相關的兩條。可靠的草圖說的是通過體積和尺寸在三維空間中給物體和人物合適的體積和重量。可靠的草圖需要動畫設計師理解三維構成基礎知識,包括解構、重量、平衡還有光和影。 a07.38

動畫中可靠的草圖強調三維構成,精確的結構解剖,並且對重量、平衡、光和影都有把控。

動畫中一個角色的感染力和一個演員的魅力一樣。一個有感染力的角色不一定要令人同情,因為壞蛋和野獸同樣可以十分有感染力。最重要的是動畫的觀看者覺得角色真實和有趣。

在設計中表達動效的方法

Johnston和Thomas總結的12條原則定義了動效表現的基本框架,但我們仍要面臨如何把動效結合到產品中這一核心問題。首先,要把動效看作成設計素材的一種。緊接著,嘗試把動效融入設計流程中,其中這幾個階段是實現動效魔力的關鍵點:

  1. 草圖階段
  2. 線框圖階段
  3. 原型階段

草圖

你應該在草圖階段就開始思考動效。就像動畫角色通過動作來表達它的性格一樣,介面和其中的元素也通過動效來表達你賦予它們的體驗特徵。早早開始把關于轉場和成段動效的想法畫出來,這樣能夠説明你思考自己想要傳達怎樣的體驗特徵,進而思考如何利用動效把它表達出來。

<p>a07.39

這個手繪動畫故事板子描述了打開iTunes的細節過渡動畫基本上是用黃色貼紙完成的

線框圖

線框圖傳達介面流程,很自然,轉場動效也是介面設計流程的一部分。完全可以利用圖片或圖示來表達關於動效的想法。線框圖可以把設計思路傳達給開發人員和決策人員,文檔中說明動效的圖示能讓大家都意識到動效的存在,並且讓他們開始談論這件事。

a07.40

這個線上框圖文檔中表現的動效細節文檔基本上是用圖片和插畫進行描述的

原型製作

草圖和線框圖在動效設計的初始階段是非常有效的,但是沒有什麼能夠代替真實的效果。使用一些帶有動畫設計的原型工具是設計師開始熟悉並掌握動效設計的一個非常有效的步驟。像powerpoint和keynote等原型工具可以便捷的製作一些低傳真的動效,讓設計師對自己的動效設計進行打磨並更好的把想法呈現給團隊中的其他成員。

a07.41

在keynote上使用keynotopia的模版可以輕鬆用真實的控制項類比各種動效的想法

在移動端專案使用動畫原則的時候一些小的建議

1. 有限制的使用動效

在移動端上過多的使用動效會是一件讓人很厭煩的事情。雖然好的動效讓人感到愉悅,但不要濫用。動效的表現的巧妙和精巧,不然動效會讓好的使用者體驗變差。

2. 互補性原則

無論是動畫中的一個場景還是移動端中的動效,上述的動畫原則都不是孤立使用的。與此相反,大多數好的動效就像一個交響樂團一樣,把上述的這些動效原則融合在一起使用。隨著經驗的增加,慢慢的設計師就會藝術的把動畫的這些原則融匯貫通的使用起來。

3. 動畫的輔助性角色

電影中,動畫是講述故事的輔助。在UX領域中也是一樣的。動畫對移動使用者體驗是一個支援性的角色。在進行動效設計的時候,確保動效對交互起的是解釋說明,而不是讓使用者感到困擾。

總結

動畫原先只是在卡通和電影領域中使用,現在動效已經成為移動使用者體驗設計領域中一個重要的要素。動效不僅能夠聚焦和解釋一些交互關係,還能夠給移動端體驗帶來一點性格和魔力。如果能夠花一些時間學習動效,必然能夠讓移動端體驗有更多色彩。

原文作者:

原文連結:HTTP://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

感謝你的閱讀,本文由 騰訊ISUX 版權所有,轉載時請注明出處,違者必究,謝謝你的合作。
注明出處格式:騰訊ISUX (HTTP://isux.tencent.com/mobile-animation.html)

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.