如何設計手勢驅動的UI

2019-02-11 分類：網站建設

請記住，制作手機網站或者APP時，使用鼠標懸停和點擊的時間是用于與網站或應用程序進行交互的最常用的觸發器？當蘋果推出第一款iPhone時，多點觸控技術成為主流，用戶了解到，他們不僅可以點擊并點擊界面，還可以捏住，傳播和滑動。手勢成為新的點擊。

今天，移動UI的成功可以通過使用手勢的有效性來做出。

如何選擇好的手勢

當您在UI中嵌入手勢時，了解您的市場和您的目標受眾可能使用的其他應用程序至關重要。嘗試在您的應用程序中使用相同類型的手勢。這樣，您不僅可以根據目標市場的行為來優化用戶界面，還可以從一開始就為用戶設計一個更舒適的方法。

教學手勢

手勢是每個移動應用程序的必備條件，但使用戶顯而易見的是一個挑戰。觸摸界面提供了許多機會，使用自動手勢，如點按，滑動和捏合來完成任務，但與圖形用戶界面控件不同，基于手勢的交互往往被用戶隱藏。所以除非用戶先前知道手勢存在，否則不會嘗試。

因此，發現設計至關重要。您需要確保您提供正確的線索 - 視覺符號，幫助用戶輕松發現他們如何與界面交互。

避免在登機時的教程和演練

教程和演練是手勢驅動的應用程序相當受歡迎的練習。在許多情況下，將教程合并到應用程序中意味著向用戶顯示一些說明來說明該界面。但是，UI教程不是解釋應用程序核心功能的最優雅的方式。前期教程的主要問題是用戶必須記住使用該應用程序的所有新方法。太多的信息可能會導致更多的混亂。例如，清除應用程序從強制性的7頁教程開始，用戶必須耐心閱讀所有信息，并嘗試將其提交到其內存。這是糟糕的設計，因為它要求用戶即使在實際嘗試應用程序之前進行工作。

在行動背景下進行教育

在教導用戶使用您的UI時，我建議主要通過在操作的上下文中進行教育（用戶實際需要時）。為了教人們一個新的手勢，你必須慢慢開始。給定一些迭代，指令可以轉化為更漸進的發現。使用時間提示，并專注于解釋單個交互，而不是嘗試解釋用戶界面中的每個可能的操作。通過提供明顯的語境線索來提示手勢。

您可以在下方看到Android應用程式的「姿態教育」畫面。該應用程序具有基于手勢的交互，但不使用教程來指導用戶。相反，它會使用在新用戶的第一次啟動中出現的提示，當用戶到達應用的相關部分時，一次一個。該技術基于文本命令，其提示用戶執行手勢，并用簡短明確的描述描述交互結果。

使用動畫來溝通手勢

手勢可以使用，就像沒有動畫一樣。作為設計師，您可以使用動畫來傳達有關可用操作的信息。例如，為了使用戶意識到他們可以與特定元素進行交互，您可以在交互式元素上創建一個文本命令，并對交互結果進行動畫化，如下面的示例所示。

基于動畫的使用，有三種流行的技術來幫助教育用戶。第一個是一個提示動議。提示動作或動畫視覺提示顯示了在執行動作時如何與元素進行交互的預覽。它旨在創建手勢與其觸發的動作之間的關聯。例如，布丁怪物的游戲機制完全基于手勢，但是它們允許用戶獲得基本的想法，而不用猜測。動畫傳達關于功能的信息 - 一個場景用動畫展示，用戶立即清楚該做什么。

第二種技巧是內容挑逗。內容挑逗是微妙的視覺線索，表明什么是可能的。下面的例子演示了卡的內容挑逗 - 它簡單地表明，當前卡片后面存在其他卡片，這使得清除滑動是可能的。