人們曾經(jīng)一度只會考慮一種形式——流行且廣泛使用的垂直導(dǎo)航，即側(cè)邊欄。盡管如此，還有其他可以提升用戶體驗的形式，會讓用戶瀏覽你的APP變成小菜一碟。

列表型菜單

讓我們從一種基于列表的標準型導(dǎo)航開始論述，它在移動APP作者中得到廣泛使用。這種解決方式建議逐一展示鏈接，讓用戶遵循從上到下的常規(guī)流程。

Sergey Valiukh的GIF動畫設(shè)計只是一件概念設(shè)計，卻完美地反映出列表型導(dǎo)航的實用性。結(jié)合了多種色彩和精細的線形圖標，還有稍顯粗重的字體，讓用戶輕松瀏覽APP，并且不會感到屏幕局限導(dǎo)致的不適。

Fueled的Elevatr是一個時尚的APP，幫助企業(yè)家管理和跟進商業(yè)會議。主屏的特點是彩虹色的菜單，清晰地逐行展現(xiàn)出控制面板的各個項目。背景圖受到坐標紙的啟發(fā)，與這種菜單完美搭配。

Kutan URAL 的HabitClock App是個簡潔且有視覺感染力的APP，幫助你管理早晨的鬧鐘。盡管屏幕上的重點是頂部和底部的控制面板，但列表型導(dǎo)航（同時也是非常棒的通知工具）才是吸引注意力的核心。

橫條狀的布局方式，用來展現(xiàn)簡易側(cè)滑菜單上的一系列鏈接，這是多數(shù)設(shè)計師的人氣選擇，也是Davis Yeung設(shè)計的iOS版Instagrab主要組成。通常每一項都配有一枚易懂的小圖標，很好地區(qū)分每個鏈接。

矩陣或網(wǎng)格型菜單

占據(jù)全屏的網(wǎng)格型導(dǎo)航有助于強調(diào)導(dǎo)航，使它清晰易懂、顯而易見。當你需要展示很多鏈接時，這種方式也很管用，一系列同樣的網(wǎng)格，有效地將每一項與其他區(qū)分開來。

Michal Galubinskiand thoke design的Vectra，有著不容忽視的導(dǎo)航。設(shè)計師不僅把菜單的6個項目伸展至全屏，還利用了巨大的扁平風(fēng)格圖標，很明顯是為了大部分在線用戶考慮。

Marco La Mantia & Simone Lippolis的移動APP設(shè)計，Arrivo，巧妙地在嚴格的方形網(wǎng)格中組織大量數(shù)據(jù)。每個格子都扮演著功能性的作用；因為它不僅僅是顯示數(shù)據(jù)，也讓你通過底部滑出的一個小型控制面板調(diào)整它。顏色選擇也非常明智，因為熱烈的背景色調(diào)有助于有效地分配內(nèi)容和區(qū)分網(wǎng)格。

Abracadabra，這個APP肯定是依照Sergey Valiukh心中的復(fù)古風(fēng)格來設(shè)計的，讓這個APP有種明顯的年代感。在此，設(shè)計師干練地將屏幕劃分成6個相等的網(wǎng)格，非常易于瀏覽。扁平風(fēng)格圖標結(jié)合粗重的非正式字體，有助于提升易用性。

手繪風(fēng)貫穿了Willis設(shè)計的T R A V E R S E的每一個界面。這個APP基于明亮的單色背景和線形圖標，因此主菜單看不到任何分隔線，卻做到了井然有序，使得用戶相當輕松順手地瀏覽這款A(yù)PP。

底部菜單

底部菜單主要是作為導(dǎo)航的輔助，用來區(qū)分內(nèi)部的功能區(qū)塊或獨立組件。

Jakub Antalík的Badoo概念設(shè)計有著位于屏幕底部的導(dǎo)航。它也包含了一組擴展菜單，每一項都有它自己的控制面板。

Virgil Pana設(shè)計的動態(tài)滑動標簽，為重度信息展示型應(yīng)用提出了一個完美的解決方法，能夠包含大量統(tǒng)計數(shù)據(jù)，或者通過圖表展現(xiàn)數(shù)據(jù)，并仍然保持簡潔。常規(guī)大小的菜單從屏幕底部滑出，顯示出一個小型控制中心。

頂部菜單

既然我們習(xí)慣于從上到下瀏覽手機屏幕，放在屏幕頂部自然有一定優(yōu)勢。標簽頁和每個控制中心獨有的圖標，是這種布局最重要的代表。

Cüneyt ?EN的Horner包含了可隱藏菜單，不過它能很妙地從頂部出現(xiàn)。由于明亮的顏色和有關(guān)聯(lián)性的巨大圖標，它與整個界面內(nèi)容形成了鮮明對比。

Enes Dan??設(shè)計的Discovery Channel將所有的基本導(dǎo)航和二級導(dǎo)航放在頂部，通過固定的位置來打消用戶的困惑。

HAMZAQUE Designs為Bettertec設(shè)計的氣流計算APP，巧妙地運用了占據(jù)頂部的標簽頁。此外，它們被設(shè)計成黑白對比的色調(diào)，和屏幕中其余部分相同。

MING Labs&Pierrick Calvez的Shario APP，透露著簡潔的矢量風(fēng)格概念。整個導(dǎo)航通過頂部的幾個按鈕運轉(zhuǎn)起來。

展開式菜單

對于處理大信息量APP和喜歡創(chuàng)作簡潔緊湊界面的設(shè)計師而言，展開式菜單確實是一項至寶。這種方案允許你把菜單圖標放在任何地方，不過它通常是在左上角。

Al Powerd的MuSeek是個音樂APP，需要為用戶提供大量可視化信息：專輯封面、描述、歌曲名稱、曲目列表等等，所以沒有空間來放置全屏菜單。在這個例子中，左上角的小圖標就是一根救命稻草，平滑地展現(xiàn)出一列相當巨大的菜單。

Mohammed Alyousfi & àlex Casabò的Univit UI設(shè)計，這是一款優(yōu)雅的扁平風(fēng)格APP，使用了一個標準的滑出菜單，通過簡單的滑動操作觸發(fā)。菜單采用了易懂且時尚的輪廓型圖標，比各自的標題都大許多。這種方式使得菜單可以很自然地在設(shè)計中發(fā)揮作用，同時也提供更好的用戶體驗。

Alexandre Efimov設(shè)計的SVOY APP基于一套艷麗的配色方案，與深色的背景有效搭配。設(shè)計師讓菜單從左側(cè)展開。吸引眼球且逼真的折疊動畫，也給設(shè)計增添了一些趣味。

Attila Szabó的Id?kép又是展開式菜單的一個變種設(shè)計，利用幾乎占據(jù)滿屏的夢幻般“拉窗簾”效果來顯示菜單本身。

結(jié)論

每種方案都有自己的優(yōu)勢與劣勢，這就是為什么每個項目都提倡它獨有的導(dǎo)航類型，可以有效地應(yīng)對任務(wù)，并對用戶體驗有幫助。

原文鏈接：http://designmodo.com/mobile-app-navigations/

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計師，至少是個快樂的設(shè)計師。

轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接