“作為一名移動(dòng)產(chǎn)品的視覺(jué)或用戶(hù)體驗(yàn)設(shè)計(jì)師，你也許覺(jué)得Apple發(fā)布iPhone仿若昨日。iPhone無(wú)疑為最個(gè)人、最私密的設(shè)備開(kāi)啟了一個(gè)全新以觸摸屏為中心的交互時(shí)代，是當(dāng)之無(wú)愧的游戲規(guī)則創(chuàng)建者?！?/span>
作為一名移動(dòng)產(chǎn)品的視覺(jué)或用戶(hù)體驗(yàn)設(shè)計(jì)師，你也許覺(jué)得Apple發(fā)布iPhone仿若昨日。iPhone無(wú)疑為最個(gè)人、最私密的設(shè)備開(kāi)啟了一個(gè)全新以觸摸屏為中心的交互時(shí)代，是當(dāng)之無(wú)愧的游戲規(guī)則創(chuàng)建者。如今，孩子們?cè)谶@樣一個(gè)被觸摸屏包圍的環(huán)境下長(zhǎng)大似乎是一件自然而然的事情。家長(zhǎng)們驚奇地發(fā)現(xiàn)他們的孩子正在以難以置信的速度認(rèn)識(shí)、理解平板電腦和智能手機(jī)如何工作。這種現(xiàn)象表明了觸摸及手勢(shì)交互方式有著極大的潛力為移動(dòng)體驗(yàn)帶來(lái)便捷和更多趣味。

下圖是Facebook和Gmail的iOS應(yīng)用界面，各自的方式實(shí)現(xiàn)“側(cè)滑”菜單（譯者：這種形式最早是由Path iOS版引起流行的，目前可以在眾多導(dǎo)航復(fù)雜的應(yīng)用類(lèi)App中看到）。這種UI概念非常容易被理解和應(yīng)用，用戶(hù)在整個(gè)視圖中左右滑動(dòng)來(lái)顯露和隱藏左側(cè)的導(dǎo)航元素。這不僅使App看起來(lái)更加以?xún)?nèi)容為中心，同時(shí)可以使用戶(hù)在兩到三步的觸摸操作中任意進(jìn)入應(yīng)用的各項(xiàng)功能。很多擁有復(fù)雜導(dǎo)航層級(jí)的App遠(yuǎn)遠(yuǎn)不如此種形式方便和快捷！

除了用戶(hù)界面的導(dǎo)航，你的App可能也同時(shí)需要支持一些上下文情境中的交互操作。比如，在所有的內(nèi)容中同時(shí)加上兩到三個(gè)同樣的操作按鈕就往往會(huì)造成界面的干擾（譯者：在很多feeds列表中我們?？吹矫織lfeed下都有評(píng)論、轉(zhuǎn)發(fā)、點(diǎn)贊的按鈕）。當(dāng)然按鈕們非常的有用并且好用，但手勢(shì)在內(nèi)容的交互上更加直觀(guān)和有趣這點(diǎn)則非常有潛力。所以在重要的交互上使用類(lèi)似輕觸、雙擊、點(diǎn)按等簡(jiǎn)單手勢(shì)時(shí)不要猶豫。Instagram則使用簡(jiǎn)單的雙擊來(lái)執(zhí)行對(duì)內(nèi)容的一項(xiàng)重要操作——標(biāo)記對(duì)一條內(nèi)容的“喜歡”和“不喜歡”。 未來(lái)我如果看到其他App將這個(gè)快捷方式整合進(jìn)自己的應(yīng)用時(shí)也不會(huì)感到驚訝。

合適的交互界面
當(dāng)在設(shè)計(jì)一個(gè)有創(chuàng)意的移動(dòng)產(chǎn)品時(shí)，預(yù)測(cè)用戶(hù)行為是比較困難的。當(dāng)我們?cè)跒锽elgium的Public Radio項(xiàng)目做設(shè)計(jì)時(shí)，我的團(tuán)隊(duì)在為音樂(lè)可視化和實(shí)時(shí)新聞之間的視覺(jué)平衡爭(zhēng)論不已。因?yàn)槊總€(gè)用戶(hù)使用App的上下文場(chǎng)景不同，所以很難抉擇一個(gè)適用更廣的完美UI。于是最后我們決定整合進(jìn)一個(gè)簡(jiǎn)單的拖拽手勢(shì)來(lái)讓用自己決定如何顯示兩者之間的平衡，如下圖所示，用戶(hù)可以自己決定當(dāng)前的情境下更想關(guān)注在哪個(gè)內(nèi)容上面，音樂(lè)或者是新聞。而不是被動(dòng)接受一個(gè)由設(shè)計(jì)者為大多數(shù)情景妥協(xié)而做的設(shè)計(jì)。

考慮時(shí)間、維度和動(dòng)畫(huà)的因素
當(dāng)用戶(hù)點(diǎn)擊一個(gè)元素是會(huì)觸發(fā)什么反饋？如何用可視化的方式將這種反饋表達(dá)出來(lái)？一個(gè)特定的UI元素以多快的速度呈現(xiàn)到視圖上？是不是5秒中之后就自動(dòng)消失在屏幕上了？

這種基于觸摸屏的手勢(shì)驅(qū)動(dòng)的設(shè)備趨勢(shì)戲劇化地改變了我們?cè)O(shè)計(jì)交互的方式。原來(lái)我們更多的思考如何在電腦屏幕或者網(wǎng)頁(yè)上呈現(xiàn)，現(xiàn)在我們則需要更多的考慮時(shí)間、維度和動(dòng)畫(huà)。你可能會(huì)發(fā)現(xiàn)，用靜態(tài)的線(xiàn)框圖和屏幕截圖向同事和用戶(hù)展示和調(diào)整交互設(shè)計(jì)是很不容易的，因?yàn)橥y以全面地看到、理解和感受到點(diǎn)擊、按住、拖拽或者輕撫后會(huì)發(fā)生什么。

像Pop和Invision這樣的原型工具也許可以幫助建構(gòu)一個(gè)有生命的線(xiàn)框圖原型。他們對(duì)于用來(lái)測(cè)試應(yīng)用的流程和精確定位在哪個(gè)地方用戶(hù)可能會(huì)被卡主非常有用。除了簡(jiǎn)單的前進(jìn)和后退，你的應(yīng)用往往會(huì)有非常多的導(dǎo)航元素，所以就需要盡可能快的檢查和定位到界面錯(cuò)誤或潛在會(huì)讓用戶(hù)迷惑的地方。當(dāng)然我們不會(huì)希望這些錯(cuò)誤被開(kāi)發(fā)者指出來(lái)，對(duì)吧！

如果想要變得更加有創(chuàng)意和實(shí)驗(yàn)性，可以先和你的客戶(hù)溝通并向他們解釋傳統(tǒng)的線(xiàn)框圖并不是最佳的用戶(hù)體驗(yàn)設(shè)計(jì)交付物。并向他們展示可交互原型的價(jià)值，鼓勵(lì)他們?cè)谘邪l(fā)過(guò)程中使用它。也許會(huì)增加項(xiàng)目時(shí)間和預(yù)算，但是相信如果客戶(hù)們想要獲得更多，這些增加都是可以接受的。我常常同時(shí)為我的客戶(hù)提供應(yīng)用界面的概念視頻，因?yàn)樗麄冸m然清楚各種交互的細(xì)節(jié)，但是往往也需要想他們內(nèi)部的利益相關(guān)者展示一些更加性感的成果。

學(xué)習(xí)曲線(xiàn)
當(dāng)在設(shè)計(jì)基于手勢(shì)的交互時(shí)，每次都要注意當(dāng)你移除一些界面干擾時(shí)，學(xué)習(xí)曲線(xiàn)都會(huì)上升。當(dāng)沒(méi)有視覺(jué)提示時(shí)，用戶(hù)也會(huì)迷惑并且不知要如何與應(yīng)用進(jìn)行互動(dòng)。一點(diǎn)簡(jiǎn)單的注釋是可以接受的，好讓用戶(hù)應(yīng)該知道從哪開(kāi)始。很多App會(huì)在第一次打開(kāi)的時(shí)候呈現(xiàn)攻略或者教程，但我同意Max Rudberg的觀(guān)點(diǎn)——教程只需要解釋最為重要的交互——不要一次性解釋所有東西，因?yàn)槿绻葟?fù)雜又冗長(zhǎng)，用戶(hù)就會(huì)跳過(guò)它。

但是，為什么不挑戰(zhàn)自己，漸漸在應(yīng)用的使用過(guò)程中引入有創(chuàng)意的UI引導(dǎo)呢！這種引導(dǎo)模式常被稱(chēng)為漸進(jìn)式發(fā)現(xiàn)，它只顯示給用戶(hù)與當(dāng)前活動(dòng)有關(guān)信息。如下圖所示，舉例來(lái)說(shuō)，YouTube的Capture應(yīng)用只在用戶(hù)第一次打開(kāi)相機(jī)的時(shí)候會(huì)告訴用戶(hù)旋轉(zhuǎn)設(shè)備來(lái)取得一個(gè)橫向角度。

為用戶(hù)界面增加視覺(jué)指引并不是唯一的選擇。在Sparrow應(yīng)用中，搜索條會(huì)先從上方出現(xiàn)，幾秒鐘之后縮回去，像是一個(gè)微妙的形式再說(shuō)“我在等待被拉下來(lái)”。

討論到此，開(kāi)始行動(dòng)吧
iPhone曾為我們帶來(lái)了交互式溝通的革命，僅僅五年過(guò)后，觸摸屏幕設(shè)備就已經(jīng)無(wú)所不在了，而交互設(shè)計(jì)師們也正在重新定義人們與數(shù)字內(nèi)容的使用方式。

我們需要了解和探索基于觸摸和手勢(shì)的用戶(hù)界面的潛力，并且開(kāi)始更多的考慮時(shí)間、維度和動(dòng)畫(huà)。通過(guò)一些創(chuàng)新的應(yīng)用我們可以看到，手勢(shì)是一個(gè)可以讓App更加以?xún)?nèi)容為中心、原創(chuàng)和有趣的好方法，即使許多基于手勢(shì)的交互乍看之下可能過(guò)于的實(shí)驗(yàn)性而不是非常直觀(guān)。

如果要對(duì)適用于更多主流移動(dòng)平臺(tái)的手勢(shì)應(yīng)用機(jī)會(huì)有個(gè)較為完整的了解，可以查閱Like Wroblewski的觸摸手勢(shì)參考概述，希望在看完這篇文章之后能夠激發(fā)你探索基于手勢(shì)的人機(jī)交互模式，并且開(kāi)始你的移動(dòng)界面設(shè)計(jì)探險(xiǎn)。不要害怕走彎路，在交互式原型的幫助下，你可以重復(fù)嘗試來(lái)獲得最佳的體驗(yàn)。所以，我們討論到此，馬上開(kāi)始行動(dòng)吧！

來(lái)源：騰訊isux