8
【編者按】文章來自百度MUX翻譯小組，應(yīng)作者要求，如文章已獲雷鋒網(wǎng)授權(quán)轉(zhuǎn)載，也請保留原標(biāo)題。
譯者注：本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016中第一章Clever Gestures。這本電子書結(jié)合豐富案例講述了2015-2016年間重要的移動設(shè)計趨勢，共有6個章節(jié)：靈巧的手勢操作、層級化的移動界面、雋永的字體排印、扁平化設(shè)計、愉悅的微交互、小卡片。
手勢是新的一種點擊操作 。
你在手機里打開的每個應(yīng)用，游戲或者工具里一定包括滑動、點擊、收縮的手勢操作，這些是讓移動應(yīng)用能夠工作的秘密。接下來，我們會了解更多關(guān)于手勢的知識。
關(guān)于單純的點擊操作，設(shè)計師和開發(fā)者只需要考慮清楚點擊行為應(yīng)該在屏幕的什么位置。而對于屏幕上的手勢操作，你需要思考這種類型的身體動作，手勢在屏幕上的位置，還有用戶是否能直觀的找到、觸摸到它。
手勢操作可以讓頁面更簡潔好看，因為很多操作都隱藏在頁面中。它可以加快用戶的操作速度，讓用戶與各種形狀、尺寸的設(shè)備進行舒適的互動。
那么，讓我們深入了解現(xiàn)在主流APP的成功手勢操作技術(shù)。
手勢操作是指用戶激活一個特定設(shè)計產(chǎn)生的所有身體動作, 它主要指手的動作，但也包括震動、傾斜、移動設(shè)備。
（Photo credit：Transmit）
手勢操作權(quán)威性的指南由Craig Villamor， Dan Willis，Luke Wroblewski 設(shè)定，包括許多動作的細(xì)節(jié)以及其如何工作，這個指南是一次關(guān)于人們使用移動設(shè)備和執(zhí)行特定任務(wù)的研究編譯出來的。
（Photo credit：Touch Gesture Reference Guide. Creative Commons. ）
? 點擊：輕微觸摸頁面
? 雙擊：兩次快速的點擊頁面（常用于放大）
? 拖拽：沿著頁面移動，手指不離開屏幕
? 收縮／放大：兩個手指觸摸屏幕收縮或放大
? 長按：與頁面保持長時間觸摸
? 輕滑：快速滾動
因為大屏手機越來越多，每一種手勢需要讓用戶可以觸手可及。這要求設(shè)計手勢時要考慮到拇指的位置，統(tǒng)稱為“拇指區(qū)域”。因為大部分用戶習(xí)慣于用一只手拿著手機，拇指操作屏幕，設(shè)計師需要考慮用戶單手操作所能觸碰到屏幕的區(qū)域。
手勢設(shè)計中，“手勢按鈕”的尺寸很重要，因為這里沒有一個更好的方式來解釋手勢操作。為了更方便的操作，每一個按鈕要足夠大，至少要像拇指的尺寸（很多設(shè)計師參考“胖手指”原則）。
根據(jù)這個原理，“手勢按鈕”應(yīng)該有44像素的寬度和高度（我們的實踐顯示30像素是最小的尺寸）,在更大的屏幕上，甚至要增加至70像素。此外，按鈕和滑動手勢應(yīng)該充滿整個屏幕，例如屏幕從左到右的任何一個地方都是可點擊的按鈕。
在移動設(shè)計上，手勢總是和動畫連接，動畫是反饋用戶完成一個行為或者任務(wù)的重要方式。
《交互設(shè)計和復(fù)雜動效》講到動畫的五個重要功能：
1. 動態(tài)通知
2. 展露信息
3. 凸顯內(nèi)容
4. 折疊表單和菜單
5. 滾動展示
讓我們來思考一下，你每天使用APP接觸多少種動畫？這里有一個小的案例研究：使用這款叫Dark Sky 的天氣預(yù)報APP。
（Photo credit：Dark Sky）
Dark Sky巧妙的將微手勢和動畫貫穿在整個APP中，呈現(xiàn)一天的溫度有多熱或者多冷這使用戶有愉悅的用戶體驗。
1. 動態(tài)通知： 今天會下雨嗎？ 頁面內(nèi)用微動畫效果顯示雨將會在什么時候下，滑動一下屏幕頁面會顯示關(guān)于雨水有多大的動畫，這樣一個簡單的滑動就可以給你顯示更多的信息。
2. 展露信息：基于輕擊手勢可以展開一整天的天氣預(yù)報，你可以觀察到每小時的天氣情況。
3. 凸顯內(nèi)容： 這個APP擁有多屏，你可以通過左右滑動切換屏幕。
4. 折疊表單和菜單： 你也可以折疊起詳情查看其他信息。例如，你可以點擊頁面頂部的菜單來折疊當(dāng)前視圖或者更換地理位置。
5. 滾動展示： 在逼真的坐標(biāo)軸上旋轉(zhuǎn)的雷達(dá)視圖地球儀可以讓你看見世界各地的天氣狀況，你也可以左右旋轉(zhuǎn)屏幕底部的滑塊來調(diào)整時間。
動畫與手勢相輔相成，如果沒有動畫效果，即使用戶已經(jīng)完成了一個手勢動作，他們也得不到應(yīng)有的反饋，所以動畫效果使手勢操作稱為動作的一部分而不是單獨的模塊。
當(dāng)然，隨著新技術(shù)的發(fā)展，手勢反饋方式也可能會發(fā)生改變，例如........
對于主要移動平臺手勢操作也很重要－iOS系統(tǒng)和Android系統(tǒng)都有關(guān)于手勢操作的開發(fā)者指南。然而，iOS系統(tǒng)在iPhone 6S 中引進了一種新的手勢操作叫3D觸控。
（Photo credit：Apple）
蘋果的3D觸控，以前稱為壓力觸控，將手勢操作推進到一個更高的水平。設(shè)備可以通過感應(yīng)屏幕上的壓力，連接到相應(yīng)的手勢操作 例如：輕擊、 重?fù)?、縮放手勢。與其他手勢操作對比，3D觸控最大的不同是它被作為頁面層級里的一層，用戶可以在真正進入新的頁面之前進行預(yù)覽行為。
例如iOS系統(tǒng)的地圖應(yīng)用，有人通過文本給你發(fā)送一個地址，當(dāng)你輕擊地址鏈接，當(dāng)前頁面彈出地址彈框，當(dāng)你松開手彈框會消失，但是如果你施加更大的壓力，地址將會在地圖應(yīng)用內(nèi)打開，這就是“重?fù)簟钡牟僮鞣答?。這個案例很好的展示了作為基于手勢操作的的單獨頁面元素如何在不同APP內(nèi)無縫銜接。
這種直觀的手勢使用完全符合用戶的預(yù)期，因為它的操作成本很低且操作過程不需要過多的解釋。
除了新功能，《蘋果 iOS系統(tǒng)人類界面指導(dǎo)方針》設(shè)定了關(guān)于手勢及其運用的條例。
? 避免使用標(biāo)準(zhǔn)手勢關(guān)聯(lián)不同的行為
? 避免創(chuàng)造自定義手勢，調(diào)用相同的行為作為標(biāo)準(zhǔn)手勢
? 將復(fù)雜手勢作為加快完成任務(wù)的快捷鍵，而不是執(zhí)行任務(wù)的唯一方式
? 避免定義新的手勢除非你的APP是個游戲
? 在正常環(huán)境中，考慮使用多手指手勢操作
3D觸控將改變我們與iPhone的交互方式，這肯定需要一段時間去適應(yīng)。所以在設(shè)計3D觸控手勢時需要進行深入思考，因為新的系統(tǒng)手勢不一定能適用于老款的iPhone。
雖然蘋果讓我們對手勢操作有了不同的看法，谷歌也正在解釋關(guān)于他們的技術(shù)和手勢操作。在不斷進化的扁平化設(shè)計文檔中，谷歌強調(diào)了關(guān)于手勢操作如何進行的具體細(xì)節(jié)。
這套關(guān)于簡化操作手勢規(guī)則的指導(dǎo)方針經(jīng)歷了很長的過程。手勢操作有一個共同的缺點是一個動作完成多件事情， 文檔明確解釋了如何使用每個手勢操作多件事情。
（Photo credit：Runtastic）
涉及到手勢時，扁平化設(shè)計包括拖動、滑動、輕滑三種手勢：
? 拖動是一種較被控制的手勢，需要與觸摸目標(biāo)一直保持聯(lián)系
? 滑動是一種快速的手勢，它不需要一直接觸目標(biāo)
? 輕滑根本不需要觸摸目標(biāo)，它是一種更敏捷的手勢
速度是這些常見手勢所包含的重要因素，手勢操作的速度可以決定動作是否可成功。
現(xiàn)在介紹一些手勢操作失敗的情況：
? 滑動手勢會變成輕滑手勢，當(dāng)操作目標(biāo)超過一定位移后，這個操作將會失敗。
? 拖動手勢需要與屏幕上的元素保持接觸，所以扭轉(zhuǎn)手勢的方向可能會導(dǎo)致元素返回。
? 輕滑動作速度很快，結(jié)束時手指快速離開接觸點，才能防止動作被撤銷。
現(xiàn)在越來越多的手勢正在突破“一個動作等同于一個反饋”模式，將多個手勢串在一起形成一個合成手勢的技巧被廣泛的運用在游戲設(shè)計中，同時也開始拓展到APP中。
（Photo credit：Angry Birds）
合成手勢完成一個操作有三個交互層級：
1. 手勢的開始：動作開始的第一次觸碰屏幕，例如一個按壓或者點擊。
2. 手勢的延續(xù)：將多個手勢運用到一個特定的序列中，例如在一個模式里通過輕點或者通過拖拽屏幕去操作界面。
3. 手勢的結(jié)束：手勢結(jié)束就是手指離開屏幕。
想想合成手勢在憤怒小鳥游戲中的運用。拋小鳥去摧毀目標(biāo)，你必須完成下面的合成手勢：
? 在屏幕上點擊、按住、拖拽小鳥至一個合適的位置
? 松開手指讓小鳥拋向目標(biāo)
《交互設(shè)計的最佳實踐》解釋過，靈活的手勢不僅只是執(zhí)行一個操作或者完成一個任務(wù)，它們還可以作為一種教學(xué)工具。
（Photo credit：Julian Burford）
基于手勢操作的最佳界面應(yīng)該考慮到用戶拿設(shè)備的所有方式：
? 一只手豎著拿（左手或者右手）
? 兩只手豎著拿
? 一只手橫著拿（左手或者右手）
? 兩只手橫著拿
? 將設(shè)備放在桌子上
當(dāng)你了解到用戶在你的APP中要做什么的時候，他們該如何操作，你如何教育他們高效地使用手勢，這是很重要的事情。雖然常見手勢都開始于同一個動作，但在不同APP中的反饋卻是不一樣的。
（Photo credit：Soundcloud）
（Photo credit：Clear）
讓我們對比上面的兩個例子。
Soundcloud和Clear兩個APP使用相同的手勢去執(zhí)行不同行為，它們都使用了點擊和滑動手勢。在Soundcloud中，用戶用手勢操作來播放、搜索音樂（點擊手勢可以打開一首歌或者一個播放列表，滑動手勢可以搜索新內(nèi)容）。 Clear使用點擊和滑動手勢來添加和刪除你的代辦事項列表里的事項。
點擊和滑動的完成動作很相似，但是具體到每個APP中其對應(yīng)的具體功能卻是完全不同的。
因為簡單的視覺價值，動作之間的無縫連接對用戶至關(guān)重要。Soundcloud使用了卡片式頁面讓用戶一目了然，因為卡片式設(shè)計非常流行，不需要刻意跟用戶解釋點擊和滑動手勢的使用。而Clear使用了不規(guī)則的矩形暗示每塊矩形都可以被滑走，這營造出模塊化的感覺。
最終，在設(shè)計手勢操作時需要注意手勢操作是否太復(fù)雜，保證設(shè)計的手勢簡單、一致、易操作。
所以手勢操作將會怎樣？
手勢操作才剛剛開始發(fā)揮其潛力。雖然現(xiàn)在大多數(shù)手勢都基于手指操作，但是身體動作的運用將會拓展出更多我們沒有想象到的方式。手勢操作也開始更多的結(jié)合其它設(shè)計趨勢。
我們接觸到的大多數(shù)手勢都是基于靜態(tài)設(shè)計的操作。隨著視頻和動畫的出現(xiàn)，手勢將會結(jié)合越來越多的動畫效果。
（Photo credit：Haze）
Haze 天氣預(yù)報APP用五顏六色的動畫來對應(yīng)不同的溫度，還使用了大量的手勢操作，像從自上而下的滑動到簡單的滑動動作。 以上的效果都有驚人的視覺效果和強大的功能性。
手勢將會更好的連接各個APP。例如，在不同APP之間進行拖拽操作。
（Photo credit：Workflow ）
Workflow是一款iOS APP，圖片已經(jīng)展示了它的功能。你可以利用拖拽工具操作不同APP。這些工具很靈活，而且將動畫、手勢與功能相結(jié)合。
當(dāng)可穿戴設(shè)備發(fā)展起來后，手勢操作將會拓展至身體活動。例如通過搖擺手臂發(fā)送信息或者通過搖動手腕打開語音信箱?；谑种更c擊操作，身體動作將會控制手勢在設(shè)備中的工作方式。
現(xiàn)在沒有一款A(yù)PP的設(shè)計是脫離手勢操作的，這些微小的動作是設(shè)計過程中不可缺少的部分，它們將繼續(xù)影響我們的設(shè)計。作為設(shè)計師要謹(jǐn)記新的手勢操作必須讓用戶直觀地接受它們，這樣設(shè)計出來的APP才會更好地工作，才有可能被用戶使用。
VIA：Mobile UI Design Book of Trends
譯文僅作學(xué)習(xí)用途，如有其它用途請聯(lián)系原作者。譯文轉(zhuǎn)載請注明：本文來自MUX原創(chuàng)翻譯，雷鋒網(wǎng)發(fā)布，譯文作者：MUX翻譯小組
Keep calm and be awesome.
2015-2016移動設(shè)計趨勢系列推薦閱讀——
1、2015-2016年最流行的APP設(shè)計是什么？比如，F(xiàn)acebook那樣的
2、2015-2016年最有影響力的移動界面設(shè)計是什么？看看Google就知道了
3、2015-2016最懂你的移動設(shè)計是什么？哦，iPhone就可以告訴你
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
