2012-11-20 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://ued.alimama.com/posts/537
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
Clear的出現(xiàn)引起了大家對(duì)手勢(shì)操作的熱忱, Google新專(zhuān)利采用“連續(xù)手勢(shì)”也讓我們看到了個(gè)性化手勢(shì)的前景。確實(shí),手勢(shì)操作能夠減少界面元素,提升效率;但其不可見(jiàn)性,抽象性,需記憶性等特點(diǎn)也決定了它的弊端。如何揚(yáng)長(zhǎng)避短,根據(jù)現(xiàn)有手勢(shì)的特點(diǎn)在合適的情境中使用,同時(shí)根據(jù)文化約定、實(shí)物隱喻、表音、表意等發(fā)想創(chuàng)新手勢(shì),而非一味地追逐跟風(fēng),值得我們思考。本文結(jié)合了珊璞之前對(duì)客戶(hù)端手勢(shì)應(yīng)用的分享以及網(wǎng)上的相關(guān)資料,從手勢(shì)的空間感帶來(lái)的心理感受,手勢(shì)賦予的功能,引導(dǎo)方式,與動(dòng)畫(huà)的配合,創(chuàng)新幾個(gè)角度進(jìn)行了總結(jié)。許多是大家已知的想法,在這里僅做簡(jiǎn)單的梳理;而引導(dǎo)方式、與動(dòng)畫(huà)的配合等,希望大家能有更多的思考,因?yàn)橥ㄟ^(guò)動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)、擬物等方式,可以使注意力與流程更加流暢,同時(shí)貼合現(xiàn)實(shí)世界,從而有助于手勢(shì)的抽象性、需記憶性的克服。閱讀全文
一、空間感帶來(lái)的心理感受
(一)Flick(滑動(dòng))-Drag(拖動(dòng))
(1)橫向滑動(dòng)
橫向滑動(dòng)在空間上給人的心理感受是一種前后關(guān)系。這種前后又可以理解為平面空間的前后 和立體空間的前后 。因此在心理感覺(jué)上,橫向滑動(dòng)帶來(lái)平級(jí)的切換、返回首頁(yè)(一般只有2個(gè)層級(jí))、移動(dòng)地圖,切換導(dǎo)航等都是合理的。
(2)豎向滑動(dòng)
豎向滑動(dòng)在空間上給人的心理感受是一種上下關(guān)系。這種前后又可以理解為平面空間的上下和立體空間的上下 。因此在心理感覺(jué)上,豎向滑動(dòng)帶來(lái)頁(yè)面上下間、前后間等感覺(jué)都是合理的。
(3)拖動(dòng)
拖動(dòng)與滑動(dòng)不同的地方在于其需要的力氣更大,因此在空間上更強(qiáng)調(diào)立體空間的前后(或上下)。
(4)雙指(收縮、拉開(kāi))
雙指(收縮、拉開(kāi))在空間上有
a 、 從外到內(nèi)(或從內(nèi)到外)、撥開(kāi)(或捏合)的感覺(jué)。
b 、 將堆疊在一起的物體(如紙張)弄散(或收起)的感覺(jué) 。
c 、 打開(kāi)、關(guān)閉的感覺(jué)。
d 、 將壓扁的物體撐開(kāi)(或捏扁)的感覺(jué)。
因此在心理感覺(jué)上,雙指(收縮、拉開(kāi))帶來(lái)的放大縮小、打開(kāi)關(guān)閉、新增刪減、合并分離等感覺(jué)都是合理的。
(5)按住并拖動(dòng)
按住并拖動(dòng)給人的感覺(jué)是操作對(duì)象隨手指而動(dòng),適合可以隨意拖拽的對(duì)象。
(6)Tap(輕點(diǎn))
輕點(diǎn)沒(méi)有明顯的空間關(guān)系,但因?yàn)椴僮鞒杀镜?,并且與日常生活中的某些操作相似,輔以擬物化設(shè)計(jì)或相關(guān)的動(dòng)畫(huà),也可以達(dá)到簡(jiǎn)單貼心的效果。
二、手勢(shì)賦予的功能
(一)從功能上看,目前橫向滑動(dòng)賦予的功能有:平級(jí)切換、返回首頁(yè),拉出附屬功能,開(kāi)關(guān),滑塊,刪除。
(二)從功能上看,目前豎向滑動(dòng)賦予的功能有:下拉刷新,底部加載更多、全屏、上下篇切換、返回上一級(jí),拉出附屬功能。
(三)拖動(dòng)是更大力度的滑動(dòng),常見(jiàn)的是拉出附屬功能或其它隱藏內(nèi)容。
(四)雙指收縮、拉開(kāi)常見(jiàn)的功能是:圖片、字體放大,亮度調(diào)節(jié),打開(kāi)關(guān)閉,新增刪減等。
(五)按住并拖動(dòng)一般用于自定義(改變順序,加入,拉出等)。
輕點(diǎn)的功能非常之多,不詳述。
三、引導(dǎo)方式
目前常用的引導(dǎo)方式有:
(一)露出某一部分,提示前后、上下有隱藏的內(nèi)容或操作,如QQ瀏覽器。
(二)到達(dá)界限值時(shí)給出文字、動(dòng)畫(huà)提示等,如clear,拉到底部時(shí)提示往下拖動(dòng)清除,拉到頂部時(shí)提示返回上一級(jí)。
(三)在首次開(kāi)啟應(yīng)用,用戶(hù)幫助中進(jìn)行說(shuō)明,許多應(yīng)用都采取這種方式。
(四)進(jìn)入具有手勢(shì)操作的界面時(shí)給出氣泡、動(dòng)畫(huà)、圖片等提示 ,如騰訊愛(ài)看。
(五)通過(guò)擬物的方式提示可以通過(guò)手勢(shì)進(jìn)行操作。如拉繩狀、開(kāi)關(guān)狀、滑塊狀、掀起頁(yè)角狀等。
(六)提供反饋
由于手勢(shì)的不可見(jiàn)性和誤操作性,除了在操作前進(jìn)行引導(dǎo)外,在操作后也應(yīng)提供一定的反饋。反饋方式可以采取聲音、抖動(dòng)等。而對(duì)于誤操作二次確認(rèn)也有一定的必要,特別是較重要或隱晦的手勢(shì),例如刪除等,要讓用戶(hù)可以及時(shí)撤銷(xiāo)操作。
四、動(dòng)畫(huà)配合
除了引導(dǎo)之外,在手勢(shì)操作的轉(zhuǎn)場(chǎng)之間運(yùn)用合適的動(dòng)畫(huà),可以給用戶(hù)更加明確的心理感受,這種和手勢(shì)配合的“順勢(shì)而動(dòng)”能夠使手勢(shì)更易理解。比如左滑返回首頁(yè)這一操作可以用翻頁(yè)動(dòng)畫(huà)營(yíng)造出立體的空間感,加深用戶(hù)的記憶,從而更容易地記住這一手勢(shì)。拉出附屬功能可以用擬物或動(dòng)畫(huà)強(qiáng)調(diào)上下層的空間,比如拉時(shí)露出前一頁(yè)內(nèi)容。拉到頁(yè)面頂端可以用彈性效果,強(qiáng)調(diào)已到達(dá)頂部。 比如雙指收縮拉開(kāi)可以用擴(kuò)散、分離、折疊等動(dòng)畫(huà)表示內(nèi)容的增刪。
五、創(chuàng)新手勢(shì)
(一)根據(jù)文化約定
手勢(shì)本身或操作過(guò)程的設(shè)計(jì)符合特定文化里約定俗成的用法,形象的、有意義性的手勢(shì)更加容易記憶和學(xué)習(xí)。比如珊璞提出的用打叉的手勢(shì)表示刪除。
(二)根據(jù)實(shí)物隱喻
手勢(shì)本身的形狀或操作過(guò)程是從具體實(shí)物中簡(jiǎn)化出來(lái)的,其內(nèi)涵具有實(shí)物的隱喻意義。比如劃圈將某部分內(nèi)容選中。
(三)表音
將命令或品牌的中文或英文的首字母符號(hào)作為該命令的手勢(shì)。如用 “c”(copy)表示“復(fù)制; Google通過(guò)g(google)尾部延伸圈中內(nèi)容進(jìn)行搜索,通過(guò)w(wiki)尾部延伸圈中內(nèi)容查看在維基百科中的解釋
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com