資深視覺設計師總結的6 條 UX 設計動畫原則:有用勝於有趣!

2021-02-16 設計新知

導讀:作者 José Torre 是 TomTom 公司的資深視覺設計師,有感於動畫被大量錯誤使用的現狀,結合自身多年的設計經驗,總結出 6 條動畫設計原則,通過豐富的案例介紹了在何時、何處以及如何使用動畫及其克服障礙的心得體會。


1.動畫不應在最後添加

你確定了所有交互並且視覺設計已經定稿,但是你感覺少了些什麼。這時你可能會想「是時候加些動畫點綴一下了」。這是一個巨大的錯誤,也是動畫被濫用的原因之一。在設計過程最後考慮動畫通常會和在 PPT 中添加過渡效果混為一談,這是完全錯誤的。

如果把用戶體驗看作是一個蛋糕,在大多數的情況下,動畫被認為是蛋糕頂部的櫻桃,但是我完全不同意這個觀點。我認為動畫應該是你混入蛋糕糊的另一種原料。

我為本文描述動畫快速繪製的草圖

在你繪製線框圖的時候,動畫就應該成竹在胸了。這就像在按下按鈕後,特定物體會根據箭頭指示的方向移動那麼簡單。保持簡單有助於你無需關注過多樣式,就能發現動效的目的(或特定目的的動效)。也會讓你不過於依戀動畫,因為動畫不總是問題的解決方案。如果它無法助你達成目標,棄之即可,無用的動畫將會成為最終用戶的障礙。

這就把我們直接帶入到下一條原則。

2.動畫一定要有用

多餘的動畫會佔用用戶寶貴的時間,並且用戶在獲得初次愉悅之後就會厭倦,這就是為什麼動畫需要有功能性的原因。假如你想知道哪些動畫可以幫助你,下面是一些案例。

減輕生硬的切換

沒有過渡 vs 水平滑動過渡

不管是不是設計師,我們都對此很熟悉。你在屏幕 A 中點按一個按鈕,砰!一個完全不同的屏幕(B)突然出現了。然後你會疑惑,它是從哪來的?我按下的是正確的按鈕嗎?接下來呢?如果「B」看起來和「A」很像怎麼辦?用戶可能會認為什麼都未發生。

這展示了動畫中最常見的一類,變化時刻。考慮下從屏幕 A 到 B 這次「旅程」花費了多長時間,哪些對象應在屏幕中保留,它們將如何達到那裡?但請不要過度使用,因為接下來你將發現,動畫最好在「無形」中發揮作用。

提供上下文

沒有過渡 vs 從底部滑入

有時候你進入了某個頁面,但是並不確定如何與之交互。一種幫助用戶理解的好方法就是在特定物體進入時,提供一些它的特性的線索。以文章列表舉例,滑動它們有助於用戶理解可以不停的刷動查看更多。你甚至可以更進一步,讓它們一個接一個的定時滑動出現,強調這些項目都是分開的,你可以與當中的任一個進行交互。

假如你決定點擊其中一個項目,然後它展開了那篇文章的全部內容,之前與其他信息處於同一層級的信息現在變成了主要內容。過渡動畫是加強用戶選擇的一種好方法,不僅展示了你仍然和處於選中狀態的同一物體進行交互,而且也會給你帶來更多的屏幕空間。

提供定位

當用戶界面和用戶之間的所有障礙被移除後,用戶界面變得更加真實具體起來,因此賦予用戶空間定位感變得十分重要。你可以通過讓動畫保持一致和 app 的結構易於理解做到這一點。

一個物體向左移出屏幕,如果它再次出現,從邏輯上講,應該來自其移出的地方。這將幫助你的用戶理解 app 的面貌,用戶在使用時會感覺更加舒暢。反之則會引發混亂,用戶甚至可能會認為他們看到的完全不是同一個物體。

內容從底部進入 vs 內容從右邊(箭頭的指向)進入

這同樣適用於屏幕上出現的視覺提示。想像你點擊了一個帶有向右指示箭頭的列表項,邏輯上的過渡應該是自右向左滑動,好像用戶視圖向右移動一樣,加強了用戶界面中的視覺線索。

很多時候你會看到 UI 元素與過渡動效相矛盾。這有點惱人,我認為這些是我們應該避免的,否則動畫會讓用戶看起來很突兀,因為它們違反了用戶的預期。

提供及時反饋

你曾否問過自己,我按下那個按鈕了嗎?它做了什麼?我應該再按一次嗎?回答可能是肯定的,你或許會一遍又一遍的點擊,只為確認實際上你在最初的時候就按下了。這就是為什麼提供及時反饋是重要的原因,即便 app 沒有立即做出反應。

在這個世界中,你的手指通常會蓋住點按按鈕,動畫在為用戶提供他們所需的安慰上發揮了巨大的作用。

輕微的顏色變化 vs 快速動畫

在某些情況下,你甚至可以更進一步並讓其更加吸引人。假如你的應用中有一個「星星」按鈕,它是你的「英雄」操作之一(從未見過,我知道)。這時你就可以好玩一點,來讓用戶開心。讓他們感到這是有獎勵的,用戶就會想要重複這個操作。

注意下時間,動畫需要及時被感知,否則它就會變得緩慢並且很快就被討厭。還有一點,不要讓其吸引過頭。

讓內容感覺是實時的

沒有過渡 vs 從頂部滑入

如果你的 app 或者網頁有實時的內容,比如照片,評論或者某種計數器,動畫可以幫助你完成兩件事情:順暢地添加新元素以及緩衝加載這些元素可能造成的延遲。

講故事

幾乎在每一個應用程式中,都會有一個解釋事情出錯或者介紹新特性的地方。插圖在這裡發揮著巨大的作用,它提供了一種更加視覺化、及時的方式來幫助用戶理解某個問題,以及如何將其解決。如果說一圖勝千言的話,想像一下動畫,那可是每秒30張圖片。

嘗試讓用戶微笑,即使是負面的消息。

這種類型的屏幕頁面正是動畫可以大放異彩的時機,讓用戶難忘,給用戶帶來微笑,即使情況不妙。然而,如果你的 app 總是顯示一個錯誤頁面,那麼你可能希望忽略這點。你最不想要的就是讓用戶記住每次的錯誤。

既然你了解了在何時(When)、何處(Where)使用動畫,那麼我們接下來便是如何(How)使用了。

3.動畫必須反映品牌

考慮一下一個物體從左到右的簡單動效。事實上,僅僅通過調整緩動曲線就可以有無數種方法。基於此你可以為你的動畫賦予個性。看看下面的例子,它們使用了相同的動效和計時,唯一的區別就是緩動曲線。

A:快速&活潑,B:順滑&自然,C:彈性

雖然有無窮無盡的可能性,但是在你變得瘋狂以及讓你的轉場過渡像果凍一樣彈跳之前,考慮下你的品牌、用戶以及你希望傳播的調性。如果動畫與調性不符,你的用戶會感到尷尬並喪失對你品牌的信任。想像一下,如果你的銀行 app 擁有你在遊戲中看到的彈跳風格動畫,你會信任它嗎?

雖然動畫反映品牌很重要,但是你在設計動畫時需要牢記的是下一條原則。

4.動畫不應成為唯一的英雄

動畫是扭轉局面的英雄,但不是一個形單影隻的英雄,而更像是作為一個團隊並肩作戰的忍者神龜。如果你的動畫佔據了舞臺中心,你不是在設計一個體驗,而是在強迫用戶觀看一場電影。

炫酷 vs 一致

動畫應該是體驗整體的一部分,作為視覺設計的補充和交互體驗的支持,保持克制是動畫設計的關鍵。 在大多數情況下,優秀的動畫甚至不會引起用戶的注意。

如果你正在設計動畫,你的工作不是取悅用戶,而是儘可能用一種最簡單、最直觀和最自然的方式來助其實現目標,下一條原則就是與之相關的。

5.動畫必須感覺自然

線性動畫 vs 緩入緩出

我知道「感覺」這個單詞可能有點模稜兩可,但請耐心聽我說。因為用戶直接與用戶界面進行交互,那麼在某種程度上會有一種對用戶界面遵循物理規律的特定預期。雖然你與之交互的列表會根據快慢進行回應是個好案例,但這同樣適用於其他對象。

然而,這並不意味著所有的 app 都應該有同樣的反應。在真實的世界中,如果你踢下球,它們並不會以同樣的方式作為反應。足球會飛走但是保齡球有可能讓你的腳受傷。就像我在前面的原則中提到的,這都關乎你希望品牌傳遞的調性和重點。

你必須定義應用的「材料」和重點是什麼,並展示對應的行為,但請記住如果需要應該不斷地優化調整,這樣才不會違背下條原則。

6.動畫不應該浪費時間

兩個動畫都是6秒。

動畫可被用來調整用戶的感知時間,所以在對你有利的時候使用它。對於人類的大腦來說,任何少於 0.1 秒的動作都可看作是瞬時的,少於 1 秒的動作視為無縫的。所以,如果一個過程耗時 6 秒,你可將其分解為幾個不同的的動畫。這個技巧會讓整個過程感覺更快並且讓用戶保持關注。

你也可以用動畫來偽裝一個即時動作,這個動作實際上在後臺會耗時更長。這會讓應用看起來響應更快,即便整個過程會花費比用戶看起來更長的時間。

你無法模仿現實世界中的一切,你需要考慮用戶的預期。如果你在用戶界面按了一個按鈕,你會預期一個及時反饋,因此這就不是應用物理規律的最佳時機,不要在像這樣的情況下使用緩入動畫。

好了,如果你做到了我真正相信的那些,如果你運用了這些原則,那麼你正以正確的方式來製作最佳的動畫,這提升的不僅是你的用戶界面的觀感,還有用戶對其的體驗。既然你了解了這些原則,你仍然需要越過一些障礙。

最後的障礙

如果你希望吸引用戶,你需要提供一個無縫的體驗,如果運用得當的話,動畫絕對會助你完成目標。然而這並非一帆風順,因為無論設計任何東西,你都需要為一個不斷迭代的過程做好準備。

你還需要知道如何製作原型並收集反饋,如果你的同事缺乏相關詞彙,溝通起來將會十分困難。如果不使用擬聲詞(例如「那個按鈕更像是嗖的一聲發射然後嘣的一聲爆炸,你知道吧?」),他們將無法評論你的動畫。因此我認為最好的方法就是向人們介紹下動畫的 12 條基本原則,他們在熟悉了那些術語之後就能夠以你能理解的方式來表達自我了。

最後一個要跨越的障礙就是你的開發團隊能夠/希望投入到動畫中的精力。你真的需要推動並且向他們展示在一個動畫作為良好用戶體驗固有成分的世界裡,問題不是是否要,而是在何時你們必須緊跟這一潮流?你們做的越快,效果越好。用戶將對此十分感激,而你們也會大獲其益。

原文作者:José Torre

譯文作者:孫啟玉

原文地址:https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a

————————我是分割線—————————

福利來啦! 

親愛的設計夾粉絲朋友!

下面分享一條阿里巴巴旗下口碑公司的招聘信息:

視覺設計師——口碑公司——杭州

崗位描述

1.參與移動端的產品界面視覺設計; 

2.參與口碑運營頻道、大型活動設計; 

3.參與口碑對內、對外的規範與流程的制定; 

4.參與前瞻性、創意性的產品概念設計。

崗位要求

1.有2年以上o2o或其他行業移動設計經驗,通曉移動端設計規範; 

2.設計風格具有前瞻性,風格不老套,有自己的洞察力。

3.能熟練掌握動效設計軟體;能設計ui demo;具備很強的ui設計能力或營銷活動設計能力。能獨立承擔重要項目。

3.有很強的溝通能力和演說能力,嫻熟、不做作。性格良好、合群、有良好的組織能力。

4.有豐富的興趣愛好,寬廣的知識面。對自己喜愛的事物有深入的了解;有自己的見解。

5.有大型網際網路公司工作經驗的優先;有大型營銷活動設計經驗的優先。

6.皮實、勤奮、吃苦耐勞

互動設計師——口碑公司——杭州

崗位描述

1.懂行業,懂產品,懂用戶,懂數據。

2.能高效的做好業務支持,輸出有品質的demo稿。

3.能體現設計價值,有想法,能推動,並取得成績。

4.能從各種維度分析,有理有據推動產品優化。

簡歷要求

1.有2年以上工作經驗。

2.有移動端設計經驗,項目豐富。

3.作品內容既有大局的思考,也有細節的表現。

4.作品能體現設計師的價值。

5.有大型網際網路公司工作經驗的優先。

簡歷及作品集投遞至:yanyan.zyy@alibaba-inc.com

「  設計夾  」

以創意設計類乾貨分享為主

偶爾扯淡為輔

就醬

~~


相關焦點

  • UX鼻祖諾曼老爺子的7條設計元準則
    ——諾曼為了幫助大家確定這7個問題的答案,諾曼列出了7條基本的設計元原則,每一條準則都可以作為一種特定的設計策略來使用,從而使用戶更有效且高效地使用產品。 1. 可發現性(Discoverability)
  • 我是如何從零開始設計UX作品集的
    1 向有更多經驗的設計師學習 就像我設計其他項目時一樣,我一開始都會去學習現有最好的設計,看一看有更多經驗的設計師們都是怎麼創作的。 1.1 作品集資源 我開始並不知道一個UX作品集是什麼樣子的,所以我首先查看了來自美國頂級HCI項目的學生網站。
  • 文章頻道 - 最有生命力的動態效果,都遵循這 12 條經典原則(上)
    了解了這些經典動畫原則,相信會對創造有生命力的動態元素有了基本的概念。幾天前看了文章《花了7天看了上千個交互動效神作,我總結出5個技巧》,佩服它概括得非常到位。基於實際的用戶體驗考慮的出發點,和「去繁化簡」的做法,我都非常贊同。尤其是它所指的「克制」,的確是非常多動態設計者會犯的毛病。
  • 視頻剪輯/後期/視覺設計/2D動畫/圖片編輯
    6、良好的團隊合作精神,吃苦耐勞,對工作有極強的責任心; ★投遞簡歷時請附上個人作品(急)8、視頻編輯 (偏後期)(8-10K/月)崗位職責:1、針對博主屬性,構思大綱,撰寫腳本,完成拍攝及後期工作;2、B站資深or重度用戶,有網感,了解B站各項運營規則,尋找創新點和爆點,保證內容的推送頻次和質量;3、了解MCN機構,對段視頻行業的動態及發展規律有自己的理解
  • 【設計熱點】這29個實用網站,能幫資深設計師提升效率和效果
    編者按:這篇總結來自資深設計師Danny Sapio,他根據自己的工作經驗總結了下面29個實用的設計網站和工具~ 其實如果你想要獲取設計素材
  • 【MDCC 2014】產品與設計論壇(下):硬體、人工智慧設計原則、未來...
    MDCC 2014移動開發者大會第三天下午的產品與設計論壇中,在創新工場用戶體驗總監、INWAY Design創始人吳卓浩的主持下,微軟(亞洲)網際網路工程院資深總監、小冰項目負責人李笛,聯發科技創意實驗室開發者產品部門資深經理王惟德,阿里巴巴聚划算視覺設計專家羅運廣,出門問問創始人兼CEO李志飛,美團UED移動視覺設計組Leader李小曼圍繞產品設計語言、設計未來發展趨勢
  • 每個設計都要有態度:專訪金曲獎視覺設計師顏伯駿
    從早期的展覽、視覺、動畫、廣告、書籍、書展等,到現在以唱片設計為主,顏伯駿一步步踏上他的夢想之路。 「我對音樂產業很有興趣,一直很努力與這個領域的人接觸,我的夢想就是能以設計的能力成為這個產業的一環 。」
  • 集創堂UI/UX/PM課程
    集創堂願景:讓設計師精英化,成為共享經濟一部分,在家拿北上廣的工資。集創堂設計哲學:認識你自己,然後設計。>交互理論設計與原則,互動設計方法論,案例解析,商業項目訓練,Axure軟體教學,完成邏輯思維圖,腦圖,草圖,動效最終實現互動設計原型操作,並可成功在移動端展示軟體基礎和視覺課程界面類型解析,學習iOS、Android、windows phone等各平臺的設計規範與設計原則
  • 名企設計師的UI卡片設計原則【大廠必考】
    5、能夠提升視覺體驗卡片設計會影響到頁面整體的信息層級以及視覺動線變化。卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢。有研究確認圖片能夠提升網站和APP的設計質量,因為圖片可以快速有效的吸引用戶的注意力。
  • 用戶體驗設計師的作品集要注意哪些點?
    對設計師來說,作品集既是求職時體現專業實力的一份重要證明,同時也能幫助設計師更好地回顧總結,並加以優化改進。身為設計師,作品是表達自己與設計能力的最佳媒介,這也是為何從申請學校到求職的路程上都需要一個作品集。
  • 臺灣唱片設計師顏伯駿:用視覺連接音樂
    作為華語音樂最權威的獎項,金曲獎中還專門設有一項「最佳裝幀設計獎」。臺灣的唱片設計向來具有代表性,從早期的蕭青陽到中後期的聶永真,總有那麼幾張唱片的包裝設計被人津津樂道。而如今,在2020年的第31屆金曲獎「最佳裝幀設計獎」入圍名單中,我們見到的名字已經更新迭代,新生代設計師顏伯駿就是代表之一。
  • 趣聞 | 曾操刀「臺北捷運動畫」!這次,白輻射影像用平面設計為音樂打造視覺形象
    設計上以亮麗鮮明的色塊呈現爵士豐沛的即興能量,動畫裡演奏樂器的角色也不斷跟著旋律即興搖擺。2019兩廳院夏日爵士排隊視覺形象2019兩廳院夏日爵士排隊視覺形象活動品牌的創造,是與觀眾一起成長的有機實驗過程然而面對視覺風格大方向的轉變,對白輻射、兩廳院與樂迷來說都是極具挑戰的過程。
  • 日本動畫的角色設計,一部複雜而有趣的演化史
    上期我們分享過的內容「你名」與「國家隊」的角色設計師想跟你聊聊人設那些事 就是在討論這件事情。今天,我們帶大家來回顧一下日本動畫角色設計的發展歷程吧!看看會不會有什麼有趣的事情刺激到你~一、上世紀60年代早期的日本動畫角色設計受到了迪士尼的影響。角色的瞳孔會設計成巨大的橢圓形,並且佔據了人物臉部的很大一部分;角色的身體由基本形狀組合而成。
  • 如何跟親戚解釋UX設計師是做什麼的?
    所以設計師是什麼?小編是什麼? 更可怕的曠世難題是:「如何跟親戚解釋UX設計師是做什麼的?」本著第一時間與大家分享思考的原則,響應毛主席「團結緊張,嚴肅活潑」的工作態度,在雞年的最後一刻為大家送上這篇巨獻。
  • 27份UI作品集案例和8份優秀UX設計師作品集
    Kristen DeGraff是一位產品設計師,他擅長UX和視覺設計,與很多團隊有過合作,他總是能攻克各類項目難點,並做出為以用戶為中心的設計解決方案,進而提升品牌體驗。他的作品集有簡潔清晰的導航,作品集一共分為3個部分:作品展示,關於我和郵箱。Yitong很巧妙地展示了他豐富的工作經驗,他的每份作品都有精美封面,有些是產品高清圖,有些是生動的GIF,有些甚至直接以視頻的形式展現,他還細心的在每個項目裡做出了總結。讓這款作品集脫穎而出的是設計師講故事的方式。從他的個人經歷到工作,溝通方式都非常結構化。
  • UI設計中顏色使用的10條原則
    如果一個元素比另一個元素更重要,則它應該具有更高的視覺重量。這使用戶易於快速瀏覽頁面並區分重要和次要信息。更加醒目,富有重量感的信息內容可以快速吸引用戶的注意力,我們可以運用這種視覺規律引導用戶視線,並促使用戶繼續瀏覽其下方的支持信息。3.
  • 園林景觀設計原則
    三、設計的基本原則1、首先要尊重場地、因地制宜、實時造景、就地取材,植物造景,四時爛漫。並且要符合當地的人文景觀和節令氣候。比如西安有一些大的主題公園,如大雁塔、南湖、大唐芙蓉園等,這都是一些大師的作品,給遠道而來的遊客帶來美的享受。園林設計師要有一雙發現美的眼睛,而不是標新立異,不尊重客觀地形,刻意打造一個出奇的景觀。
  • 國外火爆應用GoPro設計師關於設計的肺腑之言
    我們的團隊裡有UX主管,他們主導產品設計,還有服務中心的人來輔助主管的工作。我是主管,David是服務中心的人。David:服務中心的工作之一就是做原型。我們中不乏研究員、內容戰略專家和視覺設計師。這些人協助UX主管工作,有助於提高團隊的工作效率,並提供專業意見,保證整個設計流程的風格統一化。比如,Hilary擅長媒體管理,而我們會給她配一個擅長講故事的人,諸如此類。
  • 日本視覺傳達設計專業真的有那麼好?
    01視覺傳達設計流行於日本東京舉行的世界設計大會 說起視覺傳達設計,就不得不提日本,因為視覺傳達設計這一術語流行於1960年在日本東京舉行的世界設計大會,設計師們把有關內容傳達給眼睛從而進行造型的表現性設計統稱為視覺傳達設計,內容包括:報刊雜誌
  • 讓數據更美,B端圖表視覺設計思考
    我們在進行B端平臺設計時也在思考:如何讓圖表清晰的傳達信息,同時帶來美觀的視覺感受。為了達到清晰傳達和視覺美觀的目標,我們結合實際項目,進行大量探索及思考,梳理總結了一套適用於B端後臺類產品的圖表設計思路及方法,涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏鬥圖等各類常用圖表類型。