起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識擁抱手勢驅動的界面設計
“作為一名移動產品的視覺或用戶體驗設計師，你也許覺得Apple發布iPhone仿若昨日。iPhone無疑為最個人、最私密的設備開啟了一個全新以觸摸屏為中心的交互時代，是當之無愧的游戲規則創建者?！?/span>
作為一名移動產品的視覺或用戶體驗設計師，你也許覺得Apple發布iPhone仿若昨日。iPhone無疑為最個人、最私密的設備開啟了一個全新以觸摸屏為中心的交互時代，是當之無愧的游戲規則創建者。如今，孩子們在這樣一個被觸摸屏包圍的環境下長大似乎是一件自然而然的事情。家長們驚奇地發現他們的孩子正在以難以置信的速度認識、理解平板電腦和智能手機如何工作。這種現象表明了觸摸及手勢交互方式有著極大的潛力為移動體驗帶來便捷和更多趣味。
挑戰Bars和Buttons
Apple的用戶界面設計指南（Human Interface Guidelines）和App程序審核委員會（Apple’s App Review Board）對移動應用程序質量有著非常大的影響。它們幫助了非常多的設計師和開發者理解核心的移動用戶界面元素和交互模式。舉例來說，如何使用UITabBar和UINavigationBar控件要數Apple最基礎最著名的設計指導了，我們都在實際設計中遵循過類似的設計指南。事實上，如果你設計的第一個iPhone應用如果沒有使用任何頂部或底部的bar元素，請截圖并與我取得聯系，我可以請你喝酒并且開心地宣布你比你存在的時代要超前的多。
我對于頂部和底部的bar的最大的意見是他們幾乎占掉了屏幕的20%左右的面積（對iphone5以前的手機來說）。在如此小的“畫布”上做設計，我們應該用盡每一個可能的像素來聚焦在內容表達上，因為畢竟最終，內容才是真正重要的部分。
在這個充滿了革新的行業里，移動設計師們需要更多的時間來探索如何設計更加有創意和更原創的界面。即使Apple對“出格思考”的App持著令人沮喪的排斥態度，類似Clear和Rise這樣的充滿實驗性質的UI和UX應用設計成功上架并獲得好評則為原創帶來了一些光明。也許它們的界面看起來非常的極端，并且聚焦在概念超前的用戶或者探索者身上，它們還是為大家展現了手勢驅動的界面設計的無限創新潛力。下圖就是兩個基于下拉操作的界面設計。
手勢驅動的界面的巨大能量
兩年多以來，我一直在探索哪些手勢操作為移動應用的用戶體驗帶來價值。對我來說最為重要的判斷標準是交互必須能夠直觀地被感受到。這也正是為什么像Loren Brichter的“下拉刷新”（ISUX文章：有趣的下拉刷新）在第一時間內可以成為行業標準。Brichter在iPhone版Tweetie里的下拉刷新設計，為基于列表內容呈現的應用創造了一種手勢操作而拋棄了原來的刷新按鈕，直觀便捷地解決了刷新的需求。
去除UI帶來的干擾
一個開始設計手勢驅動界面的好方法就是將你的主要屏幕只用來作為核心內容的呈現區。不用覺得有義務要得把重要的導航元素在主屏幕上一直呈現。相反地，考慮導航自己的位置和空間。這里我們可以考慮一個虛擬的2D或者3D的新維度，可以將導航放置在主體下方、之后、后面、前面、頂部或者隱藏在頭部。這時，拖動或者輕撫的手勢操作就是一個喚起這些UI元素的非常好的方式了。當然，在App中你可以自由的定義和設計這些交互方式。
下圖是Facebook和Gmail的iOS應用界面，各自的方式實現“側滑”菜單（譯者：這種形式最早是由Path iOS版引起流行的，目前可以在眾多導航復雜的應用類App中看到）。這種UI概念非常容易被理解和應用，用戶在整個視圖中左右滑動來顯露和隱藏左側的導航元素。這不僅使App看起來更加以內容為中心，同時可以使用戶在兩到三步的觸摸操作中任意進入應用的各項功能。很多擁有復雜導航層級的App遠遠不如此種形式方便和快捷！
除了用戶界面的導航，你的App可能也同時需要支持一些上下文情境中的交互操作。比如，在所有的內容中同時加上兩到三個同樣的操作按鈕就往往會造成界面的干擾（譯者：在很多feeds列表中我們?？吹矫織lfeed下都有評論、轉發、點贊的按鈕）。當然按鈕們非常的有用并且好用，但手勢在內容的交互上更加直觀和有趣這點則非常有潛力。所以在重要的交互上使用類似輕觸、雙擊、點按等簡單手勢時不要猶豫。Instagram則使用簡單的雙擊來執行對內容的一項重要操作——標記對一條內容的“喜歡”和“不喜歡”。 未來我如果看到其他App將這個快捷方式整合進自己的應用時也不會感到驚訝。
合適的交互界面
當在設計一個有創意的移動產品時，預測用戶行為是比較困難的。當我們在為Belgium的Public Radio項目做設計時，我的團隊在為音樂可視化和實時新聞之間的視覺平衡爭論不已。因為每個用戶使用App的上下文場景不同，所以很難抉擇一個適用更廣的完美UI。于是最后我們決定整合進一個簡單的拖拽手勢來讓用自己決定如何顯示兩者之間的平衡，如下圖所示，用戶可以自己決定當前的情境下更想關注在哪個內容上面，音樂或者是新聞。而不是被動接受一個由設計者為大多數情景妥協而做的設計。
考慮時間、維度和動畫的因素
當用戶點擊一個元素是會觸發什么反饋？如何用可視化的方式將這種反饋表達出來？一個特定的UI元素以多快的速度呈現到視圖上？是不是5秒中之后就自動消失在屏幕上了？
這種基于觸摸屏的手勢驅動的設備趨勢戲劇化地改變了我們設計交互的方式。原來我們更多的思考如何在電腦屏幕或者網頁上呈現，現在我們則需要更多的考慮時間、維度和動畫。你可能會發現，用靜態的線框圖和屏幕截圖向同事和用戶展示和調整交互設計是很不容易的，因為往往難以全面地看到、理解和感受到點擊、按住、拖拽或者輕撫后會發生什么。
像Pop和Invision這樣的原型工具也許可以幫助建構一個有生命的線框圖原型。他們對于用來測試應用的流程和精確定位在哪個地方用戶可能會被卡主非常有用。除了簡單的前進和后退，你的應用往往會有非常多的導航元素，所以就需要盡可能快的檢查和定位到界面錯誤或潛在會讓用戶迷惑的地方。當然我們不會希望這些錯誤被開發者指出來，對吧！
如果想要變得更加有創意和實驗性，可以先和你的客戶溝通并向他們解釋傳統的線框圖并不是最佳的用戶體驗設計交付物。并向他們展示可交互原型的價值，鼓勵他們在研發過程中使用它。也許會增加項目時間和預算，但是相信如果客戶們想要獲得更多，這些增加都是可以接受的。我常常同時為我的客戶提供應用界面的概念視頻，因為他們雖然清楚各種交互的細節，但是往往也需要想他們內部的利益相關者展示一些更加性感的成果。
學習曲線
當在設計基于手勢的交互時，每次都要注意當你移除一些界面干擾時，學習曲線都會上升。當沒有視覺提示時，用戶也會迷惑并且不知要如何與應用進行互動。一點簡單的注釋是可以接受的，好讓用戶應該知道從哪開始。很多App會在第一次打開的時候呈現攻略或者教程，但我同意Max Rudberg的觀點——教程只需要解釋最為重要的交互——不要一次性解釋所有東西，因為如果既復雜又冗長，用戶就會跳過它。
但是，為什么不挑戰自己，漸漸在應用的使用過程中引入有創意的UI引導呢！這種引導模式常被稱為漸進式發現，它只顯示給用戶與當前活動有關信息。如下圖所示，舉例來說，YouTube的Capture應用只在用戶第一次打開相機的時候會告訴用戶旋轉設備來取得一個橫向角度。
為用戶界面增加視覺指引并不是唯一的選擇。在Sparrow應用中，搜索條會先從上方出現，幾秒鐘之后縮回去，像是一個微妙的形式再說“我在等待被拉下來”。
討論到此，開始行動吧
iPhone曾為我們帶來了交互式溝通的革命，僅僅五年過后，觸摸屏幕設備就已經無所不在了，而交互設計師們也正在重新定義人們與數字內容的使用方式。
我們需要了解和探索基于觸摸和手勢的用戶界面的潛力，并且開始更多的考慮時間、維度和動畫。通過一些創新的應用我們可以看到，手勢是一個可以讓App更加以內容為中心、原創和有趣的好方法，即使許多基于手勢的交互乍看之下可能過于的實驗性而不是非常直觀。
如果要對適用于更多主流移動平臺的手勢應用機會有個較為完整的了解，可以查閱Like Wroblewski的觸摸手勢參考概述，希望在看完這篇文章之后能夠激發你探索基于手勢的人機交互模式，并且開始你的移動界面設計探險。不要害怕走彎路，在交互式原型的幫助下，你可以重復嘗試來獲得最佳的體驗。所以，我們討論到此，馬上開始行動吧！
來源：騰訊isux
- 目前還沒評論，等你發揮！
