如何在 UX 工作流程中集成運動設計

作為 UX 專業人士，我們在提高客戶體驗標準方面發揮著關鍵作用。 對細節的簡單關注通常是向客戶發出我們正在考慮他們的信號。 在數字空間中，我們專注於應用設備和流程中的用戶交互。

隨著桌面計算能力的不斷提高、瀏覽器的複雜性和原生應用程序的使用，我們每天都在學習新的方法來突破定義精心設計的 UI 的極限。 如果使用得當，運動可以成為幫助用戶實現目標的關鍵工具。

關於 SmashingMag 的進一步閱讀：

• 終極動態圖形教程綜述
• 將 After Effects 融入 UX 工作流程
• 電影史上的電影片名設計藝術
• 在 Photoshop 中創建高級動畫
  

何時考慮動畫

作為 UX 設計師，你很可能是項目發現階段的一部分，如果沒有運行的話。 這可能包括利益相關者訪談、角色、品牌訪談、可用性測試、旅程映射、上下文查詢等。在這個階段，你會了解很多關於你的用戶的信息，但很可能他們永遠不會直接告訴你他們需要動畫或動作。 那麼，你怎麼知道動畫在 UI 設計中是否值得考慮呢？

與用戶交談時，您可能會聽到以下反饋：

• “我不知道該把重點放在哪裡。”
• “這裡最重要的是什麼？”
• “我不想使用這個工具。”
• “我怎麼知道下一步該做什麼？”
• “我怎麼知道我已經完成了我的任務？”
• “我不明白這些數據告訴我什麼。”

像這樣的陳述可能會揭示使用動作來增強體驗的機會。

從團隊中獲得支持

在這一點上，作為一名設計師，您可能正在考慮一些關於運動如何增強體驗的初步想法。 你如何讓你的想法得到認可？ 試圖說服利益相關者、產品經理、客戶和開發人員團隊相信，在動畫增強上花費額外的時間和金錢“感覺就像做正確的事情”只會讓你到目前為止。 在您的典型項目已經很苛刻的時間表中，您如何為額外的工作騰出時間？ 你如何讓團隊相信動畫是特定 UX 場景的正確解決方案？

獲得團隊支持的最快和最通用的途徑是將動畫創意與用戶需求和目標保持一致。 這將確保您不僅僅是為自己創建動畫，對用戶沒有任何好處。

如何使動畫與用戶需求保持一致

當動畫概念與特定的用戶需求保持一致時，它們就會開始顯示其價值。 這也可以防止您考慮無意義、過於復雜的動畫。 避免浪費每個人的時間和精力，尤其是在動畫對觀眾沒有價值的情況下。

動畫的關鍵功能

動畫具有以下功能：

• 在他們的環境中定位用戶，
• 提供更深層次的清晰度，
• 向用戶提供有用的反饋，
• 允許更有想像力地使用屏幕空間（畫布上和畫布外），
• 加強元素的層次結構，
• 引導用戶的注意力，
• 提示下一步該做什麼，
• 在導航上下文之間順暢地傳輸用戶，
• 解釋屏幕上元素排列的變化，
• 提供立即確認用戶輸入的視覺提示，
• 更好地傳達品牌信息，
• 創建外觀和感覺就像直接操縱屏幕的啟示，
• 創造內在的美學和吸引力，鼓勵使用和增加採用。

該矩陣說明瞭如何將用戶研究反饋映射到動畫函數：

“用戶體驗動畫有能力解決許多常見的用戶需求，幫助人們完成他們的目標。 該矩陣將示例用戶研究反饋（頂部）與動畫功能（側面）對齊。

當以這種方式進行優先排序時，它顯示了動畫如何主要是一種增強用戶體驗的工具，而不是一種創造吸引力的新穎方式。”

— 馬克·迪·斯庫洛

如何將動畫集成到 UX 工作流程中

以下是在 UX 工作流程中集成動畫的建議策略。 如果您的項目是敏捷的，那麼這種方法應該在 sprint 週期的持續時間內發生。

發現和探索

只有當您充分了解您的受眾並確認您的設計符合該理解時，您才能與您的團隊進行協作。 所以，先打好基礎。

• 研究使用並熟悉有關目標受眾的所有可用信息。 這可能是人工製品，例如角色、客戶旅程地圖、用戶研究、品牌指南、風格指南等。
• 對齊確保您的動畫滿足特定的用戶需求和目標。 如果可能，將您提議的動畫功能與特定的用戶反饋（如上圖所示）對齊，並展示它將如何增強用戶完成目標的能力。
• 探索花時間探索展示動畫的各種靈感來源。 有很多作品集網站，例如 Dribbble、Behance 和 CodePen，您可以在其中找到許多可以重複使用的示例。
• 溝通儘早與您的開發團隊和客戶分享您的意圖。 讓他們知道您正在考慮需要動議的解決方案。 準備好你的研究結果，並使你的想法與用戶的需求和目標保持一致。 一個人做更有挑戰性； 與您的開發人員合作。 技術人員可以擴展可能性。 儘早溝通將減少一個想法過早被否決的機會。

設計和故事板

• 草圖與任何設計過程一樣，最好的起點是紙、白板和/或繪圖應用程序。 這種媒介以一種不羈、迭代的方式讓創意源源不斷地流動。 你需要：
  • 一張紙或筆記本（故事板模板是理想的）；
  • 白板；
  • 任何繪圖程序或應用程序（SketchBook Pro、Mischief、Photoshop）；
  • 如果您使用筆（觸控筆）顯示器或數位板，則可獲得獎勵積分。
• 故事板一旦您有了一些想法和想法，就可以創建動畫關鍵狀態的故事板。 依靠簡單的註釋來設想流程。 這是在流程早期與他人交流想法的有效方式。
• 分享草圖和故事板是從團隊獲得早期反饋的絕佳工具。 不要羞於分享你的草圖和故事板。 它們是讓您的團隊了解您計劃創建的內容和收集有價值的協作見解的絕佳工具。
• 決定根據可用的時間，決定需要製作什麼原型以及如何審查和/或用戶測試您的動畫。 然後，您需要選擇合適的方法來創建您的原型。

原型動畫

在您花費大量時間編碼之前，原型可以迅速將您的想法付諸實踐。 從用戶體驗的角度來看，原型的主要目的是在設計過程的早期將您的想法傳達給用戶，此時改進和迭代更容易且成本更低。

製作原型動畫有兩種主要方法。 範圍從使用市場上眾多應用程序之一的高度探索性原型到直接跳入編碼原型，以最準確地表示生產環境中的可行性。

是使用原型應用程序還是創建編碼原型的選擇歸結為以下幾點：

• 解釋相互作用需要多少保真度？
• 有多少時間可用？ （時間等於成本。你有時間學習新工具嗎？）
• 您目前最熟悉哪些工具或方法？
• 運動有多複雜或複雜？

使用您自己的判斷來確定正確的方法。 如果您可以使用簡單的 Photoshop 時間軸動畫輕鬆快速地傳達動作，那將與完全編碼的原型一樣有效。

原型設計應用

原型設計應用程序簡化了我們對界面中動畫的看法。 每天，越來越多的工具可供設計師使用。 這些工具正在迅速發展，包括用於創建過渡、變換和補間的功能。

您選擇的應用程序將取決於運動概念是否更具探索性。 此外，還要考慮創建原型需要多快、如何審查、如何與用戶一起測試以及設計人員對應用程序的舒適程度。

以下是用於 UX 動畫的流行原型設計應用程序列表：

• Adobe Photoshop 通過使用時間線，可以輕鬆地將在 Photoshop 畫布中開始的合成轉換為幀動畫。 Photoshop 對於在現有合成之上進行運動探索非常有用。
• Adobe After Effects 此工具是無限創意探索的動力源泉。 過度使用此工具的危險在於，很容易創建無法使用當前前端技術構建的東西。 撇開風險不談，After Effects 如何融入 UX 工作流程值得考慮，因為該工具具有許多創造性用途，尤其是在探索新的可能性和通過運動突破極限時。
• 主題演講 是的，主題演講。 利用“Magic Move”屬性的自我播放演示是顯示 UI 交互性和動作的快速方式。 Thoughtbot 對使用 Keynote 製作原型動畫進行了精彩的概述。
• Adobe Edge Animate 此環境允許設計人員使用類似關鍵幀的動畫來探索運動 UI 概念。 它生成的輸出依賴於專有的 JavaScript 庫，這將使許多開發人員對使用該工具製作的動畫的生產準備情況持懷疑態度。
• Axure 8（測試版） 這個激動人心的 Axure 新版本添加了更多動畫模式和許多有趣的緩動選項。 Axure 讓您在早期的線框圖工作中考慮運動。 動畫主要通過事件（ onPageLoad 、 OnClick 、 OnHover 、 OnMouseOver等）完成，不包括任何關鍵幀。 然而，它確實讓設計師以一種更容易與開發人員溝通的方式思考。
• InVision 這個高度協作的基於瀏覽器的應用程序包括一系列動畫轉換和手勢。 屏幕流原型設計工具（您可以在其中圍繞通過交互連接的一系列屏幕構建原型）非常適合快速設置可點擊熱點而不會變得過於復雜。 所有動作都發生在點擊事件或頁面重定向上。 在任何設備上輕鬆預覽您的設計。 它甚至包括免費的移動用戶測試功能，以便您可以在 InVision 中進行用戶研究。 也有計劃加入更多基於時間線的動畫功能。 很酷。
• Flinto 這款適用於 Mac 的移動應用程序原型製作工具可讓您快速鏈接屏幕並應用動畫過渡。 它具有許多動畫過渡屬性，可以對其進行微調以獲得恰到好處的運動。 通過在舊屏幕上拖放新屏幕，可以輕鬆地在這個屏幕流原型設計工具中進行迭代。
• 原理 這個適用於移動應用程序的原型製作工具，也適用於 Mac，允許您使用時間軸來設置動畫過渡的關鍵幀。
• Proto.io 這個基於瀏覽器的應用程序包含一些複雜的動畫功能。 通過使用“交互”和“狀態”，設計師可以製作複雜運動的原型，甚至可以創建類似關鍵幀的動畫。

編碼原型

更有技術傾向的設計師可以切入正題，直接跳入其前端 UI 框架中可用的庫，開始原型設計過程。 否則，這部分流程將需要與開發人員合作。

依靠標準的開箱即用運動模式庫可能會限制您對解決方案的探索，從而導致平淡無奇的結果。 同時，不考慮可行的方法是有風險的，並且肯定會產生失望和浪費時間。

一個樂於捲起袖子並深入研究代碼的用戶體驗設計師將更好地控制細節。 他們也將立足於現實。 這需要熟悉 HTML 和 CSS，有時還有 JavaScript。 設計人員需要很好地掌握如何在現代前端開發環境中工作。 當設計師和開發人員可以以這種方式協作時，成功的可能性總是很高。

以下是可用於編碼 UX 原型的許多 UI 框架和庫的一個小示例。

• CSS3 動畫 這是最基本的入門方式。 希望創建編碼原型的 UX 動畫師需要在 CSS3 和 HTML5 方面有紮實的基礎，以了解 Web UI 如何工作的基礎知識。
• Motion UI, ZURB 這個 Sass 庫最初用於 ZURB 的 Foundation for Apps，將幫助您快速創建 CSS 過渡和動畫。 使用簡單的類或 Sass mixin 快速製作動畫元素和動作原型。
• Transit 這個簡單的 CSS 轉換和轉換庫是為那些熟悉 jQuery 的人準備的。
• Velocity 一個更健壯且文檔完善的 JavaScript 庫，它是專門為動畫設計師量身定制的。
• GSAP（GreenSock 動畫平台）這個成熟的動畫平台將為 JavaScript 可以觸摸的任何東西（CSS 屬性、畫布庫對象、SVG、通用對像等）製作動畫。 Google 推薦它用於 JavaScript 動畫。
• Famous 一個成熟的應用程序框架（主要用於移動端），Famous 建立在開源 3D 佈局引擎之上，與 3D 物理動畫引擎完全集成。 Famous 背後的想法是，瀏覽器從來都不是用來渲染應用程序的——遊戲是用來渲染應用程序的。 如果你想要流暢的圖形和動畫（60 FPS），你需要 GPU 加速，Famous 通過渲染到 DOM、canvas 或 WebGL 使之成為可能。
• Framer Framer 是一個獨立的原型設計框架和編碼環境。 它與 Photoshop 和 Sketch 集成。 雖然它不會生成可用於生產的代碼（並且從 JavaScript 切換到 CoffeeScript 是有問題的），但它確實可以幫助設計師分享感覺真實的原型。 它支持對手勢交互和運動的細粒度控制，使設計人員能夠準確地與開發人員交流這些交互。
• React 由 Facebook 開發，React 是一個 JavaScript 庫，用於構建大型、動態、數據驅動、生產就緒的用戶界面。

與用戶一起測試

以下是與用戶進行測試的基本過程：

1. 安排代表您的目標受眾的一小群參與者（最好是五個參與者）。
2. 進行測試用戶測試會話非常適合驗證您的動畫是否有效。 讓參與者完成將在您的應用程序中執行的典型任務。 觀察你的動畫是幫助還是損害體驗。 理想情況下，用戶體驗會話是通過視頻捕獲的，以便之後可以參考和查看它們。 如果您要遠程進行會議，請利用 GoToMeeting 和 WebEx 等 Web 會議應用程序中提供的屏幕錄製功能。
3. 查看反饋花時間思考從用戶測試會話中收集到的見解。 確保正確解決初始發現階段的用戶需求和顧慮。
4. 決定完成用戶測試並審核反饋後，您可以對是否需要進一步改進或是否已準備好投入生產做出明智的評估。

最後的筆記

在設計中考慮動效的用戶體驗設計師會發現自己承受著解釋、溝通和捍衛為什麼需要額外努力的壓力。

了解您的聽眾，並儘早將您的意圖傳達給團隊。 利用當今越來越多的可用方法，從紙張到代碼，這將幫助您獲得將動畫順利集成到工作流程中所需的支持。

對於 UX 動畫，微妙是關鍵。 專注於幫助用戶實現目標至關重要。

資源

• “UX 設計中的功能性動畫”，Amit Daliot，Smashing Magazine Daliot 概述了 UX 設計中的動畫是如何在體驗中創建清晰和邏輯的工具，包括許多有用的示例。
• “你的 UI 不是迪士尼動畫，”Sophie Paxton，Medium Paxton 提供了關於如何避免創建僅僅妨礙用戶的動畫的深刻見解。
• Animate.css，Daniel Eden 這裡有一堆很酷、有趣和跨瀏覽器的動畫，你可以在你的項目中使用。
• CodePen 動畫示例 CodePen 鼓舞人心的 UI 動畫遊樂場可以被剖析和分叉以創建新概念或只是進行實驗。
• “使用 CSS 動畫 SVG”，Chris Coyier，CSS-Tricks 開始在 HTML 中使用內聯 SVG 代碼，並通過 CSS 動畫元素。
• “A Modern Web Designer's Workflow”（視頻），Chris Coyier，CSS-Tricks 儘管已有幾年曆史，但它仍然是現代前端工作流的相關示例。
• “動畫示例”，react.rocks 這個畫廊展示了 React 對動畫的強大功能。