現在，讓我們開始探索2020年動態視覺設計領域的趨勢指南。
Graphic Tools Lab
wannerstedt
趨勢解讀
1. 注重差異性避免趨同，尋找創意和視覺上的新角度。
2. 視覺上吸收借鑒平面設計、字體設計、室內設計等其他設計領域。嘗試做加法，融合不同元素進行混搭，增加動態和視覺豐富性。
4. 寫實性、敘事性題材繼續增多，ANIMATION與MOTION的邊際變得更加模糊。
5. 更加注重技術帶來的視覺及形式突破，嘗試不同領域的應用與跨界融合。程序視覺、游戲引擎技術的應用、AR/VR。
總的來說，就動態視覺設計趨勢而言，2020年將是大放異彩的一年。提及發展大勢，不同的設計趨勢報告都不約而同的指向動態設計，足以見得行業內對動態設計領域發展的重視。而各類不同的動態視覺風格，預計將為觀者帶來更多極致的視覺體驗。
每一個設計案例都代表著來自世界各地的設計師們的思考和心血，感謝他們的付出和努力。希望我們的分享能帶大家新的靈感和收獲，讓更多人看到這個行業的價值和成長。
感謝閱讀！
作者 | SeenVision
來源 | SeenVision見所未見 (id:Seen_Vision)
功能性動畫是具有明確的、合乎邏輯的目的的微妙動畫。它能夠降低用戶在認知上的負擔，阻止毫無征兆的變化出現，并在不同頁面、元素、層級間建立起一套更好的空間關系。還有重要的一點就是，動畫使用戶界面更符合真實。
通過在用戶界面間游刃有余的出現，并改變它們的形狀和大小，動畫可以使用戶界面散發出生氣。你應該在具有導航意義的上下文間切換時、在解釋頁面元素的狀態變化時、在強化元素的層級關系時考慮使用合理的動畫來完成這期間平滑的過渡。
成功的動態設計具有以下六個特征：
1、應答式的
在UI設計領域，視覺上的反饋是極其重要的，好的視覺反饋之所以起到作用是因為它符合了人們在認知上的自然預期。想想看，在真實生活中，按鈕，控件和其他物品大都能夠針對我們的操作做出友好的響應，而這種真實的體驗也應該遷移到界面設計中。
用戶界面應該精確的在用戶觸發動作的地方及時響應，并顯示出觸發的動作或元素本身跟新界面間的聯系。對用戶來講，能夠在應用程序中觸發一定操作后意識到發生了什么是非常棒的感覺。
2、關聯的
關聯性是以新的方式創建出那些在元素或動作的作用下所觸發的新界面。關聯性背后的邏輯是幫助用戶理解剛剛在視圖布局中發生的變化以及觸發的源頭。
下面可以看到兩個關于菜單轉變的例子。例1中，菜單出現在遠離觸發點的位置，這種方式打破了兩者間的關聯性。
在例2中，菜單就是從觸發點位置出現，恰似菜單和觸發點綁定在一起，其關聯項不言而喻。
另一個例子是在特定條件下功能變化的操作按鈕。“播放” 和 ”暫停” 可能是最普遍的一個例子。 將播放按鈕變換為暫停按鈕意味著兩個動作是關聯的，在操作時按壓一個按鈕后就將顯現另外一個。你應該在一個動作的不同狀態間嘗試使用這種過渡動畫，使它看起來平滑而不失連續性。
3、自然的
避免出現意外的轉變。每一個動作都應該能映射到真實世界中。在真實世界，一個物體加速或減速要主要取決于自身的重量和接觸面的摩擦力大小。類似的，在一個用戶友好的界面中，開始和結束都不要是突如其來的。
下面是一個很好的例子，用戶選擇一個列表項后放大查看其詳細信息，在卡片的擴展過程中，原本的小卡片遵循了一條面向終點的弧線型軌跡。
4、 有意的
用戶引導應該在合適的時間出現在合適的地點。動態變化，因其本質影響，在一個用戶界面中擁有最高的吸引力。文本段落和靜態圖像都無法與其相比。一個設計優秀的轉場能帶領用戶從一個交互到另一個交互。
對于一個新手用戶，他常常不能預測一個將要發生的交互動作會是怎樣的，而合適的動畫則能夠指引用戶且不會讓用戶覺得內容的變化太過突然。
Mac OS在最小化窗口的時候使用一個功能性的動畫效果。這個動畫將窗口的兩個狀態連接在了一起。
另一個很好的案例是下面這種父子層級間的轉場，用戶選擇了一個列表項或者卡片元素，然后經由動畫方法展開其詳細信息的視圖。這樣的轉場效果允許了用戶在變化前后保持上下文聯系。
5、快速的
元素在不同的位置或狀態間轉變時，其運動應該足夠快到不用讓用戶等待，但同時也要足夠緩慢好讓用戶能夠理解這個過程（快速的同時保證用戶理解）。
不要讓動畫太慢，好像是產生了不必要的延遲得讓用戶等待一樣。
減緩許多元素的變化速度會延長整體動態變化的時間。
讓你的動畫足夠快保證用戶不必等待這個過程的逐漸完成。
想想看，很多轉場用戶是會頻繁看到的，你一定要讓這個過程夠快，別讓用戶總是等。這個時間應該控制在300ms以下。
6、干凈的
轉場動畫應該避免一次性做太多事情，試想在有多個項目需要朝不同方向或不同路徑移動時，看上去不混亂才怪。
轉場應該清晰、簡單而連貫一致。對于動畫而言，少即是多。因此我們應該關注于對用戶起到實用性作用的動畫效果。
結論
最后重要的一點是，動態變化絕不是隨機的，每一個動作的背后一定有其實際目的。它幫助指引用戶關注于那些重要的地方而不至于迷失自己。不管你的應用程序是有趣好玩的還是嚴肅直接的，使用合適的動態設計原則必將能夠幫你向用戶提供一個干凈而富粘性的用戶體驗。
譯／三達不留點gpj
翻譯自：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e#.c2xe0at0c
在設計領域，動態設計常以精美流暢的體驗過程來描述元素的空間關系、功能性以及意圖。可能聽起來像是一個很大的概念，但如果利用得當，它便是微妙而自然的。體貼的動態設計能夠提升用戶在傳統設計元素上的體驗。
所以讓我們來談談動態設計的基本要點，為何以及何時你想在你的界面設計中用到它，它又是如何幫助你提升你的用戶體驗的。
基于動態的設計
每一個動態設計都好似講述著一個生動鮮活的故事。它詮釋了一個程序是如何組織有序的，以及用戶能用它來做些什么。這種動態設計驅動了整個用戶界面的體驗——它似乎重新定義了導航一樣，通過添加一個新的層級上的深度交互創建出一個更加自然的體驗過程。對于每一次按鈕點擊和屏幕轉場來講，似乎都有一個故事發生，而正是良好的動態設計來幫助你講述這個故事。
為何動態設計如此重要？
當用戶跟你的產品產生交互時，他們可能會好奇下面幾個問題：
“這里什么最重要?”
“我怎么知道下一步要做什么?”
“我怎么知道我已經完成了我的任務?”
諸如這樣的問題向我們揭示了使用動態設計來提升用戶體驗的好時機。通過這種設計便回答了以上問題：
動態能夠吸引用戶的注意力并會在用戶完成點擊/手勢操作后暗示將會發生什么。
它幫助你的用戶適應用戶界面并在不同視圖間提供了指導焦點。
它提供了一種視覺反饋。
除此之外，動態設計向用戶體驗帶來了另一個重要的事情：愉悅感。相比于冰冷嚴肅的產品，我們都欣賞那些親切而令人愉悅的產品。這就是為何設計師們應該嘗試找到某種解決方案，以使用戶在使用上感覺更自然流暢并能喚起用戶情感上的聯系的原因。
動態設計語言
動態設計允許我們接觸到更好的交互，并更容易的理解其變化過程。在動態設計的元素中，我們可以看到各種各樣的形式，包括過渡轉場、動畫和甚至是模擬3D深度的質地紋理。
動態設計的主要挑戰是如何使得用戶不從他們正在嘗試做的事情中分心出來。
吸引用戶的注意力
動態可以將用戶的注意力吸引到某個特定位置——或者幫用戶從整體中區分出某個部分。優秀的動態設計能夠使得用戶界面更具預見性和更易導航。它可以幫助用戶的眼睛看到一個新的對象來自哪里或對象隱藏到了哪里，同時為用戶提供了一定的線索，指示出要發生什么。
使界面元素間空間關系合乎邏輯
界面的狀態變化一般情況下會伴隨生硬的斷層，導致用戶在認知上很難跟上進度。在認知科學中，這被稱作“變化盲視”——即當視覺刺激突然變化時，用戶卻無法觀察到的現象。用戶需要去理解眼前的事物從何而來，以及如何才能重新找到它們，這樣他們就不會感覺到前后之間的斷層。而這只是因為在現實世界中這種斷層并不存在。
動態設計通過定義了屏幕和元素的空間關系來填補了這塊理解上的缺口。它幫助用戶適應這種圖形界面并確立其內在的視覺關系。如下面的例子中，用戶被引導到下一個視圖和界面轉場，傳達了層次結構關系:
確認操作
動態設計能夠強化用戶的操作體驗。任何一個點擊過的按鈕或者要轉場的屏幕，都是使用動態設計的好時機。視覺上的回應可以吸引和取悅用戶。例如，讓我們看看當iOS中輸入錯誤的密碼時動畫是如何幫助幫助用戶的:
第一眼看上去，這種晃動的動畫設計似乎要比更直接的顯示錯誤標示浪費時間。然而，在實際中，一個用戶可能可能要花個幾秒鐘來定位錯誤消息，進而找出問題究竟出在哪里，而不是注意到動畫并立刻理解問題。
帶來愉悅感
動態設計可以促使你的用戶體驗過程確實愉悅用戶甚至令人難忘。作為一名設計師，在工作中，你應該盡量將自己融入其中，并設計出能夠令用戶喜愛和記住的具有獨特魅力的動態設計。通過在設計中加入微妙的動態效果，你能夠讓用戶感覺到他們是在跟一些有個性的東西在產生交互。
結論
動態設計將是設計技術的下一階段。這是一個自然的交互方式，在未來的設計中絕對至關重要。 我們需要跟靜態的用戶界面說再見，而去創造出更生動自然的動態界面。為你的程序創建一個動態設計語言將會提升你的品牌并使設計上更加出色。
譯／三達不留點gpj
翻譯自：https://uxplanet.org/motion-in-ux-design-90f6da5c32fe#.8f5r3hy2a
