基于滑動維度的交互設(shè)計變化

時間：2022-05-29 14:15:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 14:15:01 來源：網(wǎng)絡(luò)營銷

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

當(dāng)滑動被賦予功能，并與界面（信息或控件）結(jié)合時，具有很強的可塑性，并可有效提升操作的易用性、高效性、有效性。

根據(jù)滑動的維度，可以分成一維滑動和二維滑動；同時結(jié)合滑動控制界面的方式，也可以分為連續(xù)和離散。下面，億企邦就通過一些實例來為大家具體解說一下。

一、一維滑動

對于一維滑動，我們又可以分為一維離散型滑動和一維連續(xù)型滑動來講：

1、一維離散型滑動

比如：Mailbox在郵件列表對郵件進行操作時，就使用了一維離散型的滑動，如下圖所示：

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

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

2、一維連續(xù)型滑動

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

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

（2）、在工具欄滑動時，工具欄變?yōu)轫撁婵s放的控件。

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

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

二、二維滑動

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

比如：ios默認(rèn)視頻播放器的視頻進退控制，就是采用了二維滑動，如下圖所示：

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

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

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

類似的還有猛犸瀏覽器的頁面變速滾動功能，如以下截圖所示：

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

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

由此，億企邦也就可以判定滾動功能的二維空間模型如下：

以上兩個二維滑動的例子都是通過在一個維度改變速度去影響另一個維度對幅度的控制。

Snapseed的二維滑動操作更加簡單易用，在界面任意位置豎直滑動固定距離切換功能，水平滑動控制具體功能的參數(shù)大小，不過也要注意一下防呆的設(shè)計（具體可查看億企邦的《基于交互體驗的防呆設(shè)計應(yīng)用與策略》相關(guān)介紹）。

如果把snapseed的滑動操作抽象，可形成其通過二維滑動實現(xiàn)功能切換和參數(shù)調(diào)節(jié)的二維空間模型：

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

三、滑動設(shè)計的優(yōu)勢

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

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

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

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

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

四、滑動的切入點思考

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

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

2、為滑動賦予功能時，去判斷這個功能類別或強度的標(biāo)準(zhǔn)可以是滑動的直線距離。

3、為拖動賦予功能時，標(biāo)準(zhǔn)可以是手或被拖動物體到達或離開的區(qū)域。

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

五、設(shè)計滑動時的注意事項

不過，在設(shè)計滑動時我們還要考慮以下幾點事項：

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

2、按照交互設(shè)計從大到小的指導(dǎo)思想，為維度賦予功能前，先梳理功能架構(gòu)和優(yōu)先級，把最常用功能置前或者設(shè)置為默認(rèn)生效（對于交互設(shè)計的初學(xué)者可以看下億企邦的《交互設(shè)計師必須知道的五大交互設(shè)計流程》相關(guān)介紹）。如：maibox中最易觸發(fā)的向右滑動的第一級，被賦予了最常用的已讀功能。

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

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

億企邦點評：

內(nèi)容滑塊是導(dǎo)航的一種型式，可用于顯示各種信息，如各種圖片，熱門新聞，社會信息和產(chǎn)品特點，有些具有自動幻燈片的功能，并有按鈕滾動左右或上下的內(nèi)容，其中最具特色的過渡效果是幻燈片。

所以，我們也可以試著將滑塊這一設(shè)計理念運用到我們的網(wǎng)站和博客上，以便快速吸引游客的視覺，形成視覺的中心。