随着觸摸屏逐漸成為(wèi)移動設備的标配，多(duō)點觸控手勢的廣泛應用(yòng)，讓我們與手機、平闆電(diàn)腦甚至是筆(bǐ)記本電(diàn)腦之間建立起了一種更寬廣的聯系方式。我們通過模拟真實世界的手勢與屏幕上的各種元素進行互動，使許多(duō)曾經不曾想或者不敢想的人機交互方式變成了現實，同時手勢操作(zuò)的應用(yòng)降低了人與物(wù)理(lǐ)設備之間的溝通的門檻。
我家那位小(xiǎo)P孩，不到2歲就已經能(néng)夠很(hěn)自然輕松解鎖iPad、翻頁(yè)找到他(tā)喜歡玩的熊貓餐廳，接着熟練地在各種食材選折他(tā)喜歡的，制作(zuò)一份美味的虛拟美食；而我們也樂于買各種大屏手機和平闆電(diàn)腦送給我們的長(cháng)輩。移動設備及手勢交互方式給我們帶來革命性體(tǐ)驗和便捷，移動的觸控時代早已到來，您是否也與時俱進了呢(ne)？值得我們每一位設計師反思。
一、什麽是觸控手勢
觸控手勢是自然用(yòng)戶界面（NUI）的一種表現形式。
自然用(yòng)戶界面（Natural user interface, NUI）是指一類無形的用(yòng)戶界面。NUI則隻需要人們以最自然的交流方式（如語言和文(wén)字）與機器互動。直觀的說，使用(yòng)NUI的設備不需要鍵盤或鼠标。特别是觸控技(jì )術将使人機交互變得更加自然直觀，更為(wèi)人性化。
您的手機、平闆電(diàn)腦還有(yǒu)筆(bǐ)記本擁有(yǒu)識别多(duō)點觸控輸入的功能(néng)來幫助你實現對其廣泛的運用(yòng)。這種輸入方式幫助我們實現與屏幕内容的交互，而模仿真實中(zhōng)的操作(zuò)手勢可(kě)以降低我們對操作(zuò)屏幕對象的認知障礙。
在PC時代，我們需要他(tā)人或者一個說明教程去教會我們怎麽使用(yòng)鼠标，移動屏幕的光标，而這些在現實世界裏幾乎找不到可(kě)相映射的東西，然後學(xué)習怎麽雙擊打開一個文(wén)件，按住一個文(wén)件不放，把它拖動到文(wén)件夾裏面。
觸控手勢帶來的是自然用(yòng)戶界面，支持觸控的移動設備能(néng)夠自然直觀的被所有(yǒu)年齡層，不同技(jì )能(néng)水平的人所使用(yòng)。使用(yòng)Multi-Touch多(duō)點觸控式接口技(jì )術，取代目前所使用(yòng)的鍵盤（按鍵）、鼠标，将進一步體(tǐ)現出人性化操控接口的未來趨勢。
試想一下在那些老套的用(yòng)戶界面裏，需要你把鼠标懸停或者郵件點擊目标上才能(néng)獲得更多(duō)詳細的信息，而這些在手機設備上将不再起作(zuò)用(yòng)。如何擺脫這種慣用(yòng)的設計呢(ne)？答(dá)案就是，創建移動先行體(tǐ)驗。
二、觸控手勢的的使用(yòng)情景（移動的情景）
移動情景指的是用(yòng)戶使用(yòng)時的環境和狀态——也就是任何可(kě)以影響用(yòng)戶與設備進行交互的内容。由于這些情境持續而快速地變化，對移動設備而言就顯得尤為(wèi)重要。我們要考慮用(yòng)戶分(fēn)心、多(duō)任務(wù)、手勢操作(zuò)、低電(diàn)量條件和糟糕的連接條件等複雜環境下的通用(yòng)設計。
各種移動環境下會影響到用(yòng)戶使用(yòng)觸屏設備完成任務(wù)的效率和準确度的因素有(yǒu)：
– 移動情景下，注意力容易被分(fēn)散（如交談，觀察周圍環境等）
– 移動情景下，操作(zuò)手機的時間碎片化（各種事情打斷）
– 移動情景下，任務(wù)容易被中(zhōng)斷（意外情況影響）
– 移動情景下，肢體(tǐ)可(kě)能(néng)被其他(tā)物(wù)體(tǐ)被占用(yòng)（如遛狗、拎包等）
– 移動情景下，噪音分(fēn)散注意力（車(chē)水馬龍、人聲鼎沸的路邊）
三、觸控手勢的基本操作(zuò)
所謂自然手勢就是在真實物(wù)理(lǐ)世界中(zhōng)存在或演繹而來的手勢。例如上下滑動滾動列表，滑動以平移等。這類手勢是自然的，不需要或很(hěn)少需要用(yòng)戶去學(xué)習的。
– 長(cháng)按以查看更多(duō)操作(zuò)(現在有(yǒu)了3D Touch，同長(cháng)按操作(zuò)相比，最大區(qū)分(fēn)是需要是有(yǒu)一定的按壓力度）
– 點擊執行主操作(zuò)
– 滑動以平移
– 輕掃以選定，并進行命令操作(zuò)
– 收縮和拉伸以縮放
– 轉動以旋轉
– 邊緣輕掃以使用(yòng)系統命令
四、好用(yòng)的手勢是怎樣的？
首先我們來看看多(duō)點觸控的優缺點。
好用(yòng)的手勢一來簡單，二來支持單手操作(zuò)，它們該如由Tweetie創始人Loren Brichter所開發并獲得專利的“下拉刷新(xīn)”一樣受歡迎。或者像 iBook的翻頁(yè)動作(zuò)一樣自然簡單。以下是好用(yòng)的手勢該有(yǒu)的一些特征：
– 簡單易用(yòng)。不僅動作(zuò)簡單，還要能(néng)在擁擠的交通工(gōng)具(jù)上單手操作(zuò)
– 容易記憶。其一手勢要好記，其二要讓人願意記住
– 符合認知習慣。也就是說，該手勢一方面要遵循人的自然習慣和意識，另一方面要契合手勢即将産(chǎn)生的操作(zuò)
– 實用(yòng)。手勢要讓用(yòng)戶感到舒服，少有(yǒu)用(yòng)戶願意點兩次才看到想看的東西，讓會讓他(tā)們感到麻煩
– 愉悅的體(tǐ)驗。Winkler 認為(wèi)好的手勢會有(yǒu)神奇的感覺。UX 總是個未知數，而且難于言傳。但這恰是我們認識、
享受科(kē)技(jì )的一種表現
– 及時反饋。反饋就是說用(yòng)戶知道當前正在進行的操作(zuò)。用(yòng)戶進行完手勢操作(zuò)後有(yǒu)明确的狀态信息告知
五、手勢設計應用(yòng)過程中(zhōng)需要注意的點：（手勢設計準則）
符合認知習慣
在非概念性項目中(zhōng)使用(yòng)基礎手勢（組合）之外的“創新(xīn)”手勢，未建立統一規範的情況下，使用(yòng)混亂會導緻用(yòng)戶困惑，學(xué)習成本稿，增加記憶負擔，難以引導用(yòng)戶培養使用(yòng)習慣，技(jì )術上的限制可(kě)能(néng)會使“創新(xīn)”變成不便。
最終使用(yòng)者是人，手勢操作(zuò)是基于人的行為(wèi)來定義的。手勢操作(zuò)是人們現實世界行為(wèi)的映射，因此，手勢設計要符合大多(duō)數人的認知習慣，減少用(yòng)戶的認知成本。比如有(yǒu)方向性的手勢操作(zuò)，要盡量符合拇指的活動方向，且要與認知相一緻。
記憶力限制
因為(wèi)這些手勢操作(zuò)不能(néng)明白的顯示在界面上，沒有(yǒu)代表動作(zuò)的可(kě)視元素，需要用(yòng)戶記住哪種手勢對應的是哪些操作(zuò)，一些不常用(yòng)的手勢操作(zuò)往往很(hěn)難發現。如果手勢直觀常用(yòng)自然沒問題，而如果沒有(yǒu)“自然”的手勢去代表一個動作(zuò)，用(yòng)戶就會感到困惑，于是便需要記憶，就像在使用(yòng)命令行界面時要記住那些命令一樣。
一個App中(zhōng)手勢數量需保持在5個數量以下，多(duō)依賴與界面的引導和暗示，讓此類用(yòng)戶根據情境記憶這些手勢，從而增加手勢的易記憶性。
如果用(yòng)戶對其缺乏認知，這些手勢操作(zuò)就不易被發現，也便不會為(wèi)人所用(yòng)，甚至造成操作(zuò)障礙。（壞的例子，找不到導航欄）
不同應用(yòng)場景采用(yòng)不同的手勢設計
人們會在千奇百怪的環境中(zhōng)使用(yòng)我們的産(chǎn)品，我們的産(chǎn)品在和周圍環境争奪用(yòng)戶的注意力，憑借一個3.5~5寸的屏幕與車(chē)水馬龍、人聲鼎沸的大千世界作(zuò)鬥争，因此在實際的手勢設計中(zhōng)還需考慮該應用(yòng)的使用(yòng)場景。
效率型和實用(yòng)型應用(yòng)，這類應用(yòng)一般使用(yòng)場景是在行進間，考慮手機一般随着用(yòng)戶的行進而搖晃，操作(zuò)效率以及誤操作(zuò)等因素，一遍采用(yòng)單手操作(zuò)手機的手勢交互。
遊戲等屏幕沉浸型應用(yòng)，一般為(wèi)休閑且穩定的操作(zuò)環境，可(kě)以适當的設置一些複雜手勢配合遊戲中(zhōng)的高級操作(zuò)功能(néng)，增加遊戲的操作(zuò)樂趣。
适度的應用(yòng)手勢
2014年火得不能(néng)再火，一旦開始玩根本停不下來的《Flappy bird》。遊戲以簡單但有(yǒu)效的方式使用(yòng)了基本的手勢。點擊或不點擊是唯一的操作(zuò)手勢。玩家可(kě)以很(hěn)快地知道應該使用(yòng)什麽手勢以及怎麽利用(yòng)手勢去進行遊戲。
供即時反饋
在用(yòng)戶觸摸屏幕的時候，立即提供視覺提示，可(kě)提高用(yòng)戶的信心。交互操作(zuò)涉及到的元素可(kě)表現為(wèi)改變顔色、改變大小(xiǎo)或發生移動/震動。
使操作(zuò)可(kě)逆
觸控互動操作(zuò)應該是可(kě)逆的。提供視覺反饋來表明當用(yòng)戶擡起手指時會發生什麽，同時允許用(yòng)戶反悔，取消操作(zuò)。這将使你的應用(yòng)能(néng)夠安(ān)全地使用(yòng)觸控操作(zuò)進行浏覽。

不要讓你的手勢觸發區(qū)域遠(yuǎn)離拇指熱區(qū)（拇指法則）
Jash Clark在《觸動人心-設計優秀的iPhone應用(yòng)》一書中(zhōng)提到，拇指的活動範圍對操作(zuò)手機的效率以及正确度都有(yǒu)一定的影響。
雖然拇指能(néng)夠劃到整個屏幕，但拇指在所及範圍和靈活性上是有(yǒu)限的，隻有(yǒu)三分(fēn)之一的屏幕是真正容易觸及的——也就是拇指正對的區(qū)域。為(wèi)了獲得舒适的人機體(tǐ)驗，應将主要點擊目标放置在方便拇指點擊的熱區(qū)内。
保持手勢的全局性
不要讓用(yòng)戶在你的應用(yòng)中(zhōng)适應了你創造的手勢後，卻又(yòu)在你的應用(yòng)中(zhōng)碰壁。
如果用(yòng)戶已經習慣你的手勢，覺得你的手勢達到了方便快捷的目的，并耗費學(xué)習成本掌握并适應了你的手勢，那麽便意味着你成功了一半。盡量用(yòng)簡單的手勢完成常用(yòng)功能(néng)，需要複雜手勢操作(zuò)完成的功能(néng)，要有(yǒu)一個方便且更容易發現的方式相配合。盡量使用(yòng)統一的手勢，減少不同手勢的切換頻率。

• 上一篇：極有(yǒu)可(kě)能(néng)被低估的三種有(yǒu)趣的網頁(yè)設計趨勢 2017/8/14
• 下一篇：讓視覺設計變得高效且有(yǒu)說服力 2017/8/14

本文(wén)系本網編輯轉載，轉載目的在于傳遞更多(duō)信息，并不代表本網贊同其觀點和對其真實性負責。如涉及作(zuò)品内容、版權和其它問題，請在30日内與本網聯系，我們将在第一時間删除内容！
[聲明]本站文(wén)章版權歸原作(zuò)者所有(yǒu) 内容為(wèi)作(zuò)者個人觀點 本站隻提供參考并不構成任何投資及應用(yòng)建議。