超越按鈕 - 談手勢驅動的移動介面設計

發表於2013-06-04

作為設計師,你也許還記得蘋果剛剛釋出iPhone時的情景吧,我(英文原文作者)覺得那就像是昨天發生的事情一樣。他們將電容觸屏技術完整的運用到了這樣一個私人化的重要裝置當中,這是具有里程碑意義的時刻,同時也改變了整個業界的遊戲規則。

若干年之後的今天,連小孩子們都已經習慣了觸屏體驗,好像這是非常自然的事情,而家長們也會驚歎於他們的孩子可以如此迅速的學會使用觸屏裝置,包括手機和平板。這也體現出觸屏裝置及基於手勢的互動模式所具有的巨大潛力,它們讓移動體驗變的更加容易和有趣。

挑戰導航欄、標籤欄、工具欄與按鈕

蘋果的“人機介面設計規範(HIG)”及嚴格的審查機制對於移動應用質量的提升起到了巨大的推動作用,使很多的設計師與開發者瞭解了移動UI體系中的核心介面元素及互動模式的運用方式。

蘋果在HIG中給出了很多重要的、被廣泛遵循的設計建議,例如對於UITabBar和UINavigationBar這類導航控制元件的使用規範等等,都是我們一直以來所追隨的。實際上,如果你所設計的第一款iPhone應用當中不包含任何頂部導航欄或底部標籤欄、工具欄,那麼截圖發給我,我會請你喝啤酒(英文原文作者請客,不是我;想一起喝喝啤酒的兄弟姐妹們,我們們私聊 – 譯者C7210)。

一上一下兩個欄位的高度加起來差不多就是整個螢幕高度的20%了,在我看來這確實是個問題。對於螢幕規格如此有限的裝置來說,介面中的任何一個畫素都要用在重要的功能與內容上,寸土寸金的說法再合適不過了。

在這個不該缺乏創新精神的行業中,設計師們需要花些時間來思考和探索,試著設計出更具創意同時又更好用的介面。根據蘋果一直以來對於“不遵守遊戲規則者”的態度,我們也可以想象例如Clear和Rise這樣的應用在上架之前會浪費不少的時間用於等待。不過還好,它們最終還是上架了;雖然這兩款應用代表了那類在設計風格的突破上走的比較大膽和極端的產品,面向的使用者並不真正大眾,但不可否認的是,我們確實在它們當中看到了手勢驅動的介面設計所蘊藏的創意潛力。

超越按鈕 - 談手勢驅動的移動介面設計

打造手勢驅動的介面

最近的兩年多時間裡,我一直對手勢操作對移動體驗的提升方式保持關注,其間最大的體會就是,多數基於手勢的互動模式都非常符合直覺。我想,這也正是例如“下拉重新整理”這樣的操作可以迅速流行和普及的最重要的原因。下拉重新整理的方式最早出現於iPhone的Tweetie應用當中,給人的感覺超棒,以至於無數基於列表檢視的應用在一夜之間都開始效仿。

去冗存精

要打造手勢驅動的介面,你可以首先試著使應用主介面本身成為主要內容檢視,而非傳統意義上的內容入口。無需強迫自己接受“主介面必須始終呈現重要導航結構”的思路,導航本身完全可以擁有屬於自己的獨立容器。

將視野放大,想象出當前介面所處的2D或3D大環境,然後考慮獨立的導航容器可以被放置在這個環境空間中的什麼位置上——與主介面左右或上下相鄰?還是在主介面的“前面”或“後面”?通常,一個簡單的拖拽或橫掃的手勢就可以讓這樣的導航容器呈現出來。不管怎樣,這些都可以由你根據實際的產品情況來設計和定義。

舉個例子,我很喜歡Facebook與Gmail應用當中的側滑選單,非常好用。平時這些選單是隱藏的,你在介面上向右滑動就可以使其向右延展開來;這種模式不僅使介面在普通狀態時更乾淨,內容展示空間更大,而且要訪問選單時也只需通過很簡單的手勢操作便可實現,滑動手勢本身也無需精確定位在螢幕上的某個位置。

超越按鈕 - 談手勢驅動的移動介面設計

除了導航以外,你也可以通過這種思路呈現那些與當前內容相關的上下文功能。顯然,在每個內容條目中都塞進兩三個按鈕是非常討厭的事;按鈕看上去固然是很明確的可點選元素,但手勢在互動效率和趣味性方面則更勝一籌,你完全可以考慮通過簡單的點選、雙擊或長按來呈現更多針對當前內容的功能。例如在Instagram中,使用者可以通過雙擊來完成“贊”或“取消贊”的操作。

一個介面適用於多個情境

在設計一款非常具有創新色彩的移動應用時,很難準確的事先預測使用者的行為。與比利時廣播電臺合作期間,我們的團隊在視覺化音樂播放與即時新聞呈現之間的介面平衡性方面著實糾結了很久,因為有太多的上下文情境及引數需要考慮,所以很難達成一個在各方面都很完美的設計方案。於是我們決定,允許使用者通過一些簡單的手勢操作來根據自己的需要自由調整介面的平衡。

超越按鈕 - 談手勢驅動的移動介面設計

這種方式為應用增加了一個具有創意色彩的“情境維度”,拖拽手勢的運用使音樂與新聞並沒有成為互不相關的獨立區域,使用者可以隨時根據自己關注點的變化在兩者之間進行調整,並且不會使任何一類內容完全脫離上下文環境。

時間、維度與動畫效果

使用者點選一個互動物件時會觸發哪些行為的產生?你怎樣使這些行為變的視覺化?一個介面元素從無到有的呈現到檢視當中需要花多長時間?超過幾秒鐘沒有接收到來自使用者的互動行為時,某些元素是否需要自動隱藏?

基於觸屏及手勢操作的裝置改變了我們的互動設計理念,與過去只關注顯示器解析度規格和頁面呈現方式的設計習慣有所不同,如今我們需要更多的考慮時間、維度和動效等方面的問題。你也許已經發現了,通過靜態線框圖就可以完美展示產品互動模式的時代已經一去不返了;缺少觸控、長按、拖拽和滑動手勢的介入,你很難向他人完整的呈現設計方案在視覺及互動層面的表現。

例如PopInvision這樣的原型工具可以幫助我們為線框圖賦予生命,使我們能夠更好的通過互動原型來測試流程,精確定位使用者可能遇到操作問題的環節。移動應用絕不只是來來回回導航瀏覽那麼簡單,你需要儘早發現各種bug,還有會使使用者產生疑惑的潛在問題;此外,你也不想讓那些程式設計師首先發現併為你指出這些問題,對叭?

超越按鈕 - 談手勢驅動的移動介面設計

為了讓自己的設計工作更具創新色彩,甚至是實驗性,你要儘可能與客戶或需求方就交付物的問題進行交流溝通,讓他們知道傳統的靜態線框圖不再是他們真正需要的了。儘量展示可互動原型的價值,逐漸將這種形式轉變為一種標準。這固然會多花些時間,甚至導致預算方面的問題,但要打造出色的產品,這些還是划算的。

我有時甚至會為一些專案製作概念視訊,展示介面設計方向及互動模式;在某些時候,這種更酷的方式確實可以幫你爭取到更多的利益。

使用者的學習成本

在設計由手勢驅動的互動模式時,要記得一點:你每移除掉一個顯性的介面元素,使用者的學習成本就會上升一點。失去了視覺指引,使用者很有可能不知道怎樣與介面進行互動。有時你可以通過一些說明文字進行彌補,但最重要的是,要確保使用者在初次使用時能夠順利的上手。

很多應用會在初次載入時提供新手指南,對介面進行必要的說明。不過我個人比較贊同Max Rudberg的態度,即只對那些最重要的互動操作進行說明,而且不要一次解釋太多東西,因為如果這些內容太長太零散,使用者很容易選擇跳過。

為什麼不在使用者實際使用的過程中逐步解釋UI元素的作用呢?這種模式通常被叫做漸進呈現,也就是在具體行為過程中動態的提供與當前狀態最具關聯性的資訊。以YouTube的Capture應用為例,他們只會在使用者第一次使用拍攝功能時提示使用者通過調轉裝置方向來開始操作。

超越按鈕 - 談手勢驅動的移動介面設計

為UI元素新增解釋說明也不是唯一的引導方式。在Sparrow中,搜尋欄會預設呈現幾秒鐘,然後自動向上移出檢視。這就相當於告訴使用者可以通過下拉介面的方式找到搜尋欄,它只是在你用不著的時候藏起來了而已。

開始行動吧

iOS裝置曾經引領了一場人機互動的變革,僅僅5年之後,觸屏移動裝置就已經普及到我們身邊的各處了,而作為UX設計師,我們又將一點點的重新定義人們使用數字內容的方式。

我們需要探索和理解觸屏裝置及手勢操作的潛力,更多的關注時間、互動空間維度和動畫過渡效果。正像很多優秀應用產品所呈現出的,手勢操作可以使產品體驗更聚焦於內容本身,並帶來更多樂趣。有些手勢在剛剛投入到實際運用當中時顯得非常具有實驗性,甚至有些極端,但時間證明了它們是可以帶來上乘體驗的互動模式。

要更全面的瞭解各種手勢在更多平臺裝置中的運用方式,可以看看Luke Wroblewski的“Touch Gesture Reference Overview”一文,希望你能在裡面找到一些靈感並在自己的產品中有所實踐。另外記得,在條件允許的時候,不要害怕去走那額外的一英里,充分利用互動原型來挖掘和展示自己的設計方案。那麼,讓我們開始行動吧!

相關文章