了解 UI 設計的手勢
已發表: 2021-03-29點擊、滑動、拖動、長按——這些只是主導我們數字體驗的幾個手勢。 觸摸屏 iPhone 幾年前就成為了移動手勢的主流，從那以後我們就再也沒有回頭。
手勢會影響我們與界面的交互方式，包括手機、筆記本電腦和 iPad。 但是，我們不必走太遠就能找到超越我們工作和娛樂設備的手勢界面。 在與汽車屏幕或浴室水槽交互時使用手勢已不再罕見。
自然用戶界面 (NUI) 對用戶來說非常自然，以至於界面感覺，有時甚至是不可見的，就像觸摸屏界面一樣。 一些 NUI 甚至使用手勢控制，允許用戶在沒有直接身體接觸的情況下與界面進行交互。 寶馬最近發布了一項手勢控制功能，讓用戶可以對汽車音量、通話等進行非接觸式控制。
手勢在用戶界面設計中變得越來越普遍，並且在我們的日常生活中扮演著越來越複雜的角色。
隨著技術的進步，UX 和 UI 設計師和企業將需要適應。 您不必了解所有復雜的技術或對計算機智能有深入的了解。 不過，您應該對手勢技術的能力、功能和最佳設計實踐有基本的了解。
什麼是好的手勢
那麼，什麼是手勢？
手勢是一種交流方式。 長期以來，我們一直使用手勢和點頭來幫助傳達意義，而現在，手勢在與用戶界面的交流中發揮著作用。
良好的手勢可以提供符合我們思維方式的有效、高效的溝通。 我們的思想和知識會影響我們說話的方式，它們也會影響我們對手勢的使用，尤其是在 UI 設計中。 想一想，對於在現代技術環境下長大的年輕一代來說，掌握手勢是多麼容易——或者滑動的行為如何模仿推開或擦掉某物。 這就是為什麼理解你的用戶是必不可少的，即使在手勢設計中也是如此。
手勢跨越了物理和數字領域之間的障礙，使我們能夠與我們的身體與數字媒體互動。 在某些方面，它使使用數字應用程序變得更加有趣，但這還不足以讓手勢成為一個好的手勢。
良好的動作手勢通過使應用程序更易於在所有情況下使用來提高可用性。 精心設計的手勢具有更短的學習曲線，因為它們感覺自然且易於上手。 引用比爾蓋茨的話：
“直到現在，我們一直不得不適應技術的限制，並使我們使用計算機的方式符合一套任意的約定和程序。 有了 NUI，計算設備將首次適應我們的需求和偏好，人類將開始以對我們來說最舒適、最自然的方式使用技術。”
手勢技術的好處
手勢界面的廣泛使用是由於它們帶來的許多好處。 手勢最顯著的三個好處是更簡潔的界面、易用性和改進的任務完成。
1. 更簡潔的界面
人類消費的內容比以往任何時候都多，企業使用更多的數據，技術繼續提供更多的服務。 隨著內容的增加，界面和顯示很容易顯得雜亂無章。 設計師可以使用手勢來減少佔用空間的視覺元素的數量，例如按鈕。
2. 易用性
如上所述，使用基於手勢的界面交互變得更加自然。 簡單手勢的易用性使我們能夠以最小的努力以最大的速度使用技術。
3. 改進任務完成
當用戶完成任務所需要做的事情更少時，任務完成率和轉化率就會提高。 當您花費較少的精力時，您更有可能完成任務。 基於手勢的用戶界面通過簡化和快速的任務來利用這一點。 他們甚至可以減少完成任務所需的步驟數。
UI設計中的手勢類型
觸摸設計導致了多種手勢的發展，其中最常見的是輕敲和滑動。 手勢分為三類：
- 導航手勢（導航）
- 動作手勢（採取行動）
- 變換手勢（操作內容）
以下是所有（或幾乎所有）用戶都熟悉的跨界面的一些最常見的手勢——即使不是有意識的。 我們提到了屏幕，但您可以將屏幕替換為觸摸板或任何其他手勢界面。
輕敲
點擊手勢是指您用一根手指點擊屏幕以打開或選擇某項內容，例如應用程序或頁面。 這裡有一個提示：設計可點擊的界面元素，以便整個框或行都是可點擊的——而不僅僅是文本。 給用戶更多空間會增加可用性。
雙擊
雙擊是指您連續兩次連續點擊屏幕。 許多應用程序使用此手勢進行放大，但在 Instagram 上，用戶可以雙擊照片來點贊。
滑動
滑動包括在屏幕上向一個方向移動手指，在一側向下觸摸，在另一側抬起手指。 滑動手勢通常用於在頁面之間滾動或切換。 Tinder 使用向右滑動來匹配個人資料，向左滑動來跳過一個。
多指滑動
您還可以用兩根或三根手指進行滑動手勢。 這是使用兩指和三指滑動來執行不同操作的筆記本電腦觸摸板的常見功能。
拖
拖動使用與滑動相同的一般動作，只是您移動手指的速度較慢並且在將對象拉到您想要的位置之前不要抬起它。 您可以使用拖動將項目移動到新位置，例如在重新組織手機應用程序時。
一扔
與滑動一樣，滑動手勢是指您在屏幕上高速移動手指。 與拖動不同，您的手指不會與元素保持接觸。 Flings 通常用於從視圖中移除某些東西。
長按
長按是指您點擊屏幕但手指按住的時間比平時長。 長按可打開菜單選項，例如按住文本進行複製或按住應用程序將其刪除。
捏
作為許多兩指手勢之一，捏合是指您將兩根手指分開在屏幕上，然後以捏合動作將它們相互拖動。 捏合手勢通常用於在放大後縮小。有時它們會顯示所有打開屏幕的視圖以用於導航目的。
捏開或展開
捏開或展開手勢與捏相反。 你將兩根手指併攏向下，然後將它們分開。 展開，如雙擊，一般用於放大。
迴轉
要進行旋轉，請用兩根手指按屏幕並以圓周運動方式旋轉它們。 旋轉的最佳示例是當您在 Google 地圖上轉動地圖以查看您周圍的情況。
設計手勢101
使用人們所知道的
手勢已經存在了一段時間，因此對於大多數手勢，都存在一般準則。
在大多數情況下，在為界面設計手勢時，您需要遵循一些規則。 例如，在創建應用程序時，您需要考慮用戶將在哪些界面上使用您的應用程序。 用戶有可能會在 Android 和 Apple 手機上下載您的應用程序，這兩種手機都已經使用了產品特定的手勢。 您需要評估產品界面的手勢並決定如何利用它們，或者是否值得添加用戶不熟悉的手勢。
以下是流行產品界面的一些方便的手勢和動作指南。
- 谷歌手勢指南
- 微軟手勢指南
- Apple 手勢指南
- Android 手勢指南
在設計基於手勢的用戶界面時，堅持用戶所知道的內容是一種很好的做法。 如果需要，您可以發揮創意，但手勢和界面之間的一定程度的一致性有助於使它們對用戶保持直觀，從而提高產品的可用性。
如果您認為有新的手勢，您需要在實施之前對其進行廣泛的測試。 在向公眾發布之前，您將執行一系列用戶研究方法來測試手勢的可用性、有效性、學習曲線和用戶滿意度。
您可以選擇為不同的目的重複使用眾所周知的手勢，但同樣，您應該提前測試此策略的有效性。 這裡的好處是用戶至少熟悉動作。
舉個例子，Instagram 使用雙擊來點贊或“收藏”帖子。 雙擊通常用於放大，但它適用於 Instagram 的目的。 這也是一項關於效率的偉大研究：點擊帖子下方的心臟需要更少的點擊，但需要更多的目標。 另一種雙擊方法允許用戶更快地滾動，因為他們可以瞄準整個圖像，並且可以直觀地點擊您喜歡的對象。
設計師已經開始開發一種帶有手、圓圈和箭頭的設計語言，用於向產品開發人員和戰略家傳達手勢意圖。 這種語言幾乎是通用的，偏差最小。
在屏幕外思考
手勢存在於手機和筆記本電腦使用之外的日常場景中。 越來越多的公共廁所安裝了運動感應水槽、空氣乾燥器和紙巾分配器。 這些設備還可以防止細菌傳播——這是流感季節的一個很好的特點。 與此同時，自動駕駛汽車正在使用手勢識別技術來提高其有效性和安全性。
但是您仍然可以在屏幕外思考的同時通過手機手勢發揮創意。 多年來，設備一直使用旋轉和搖晃作為交互方式。 例如，Apple 的“搖動撤消”讓用戶可以選擇通過搖動手機來撤消操作。 到目前為止，您可能已經熟悉水平旋轉屏幕以全屏觀看視頻。
只要首先進行測試，創造性的手勢技術就可以讓產品更進一步並提高可用性。
手勢和可訪問性
手勢，就像所有東西一樣，應該是可訪問的。 可訪問性是指使產品對所有環境中的所有人（包括殘疾人）都可以訪問和使用。 手勢應遵循無障礙設計最佳實踐以促進平等環境，遵守美國殘疾人法案 (ADA)，並允許每個可以從您的產品中受益的人使用它。
除了確保界面手勢可訪問之外，值得考慮如何使用手勢來提高可訪問性。 蘋果意識到 iPhone 的平面、無紋理屏幕對盲人用戶構成了障礙。 因此，他們使用基於手勢的界面來創建其他基於輔助功能的手勢，以幫助視障人士使用他們的產品。
不要忘記用戶體驗
交互使用術語 UX 和 UI 是很常見的，但這是一種不准確的做法。 UX 代表用戶體驗，它在與產品互動時處理用戶的感知和情感。 UI 代表用戶界面，涉及用戶與之交互的產品元素。 UI是UX設計的重要元素。 如果您有興趣了解更多關於它們及其差異的信息，請查看我們的 UX 與 UI 設計指南。
這裡的重點是 UX 和 UI 是不同的，但在設計界面時考慮用戶體驗至關重要。 有趣但無用或有趣但可用性差的 UI 手勢是設計人員和開發人員忘記 UX 的結果。
無論您進行了多少測試，都應為用戶提供刪除某些手勢功能的選項。 輕敲是每個人都熟悉的重要觸摸屏手勢，但有些手勢對產品的功能並不重要，只是為了使其更實用而存在。 有時，像這樣的手勢會惹惱不熟悉它們的用戶，或者會在無意中觸發手勢。
例如，在 Mac 上，在觸摸板上向左或向右滑動兩根手指會向 Web 瀏覽器發送向後或向前頁面。 許多用戶無意中做出此手勢，並且當頁面不斷變化時感到沮喪。 因此，Apple 為用戶提供了禁用此功能和許多其他功能的選項。
優化用戶入職
用戶引導通過教用戶如何使用產品來提高產品的成功使用率。 考慮一個新程序，它在首次打開時會引導您完成所有功能或使用步驟。
用戶引導對於觸摸手勢很重要，因為它們通常是隱藏的並且容易錯過，特別是如果用戶不熟悉手勢或在該上下文中沒有使用該手勢的經驗。 如果他們不知道他們可以使用它或如何使用它，他們就不會。
入職用戶時，您希望簡明扼要，一次只教一件事，並遵循被證明在測試中效果最好的學習曲線。 冗長的教程和分步列表很無聊，互動性較差，並且經常被跳過。
擁抱手勢界面的未來
手勢已經在這裡了。 它們存在於當下，使它們在我們的日常生活中發揮作用。 對於用戶來說，這些手勢可以存在於他們的潛意識中，因為他們不假思索地滑動和雙擊。 產品設計師、開發人員和戰略家必須在更親密的層面上理解手勢。
觸摸設計是該領域不斷增長的一部分。 手勢存在於浴室和汽車中——誰知道接下來會發生什麼？ 接受它。 更有用的產品是有效的產品。
有疑問或想升級產品的 UX 和 UI？ 我們很樂意交談。 只需伸出手。