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