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

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

• 上一(yī)篇：極有可能被低估的三種有趣的網頁設計趨勢 2017/8/14
• 下(xià)一(yī)篇：讓視覺設計變得高效且有說服力 2017/8/14

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