用交互經典四原則,幫你做好導航欄設計

2020-3-13    泥人張 手機及小程序界面設計文章及欣賞

在這之前我得先提及一本書──《簡約至上:交互式設計四策略》。這本書基本算得上是交互設計的入門必讀書籍了,非常適合身處項目環節中上游的人員閱讀與學習。

作者 Giles Colborne 在書中提出了四個令交互設計成果最大化的簡易策略:合理刪除、分層組織、適時隱藏和巧妙轉移。這四個策略幾乎成為我設計與優化每一個頁面時的自我指導方針。

我參閱了大量的應用,想總結出它們是如何運用導航欄來給產品賦能的。竟然很巧地發現,再花式的導航欄設計也難逃「四策略」手法。

首先,導航欄作為一個獨立控件,它本身就已經是「分層組織」策略的一種表現形式。接下來我們來看看,優秀的產品設計是如何運用另外三種策略來設計好導航欄的。

合理刪除

導航欄不能輕易刪除,但凡事沒有絕對。什么時候我們可以合理地刪除導航欄呢?

Nike Run Club(下文簡稱NRC)是耐克官方出品的一款跑步記錄 APP。既然做產品要站在用戶角度出發,那我們就來復原一下主要功能的用戶使用場景。

當你的老板要求你一天出 150 個界面設計的時候,你怕了,準備跑路,同時又不想浪費一天中任何一次記錄運動的機會。于是你打開 NRC,你的目的很明確:認真地跑路,并記錄運動。

點擊「開始」按鈕,當你一旦開始跑步,手機基本就不再使用了,直到跑步結束。

△ NRC在運動狀態下的界面刪除了導航欄

在用戶記錄跑步這樣一個單一事件中,NRC 知道你會專注運動,很少存在關注其他功能、瀏覽其他頁面的可能性。于是 NRC 可以很干脆地刪掉導航欄,而返回按鈕用了界面中的「結束」按鈕代替。

滴滴出行在呼叫快車時也做了刪除導航欄的處理。用戶一旦發單,開始呼叫司機時,呼叫頁面內的所有操作都只聚集在界面下方的一個視覺區域內。

△ 滴滴出行在呼叫過程中刪除了導航欄

上面兩個刪除導航欄的示例有什么共通點呢?

第一,用戶在當前頁面的事件狀態明確,不需要導航標題提醒用戶當前在什么位置,用戶也極少可能在當前頁面發生其他事件操作,于是完全可以去除導航標題與內容控件。

第二,雖然刪除了返回按鈕,但都采用了很典型的「費茨定律」,就算用戶誤操作,也能便捷地撤銷正在發生的事件。反而這比循規蹈矩地運用導航欄來承載返回按鈕合理了許多。

△ 費茨定律簡易圖解

既然導航欄內所有的規范元素都有可取代方案,為什么不刪除它呢?正如 Giles Colborne 在書中告訴我們的:大膽地刪除,但也不要極端到盲目刪除。

適時隱藏

隱藏和刪除看起來十分相似,但其實不然。我們如何區分這兩個技巧呢?

隱藏最常見的情況是,當導航欄的出現會成為打擾用戶沉浸體驗的障礙時,我們會選擇隱藏,例如看視頻、瀏覽圖片等顯示全屏媒體的場景,有導航欄反而會分散用戶的注意力。

△ 顯示全屏媒體時需要隱藏導航欄

不知道你有沒有發現到一個細節,在大多數情況下,需要沉浸體驗的頁面不但會隱藏導航欄,同時也會隱藏狀態欄,導航欄中載有當前頁面的標題、導航按鈕和內容控件;狀態欄中會載有時間、Wi-Fi 等系統設備信息。

iOS 在人機交互指南中提醒我們,顯示全屏媒體時,請考慮暫時隱藏狀態欄,但請避免永久隱藏。如果沒有狀態欄,當用戶需要查看時間或其他設備信息時必須離開應用。設計師應該讓用戶可以使用簡單的手勢重新顯示隱藏的狀態欄。

△ 用戶可以方便地查看時間或其他設備信息

另一種情況是當前頁面非常注重一屏內容展現時,我們會隱藏導航欄。

京東在用戶搜索了商品之后,頭部有三個信息欄,非常冗長。分別是:

  • 導航欄:放置搜索框和頁面內容控件;
  • 全局篩選欄:針對全局的篩選組件,主要用于商品排序篩選;
  • 垂直內容篩選欄:當前所搜索的商品品類的垂直篩選標簽。

△ 京東搜索商品后屏幕頭部的信息欄

用戶在搜索了商品之后,向上滑動頁面,京東會隱藏導航欄和全局篩選欄。

一是因為用戶搜索關鍵詞后,滑動頁面大概率表示已經開始在挑選商品,這時候可以大膽地猜測用戶行為,認為搜索與排序的重要級下降了,搜索結果垂直內容篩選的重要級上升了,便可以只保留下重要的操作。

二是可以讓內容區域高度增加,隱藏頂部兩個欄目區域可以大致增加一個商品位的提前露出,增大了商品觸達用戶的可能性。這不就是 UI 設計為商業目標賦能的一個案例嗎?

△ 隱藏導航欄,增加了屏幕利用率

巧妙轉移

基于導航欄層級始終高于頁面內容的特性,隨著用戶劃出第一屏,許多 APP 做了重要內容或重要控件轉移到導航欄的設計。

豆瓣在影評討論區,用戶上滑頁面時,會將當前影片的信息轉移到導航欄。其實這種轉移很常見,許多內容社區 APP 都有這樣的交互設計,比如瀏覽的公眾號文章,再回到頂部試試。方便用戶時刻知道自己當前所瀏覽的內容是關于哪一個主題的。這一類轉移是單純站在用戶體驗角度的考量。

△ 豆瓣在屏幕滾動后轉移影片信息到導航欄

但如果你仔細觀察,有一類轉移卻是綜合了用戶體驗與產品目標的共同抉擇。如果你再稍微了解一點該產品背后的故事,甚至可以讓你洞悉到,為了鞏固產品的調性和目標,PM 和 UI 們在頁面設計時做了多少細枝末節的引導。

知乎在用戶瀏覽當前問題時向上滑動頁面,也會像豆瓣一樣,將當前問題標題轉移到導航欄上,但與此同時會將「寫回答」的操作也轉移到導航欄。標題轉移是出于用戶體驗,和大多數內容社區的做法大同小異;而「寫回答」的按鈕轉移,正符合知乎想要打造一個內容交流社區的產品調性,他們希望刺激用戶進行問答互動,多輸出 UGC 內容,希望用「寫回答」的按鈕轉移進一步激發用戶創作內容的可能性。

△ 知乎轉移「寫回答」讓用戶更方便地進行問答互動

京東在店鋪首頁上滑頁面時,會將「關注」按鈕轉移到導航欄,方便用戶在瀏覽的過程中可以隨時收藏店鋪,增加了用戶對品牌店鋪的關注度和復購的可能性。京東靠自營模式發家,近幾年來開始慢慢重視 B2C 市場,在這個小小的關注按鈕上,是不是可以算略顯端倪呢?雖然我不能非常肯定,可能提高用戶收藏操作只是為了輔助京東更好地進行營銷權重劃分,不過「關注」按鈕的轉移,確實能為 B2C 業務的滲透提供一份助力。

△ 京東轉移「關注」讓用戶更方便地收藏店鋪

所以我這里說到的「轉移」的目的,其實和 Giles Colborne 在書中講到的并不十分一致,Giles Colborne 是希望設計師將當前頁面低頻、冗雜的操作轉移到另一個頁面中去,而我提到的「轉移」反而是產品越注重什么功能,越可以利用導航欄層級的先天優勢來實現轉移。

總結

合理刪除、分層組織、適時隱藏和巧妙轉移已經是我做設計和分析界面常用的一個手法,它并不一定是萬能的,但是它多多少少可以輔助我們做出更合理的設計。

這篇文章想要告訴大家的是,在平臺規范里的導航欄是死板又相對靜態的,但在四個策略的輔助下,結合用戶的操作手勢,也可以將它變得十分靈活,幫助頁面實現更好的用戶體驗。不要被規范限制的太死,轉換設計師的角色變成用戶,你可以研究出更多好玩的操作。隨便打開一個應用,去研究研究,你可能會樂在其中的。

文章來源:優設    作者:

標簽: App設計 導航設計 導航欄設計

日歷

鏈接

blogger

藍藍 http://www.thriveonsite.com

存檔

北京赛车 做什么网赚好呢 网赚如何赚钱 千万时网赚平台是骗子吗 北京赛车 2019年最新网赚教程 网赚导师是真的假的 北京赛车 深度网赚论坛 www.xieeybaa.com