移動站點最佳化:移動端導航的七種設計模式

佚名發表於2015-11-17

根據產品層級的深度和廣度,選擇適合的導航模式,是產品設計中的關鍵一環。與大家共勉。

寫在前面:看了很多總結導航的文章,其實都基本雷同,但是都覺得不夠細緻,也不是從我們常用的產品去分析的,因此用自己的思路重新分析了一遍,某些段落來自引用,比如拇指熱區,某些來自我讀過的文章,但大部分的分析來自我的原創。這篇文章應該說是站在巨人的肩膀上,自己的一些淺見。

任何APP的組織資訊都需要以某種導航框架固定起來,就像是建築工人拔地而起的高樓大廈一樣,地基非常重要,之後你想要蓋多少層樓、每層樓有多少間房,都在地基的基礎上構成。而一個新的產品也是這樣,合適的導航框架,決定了產品之後的延伸和擴充套件。

不同的產品需求和商業目標決定了不同的導航框架的設計模式。而互動設計的第一步,就是決定導航的框架設計,框架確定後,才能開始逐漸豐富血肉。

首先,我們要為組織資訊分層,在這一步驟,一定要做好資訊層級的扁平化,不能把所有的組織資訊都鋪出來,這樣做只會讓使用者心煩意亂找不到想要的重要操作,也不能把層級做的很深,使用者沒有那麼多耐心跟你玩躲貓貓。一定要將做核心、最穩固、最根本的功能要素放在第一層頁面,其他得內容收在第二層、第三層、甚至更深。

之後,根據層級的深度和廣度來確定導航的設計模式。不要覺得這有多難,移動端的螢幕尺寸就這麼大,操作方式也無非就是點選、滑動、長按這些。因此導航模式一般也就分為以下7種(當然你可以在這七種的基礎上互相組合)接下來我們可以具體分析一下這七種導航模式。

一、標籤式導航

也就是我們平時說的tab式導航,是移動應用中最普遍、最常用的導航模式,適合在相關的幾類資訊中間頻繁的調轉。這類資訊優先順序較高、使用者使用頻繁,彼此之間相互獨立,透過標籤式導航的引導,使用者可以迅速的實現頁面之間的切換且不會迷失方向,簡單而高效。需要注意的是標籤式導航根據邏輯和重要性控制在5個以內,多餘5個使用者難以記憶而且容易迷失。

而標籤式導航還細分為底部tab式導航、頂部tab式導航、底部tab的擴充套件導航這三種。

1、底部tab式導航

如果此時你觀察一下自己手機中常用的APP你就會發現QQ、微信、淘寶、微博、美團、京東等全部都是底部tab式導航

這是符合拇指熱區操作的一種導航模式,那麼什麼是拇指熱區呢?當你走在路上、單手持握手機並操作;站在公交車上,一手拉扶手,另一隻手操作等等這些場景時,你最常用的操作就是右手單手持握並操作手機,因此,對於手機來說,為觸控進行互動設計,主要針對的就是拇指。

但在手機操作中,拇指的可控範圍有限,缺乏靈活度。尤其是在如今的大屏手機上,拇指的可控範圍還不到整個螢幕的三分之一——主要集中在螢幕底部、與拇指相對的另外一邊。當用右手持握手機的時候(左撇子畢竟是少數,我們還是要為主流使用者設計,拇指的熱區如下圖所示)

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

隨著手機螢幕越來越大,內容顯示變多了,但是單手操作變難了。這也就是為什麼,工具欄和導航條一般都在手機介面的下邊緣,而將導航放置在螢幕底部即拇指熱區,這樣的方式為單手持握時拇指操作帶來了更大的舒適性。

將導航放置在螢幕底部也不僅僅關乎到拇指操作的舒適性,還關係到另一個問題:如果放在上面,用手指操作時,會擋住閱讀的視線。如果控制元件在底部,不管手怎麼移動,至少不會擋住主要內容,從而給予清晰的視角。呈遞內容的螢幕在上方,控制按鍵在下方。

這也是為什麼我是個果粉的原因,iPhone把一個需要按壓的home鍵放在手機底部比Android手機將三個觸控式物理按鍵放在底部高明多了,這些接近螢幕邊緣的物理按鍵擠在一起,手指非常不便於操作。(華為甚至直接將3個物理按鍵放在了螢幕裡),尤其是在我玩遊戲的時候總會誤觸發這3個物理按鍵,造成無意退出,非常不爽。如果再將導航也放置在底部,只能對舒適性說拜拜了(市面上的主流Android手機)

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

2、頂部tab式導航

Android的物理按鍵已經放在底部了,為了不產生堆疊,很多Android應用運用了頂部tab式導航,這是一種妥協下的行為。(下圖為微信Android和iOS圖)

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

而如今,在妥協物理按鍵和拇指操作舒適中,微信Android版拋棄了頂部導航的方式,和IOS保持了一致

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

當然頂部導航也不是那麼一無是處,QQ音樂和酷我音樂現在用的就是頂部Tab式導航,為了更好的瀏覽基本資訊(歌手、歌曲名)、以及支援快捷操作(播放/暫停)播放器需要固定在底部,那麼頂部tab導航不失為一個好選擇(如下圖)

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

還有騰訊新聞和網易新聞這種新聞類APP,由於內容、分類較多,運用頂部和底部雙tab導航,而切換頻率最高的tab放在頂部,這是為什麼呢?因為新聞在每個tab都是沉浸式閱讀,最常用的操作是在一個tab中不斷地下滑閱讀內容,將常用的tab放在頂部,加入手勢切換的操作,反倒能帶來更好地閱讀體驗。(如下圖)

網站導航設計 移動端導航設計 移動站點最佳化 移動站點策劃

小結:在兩種情況下可以選擇頂部tab式導航,

l某項功能必須固定在底部,那麼其他tab只能固定在頂部,但為了方便操作,頂部tab導航最好支援手勢操作,即滑動即可切換;

l該APP是沉浸式體驗,如新聞、小說等,為了帶給使用者更好的閱讀體驗,可以將tab放在頂部

相關文章