作為一名移動(dòng)產(chǎn)品的視覺或用戶體驗(yàn)設(shè)計(jì)師，你也許覺得Apple發(fā)布iPhone仿若昨日。iPhone無疑為最個(gè)人、最私密的設(shè)備開啟了一個(gè)全新以觸摸屏為中心的交互時(shí)代，是當(dāng)之無愧的游戲規(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)帶來便捷和更多趣味。

挑戰(zhàn)Bars和Buttons

Apple的用戶界面設(shè)計(jì)指南（Human Interface Guidelines）和App程序?qū)徍宋瘑T會(huì)（Apple’s App Review Board）對(duì)移動(dòng)應(yīng)用程序質(zhì)量有著非常大的影響。它們幫助了非常多的設(shè)計(jì)師和開發(fā)者理解核心的移動(dòng)用戶界面元素和交互模式。舉例來說，如何使用UITabBar和UINavigationBar控件要數(shù)Apple最基礎(chǔ)最著名的設(shè)計(jì)指導(dǎo)了，我們都在實(shí)際設(shè)計(jì)中遵循過類似的設(shè)計(jì)指南。

事實(shí)上，如果你設(shè)計(jì)的第一個(gè)iPhone應(yīng)用如果沒有使用任何頂部或底部的bar元素，請(qǐng)截圖并與我取得聯(lián)系，我可以請(qǐng)你喝酒并且開心地宣布你比你存在的時(shí)代要超前的多。

我對(duì)于頂部和底部的bar的最大的意見是他們幾乎占掉了屏幕的20%左右的面積（對(duì)iphone5以前的手機(jī)來說）。在如此小的“畫布”上做設(shè)計(jì)，我們應(yīng)該用盡每一個(gè)可能的像素來聚焦在內(nèi)容表達(dá)上，因?yàn)楫吘棺罱K，內(nèi)容才是真正重要的部分。

在這個(gè)充滿了革新的行業(yè)里，移動(dòng)設(shè)計(jì)師們需要更多的時(shí)間來探索如何設(shè)計(jì)更加有創(chuàng)意和更原創(chuàng)的界面。即使Apple對(duì)“出格思考”的App持著令人沮喪的排斥態(tài)度，類似Clear和Rise這樣的充滿實(shí)驗(yàn)性質(zhì)的UI和UX應(yīng)用設(shè)計(jì)成功上架并獲得好評(píng)則為原創(chuàng)帶來了一些光明。也許它們的界面看起來非常的極端，并且聚焦在概念超前的用戶或者探索者身上，它們還是為大家展現(xiàn)了手勢(shì)驅(qū)動(dòng)的界面設(shè)計(jì)的無限創(chuàng)新潛力。下圖就是兩個(gè)基于下拉操作的界面設(shè)計(jì)。

派點(diǎn)互動(dòng)|手機(jī)網(wǎng)站設(shè)計(jì)|網(wǎng)站設(shè)計(jì)|廣州網(wǎng)站設(shè)計(jì)

手勢(shì)驅(qū)動(dòng)的界面的巨大能量

兩年多以來，我一直在探索哪些手勢(shì)操作為移動(dòng)應(yīng)用的用戶體驗(yàn)帶來價(jià)值。對(duì)我來說最為重要的判斷標(biāo)準(zhǔn)是交互必須能夠直觀地被感受到。這也正是為什么像Loren Brichter的“下拉刷新”（ISUX文章：有趣的下拉刷新）在第一時(shí)間內(nèi)可以成為行業(yè)標(biāo)準(zhǔn)。Brichter在iPhone版Tweetie里的下拉刷新設(shè)計(jì)，為基于列表內(nèi)容呈現(xiàn)的應(yīng)用創(chuàng)造了一種手勢(shì)操作而拋棄了原來的刷新按鈕，直觀便捷地解決了刷新的需求。

去除UI帶來的干擾

一個(gè)開始設(shè)計(jì)手勢(shì)驅(qū)動(dòng)界面的好方法就是將你的主要屏幕只用來作為核心內(nèi)容的呈現(xiàn)區(qū)。不用覺得有義務(wù)要得把重要的導(dǎo)航元素在主屏幕上一直呈現(xiàn)。相反地，考慮導(dǎo)航自己的位置和空間。這里我們可以考慮一個(gè)虛擬的2D或者3D的新維度，可以將導(dǎo)航放置在主體下方、之后、后面、前面、頂部或者隱藏在頭部。這時(shí)，拖動(dòng)或者輕撫的手勢(shì)操作就是一個(gè)喚起這些UI元素的非常好的方式了。當(dāng)然，在App中你可以自由的定義和設(shè)計(jì)這些交互方式。

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

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

合適的交互界面

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

考慮時(shí)間、維度和動(dòng)畫的因素

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

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

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

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

學(xué)習(xí)曲線

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

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

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