移動APP的常見的幾種導航形式

當確定了APP的設計需求和產品的整體結構之后,要著手開始規劃和制作APP的原型及UI界面。一款APP的好與不好,很大部分取決于APP界面布局的合理性。這個時候就要想以最優的設計結構將APP的內容展現給用戶,那么,如何將信息以最優的形式展現出來呢?這就涉及到了APP的導航應用方式,可以說一個優秀的導航設計對一款App的核心體驗起到了決定性的作用!

優秀的app導航設計,能夠合理地完美展示產品的功能,并快速引導用戶使用,增強用戶的識別度。合理的導航設計,會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。

知道了導航的重要性,在考慮導航設計時,需要注意以下事項:

1.可達性:

移動應用的導航功能可以說是所有界面最重要的組成部分,因此一定要保證其可達性,并把最關鍵的要素盡量突出,同時不要影響到內容本身。

一個產品,如果對于任何人(無論能力)而言,都是非常容易掌握、理解并可以用之來完成他們的目標的話,那么這個產品就是可達的。一個成功的產品對于任何可能的使用者來說都應該是可達的。


設計完全可達的產品是一個復雜的課題,需要深入研究。欲了解更多信息,請訪問谷歌的可達性網站

2.目的性:

確保導航中的每個按鈕要素簡單明了,有明確的引導用戶點擊的目的性。讓用戶一看就知道是什么意思以及操作結果是什。不要弄的太過花哨,這樣反而會讓迷惑用戶,起到反作用。

3.易于理解:

如果想設計比較高級的導航功能(例如鏈接圖片、允許滑動或其他手勢導航,或者訪問隱藏菜單),請務必在設計過程中保證前后一致,以便用戶熟悉你所使用的模式,同時還應加入一些額外的信息(例如小箭頭、文字或改變顏色或高亮等)來吸引用戶注意力,并以微妙的方式對用戶進行引導。不要給用戶呈上“看得見摸不著的導航功能”。

4.通用性

導航功能應當以一定的形式顯示于移動應用的各個界面。各個導航模式不一定要完全相同,但其基本結構應當在應用內保持一致,可以根據背景進行小幅度的調整。

明確上述幾點注意事項后,將APP的信息結構分層,把主要、最核心、最根本的功能放在第一層級,次要內容放在第二層級甚至更深。然后根據層級關系、結構關系確定導航的形式。

結合產品的深度和廣度來共同探討一下目前APP界面常見的幾種導航形式,并分析其優缺點,從而進一步判斷每一種導航形式更適合應用于哪種類型的APP!

1.標簽式導航

標簽式導航,也就是常說的Tab式導航。是目前應用最廣泛、最常見的導航形式。

標簽式導航可分為頂部標簽式導航、底部標簽式、舵式導航(底部擴展式導航)。

頂部標簽式導航

頂部標簽式導航顧名思義,存在于頁面的頂部。頂部標簽導航多應用于Android平臺,因其平臺特性,底部含有虛擬的物理按鍵,如華為手機存在手機屏幕內的物理按鍵。

Android手機底部虛擬按鈕

很多App為了適配安卓平臺,采用了頂部標簽式導航,目的是為了不與底部虛擬按鈕組合在一起產生的信息堆疊和誤操作,這也是一種妥協行為。但不斷升級的Android平臺app現如今也和ios盡量保持一致。

不過也有很多ios平臺根據產品結構應用此類型的導航。

頂部標簽式導航

上圖是蝦米音樂app首頁導航模式,采用了頂部標簽式導航。這樣設計是為了更多展示標簽下的內容,還有一點是支持快捷操作。方便展示/點擊下方快捷區域的內容和按鈕(當前曲目、歌手、播放/暫停和下一曲)。

底部標簽式導航

底部標簽式導航是最常用的導航形式,一般存在于頁面底端,不超過5個模塊。


底部標簽式導航

如果應用需要用戶頻繁的在不同分頁切換,可以采用這種導航,如上圖微信最新版的APP界面設計圖。這種導航欄符合拇指操作熱區。


操作熱區


舵式導航(底部擴展式導航)

舵式導航是底部導航的一種擴展形式,是一種變體。因為它的樣式很像輪船上用來指揮的船舵,兩側是其他操作按鈕。

當頁面有處于同一層級的幾大部分內容,同時又需要一個非常重要且頻繁操作的入口,就可以采用這種APP導航模式。中間項標簽不緊操作最頻繁,最重要,且需要引人注意,方便尋找

舵式導航

左圖為懶人聽書App,右圖為新浪微博手機客戶端。兩款App的主要功能都采用了舵式導航的布局方式,將操作最頻繁的按鈕進行特殊處理,在視覺設計上突出,與導航上的其他按鈕進行區分,引導用戶操作。

頂部導航+底部導航(雙導航模式)

雙導航

今日頭條和網易新聞這種新聞類APP,由于內容、分類較多,運用頂部和底部雙tab導航,而切換頻率最高的tab放在頂部,這是為什么呢?因為新聞在每個tab都是沉浸式閱讀,最常用的操作是在一個tab中不斷地下滑閱讀內容,將常用的tab放在頂部,向左或向右滑動切換tab的手勢操作,能帶來更好地閱讀體驗。

標簽式導航小結:

在兩種情況下可以選擇頂部tab式導航:某項功能必須固定在底部,那么其他tab只能固定在頂部,但為了方便操作,頂部tab導航最好支持手勢操作,即滑動即可切換;該APP是沉浸式體驗,如新聞、小說等,為了帶給用戶更好的閱讀體驗,可以將tab放在頂部。

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

適用于:

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

注意:

結構太過復雜而且不穩定的應用不適合標簽式導航。

2.抽屜式導航

抽屜式導航模式一般采用將導航主體隱藏在app側邊的方式,以一個按鈕來呼出導航,在使用完成之后在使用相同的按鈕隱藏起來。一拉一縮,從形象上與抽屜類似,因此稱之為抽屜式導航。

抽屜式導航的核心思路是“隱藏”。隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去。設想你的產品信息層級有非常多的頁面和內容,難以在一屏內顯示全部內容,那么你一定首先會想到去設計一個底部或頂部的tab導航,但導航太多無疑顯得臃腫,而且使用戶難以點擊,那么這個時候,抽屜式導航是個不錯的選擇。


抽屜式導航

抽屜式導航存在幾個缺陷:

1.左上角的導按鈕存在于單手拇指操作熱區難以到達的位置,導致導航按鈕難以觸達;2.降低了用戶對產品一半的參與度;3.可見性低。

有些人認為“現在的APP的發展不僅僅是從前單一的功能,功能隨產品的發展變得越來愈多,抽屜式導航已經不適應大多數的產品,這種導航終將被遺棄”。但是,導航欄的使用方式并不是單純隨著看產品的功能增加而不被使用,而是隨著整個產品的信息結構和功能形式來設計決定的。拋開產品的功能表現而去講產品設計是不合理的。

何種情況下適合使用抽屜式導航:

1.如果應用主要的功能和內容都在一個頁面里面。只是一些低頻操作內容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀,可以把這些輔助功能放在抽屜欄里。

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

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

注意:

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

3.跳板式導航(快速啟動版/宮格導航)

跳板/快速啟動/宮格導航是將主要入口全部聚合在頁面,讓用戶做出選擇。


宮格導航

采用這種導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。如下圖新浪微博,點擊導航欄中間的發布按鈕,彈出二級菜單,這個二級頁面就是采用的宮格式導航,作為發布微博的入口。


二級頁面-宮格式導航

這種導航模式非常常見,但是卻不常用。

無論你用的是Android還是iOS,每天一打開手機,宮格式導航就會對你說hello了。


界面中的宮格

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

宮格式導航的缺陷

信息互斥,無法相互通達,只能給用戶帶來了更多的操作步驟。無法讓用戶在第一時間看到內容,選擇壓力較大。

何種情況下適用于宮格式導航:

適合入口相互獨立互斥,且不需要交叉使用的信息歸類

注意:

一旦入口需要有所交集,必然導致更多的操作負累,這個時候只能根據產品特性做出權衡,如果不適合,建議果斷拒絕這種方式。

4.列表式導航

列表式導航結構清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對應的頁面。作為輔助導航來展示二級甚至更深層級的內容

列表式導航分為3類:標題式列表、內容式列表、嵌入式列表。

分別為標題式、內容式、嵌入式列表

標題式列表:一般只顯示一行文字,有的顯示一行文字加一張圖片等等。

內容式列表:主要以內容為主,所以在列表中就會體現出部分內容信息,點擊進去就是詳情。

嵌入式列表:嵌入式其實就是由多個列表層級組合而成的導航。能很好的解決次要功能非常多的問題

所有關于列表導航的例子大部分都是依附于標簽導航之上的。前面我就說過現在以列表形式作為主導航的產品是越來越少,因為確實它不是一個好的主要展示形式。列表項目可以通過間距、標題等進行分組,形成擴展列表。列表菜單導航可以將重要的UI部分以列表的形式進行呈現,讓用戶可以滾動查看自己要執行的操作或內容。

而在二次層級上,它們還會將列表分模塊進行展示,如微信中“我的”模塊“新消息通知、隱私、通用”是一組,“幫助與反饋、關于微信”又是一組。雖然你能看到,但是不仔細觀察就不會發現其中的要點。只要善用這個細節,可以更好的加以區分次要功能,并提升用戶體驗度。

5、懸浮icon導航

懸浮icon導航,是將導航頁面分層,無論你到達APP的哪個頁面,懸浮icon永遠懸浮在上面,你依靠懸浮層隨時可以去想要去的地方。

懸浮icon導航

懸浮式icon會遮擋某些頁面的操作,在設計的時候應該考慮進去,比如無論在那個頁面永遠為懸浮icon留有位置。

總結

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

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

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

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

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

寫在最后

還是那句話,優秀的app導航設計,能夠合理地完美展示產品的功能,并快速引導用戶使用,增強用戶的識別度。合理的導航設計,會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。

感謝大家的耐心閱讀,還有一路陪伴的行業大牛為我指點迷津!如果內容觀點有不對的地方,歡迎批評指正!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,693評論 25 708
  • 假設我們需要建造一棟建筑,那么第一步需要做什么工作?——沒錯,設計和規劃好地基,萬丈高樓平地起依靠的是穩健合理的地...
    汪繼志閱讀 836評論 0 10
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,158評論 4 61
  • 2017年的第一天,我在手帳本上寫了三個愿望。現在可以公布第一個了,就是買新年禮物。 為了早點實現這個愿望,我從元...
    芋仔仔閱讀 295評論 0 0
  • 其實,在以前,小兔子的毛色不只是黑白灰三種。有些小兔子身上有紅色,有些是藍色,有些是金色。有一只小兔,因為身上有五...
    音樂的自言自語閱讀 1,134評論 4 15