在計算機被發(fā)明出來之后臭埋，很長一段時間里臀玄，人們都是使用鍵盤來完成交互的健无。而隨著70年代圖形化界面的出現(xiàn)和鼠標的發(fā)明睬涧，個人電腦興起的時代畦浓，絕大多數(shù)的用戶入門之時都是借助鼠標來同屏幕上的各種元素進行交互的讶请。自蘋果的Newton MessagePad 系列問世之后夺溢，移動端設備的新紀元悄然開啟，小型化的移動端計算設備和手機在21世紀之初自然地結合到了一起嘉汰，催生了智能手機鞋怀，2007年 iPhone 是一個眾所周知的分水嶺：電容屏技術、多點觸控焙矛、手指替代觸控筆村斟，全新的交互模式開啟了如今我們所處的移動端的時代蟆盹。

我們今天所熟知的手勢交互日缨，包括點擊、滑動哎壳、縮放都是iPhone 誕生之后归榕，經(jīng)由不同設計團隊刹泄、在不同公司的不同產(chǎn)品之下催生成熟的一套交互模式特石。對于新一代的數(shù)碼設備用戶而言鳖链，觸摸和手勢交互芙委，就是屬于他們的鼠標灌侣。手勢侧啼，就是新一代的“點擊”交互。

今天戴甩，我們來聊一聊移動端UI設計中甜孤，如何借助手勢交互提升易用性和有效性缴川。

選擇對的手勢

當你想在你的UI中引入手勢交互的時候把夸，應該先了解一下你的目標受眾可能會用的APP中所用的手勢恋日，以及你的目標市場岂膳。在你的APP 中引入類似的手勢交互谈截，能夠至少降低用戶轉(zhuǎn)移APP的時候的學習成本簸喂，這樣針對目標市場的手勢設計喻鳄，讓用戶一開始就能以一種舒適的方式開始使用诽表。

手勢學習

雖然手勢幾乎無處不在了竿奏，但是面對新的APP的時候泛啸，用戶還是不清楚哪些手勢可用候址，學習新APP的手勢交互幾乎是繞不過去的問題岗仑。絕大多數(shù)的界面交互沿用了最常用的點按荠雕、滑動和捏合手勢炸卑，通過這些手勢可以執(zhí)行絕大多數(shù)的操作盖文，其中點按是無疑是最常用也是最直覺的五续。但是疙驾，與顯性的圖形化的界面不同荆萤，手勢交互本身是隱形的链韭，除非用戶實現(xiàn)知道某個界面某個位置可以用手勢交互敞峭，否則旋讹，用戶需要通過自行摸索和嘗試來發(fā)掘沉迹。

所以鞭呕，從這個角度而言葫松，只有設計師在界面中提供正確的視覺指引腋么，用戶才會“正確地發(fā)現(xiàn)”手勢交互的存在珊擂。

避免在新用戶引導的時候加入手勢教程

許多手勢交互驅(qū)動的APP當中灾而，設計師都習慣于將手勢交互的教程放在首次打開APP的時候旁趟。這樣帶有新用戶引導教程的APP非常之多锡搜，用戶需要在剛剛進入的時候耕餐，了解APP的功能肠缔、特點明未，學習操作等等等等趟妥。但是披摄，這樣的教程展現(xiàn)方式本身并不夠優(yōu)雅疚膊，也不夠有效酿联。這種新用戶引導階段的前期教程所存在的主要問題周崭，是用戶必須在一打開應用的時候续镇，就記住一大堆的信息摸航。如果信息和教程不多還好酱虎，稍多一些读串，用戶會很快陷入混亂恢暖。舉個例子杰捂，著名的效率應用 Clear嫁佳，新用戶引導教程長達7頁，用戶需要非常耐心地看完它們才知道如何正確有效的使用這款應用。這樣的設計無疑是糟糕的省撑。

在使用過程中提供教程

在用戶使用APP的過程中，結合用戶所處的界面肥败、執(zhí)行的操作馒稍、正在完成的任務和上下文信息來提供相應的手勢交互的教程纽谒。如果想要交給用戶一個新的手勢鼓黔，那么你必須慢慢開始澳化，不要指望一次搞定井濒，不要急于求成眼虱。

所以捏悬，你需要給用戶的是一個迭代式的漸進的指引教程过牙，恰到好處的提醒寇钉，并且你的引導應該是專注于單個交互的，而非一次給用戶灌輸盡可能多的信息撵溃。結合語境來提供教程和指引缘挑，才是最有效的语淘。

下圖是 Android 版的Youtube 的APP中的手勢交互的引導界面姑蓝，這款源自谷歌官方的應用采用的是標準的Material Design的手勢交互方式它掂，用戶會在初次進入應用之后虐秋，適時地提供相應的手勢交互引導客给，一次一項靶剑，不會進行填鴨式的信息灌輸。簡練的文本引導坑匠，讓用戶能夠快速明白交互方式和結果厘灼。

使用動效來呈現(xiàn)手勢

手勢本身是動態(tài)的，它和動效本身有著高度的相似性闪朱。作為設計師，使用動效來呈現(xiàn)手勢的交互和效果是非常自然的邏輯胀蛮。為了讓用戶能夠更為清晰的明白手勢的正確用法，你可以在相應的元素上加上文本說明任岸，并且搭配相應的交互動效困鸥，展示操作方式和執(zhí)行結果疾就。就像下面的案例所示：

使用動效進行手勢交互引導的時候，有三種比較流行的方式。

第一種是提示動效鼠冕。提示動效主要以預覽的形式展現(xiàn)了如何運用手勢來與特定的元素進行交互。它是作為手勢和觸發(fā)交互之間的橋梁而存在的楞捂。比如下面這個布丁怪物的游戲就是以手勢操作為主的寨闹，動效結合游戲場景，呈現(xiàn)給用戶交互的基本方式椭蹄。

第二種方式也很有效，內(nèi)容展示翼馆。相比于第一種方式应媚，內(nèi)容展示更加微妙中姜，它向用戶呈現(xiàn)了交互所能呈現(xiàn)出來的內(nèi)容和結果翩瓜。就像下面這個案例奥溺，它簡單的展示了卡片之后還隱藏著其他的卡片浮定，隱晦而微妙地暗示用戶，使用滑動手勢就能看到后面的卡片了方灾。

第三種方式是著重推薦的裕偿，也是我認為最有效的一種，借助可供性設計的原理來呈現(xiàn)手勢交互痛单。為了呈現(xiàn)手勢交互的可供性嘿棘，設計師應該通過設計呈現(xiàn)出“用戶能怎么操作”，iOS 的鎖屏相機就是一個典型案例旭绒，當用戶在鎖屏狀態(tài)下點擊右下角的相機按鈕的時候鸟妙，屏幕會向上彈跳挥吵，展示它是可向上滑動打開的（這一功能的“能指”）重父。

結語

手勢交互的實用性和泛用性是有目共睹的，它依賴于界面忽匈，并且高度依賴基礎的幾個單指和雙指手勢房午，但是它的隱藏性使得設計師的引導顯得無比重要。還好在最近幾年的經(jīng)驗累積之下丹允，手勢交互的引導模式有了如今這套相對成熟的經(jīng)驗郭厌，動效嗦锐、文本和提示可以有效的幫助用戶，逐步學會新界面的手勢交互沪曙。

原作者：Nick Babich

譯者：陳子木