設計不只是為了好看。設計也決定多使用者如何融入一個產品,無論是網站還是 WordPress APP 。這是一種交談。導航就是一種交談。因為如果多使用者不明白使用方式,您的網站或 WordPress APP 再漂亮都沒用。

 

  

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

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

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

  標籤欄

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

  底部導航設計的 3 個關鍵

 

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

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

  1. 只顯示重要的目的地

 

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

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

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

 

  避免內容滾動

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

 

  2. 表達出當前位置

  沒有表達當前位置,可能是 WordPress APP 選單中普遍的錯誤。 “我在哪裡?” 是多使用者需要回答的基本問題之一,這是順利操作的前提。

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

 

  圖示

  正因為底部導航操作以圖示方式展現,它們所表達的內容應該要適合透過圖示來表達。有些多使用者熟知的通用圖示,通常這些都表示搜尋、郵件、列印等功能。不幸的是,“通用” 圖示很少。 WordPress APP 的設計師常常用圖示來代表一些非常難以分辨的功能。

 

  總結

  底部導航應該:

  可見且結構合理(使用 3 到 5 個頂級目的地,並且避免可滾動內容)

  清晰(導航欄元素要易於瀏覽,點選區域要足夠大,方便操作)

  簡單(保證每個導航圖示都通向合適的目的地,而且透過底部導航要能夠觸達所有元素)