手勢

手勢控制分為觸發(fā)動作（Touch Mechanics，用戶手指在屏幕上如何動作）和觸發(fā)行為（Touch Activities，界面上特定動作在特定情境下引發(fā)的結果）。

這是因為同樣的觸發(fā)動作（如單次觸擊）在不同情境下可能會帶來不同的結果（如輕觸，取消，開啟／關閉指示），同樣單次觸發(fā)行為（如放大）可能是由多種觸發(fā)動作（如捏放，雙次觸擊，雙次觸擊拖拽等）實現(xiàn)。

觸發(fā)動作

觸發(fā)動作是用戶的手指在界面上做了什么。

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-touch_large_mdpi.png" alt="gestures-touch" />
單次觸擊(Touch)

一只手指按下，提起

例如：選擇

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-double-touch_large_mdpi.png" alt="gestures-double-touch" />

雙次觸擊(Double Touch)

兩只手指按下，提起，其中一只手指按下，提起
例如：放大

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-swipe_large_mdpi.png" alt="gestures-swipe" />
拖拽(Drag)，輕滑(Swipe)和快擲(Fling)
一只手指按下，移動再提起

例如取消，輕滑，傾斜

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-long-press_large_mdpi.png" alt="gesture-long-press" />

長按
一只手指按下，稍后再提起
例如：選中一個元素，比如列表中的一個項目

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-long-press-drag_large_mdpi.png" alt="gestures-long-press-drag" />

長按拖動
一只手指按下后稍后，移動，再提起
如：選擇后移動某項，或是選擇多項

http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchMechanics-6-Long-press-drag_large_mdpi.png" alt="gestures-double-touch-drag" />

雙觸拖動
一只手指按下后提起，再按下后，拖動，再提起
例如：放大，縮小

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-pinch-open_large_mdpi.png" alt="gestures-pinch-open" />

捏放(Pinch Open)
雙指按下，向外移動，再提起
例如：放大

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-pinch-closed_large_mdpi.png" alt="gestures-pinch-closed" />

捏合
雙指按下，向內移動，再提起
例如：縮小

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-two-finger-touch_large_mdpi.png" alt="gestures-two-finger-touch" />

雙指觸擊
雙指快速按下，提起 例如：縮小

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-two-finger-swipe_large_mdpi.png" alt="gestures-two-finger-swipe" />

雙指拖拽，輕滑和快擲
兩指按下，移動后提起
例如：選擇多項條目，平移(Pan)，傾斜(Tilt)

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-two-finger-long-press_large_mdpi.png" alt="gestures-two-finger-long-press" />

雙指長按
雙指按下，稍后提起
例如：暫無

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-two-finger-long-press-drag_large_mdpi.png" alt="gestures-two-finger-long-press-drag" />

雙指長按拖動
雙指按下，稍后移動，再提起
例如：選擇后移動

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-two-finger-double-touch_large_mdpi.png" alt="gestures-two-finger-double-touch" />

雙指雙次觸擊
雙指快速按下提起，重復一次該動作
例如：縮小

http://wiki.jikexueyuan.com/project/material-design/images/patterns-gestures-gestures-rotate_large_mdpi.png" alt="gestures-rotate" />
旋轉
雙指按下，以指間中點為圓心快速轉動，再提起
例如：在地圖中旋轉內容

觸發(fā)行為

界面上特定動作在特定情境下引發(fā)的結果。

點觸（Tap）
激活屏幕內的元素，像是一個按鈕。
觸發(fā)動作：單次觸擊

取消或退出（Cancel or Escape）
取消或退出當前任務，如對話框或菜單。
觸發(fā)動作：單次觸擊

開啟／關閉指示（Enable/Disable lights out）
隱藏或顯示一個窗口。
觸發(fā)動作：單次觸擊

拖拽（Drag)，輕滑(Swipe)和快擲(Fling)
請閱讀文章的下半部分來詳細區(qū)別滾動，滾動，滾動顯示，平移，取消，拉拽刷新，從邊緣滑動，頁面滑動等的不同。
觸發(fā)動作：拖拽，輕滑，或快擲

內容選擇（Data selection ）（當前沒有選中項時）
選擇某個元件
觸發(fā)動作：長按，雙指單次觸擊

內容選擇（已有項目被選中時）
在選擇狀態(tài)下，選擇更多的元件?？梢院腿魏纹渌麊沃富螂p指手指結合使用。
觸發(fā)動作：長按，雙指觸擊

多項內容選中拖拽（Data multi-selection drag）
拖拽時從拖拽起點顯示選擇框。選擇框的高度和寬度可以根據(jù)手指位置進行調整。手指提起瞬間選擇框的尺寸最終尺寸。
觸發(fā)動作：雙指滑動或拖拽，在沒有項目選中時長按拖動

選擇后移動 (Pick up and Move)
對于已選的單個或多個項目生效?？捎糜冢?

• 對一個視圖內的內容重新排序
• 將某個元件移動到一個容器或目標內
• 重排列表里的項目
  觸發(fā)動作：兩指長按拖動，對于已選項長按拖動。

放大（Zoom in）
將內容的尺寸放大。
觸發(fā)動作：

• 雙次觸擊
• 雙觸拖拽（下）
• 捏放

放大至合適（Zoom in to fit）
作用于內置圖（nested views），將圖片從最小尺寸放大到合適。
觸發(fā)動作：雙次觸擊

縮?。╖oom out）
將內容的尺寸縮小。 觸發(fā)動作：

• 在元件最大尺寸時雙次觸擊
• 雙次觸擊拖動
• 捏合
• 雙指單次觸擊
• 雙指雙次觸擊

展開（Expand）
展開被折疊了的內容。
觸發(fā)動作：捏放

折疊（Collapse）
折疊被展開的內容。
觸發(fā)動作：捏合

旋轉 （Rotate） 旋轉目標內容。
觸發(fā)動作：旋轉

拖拽(Drag)，輕滑(Swipe)和快擲(Fling)

由于滑動的觸發(fā)行為可能因為滑動時情景的不同而大不相同，這里將對一些主要的滑動手勢和他們的區(qū)別進行描述。

手勢的速率（由小至大）是拖拽，輕滑和快擲的主要區(qū)別。根據(jù)使用的情景，手勢的速率會產生不同的效果：

• 拖拽：精確手勢，較慢，更為細致，通常是針對屏幕的某個特定目標進行操作
• 輕滑：粗放手勢，略快，通常沒有一個特定的屏幕目標
• 快擲：粗放手勢，沒有特定屏幕目標

滑動結束時速率大并且被作用元件的速率達到某個閥值，這樣的滑動就是快擲。

通常手勢的速率會決定該動作在超過一定范圍時是否可逆：一次拖拽行為中手指會和元件保持接觸，而反向操作會將元件拖回到原位；一次快擲行為會在達到閥值時與元件脫離接觸，此時不可逆。

滾動（Scroll）

對主題內容水平或垂直方向的滑動。

滑動的程度根據(jù)手勢的速度來決定： 拖拽（慢）VS 輕滑 VS 拋擲 fling（快）。

通常情況下：

• 同一時刻，滾動的方向只能水平或垂直（mutually exclusive）
• 適用于尺寸為100％的內容
  http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-02_large_mdpi.png" alt="Gestures-TouchActivities-02" />

滾動顯示（Reveal upon Scroll)

反向滾動可以快速顯示在這個應用里隱藏的元件。比如在chome瀏覽器里，向上滾動會顯示地址欄。

往正常方向滾動元件再次隱藏。
http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-02_large_mdpi.png" alt="Gestures-TouchActivities-02" />

平移（Pan）

任意方向，一或兩只手指

通常應用于：

• 內容是無邊界時（如地圖）
• 內容比屏幕顯示尺寸大（如放大查看網(wǎng)頁或圖片時）

兩只手指的的平移是從其他兩只手指的手勢（如，捏合、捏放或旋轉）轉變過來的，比如在地圖上操作。如果一開始就用兩只手指平移會形成內容的傾斜。

拖動（drag）就是平移的典型。

快擲會保持手勢的速率，在該快擲方向上內容有明顯的平移。
http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-03_large_mdpi.png" alt="Gestures-TouchActivities-03" />

消除（Dismiss）

從一個可以滑動的元件開始，比如列表中的一項或是卡片狀原件。

方向與滾動的方向垂直。

一般是水平方向，對稱使用。

消除手勢要達到某個閥值才會生效。
http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-04_large_mdpi.png" alt="Gestures-TouchActivities-04" />

拉動刷新（Swipe to Refresh)

作用于列表的起始項上面，或者是界面內容開始的那頭的空白的邊緣。

方向通常是垂直向下。
http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-05_large_mdpi.png" alt="Gestures-TouchActivities-05" />

邊緣滑動（Edge Swipe)

邊緣滑動從屏幕外開始的滑動動作。用于激活與當前場景不相關或有區(qū)別的內容。

在沒有定義邊緣滑動的情況下，邊緣滑動動作的效果默認為和頁片滑動一致。

邊緣滑動要達到某個閥值才會生效。
http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-06_large_mdpi.png" alt="Gestures-TouchActivities-06" />

頁片滑動 (Paging Swipe)

頁片滑動是在屏幕內容上的滑動，用來顯示剩下的內容。

如果單獨元件可以滑動，則不要使用頁片滑動。每一次頁片滑動用來顯示一個頁片／選項卡。

如果當前頁片內容是放大過的，首次頁片滑動只會顯示剩余的內容，再一次頁片滑動才會切換頁片。

參見：滑動折疊

頁片滑動要達到某個閥值才會生效。 http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-07_large_mdpi.png" alt="Gestures-TouchActivities-07" />

滑動折疊（Overscroll Collapse）

滑動折疊，以顯示更高層級。

在滾動頁面的頂部或底部使用頁片滑動可以切換到上一級內容。

滑動折疊要達到某個閥值才會生效。

http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-08_large_mdpi.png" alt="Gestures-TouchActivities-08" />

菜單打開(Menu Open)

拖拽菜單內容或選項，內容隨即出現(xiàn)。手指抬起時，被選中項高亮顯示。

菜單通過觸擊出現(xiàn)。

菜單打開的動作與拖拽動作（drag）配合使用。

http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-09_large_mdpi.png" alt="Gestures-TouchActivities-09" />

傾斜（Tilt）

傾斜 3D 內容使之前進或后退。

在地圖之類的應用中，其他的兩指操作手勢（如捏放或旋轉）會形成兩指的縮放。

傾斜與拖拽動作（drag）配合使用。

http://wiki.jikexueyuan.com/project/material-design/images/Patterns-Gestures-TouchActivities-10_large_mdpi.png" alt="Gestures-TouchActivities-10" />

原文：Gestures 翻譯：Jingsha 校對：cxytomo