4
| 本文作者： 賀亮 | 2015-11-12 15:43 |
在智能交互中，手勢(shì)已成為新的“點(diǎn)擊”。
現(xiàn)在每次打開(kāi)手機(jī)里的app、游戲時(shí)，都需要用到點(diǎn)擊、拖、拉等動(dòng)作。單看點(diǎn)擊的話，設(shè)計(jì)師與開(kāi)發(fā)者只需要考慮用戶點(diǎn)擊屏幕哪里體驗(yàn)更好。但是手勢(shì)不同，手勢(shì)操作還需考慮什么動(dòng)作，屏幕落點(diǎn)在哪里，用戶能否直觀地看到并使用。
手勢(shì)的設(shè)計(jì)能讓界面看起來(lái)更炫，因?yàn)橐幌盗袆?dòng)作都潛藏在界面內(nèi)部。手勢(shì)減少了用戶操作的繁瑣度，同時(shí)可以和不同規(guī)格的設(shè)備自由交互。
基于此，我們來(lái)一起看一些現(xiàn)在很流行的app中都應(yīng)用了哪些“手勢(shì)流”。
手勢(shì)操作是用戶通過(guò)手部運(yùn)動(dòng)，在界面內(nèi)控制設(shè)備的操作過(guò)程。就像UXPin發(fā)布的2015-2016移動(dòng)設(shè)計(jì)趨勢(shì)中描述的那樣，手勢(shì)操作是手部運(yùn)動(dòng)，但也包括搖晃、傾斜設(shè)備等操作。
由 Craig Villamor等人設(shè)計(jì)的手勢(shì)的特定含義詳細(xì)地描述了十幾個(gè)動(dòng)作，并說(shuō)明它們是如何運(yùn)作的。這些手勢(shì)是由執(zhí)行特定任務(wù)和常用移動(dòng)設(shè)備的用戶行為設(shè)置出來(lái)。
這些是用戶最常用的姿勢(shì)
單擊：輕碰界面
雙擊：兩次快速點(diǎn)擊界面
拖：手不離屏幕保持移動(dòng)
變形：手不離屏幕用兩個(gè)手指改變界面大小
滑動(dòng)：快速移動(dòng)
彈開(kāi)：快速卷動(dòng)
每個(gè)動(dòng)作都需要在用戶可操作的范圍內(nèi)?，F(xiàn)在也沒(méi)必要擔(dān)心手勢(shì)會(huì)有什么問(wèn)題，因?yàn)殡S著大屏手機(jī)銷(xiāo)量越來(lái)越大，人機(jī)互動(dòng)會(huì)越來(lái)越普遍。不過(guò)在設(shè)計(jì)中要注意的一點(diǎn)就是，拇指的位置，這里被叫做“拇指區(qū)”。很多時(shí)候我們單手拿手機(jī)時(shí)都會(huì)用拇指滑動(dòng)屏幕，拇指是操作手機(jī)時(shí)最常見(jiàn)的手指。所以，拇指能在手機(jī)上碰到多大區(qū)域也要考慮清楚。圖標(biāo)的規(guī)格也很重要。每個(gè)圖標(biāo)都需要設(shè)計(jì)足夠大，以保證多大手指的人都可以在界面上自由操作。
基于該原則，圖標(biāo)最好設(shè)計(jì)成寬高44點(diǎn)。屏幕更大時(shí)，圖標(biāo)擴(kuò)大至70點(diǎn)，這樣可以使手指更容易點(diǎn)擊。
在移動(dòng)設(shè)計(jì)中，手勢(shì)和動(dòng)畫(huà)一定是息息相關(guān)的。動(dòng)畫(huà)是用戶在完成整個(gè)動(dòng)作之前，與app交互最直接的信號(hào)。
動(dòng)畫(huà)的5個(gè)最基本的功能：
1動(dòng)畫(huà)通知
2信息披露
3突出內(nèi)容
4折疊形式和菜單
5卷動(dòng)
回想一下每天你在操作手機(jī)過(guò)程中會(huì)遇到多少這樣的動(dòng)畫(huà)。以Dark Sky天氣app為例。
除了預(yù)報(bào)天氣冷暖，Dark Sky在整個(gè)app的設(shè)計(jì)中都用到手勢(shì)和動(dòng)畫(huà)，讓用戶在操作中有更好的用戶體驗(yàn)。
動(dòng)畫(huà)和手勢(shì)操作是密不可分的。沒(méi)有動(dòng)畫(huà)，用戶就不能判定自己是否完成指令。最好把手勢(shì)作為整個(gè)操作中的一環(huán)，而非單獨(dú)設(shè)計(jì)。
有了這些，我們從手勢(shì)操作中獲得的反饋會(huì)不太一樣。
手勢(shì)操作對(duì)手機(jī)來(lái)說(shuō)是非常重要的平臺(tái)，像蘋(píng)果和Andriod 的研發(fā)者都在嘗試創(chuàng)新。
2015年最新手機(jī)iPhone 6s 引入新技術(shù)，3D Touch。從3D Touch開(kāi)始，手勢(shì)操控升至新級(jí)別。設(shè)備會(huì)辨別屏幕所受的壓力，然后發(fā)起相應(yīng)的指令。這種觸控的不同點(diǎn)在于分層接口。在你進(jìn)入下一層之前，壓力會(huì)提示預(yù)覽動(dòng)作。
地圖界面
在上圖蘋(píng)果手機(jī)的例子可見(jiàn)，有人通過(guò)短信發(fā)給你一個(gè)地址，輕輕點(diǎn)擊連接地址就彈出來(lái)了。當(dāng)你把手移開(kāi)時(shí)，彈框就消失了。如果你更用力的話，地圖上所有地點(diǎn)鏈接都會(huì)打開(kāi)，時(shí)甚至有被撞了一下的反應(yīng)。這是一個(gè)關(guān)于在單一的觸控頁(yè)面下，元素在跨應(yīng)用程序上如何實(shí)現(xiàn)無(wú)縫對(duì)接。
此外，在蘋(píng)果的用戶界面設(shè)計(jì)準(zhǔn)則上，介紹了一些觸控并且如何使用。
避免將不同的動(dòng)作和標(biāo)準(zhǔn)的手勢(shì)聯(lián)系在一起
避免創(chuàng)建自定義的手勢(shì)，調(diào)用相同的動(dòng)作作為標(biāo)準(zhǔn)手勢(shì)
使用多種手勢(shì)作為快捷方式加快完成任務(wù)，而非唯一方式
避免定義新的手勢(shì)，除非你的應(yīng)用程序是一個(gè)游戲
在正常環(huán)境中，考慮使用多手指操作
這會(huì)改變我們與iPhone手機(jī)的交互方式，當(dāng)然用戶肯定需要一定的調(diào)整期。所以當(dāng)設(shè)計(jì)3DTouch時(shí)最好考慮到這點(diǎn)，何時(shí)應(yīng)用3DTouch更好。因?yàn)橄嗤氖謩?shì)對(duì)舊版手機(jī)來(lái)說(shuō)可能就無(wú)效了。
當(dāng)蘋(píng)果從不同的角度提示我們?nèi)绾斡|控手機(jī)時(shí)，谷歌開(kāi)始玩起概念游戲。操作和運(yùn)動(dòng)有何不同？在不斷發(fā)展的材料設(shè)計(jì)文檔中，谷歌精準(zhǔn)描繪出這些動(dòng)作如何工作。
為簡(jiǎn)化用法，使用指南創(chuàng)造出一系列的運(yùn)動(dòng)規(guī)則。手勢(shì)共有的缺點(diǎn)在于一個(gè)動(dòng)作可能引起多重反應(yīng)。本文介紹了如何把手勢(shì)當(dāng)做觸發(fā)器以使你可以做很多事。
當(dāng)提到手勢(shì)操作時(shí)，材料設(shè)計(jì)一般包括拖、刷、搖。
拖是一個(gè)控制力更強(qiáng)的手勢(shì)，與觸摸目標(biāo)結(jié)合使用
刷是一個(gè)快速的手勢(shì)，不需要觸摸目標(biāo)
搖動(dòng)并不需要觸碰
這些動(dòng)作口令都是將速度看做唯一準(zhǔn)則，憑借速度的優(yōu)勢(shì)，這些動(dòng)作可能更容易被用戶使用。
它是這樣打破的：
拖仍然是和某個(gè)元素保持接觸，但是改變手勢(shì)方向后，可以撤回
快速移動(dòng)刪除，防止被撤銷(xiāo)
在結(jié)束速度的基礎(chǔ)上，滑動(dòng)變成了一個(gè)手指的一個(gè)動(dòng)作，該元素是否越過(guò)了一個(gè)動(dòng)作可以被撤消
越來(lái)越多手勢(shì)開(kāi)始打破“一次動(dòng)作一次反饋”的舊模式，多個(gè)手勢(shì)一起。結(jié)果就是復(fù)雜的手勢(shì)。這個(gè)技術(shù)是在游戲中最常見(jiàn)的，而且已開(kāi)始擴(kuò)展到其他app中。
復(fù)雜手勢(shì)需要三級(jí)動(dòng)作完成任務(wù)。
開(kāi)始：最開(kāi)始的接觸，例如點(diǎn)、壓
延續(xù)：在一個(gè)特定的序列中應(yīng)用多個(gè)手勢(shì)，如次在屏幕上使用拖拽操作看看會(huì)發(fā)生什么
終止：結(jié)束與屏幕接觸的手勢(shì)結(jié)束
試想一下最流行的游戲，例如憤怒的小鳥(niǎo)。在用小鳥(niǎo)摧毀目標(biāo)的過(guò)程中，你必須完成如下動(dòng)作：
點(diǎn)擊，抓住并在屏幕上沿著正確的軌跡，發(fā)射小鳥(niǎo)
松手，小鳥(niǎo)飛向目標(biāo)
動(dòng)作縮略圖
聰明的觸控不僅僅完成一個(gè)任務(wù)或者動(dòng)作，正如交互設(shè)計(jì)最佳體驗(yàn)里寫(xiě)到的，他們應(yīng)該讓用戶開(kāi)心，也可以做一個(gè)教學(xué)工具。
最好的手勢(shì)交互需要考慮用戶如何與設(shè)備接觸
高舉一只手
高舉兩只手
雙手水平
根本不用手（......）
你知道那些用戶使用你的app時(shí)如何操作嗎？需要進(jìn)行用戶教育嗎？這聽(tīng)起來(lái)非常重要，有時(shí)同一個(gè)動(dòng)作在不同app會(huì)有不同反應(yīng)。
對(duì)比一下Soundcloud和Clear。二者使用同樣的手勢(shì)操作，但是app反饋大相徑庭。
Soundcloud里，點(diǎn)擊一下就能打開(kāi)歌單或者播放歌曲；而在Clear，點(diǎn)擊后是從任務(wù)列表中找到你想聽(tīng)的歌。
在完成動(dòng)作時(shí)用到的點(diǎn)擊和刷新動(dòng)作的范疇是一致的，但是特殊觸控就會(huì)有不同而含義。
最關(guān)鍵的是，用戶發(fā)生的行為因?yàn)楹?jiǎn)單的視覺(jué)藝術(shù)便可無(wú)縫對(duì)接。多虧了它的普及，基于接口的Soundcloud一經(jīng)出現(xiàn)就很容易被接受，因此也不需向用戶解釋點(diǎn)擊和滑動(dòng)的區(qū)別。Clear的非常規(guī)矩形的模塊化設(shè)計(jì)，暗示每個(gè)矩形在刷的時(shí)候好像一張紙。
最后，切記手勢(shì)操作不要承擔(dān)太多意義。
其實(shí)，手勢(shì)操作還可以觸及到更本質(zhì)的東西。大多數(shù)的手勢(shì)操作是以指尖為基礎(chǔ)，如果加上身體的使用，觸控的定義會(huì)涉及更廣。大多數(shù)的觸控都是停留在靜態(tài)設(shè)計(jì)層面，隨著視頻和動(dòng)畫(huà)的不斷使用，手勢(shì)操作也可用到更多動(dòng)畫(huà)。
以Haze天氣app為例。隨著溫度變化，app會(huì)顯示不同的圖層顏色，效果非常震撼。
手勢(shì)操作也可以讓不同app之間連接。例如，不同應(yīng)用程序之間的拖放操作。
Workflow是一款iOS系統(tǒng)的app，可以在不同應(yīng)用程序之間拖放。這種自動(dòng)化工具很聰明，完全植根于動(dòng)畫(huà)程序。
當(dāng)提到和衣物的交互時(shí),觸控將擴(kuò)大到物理事件的范疇。比如擺動(dòng)手臂發(fā)送文本或搖動(dòng)手腕就能給語(yǔ)音信箱留言。腦洞大開(kāi)......
現(xiàn)在設(shè)計(jì)一款不用手勢(shì)操作的手機(jī)app有點(diǎn)自尋死路的即視感。手勢(shì)操作這一小步，是手機(jī)設(shè)計(jì)進(jìn)程中邁出的一大步。也會(huì)對(duì)日后設(shè)計(jì)者和用戶產(chǎn)生更大的影響。
當(dāng)然，這個(gè)秘密與任何其他設(shè)計(jì)方案的思路是一樣。新的手勢(shì)操作一定是用戶憑直覺(jué)就能接受的，或者稍有提示用戶就能明白，而非復(fù)雜繁瑣。如果做得好，新的即將被大眾接受的app就會(huì)很快出現(xiàn)。
via TNW News
相關(guān)閱讀：
Dashboard：一款iOS app的設(shè)計(jì)開(kāi)發(fā)過(guò)程
6個(gè)應(yīng)用告訴你——什么會(huì)是蘋(píng)果表上的設(shè)計(jì)風(fēng)尚
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
