作為一名移動產(chǎn)品的視覺或用戶體驗設(shè)計師，你也許覺得Apple發(fā)布iPhone仿若昨日。iPhone無疑為最個人、最私密的設(shè)備開啟了一個全新以觸摸屏為中心的交互時代，是當之無愧的游戲規(guī)則創(chuàng)建者。

如今，孩子們在這樣一個被觸摸屏包圍的環(huán)境下長大似乎是一件自然而然的事情。家長們驚奇地發(fā)現(xiàn)他們的孩子正在以難以置信的速度認識、理解平板電腦和智能手機如何工作。這種現(xiàn)象表明了觸摸及手勢交互方式有著極大的潛力為移動體驗帶來便捷和更多趣味。

挑戰(zhàn)Bars和Buttons

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

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

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

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

派點互動|手機網(wǎng)站設(shè)計|網(wǎng)站設(shè)計|廣州網(wǎng)站設(shè)計

手勢驅(qū)動的界面的巨大能量

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

去除UI帶來的干擾

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

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

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

合適的交互界面

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

考慮時間、維度和動畫的因素

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

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

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

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

學習曲線

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

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

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