如何使用 Motion Design 讓應用體驗變得有趣？

就在幾年前，任何和所有形式的運動和動畫都與不良網站 UI 的定義相關聯。 還記得舊式廣告網站以圓形球的形式顯示優惠，從屏幕的一個角反彈到另一個角嗎？ 網頁設計中的運動案例是一個可悲的案例。

但自從移動應用出現以來，場景發生了很大的變化，以至於 UI 動效設計現在已經成為一種流行的設計趨勢。

現代界面不再是靜態元素。 通過 UI 動態設計，品牌現在正在填補軟件與人類對多樣性和聯繫的基本需求之間的空白。

“Web 和移動應用程序服務中最直觀、最令人愉悅的元素是涉及 Motion Design 的元素。”

結合不同的移動應用旅程階段，應用程序的動作設計不僅可以讓用戶為你的應用程序動作而神魂顛倒，還可以增加應用程序會話時間。 它們現在已成為樂趣、創新和將用戶與應用程序綁定的可靠媒介的象徵。

為什麼要為應用程序使用動效設計？

應用程序動作設計有多種方式使整體移動交互變得非常有趣。 在這裡，讓我們看看如何。

緩慢的應用程序加載現在很有趣

加載緩慢的應用程序與白天和黑夜一樣常見，因為它們一直在發生。 其背後可能存在許多問題，例如用戶前端的網絡不足、後端的技術問題或同時在服務器上發出的請求過多。 但是，不管是什麼原因，緩慢的加載時間都是讓用戶遠離應用程序的第一大原因。

好吧，這可以通過在應用程序 UI 設計中使用動畫來完全防止，這是2018 年移動應用程序的趨勢之一。 通過在每一種低加載時間的情況下添加運動元素，設計師可以讓用戶著迷，只是為了看到元素或動畫在屏幕上滑動。 例如，以 Google Chrome 的離線頁面和恐龍遊戲為例。

用戶的入職體驗

應用程序的 Motion Design 最常見的用例之一是在應用程序旅程的移動應用程序引導階段。 用於解釋和讓用戶熟悉該應用程序的動畫正在被品牌合併，以便用戶在最初的幾次運行中輕鬆找到自己的方式。

用心智圖在用戶腦海中浮現應用

將入職體驗提升到一個新的水平，移動 UI 設計幫助用戶創建一個適合應用程序流程的思維導圖。 有沒有註意到自己拉下頂部的 Gmail 欄以刷新您的郵箱？ 我們對此表示懷疑。 原因是它就像眨眼一樣被壓印在我們身上，所以我們不必再三思而後行，它會自動發生。

讓用戶知道什麼是錯什麼是對

運動元素可能是讓用戶知道他們遇到了問題或他們已經成功越過關卡的最有影響力的方式之一。 在設計突出錯誤時，重要的是要向用戶準確指出他們做錯了什麼。

錯誤的密碼抖動是完美實現它的一個動畫。 就像您通過您的動作顯示用戶做錯了什麼一樣，反饋動作也應該顯示成功的事件。 帶有刻度線動畫的簡單郵箱彈出窗口將向用戶顯示他們的郵件已發送。

最後，永遠不要讓用戶想知道他們做錯了什麼，或者他們是否能夠成功地做某事。

既然您已經了解了運動元素如何使應用程序的旅程變得更加有趣和令人難忘，那麼現在讓我們看看您應該採用哪些應用程序 UI 設計原則來防止您的運動元素過渡到俗氣和無用的一面。

您應該在移動應用程序中體現的沃爾特迪斯尼明確原則

每個與運動元素合作過的應用程序開發公司都知道，創新和過度使用之間的界限非常細，而這正是它們模糊的地方，問題開始了。 用戶變得不感興趣，應用程序從有用變成了令人困惑的地方。

為了防止你的動作標誌和動作看到類似的命運，你可以遵循這些交互設計靈感。 這些原則最初是由沃爾特迪斯尼提出的，但仍然能夠像米老鼠一樣提供令人難忘的愉快體驗。

1.運動運動軌跡

業界流行的設計原則遵循動畫形狀應主要遵循直線軌跡運動的規則。 但我們都知道得更好。 您不能真正提供一個外在的 Web 和移動應用程序設計服務，而只靠舊傳統的一條腿。
為了讓用戶愛上你的運動元素，你必須添加新的運動軌跡，如曲線、垂直，甚至波浪狀，然後以視覺方式向人們展示這些東西。

2. Motion 出現的時機

應該避免任何突然出現在用戶屏幕上而沒有任何動作激勵的動作提示。 如果您在應用程序 UI 設計中加入動效，請在需要時進行。 有時添加動作是有意義的，例如用戶輸入錯誤的密碼，但可以忽略顯示他們輸入正確憑據的動畫勾號。

因此，在您過度使用它們之前，請了解實際需要它們的階段。

3.關注動畫的重點

如果您的應用在內容、設計元素、圖像或視頻方面發生了很多事情，請使用帶有有色閃爍背景或模糊進出的運動元素，以便用戶知道下一步該做什麼。 如果您未能在應用程序屏幕上顯示它們的存在，您所有不可移動的運動功能都將失去其價值。

4.動畫速度

假設您要為普通人而不是 Flash 製作移動應用程序，您的運動元素應該以羽毛滑翔的速度移動。 給用戶時間來調整他們的眼睛以適應運動，而不是讓他們太快。

專業提示：為您的動作添加節奏。 雖然將運動添加到運動中似乎是一件荒謬的事情，但要知道，通過這樣做，您將直接從用戶的潛意識層面領先整個應用共振遊戲一步。

5.成為正面動作片

這些動作類型主要用於基於抽認卡測驗和電子商務應用程序，使下一步行動對用戶來說是輕而易舉的事。 通過過於明顯的移動，例如在打折倒計時或優步的位置銷下降的情況下，您將能夠將用戶準確地引導到您想去的地方，同時為自己創造一個令人難忘的品牌形象。

移動應用程序中如何使用動畫和動作？

就像我們之前說的，做和做多之間只有一線之隔。 有些地方你認為你可以使用動畫，但實際上，你可以簡單地避免它。 您可以通過多種方式使用動態設計，從而為應用程序提供最佳 UI 設計。 讓我們來看看它們：

遊戲化

添加表情符號和動畫吉祥物可以為您的應用創造奇蹟。 這些元素使該應用程序令人上癮並受到所有人的喜愛。 各種信使都有動畫心情貼紙，使該應用程序比所有其他普通消息應用程序更具優勢。

進度動畫

在不知道進度的情況下等待加載內容會考驗用戶的耐心。 這就是為什麼應用程序有進度動畫來顯示在加載某些功能時取得了多少進展。 進度動畫是應用程序運動設計中最受歡迎的功能之一。

動畫通知

通知通常很無聊，但如果使用適當的動畫，它會改善整體用戶體驗。 這也將確保用戶記住他們收到的每一個重要通知。

加載動畫

加載動畫是用於應用 UI 交互的最常見的動畫類型之一。 這種類型的動畫通知用戶加載過程處於活動狀態並且應用程序運行良好。 此動畫是進度動畫的子類型。

過渡動畫

過渡動畫為應用程序提供了優雅的外觀。 它還傳達了積極的用戶體驗。 通過允許轉換，您可以在從一頁轉到另一頁時為應用程序賦予更多生命。

營銷動畫

營銷動畫非常適合您的品牌。 徽標中使用的動畫是吸引用戶注意力的好方法。 這也創造了品牌在用戶心目中的心理形象。

滾動動畫

滾動動畫是另一種在應用程序中添加的著名動畫類型，被認為是應用程序的最佳 UI 設計之一。 它不僅使應用程序美觀，而且賦予它優雅的外觀。 但是，正確的滾動動畫需要正確的編碼，否則應用程序可能會凍結或變慢。

引起注意

當用戶的注意力需要引導到某些區域時，通常會應用注意力繪製動畫。 假設您正在從在線食品訂購應用程序訂購，並且一旦您添加商品，價格就會隨著某種動畫而變化。 這會將您的注意力吸引到應該關注的數字上。

在本文中，我們討論了運動元素如何成為無聊應用程序和創新應用程序之間的關鍵區別，合併它們的正確階段，甚至應該遵循的設計原則。 我們是最好的移動應用程序設計公司，遵循簡單的移動應用程序設計流程，以實現最佳結果。 儘管步驟很簡單，但工作卻很詳細。 如果您對動作設計有任何疑問或需要交互設計靈感，請通過Appinventiv聯繫我們。