設計有目的的交互
已發表: 2021-07-19探索有目的的交互設計的關鍵原則，交互可以解決哪些設計挑戰，以及如何將其引入您的流程。
當我們考慮用戶體驗中的交互設計和動畫時，很容易將其誤認為是花哨的東西：花里胡哨，或者“給網站帶來驚喜”的隨機飛行物體。 它可能會帶來短期的愉悅，但很快就會讓普通用戶感到惱火。
為了解決這種無用的問題，我們將看看設計有意義的交互的核心原則，它如何解決常見的設計挑戰以及如何將其引入您的設計系統和流程。 交互不應該再是點睛之筆，不再是作為“很高興擁有”而從範圍中刪除的，而是整體用戶體驗的一個組成部分。
有意義的交互設計的四個關鍵原則
1. 避免製造障礙
交互或動畫永遠不應該為用戶設置障礙。
想想一個“漢堡菜單”，它需要兩到三秒鐘才能全屏動畫。 每次用戶想要瀏覽網站時，他們都必須等待。 為用戶創造更長的任務時間是一種保證讓他們一路跳轉到競爭對手的網站或應用程序的方式。
然而，在某些情況下，延遲交互進程可能會受益。 當交互很複雜時，放慢速度可以為用戶提供更好的上下文和反饋。 以下是您可能會延遲交互和動畫的一些示例：
- 引導新用戶使用新界面。 確保使用跳過選項減少障礙。
- 顯示因果關係的拖放界面。 太快了，用戶可能想知道該文件去了哪裡。
- 將產品添加到購物車。 這不應該對結賬造成長時間的障礙，但它應該給用戶足夠的反饋，讓他們知道他們的任務是成功的。
通常，簡單的交互應該是快速的，而復雜的交互應該延遲到足以讓用戶理解上下文。
2. 將動作與消息匹配
互動應該始終符合品牌的語氣。
如果 Apple 決定他們在 iOS 上的所有交互都將在您的臉上快速、清晰地進行，並且會做大量棘手的事情，那麼您是否會覺得您在使用 Apple 產品？ 如果您正在使用 Alton Towers 應用程序並看到緩慢褪色的動畫和大量 Ken Burns 風格的過渡，您會覺得這是一個充滿樂趣和刺激的神奇地方，還是 M&S 電視廣告？
交互動畫的方式應該始終代表您的目標基調，讓您的用戶感覺合適——它使體驗更加身臨其境和一致。 如果它是一個兒童娛樂網站，那麼它可能有點古怪和花哨。 如果它是一家高端精品店，那就讓它緩慢、精緻和有品位。
3. 給它目的
如果它不能幫助用戶或提升他們的體驗，你需要它嗎？
交互設計具有提升用戶體驗的巨大潛力，這就是為什麼過度使用和無目的使用如此誘人的原因。 還記得 Flash 網站嗎？
再往前滾動一點，看看交互設計可以解決的八個挑戰。 如果您的交互不遵循這些模式，則很有可能它除了取悅用戶之外沒有其他目的。
4. 讓它不可見
最好的交互設計是不可見的，應該在用戶甚至沒有註意到的情況下增強體驗。
考慮到設計交互所花費的時間，這聽起來令人心碎，但如果沒有引起注意，那可能是因為他們做得很棒。 當某項技術或界面出現問題或感覺笨拙時，我們往往會更加註意使用它。 當事情順利時，用戶可以專注於內容。
Facebook、Pinterest、Twitter 和 Google 產品等廣泛使用的應用程序和網站上的交互設計考慮量令人費解。 然而，除非有人向您指出，否則您永遠不會真正注意到。 它們使設計隱形，因此您可以享受體驗並與產品、服務或內容建立更強烈的情感聯繫。
交互設計可以解決的六個設計挑戰
1. 方向和背景
交互設計可以幫助用戶了解事物所在的位置，即使它們是看不見的。
當屏幕空間有限時，這對移動設計來說是一個特殊的挑戰。 公開顯示所有內容，用戶認知超載。 展示重要的東西和隱藏不太重要的東西是我們努力的目標； 然而，它隱藏了一部分經驗。 因此，通過使用有意義的交互，我們可以直觀地告訴用戶事物所處的位置，因此易於記憶和直觀。
以下是使用交互創建上下文的幾個示例：
- 谷歌字體背景顏色轉換器。 顏色感覺就像它們生活在油漆桶圖標中。
- 在 Cotton Bureau 上添加到購物車和結帳流程。 它不會將您帶到一個新的購物籃頁面，它就像一個位於可見頁面右側的旋轉木馬。
2. 證明因果
使用交互和動畫可以幫助向用戶展示正在發生的事情以及他們可以期待什麼。
一個典型的例子是拖放界面。 當你拿起一個媒體對象並將它移動到“放置區”時，應該有用戶反饋告訴他們他們已經拿起它並且他們已經移動到正確的位置來放置項目。 一旦他們把它放進去，就應該有驗證告訴用戶他們的任務是成功的。 這可以通過顏色變化、積極的驗證消息甚至聲音效果來完成。
3. 提供反饋
交互可以提供積極或有用的反饋，以告知他們任務的狀態。
對於這個例子，讓我們以一個支付按鈕為例。 當您點擊那個漂亮、閃亮的“立即付款”按鈕時，您遇到過多少執行不力的電子商務網關，結果卻困惑於您是否因為它正在處理而點擊了它？ 它沒有說那是它在做什麼。 因此，交互可以改變按鈕的狀態，並通過一些動畫告訴用戶“正在處理付款”，然後在重新定位到訂單確認頁面之前告訴用戶“已收到付款”。 不用再想十秒鐘發生了什麼，也不要再懷疑你是否打破了互聯網。
4.突出關鍵信息
與靜態內容相比，動畫可以更好地促進和吸引對關鍵信息的關注。
當某些內容在同一屏幕視圖中具有更高的優先級時，使用顏色和排版來宣傳它可能會破壞設計系統的一致性，或者如果過度使用會顯得格格不入。 交互有助於在不影響佈局的情況下突出重要內容。
想想健身應用程序：當您第一次加載儀表板時，您希望看到今天的主要活動和統計數據。 使用簡單的動畫可以在不稀釋屏幕上顯示的內容的情況下顯示此內容。
5. 創造績效感知
交互設計可以在心理上讓用戶覺得網站或應用程序表現更好。
速度是一個熱門話題，並且有充分的理由，因為它是與跳出率相關的常見因素。 在某些情況下，您已經最大限度地優化了頁面速度，但加載頁面仍然需要一些時間。 除了向用戶顯示任何內容或顯示加載圖標之外，還有其他選擇。
骨架加載可用於以線框形式顯示可預測的佈局，因此在頁面加載之前，用戶大致知道在哪裡查看以及他們如何與界面交互。 從心理上講，與沒有看到任何事情發生相比，感覺頁面加載速度更快，但實際上，它是在同一時間加載的。
您還可以利用加載時間作為一個機會，通過友好的消息來分散等待時間，讓用戶了解正在發生的事情以及即將發生的事情。
6. 添加品牌個性
交互設計和動畫可以為品牌定下基調，並建立更緊密的情感聯繫。
以角色為主導的品牌可以通過引入互動將個性帶入體驗中而受益匪淺。 您可以利用吉祥物的人類特徵。 當您的品牌中沒有任何視覺效果時，您仍然可以通過使用速度和頻率來添加個性。 想想谷歌和他們古怪的點預加載器或語音命令激活，它們以簡單的方式帶來友好和有趣的方法。
與用戶建立情感聯繫是獲得定期訪問的好方法。 交互設計可以讓技術感覺更加以人為中心——這總是很好的目標。
將交互引入您的設計過程
低保真草圖和合成
通過快速草圖和註釋快速傳達您的想法並與開發人員協作，以發現實現交互的最佳方式。
交互設計工具
市場上有越來越多的交互設計工具，它們在構建之前可以創建和原型的交互風格方面變得越來越先進。
- Keynote：如果您正在尋找粗略和簡單的方式來表達您的想法，Keynote 是快速取勝的選擇。
- Adobe Animate：將其全部保留在 Adobe 中，並與其他工具無縫交叉。 這是說明性動畫的理想選擇。
- Tumult 炒作：如果您熟悉 Sketch 界面並了解時間線，那麼 Tumult 會讓您如魚得水。
- Framer：這是一個專門構建的交互設計工具，具有非常先進的功能，可以將您的動畫與 JavaScript 相匹配。
- Principle：有了一個很好的 Sketch 鏈接，Principle 正在成為交互的首選。 學習起來相對簡單，而且你能在其中取得的成就很棒。
- 原子：添加數據、邏輯和變量，使您的交互與最終構建一樣實用。 這適用於具有一些編碼知識的高級設計師。
- Invision Studio：現在還為時尚早，但 Invision Studio 有一些很棒的功能，並且與 Principle 有一些相似之處。 時間會證明這是否足夠先進以主導原型設計和協作市場。
詳細交接注意事項
有很多包含交互的協作工具。
如果您處於高度協作的環境中，留下開發人員筆記是一個爭論的焦點，但如果您在遠程工作，針對您的想法和原型的詳細筆記以及良好的移交可以確保您的交互被納入構建。
編譯演示和靈感庫
通過使用 CodePen 和 Use your interface 等網站，您可以開始構建解決您正在處理的問題的交互解決方案庫。
將其添加到您的設計系統中
交互通常是第一件事，這就是為什麼您的模式庫和設計系統可以節省時間的原因。
如果您已經通過交互成功解決了一個常見問題（經過適當測試），那麼將其放入您的設計系統或模式庫中，以便在類似場景中重用，而無需投入時間從頭開始做其他事情。
如需網頁設計和用戶體驗 (UX) 方面的幫助，請立即與我們聯繫。
如果您在用戶體驗方面需要幫助，請隨時與我們聯繫。