好的動效如何讓你的設計事半功倍?

1 評論 4774 瀏覽 23 收藏 11 分鐘

本文結合具體的案例解析,一個好的動效,在哪些方面氣到對可用性的支持。

在正文開始之前,先來聽一個小故事。

某天,老板對新來的T同學說:

“來,給這個產(chǎn)品做個動效吧,明天上線?!?/p>

T同學心想,大展身手的機會終于來了。在嘔心瀝血下載了10種不同的動效軟件,看了10086篇中英文教程后,終于做出了一款堪比PPT百葉窗效果加強酷炫版3.0的動效,信心滿滿地提交了。

你們猜結果怎么樣?

老板對其勤奮的精神大加嘉獎,但這個驚天地泣鬼神的神奇動效最終也是沒有上線。

“說好的乙方都喜歡五彩斑斕的動態(tài)黑呢!”借酒澆愁的T同學哭著對我說,童話里都是騙人的。

確實,但好的動效,不應當僅僅是外表光鮮的童話,合理地支持可用性,才是它的內(nèi)核。

擁有15年經(jīng)驗的動效體驗設計師Issara Willenskomer曾經(jīng)撰文:《動效創(chuàng)造可用性:動效中的用戶體驗宣言》,表達了他對一個合格動效的態(tài)度:即一個合格的動效動效應當在以下四個方面起到對可用性的支持,分別是:

接下來,就讓我們結合具體示例,看看它們是如何進行實際應用的。

一、符合預期

此處的期待我們可以理解為用戶的心理模型,即用戶對于產(chǎn)品表現(xiàn)的普遍認知。動效作為界面的重要元素,應當起到減少實際表現(xiàn)和用戶心理模型之間差距的作用,即通過符合“用戶對物理世界運動規(guī)律的普遍認知”,來增加產(chǎn)品的可用性。

可以感受一下,下圖的緩動動效明顯不符合我們?nèi)粘J熘淖匀贿\動規(guī)律,在沒有外力介入的情況下,組件突然加速,這樣不僅不能增加可用性,甚至會損害體驗,讓用戶疑惑、分心。

對比之下,天貓小黑盒的頁面動效就很好地配合了品牌本身“盒”的概念,在下拉、轉動的動作中都參照了盒子的運動樣式,符合用戶對其品牌的期待的同時,還可以加深品牌印象:

二、體驗連續(xù)

這里的連續(xù)性包含兩個方面的內(nèi)容:

  • 一是使用流程的“連續(xù)性”;
  • 二是將多個場景連接在一起,構成整個體驗場景的“一致性”。

使用流程的連續(xù)性,即用戶的體驗流程是完整的,不是被突然打斷的。一個常見的例子就是瀑布流,利用動效,可以讓用戶在等待加載的過程中依然處于“連續(xù)”的體驗感受中,而不是戛然而止,同時也可以幫助用戶產(chǎn)生心流體驗。

下圖Medium的文章瀑布流加載效果就很好地增強了這一點。在下拉的loading后,文章以漸現(xiàn)的效果出現(xiàn),相比之下,知乎日報的效果就要生硬很多,每次加載都有一種生硬的截斷感。

體驗場景的一致性,則是指在整體的體驗流程中,保持整體邏輯和設計語言的一致。我們會遇到很多不同場景的切換,例如網(wǎng)購時從登錄賬號到搜索商品、瀏覽結果等等。這些細分場景本身應當擁有一致的設計語言,在使用動效連接場景的時候,也應當和前后設計語言保持一致。

如下圖,在名畫推薦軟件“Daily Art”中,滑動當日推薦畫作的卡片時,卡片會產(chǎn)生了形狀大小上的變化,隨即從圖片場景轉換到了文字場景;在從文字場景回歸到圖片場景時,依然延續(xù)了先前的變化邏輯,卡片從全屏幕縮小回原本的大?。?/p>

三、輔助敘事

用戶使用產(chǎn)品的過程,可以類比為與產(chǎn)品的設計對話的過程。在這個過程中,動效就像是設計語言中運用的修辭手法,將語言中的元素鏈接成一個更加完整的體驗故事,例如可以使用隱喻引導用戶進行操作。

京東“早點上新”頻道首頁中輪播的盤子,就隱喻了用戶可以對該部分進行滑動操作:

在敘事層面上,動效還可以幫助進行對界面元素性質的輔助闡述,例如下圖,進入京東App的“簽到”處時,我們可以看到京豆的數(shù)字變化上升的動態(tài)效果,體現(xiàn)了它的可增加性:

除了功能上的輔助敘事,動效還可以幫助傳遞產(chǎn)品的性格和情感,和用戶構建起更為緊密的聯(lián)系。例如時間管理軟件Forest,在進入圣誕月后便在頁面中加入了雪花飄落的效果,以烘托冬季的氣氛,也增加了用戶“種樹”的實感,十分符合其小而精致的文藝調性:

需要注意的是,就像日常對話中,我們使用修辭(例如類比)是為了讓他人更好地理解自己的意思,連篇累牘的華麗辭藻只會讓聽者一臉懵圈。動效設計也是如此,不要讓它的鋒芒蓋住了設計本身想傳達的內(nèi)容。

例如Issara在他的文章中所舉的例子:

這張圖中,icon和文字作為信息上的共同體,應當成組出現(xiàn)。圖中的效果將文字與icon各自拆分設計了獨立的動作,對其本身應當起到的敘事作用造成了干擾。

四、合理關聯(lián)

動效于界面設計而言,帶來的核心價值之一,就是拓展了屏幕展示空間的維度,設計師可以利用動效來進行更加豐富的層次設計。但需要注意的是,當界面包含的維度增加時,不同元素之間互相映射的關系也會變得更加復雜。

當我們設計動效時,每個運動的界面元素之間、多個界面元素構成的組件之間所涉及的空間、時間和層次變化都應當具有合理的關聯(lián)性,以此來清晰地告訴用戶“這是什么”、“它是怎么出現(xiàn)的”、“我可以利用它去到哪里”,從而使用產(chǎn)品達成決策。

在關聯(lián)性中,最為常見的動效之一即表現(xiàn)父子關系(Parenting)的動效:

下圖就是一個使用了父子關系的動效例子,在滑動按鈕的同時,氣泡處的表情也會隨之變化,從中我們既可以理解二者是從屬關系,一個元素會隨著另一個元素的變化而變化。

五、小結

通過以上的內(nèi)容,我們可以了解到一個好的動效是如何幫助產(chǎn)品提高可用性,優(yōu)化使用體驗的。在日常的設計中,我們也需要反復提醒自己,檢查自己設計的動效是否能在以上四個方面輔助提高產(chǎn)品的可用性,從而利用設計語言將產(chǎn)品內(nèi)容更加清晰地傳達給用戶。

參考閱讀:

《動效創(chuàng)造可用性:動效中的用戶體驗宣言》:https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

注:本文涉及故事純屬虛構,如有雷同,那我們交個朋友吧。

 

作者:rt,公眾號:未知素設計

本文由 @rt 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 東拼西湊的文章

    來自浙江 回復