前言
在iOS交互模型的最底層,有一個「空間」的概念(具體可見ios空間模型),而空間最基本的屬性就是三個維度。滑動依存于螢幕這個二維環境,也可以從維度這個角度去思考。最常見的滑動例如ios裡刪除短資訊的操作,這裡的滑動是最基礎的,可以理解成一維的、被賦予了唯一功能的操作。但如果認為滑動就是這麼簡單,那可能忽略了滑動可以為設計帶來的千變萬化。
當滑動被賦予功能,並與介面(資訊或控制項)結合時,具有很強的可塑性,並可有效提升操作的易用性、高效性、有效性。根據滑動的維度,可以分成一維滑動、二維滑動;同時結合滑動控制介面的方式,也可以分為連續和離散。通過一些實例具體說明。
一維滑動
Mailbox在郵寄清單對郵件進行操作時,使用了一維離散型的滑動:
1 向右滑動郵寄清單中的一個郵件條目,根據滑動距離的長短先後出現已讀,刪除操作,release後執行。
2 向左滑動郵寄清單中的一個郵件條目,根據滑動距離的長短先後出現歸為待辦事項、分類歸檔操作,release後執行。
(圖片來自ifanr)
百度瀏覽器頁面縮放的功能,採用了一維連續型滑動:
1 預設在介面底部的工具列顯示最常用操作,
2 在工具列滑動時,工具列變為頁面縮放的控制項;
3 通過滑動距離長短控制頁面縮放大小(越右越大),同時上方頁面以頁面左上為縮放中心,即時回饋頁面縮放效果;
4 release結束縮放操作,得到縮放後的頁面。
二維滑動
當滑動被賦予的功能增加,或需要更複雜控制時,一維不能解決,可以升維成二維滑動。
ios預設視頻播放機的視頻進退控制,採用了二維滑動:
操作:按下滑塊後沿豎直方向滑動,根據滑動距離切換速度,再橫向滑動進退,release後視頻進度生效。
效果:下圖綠線為手實際滑動距離,紫線為視頻進退幅度。不同速度下水準滑動同樣距離,視頻進退的幅度不同,高速進退幅度最大,慢速最小。
<p>如果把視頻播放機的滑動操作抽象,可形成其通過二維滑動變速控制視頻進度的二維空間模型,如下:豎直方向的滑動,通過離散的方式選擇進退速度。水準方向的滑動,通過連續的方式控制視頻進退的幅度。
類似的還有猛獁瀏覽器的頁面變速滾動功能:
操作:在頁面中縱向滑動時,頁面以預設滑動速度滾動;如果先從螢幕右邊緣橫向滑動,便可選擇不同捲動速度(越左速度越快),再縱向滑動以滾動頁面。
效果:手向下滑動同樣距離,速度快的頁面滾動幅度大(下圖綠線表示手實際滑動距離,紫線表示頁面滾動幅度)
滾動功能的二維空間模型如下:
以上兩個二維滑動的例子都是通過在一個維度改變速度去影響另一個維度對幅度的控制。Snapseed的二維滑動操作更加簡單易用,在介面任意位置豎直滑動固定距離切換功能,水準滑動控制具體功能的參數大小。 如果把snapseed的滑動操作抽象,可形成其通過二維滑動實現功能切換和參數調節的二維空間模型:
由此引申一下,當兩個維度都可以自由滑動時,滑動可變為拖動。這時為拖動賦予功能,去判斷這個功能的標準除了上文提到的滑動距離,還可以是手或被拖動物體到達或離開的區域。例如Launcher中,按下apps後進入二級介面,手滑動到對應區域release啟動操作。
總結
滑動手勢詮釋了「模糊的精確」的設計思想,有效提升操作可用性:
1 易於學習並形成習慣用法。
2 在移動環境下使用,適合單手操作,高效易控。
3 通過直接操作的物件或需要時出現,代替工具列、功能表等常用控制項,節省介面空間,為資訊讓路。
4 易成為產品的殺手級功能和傳播點。
當滑動被賦予功能,並與介面(資訊或控制項)結合時,可以有較強的可塑性,可從以下方面為切入點,結合產品功能進行思考:
1 賦予簡單功能的滑動可以是一維的;需要增加功能類別或者強度時,可以升維,形成二維滑動或者拖動。
2 為滑動賦予功能時,去判斷這個功能類別或強度的標準可以是滑動的直線距離。為拖動賦予功能時,標準可以是手或被拖動物體到達或離開的區域。
3 借用人機交互學當中的對控制器的定義,滑動可以通過連續或者離散的兩種方式去控制介面。
最後,在設計滑動時還要考慮:
1 滑動不是目的而是手段,先功能後交互。
2 按照交互設計從大到小的指導思想,為維度賦予功能前,先梳理功能架構和優先順序,把最常用功能置前或者設置為預設生效。 如:maibox中最易觸發的向右滑動的第一級,被賦予了最常用的已讀功能。
視頻播放機中,在播放進度條的區域滑動時預設為高速進退。需要精確控制時通過豎直滑動變速。
百度瀏覽器中,預設顯示最常用的工具列,滑動時才顯示頁面縮放控制項。
3 在分析具體的動態交互效果時,可以參照Design interactions中對滑鼠拖動操作的分析方格(如下圖),創建滑動的表格説明理清思路(X軸可為滑動的狀態細分,y軸可為滑動過程中涉及的介面元素和控制項)。
圖片來自Designing web interface
4 有些複雜滑動操作有一定學習成本,可作為快捷方式,同時還需要具備通過常規點擊也可實現的操作方式。
參考文獻
- (本文出自Tencent CDC Blog,轉載時請注明出處)
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy