作為一名移動產品的視覺或使用者體驗設計師,你也許覺得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應用設計成功上架並獲得好評則為原創帶來了一些光明。也許它們的介面看起來非常的極端,並且聚焦在概念超前的使用者或者探索者身上,它們還是為大家展現了手勢驅動的介面設計的無限創新潛力。下圖就是兩個基於下拉操作的介面設計。

riseclearapp_compr

手勢驅動的介面的巨大能量

兩年多以來,我一直在探索哪些手勢操作為移動應用的使用者體驗帶來價值。對我來說最為重要的判斷標準是互動必須能夠直觀地被感受到。這也正是為什麼像Loren Brichter的“下拉重新整理”(ISUX文章:有趣的下拉重新整理)在第一時間內可以成為行業標準。Brichter在iPhone版Tweetie裡的下拉重新整理設計,為基於列表內容呈現的應用創造了一種手勢操作而拋棄了原來的重新整理按鈕,直觀便捷地解決了重新整理的需求。

去除UI帶來的干擾

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

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

sideswipe_compr

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

合適的互動介面

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

radioplus_compr

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

當使用者點選一個元素是會觸發什麼反饋?如何用視覺化的方式將這種反饋表達出來?一個特定的UI元素以多快的速度呈現到檢視上?是不是5秒中之後就自動消失在螢幕上了?

這種基於觸控式螢幕的手勢驅動的裝置趨勢戲劇化地改變了我們設計互動的方式。原來我們更多的思考如何在電腦螢幕或者網頁上呈現,現在我們則需要更多的考慮時間、維度和動畫。你可能會發現,用靜態的線框圖和螢幕截圖向同事和使用者展示和調整互動設計是很不容易的,因為往往難以全面地看到、理解和感受到點選、按住、拖拽或者輕撫後會發生什麼。

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

invision_compr

如果想要變得更加有創意和實驗性,可以先和你的客戶溝通並向他們解釋傳統的線框圖並不是最佳的使用者體驗設計交付物。並向他們展示可互動原型的價值,鼓勵他們在研發過程中使用它。也許會增加專案時間和預算,但是相信如果客戶們想要獲得更多,這些增加都是可以接受的。我常常同時為我的客戶提供應用介面的概念視訊,因為他們雖然清楚各種互動的細節,但是往往也需要想他們內部的利益相關者展示一些更加性感的成果。

學習曲線

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

但是,為什麼不挑戰自己,漸漸在應用的使用過程中引入有創意的UI引導呢!這種引導模式常被稱為漸進式發現,它只顯示給使用者與當前活動有關資訊。如下圖所示,舉例來說,YouTube的Capture應用只在使用者第一次開啟相機的時候會告訴使用者旋轉裝置來取得一個橫向角度。

walkthroughdisclosure_compr

為使用者介面增加視覺指引並不是唯一的選擇。在Sparrow應用中,搜尋條會先從上方出現,幾秒鐘之後縮回去,像是一個微妙的形式再說“我在等待被拉下來”。

討論到此,開始行動吧

iPhone曾為我們帶來了互動式溝通的革命,僅僅五年過後,觸控螢幕裝置就已經無所不在了,而互動設計師們也正在重新定義人們與數字內容的使用方式。

我們需要了解和探索基於觸控和手勢的使用者介面的潛力,並且開始更多的考慮時間、維度和動畫。通過一些創新的應用我們可以看到,手勢是一個可以讓App更加以內容為中心、原創和有趣的好方法,即使許多基於手勢的互動乍看之下可能過於的實驗性而不是非常直觀。

如果要對適用於更多主流移動平臺的手勢應用機會有個較為完整的瞭解,可以查閱Like Wroblewski的觸控手勢參考概述,希望在看完這篇文章之後能夠激發你探索基於手勢的人機互動模式,並且開始你的移動介面設計探險。不要害怕走彎路,在互動式原型的幫助下,你可以重複嘗試來獲得最佳的體驗。所以,我們討論到此,馬上開始行動吧!

本文由 騰訊ISU編譯