手勢

手勢

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

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

觸發動作

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

gestures-touch
單次觸擊(Touch)
一只手指按下,提起
例如:選擇

gestures-double-touch
雙次觸擊(Double Touch)
兩只手指按下,提起,其中一只手指按下,提起
例如:放大

gestures-swipe
拖拽(Drag),輕滑(Swipe)和快擲(Fling)
一只手指按下,移動再提起
例如取消,輕滑,傾斜

gesture-long-press
長按
一只手指按下,稍后再提起
例如:選中一個元素,比如列表中的一個項目

gestures-long-press-drag
長按拖動
一只手指按下后稍后,移動,再提起
如:選擇后移動某項,或是選擇多項

gestures-double-touch-drag
雙觸拖動
一只手指按下后提起,再按下后,拖動,再提起
例如:放大,縮小

gestures-pinch-open
捏放(Pinch Open)
雙指按下,向外移動,再提起
例如:放大

gestures-pinch-closed
捏合
雙指按下,向內移動,再提起
例如:縮小

gestures-two-finger-touch
雙指觸擊
雙指快速按下,提起
例如:縮小

gestures-two-finger-swipe
雙指拖拽,輕滑和快擲
兩指按下,移動后提起
例如:選擇多項條目,平移(Pan),傾斜(Tilt)

gestures-two-finger-long-press
雙指長按
雙指按下,稍后提起
例如:暫無

gestures-two-finger-long-press-drag
雙指長按拖動
雙指按下,稍后移動,再提起
例如:選擇后移動

gestures-two-finger-double-touch
雙指雙次觸擊
雙指快速按下提起,重復一次該動作
例如:縮小

gestures-rotate
旋轉
雙指按下,以指間中點為圓心快速轉動,再提起
例如:在地圖中旋轉內容

觸發行為

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

點觸(Tap)
激活屏幕內的元素,像是一個按鈕。
觸發動作:單次觸擊

取消或退出(Cancel or Escape)
取消或退出當前任務,如對話框或菜單。
觸發動作:單次觸擊

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

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

內容選擇(Data selection )(當前沒有選中項時)
選擇某個元件
觸發動作:長按,雙指單次觸擊

內容選擇(已有項目被選中時)
在選擇狀態下,選擇更多的元件。可以和任何其他單指或雙指手指結合使用。
觸發動作:長按,雙指觸擊

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

選擇后移動 (Pick up and Move)
對于已選的單個或多個項目生效。可用于:

放大(Zoom in)
將內容的尺寸放大。
觸發動作:

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

縮小(Zoom out)
將內容的尺寸縮小。
觸發動作:

展開(Expand)
展開被折疊了的內容。
觸發動作:捏放

折疊(Collapse)
折疊被展開的內容。
觸發動作:捏合

旋轉 (Rotate)
旋轉目標內容。
觸發動作:旋轉

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

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

手勢的速率(由小至大)是拖拽,輕滑和快擲的主要區別。根據使用的情景,手勢的速率會產生不同的效果:
- 拖拽:精確手勢,較慢,更為細致,通常是針對屏幕的某個特定目標進行操作
- 輕滑:粗放手勢,略快,通常沒有一個特定的屏幕目標
- 快擲:粗放手勢,沒有特定屏幕目標

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

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

滾動(Scroll)

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

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

通常情況下:
- 同一時刻,滾動的方向只能水平或垂直(mutually exclusive)
- 適用于尺寸為100%的內容

Gestures-TouchActivities-02

滾動顯示(Reveal upon Scroll)

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

往正常方向滾動元件再次隱藏。

Gestures-TouchActivities-02

平移(Pan)

任意方向,一或兩只手指

通常應用于:
- 內容是無邊界時(如地圖)
- 內容比屏幕顯示尺寸大(如放大查看網頁或圖片時)

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

拖動(drag)就是平移的典型。

快擲會保持手勢的速率,在該快擲方向上內容有明顯的平移。

Gestures-TouchActivities-03

消除(Dismiss)

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

方向與滾動的方向垂直。

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

消除手勢要達到某個閥值才會生效。

Gestures-TouchActivities-04

拉動刷新(Swipe to Refresh)

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

方向通常是垂直向下。

Gestures-TouchActivities-05

邊緣滑動(Edge Swipe)

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

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

邊緣滑動要達到某個閥值才會生效。

Gestures-TouchActivities-06

頁片滑動 (Paging Swipe)

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

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

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

參見:滑動折疊

頁片滑動要達到某個閥值才會生效。

Gestures-TouchActivities-07

滑動折疊(Overscroll Collapse)

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

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

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

Gestures-TouchActivities-08

拖拽菜單內容或選項,內容隨即出現。手指抬起時,被選中項高亮顯示。

菜單通過觸擊出現。

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

Gestures-TouchActivities-09

傾斜(Tilt)

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

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

傾斜與拖拽動作(drag)配合使用。

Gestures-TouchActivities-10

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

两码中特期期