觸屏手機中手勢交互的設計研究
觸屏手機中手勢交互的設計研究-移動閱讀二維碼

觸屏手機作為未來手持移動設備的發展趨勢,手勢為其主要的交互方式和提高用戶體驗的方法有著重要的意義。目前觸屏手機中手勢交互研究正處于初級階段,筆者作為交互設計師從實踐的角度針對本國用戶的特點,通過人機工程學原理進行相關數據測量分析,并結合解剖學、認知心理學等相關理論,分析和總結觸屏手機中手勢交互的設計和運用原則。

1 人機工程學原則

通過實驗針對觸屏手機中手勢操作的相關問題進行定量到定性的研究。篩選被試:選取使用觸屏手機3年以上的正常成年人為典型被試。據中科院心理研究所調查數據顯示,中國目前右撇子數量約為91%,左撇子約為1%。故本實驗被試以右撇子為主。且由于人體具有一定的差異,為保證所測數據真實準確,根據《中國成年人人體尺寸》中的手部數據,篩選出手部尺寸適中的用戶。最終實驗被試:30人,年齡24——32歲,男女各半。

通過測試發現“右手單手操作”和“左手持機右手操作”這兩種操作方式所占比率最多,筆者分別對這兩種操作方式進行人機工程學的探討。

一、單手操作方式:

clip image0025 thumb 觸屏手機中手勢交互的設計研究

圖1 右手單手操作

如圖1:該操作方式以大拇指操作為主,一般用于行進間的使用場景。由于生理結構的局限性導致單手操作時,手指操作具有 “死角”和“熱區”,且很多手勢單手操作是無法實施。

大拇指操作面積

大拇指的操作面積即大拇指操作的“熱區”。根據相關實驗測試顯示:

clip image0044 thumb 觸屏手機中手勢交互的設計研究

圖2 大拇指操作范圍

如圖2:被試單手進行操作時,C為虎口位置,大拇指的操作范圍如圖陰影處所示,顏色越深處為操作越靈活,顏色越淺越不靈活。

大拇指操作關節舒適度

clip image0064 thumb 觸屏手機中手勢交互的設計研究

圖3 大拇指操作關節

如圖3所示:單手操作的場景下大拇指有三個關節參與。三個關節分別是第一拇指關節、第二拇指關節和腕掌關節[1]。使用不同的關節和肌肉組織會給用戶帶來不同的感受,根據被試測量結果顯示:

一、第一拇指關節:向前彎曲最大90度,在手勢操作中使用頻率不高,且第一拇指前面的距離短,操作的范圍是很有限的。被試反饋:長時間使用這個關節會不舒服。

二、第二拇指關節:向前彎曲最大90度,使用的頻率較高于第一拇指關節。第二拇指關節長于第一拇指關節,操作范圍略大于第一拇指關節,但操作的范圍仍然很有限。被試反饋:長時間使用這個關節也會不舒服,但略好于長時間使用第一拇指關節。

三、腕掌關節:腕掌關節能夠進行較大程度的屈伸和收展,所以能完成對掌運動。且腕掌關節前面的距離長,操作范圍廣,費力小,控制的關節多,靈活性很高。用戶反饋:長時間的使用這個關節,不會有太大的負擔。

根據觀察被試顯示:用戶在進行手勢操作時會優先使用腕掌關節,由于腕掌關節的活動范圍和活動程度與拇指關節相比增加很多,同時也更加輕松,所以當用戶的拇指從放松狀態(拇指伸直)轉移到需要與觸摸屏接觸的狀態時,會優先使用腕掌關節。例如在用戶進行拖拽手勢時,也會優先使用腕掌關節,當僅僅使用腕掌關節無法達到所需要的距離時(例如死角位置或腕掌關節不適合精細和細節的動作和位置),才考慮使用拇指的第一和第二關節。

單手操作常用手勢靈活度

該實驗要求被試單手操作手機時,常用手勢的靈活程度。

clip image0084 thumb 觸屏手機中手勢交互的設計研究

圖4單手操作常用手勢舒適度(橫坐標:常用手勢 縱坐標:靈活度)

clip image0104 thumb 觸屏手機中手勢交互的設計研究

圖5單手書寫數字舒適度(橫坐標:書寫1-9個數字 縱坐標:靈活度)

測試顯示:被試在單手操作手機時,平移、豎移、點擊、弧移、書寫數字(1、7)得分較高,因此分析得到:單手操作在可操作范圍內只能采用簡單偏直線類的手勢,曲線較多較長的手勢用戶并不是很擅長。

二、雙手操作方式及其人機工程學測量

clip image0124 thumb 觸屏手機中手勢交互的設計研究

圖6 雙手操作

如圖6:該種操作主要使用在偏靜止的場景。該操作方式受手指的生理限制和手機的物理條件限制(如手機尺寸等)很小。

手指組合靈活度和使用頻率

clip image0144 thumb 觸屏手機中手勢交互的設計研究

圖7手指編號

如圖7,對手指進行編號。該實驗主要測量被試對應手指及其組合的靈活程度。

單指靈活度

clip image0164 thumb 觸屏手機中手勢交互的設計研究

圖8單指靈活度(橫坐標:單指 縱坐標:靈活度)

雙指組合靈活度

clip image0184 thumb 觸屏手機中手勢交互的設計研究

圖9雙指組合靈活度(橫坐標:二指組合 縱坐標:靈活度)

三指組合靈活度

clip image0204 thumb 觸屏手機中手勢交互的設計研究

圖10三指組合靈活度(橫坐標:三指組合 縱坐標:靈活度)

四指組合靈活度

clip image0224 thumb 觸屏手機中手勢交互的設計研究

圖11四指組合靈活度(橫坐標:四指組合 縱坐標:靈活度)

五指組合靈活度

clip image0244 thumb 觸屏手機中手勢交互的設計研究

圖12五指組合靈活度(橫坐標:五指組合 縱坐標:靈活度)

通過上述測試對比顯示:手指組合中最為靈活的是12和13組合。三指組合中最為靈活的是123、134和234組合。四指組合中最為靈活的是1234、1345和2345組合。五指操作的靈活程度非常高。因此在進行手勢設計時,需要仔細參考不同手指和其組合的靈活度要采用靈活度舒適度較高的手勢和組合,才可以增加手勢的舒適度和易用性。

2定位原則

2.1人群定位

不同的人群有年齡、生理、認知能力等的差異,會導致手勢交互設計的不同。在眾多變量因子中年齡因素對手勢交互設計影響是最為普遍,設計手勢交互要仔細考慮年齡變量因子。正常人群從0—22歲左右,手指的尺寸逐漸增大,會導致手指的靈活度和有效操作范圍不斷的增大。在約45歲之后各個手指的靈活度逐漸開始下降,因此針對不同年齡的人群,需設計不同的手勢組合。

此外經過認知心理學家測試:不同年齡段,認知加工能力有很大的差異。正常人的記憶廣度隨著年齡的不斷增長而增加,到成人時為頂峰,到達老年時開始衰退[2]。兒童和老人的短時記憶最多的數量一般是2—4左右,而成人可以達到5—9個。故針對于老年和兒童的手勢設計,一個App中手勢數量需保持在5個數量以下,多依賴與界面的引導和暗示,讓此類用戶根據情境記憶這些手勢,從而增加手勢的易記憶性。

手勢設計還應考慮到特殊的人群,如手指具有殘疾的用戶:動作手勢(手勢的含義不隨著手指數量的增加而改變)受到手指數量限制很少,故對此類用戶也應該多使用動作類手勢,來保證對應App對用戶的可用性。

2.2 App類型定位

移動應用一般可以分為三種類型,效率型應用、實用型應用和沉浸型應用。每一種類型的應用都有各自的特點和應用場景,這些都會影響手勢交互的設計。

郵件、電話都屬于效率性的應用,天氣查詢、日歷查詢等屬于實用性的應用。這兩類應用使用場景一般都是在行進間,且主要追求交互的效率性。需著重考慮單手操作手機的手勢交互。另外在行進間的操作場景中手機一般隨著用戶的行進而搖晃,此時例如搖晃類手勢需要謹慎考慮,對于具有破壞性的操作就不要使用該手勢,容易發生誤操作。

游戲就屬于沉浸型應用。該類應用使用場景一般為靜止狀態,更加側重于體驗性和愉悅感。游戲類的手勢設計可以適當的增加操作的難度,因為游戲設計就是要違背易用性和易懂性的原則,難度高的游戲才會激勵用戶去玩。如手機端的“使命召喚”戰略游戲,就需要許多手指相互組合來操作,反而吸引了很多玩家去挑戰。

2.3 需求定位

不同需求具有相反性、重量性和專業性等特點。如刪除和取消刪除這對需求就具有相反性,在設計該手勢時,采用完全相反的手勢比較符合用戶的邏輯思維和操作效率。國外一款名片的發送類應用,發送名片和取消發送的手勢截然相反,這就是因為發送和取消發送屬于相反性需求,其采用上滑手勢為發送名片,下滑手勢為取消名片發送,用戶反饋易用性很好。需求的“重量性”特性: “重量性”的任務所采用的手勢也是重量性的,iPhone中多指“捏”對某個App進行關閉,而雙指“捏”是對App中對應視圖的縮小,因為App級別需求和App內部需求相比就屬于重量性需求。需求的專業性:如需要精細的對某個數據進行調節,那么就需采用精細的手勢,例如點擊+控件就可以很好的完成需求,倘若采用“滑動控件的手勢”那么數據調節的精度就不能滿足,因為人的特點——滑動手勢具有粗略性,點擊手勢具有精細性。

總之手勢設計需要仔細分析手勢的特性,結合不同的需求特點來設計相互匹配的手勢交互。

3 匹配原則

3.1隱喻性匹配

手勢交互的隱喻性匹配:指利用恰當的概念模式和用戶的心理模型相互匹配從而降低手勢交互的學習成本和提高易用性。概念模式:指設計者通過對事物的設計,然后向用戶表達的出事物和操作控制之間的匹配關系。心理模型:指人們經過訓練、經驗和教導等,而后對自己、他人、環境以及接觸到得事物形成的固有模式[3]。系統表象:概念模式的外在形式表現。

clip image0264 thumb 觸屏手機中手勢交互的設計研究

圖13概念模式、心理模型和系統表象關系

如圖13:用戶在進行認知交互時,通過系統表象的刺激,而后進行的模式匹配過程,也就是建立心理模型的過程,倘若系統表象可以使得用戶的心理模型和概念模式相互匹配,那么易用性就會很高。倘若系統表象的刺激使得概念模式和用戶心理模型的無法匹配,那么我們就認為,用戶的意圖和可以允許操作之間具有差距,這就是所謂的執行鴻溝。用戶為了找到正確的交互方式,就需反復進行復雜的推理等認知活動,會浪費更多的心理資源,易造成易用性差和挫敗感。

因此設計手勢交互,需要利用文化標準和生理層面等,讓設計的手勢交互的概念模式和用戶心理模型相互匹配,這樣就會減少用戶的認知負擔。

3.2繼承性匹配

根據認知心理學:人在對新鮮事物進行認知模式匹配時,總是在過去的經驗中尋找與目前情況最接近的模式,將過去的經驗映射到當前。例如在過去我們使用鼠標手勢交互、筆式交互以及不同平臺的手勢交互等,用戶會不由自主的去嘗試之前的交互方式是否在觸屏手機中也存在,這就是手勢交互的繼承性。因此在手勢設計時,需要將PC端,Web端或其他移動端中用戶比較常用的或習慣的某些手勢,繼承到觸屏手機中,就可以減少操作和學習成本、增強對應手勢交互的易學性。

4 可視性原則

人類存儲的信息一般分為兩類:儲存在外界和存儲在頭腦中(長時記憶)。

表1外界知識和頭腦中知識特點對比

存儲在頭腦中信息 存儲在外界信息
學習性 需要學習,甚至需要大量的時間和精力,但如果學習材料的結構具有一定的規律和特征那么就可以簡化學習成本 只需極少量的學習,只需提供暗示或者線索和用戶相互匹配(易學性較高)
可提取性 不可見,需要在記憶中搜尋,提取過程緩慢,容易出錯 可見
使用效率 效率很高 需要一個解碼的認知過程,速度慢
易用性
美觀性 屬于看不見的信息,不存在美觀性 若存儲信息大,可能就比較亂但是也取決設計師如何設計

如表格1:存儲在外界的知識有很大優勢,但是也有缺點,它很大程度上依賴于是否在物質世界中有暗示和線索,而且受環境限制大,只有在特定的場景之中,才能獲得相關的知識。存儲在腦中的知識,所需記憶負擔大,但是其交互效率高,不需要依賴于環境。設計心理學家唐.諾曼認為:優秀的交互設計,很容易被用戶理解,因為他們給用戶提供了正確操作方法的線索,減少了用戶的心理資源的使用。因此提高手勢交互的易學性簡化記憶負擔,手勢交互設計需要和外界知識相互結合,讓手勢變得“可視化”。

4.1手勢結合控件

設計人員可以為用戶設計大量的外界知識,幫助用戶認知記憶??梢酝ㄟ^界面控件來引導用戶去使用某種手勢,這就是手勢結合控件。如圖14,調節的手勢:iOS、Android和Windows Phone都采用Picker控件。當用戶看見這個控件暗示,自然就會被引導上下滑動來進行調節,大大降低了學習成本。

clip image0284 thumb 觸屏手機中手勢交互的設計研究?clip image0304 thumb 觸屏手機中手勢交互的設計研究?clip image0324 thumb 觸屏手機中手勢交互的設計研究

圖14左起Windows Phone picker、iPhone picker、Android picker

倘若沒有控件暗示,那么用戶就很難理解如何調整,如圖15:該款國外的電子鐘表應用,采用直接在界面上下滑動手勢來調節實踐,無控件暗示。這樣用戶很難發現調節時間的手勢,需要多次嘗試和思考才會操作,易用性太差。

clip image0344 thumb 觸屏手機中手勢交互的設計研究

圖15 國外某款電子鐘

4.2手勢結合界面場景

讓用戶記憶外界的知識其中最重要的就是情景效應,例如相同的東西在不同的情景之下就會具有不同的含義,一個物體所處的情景能使得記憶變得容易或者困難。

手勢交互設計亦如此,相同手勢操作在不同的界面場景,反饋卻不相同。例如在界面最頂部下拉手勢,調出status bar(狀態欄),而在具體的界面列表中下拉手勢為調整列表位置。在最頂部下拉,狀態欄設計的層級關系為最頂層,其主要隱喻類似現實生活的窗簾,因此在這樣的場景下,下拉手勢必然為打開狀態欄。而在列表中,列表為當前正在操作層,所以在界面中下拉手勢相當于對界面的直接操作,此時下拉手勢和現實生活中對具體物體的下拉手勢操作相匹配,因此此時下拉就為移動列表位置。綜上所述,手勢設計也要結合場景,不同的場景手勢含義不同,使用的手勢類型也會不同。

5 防失誤原則

根據認知心理學,用戶在長時記憶存儲的編碼過程會受到各種的干擾因此就會導致記憶的模糊化。其主要原因:存儲信息進入長時記憶,在編碼過程中需要提取一條線索和目標記憶相互連接,當被試在長時記憶中進行目標記憶索取時,只需找到相關線索就可以抓到對應的目標記憶,如圖16所示:

clip image0364 thumb 觸屏手機中手勢交互的設計研究

圖16(長時記憶中信息編碼存儲)

記憶的存儲機制為:當目標記憶特征比較明顯,那么對應提取線索傾向于只對應一個目標記憶,當幾個目標記憶特征不明顯,那么在同一個提取線索下面可能會對應多個目標記憶。當被試在讀取記憶時,單獨提取線索對應單個記憶的就比較容易抓到。單個線索對應多個目標記憶那么就不容易抓取,此時就會出現記憶混淆,就很容易產生誤操作。

clip image0385 thumb 觸屏手機中手勢交互的設計研究

圖17(長時記憶中信息編碼存儲)

認知心理學測量顯示:所要記憶的對象差異性較大、特征性明顯給用戶刺激產生的提取線索就越多,越容易提取。

因此手勢交互設計彼此需要具有較明顯的特征性。例如iPad的五指捏關閉App的手勢相對于其他滑動手勢就很特別,特征明顯,用戶就容易記住。而諾基亞N9的滑動手勢賦予太多的操作任務,用戶在記憶的時候,提取線索少,目標記憶多,發生失誤操作的概率非常大。

6 總結

通過筆者的實驗和理論研究總結出手勢交互設計的原則,對實踐具有很大的價值。但手勢交互設計靈活度和難度都很大,需要交互設計師大量的積累用戶的心理模型、行為習慣等,設計完成后需要反復的進行用戶研究測試才可以投入市場使用。而且目前手勢交互的研究正處于初級階段,相關的研究資料極少,文章由于時間、人力和資源限制,無法全面系統和深入的總結出手勢設計的方法,筆者在今后的研究中會大量涉獵不同的學科和實踐,使得手勢交互設計理論更加充實和全面。


本文鏈接:http://www.casaleticia.com/touch-screen-mobile-phone-gesture-interaction-design-research.html
本文標簽: , , , , , ,