【編者按】文章來自百度MUX翻譯小組，應(yīng)作者要求，如文章已獲雷鋒網(wǎng)授權(quán)轉(zhuǎn)載，也請(qǐng)保留原標(biāo)題。

譯者注：本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016中第一章Clever Gestures。這本電子書結(jié)合豐富案例講述了2015-2016年間重要的移動(dòng)設(shè)計(jì)趨勢(shì)，共有6個(gè)章節(jié)：靈巧的手勢(shì)操作、層級(jí)化的移動(dòng)界面、雋永的字體排印、扁平化設(shè)計(jì)、愉悅的微交互、小卡片。

手勢(shì)是新的一種點(diǎn)擊操作 。

你在手機(jī)里打開的每個(gè)應(yīng)用，游戲或者工具里一定包括滑動(dòng)、點(diǎn)擊、收縮的手勢(shì)操作，這些是讓移動(dòng)應(yīng)用能夠工作的秘密。接下來，我們會(huì)了解更多關(guān)于手勢(shì)的知識(shí)。

關(guān)于單純的點(diǎn)擊操作，設(shè)計(jì)師和開發(fā)者只需要考慮清楚點(diǎn)擊行為應(yīng)該在屏幕的什么位置。而對(duì)于屏幕上的手勢(shì)操作，你需要思考這種類型的身體動(dòng)作，手勢(shì)在屏幕上的位置，還有用戶是否能直觀的找到、觸摸到它。 

手勢(shì)操作可以讓頁面更簡(jiǎn)潔好看，因?yàn)楹芏嗖僮鞫茧[藏在頁面中。它可以加快用戶的操作速度，讓用戶與各種形狀、尺寸的設(shè)備進(jìn)行舒適的互動(dòng)。

那么，讓我們深入了解現(xiàn)在主流APP的成功手勢(shì)操作技術(shù)。

常見手勢(shì)的入門

手勢(shì)操作是指用戶激活一個(gè)特定設(shè)計(jì)產(chǎn)生的所有身體動(dòng)作, 它主要指手的動(dòng)作，但也包括震動(dòng)、傾斜、移動(dòng)設(shè)備。 

（Photo credit：Transmit）

手勢(shì)操作權(quán)威性的指南由Craig Villamor， Dan Willis，Luke Wroblewski 設(shè)定，包括許多動(dòng)作的細(xì)節(jié)以及其如何工作，這個(gè)指南是一次關(guān)于人們使用移動(dòng)設(shè)備和執(zhí)行特定任務(wù)的研究編譯出來的。 

（Photo credit：Touch Gesture Reference Guide. Creative Commons. ）

下面是一些最常見的用戶手勢(shì)：

? 點(diǎn)擊：輕微觸摸頁面

? 雙擊：兩次快速的點(diǎn)擊頁面（常用于放大）

? 拖拽：沿著頁面移動(dòng)，手指不離開屏幕

? 收縮／放大：兩個(gè)手指觸摸屏幕收縮或放大

? 長按：與頁面保持長時(shí)間觸摸

? 輕滑：快速滾動(dòng)

因?yàn)榇笃潦謾C(jī)越來越多，每一種手勢(shì)需要讓用戶可以觸手可及。這要求設(shè)計(jì)手勢(shì)時(shí)要考慮到拇指的位置，統(tǒng)稱為“拇指區(qū)域”。因?yàn)榇蟛糠钟脩袅?xí)慣于用一只手拿著手機(jī)，拇指操作屏幕，設(shè)計(jì)師需要考慮用戶單手操作所能觸碰到屏幕的區(qū)域。

手勢(shì)設(shè)計(jì)中，“手勢(shì)按鈕”的尺寸很重要，因?yàn)檫@里沒有一個(gè)更好的方式來解釋手勢(shì)操作。為了更方便的操作，每一個(gè)按鈕要足夠大，至少要像拇指的尺寸（很多設(shè)計(jì)師參考“胖手指”原則）。

根據(jù)這個(gè)原理，“手勢(shì)按鈕”應(yīng)該有44像素的寬度和高度（我們的實(shí)踐顯示30像素是最小的尺寸）,在更大的屏幕上，甚至要增加至70像素。此外，按鈕和滑動(dòng)手勢(shì)應(yīng)該充滿整個(gè)屏幕，例如屏幕從左到右的任何一個(gè)地方都是可點(diǎn)擊的按鈕。

手勢(shì)與動(dòng)畫的連接

在移動(dòng)設(shè)計(jì)上，手勢(shì)總是和動(dòng)畫連接，動(dòng)畫是反饋用戶完成一個(gè)行為或者任務(wù)的重要方式。

《交互設(shè)計(jì)和復(fù)雜動(dòng)效》講到動(dòng)畫的五個(gè)重要功能：

1. 動(dòng)態(tài)通知

2. 展露信息

3. 凸顯內(nèi)容

4. 折疊表單和菜單

5. 滾動(dòng)展示

讓我們來思考一下，你每天使用APP接觸多少種動(dòng)畫？這里有一個(gè)小的案例研究：使用這款叫Dark Sky 的天氣預(yù)報(bào)APP。

（Photo credit：Dark Sky）

Dark Sky巧妙的將微手勢(shì)和動(dòng)畫貫穿在整個(gè)APP中，呈現(xiàn)一天的溫度有多熱或者多冷這使用戶有愉悅的用戶體驗(yàn)。

1. 動(dòng)態(tài)通知： 今天會(huì)下雨嗎？ 頁面內(nèi)用微動(dòng)畫效果顯示雨將會(huì)在什么時(shí)候下，滑動(dòng)一下屏幕頁面會(huì)顯示關(guān)于雨水有多大的動(dòng)畫，這樣一個(gè)簡(jiǎn)單的滑動(dòng)就可以給你顯示更多的信息。

2. 展露信息：基于輕擊手勢(shì)可以展開一整天的天氣預(yù)報(bào)，你可以觀察到每小時(shí)的天氣情況。

3. 凸顯內(nèi)容： 這個(gè)APP擁有多屏，你可以通過左右滑動(dòng)切換屏幕。

4. 折疊表單和菜單： 你也可以折疊起詳情查看其他信息。例如，你可以點(diǎn)擊頁面頂部的菜單來折疊當(dāng)前視圖或者更換地理位置。

5. 滾動(dòng)展示： 在逼真的坐標(biāo)軸上旋轉(zhuǎn)的雷達(dá)視圖地球儀可以讓你看見世界各地的天氣狀況，你也可以左右旋轉(zhuǎn)屏幕底部的滑塊來調(diào)整時(shí)間。

動(dòng)畫與手勢(shì)相輔相成，如果沒有動(dòng)畫效果，即使用戶已經(jīng)完成了一個(gè)手勢(shì)動(dòng)作，他們也得不到應(yīng)有的反饋，所以動(dòng)畫效果使手勢(shì)操作稱為動(dòng)作的一部分而不是單獨(dú)的模塊。

當(dāng)然，隨著新技術(shù)的發(fā)展，手勢(shì)反饋方式也可能會(huì)發(fā)生改變，例如........

蘋果和3D觸控

對(duì)于主要移動(dòng)平臺(tái)手勢(shì)操作也很重要－iOS系統(tǒng)和Android系統(tǒng)都有關(guān)于手勢(shì)操作的開發(fā)者指南。然而，iOS系統(tǒng)在iPhone 6S 中引進(jìn)了一種新的手勢(shì)操作叫3D觸控。                    

（Photo credit：Apple）

蘋果的3D觸控，以前稱為壓力觸控，將手勢(shì)操作推進(jìn)到一個(gè)更高的水平。設(shè)備可以通過感應(yīng)屏幕上的壓力，連接到相應(yīng)的手勢(shì)操作 例如：輕擊、 重?fù)?、縮放手勢(shì)。與其他手勢(shì)操作對(duì)比，3D觸控最大的不同是它被作為頁面層級(jí)里的一層，用戶可以在真正進(jìn)入新的頁面之前進(jìn)行預(yù)覽行為。

例如iOS系統(tǒng)的地圖應(yīng)用，有人通過文本給你發(fā)送一個(gè)地址，當(dāng)你輕擊地址鏈接，當(dāng)前頁面彈出地址彈框，當(dāng)你松開手彈框會(huì)消失，但是如果你施加更大的壓力，地址將會(huì)在地圖應(yīng)用內(nèi)打開，這就是“重?fù)簟钡牟僮鞣答?。這個(gè)案例很好的展示了作為基于手勢(shì)操作的的單獨(dú)頁面元素如何在不同APP內(nèi)無縫銜接。 

這種直觀的手勢(shì)使用完全符合用戶的預(yù)期，因?yàn)樗牟僮鞒杀竞艿颓也僮鬟^程不需要過多的解釋。

除了新功能，《蘋果 iOS系統(tǒng)人類界面指導(dǎo)方針》設(shè)定了關(guān)于手勢(shì)及其運(yùn)用的條例。

? 避免使用標(biāo)準(zhǔn)手勢(shì)關(guān)聯(lián)不同的行為

? 避免創(chuàng)造自定義手勢(shì)，調(diào)用相同的行為作為標(biāo)準(zhǔn)手勢(shì)

? 將復(fù)雜手勢(shì)作為加快完成任務(wù)的快捷鍵，而不是執(zhí)行任務(wù)的唯一方式

? 避免定義新的手勢(shì)除非你的APP是個(gè)游戲

? 在正常環(huán)境中，考慮使用多手指手勢(shì)操作

3D觸控將改變我們與iPhone的交互方式，這肯定需要一段時(shí)間去適應(yīng)。所以在設(shè)計(jì)3D觸控手勢(shì)時(shí)需要進(jìn)行深入思考，因?yàn)樾碌南到y(tǒng)手勢(shì)不一定能適用于老款的iPhone。

扁平化設(shè)計(jì)再定義手勢(shì)操作

雖然蘋果讓我們對(duì)手勢(shì)操作有了不同的看法，谷歌也正在解釋關(guān)于他們的技術(shù)和手勢(shì)操作。在不斷進(jìn)化的扁平化設(shè)計(jì)文檔中，谷歌強(qiáng)調(diào)了關(guān)于手勢(shì)操作如何進(jìn)行的具體細(xì)節(jié)。

這套關(guān)于簡(jiǎn)化操作手勢(shì)規(guī)則的指導(dǎo)方針經(jīng)歷了很長的過程。手勢(shì)操作有一個(gè)共同的缺點(diǎn)是一個(gè)動(dòng)作完成多件事情， 文檔明確解釋了如何使用每個(gè)手勢(shì)操作多件事情。

 

（Photo credit：Runtastic）

涉及到手勢(shì)時(shí)，扁平化設(shè)計(jì)包括拖動(dòng)、滑動(dòng)、輕滑三種手勢(shì)：

? 拖動(dòng)是一種較被控制的手勢(shì)，需要與觸摸目標(biāo)一直保持聯(lián)系

? 滑動(dòng)是一種快速的手勢(shì)，它不需要一直接觸目標(biāo)

? 輕滑根本不需要觸摸目標(biāo)，它是一種更敏捷的手勢(shì)

速度是這些常見手勢(shì)所包含的重要因素，手勢(shì)操作的速度可以決定動(dòng)作是否可成功。

現(xiàn)在介紹一些手勢(shì)操作失敗的情況：

? 滑動(dòng)手勢(shì)會(huì)變成輕滑手勢(shì)，當(dāng)操作目標(biāo)超過一定位移后，這個(gè)操作將會(huì)失敗。

? 拖動(dòng)手勢(shì)需要與屏幕上的元素保持接觸，所以扭轉(zhuǎn)手勢(shì)的方向可能會(huì)導(dǎo)致元素返回。

? 輕滑動(dòng)作速度很快，結(jié)束時(shí)手指快速離開接觸點(diǎn)，才能防止動(dòng)作被撤銷。

合成手勢(shì)

現(xiàn)在越來越多的手勢(shì)正在突破“一個(gè)動(dòng)作等同于一個(gè)反饋”模式，將多個(gè)手勢(shì)串在一起形成一個(gè)合成手勢(shì)的技巧被廣泛的運(yùn)用在游戲設(shè)計(jì)中，同時(shí)也開始拓展到APP中。 

（Photo credit：Angry Birds）

合成手勢(shì)完成一個(gè)操作有三個(gè)交互層級(jí)：

1. 手勢(shì)的開始：動(dòng)作開始的第一次觸碰屏幕，例如一個(gè)按壓或者點(diǎn)擊。

2. 手勢(shì)的延續(xù)：將多個(gè)手勢(shì)運(yùn)用到一個(gè)特定的序列中，例如在一個(gè)模式里通過輕點(diǎn)或者通過拖拽屏幕去操作界面。

3. 手勢(shì)的結(jié)束：手勢(shì)結(jié)束就是手指離開屏幕。

想想合成手勢(shì)在憤怒小鳥游戲中的運(yùn)用。拋小鳥去摧毀目標(biāo)，你必須完成下面的合成手勢(shì)：

? 在屏幕上點(diǎn)擊、按住、拖拽小鳥至一個(gè)合適的位置

? 松開手指讓小鳥拋向目標(biāo)

靈巧的手勢(shì)不僅是一個(gè)動(dòng)作

《交互設(shè)計(jì)的最佳實(shí)踐》解釋過，靈活的手勢(shì)不僅只是執(zhí)行一個(gè)操作或者完成一個(gè)任務(wù)，它們還可以作為一種教學(xué)工具。 

（Photo credit：Julian Burford）

基于手勢(shì)操作的最佳界面應(yīng)該考慮到用戶拿設(shè)備的所有方式：

? 一只手豎著拿（左手或者右手）

? 兩只手豎著拿

? 一只手橫著拿（左手或者右手）

? 兩只手橫著拿

? 將設(shè)備放在桌子上

當(dāng)你了解到用戶在你的APP中要做什么的時(shí)候，他們?cè)撊绾尾僮鳎闳绾谓逃麄兏咝У厥褂檬謩?shì)，這是很重要的事情。雖然常見手勢(shì)都開始于同一個(gè)動(dòng)作，但在不同APP中的反饋卻是不一樣的。 

（Photo credit：Soundcloud）

（Photo credit：Clear）

讓我們對(duì)比上面的兩個(gè)例子。

Soundcloud和Clear兩個(gè)APP使用相同的手勢(shì)去執(zhí)行不同行為，它們都使用了點(diǎn)擊和滑動(dòng)手勢(shì)。在Soundcloud中，用戶用手勢(shì)操作來播放、搜索音樂（點(diǎn)擊手勢(shì)可以打開一首歌或者一個(gè)播放列表，滑動(dòng)手勢(shì)可以搜索新內(nèi)容）。 Clear使用點(diǎn)擊和滑動(dòng)手勢(shì)來添加和刪除你的代辦事項(xiàng)列表里的事項(xiàng)。

點(diǎn)擊和滑動(dòng)的完成動(dòng)作很相似，但是具體到每個(gè)APP中其對(duì)應(yīng)的具體功能卻是完全不同的。

因?yàn)楹?jiǎn)單的視覺價(jià)值，動(dòng)作之間的無縫連接對(duì)用戶至關(guān)重要。Soundcloud使用了卡片式頁面讓用戶一目了然，因?yàn)榭ㄆ皆O(shè)計(jì)非常流行，不需要刻意跟用戶解釋點(diǎn)擊和滑動(dòng)手勢(shì)的使用。而Clear使用了不規(guī)則的矩形暗示每塊矩形都可以被滑走，這營造出模塊化的感覺。

最終，在設(shè)計(jì)手勢(shì)操作時(shí)需要注意手勢(shì)操作是否太復(fù)雜，保證設(shè)計(jì)的手勢(shì)簡(jiǎn)單、一致、易操作。

手勢(shì)操作的未來

所以手勢(shì)操作將會(huì)怎樣？

手勢(shì)操作才剛剛開始發(fā)揮其潛力。雖然現(xiàn)在大多數(shù)手勢(shì)都基于手指操作，但是身體動(dòng)作的運(yùn)用將會(huì)拓展出更多我們沒有想象到的方式。手勢(shì)操作也開始更多的結(jié)合其它設(shè)計(jì)趨勢(shì)。

我們接觸到的大多數(shù)手勢(shì)都是基于靜態(tài)設(shè)計(jì)的操作。隨著視頻和動(dòng)畫的出現(xiàn)，手勢(shì)將會(huì)結(jié)合越來越多的動(dòng)畫效果。 

（Photo credit：Haze）

Haze 天氣預(yù)報(bào)APP用五顏六色的動(dòng)畫來對(duì)應(yīng)不同的溫度，還使用了大量的手勢(shì)操作，像從自上而下的滑動(dòng)到簡(jiǎn)單的滑動(dòng)動(dòng)作。 以上的效果都有驚人的視覺效果和強(qiáng)大的功能性。

手勢(shì)將會(huì)更好的連接各個(gè)APP。例如，在不同APP之間進(jìn)行拖拽操作。 

（Photo credit：Workflow ）

Workflow是一款iOS APP，圖片已經(jīng)展示了它的功能。你可以利用拖拽工具操作不同APP。這些工具很靈活，而且將動(dòng)畫、手勢(shì)與功能相結(jié)合。

當(dāng)可穿戴設(shè)備發(fā)展起來后，手勢(shì)操作將會(huì)拓展至身體活動(dòng)。例如通過搖擺手臂發(fā)送信息或者通過搖動(dòng)手腕打開語音信箱。基于手指點(diǎn)擊操作，身體動(dòng)作將會(huì)控制手勢(shì)在設(shè)備中的工作方式。

結(jié)語

現(xiàn)在沒有一款A(yù)PP的設(shè)計(jì)是脫離手勢(shì)操作的，這些微小的動(dòng)作是設(shè)計(jì)過程中不可缺少的部分，它們將繼續(xù)影響我們的設(shè)計(jì)。作為設(shè)計(jì)師要謹(jǐn)記新的手勢(shì)操作必須讓用戶直觀地接受它們，這樣設(shè)計(jì)出來的APP才會(huì)更好地工作，才有可能被用戶使用。

VIA：Mobile UI Design Book of Trends

譯文僅作學(xué)習(xí)用途，如有其它用途請(qǐng)聯(lián)系原作者。譯文轉(zhuǎn)載請(qǐng)注明：本文來自MUX原創(chuàng)翻譯，雷鋒網(wǎng)發(fā)布，譯文作者：MUX翻譯小組

Keep calm and be awesome.

2015-2016移動(dòng)設(shè)計(jì)趨勢(shì)系列推薦閱讀——

1、2015-2016年最流行的APP設(shè)計(jì)是什么？比如，F(xiàn)acebook那樣的

2、2015-2016年最有影響力的移動(dòng)界面設(shè)計(jì)是什么？看看Google就知道了

3、2015-2016最懂你的移動(dòng)設(shè)計(jì)是什么？哦，iPhone就可以告訴你

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。