頭條楓林網
文章摘要： 需要使用者記住哪種手勢對應的是哪些操作二、觸控手勢的的使用情景（移動的情景） 移動情景指的是使用者使用時的環境和狀態——也就是任何可以影響使用者與裝置進行互動的內容
引言:
我們生活在一個人機互動頻繁，由裝置驅動的世界中。
隨著觸控式螢幕逐漸成為移動裝置的標配，多點觸控手勢的廣泛應用,讓我們與手機、平板電腦甚至是膝上型電腦之間建立起了一種更寬廣的聯繫方式。
我們通過模擬真實世界的手勢與螢幕上的各種元素進行互動，使許多曾經不曾想或者不敢想的人機互動方式變成了現實，同時手勢操作的應用降低了人與物理裝置之間的溝通的門檻。
圖1. 嬰兒幾乎無困難的通過螢幕玩遊戲
我家那位小P孩，不到2歲就已經能夠很自然輕鬆解鎖ipad、翻頁找到他喜歡玩的熊貓餐廳，接著熟練地在各種食材選折他喜歡的，製作一份美味的虛擬美食；而我們也樂於買各種大屏手機和平板電腦送給我們的長輩。
移動裝置及手勢互動方式給我們帶來革命性體驗和便捷，移動的觸控時代早已到來，您是否也與時俱進了呢？值得我們每一位設計師反思。
一、什麼是觸控手勢
觸控手勢是自然用戶界面（NUI）的一種表現形式。
自然用戶界面 （Natural user interface, NUI） 是指一類無形的用戶界面。NUI則只需要人們以最自然的交流方式（如語言和文字）與機器互動。直觀的說，使用NUI的裝置不需要鍵盤或滑鼠。特別是觸控技術將使人機互動變得更加自然直觀，更為人性化。
您的手機、平板電腦還有筆記本擁有識別多點觸控輸入的功能來幫助你實現對其廣泛的運用。這種輸入方式幫助我們實現與螢幕內容的互動，而模模擬實中的操作手勢可以降低我們對操作螢幕物件的認知障礙。
在PC時代，我們需要他人或者一個說明教程去教會我們怎麼使用滑鼠，移動螢幕的游標，而這些在現實世界裏幾乎找不到可相對映的東西，然後學習怎麼雙擊開啟一個檔案，按住一個檔案不放，把它拖動到資料夾裏面。
觸控手勢帶來的是自然用戶界面，支援觸控的移動裝置能夠自然直觀的被所有年齡層，不同技能水平的人所使用。使用Multi-Touch多點觸控式介面技術，取代目前所使用的鍵盤（按鍵）、滑鼠，將進一步體現出人性化操控介面的未來趨勢。
圖2. 電容式觸控式螢幕結構原理圖
試想一下在那些老套的用戶界面裡，需要你把滑鼠懸停或者郵件點選目標上才能獲得更多詳細的資訊，而這些在手機裝置上將不再起作用。如何擺脫這種慣用的設計呢？答案就是，建立移動先行體驗。
二、觸控手勢的的使用情景（移動的情景）
移動情景指的是使用者使用時的環境和狀態——也就是任何可以影響使用者與裝置進行互動的內容。由於這些情境持續而快速地變化，對移動裝置而言就顯得尤為重要。我們要考慮使用者分心、多工、手勢操作、低電量條件和糟糕的連線條件等複雜環境下的通用設計。
圖3. 移動中的互動語境（出處：Nadav Savio | Giant Ant Design）
各種移動環境下會影響到使用者使用觸屏裝置完成任務的效率和準確度的因素有：
– 移動情景下，注意力容易被分散（如交談，觀察周圍環境等）
– 移動情景下，操作手機的時間碎片化（各種事情打斷）
– 移動情景下，任務容易被中斷（意外情況影響）
– 移動情景下，肢體可能被其他物體被佔用（如遛狗、拎包等）
– 移動情景下，噪音分散注意力（車水馬龍、人聲鼎沸的路邊）
三、觸控手勢的基本操作
圖4. 鋼鐵俠系列電影中的全息觸控互動
所謂自然手勢就是在真實物理世界中存在或演繹而來的手勢。例如上下滑動滾動列表，滑動以平移等。這類手勢是自然的，不需要或很少需要使用者去學習的。
– 長按以檢視更多操作 (現在有了3D Touch，同長按操作相比，最大區分是需要是有一定的按壓力度）
– 點選執行主操作
– 滑動以平移
– 輕掃以選定，並進行命令操作
– 收縮和拉伸以縮放
– 轉動以旋轉
– 邊緣輕掃以使用系統命令
四、好用的手勢是怎樣的？
首先我們來看看多點觸控的優缺點。
那麼什麼是好用的手勢呢？
好用的手勢一來簡單，二來支援單手操作，它們該如由Tweetie創始人Loren Brichter所開發並獲得專利的「下拉重新整理」一樣受歡迎。或者像 iBook的翻頁動作一樣自然簡單。以下是好用的手勢該有的一些特徵：
– 簡單易用。
不僅動作簡單，還要能在擁擠的交通工具上單手操作
– 容易記憶。
其一手勢要好記，其二要讓人願意記住
– 符合認知習慣。
也就是說，該手勢一方面要遵循人的自然習慣和意識，另一方面要契合手勢即將產生的操作
– 實用。
手勢要讓使用者感到舒服，少有使用者願意點兩次纔看到想看的東西，讓會讓他們感到麻煩
– 愉悅的體驗。
Winkler 認為好的手勢會有神奇的感覺。UX 總是個未知數，而且難於言傳。但這恰是我們認識、
享受科技的一種表現
– 及時反饋。
反饋就是說使用者知道當前正在進行的操作。使用者進行完手勢操作後有明確的狀態資訊告知
五、手勢設計應用過程中需要注意的點： （手勢設計準則）
符合認知習慣
在非概念性專案中使用基礎手勢（組合）之外的「創新」手勢，未建立統一規範的情況下，使用混亂會導致使用者困惑，學習成本稿，增加記憶負擔，難以引導使用者培養使用習慣，技術上的限制可能會使「創新」變成不便。
最終使用者是人，手勢操作是基於人的行為來定義的。手勢操作是人們現實世界行為的對映，因此，手勢設計要符合大多數人的認知習慣，減少使用者的認知成本。比如有方向性的手勢操作，要儘量符合拇指的活動方向，且要與認知相一致。
圖5. iBooks的翻頁體驗與翻實體書
記憶力限制
因為這些手勢操作不能明白的顯示在介面上，沒有代表動作的可視元素，需要使用者記住哪種手勢對應的是哪些操作，一些不常用的手勢操作往往很難發現。如果手勢直觀常用自然沒問題，而如果沒有「自然」的手勢去代表一個動作，使用者就會感到困惑，於是便需要記憶，就像在使用命令列介面時要記住那些命令一樣。
一個App中手勢數量需保持在5個數量以下，多依賴與介面的引導和暗示，讓此類使用者根據情境記憶這些手勢，從而增加手勢的易記憶性。
如果使用者對其缺乏認知，這些手勢操作就不易被發現，也便不會為人所用，甚至造成操作障礙。 （壞的例子，找不到導航欄）
圖6. Mozilla Firefox 4版本右劃撥出Tab
不同應用場景採用不同的手勢設計
人們會在千奇百怪的環境中使用我們的產品，我們的產品在和周圍環境爭奪使用者的注意力，憑藉一個3.5~5寸的螢幕與車水馬龍、人聲鼎沸的大千世界作鬥爭，因此在實際的手勢設計中還需考慮該應用的使用場景。
效率型和實用型應用，這類應用一般使用場景是在行進間，考慮手機一般隨著使用者的行進而搖晃，操作效率以及誤操作等因素，一遍採用單手操作手機的手勢互動。
遊戲等螢幕沉浸型應用，一般為休閒且穩定的操作環境，可以適當的設定一些複雜手勢配合遊戲中的高階操作功能，增加遊戲的操作樂趣。
圖7. Clear的手勢操作令人印象深刻
適度的應用手勢
2014年火得不能再火，一旦開始玩根本停不下來的《Flappy bird》。遊戲以簡單但有效的方式使用了基本的手勢。點選或不點選是唯一的操作手勢。玩家可以很快地知道應該使用什麼手勢以及怎麼利用手勢去進行遊戲。
圖8. Flappy Bird遊戲，玩家只需要用一根手指來操控
提供即時反饋
在使用者觸控式螢幕幕的時候，立即提供視覺提示，可提高使用者的信心。互動操作涉及到的元素可表現爲改變顏色、改變大小或發生移動/震動。
圖9. 3D touch的震動反饋
使操作可逆
觸控互動操作應該是可逆的。提供視覺反饋來表明當用戶擡起手指時會發生什麼，同時允許使用者反悔，取消操作。這將使你的應用能夠安全地使用觸控操作進行瀏覽。
圖10. Wechat取消傳送語音
不要讓你的手勢觸發區域遠離拇指熱區（拇指法則）
Jash Clark在《觸動人心-設計優秀的iPhone應用》一書中提到，拇指的活動範圍對操作手機的效率以及正確度都有一定的影響。
雖然拇指能夠劃到整個螢幕，但拇指在所及範圍和靈活性上是有限的，只有三分之一的螢幕是真正容易觸及的——也就是拇指正對的區域。爲了獲得舒適的人機體驗，應將主要點選目標放置在方便拇指點選的熱區內。
圖11. Luke Wroblewski在《移動為先》（Mobile First）
保持手勢的全域性性
不要讓使用者在你的應用中適應了你創造的手勢後，卻又在你的應用中碰壁。
如果使用者已經習慣你的手勢，覺得你的手勢達到了方便快捷的目的，並耗費學習成本掌握並適應了你的手勢，那麼便意味著你成功了一半。儘量用簡單的手勢完成常用功能，需要複雜手勢操作完成的功能，要有一個方便且更容易發現的方式相配合。儘量使用統一的手勢，減少不同手勢的切換頻率。
圖12. 全域性手勢在iOS原生應用中的使用場景
寫在最後
好用的觸控手勢是人與裝置、應用之間交流的方式。 當初創造多點觸控技術的人，難能可貴的是細心洞察到了人們細膩的本真行為特徵，轉而用觸屏這一行為自然的對映了出來。
作者：evanchen
來源：騰訊CDC
設計夾
以創意設計類乾貨分享為主
偶爾扯淡為輔
就醬
~~
點選底部 「閱讀原文」
進入 Nicebook 創作中心
