實戰(zhàn)：移動app交互設(shè)計 如何把“手勢流”裝進(jìn)手機(jī)

實戰(zhàn)：移動app交互設(shè)計如何把“手勢流”裝進(jìn)手機(jī)

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