推薦理由：當(dāng)滑動被賦予功能，并與界面（信息或控件）結(jié)合時(shí)，具有很強(qiáng)的可塑性，并可有效提升操作的易用性、高效性、有效性。根據(jù)滑動的維度，可以分成一維滑動、二維滑動；同時(shí)結(jié)合滑動控制界面的方式，也可以分為連續(xù)和離散。通過一些實(shí)例具體說明。?

在iOS交互模型的最底層，有一個(gè)“空間”的概念（具體可見ios空間模型），而空間最基本的屬性就是三個(gè)維度?；瑒右来嬗谄聊贿@個(gè)二維環(huán)境，也可以從維度這個(gè)角度去思考。最常見的滑動例如ios里刪除短信息的操作，這里的滑動是最基礎(chǔ)的，可以理解成一維的、被賦予了唯一功能的操作。但如果認(rèn)為滑動就是這么簡單，那可能忽略了滑動可以為設(shè)計(jì)帶來的千變?nèi)f化。

一維滑動

Mailbox在郵件列表對郵件進(jìn)行操作時(shí)，使用了一維離散型的滑動：

1 向右滑動郵件列表中的一個(gè)郵件條目，根據(jù)滑動距離的長短先后出現(xiàn)已讀，刪除操作，release后執(zhí)行。

2 向左滑動郵件列表中的一個(gè)郵件條目，根據(jù)滑動距離的長短先后出現(xiàn)歸為待辦事項(xiàng)、分類歸檔操作，release后執(zhí)行。

百度瀏覽器頁面縮放的功能，采用了一維連續(xù)型滑動：

1 默認(rèn)在界面底部的工具欄顯示最常用操作，

2 在工具欄滑動時(shí)，工具欄變?yōu)轫撁婵s放的控件；

3 通過滑動距離長短控制頁面縮放大?。ㄔ接以酱螅?，同時(shí)上方頁面以頁面左上為縮放中心，實(shí)時(shí)反饋頁面縮放效果；

4 release結(jié)束縮放操作，得到縮放后的頁面。????

二維滑動

當(dāng)滑動被賦予的功能增加，或需要更復(fù)雜控制時(shí)，一維不能解決，可以升維成二維滑動。

ios默認(rèn)視頻播放器的視頻進(jìn)退控制，采用了二維滑動：

操作：按下滑塊后沿豎直方向滑動，根據(jù)滑動距離切換速度，再橫向滑動進(jìn)退，release后視頻進(jìn)度生效。

效果：下圖綠線為手實(shí)際滑動距離，紫線為視頻進(jìn)退幅度。不同速度下水平滑動同樣距離，視頻進(jìn)退的幅度不同，高速進(jìn)退幅度最大，慢速最小。

如果把視頻播放器的滑動操作抽象，可形成其通過二維滑動變速控制視頻進(jìn)度的二維空間模型，如下：豎直方向的滑動，通過離散的方式選擇進(jìn)退速度。水平方向的滑動，通過連續(xù)的方式控制視頻進(jìn)退的幅度。

類似的還有猛犸瀏覽器的頁面變速滾動功能：

操作：在頁面中縱向滑動時(shí)，頁面以默認(rèn)滑動速度滾動；如果先從屏幕右邊緣橫向滑動，便可選擇不同滾動速度（越左速度越快），再縱向滑動以滾動頁面。

效果：手向下滑動同樣距離，速度快的頁面滾動幅度大（下圖綠線表示手實(shí)際滑動距離，紫線表示頁面滾動幅度）

滾動功能的二維空間模型如下：

以上兩個(gè)二維滑動的例子都是通過在一個(gè)維度改變速度去影響另一個(gè)維度對幅度的控制。Snapseed的二維滑動操作更加簡單易用，在界面任意位置豎直滑動固定距離切換功能，水平滑動控制具體功能的參數(shù)大小。 如果把snapseed的滑動操作抽象，可形成其通過二維滑動實(shí)現(xiàn)功能切換和參數(shù)調(diào)節(jié)的二維空間模型：

由此引申一下，當(dāng)兩個(gè)維度都可以自由滑動時(shí)，滑動可變?yōu)橥蟿?。這時(shí)為拖動賦予功能，去判斷這個(gè)功能的標(biāo)準(zhǔn)除了上文提到的滑動距離，還可以是手或被拖動物體到達(dá)或離開的區(qū)域。例如Launcher中，按下apps后進(jìn)入二級界面，手滑動到對應(yīng)區(qū)域release激活操作。

總結(jié)

滑動手勢詮釋了“模糊的精確”的設(shè)計(jì)思想，有效提升操作可用性：

1 易于學(xué)習(xí)并形成習(xí)慣用法。

2 在移動環(huán)境下使用，適合單手操作，高效易控。

3 通過直接操作的對象或需要時(shí)出現(xiàn)，代替工具欄、菜單等常用控件，節(jié)省界面空間，為信息讓路。

4 易成為產(chǎn)品的殺手級功能和傳播點(diǎn)。

當(dāng)滑動被賦予功能，并與界面（信息或控件）結(jié)合時(shí)，可以有較強(qiáng)的可塑性，可從以下方面為切入點(diǎn)，結(jié)合產(chǎn)品功能進(jìn)行思考：

1 賦予簡單功能的滑動可以是一維的；需要增加功能類別或者強(qiáng)度時(shí)，可以升維，形成二維滑動或者拖動。

2 為滑動賦予功能時(shí)，去判斷這個(gè)功能類別或強(qiáng)度的標(biāo)準(zhǔn)可以是滑動的直線距離。為拖動賦予功能時(shí)，標(biāo)準(zhǔn)可以是手或被拖動物體到達(dá)或離開的區(qū)域。

3 借用人機(jī)交互學(xué)當(dāng)中的對控制器的定義，滑動可以通過連續(xù)或者離散的兩種方式去控制界面。

最后，在設(shè)計(jì)滑動時(shí)還要考慮：

1 滑動不是目的而是手段，先功能后交互。

2?按照交互設(shè)計(jì)從大到小的指導(dǎo)思想，為維度賦予功能前，先梳理功能架構(gòu)和優(yōu)先級，把最常用功能置前或者設(shè)置為默認(rèn)生效。??如：maibox中最易觸發(fā)的向右滑動的第一級，被賦予了最常用的已讀功能。

視頻播放器中，在播放進(jìn)度條的區(qū)域滑動時(shí)默認(rèn)為高速進(jìn)退。需要精確控制時(shí)通過豎直滑動變速。

百度瀏覽器中，默認(rèn)顯示最常用的工具欄，滑動時(shí)才顯示頁面縮放控件。

3 在分析具體的動態(tài)交互效果時(shí)，可以參照Design interactions中對鼠標(biāo)拖動操作的分析表格（如下圖），創(chuàng)建滑動的表格幫助理清思路（X軸可為滑動的狀態(tài)細(xì)分，y軸可為滑動過程中涉及的界面元素和控件）。

圖片來自Designing web interface

4 有些復(fù)雜滑動操作有一定學(xué)習(xí)成本，可作為快捷方式，同時(shí)還需要具備通過常規(guī)點(diǎn)擊也可實(shí)現(xiàn)的操作方式。

本文來源：互聯(lián)網(wǎng)er的早讀課