對於手勢的一些思考 空間感帶來的心理感受

　　Clear的出現引起了大家對手勢操作的熱忱, Google新專利采用“連續手勢”也讓我們看到了個性化手勢的前景。確實，手勢操作能夠減少界面元素，提升效率;但其不可見性，抽象性，需記憶性等特點也決定了它的弊端。如何揚長避短，根據現有手勢的特點在合適的情境中使用，同時根據文化約定、實物隱喻、表音、表意等發想創新手勢，而非一味地追逐跟風，值得我們思考。本文結合了珊璞之前對客戶端手勢應用的分享以及網上的相關資料，從手勢的空間感帶來的心理感受，手勢賦予的功能，引導方式，與動畫的配合，創新幾個角度進行了總結。許多是大家已知的想法，在這裡僅做簡單的梳理;而引導方式、與動畫的配合等，希望大家能有更多的思考，因為通過動畫、轉場、擬物等方式，可以使注意力與流程更加流暢，同時貼合現實世界，從而有助於手勢的抽象性、需記憶性的克服。

　　一、空間感帶來的心理感受

　　(一)Flick(滑動)-Drag(拖動)

　　(1)橫向滑動

　　橫向滑動在空間上給人的心理感受是一種前後關系。這種前後又可以理解為平面空間的前後 和立體空間的前後 。因此在心理感覺上，橫向滑動帶來平級的切換、返回首頁(一般只有2個層級)、移動地圖，切換導航等都是合理的。

　　(2)豎向滑動

　　豎向滑動在空間上給人的心理感受是一種上下關系。這種前後又可以理解為平面空間的上下和立體空間的上下 。因此在心理感覺上，豎向滑動帶來頁面上下間、前後間等感覺都是合理的。

　　(3)拖動

　　拖動與滑動不同的地方在於其需要的力氣更大，因此在空間上更強調立體空間的前後(或上下)。

　　(4)雙指(收縮、拉開)

　　雙指(收縮、拉開)在空間上有

　　a、從外到內(或從內到外)、撥開(或捏合)的感覺。

　　b、將堆疊在一起的物體(如紙張)弄散(或收起)的感覺 。

　　c、打開、關閉的感覺。

　　d、將壓扁的物體撐開(或捏扁)的感覺。

　　因此在心理感覺上，雙指(收縮、拉開)帶來的放大縮小、打開關閉、新增刪減、合並分離等感覺都是合理的。

　　(5)按住並拖動

　　按住並拖動給人的感覺是操作對象隨手指而動，適合可以隨意拖拽的對象。

　　(6)Tap(輕點)

　　輕點沒有明顯的空間關系，但因為操作成本低，並且與日常生活中的某些操作相似，輔以擬物化設計或相關的動畫，也可以達到簡單貼心的效果。

　　二、手勢賦予的功能

　　(一)從功能上看，目前橫向滑動賦予的功能有：平級切換、返回首頁，拉出附屬功能，開關，滑塊，刪除。

　　(二)從功能上看，目前豎向滑動賦予的功能有：下拉刷新，底部加載更多、全屏、上下篇切換、返回上一級，拉出附屬功能。

　　(三)拖動是更大力度的滑動，常見的是拉出附屬功能或其它隱藏內容。

　　(四)雙指收縮、拉開常見的功能是：圖片、字體放大，亮度調節，打開關閉，新增刪減等。

　　(五)按住並拖動一般用於自定義(改變順序，加入，拉出等)。

　　輕點的功能非常之多，不詳述。

　　三、引導方式

　　目前常用的引導方式有：

　　(一)露出某一部分,提示前後、上下有隱藏的內容或操作，如QQ浏覽器。

　　(二)到達界限值時給出文字、動畫提示等,如clear，拉到底部時提示往下拖動清除，拉到頂部時提示返回上一級。

　　(三)在首次開啟應用，用戶幫助中進行說明，許多應用都采取這種方式。

　　(四)進入具有手勢操作的界面時給出氣泡、動畫、圖片等提示 ，如騰訊愛看。

　　(五)通過擬物的方式提示可以通過手勢進行操作。如拉繩狀、開關狀、滑塊狀、掀起頁角狀等。

　　(六)提供反饋

　　由於手勢的不可見性和誤操作性，除了在操作前進行引導外，在操作後也應提供一定的反饋。反饋方式可以采取聲音、抖動等。而對於誤操作二次確認也有一定的必要，特別是較重要或隱晦的手勢，例如刪除等，要讓用戶可以及時撤銷操作。

　　四、動畫配合

　　除了引導之外，在手勢操作的轉場之間運用合適的動畫，可以給用戶更加明確的心理感受，這種和手勢配合的“順勢而動”能夠使手勢更易理解。比如左滑返回首頁這一操作可以用翻頁動畫營造出立體的空間感，加深用戶的記憶，從而更容易地記住這一手勢。拉出附屬功能可以用擬物或動畫強調上下層的空間，比如拉時露出前一頁內容。拉到頁面頂端可以用彈性效果，強調已到達頂部。 比如雙指收縮拉開可以用擴散、分離、折疊等動畫表示內容的增刪。

　　五、創新手勢

　　(一)根據文化約定

　　手勢本身或操作過程的設計符合特定文化裡約定俗成的用法，形象的、有意義性的手勢更加容易記憶和學習。比如珊璞提出的用打叉的手勢表示刪除。

　　(二)根據實物隱喻

　　手勢本身的形狀或操作過程是從具體實物中簡化出來的，其內涵具有實物的隱喻意義。比如劃圈將某部分內容選中。

　　(三)表音

　　將命令或品牌的中文或英文的首字母符號作為該命令的手勢。如用 “c”(copy)表示“復制; Google通過g(google)尾部延伸圈中內容進行搜索，通過w(wiki)尾部延伸圈中內容查看在維基百科中的解釋。

　　文章來源：一淘UX