現(xiàn)在，讓我們開始探索2020年動(dòng)態(tài)視覺設(shè)計(jì)領(lǐng)域的趨勢(shì)指南。

Graphic Tools Lab

wannerstedt

趨勢(shì)解讀

1. 注重差異性避免趨同，尋找創(chuàng)意和視覺上的新角度。

2. 視覺上吸收借鑒平面設(shè)計(jì)、字體設(shè)計(jì)、室內(nèi)設(shè)計(jì)等其他設(shè)計(jì)領(lǐng)域。嘗試做加法，融合不同元素進(jìn)行混搭，增加動(dòng)態(tài)和視覺豐富性。

4. 寫實(shí)性、敘事性題材繼續(xù)增多，ANIMATION與MOTION的邊際變得更加模糊。

5. 更加注重技術(shù)帶來的視覺及形式突破，嘗試不同領(lǐng)域的應(yīng)用與跨界融合。程序視覺、游戲引擎技術(shù)的應(yīng)用、AR/VR。

總的來說，就動(dòng)態(tài)視覺設(shè)計(jì)趨勢(shì)而言，2020年將是大放異彩的一年。提及發(fā)展大勢(shì)，不同的設(shè)計(jì)趨勢(shì)報(bào)告都不約而同的指向動(dòng)態(tài)設(shè)計(jì)，足以見得行業(yè)內(nèi)對(duì)動(dòng)態(tài)設(shè)計(jì)領(lǐng)域發(fā)展的重視。而各類不同的動(dòng)態(tài)視覺風(fēng)格，預(yù)計(jì)將為觀者帶來更多極致的視覺體驗(yàn)。

每一個(gè)設(shè)計(jì)案例都代表著來自世界各地的設(shè)計(jì)師們的思考和心血，感謝他們的付出和努力。希望我們的分享能帶大家新的靈感和收獲，讓更多人看到這個(gè)行業(yè)的價(jià)值和成長(zhǎng)。

感謝閱讀！

作者 | SeenVision
來源 | SeenVision見所未見 (id:Seen_Vision)

功能性動(dòng)畫是具有明確的、合乎邏輯的目的的微妙動(dòng)畫。它能夠降低用戶在認(rèn)知上的負(fù)擔(dān)，阻止毫無征兆的變化出現(xiàn)，并在不同頁(yè)面、元素、層級(jí)間建立起一套更好的空間關(guān)系。還有重要的一點(diǎn)就是，動(dòng)畫使用戶界面更符合真實(shí)。

通過在用戶界面間游刃有余的出現(xiàn)，并改變它們的形狀和大小，動(dòng)畫可以使用戶界面散發(fā)出生氣。你應(yīng)該在具有導(dǎo)航意義的上下文間切換時(shí)、在解釋頁(yè)面元素的狀態(tài)變化時(shí)、在強(qiáng)化元素的層級(jí)關(guān)系時(shí)考慮使用合理的動(dòng)畫來完成這期間平滑的過渡。

成功的動(dòng)態(tài)設(shè)計(jì)具有以下六個(gè)特征：

1、應(yīng)答式的

在UI設(shè)計(jì)領(lǐng)域，視覺上的反饋是極其重要的，好的視覺反饋之所以起到作用是因?yàn)樗狭巳藗冊(cè)谡J(rèn)知上的自然預(yù)期。想想看，在真實(shí)生活中，按鈕，控件和其他物品大都能夠針對(duì)我們的操作做出友好的響應(yīng)，而這種真實(shí)的體驗(yàn)也應(yīng)該遷移到界面設(shè)計(jì)中。

用戶界面應(yīng)該精確的在用戶觸發(fā)動(dòng)作的地方及時(shí)響應(yīng)，并顯示出觸發(fā)的動(dòng)作或元素本身跟新界面間的聯(lián)系。對(duì)用戶來講，能夠在應(yīng)用程序中觸發(fā)一定操作后意識(shí)到發(fā)生了什么是非常棒的感覺。

2、關(guān)聯(lián)的

關(guān)聯(lián)性是以新的方式創(chuàng)建出那些在元素或動(dòng)作的作用下所觸發(fā)的新界面。關(guān)聯(lián)性背后的邏輯是幫助用戶理解剛剛在視圖布局中發(fā)生的變化以及觸發(fā)的源頭。

下面可以看到兩個(gè)關(guān)于菜單轉(zhuǎn)變的例子。例1中，菜單出現(xiàn)在遠(yuǎn)離觸發(fā)點(diǎn)的位置，這種方式打破了兩者間的關(guān)聯(lián)性。

在例2中，菜單就是從觸發(fā)點(diǎn)位置出現(xiàn)，恰似菜單和觸發(fā)點(diǎn)綁定在一起，其關(guān)聯(lián)項(xiàng)不言而喻。

另一個(gè)例子是在特定條件下功能變化的操作按鈕。“播放” 和 ”暫停” 可能是最普遍的一個(gè)例子。 將播放按鈕變換為暫停按鈕意味著兩個(gè)動(dòng)作是關(guān)聯(lián)的，在操作時(shí)按壓一個(gè)按鈕后就將顯現(xiàn)另外一個(gè)。你應(yīng)該在一個(gè)動(dòng)作的不同狀態(tài)間嘗試使用這種過渡動(dòng)畫，使它看起來平滑而不失連續(xù)性。

3、自然的

避免出現(xiàn)意外的轉(zhuǎn)變。每一個(gè)動(dòng)作都應(yīng)該能映射到真實(shí)世界中。在真實(shí)世界，一個(gè)物體加速或減速要主要取決于自身的重量和接觸面的摩擦力大小。類似的，在一個(gè)用戶友好的界面中，開始和結(jié)束都不要是突如其來的。

下面是一個(gè)很好的例子，用戶選擇一個(gè)列表項(xiàng)后放大查看其詳細(xì)信息，在卡片的擴(kuò)展過程中，原本的小卡片遵循了一條面向終點(diǎn)的弧線型軌跡。

4、 有意的

用戶引導(dǎo)應(yīng)該在合適的時(shí)間出現(xiàn)在合適的地點(diǎn)。動(dòng)態(tài)變化，因其本質(zhì)影響，在一個(gè)用戶界面中擁有最高的吸引力。文本段落和靜態(tài)圖像都無法與其相比。一個(gè)設(shè)計(jì)優(yōu)秀的轉(zhuǎn)場(chǎng)能帶領(lǐng)用戶從一個(gè)交互到另一個(gè)交互。

對(duì)于一個(gè)新手用戶，他常常不能預(yù)測(cè)一個(gè)將要發(fā)生的交互動(dòng)作會(huì)是怎樣的，而合適的動(dòng)畫則能夠指引用戶且不會(huì)讓用戶覺得內(nèi)容的變化太過突然。

Mac OS在最小化窗口的時(shí)候使用一個(gè)功能性的動(dòng)畫效果。這個(gè)動(dòng)畫將窗口的兩個(gè)狀態(tài)連接在了一起。

另一個(gè)很好的案例是下面這種父子層級(jí)間的轉(zhuǎn)場(chǎng)，用戶選擇了一個(gè)列表項(xiàng)或者卡片元素，然后經(jīng)由動(dòng)畫方法展開其詳細(xì)信息的視圖。這樣的轉(zhuǎn)場(chǎng)效果允許了用戶在變化前后保持上下文聯(lián)系。

5、快速的

元素在不同的位置或狀態(tài)間轉(zhuǎn)變時(shí)，其運(yùn)動(dòng)應(yīng)該足夠快到不用讓用戶等待，但同時(shí)也要足夠緩慢好讓用戶能夠理解這個(gè)過程（快速的同時(shí)保證用戶理解）。

不要讓動(dòng)畫太慢，好像是產(chǎn)生了不必要的延遲得讓用戶等待一樣。

減緩許多元素的變化速度會(huì)延長(zhǎng)整體動(dòng)態(tài)變化的時(shí)間。

讓你的動(dòng)畫足夠快保證用戶不必等待這個(gè)過程的逐漸完成。

想想看，很多轉(zhuǎn)場(chǎng)用戶是會(huì)頻繁看到的，你一定要讓這個(gè)過程夠快，別讓用戶總是等。這個(gè)時(shí)間應(yīng)該控制在300ms以下。

6、干凈的

轉(zhuǎn)場(chǎng)動(dòng)畫應(yīng)該避免一次性做太多事情，試想在有多個(gè)項(xiàng)目需要朝不同方向或不同路徑移動(dòng)時(shí)，看上去不混亂才怪。

轉(zhuǎn)場(chǎng)應(yīng)該清晰、簡(jiǎn)單而連貫一致。對(duì)于動(dòng)畫而言，少即是多。因此我們應(yīng)該關(guān)注于對(duì)用戶起到實(shí)用性作用的動(dòng)畫效果。 

結(jié)論

最后重要的一點(diǎn)是，動(dòng)態(tài)變化絕不是隨機(jī)的，每一個(gè)動(dòng)作的背后一定有其實(shí)際目的。它幫助指引用戶關(guān)注于那些重要的地方而不至于迷失自己。不管你的應(yīng)用程序是有趣好玩的還是嚴(yán)肅直接的，使用合適的動(dòng)態(tài)設(shè)計(jì)原則必將能夠幫你向用戶提供一個(gè)干凈而富粘性的用戶體驗(yàn)。 

譯／三達(dá)不留點(diǎn)gpj
翻譯自：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e#.c2xe0at0c

在設(shè)計(jì)領(lǐng)域，動(dòng)態(tài)設(shè)計(jì)常以精美流暢的體驗(yàn)過程來描述元素的空間關(guān)系、功能性以及意圖?？赡苈犉饋硐袷且粋€(gè)很大的概念，但如果利用得當(dāng)，它便是微妙而自然的。體貼的動(dòng)態(tài)設(shè)計(jì)能夠提升用戶在傳統(tǒng)設(shè)計(jì)元素上的體驗(yàn)。

所以讓我們來談?wù)剟?dòng)態(tài)設(shè)計(jì)的基本要點(diǎn)，為何以及何時(shí)你想在你的界面設(shè)計(jì)中用到它，它又是如何幫助你提升你的用戶體驗(yàn)的。

基于動(dòng)態(tài)的設(shè)計(jì)

每一個(gè)動(dòng)態(tài)設(shè)計(jì)都好似講述著一個(gè)生動(dòng)鮮活的故事。它詮釋了一個(gè)程序是如何組織有序的，以及用戶能用它來做些什么。這種動(dòng)態(tài)設(shè)計(jì)驅(qū)動(dòng)了整個(gè)用戶界面的體驗(yàn)——它似乎重新定義了導(dǎo)航一樣，通過添加一個(gè)新的層級(jí)上的深度交互創(chuàng)建出一個(gè)更加自然的體驗(yàn)過程。對(duì)于每一次按鈕點(diǎn)擊和屏幕轉(zhuǎn)場(chǎng)來講，似乎都有一個(gè)故事發(fā)生，而正是良好的動(dòng)態(tài)設(shè)計(jì)來幫助你講述這個(gè)故事。

為何動(dòng)態(tài)設(shè)計(jì)如此重要？

當(dāng)用戶跟你的產(chǎn)品產(chǎn)生交互時(shí)，他們可能會(huì)好奇下面幾個(gè)問題：

“這里什么最重要?”

“我怎么知道下一步要做什么?”

“我怎么知道我已經(jīng)完成了我的任務(wù)?”

諸如這樣的問題向我們揭示了使用動(dòng)態(tài)設(shè)計(jì)來提升用戶體驗(yàn)的好時(shí)機(jī)。通過這種設(shè)計(jì)便回答了以上問題：

動(dòng)態(tài)能夠吸引用戶的注意力并會(huì)在用戶完成點(diǎn)擊/手勢(shì)操作后暗示將會(huì)發(fā)生什么。

它幫助你的用戶適應(yīng)用戶界面并在不同視圖間提供了指導(dǎo)焦點(diǎn)。

它提供了一種視覺反饋。

除此之外，動(dòng)態(tài)設(shè)計(jì)向用戶體驗(yàn)帶來了另一個(gè)重要的事情：愉悅感。相比于冰冷嚴(yán)肅的產(chǎn)品，我們都欣賞那些親切而令人愉悅的產(chǎn)品。這就是為何設(shè)計(jì)師們應(yīng)該嘗試找到某種解決方案，以使用戶在使用上感覺更自然流暢并能喚起用戶情感上的聯(lián)系的原因。

動(dòng)態(tài)設(shè)計(jì)語(yǔ)言

動(dòng)態(tài)設(shè)計(jì)允許我們接觸到更好的交互，并更容易的理解其變化過程。在動(dòng)態(tài)設(shè)計(jì)的元素中，我們可以看到各種各樣的形式，包括過渡轉(zhuǎn)場(chǎng)、動(dòng)畫和甚至是模擬3D深度的質(zhì)地紋理。 

動(dòng)態(tài)設(shè)計(jì)的主要挑戰(zhàn)是如何使得用戶不從他們正在嘗試做的事情中分心出來。

吸引用戶的注意力

動(dòng)態(tài)可以將用戶的注意力吸引到某個(gè)特定位置——或者幫用戶從整體中區(qū)分出某個(gè)部分。優(yōu)秀的動(dòng)態(tài)設(shè)計(jì)能夠使得用戶界面更具預(yù)見性和更易導(dǎo)航。它可以幫助用戶的眼睛看到一個(gè)新的對(duì)象來自哪里或?qū)ο箅[藏到了哪里，同時(shí)為用戶提供了一定的線索，指示出要發(fā)生什么。

使界面元素間空間關(guān)系合乎邏輯

界面的狀態(tài)變化一般情況下會(huì)伴隨生硬的斷層，導(dǎo)致用戶在認(rèn)知上很難跟上進(jìn)度。在認(rèn)知科學(xué)中，這被稱作“變化盲視”——即當(dāng)視覺刺激突然變化時(shí)，用戶卻無法觀察到的現(xiàn)象。用戶需要去理解眼前的事物從何而來，以及如何才能重新找到它們，這樣他們就不會(huì)感覺到前后之間的斷層。而這只是因?yàn)樵诂F(xiàn)實(shí)世界中這種斷層并不存在。

動(dòng)態(tài)設(shè)計(jì)通過定義了屏幕和元素的空間關(guān)系來填補(bǔ)了這塊理解上的缺口。它幫助用戶適應(yīng)這種圖形界面并確立其內(nèi)在的視覺關(guān)系。如下面的例子中，用戶被引導(dǎo)到下一個(gè)視圖和界面轉(zhuǎn)場(chǎng)，傳達(dá)了層次結(jié)構(gòu)關(guān)系:

確認(rèn)操作

動(dòng)態(tài)設(shè)計(jì)能夠強(qiáng)化用戶的操作體驗(yàn)。任何一個(gè)點(diǎn)擊過的按鈕或者要轉(zhuǎn)場(chǎng)的屏幕，都是使用動(dòng)態(tài)設(shè)計(jì)的好時(shí)機(jī)。視覺上的回應(yīng)可以吸引和取悅用戶。例如，讓我們看看當(dāng)iOS中輸入錯(cuò)誤的密碼時(shí)動(dòng)畫是如何幫助幫助用戶的: 

第一眼看上去，這種晃動(dòng)的動(dòng)畫設(shè)計(jì)似乎要比更直接的顯示錯(cuò)誤標(biāo)示浪費(fèi)時(shí)間。然而，在實(shí)際中，一個(gè)用戶可能可能要花個(gè)幾秒鐘來定位錯(cuò)誤消息，進(jìn)而找出問題究竟出在哪里，而不是注意到動(dòng)畫并立刻理解問題。

帶來愉悅感

動(dòng)態(tài)設(shè)計(jì)可以促使你的用戶體驗(yàn)過程確實(shí)愉悅用戶甚至令人難忘。作為一名設(shè)計(jì)師，在工作中，你應(yīng)該盡量將自己融入其中，并設(shè)計(jì)出能夠令用戶喜愛和記住的具有獨(dú)特魅力的動(dòng)態(tài)設(shè)計(jì)。通過在設(shè)計(jì)中加入微妙的動(dòng)態(tài)效果，你能夠讓用戶感覺到他們是在跟一些有個(gè)性的東西在產(chǎn)生交互。

結(jié)論

動(dòng)態(tài)設(shè)計(jì)將是設(shè)計(jì)技術(shù)的下一階段。這是一個(gè)自然的交互方式，在未來的設(shè)計(jì)中絕對(duì)至關(guān)重要。 我們需要跟靜態(tài)的用戶界面說再見，而去創(chuàng)造出更生動(dòng)自然的動(dòng)態(tài)界面。為你的程序創(chuàng)建一個(gè)動(dòng)態(tài)設(shè)計(jì)語(yǔ)言將會(huì)提升你的品牌并使設(shè)計(jì)上更加出色。

譯／三達(dá)不留點(diǎn)gpj
翻譯自：https://uxplanet.org/motion-in-ux-design-90f6da5c32fe#.8f5r3hy2a