通過移動動畫將手機應用帶入生活

如果你回首十年前，那時如果你在使用者介面上使用移動動畫會被認為是一種犯罪，而不是最佳實踐。它與華麗的網站，彈出的視窗和閃爍的按鈕相關聯。但這在過去幾年中發生了巨大的變化。自從iPhone和移動應用程式被推出以來，許多設計師得到了一些關於動態動畫可能性的經驗。動畫正在快速成為介面設計的重要組成部分。它給設計師一個與時間一起玩的全新維度。

現代介面不再是一系列靜態螢幕。通過使用動畫給產品新增時間維度，彌合軟體和人性之間的差距。

最直觀和愉快的體驗總是將細節放入移動設計中。在我以前的文章中有寫到在移動UI設計中的3個關鍵動畫的用途，我曾談到了動畫的基本案例。在這篇文章中，我提供一些例子，來說明新增有設計感的元素到應用程式裡，使使用者體驗更加活躍和愉快：

讓載入體驗達到視覺享受

當應用程式建立的開場動畫有視覺刺激時，每次使用者開啟它，都能達到了興奮的程度。但是一些動畫超越了這一程度——下面例子中的動畫不是純粹令人愉快的，它也影響使用者的視覺並且控制使用者所聚焦的位置。

當使用者啟動Uber應用程式時，會立即注意到當一個動畫停止時，就變成了在地圖上的指標。

線上使用者在視覺上參與內容

當使用者第一次體驗互動應用時，他們必須去學習和理解這些。他們都會有一段學習操作演示的時間，這個期間需要完美的使用者體驗。演示過程中的平滑轉換和好的動畫，對初次使用者如何與應用產生互動有巨大影響。

以下示例中的使用者演示體驗充滿了創造力和個性。它會在視覺設計和微技術有突出地表現，並給新使用者帶來應用程式體驗。

動畫來自於：Ramotion

合併互動技巧

動畫能夠為應用程式中的每個功能建立互動式的短篇故事。這為使用者提供了方便，讓使用者清楚的瞭解下一步該做什麼。

動畫來自於：Ramotion

視覺方向

在設計變化的時候去新增動畫是最合適的時機。當狀態發生變化時，使用者需要了解新介面與前一個介面的聯絡。

靜態設計不提供上下文之間的狀態。

無論是在功能還是風格上，建立連線和內容的關係對動畫很有幫助的。動畫轉換可以作為不同使用者介面狀態之間的媒介，並且可以幫助定向使用者。

動畫幫助人們在介面中定位自己，通過定位找到自己的方式。使用者可以跟隨元素的移動來了解這兩個狀態如何相互關聯。動畫出自Anton Aheichanka

元素之間的關係

一個精心設計的動畫轉化將使用者的視線準確指向使用者體驗互動式所需的位置。動畫強調正確的元素，這個元素取決於目標是什麼。

將播放按鈕轉換為暫停按鈕表示兩個動作的不同連結。動畫出自Anish Chandran

空間意識

動畫真的可以幫助使用者構建空間介面的心裡圖。它解釋了東西來自哪裡和將要去哪裡。

動畫幫助人們在介面內定位，通過定位來找到自己的方式。

提供清晰的反饋

動畫可以用來增強使用者正在執行的動作。動畫的反饋有助於演示使用者互動的結果，無論它成功與否，以及什麼原因。

表明問題

當你想到設計錯誤狀態時，重要的是要讓它們對使用者可見。密碼抖動是一個很好的例子，明確的反饋：簡單地抖動，直接關係到人們如何給彼此反饋。

在多層元素共同反饋使用者的需求時，動畫反饋對使用者更有效。

解除使用者的疑惑

動畫可以用來幫助人們看到他們行動的結果。通過遵循原則‘’顯示，但不說明”，可以使用動畫反饋來顯示已完成的事情。

在下面的例子中，當使用者點選“Pay”時，會在應用程式顯示成功狀態之前短暫地顯示一個微調框。複選標記這樣的動畫會讓使用者感覺他們很容易付款，使用者也喜歡這些重要的細節。

建立者：MichaëlVillar

關於邏輯的一個註記

所有動畫的一個關鍵組成部分是邏輯。你需要確保你的環境具有邏輯。尤其重要的是，在小螢幕上的思考，你不得不考慮如何正確使用你的小螢幕的不動產，以及如何降低複雜性。

始終讓你的動畫具有邏輯性和目的性：不可預測的互動和太多的動畫可以殺死一個產品的使用者體驗。例如下文中提到的一些動畫，雖然在技術上很好的執行了，但是會使介面更混亂，而不是更少。很難預測的是，如果你在照片上滑動的話，這會導致頁面將過渡到包含個人資訊的單獨檢視上。

人們已經有很多關於特定手勢應該或不應該做什麼，從現實世界以及其他應用程式先入為主。這意味著使元素以不同的方式表現將建立糟糕的使用者體驗。圖片來源：Pavel Proshin

結論

動畫以統一的美和功能使其可以在廣泛的尺度和上下文中使用。但應該在建立動畫之前仔細地思考每個動畫，因為

動畫不是讓你的應用程式華麗。這是為了向使用者提供他們期望的體驗。

動畫製作軟體

Flinto---線上移動應用原型製作平臺是一個使用圖片快速生成移動應用的原型。

Framer---一個設計可互動動效的軟體，可快速匯入Photoshop、Sketch中的影像並模擬圖層分層，支援手勢，可在手機或平板中預覽。

Principle---前Apple工程師打造的一款互動設計工具，五分鐘即可製作出一個具有完整互動動畫的原型，並且可將互動動畫生成視訊或者Gif分享到Dribbble、Twitter等社交平臺。

原文連結：https://uxplanet.org/bringing-mobile-apps-to-life-through-motion-9472d259b58e

作者資訊：ByNick Babich

I’m a software developer, tech enthusiast and UI/UX lover.

http://babich.biz

歡迎關注SKYUI官方微博“SKYUIHOME”

官方微信公眾賬號“SKYUIUX”