PC端鼠標(biāo)vs手機端手勢:兩種交互有何異同點?
移動端相較于PC端的交互動作——即手勢操作相較于鼠標(biāo)鍵盤輸入設(shè)備操作,是存在相當(dāng)大的不同的。以下筆者將從四個部分展開講述。
在iOS系統(tǒng)出現(xiàn)之前的時代,是單點觸控的電容屏和觸控筆和手機端物理鍵盤對PC端的粗暴移植和復(fù)刻,有的移動端設(shè)備甚至復(fù)制了PC端笨重的QWERTY鍵盤,那時移動端的輸入設(shè)備基本和PC端是可以一一對應(yīng)的。
qwerty鍵盤+觸控筆
但在喬布斯主導(dǎo)的iOS系統(tǒng)和手勢操作系統(tǒng)出現(xiàn)后,我們已經(jīng)無法簡單把移動端的手勢操作與PC端輸入設(shè)備簡單對應(yīng)了。移動端設(shè)備的交互方式也從此開始與PC端的交互方式分道揚鑣,漸行漸遠(yuǎn)。
被喬布斯拋棄的觸控筆和物理鍵盤帶來了移動端交互革命
我們先來回顧一下PC端鼠標(biāo)針對UI控件的幾個主要交互動作:
幾個主要交互動作
1. Hover
Hover,有時候也被稱為“MouseOver+MouseOut”,PC端用戶可以用鼠標(biāo)指針移過UI控件時,UI控件的交互反饋來推測UI控件的操作方式。
某些位于某種UI控件之上的Hover動作可能會讓鼠標(biāo)指針產(chǎn)生不同形態(tài)的變化,如鏈接會變?yōu)槭中?,載入新內(nèi)容會變?yōu)樯陈刹僮魑淖謨?nèi)容變?yōu)楣ぷ至?,Q&A變?yōu)閱柼柕鹊?。鼠?biāo)指針形態(tài)的改變是對當(dāng)前懸停位置內(nèi)容的一種指示。
有些UI控件本身會對鼠標(biāo)的Hover行為產(chǎn)生反饋,此時不光鼠標(biāo)指針會發(fā)生相應(yīng)的形態(tài)變化,UI控件本身也會根據(jù)預(yù)先定義產(chǎn)生不同形態(tài)的變化。
熟悉CSS的朋友可能記得文字鏈接的幾種定義:link; visited; hover; active; 其中的hover就是針對鼠標(biāo)懸停于自身時自己的樣式呈現(xiàn)。
Hover交互的用戶端觸發(fā)條件:移動鼠標(biāo)指針。
Hover 交互
2. Click
有時候也被稱為“Active”、“Action”、“MouseDown+MouseUp”,是鼠標(biāo)點擊UI控件后釋放點擊的一套交互行為。
這個過程中,用戶點擊和釋放的坐標(biāo)點是一致的,沒有移動行為。系統(tǒng)在判定用戶的交互動作是“Click”動作后,提供用戶點擊的UI控件本身應(yīng)該提供的交互反饋或系統(tǒng)層級反饋。
Click交互一定是發(fā)生在Hover交互之后的,Hover是Click的前置動作,因為不把鼠標(biāo)指針懸浮到UI控件之上,是無法完成對目標(biāo)UI控件的點擊行為的。
Click交互的用戶端觸發(fā)條件:移動鼠標(biāo)指針Hover目標(biāo)UI控件,然后按壓物理按鍵。
Click交互
3. Right Click
PC端雖然判斷鼠標(biāo)點擊的事件監(jiān)聽機制是同樣的,但無論是蘋果的OSX系統(tǒng)還是微軟的Windows系統(tǒng),都默認(rèn)把鼠標(biāo)右鍵點擊交互反饋留給了ContextMenu——即系統(tǒng)菜單。
此時,系統(tǒng)或應(yīng)用收回了對右鍵反饋的控制權(quán),鼠標(biāo)右鍵點擊激活的是系統(tǒng)菜單,用戶需要再次點擊菜單選項來對當(dāng)前UI控件進行更多操作。
Right Click交互的用戶端觸發(fā)條件:移動鼠標(biāo)指針Hover目標(biāo)UI控件,然后按壓物理按鍵右鍵。
Right Click交互
4. Tap
Tap交互也叫Soft-touch,中文一般稱為“輕敲”,是鼠標(biāo)指針Hover于某UI界面元素后,在鼠標(biāo)操作區(qū)(或觸控板外設(shè))上快速輕敲以實現(xiàn)與界面元素間的互動,普通的windows系統(tǒng)鼠標(biāo)可能不支持此操作。
Tap交互
Tap交互針對的UI界面元素一般是界面級控件,如操作區(qū)放大縮小、進入程序選擇界面等。
Tap觸發(fā)條件:Hover于界面元素,輕敲鼠標(biāo)操作區(qū),沒有物理按壓行為。
5. Drag
Drag交互中文一般稱之為“拖拽”,是鼠標(biāo)指針Hover于某UI控件后,用鼠標(biāo)按鍵或其他方式觸發(fā)UI控件進入拖拽狀態(tài)后,通過移動鼠標(biāo)指針的位置來將UI控件拖移至指定位置,然后通過松開按鍵或其他方式解除控件拖拽狀態(tài)。
Drag交互
拖拽狀態(tài)需要UI控件本身支持拖拽功能才能激活。所以有時候通過鼠標(biāo)指針的變化來指示指定UI控件是可拖拽的。
拖拽狀態(tài)觸發(fā)條件:Hover于界面元素,按住鼠標(biāo)按鍵或快捷鍵激活拖拽狀態(tài),拖拽完成后解除拖拽狀態(tài)。
6. Scroll
Scroll交互是指鼠標(biāo)指針Hover于指定界面后,用鼠標(biāo)滾輪或輕劃動作來實現(xiàn)界面內(nèi)容滾動顯示。
Scroll狀態(tài)觸發(fā)條件:Hover于界面元素,滾動鼠標(biāo)滾輪或上下輕劃鼠標(biāo)操作區(qū)。
7. Pan
這個動作中文一般稱為“平移”,是指鼠標(biāo)指針懸停在某個UI控件上方時,可以通過在鼠標(biāo)二維平面和屏幕之間建立一種映射關(guān)系,來實現(xiàn)在UI空間內(nèi)的卷屏效果。
平移
這個動作是Mac的OSX等操作系統(tǒng)支持的蘋果專用鼠標(biāo)提供的基于鼠標(biāo)Hover交互的交互方式,如果我們把觸摸板外設(shè)也作為鼠標(biāo)的變體和延伸的話,筆記本的觸摸板也提供這個交互方式。
Pan交互觸發(fā)條件:Hover于指定控件,二維平面內(nèi)輕劃鼠標(biāo)操作區(qū)實現(xiàn)。
8. Zoom
Zoom交互分為放大(Zoom In)和縮?。╖oom Out)操作,一般是鼠標(biāo)指針Hover于指定界面或UI控件,通過鼠標(biāo)按鍵或快捷鍵激活Zoom狀態(tài),縮放完成后,再通過釋放按鍵解除zoom狀態(tài)。
Zoom交互觸發(fā)條件:Hover于指定控件,通過鼠標(biāo)按鍵或快捷鍵激活Zoom狀態(tài),二維平面內(nèi)輕劃鼠標(biāo)操作區(qū)實現(xiàn)Zoom效果,然后釋放按鍵解除Zoom狀態(tài)。
以上就是PC端鼠標(biāo)能夠?qū)崿F(xiàn)的主要交互行為。
PC端鼠標(biāo)交互的最顯著的一些特性
看過了PC端鼠標(biāo)和界面元素的主要交互方式,下面讓我們來總結(jié)一下PC端鼠標(biāo)交互的最顯著的一些特性:
1. 鼠標(biāo)指針優(yōu)先級和層級高于所有界面層級,永遠(yuǎn)位于界面所有元素最上方。
熟悉CSS的朋友可能知道頁面層級有一個z-index的屬性,它標(biāo)示了指定頁面元素在頁面層級中的深度,數(shù)值越大,越是處于更上層的層級,數(shù)值越小,越是處于更下層的層級。但不論是應(yīng)用內(nèi)的元素,還是應(yīng)用本身,包括系統(tǒng)桌面元素,都不能超越鼠標(biāo)指針?biāo)趯蛹?。鼠?biāo)指針?biāo)趯蛹壚碚撋鲜钦蕖?/p>
鼠標(biāo)層級
2. 鼠標(biāo)指針永遠(yuǎn)以一個虛擬的點投影于二維屏幕的可視坐標(biāo)系內(nèi)。
不管用戶是否在使用鼠標(biāo)操控屏幕元素,只要是添加了鼠標(biāo)外設(shè)且支持鼠標(biāo)操作的PC設(shè)備,從始至終都會有一個鼠標(biāo)指針永遠(yuǎn)停留在屏幕的某處,你用或不用,它就在那里。
雖然鼠標(biāo)投影于二維屏幕坐標(biāo)系內(nèi)的點和幾何意義上的點一致,即這個點沒有面積,僅是數(shù)學(xué)意義上的點,但屏幕二維坐標(biāo)可以粗略定義這個點的位置。
3. 鼠標(biāo)指針的Avatar可以根據(jù)自身所投影位置內(nèi)容的屬性而改變自身顯示形態(tài)。
我們看到的“箭頭”、“手型”、“工字梁”、“移動”顯示樣式是真正意義上的鼠標(biāo)指針的化身,鼠標(biāo)指針的樣式會根據(jù)所處元素的屬性而改變。
鼠標(biāo)指針的形態(tài)
4. 鼠標(biāo)指針從某點移動到另外一個點一定會有線性的行動軌跡
鼠標(biāo)的行動軌跡
PC端鼠標(biāo)的這個特性深刻影響了PC端鼠標(biāo)的交互行為,也是它和移動端手勢交互的重要區(qū)別。
在PC端,鼠標(biāo)操作想要跟某個控件交互,首先要把鼠標(biāo)指針從當(dāng)前所在的點移動到目標(biāo)控件顯示區(qū)域,軌跡球和光電鼠標(biāo)都是用鼠標(biāo)在桌面上移動方向和軌跡來映射光標(biāo)移動方向和軌跡。
所以,鼠標(biāo)運動一定要知道當(dāng)前鼠標(biāo)指針?biāo)谖恢?,才能操作鼠?biāo)向目標(biāo)位置移動。這種運動并不是最自然的交互方式,甚至還因為這種操作不直觀發(fā)生過最早接觸鼠標(biāo)的一批人在遇到“請把光標(biāo)移動到Windows窗口”這樣的操作指令時,直接把鼠標(biāo)貼到了屏幕上這樣的笑話。
僅從是否最符合用戶以物理世界移情于虛擬世界的心智模型的角度來看,鼠標(biāo)交互方式比起指哪打哪,無需考慮鼠標(biāo)指針前一個落點的觸控筆操作、手勢操作在直觀性上要欠缺很多。
而在PC端比較經(jīng)常發(fā)生的就是我們在想要找到鼠標(biāo)指針當(dāng)前位置時,結(jié)果卻因為指針太小或背景太花哨而遍尋不見,OSX系統(tǒng)的快速晃動鼠標(biāo),鼠標(biāo)指針就會瞬間瞬間變大許多倍就是為了解決這種交互的一個缺點。
要把光標(biāo)移動到某個點,需要知道當(dāng)前所在點
鼠標(biāo)指針的另一個特點是完全符合費茲定律的限制,費茲定律(Fitts’ Law)是心理學(xué)家 Paul Fitts 所提出的人機介面設(shè)計法則,是一種主要用于人機交互中的人類運動的預(yù)測模型。
它的公式是:
MT=a + b * log2(D/W + 1)
它主要定義了游標(biāo)移動到目標(biāo)之間的距離、目標(biāo)物的大小和所花費的時間之間的關(guān)系。目標(biāo)越大,完成點擊越快,時間越短。同樣地,目標(biāo)越近,指向越快,完成點擊時間越短。也就是說,定位點擊一個目標(biāo)的時間,取決于目標(biāo)與當(dāng)前位置的距離,以及目標(biāo)的大小。
我們不能說移動端的手勢交互已經(jīng)擺脫了費茲定律的束縛,但費茲定律最早確實是針對PC端的交互而產(chǎn)生的,也最能反應(yīng)PC端鼠標(biāo)交互的特點。
5. 鼠標(biāo)可以通過滾動、滑動、懸浮等方式與UI控件交互
鼠標(biāo)可以通過滾動、滑動等方式與指針?biāo)队拔恢玫腢I控件進行交互,實現(xiàn)卷屏、平移、放大、縮小等操控效果,這一點是必須要通過接觸屏幕才能實現(xiàn)與控件進行交互的移動端設(shè)備有顯著不同的。
如果我們用移動端的Touch來類比PC端的MouseDown的話,移動端缺少了光標(biāo)懸浮情況下的各種交互可能,Surface的手勢懸浮觸控筆試圖在觸摸屏上復(fù)制PC端的鼠標(biāo)交互,但我對這一移植的前景并不看好。因為移動端的設(shè)備交互方式自有其自身特點。
6. 鼠標(biāo)指針在屏幕上的Hover總是響應(yīng)當(dāng)前激活的界面
PC端設(shè)備的屏幕尺寸讓多項目、多應(yīng)用并行、分屏顯示成為常態(tài),正常情況下,同一個屏幕上在同一時間只有一個窗口能夠成為激活狀態(tài),未被激活的界面在鼠標(biāo)指針劃過界面元素時,一般不需要響應(yīng)指針的Hover動作。
7. 鼠標(biāo)指針在屏幕上的Click總是優(yōu)先響應(yīng)最上層的控件
PC端設(shè)備有時候會在桌面上形成多個UI界面的堆疊,一般情況下,總是位于光標(biāo)投影點的最上層的界面和界面控件響應(yīng)鼠標(biāo)的點擊,并成為激活狀態(tài)(如果尚未激活的話)。
以上就是PC端鼠標(biāo)交互方式的一些特點,有些特點,在移動設(shè)備上保留了下來。有些特點,則因為技術(shù)或屏幕尺寸等原因被移動設(shè)備交互完全放棄,熟悉了PC端交互方式和移動端交互方式之間的區(qū)別,就能在設(shè)計應(yīng)用時,針對不同的設(shè)備特性做有針對性的優(yōu)化,以實現(xiàn)各個平臺的最大優(yōu)勢。
移動端設(shè)備之所有又被稱為“移動智能終端”,是因為移動端設(shè)備由于嵌入了比PC設(shè)備多得多的各種傳感器,從而也就能實現(xiàn)比PC端多得多的交互效果。但因為本文主要是要討論手勢交互和鼠標(biāo)交互的異同,所以對除了屏幕以外的其他傳感器交互方式不做進一步的深入討論。
移動端傳感器
PC上的鼠標(biāo)點擊會產(chǎn)生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移動終端頁面觸屏?xí)r會產(chǎn)生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分別對應(yīng)了觸屏開始、拖拽及完成觸屏事件和取消交互。
移動端手勢交互和PC端最大的不同是:移動端交互都是以Touch為基礎(chǔ),只有手指接觸了屏幕,才能進行后續(xù)的所有操作,任何交互都發(fā)生在手指Touch屏幕的那一瞬間之后。而PC端鼠標(biāo)要與界面UI控件之間發(fā)生交互,很多時候只需要光標(biāo)位置懸停在目標(biāo)控件之上即可完成。
移動端Touch交互
這種根本性的交互差異深刻地影響了兩種設(shè)備的交互方式。
移動端可以實現(xiàn)的交互效果
下面來看下移動端可以實現(xiàn)的交互效果:
1. Tap
Tap,或稱為Click或Touch,是移動設(shè)備上最常使用的一種手勢輸入方式,因手指已經(jīng)替代了智能筆,以犧牲點擊的精確度換取了便捷性。因此,要求確??牲c擊的控件最小可點擊范圍(換算為物理尺寸大致在7mm-9mm之間),可點擊范圍太小會影響用戶使用體驗。
如果控件在點擊時和點擊后產(chǎn)生的操作之間間隔時間較久,建議控件在點擊時能夠在表現(xiàn)形式上做出即時反饋,這樣可以明確告知用戶點擊已生效而非系統(tǒng)卡死或沒點擊到。
Tap時的Active效果
2. Scroll
滾動是用戶在明確操作對象,與周圍環(huán)境阻尼系數(shù)較小時,通過快速移動操作對象,并利用物體的慣性來達到移動較長距離目的的操作方式。與拖拽相反,滾動會盡量利用操作對象移動的慣性,所以要求用戶在手指初次點擊屏幕到手指離開屏幕的持續(xù)時間短且點擊點和離開點的坐標(biāo)位置有較大差異。
3. Double Tap
雙擊是在手指界面上快速而連續(xù)的兩次輕敲,兩次輕敲之間間隔時間不能太長否則系統(tǒng)會作為兩次單獨的點擊處理。
雙擊
雙擊較多用于地圖、圖片瀏覽等場景中,一般會以點擊坐標(biāo)為中心點做一定程度的放大縮小操作。如果界面需要頻繁用到單次點擊,建議不要加入雙擊。如果使用了雙擊,就需要弱化或去除界面對單次點擊的反饋。由于雙擊的可發(fā)現(xiàn)性較弱,建議謹(jǐn)慎使用。
雙擊交互
4. Press
長按是指手指在屏幕固定坐標(biāo)點按壓持續(xù)一定時長的手勢操作,如以PC端的左鍵點擊對應(yīng)移動設(shè)備的點擊,則可以長按作為PC端右鍵點擊的對應(yīng)。一般多用于刪除列表項、啟動編輯等應(yīng)用場景,但因為可發(fā)現(xiàn)性弱,建議謹(jǐn)慎使用。
長按
在某些場景中,長按激活某控件的編輯狀態(tài)后,需要再配合點擊或拖拽手勢完成編輯任務(wù),然后點擊“完成”、“結(jié)束”按鈕或界面上其它位置來恢復(fù)到默認(rèn)狀態(tài)。
長按激活拖拽
5. Drag
拖拽手勢是對現(xiàn)實世界中拖拽物體行為的一種簡單映射,用戶在拖拽物體時,期望控件落在一個較精確可控的坐標(biāo)點。
如果被拖拽物體所在環(huán)境,對被拖拽物體阻尼系數(shù)較大,用戶在物體到達目標(biāo)坐標(biāo)點后可以快速松開手;如果被拖拽物體所在環(huán)境對其阻尼系數(shù)較小,用戶在物體到達目標(biāo)坐標(biāo)點后會持續(xù)一小段時間以消除運動慣性,帶有限位刻度的,用戶會使用快速的拖拽,甚至是不精確的點擊來實現(xiàn)物體往目標(biāo)點的移動。這些對用戶來說操作和反饋都是與現(xiàn)實世界一致的下意識行為,學(xué)習(xí)成本極低。
拖拽效果實現(xiàn)機制
6. Flick
輕掃手勢較多用于被操作對象有固定行程,且每段行程之間都需要單獨的輕掃手勢操作的情況,使用此手勢操作的用戶對于被操作對象的操作方式、操作結(jié)果有明確認(rèn)知。
輕掃交互
輕掃應(yīng)用場景
7. Pinch
捏夾手勢是兩個手指在屏幕上做出捏夾動作,系統(tǒng)根據(jù)手指落點坐標(biāo)和離開坐標(biāo)判斷兩指之間的距離是增大還是減小,并對界面進行相應(yīng)的放大縮小操作。
Pinch交互
8. Rotate
旋轉(zhuǎn)手勢是兩個手指對操作對象進行旋轉(zhuǎn)操作,使操作對象也旋轉(zhuǎn)相應(yīng)角度的操作方式。
旋轉(zhuǎn)交互
9. Others
其他手勢操作:
其他手勢交互
以上就是移動端手勢操作的基本交互方式。下面,我們來一起分析移動端手勢操作相較于PC端鼠標(biāo)操作的異同點。
移動端手勢操作相較于PC端鼠標(biāo)操作的異同點
1. 移動端控件沒有Hover效果
在PC端用戶要判斷一個控件可以與之互動的操作方式,可以用鼠標(biāo)在目標(biāo)控件上進行“探測”,鼠標(biāo)指針和控件本身的形態(tài)變化都能夠明確指示用戶可以執(zhí)行的操作。
而在移動端用戶要判斷一個控件的交互方式,除了控件本身的UI設(shè)計帶來的暗示以外,在真正點擊這個控件之前,都無法真正確定。這像極了量子物理理論里的“薛定諤的貓”,即你在真正點擊控件之前,你永遠(yuǎn)無法預(yù)知按鈕真正支持的操作方式。
此外由于移動端所有交互都是基于Touch的,所以此交互行為和PC端有極大差異,PC端除了拖動窗口滾動條實現(xiàn)界面滾動效果之外,基本都是用鼠標(biāo)指針懸停于目標(biāo)控件之上通過滾輪或輕劃實現(xiàn)滾動效果。所以,PC端的滾動交互,鼠標(biāo)指針和UI控件之間是沒有發(fā)生實質(zhì)意義的接觸的(如果我們把Hover視為無接觸的話)。
但移動端由于屏幕物理尺寸限制,滾動操作和點擊操作并列成為移動端交互的兩大最重要交互方式。滾動操作一定要手指先接觸屏幕表面,快速滑動一段距離并抬起以實現(xiàn)滾動效果。
所以,在手指按壓屏幕的瞬間,位于手指于屏幕接觸點的UI控件是有極大幾率被激活到“Active”狀態(tài)的,只是系統(tǒng)在判斷操作行為是“滾動”而非“點擊”行為后,對Active目標(biāo)控件執(zhí)行了ontouchcancel——也就是目標(biāo)控件雖然被激活,但并沒有執(zhí)行后續(xù)運行結(jié)果。
2. 移動端點擊的Active效果定義沒有統(tǒng)一
在移動端,用戶在點擊控件后,如果新的內(nèi)容和反饋和點擊行為發(fā)生的時間中間有“Gap”,則用戶可能會對控件是否已被接收到交互產(chǎn)生迷惑。
如果這個Gap時間很長,則直接影響用戶體驗,尼爾森法則里的狀態(tài)可見原則就是要預(yù)防這種情況:用戶在網(wǎng)頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應(yīng)即時給出反饋?!凹磿r”是指,頁面響應(yīng)時間小于用戶能忍受的等待時間。
移動端對于控件在被點擊的瞬間能夠提供的效果反饋定義很不一致。
有的應(yīng)用,有的模塊提供了類似PC端的Active效果。
安卓的Material Design脫離了PC端UI控件交互方式的束縛,用Touch后的強反饋效果來指示用戶點擊產(chǎn)生的即時反饋,是一種很好的思路。
Material Design 的點擊動效
以上的這些差異這也就對移動端控件的設(shè)計帶來了新的要求:
a. 移動端控件設(shè)計要嚴(yán)格按照設(shè)計規(guī)范
如支持移動的控件,除了設(shè)計上增加控件“可移動”的隱喻之外,還要標(biāo)配可移動圖標(biāo)。
移動端交互要配合明確的指示圖標(biāo)
如內(nèi)容不可點擊,就不要設(shè)計成列表項樣式。之前文章里曾經(jīng)舉過一個工作中遇到的例子,產(chǎn)品經(jīng)理想要把一組只讀性信息做成列表項樣式,這樣設(shè)計必然會讓用戶產(chǎn)生迷惑,從而帶來非常大的用戶體驗問題。
只讀信息不能設(shè)計成列表項樣式
如樓層圖不可點擊,就不要設(shè)計成可點擊樣式。之前在實際項目中,遇到過一個聚合頁,樓層圖設(shè)計的樣式是明顯引導(dǎo)用戶點擊樓層頭圖進入詳情頁的,雖然沒有加“更多”按鈕,這樣的設(shè)計就會引起很多體驗問題。
樓層頭圖可否點擊 設(shè)計要符合自身特點
b. 移動端控件設(shè)計要符合用戶心理預(yù)期和使用習(xí)慣
對于從來沒有接觸過移動端設(shè)備和交互方式的用戶來說,如果要實現(xiàn)編輯一個控件,無論是左滑進入編輯狀態(tài)還是長按進入編輯狀態(tài),都是需要一定的學(xué)習(xí)成本和學(xué)習(xí)過程的,但用戶一旦掌握了這種交互方式,就會在使用時形成關(guān)于如何操作此類控件的心理模型。
一般來說,用戶并不會太關(guān)注iOS平臺和安卓平臺的區(qū)別。所以,無論在什么類型的設(shè)備上,用戶都趨向于使用同一套思路去解決類似問題。如果條件允許,在可控范圍內(nèi)盡量實現(xiàn)控件交互方式和交互反饋的統(tǒng)一,是對用戶體驗的最大支持。
如果不可控因素太多,那也要盡量按照下述優(yōu)先級去統(tǒng)一交互反饋:跨平臺交互反饋統(tǒng)一 > 系統(tǒng)內(nèi)交互反饋統(tǒng)一 > 應(yīng)用內(nèi)交互行為統(tǒng)一 > 板塊內(nèi)交互行為統(tǒng)一
c. 移動端控件設(shè)計要符合用戶心智模型
移動端的交互方式是觸摸手勢交互,所以相較于使用鼠標(biāo)來操作的PC端,移動端與現(xiàn)實世界的交互方式對照也更緊密和一致。
早期的擬物化風(fēng)格UI界面上,相冊、日歷、筆記本、按鈕、開關(guān)、拖拽控件等,都是現(xiàn)實世界物品的完全照搬,都可以在現(xiàn)實中找到完全對應(yīng)的實物。正因為這樣,用戶的心智模型也更加穩(wěn)固,更加與現(xiàn)實一致。
擬物化圖標(biāo)
而一些比較抽象的如跳轉(zhuǎn)、彈框、返回等交互,用戶也已經(jīng)形成了固定的心智模型,甚至形成了穩(wěn)定的空間記憶。一旦遇到問題,用戶會在屏幕的二維空間固定位置去尋找對應(yīng)的控件。
d. 移動端控件要盡量使用簡單,直接、可發(fā)現(xiàn)性高的交互方式
因為移動端相比PC端缺少了鼠標(biāo)Hover來發(fā)現(xiàn)適合的交互方式的特點,移動端用戶只有在手指實際接觸到屏幕的瞬間才能真正了解控件支持的交互方式。
所以,移動端的交互方式要求盡量采用簡單、直接、可發(fā)現(xiàn)性強的交互方式,那些學(xué)習(xí)成本高的,不符合用戶心智模型和心理預(yù)期的交互方式注定會成為用戶體驗的阻礙。
這也是為什么我們除了Demo演示App等少數(shù)特殊場景需求的應(yīng)用外很少看到多手指手勢大范圍應(yīng)用的原因,因為隨著控制手勢的手指數(shù)量增加,操作復(fù)雜度的上升是指數(shù)級的。
如下圖這種多手指手勢操作,就極復(fù)雜且不符合用戶心智模型,用戶在使用過程中不但學(xué)習(xí)成本高,后期也難記起這些手勢:
復(fù)雜的手勢影響用戶體驗
e. 如果控件交互后載入內(nèi)容有延遲,則建議在控件上增加“Active”效果以提示用戶控件已接收到交互請求并在處理。
移動端不是強制要求添加控件的Touch時的Active效果,但如果某些控件如跳轉(zhuǎn)新頁面的列表項等,在用戶Touch了屏幕上的控件到新的頁面刷新加載之間可能會有一段延遲時間。如果這個延遲時間較長,則可以考慮增加“Active”效果以增加體驗流暢度,減少誤操作。
Active效果
本文由 @德升 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
請問在移動端手勢中,是以什么規(guī)則區(qū)分scroll、drag、flick的?例如scroll和flick,人完成這個交互實際上是同一個動作
請問Pan操作是指哪個?鼠標(biāo)指針停留在UI控件上輕掃,可以舉個例子嗎?
最后的對比有沒看懂,現(xiàn)在不論移動PC,Active的效果都沒有比較統(tǒng)一的定義效果,都是根據(jù)自家產(chǎn)品本身的情況進行設(shè)定的吧?
感謝分享
這么個問題也可以長篇大論,這這么多!
很細(xì)致