手(shou)機(ji)分(fen)辨(bian)率(lv)比(bi)桌(zhuo)麵(mian)平(ping)台(tai)小(xiao)很(hen)多(duo)，所(suo)以(yi)設(she)計(ji)手(shou)機(ji)網(wang)站(zhan)或(huo)是(shi)移(yi)動(dong)應(ying)用(yong)的(de)時(shi)候(hou)，導(dao)航(hang)菜(cai)單(dan)都(dou)需(xu)要(yao)考(kao)慮(lv)周(zhou)全(quan)，盡(jin)量(liang)保(bao)持(chi)簡(jian)約(yue)和(he)易(yi)用(yong)性(xing)高(gao)，這(zhe)裏(li)整(zheng)理(li)了(le)5種實用的移動手機App導航菜單設計方案，你可以嚐試這些菜單設計模式用在你的新設計項目上，好用而且有新鮮感。

這5種App菜單設計方案也許有很多設計師已經在使用，但不能否認它是目前實用的
，而且能提高用戶體驗的菜單設計方案。下麵摘選移動手機UI設計美觀
、時尚，希望你看了後會有靈感收獲，能把你的菜單設計得更棒，好好學習吧。

1、列表式菜單

列表式菜單設計這個從網站到手機APP上都很常用的
，遵循由上至下的閱讀習慣方式，所以使用起來用戶不會覺得困難。另外我們可以通過漂亮的配色
、圖標組合來設計，使得菜單更多加美觀。

GIFAimation


Elevatr


HabitClockApp


InstagrabforiOS

[page]
2.矩陣
、網格式菜單設計

網格式菜單就類似於metroUI的堆砌色塊，優點簡約而不簡陋，導航清晰、明顯，並能提高效率。但設計時切記不分青紅皂白的去使用色彩哦

，這可能會讓用戶不知所措和產生疲倦感。

VectraByMichal


ArrivoMobileAppByMarco


AbracadabraAppBySergey


TRAVERSEByWillis

[page]
3.底部菜單

底部菜單主要是列出應用程序重要的功能。

BadooConceptByJakubAntalík


AnimatedSlidingTabBarByVirgilPana


4.頂部菜單

頂部菜單和底部意義差不多，把菜單放在頂部，可以遵循上至下的閱讀習慣

，不過我認為有個缺點就是不能單手操作。

HornerByCüneytEN


DiscoveryChannelByEnesDan??


AirFlowCalculationAppByHAMZAQUE


SharioAppByMINGLabs&PierrickCalvez

[page]
5.擴展菜單

擴kuo展zhan式shi菜cai單dan設she計ji現xian在zai連lian網wang站zhan也ye很hen常chang用yong，當dang我wo們men覺jiao得de菜cai單dan比bi較jiao點dian用yong位wei置zhi的de時shi候hou，可ke以yi嚐chang試shi用yong這zhe種zhong方fang式shi來lai隱yin藏zang菜cai單dan
，需xu要yao注zhu意yi的de是shi設she計ji展zhan開kai菜cai單dan按an鈕niu大da部bu設she計ji在zai左zuo或huo右you上shang角jiao這zhe些xie顯xian示shi的de位wei置zhi。

MuSeekByAlPower


UnivitUIByMohammedAlyousfi&àlexCasabò


SVOYAppDesignByAlexandreEfimov


IdképByAttilaSzabó

總結

從上麵5個菜單設計方案中可以看出都有自己的優缺點，所以我們應該選擇對你項目最為有效的方案
，並能提高用戶體驗。

相關閱讀：

打破謠言！芯片高不高端取決於手機是否高端
專家深入解析：手機鏡頭的閉環式馬達內部構造
大家一起來看看智能手機的三項新科技