移動端6種導航設計總結

一、標籤式導航

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

標籤式的導航可細分爲:底部tab式導航、頂部tab式導航、底部tab的擴展導航

  1、底部tab式導航(QQ、微信、淘寶、微博、美團、京東)

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


但在手機操作中,拇指的可控範圍有限,缺乏靈活度。尤其是在如今的大屏手機上,拇指的可控範圍還不到整個屏幕的三分之一——主要集中在屏幕底部、與拇指相對的另外一邊。當用右手持握手機的時候(左撇子畢竟是少數,我們還是要爲主流用戶設計,拇指的熱區如下圖所示)(紅色:拇指點擊盲區;橙色:拇指能觸及的區域需用史上吃奶的勁;綠色:拇指點擊的最佳區域)Image title

隨着手機屏增大,內容顯示變多,但是單手操作變難了。從上面的拇指熱區來看就很容易理解爲什麼導航和工具欄放在在手機屏幕的下邊緣

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

  2.頂部tab式導航(QQ音樂、酷我音樂、新聞類app)

QQ音樂和酷我音樂,爲了更好的瀏覽基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暫停)播放器需要固定在底部,那麼頂部tab導航不失爲一個好選擇

            Image title

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

       Image title

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

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

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

  3.底部tab式導航的擴展形式(微博和QQ空間、閒魚)

有些情況下,簡單的底部tab式導航難以滿足更多的操作功能,這個時候需要一些擴展形式來滿足需。同時也給設計增加了一些個性化的亮點。

 這些APP中,爲了讓用戶更簡單的貢獻內容,突出了按鈕的設計,讓平淡的標籤欄多了幾分趣味。 Image title

Image title

Image title

標籤導航總結:實際上,底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式,他不怎麼出彩,但是絕對不會犯錯。在大屏幕時代,底部Tab模式的導航更能適應,也更好設計。

適用於:入口分類數目不多,可以控制在5個以內,且用戶需要在入口間頻繁切換來執行多個任務

注意:結構太過複雜而且不穩定的應用不適合標籤式導航


二.抽屜式導航(側導航)

經常和底部tab式導航結合使用的抽屜式導航,我們可以稱之爲優雅的隱喻。抽屜式導航將部分信息內容進行隱藏,突出了應用的核心功能。設想你的產品信息層級有非常多的頁面和內容,難以在一屏內顯示全部內容,那麼你一定首先會想到去設計一個底部或頂部的tab導航,但導航太多無疑顯得臃腫,而且使用戶難以點擊,那麼這個時候,抽屜式導航是個不錯的選擇。

抽屜欄式導航的兩大缺陷:

1、在大屏幕手機上,單手持握時處於操作盲區,難以點擊我們看到隨着iPhone6和iPhone6 plus的推出,到今年6S的持續推進,大屏幕手機時代就這麼不可阻擋的來了,而屏幕頂部左上角的抽屜欄位置,一個需要被經常操作的入口,現在,處在了操作盲區。(如下圖)

Image title

2、 抽屜式導航可能會降低你產品一半的用戶參與度

抽屜欄爲頁面帶來乾淨的設計的同時,也讓用戶忽視隱藏的信息,既然你第一眼看不到這些入口,那麼你也就會時常忘記它們在哪兒。這也導致了隱藏在抽屜欄內的信息內容用戶點擊率下降,參與感降低。


側導航總結:

a.如果應用主要的功能和內容都在一個頁面裏面。只是一些用戶設置這類低頻操作內容需要顯示在其他頁面裏。爲了讓主頁面看上去幹淨美觀,可以把這些輔助功能放在抽屜欄裏。

b.如果你的應用有不同的視圖,且他們是平級的,需要用戶同等地對待,抽屜欄將會浪費掉大多數的用戶對於側邊欄中入口的潛在參與度和交互程度。

c.在大屏時代使用抽屜欄,手勢操作顯得尤爲重要,從屏幕邊緣喚出抽屜欄是個不錯的選擇。

注意:需要用戶有一定參與的信息層級,最好不好放置在抽屜欄


三、列表式導航

如果說標籤式導航是APP中最普遍的導航方式,那麼列表式導航就是最必不可少的一種信息承載模式,這種導航結構簡單清晰、易於理解、冷靜高效,能夠幫助用戶快速定位到對應內容。在APP中的應用也分爲兩種

  1、 作爲主導航使用

如果該APP主要表達的信息層級較爲單一,且並不會在入口間頻繁且反覆跳轉,那麼將列表式導航作爲主導航是一種不錯的選擇。例如雜誌Elle,作爲一個雜誌APP,他以文字、圖片表達爲主,層級淺且內容評級,用列表式導航作爲主導航來構架內容,簡單而直接。(如下圖)

Image title

2、 作爲輔助導航來展示二級甚至更深層級的內容

幾乎在所以APP中都能看到它的應用,作爲信息梳理條目,列表數量儘量保持在一屏以內,超過一屏最好再分一級,而且按照人一次只能記住4項事物的心理法則最重要的內容歸納在前4個列表更容易被人們記住。如果不同種類的內容放在同一頁面,那麼要注意爲這些內容分類,比如微信的設置頁面,用留白的方式來區分內容的不同(如下圖)

Image title

總結:列表式導航大多作爲輔助導航來展示二級甚至更深層次的內容,若要作爲主導航,必須滿足層級淺且內容平級的條件

注意:

a.表式導航的數量保持在一屏以內,超過一屏最好再分一級,

b.將最終要的內容歸納在前4個列表更容易被人們記住

c.要注意爲列表內容分類


四、平鋪式導航

當你的信息足夠扁平,可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗,最大程度的保證了頁面的簡潔性和內容的完整性,且一般都會結合滑動切換的手勢,操作起來也非常方便。PChouse是一個家居雜誌的APP,雜誌休閒隨意的特質,非常適合平鋪式導航,最大限度的保持了圖片的完整性。(如下圖)

Image title

但缺點是用戶只能切換的相鄰頁面,很難跳轉到非相鄰的頁面,很容易迷失位置,因此平鋪式導航都會添加幾個小點來指示當前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航,優點是可以在一個頁面完整展示當前城市的情況,快速切換到其他城市。但如果你設置的城市比較多,就很難快速定位到某個城市,但所幸手勢操作切換方便,且正常情況下,用戶最多隻會設置2-3個頁面,不會造成太大的負擔。


Image title

淘寶中的店鋪推薦也使用了平鋪式導航,推薦店鋪雖然有40個之多,但用數字表達出了明確位置的同時,也加入了手勢切換,增加了易用性和趣味性。

Image title總結:輪播式導航比較適用於足夠扁平化的內容和隨意瀏覽的閱讀模式

注意:無法跳轉至費相鄰頁面,如果入口間需要反覆跳轉,則不適合這種模式


五、宮格式導航(常見但不常用)

常見是因爲,無論你用的是Android還是iOS,每天一打開手機,宮格式導航就會對你說hello了(就是下圖啦)

Image title

每一個APP都是一個宮格,這些宮格聚集在中心頁面,用戶只能在中心頁面進入其中一個宮格,如果想要進入另一個宮格,必須要先回到中心頁面,再進入另一個宮格。每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因爲這種特質,宮格式導航被廣泛應用於各平臺系統的中心頁面,這就是爲什麼說他常見。

但是爲什麼不常用呢,大家可以翻一下手機裏的APP,看看哪個APP的主導航用了宮格式導航?你可能只能找到一個最常用的,尤其是愛自拍的親們-美圖秀秀(如下圖)

Image title

經常使用美圖秀秀的人都會有一個共同的煩惱,例如我拍了一張圖片,我需要美圖一下,我的心理模型是這樣的:進入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個臉-最後加上特效(自然/甜美可人/粉嫩系)-保存圖片。

但是美圖秀秀給我的實際模型卻是這樣的:進入美圖秀秀-打開一張圖片-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-保存圖片-再進入美化圖片-加個特效-再次保存。這樣做的結果是流程複雜,而且我多存了一張沒用的照片,還要到照片裏進行刪除。

這就是宮格式導航的缺陷,信息互斥,無法相互通達,只能給用戶帶來了更多的操作步驟。

總結:宮格式導航適合入口相互獨立互斥,且不需要交叉使用的信息歸類。  一旦入口需要有所交集,必然導致更多的操作負累,這個時候只能根據產品特性做出權衡,如果不適合,建議果斷拒絕這種方式。


六.懸浮icon導航

懸浮icon導航,是將導航頁面分層,無論你到達APP的哪個頁面,懸浮icon永遠懸浮在上面,你依靠懸浮層隨時可以去想要去的地方,同時,爲了讓懸浮icon不遮擋某個頁面的操作,通常懸浮的icon都可以在屏幕邊緣自由移動。

iOS系統就運用了這種導航模式-Assistive Touch, Assistive Touch是在iOS5出現之後搭載的新的輔助功能,知乎上很多人吐槽這個懸浮方塊非常礙事,還有很多人說這是因爲home鍵質量不佳而且官方並沒有明確提出有效的解決方案,所以AssistiveTouch是曲線救國,此處應有笑聲…我最早的一部4S用了2年,摔碎屏2次,home鍵都依然堅挺,撇開home鍵不談,單說懸浮icon在大屏幕時代發揮的作用,當你單手持握手機,拇指在手機中部瀏覽,你想回到主屏幕,但是手指卻難以到達屏幕底部,懸浮方塊在這個時候就能爲你提供快捷操作。而且你可以在AssistiveTouch裏自定義頂層菜單,我比較喜歡裏面的屏幕快照功能,不用按住電源鍵和home鍵就能截屏的感覺棒棒噠!

Image title

而且你可以在AssistiveTouch裏自定義頂層菜單,我比較喜歡裏面的屏幕快照功能,不用按住電源鍵和home鍵就能截屏的感覺棒棒噠!

Image title


總結:懸浮式icon是一個非常便捷的操作入口,也適應大屏幕時代。



大總結:

標籤式導航:最常用、最不易出錯,請第一時間考慮它

抽屜式導航:如果你的信息層級繁多,可以考慮將輔助類內容放在抽屜中

列表式導航:作爲輔助導航來展示二級甚至更深層級的內容,每個APP必不可少,但請注意數量與分類

平鋪式導航:如果你的內容是隨意瀏覽,無需來回跳轉的,可以考慮它。

宮格式導航:不建議在APP中作爲主導航使用,如果非使用不可,請增加跳轉的關聯性

懸浮式導航:更適應大屏的導航模式,不妨試一試,但注意不要讓它遮擋住某些頁面的操作

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章