移動端設(shè)備手勢交互設(shè)計研究

李倩 劉潔

【摘 要】隨著智能手機和平板電腦被廣泛使用，電子界面正從傳統(tǒng)的電腦鼠標(biāo)轉(zhuǎn)向觸摸屏再到全面屏，因此出現(xiàn)了與屏幕展示物體進(jìn)行交互的新方式。由傳統(tǒng)界面向觸屏界面的轉(zhuǎn)變使滑動成為一種常見的、與屏幕上的產(chǎn)品和刺激物進(jìn)行互動的動作。

【關(guān)鍵詞】滑動;全面屏;手勢交互

中圖分類號：TB472? 文獻(xiàn)標(biāo)志碼：A ? ? ? ? ? ? ?文章編號：1007-0125（2020）26-0177-02

一、交互設(shè)計的本質(zhì)

交互設(shè)計的本質(zhì)是對象和對象之間的交流，可能是人與人之間的交流，人與環(huán)境之間的交流或者人與物的交流等。我們現(xiàn)在所講的交互設(shè)計大多是指人機之間的交互，而交互設(shè)計師所要做的就是合理規(guī)劃、設(shè)計人與機之間的互動流程和步驟，尋找一種合理的溝通方式。

互聯(lián)網(wǎng)產(chǎn)品用戶主要通過兩種方式進(jìn)行交互——鼠標(biāo)和手指。這兩類交互方式有著非常大的不同，設(shè)計出來的產(chǎn)品界面也會完全不同，因為鼠標(biāo)可以很精準(zhǔn)地單擊到界面上的內(nèi)容，所以軟件界面上會有很多的菜單，并且不會擔(dān)心這些菜單之間相互干擾。而手指的準(zhǔn)確度是非常有限的，UI設(shè)計中提出的40px最小尺寸概念，即每一個可點擊區(qū)域都不要小于40px，否則就會可能讓用戶難以點擊到。如果直接將office桌面版的菜單布局移植到移動版上，會有非常嚴(yán)重的后果。

實際上在IOS和Android系統(tǒng)出來之前，Windows Mobile系統(tǒng)曾占據(jù)了移動智能系統(tǒng)很大的市場，但是所有的選項都非常密集，當(dāng)時用戶需要使用“觸控筆”才能點擊到，體驗非常糟糕。雖然現(xiàn)在“觸控筆”又在一些設(shè)備上重新出現(xiàn)了，但這是針對專業(yè)人士而研發(fā)的，比如繪畫、記筆記等，這與所有操作都需要使用“觸控筆”來進(jìn)行有著本質(zhì)區(qū)別。因此在交互設(shè)計的過程當(dāng)中，我們除了關(guān)注框架和流程、界面的內(nèi)容細(xì)節(jié)，還需要關(guān)注交互的形式和反饋，界面信息從A狀態(tài)到B狀態(tài)的觸發(fā)源、觸發(fā)區(qū)域及其對應(yīng)的觸發(fā)機制，簡單來說就是信息的輸入、交換和輸出的過程。

二、應(yīng)運而生的手勢交互

在計算機時代，我們通過鍵盤和鼠標(biāo)這樣的輸入工具進(jìn)行輸入;那么在移動互聯(lián)網(wǎng)時代，隨著手機觸摸屏幕和傳感器的出現(xiàn)，手指這樣的輸入工具是最適合我們進(jìn)行輸入的，面對復(fù)雜的任務(wù)判斷對應(yīng)的高效輸入、定義靈活且易用的手勢成為在移動端使用的互聯(lián)網(wǎng)產(chǎn)品的必備。為此，為了使用戶擁有更好的體驗感，為了滿足單手操作的需求，基于視覺的手勢識別方式應(yīng)運而生。

手勢交互的直覺形成于用戶和現(xiàn)實世界所有實物的互動中，觸摸真實物體的本能行為也是最基礎(chǔ)的動作。在物理世界中用戶接觸到物體是一定有感覺的，所以在移動端設(shè)備上與“物體”交互一定可以看到變化。在我們真實的物理世界中若想“打開”一個物體，首先必須要接觸到它，所以我們對于UI中的按鈕——那些看起來像是可以“打開新頁面”的物體，第一反應(yīng)也會是摸它一下?！包c擊”手勢的學(xué)習(xí)成本對于用戶來說是非常低的，即使是在新手引導(dǎo)環(huán)節(jié)，我們也只需要把按鈕做得夠像是一個按鈕、然后告訴用戶“點擊這里”。

手指有多種手勢，需要注意的是，有一些手勢是約定俗成的習(xí)慣，不要輕易地改變這些手勢所代表的功能，比如下拉刷新、滑動刪除等，并且最好不要和系統(tǒng)默認(rèn)的手勢產(chǎn)生功能上的沖突，以及注意每增加一種手勢和對新用戶的引導(dǎo)。移動端游戲的手勢操作是非常多樣有趣的，例如微信“主界面”情況下左右滑動可以在板塊之間切換，“好友聊天”界面下向右滑動即可退出聊天界面;今日頭條在“新聞列表”界面下下拉進(jìn)行刷新以及QQ 消息提醒的小紅點按住拖動松開，就可將消息定義為已讀。除了視覺方面的反饋，還有兩個不容忽視的地方就是震動（觸感）和聲音（聽感）的反饋，比如大家非常熟悉的微信“搖一搖”功能，當(dāng)用戶在搖晃手機的時候，會出現(xiàn)特定的聲音提示，當(dāng)匹配到用戶的時候，會通過震動提示。

三、全面屏手勢的思考

（一）IOS和MIUI系統(tǒng)切換頁面手勢研究

IOS進(jìn)入多任務(wù)界面的手勢是上劃懸停、松手，多任務(wù)界面就會出現(xiàn);MIUI第二代手勢則是上劃，等一下才會進(jìn)入多任務(wù)界面。二者區(qū)別在于最后進(jìn)入多任務(wù)界面時需不需要松手，這里有細(xì)小的差別，IOS上劃后是整個界面縮小，松手后當(dāng)前頁面變成標(biāo)簽;MIUI跳出來的多任務(wù)界面沒有與當(dāng)前頁面有動畫互動。一些用戶認(rèn)為MIUI的切換任務(wù)手勢體驗感較差，任務(wù)管理上滑以后要停留一下，這里會打斷用戶的操作節(jié)奏，并且卡頓不到位非常容易返回桌面。同時也有些用戶認(rèn)為，MIUI二代更新后，在切換頁面手勢上劃的距離上做了調(diào)整，進(jìn)入多任務(wù)界面的確是上劃然后停頓，但不是停頓一下，即使停頓一會兒，上劃以后手指不從屏幕上松開，多任務(wù)界面都會出現(xiàn)。

作為一個習(xí)慣在多任務(wù)界面切換APP而不是回桌面切換APP的用戶，可能在嘗試MIUI的全面屏手勢都會退回到導(dǎo)航鍵了，因為進(jìn)入多任務(wù)界面對這類用戶來說太常用了，而這個手勢并不好用，要上滑到一定距離并停頓一下，此時這個刻意的停頓會給用戶一種操作不流暢的感覺。從退出程序到桌面這一步來說，用戶需要從最底部開始劃，而全面屏意味著邊框很窄，那從最底部開始就意味著用戶需要手指脫離屏幕甚至脫離手機從最底部開始，這時候手機不穩(wěn)容易掉落，若是橫版游戲或者視頻單手操作基本不可能。其實完全可以將手勢操作做到屏幕中操作而不是從最一邊（底邊、左右兩邊等）開始。

至于如何在開機引導(dǎo)中逐步讓人理解停頓切換多任務(wù)，不如在設(shè)置輸入法或者其他的時候跳到另一個APP引導(dǎo)用戶返回激活引導(dǎo)，并且現(xiàn)在也出現(xiàn)了許多導(dǎo)航手勢APP，用戶可以根據(jù)自身使用場景來調(diào)整手勢，這是一種對各類全面屏手勢去粗取精且擁有豐富自定義項的新方案。技術(shù)更新創(chuàng)造總體來說是好的，但是從使用全面屏手勢這段時間來看，全面屏手勢確實還有待進(jìn)一步的人性化，希望不久后可以擁有更廣闊的屏幕視野和揮灑自如的操作體驗。

（二）iPhone和Android 的返回手勢研究

安卓全面屏最近出現(xiàn)的邊框側(cè)滑返回手勢大獲好評，例如MIUI手勢中左右邊框都能側(cè)滑返回，左右手都能單手使用，對于用戶在特定場景下使用來說是較為便捷的，且左右邊框下半側(cè)為返回，上半側(cè)為應(yīng)用自身的功能，兩者之間不會產(chǎn)生矛盾。但是蘋果目前卻遲遲沒有更新邊框側(cè)滑返回這一手勢，對于這一手勢的看法網(wǎng)絡(luò)上也是眾說紛紜。

首先從時間上看，蘋果的滑動返回是2013年在IOS 7引入的，一直到全面屏?xí)r代，這么多年過去蘋果不可能想不到更多的手勢。其次從風(fēng)格上講，蘋果的風(fēng)格稍顯偏執(zhí)，只會在系統(tǒng)中添加自己認(rèn)為需要的。但若考慮到包括空間在內(nèi)，質(zhì)量慣性、彈性阻力、加速度等物理概念因素，還得是自然且符合直覺的設(shè)計，相比之下安卓是稍顯遜色的。因為安卓沒有動畫，都是直接閃現(xiàn)消失，所以不存在蘋果所秉持的空間一致性的問題。再者，在手機屏幕同一水平線僅幾厘米位置，就包含了“左滑上一頁”“邊緣左滑返回”“右滑下一頁”“邊緣右滑返回”操作，如果是完全按安卓規(guī)范設(shè)計的應(yīng)用，還得加上“邊緣右滑喚出菜單”操作，共5個操作，誤操作的概率將會很高。但是這里也涉及設(shè)計優(yōu)先還是功能優(yōu)先的問題，經(jīng)測試，“側(cè)滑返回”這個手勢在實際使用場景中確實較為便捷，若是蘋果僅因為一個邏輯問題就不用“側(cè)滑返回”手勢，這就和討論設(shè)計與功能誰優(yōu)先不同，而是為了設(shè)計放棄了功能，在討論兩者誰優(yōu)先之前至少得兩者都存在。

從滑動操作的使用范圍上，IOS使用的地方比安卓要多，不管是宏觀微觀都在使用，而安卓不論是滑動的bottom bar還是tab bar都是偏向于全局模塊控制的，但是在規(guī)范里加入了底部導(dǎo)航欄后安卓是支持滑動的，而IOS則不支持。對于左右方向的滑動，IOS和安卓都很常用，但是內(nèi)在邏輯不同，由于有返回鍵也就是底部三大金剛虛擬鍵的存在，安卓不需要右滑返回上一級，而IOS非常需要。IOS的屏幕左滑會和table cells控件左滑發(fā)生沖突，所以一般IOS不會有屏幕左滑的操作。但是在安卓中，左右滑動是平級的tab切換，跟IOS的用途完全不同，所以不能等而視之。IOS開發(fā)最主要的問題其實是不統(tǒng)一，例如有一些邊緣返回、一些全屏返回，還有一些必須左上角返回，哪怕主流APL也有頁面就突然不支持側(cè)滑了。蘋果本身的APP，比如相冊做得不錯，但是App Store首頁的展示位，點進(jìn)去再退出來的時候是側(cè)滑到中間會停頓下，不能說難用，只能說太不一致了?，F(xiàn)在的手機屏幕越來越大，比如用iPhone xs max來操作單手返回應(yīng)該是很麻煩的，其實iPhone可以考慮在底部橫條上附加返回和多任務(wù)橫向滑動操作。

不考慮底層邏輯只看表面，IOS和安卓的系統(tǒng)確實做得越來越像了，其實作為用戶來講，是希望他們交互上越來越統(tǒng)一的，相同場景下相同屬性的產(chǎn)品，交互邏輯及操作當(dāng)然越統(tǒng)一越友好，就像返回icon永遠(yuǎn)是“向左的箭頭”。交互方式中的各種手勢，也是因為需要才會去了解，對初級用戶和中級用戶來講基礎(chǔ)功能夠用就可以，并且手勢教程也是需要用戶承擔(dān)學(xué)習(xí)認(rèn)知成本的。如果只是簡單的引導(dǎo)，那么對于初中級用戶是可以的，而更深層次的探索，對于一些用戶來說只會增加學(xué)習(xí)成本。

四、結(jié)語

手勢交互將交互方式由看得到變成了記得住，畢竟形成肌肉記憶，將很難忘記。那么交互手勢是不是越多越好呢？其實不然，我們在進(jìn)行信息處理的過程中更多的精力應(yīng)該集中在信息處理本身。交互手勢只是信息處理的載體，就像我們享用美食是一樣的，吸引我們的是盤子里的菜品和品嘗后給我們的感受，而不是我們使用了怎樣的碗筷，新的手勢交互也應(yīng)該遵循已經(jīng)建立好的交互設(shè)計原則，使這樣的輸入形式更容易被用戶認(rèn)識和理解，而不是為了形式濫用更多的手勢。我們更應(yīng)該關(guān)注的是信息處理本身需要怎樣的處理手勢，而不是有了多樣的處理手勢再尋找怎樣去處理信息的機會。

參考文獻(xiàn)：

[1]張宏源.基于視覺的手勢識別新方法綜述[C].中國計算機用戶協(xié)會網(wǎng)絡(luò)應(yīng)用分會.中國計算機用戶協(xié)會網(wǎng)絡(luò)應(yīng)用分會2017年第二十一屆網(wǎng)絡(luò)新技術(shù)與應(yīng)用年會論文集，2017.7-12.

[2]易靖國，程江華，庫錫樹.視覺手勢識別綜述[J].計算機科學(xué)，2016，43（S1）：103-108.

[3]婁澤華，殷繼彬.人機交互中的手勢設(shè)計原則分析[J].軟件導(dǎo)刊，2018，17（04）：19-24+35.

[4]陳思聰.基于移動端用戶界面的交互手勢設(shè)計創(chuàng)新研究[D].北方工業(yè)大學(xué)，2017.

[5]梁磊磊.基于觸屏手機的單手手勢交互設(shè)計淺析[J].工業(yè)設(shè)計，2017，（03）：95-96.