移動端用戶體驗：底部導航

設計師都知道，設計不只是為了好看。設計也決定用戶如何融入一個產品，無論是網站還是app。這是一種交談。導航就是一種交談。因為如果用戶不明白使用方式，你的網站或app再漂亮都沒用。

為什麼底部導航如此重要？

Steven Hoober在他的關於移動設備使用狀況的研究中發現，49%的人依靠一根手指完成手機上的操作。在下圖中，手機屏幕上的畫面表示大致的觸摸範圍，不同顏色表示用戶能用拇指在屏幕上觸及的區域。綠色表示輕易觸及；黃色表示需要伸長手指；紅色表示需要用戶改變持握方式。

圖片來源：uxmatters

圖片表示單手操作智能手機的舒適程度。

把最重要最常用的操作放在屏幕底部非常重要，因為它們能用一隻手指輕鬆觸及。

標籤欄

許多應用遵循這一規律，將底部導航（又稱作標籤欄）作為最重要的app功能。Facebook的核心功能一觸即達，能夠在不同功能中迅速切換。

Facebook的iOS底部標籤欄。

底部導航設計的3個關鍵

導航通常是搭載用戶的交通工具。底部導航應該承載重要性等同的頂級目的地。這些目的地需要在app的任何地方留有直接的入口。

優秀的底部導航設計遵循以下3條定律：

1. 只顯示最重要的目的地

在底部導航中使用3到5個頂級目的地。如果少於3個，請考慮使用標籤代替。

底部導航避免使用5個以上，因為點擊目標相互會過於接近。在標籤欄放置過多的項目，讓人們難以點中他們的目標。每多展示一個標籤，app的複雜性就增加一分。

如果頂級目的地確實有5個以上，不要用底部導航來承載這些入口，請考慮放在其他位置。

避免內容滾動

小屏幕上顯而易見的解決方式，就是部分隱藏式的導航——不必擔心屏幕空間的局限，把標籤項放入滾動的標籤欄即可。但是滾動的內容效率低下，因為你得滑動一下才能看到想要的選項。

iOS版Rookie Camapp中就存在「看不見就想不到」的問題。

2. 表達出當前位置

沒有表達當前位置，可能是app菜單中最普遍的錯誤。「我在哪裡」是用戶需要回答的基本問題之一，這是順利操作的前提。

用戶應該在沒有任何外部引導的情況下，一眼就看出如何從A前往B。應該提供適當的視覺線索（圖標、標籤和顏色），操作就不需要任何說明了。

（1）圖標

正因為底部導航操作以圖標方式展現，它們所表達的內容應該要適合通過圖標來表達。有些用戶熟知的通用圖標，通常這些都表示搜索、郵件、列印等功能。不幸的是，「通用」圖標很少。app的設計師常常用圖標來代表一些非常難以分辨的功能。

老版本的Bloom.fm應用Android版。真是相當難理解用戶當前所處位置。

（2）顏色

避免在底部標籤欄使用不同顏色的圖標和文字標籤。應當使用app的主色來表示視覺焦點。

左圖：不同顏色的圖標讓app看起來像是聖誕樹；右圖：應該只用主色。

遵循一條簡單的法則——用app的主色來提亮當前的底部導航項（包括圖標和文字標籤）。

iOS版Twitter的底部菜單欄。Messages是當前選中項。

如果底部導航欄有背景色，就要用黑白的圖標和文字標籤。

左圖：避免使用彩色圖標和彩色背景的組合；右圖：使用黑白圖形。

（3）文字標籤

文字標籤要為導航圖標提供簡短有意義的描述。不要用太長的標籤，因為它們不能截斷或換行。

避免換行、截斷和縮小文字標籤。

菜單元素要易於瀏覽。用戶要能理解他點擊某個元素時會發生什麼。

（4）點擊尺寸

目標區域足夠大，才易於點擊。將界面寬度按操作項的數量等分，計算每個底部導航操作項的寬度。或者，把所有底部導航項的寬度設為最寬。

Android規範建議按照下圖的尺寸設計移動端的底部導航欄。

閱讀全文

推薦閱讀：