談導航欄返回按鈕的替代方案

發表於2013-07-09

我(英文原文作者)愛iPhone5,那多出來的640×176畫素的空間非常有用。不過我時常會在點選那個最重要的按鈕時遇到麻煩,是的,就是返回按鈕。UX設計當中有一條規則,如果某個功能是很常用的,那麼它應該被放在最容易點選到的位置上。

49%的移動使用者在使用手機時是單手操作的,這就意味著每兩個使用者當中就有一個會每天多次通過單手來點選返回按鈕;算起來的話這可是數以億計的點選率。如果手機尺寸略大,那麼你將不得不使用另一隻手來點選返回按鈕。我猜這也是很多安卓手機會在左下角放置硬體返回按鈕的原因之一;不過這種解決方案也不是最優的,因為在安卓平臺中,應用內的“返回上一級”按鈕與硬體返回按鈕的功能還是有所區別的。

通過手勢來解決問題

要解決返回按鈕的問題,最簡單的方案就是使用手勢。在使用者已經熟悉了應用操作方式的前提下,手勢還是很有效的。另外,將手勢操作作為視覺化按鈕的一種補充形式也是不錯的做法。

談導航欄返回按鈕的替代方案

讓我有些驚訝的是,在試用了無數個應用之後,我發現市面上已經有很多產品在通過這種方法解決返回按鈕的問題了。當然,沒有哪種解決方案能適用於所有的情況,但至少這是個開始。我個人真心希望設計師們能夠逐漸找到更多更有創意的方案。

拋甩(toss)

“拋甩”是對我們與真實物體之間互動方式的一種隱喻,使用這種模式,你可以很輕鬆地將當前的活動介面“甩開”。例如在Letterpress中,使用者可以通過向下快速滑動的手勢將彈出提示甩走,有點意思。

談導航欄返回按鈕的替代方案

在Facebook裡,當你全屏檢視一張圖片時,可以將圖片向上或向下甩開,回到之前的介面當中。

談導航欄返回按鈕的替代方案

橫向滑動

新介面從螢幕右側向左滑入檢視,這是iOS當中的標準動效。相應的,我們也可以通過向相反的方向執行輕掃來導航回之前的介面,例如你可以在Pinterest當中通過向右輕掃的手勢將大圖介面向右移走,回到之前的介面。

談導航欄返回按鈕的替代方案

類似的,在Flipboard裡,你也可以在某主題下的內容介面中通過向右輕掃回到主介面。

談導航欄返回按鈕的替代方案

在iBooks中,並沒有明確的視覺指引告訴你可以通過左右輕掃的手勢來開啟下一頁或回到上一頁。不過除了輕掃以外,點選螢幕的左右兩部分也能起到同樣的導航作用,這樣,由於缺乏視覺指引所導致的導航功能不可發現的概率就大大降低了。而且由於翻頁效果使用了強有力的隱喻,所以一旦使用者通過點選螢幕完成了一次翻頁操作之後,很容易根據漂亮的翻頁動效來發現左右輕掃的導航功能。

談導航欄返回按鈕的替代方案

縱向拖動

與橫向滑動的初衷相似,如果某些介面是從螢幕底部或頂部向上滑入檢視的,那麼可以嘗試使用縱向拖動的方式來進行後退導航。Day One應用就打造了這樣一套屬於他們自己的“下拉重新整理”,使使用者可以在縱向的操作中直接進入之前或之後的一篇內容。

談導航欄返回按鈕的替代方案

在Clear裡,你可以通過向下長拖動來回退到上一級列表,而向下短拖動則用來建立新的事項。

談導航欄返回按鈕的替代方案

而Haze允許使用者通過向下拖動介面來進入設定介面;當然嚴格的講這不屬於“回退”方面的導航操作。

談導航欄返回按鈕的替代方案

長按或雙擊如何?

長按和雙擊都是可以由拇指獨立完成的操作,所以我個人覺得它們將來有可能在回退導航上體現出價值。

從視覺和佈局的角度解決問題

誠然,按照iOS設計規範所要求的那樣將返回按鈕放在導航欄左側,看上去是最自然的。但這不能阻止我們在必要的時候完全改變返回按鈕的視覺樣式或位置;它甚至可以看上去不那麼像個按鈕。

Basecamp將待辦事項內容介面設計成半覆蓋的皮膚形式,使用者點選左側未遮蓋的空間即可將皮膚向右收起,返回到之前的介面。

談導航欄返回按鈕的替代方案

如果內容型別適合,我們確實可以像Basecamp那樣將子介面處理成某種覆蓋層或皮膚的形式,並使用“完成(Done)”按鈕進行關閉,返回上級介面。完成按鈕可以被放置在介面右上角,相比於左上角的位置,更容易被點選到。

談導航欄返回按鈕的替代方案

總結

除非蘋果推出一款更纖細、邊緣更薄的手機,否則我個人還是建議設計師們能夠抱著更開放的心態來看待使用手勢執行常規操作這件事。如果你能充分理解互動物件的運動方式以及人們對這些運動規律的認知,並將這些理解體現到設計當中,那麼手勢會成為非常高效和符合直覺的操作方式。作為設計師,我們必須清楚人們在實際當中是怎樣使用手機的,只有這樣,才能設計出讓人們愉悅而不是感到受挫的產品。

相關文章