當前位置:編程學習大全網 - 源碼下載 - 手機端&PC端鼠標和手勢交互異同辨析(壹)

手機端&PC端鼠標和手勢交互異同辨析(壹)

移動端相較於PC端的交互動作,即手勢操作相較於鼠標鍵盤輸入設備操作,是存在相當大的不同的。在iOS系統出現之前的時代,是單點觸控的電容屏和觸控筆和手機端物理鍵盤對PC端的粗暴移植和復刻,有的移動端設備甚至復制了PC端笨重的QWERTY鍵盤,那時移動端的輸入設備基本和PC端是可以壹壹對應的。

但在喬布斯主導的iOS系統和手勢操作系統出現後,我們已經無法簡單把移動端的手勢操作與PC端輸入設備簡單對應了。移動端設備的交互方式也從此開始與PC端的交互方式分道揚鑣,漸行漸遠。

我們先來回顧壹下PC端鼠標針對UI控件的幾個主要交互動作:

有時候也被稱為“MouseOver+MouseOut”,PC端用戶可以用鼠標指針移過UI控件時UI控件的交互反饋來推測UI控件的操作方式。某些位於某種UI控件之上的Hover動作可能會讓鼠標指針產生不同形態的變化,如鏈接會變為手型,載入新內容會變為沙漏,可操作文字內容變為工字梁,Q&A變為問號等等,鼠標指針形態的改變是對當前懸停位置內容的壹種指示。

有些UI控件本身會對鼠標的Hover行為產生反饋,此時不光鼠標指針會發生相應的形態變化,UI控件本身也會根據預先定義產生不同形態的變化。熟悉CSS的朋友可能記得文字鏈接的幾種定義::link; :visited; :hover; active; 其中的hover就是針對鼠標懸停於自身時自己的樣式呈現。

Hover交互的用戶端觸發條件:移動鼠標指針。

有時候也被稱為“Active”、“Action”、“MouseDown+MouseUp”,是鼠標點擊UI控件後釋放點擊的壹套交互行為,這個過程中用戶點擊和釋放的坐標點是壹致的,沒有移動行為。系統在判定用戶的交互動作是“Click”動作後,提供用戶點擊的UI控件本身應該提供的交互反饋或系統層級反饋。

Click交互壹定是發生在Hover交互之後的,Hover是Click的前置動作,因為不把鼠標指針懸浮到UI控件之上,是無法完成對目標UI控件的點擊行為的。

Click交互的用戶端觸發條件:移動鼠標指針Hover目標UI控件,然後按壓物理按鍵。

PC端雖然判斷鼠標點擊的事件監聽機制是同樣的,但無論是蘋果的OSX系統還是微軟的Windows系統,都默認把鼠標右鍵點擊交互反饋留給了ContextMenu,即系統菜單,此時系統或應用收回了對右鍵反饋的控制權,鼠標右鍵點擊激活的是系統菜單,用戶需要再次點擊菜單選項來對當前UI控件進行更多操作。

Right Click交互的用戶端觸發條件:移動鼠標指針Hover目標UI控件,然後按壓物理按鍵右鍵。

Tap交互也叫Soft-touch,中文壹般稱為“輕敲”,是鼠標指針Hover於某UI界面元素後,在鼠標操作區(或觸控板外設)上快速輕敲以實現與界面元素間的互動,普通的windows系統鼠標可能不支持此操作。

Tap交互針對的UI界面元素壹般是界面級控件,如操作區放大縮小、進入程序選擇界面等。

Tap觸發條件:Hover於界面元素,輕敲鼠標操作區,沒有物理按壓行為。

Drag交互中文壹般稱之為“拖拽”,是鼠標指針Hover於某UI控件後,用鼠標按鍵或其他方式觸發UI控件進入拖拽狀態後,通過移動鼠標指針的位置來將UI控件拖移至指定位置,然後通過松開按鍵或其他方式解除控件拖拽狀態。

拖拽狀態需要UI控件本身支持拖拽功能才能激活。所以有時候通過鼠標指針的變化來指示指定UI控件是可拖拽的。

拖拽狀態觸發條件:Hover於界面元素,按住鼠標按鍵或快捷鍵激活拖拽狀態,拖拽完成後解除拖拽狀態。

Scroll交互是指鼠標指針Hover於指定界面後,用鼠標滾輪或輕劃動作來實現界面內容滾動顯示。

Scroll狀態觸發條件:Hover於界面元素,滾動鼠標滾輪或上下輕劃鼠標操作區。

這個動作中文壹般稱為“平移”,是指鼠標指針懸停在某個UI控件上方時,可以通過在鼠標二維平面和屏幕之間建立壹種映射關系,來實現在UI空間內的卷屏效果。

這個動作是Mac的OSX等操作系統支持的蘋果專用鼠標提供的基於鼠標Hover交互的交互方式,如果我們把觸摸板外設也作為鼠標的變體和延伸的話,筆記本的觸摸板也提供這個交互方式。

Pan交互觸發條件:Hover於指定控件,二維平面內輕劃鼠標操作區實現。

Zoom交互分為放大(Zoom In)和縮小(Zoom Out)操作,壹般是鼠標指針Hover於指定界面或UI控件,通過鼠標按鍵或快捷鍵激活Zoom狀態,縮放完成後,再通過釋放按鍵解除zoom狀態。

Zoom交互觸發條件:Hover於指定控件,通過鼠標按鍵或快捷鍵激活Zoom狀態,二維平面內輕劃鼠標操作區實現Zoom效果,然後釋放按鍵解除Zoom狀態。

以上就是PC端鼠標能夠實現的主要交互行為。下壹篇我們繼續分析PC端鼠標交互和移動端手勢交互的異同。

  • 上一篇:linux 的學習除了掌握必要的指令外,還要學習什麽?
  • 下一篇:快遞佳緣源代碼
  • copyright 2024編程學習大全網