移動端設備手勢交互設計研究

李倩 劉潔

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

【關鍵詞】滑動;全面屏;手勢交互

中圖分類號：TB472? 文獻標志碼：A ? ? ? ? ? ? ?文章編號：1007-0125（2020）26-0177-02

一、交互設計的本質

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

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

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

二、應運而生的手勢交互

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

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

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

三、全面屏手勢的思考

（一）IOS和MIUI系統切換頁面手勢研究

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

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

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

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

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

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

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

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

四、結語

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

參考文獻：

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

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

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

[4]陳思聰.基于移動端用戶界面的交互手勢設計創新研究[D].北方工業大學，2017.

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