如何設計好用的觸控手勢

引言

我們生活在一個人機互動頻繁，由設備驅動的世界中。

隨著觸摸屏逐漸成為移動設備的標配，多點觸控手勢的廣泛應用,讓我們與手機、平板電腦甚至是筆記本電腦之間建立起了一種更寬廣的聯系方式。我們通過模擬真實世界的手勢與屏幕上的各種元素進行互動，使許多曾經不曾想或者不敢想的人機交互方式變成了現實，同時手勢操作的應用降低了人與物理設備之間的溝通的門檻。

圖0. 嬰兒幾乎無困難的通過屏幕玩遊戲

我家那位小P孩，不到2歲就已經能夠很自然輕鬆解鎖ipad、翻頁找到他喜歡玩的熊貓餐廳，接著熟練地在各種食材選折他喜歡的，製作一份美味的虛擬美食；而我們也樂於買各種大屏手機和平板電腦送給我們的長輩。移動設備及手勢交互方式給我們帶來革命性體驗和便捷，移動的觸控時代早已到來，您是否也與時俱進了呢？值得我們每一位設計師反思。

一、什麼是觸控手勢

觸控手勢是自然用戶界面（NUI）的一種表現形式。

自然用戶界面（Natural user interface, NUI）是指一類無形的用戶界面。NUI則隻需要人們以最自然的交流方式（如語言和文字）與機器互動。直觀的說，使用NUI的設備不需要鍵盤或鼠標。特別是觸控技術將使人機交互變得更加自然直觀，更為人性化。

您的手機、平板電腦還有筆記本擁有識別多點觸控輸入的功能來幫助你實現對其廣泛的運用。這種輸入方式幫助我們實現與屏幕內容的交互，而模仿真實中的操作手勢可以降低我們對操作屏幕對象的認知障礙。

在PC時代，我們需要他人或者一個說明教程去教會我們怎麼使用鼠標，移動屏幕的光標，而這些在現實世界裏幾乎找不到可相映射的東西，然後學習怎麼雙擊打開一個文件，按住一個文件不放，把它拖動到文件夾裏面。

觸控手勢帶來的是自然用戶界面，支持觸控的移動設備能夠自然直觀的被所有年齡層，不同技能水平的人所使用。使用Multi-Touch多點觸控式接口技術，取代目前所使用的鍵盤（按鍵）、鼠標，將進一步體現出人性化操控接口的未來趨勢。

圖1. 電容式觸摸屏結構原理圖

試想一下在那些老套的用戶界面裏，需要你把鼠標懸停或者郵件點擊目標上才能獲得更多詳細的信息，而這些在手機設備上將不再起作用。如何擺脫這種慣用的設計呢？答案就是，創建移動先行體驗。

二、觸控手勢的的使用情景（移動的情景）

移動情景指的是用戶使用時的環境和狀態——也就是任何可以影響用戶與設備進行交互的內容。由於這些情境持續而快速地變化，對移動設備而言就顯得尤為重要。我們要考慮用戶分心、多任務、手勢操作、低電量條件和糟糕的連接條件等複雜環境下的通用設計。

圖2. 移動中的互動語境（出處：Nadav Savio | Giant Ant Design）

各種移動環境下會影響到用戶使用觸屏設備完成任務的效率和準確度的因素有：

– 移動情景下，注意力容易被分散（如交談，觀察周圍環境等）
– 移動情景下，操作手機的時間碎片化（各種事情打斷）
– 移動情景下，任務容易被中斷（意外情況影響）
– 移動情景下，肢體可能被其他物體被占用（如遛狗、拎包等）
– 移動情景下，噪音分散注意力（車水馬龍、人聲鼎沸的路邊）

三、觸控手勢的基本操作

圖3. 鋼鐵俠系列電影中的全息觸控交互

所謂自然手勢就是在真實物理世界中存在或演繹而來的手勢。例如上下滑動滾動列表，滑動以平移等。這類手勢是自然的，不需要或很少需要用戶去學習的。

– 長按以查看更多操作(現在有了3D Touch，同長按操作相比，最大區分是需要是有一定的按壓力度）
– 點擊執行主操作
– 滑動以平移
– 輕掃以選定，並進行命令操作
– 收縮和拉伸以縮放
– 轉動以旋轉
– 邊緣輕掃以使用系統命令

四、好用的手勢是怎樣的？

首先我們來看看多點觸控的優缺點。

那麼什麼是好用的手勢呢？

好用的手勢一來簡單，二來支持單手操作，它們該如由Tweetie創始人Loren Brichter所開發並獲得專利的“下拉刷新”一樣受歡迎。或者像 iBook的翻頁動作一樣自然簡單。以下是好用的手勢該有的一些特征：

– 簡單易用。不僅動作簡單，還要能在擁擠的交通工具上單手操作
– 容易記憶。其一手勢要好記，其二要讓人願意記住
– 符合認知習慣。也就是說，該手勢一方面要遵循人的自然習慣和意識，另一方面要契合手勢即將產生的操作
– 實用。手勢要讓用戶感到舒服，少有用戶願意點兩次才看到想看的東西，讓會讓他們感到麻煩
– 愉悅的體驗。Winkler 認為好的手勢會有神奇的感覺。UX 總是個未知數，而且難於言傳。但這恰是我們認識、
享受科技的一種表現
– 及時反饋。反饋就是說用戶知道當前正在進行的操作。用戶進行完手勢操作後有明確的狀態信息告知