起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互設計：滑動的維度
推薦理由：當滑動被賦予功能，并與界面（信息或控件）結合時，具有很強的可塑性，并可有效提升操作的易用性、高效性、有效性。根據滑動的維度，可以分成一維滑動、二維滑動；同時結合滑動控制界面的方式，也可以分為連續和離散。通過一些實例具體說明。?
在iOS交互模型的最底層，有一個“空間”的概念（具體可見ios空間模型），而空間最基本的屬性就是三個維度。滑動依存于屏幕這個二維環境，也可以從維度這個角度去思考。最常見的滑動例如ios里刪除短信息的操作，這里的滑動是最基礎的，可以理解成一維的、被賦予了唯一功能的操作。但如果認為滑動就是這么簡單，那可能忽略了滑動可以為設計帶來的千變萬化。
一維滑動
Mailbox在郵件列表對郵件進行操作時，使用了一維離散型的滑動：
1 向右滑動郵件列表中的一個郵件條目，根據滑動距離的長短先后出現已讀，刪除操作，release后執行。
2 向左滑動郵件列表中的一個郵件條目，根據滑動距離的長短先后出現歸為待辦事項、分類歸檔操作，release后執行。
百度瀏覽器頁面縮放的功能，采用了一維連續型滑動：
1 默認在界面底部的工具欄顯示最常用操作，
2 在工具欄滑動時，工具欄變為頁面縮放的控件；
3 通過滑動距離長短控制頁面縮放大?。ㄔ接以酱螅?，同時上方頁面以頁面左上為縮放中心，實時反饋頁面縮放效果；
4 release結束縮放操作，得到縮放后的頁面。????
二維滑動
當滑動被賦予的功能增加，或需要更復雜控制時，一維不能解決，可以升維成二維滑動。
ios默認視頻播放器的視頻進退控制，采用了二維滑動：
操作：按下滑塊后沿豎直方向滑動，根據滑動距離切換速度，再橫向滑動進退，release后視頻進度生效。
效果：下圖綠線為手實際滑動距離，紫線為視頻進退幅度。不同速度下水平滑動同樣距離，視頻進退的幅度不同，高速進退幅度最大，慢速最小。
如果把視頻播放器的滑動操作抽象，可形成其通過二維滑動變速控制視頻進度的二維空間模型，如下：豎直方向的滑動，通過離散的方式選擇進退速度。水平方向的滑動，通過連續的方式控制視頻進退的幅度。
類似的還有猛犸瀏覽器的頁面變速滾動功能：
操作：在頁面中縱向滑動時，頁面以默認滑動速度滾動；如果先從屏幕右邊緣橫向滑動，便可選擇不同滾動速度（越左速度越快），再縱向滑動以滾動頁面。
效果：手向下滑動同樣距離，速度快的頁面滾動幅度大（下圖綠線表示手實際滑動距離，紫線表示頁面滾動幅度）
滾動功能的二維空間模型如下：
以上兩個二維滑動的例子都是通過在一個維度改變速度去影響另一個維度對幅度的控制。Snapseed的二維滑動操作更加簡單易用，在界面任意位置豎直滑動固定距離切換功能，水平滑動控制具體功能的參數大小。 如果把snapseed的滑動操作抽象，可形成其通過二維滑動實現功能切換和參數調節的二維空間模型：
由此引申一下，當兩個維度都可以自由滑動時，滑動可變為拖動。這時為拖動賦予功能，去判斷這個功能的標準除了上文提到的滑動距離，還可以是手或被拖動物體到達或離開的區域。例如Launcher中，按下apps后進入二級界面，手滑動到對應區域release激活操作。
總結
滑動手勢詮釋了“模糊的精確”的設計思想，有效提升操作可用性：
1 易于學習并形成習慣用法。
2 在移動環境下使用，適合單手操作，高效易控。
3 通過直接操作的對象或需要時出現，代替工具欄、菜單等常用控件，節省界面空間，為信息讓路。
4 易成為產品的殺手級功能和傳播點。
當滑動被賦予功能，并與界面（信息或控件）結合時，可以有較強的可塑性，可從以下方面為切入點，結合產品功能進行思考：
1 賦予簡單功能的滑動可以是一維的；需要增加功能類別或者強度時，可以升維，形成二維滑動或者拖動。
2 為滑動賦予功能時，去判斷這個功能類別或強度的標準可以是滑動的直線距離。為拖動賦予功能時，標準可以是手或被拖動物體到達或離開的區域。
3 借用人機交互學當中的對控制器的定義，滑動可以通過連續或者離散的兩種方式去控制界面。
最后，在設計滑動時還要考慮：
1 滑動不是目的而是手段，先功能后交互。
2?按照交互設計從大到小的指導思想，為維度賦予功能前，先梳理功能架構和優先級，把最常用功能置前或者設置為默認生效。??如：maibox中最易觸發的向右滑動的第一級，被賦予了最常用的已讀功能。
視頻播放器中，在播放進度條的區域滑動時默認為高速進退。需要精確控制時通過豎直滑動變速。
百度瀏覽器中，默認顯示最常用的工具欄，滑動時才顯示頁面縮放控件。
3 在分析具體的動態交互效果時，可以參照Design interactions中對鼠標拖動操作的分析表格（如下圖），創建滑動的表格幫助理清思路（X軸可為滑動的狀態細分，y軸可為滑動過程中涉及的界面元素和控件）。
圖片來自Designing web interface
4 有些復雜滑動操作有一定學習成本，可作為快捷方式，同時還需要具備通過常規點擊也可實現的操作方式。
本文來源：互聯網er的早讀課
- 目前還沒評論，等你發揮！
