中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作者 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.動畫必須反映品牌

考慮一下一個物體從左到右的簡單動效。事實上，僅僅通過調整緩動曲線就可以有無數種方法?；诖四憧梢詾槟愕膭赢嬞x予個性。看看下面的例子，它們使用了相同的動效和計時，唯一的區別就是緩動曲線。

A：快速&活潑，B：順滑&自然，C：彈性

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

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

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

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

炫酷 vs 一致

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

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

5.動畫必須感覺自然

線性動畫 vs 緩入緩出

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

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

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

6.動畫不應該浪費時間

兩個動畫都是6秒。

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

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

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

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

最后的障礙

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

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

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

延伸閱讀：

Transitional Interfaces?by?Pasquale D’Silva

UI Animation and UX: A Not-So-Secret Friendship?by?Val Head

Invisible animation?by?Steven Fabre

Creating Usability with Motion: The UX in Motion Manifesto?by?Issara Willenskomer

原文作者：José Torre

翻譯作者：孫啟玉

譯文來源：https://zhuanlan.zhihu.com/p/27620327?utm_medium=social&utm_source

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

本文由 @孫啟玉 授權發布于人人都是產品經理，未經作者許可，禁止轉載。