對于手勢的一些思考

2012-11-20    藍藍設計的小編

轉(zhuǎn)載藍藍設計(   yvirxh.cn  )是一家專注而深入的設計機構 ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設計 、  cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網(wǎng)站建設 平面設計服務

來源:http://ued.alimama.com/posts/537

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,            請點這里

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

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

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

(1)橫向滑動

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

(2)豎向滑動

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

(3)拖動

    拖動與滑動不同的地方在于其需要的力氣更大,因此在空間上更強調(diào)立體空間的前后(或上下)。

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

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

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

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

c 、 打開、關閉的感覺。

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

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

(5)按住并拖動

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

(6)Tap(輕點)

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

二、手勢賦予的功能

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

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

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

(四)雙指收縮、拉開常見的功能是:圖片、字體放大,亮度調(diào)節(jié),打開關閉,新增刪減等。

(五)按住并拖動一般用于自定義(改變順序,加入,拉出等)。

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

三、引導方式

目前常用的引導方式有:

(一)露出某一部分,提示前后、上下有隱藏的內(nèi)容或操作,如QQ瀏覽器。

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

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

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

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

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

四、動畫配合

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

五、創(chuàng)新手勢

(一)根據(jù)文化約定

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

(二)根據(jù)實物隱喻

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

(三)表音

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

日歷

鏈接

個人資料

藍藍設計的小編 http://yvirxh.cn

存檔