實用的手機APP導航菜單設計方案

GIF Aimation by Sergey Valiukh 菜单设计 APP设计

手機分辨率比桌面平台小很多,所以設計手機網站或是移動應用的時候,導航菜單都需要考慮周全,盡量保持簡約和易用性高,你可以嘗試這些菜單設計模式用在你的新設計項目上,好用而且有新鮮感。

1. 列表式菜單

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

 

GIF Aimation By Sergey Valiukh

GIF Aimation by Sergey Valiukh 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/GIF-Aimation/13418581

 

Elevatr By Fueled

Elevatr by Fueled 导航菜单设计

查看網址:https://www.behance.net/gallery/Elevatr/10461719

 

HabitClock App By Kutan

HabitClock App by Kutan URAL 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/HabitClock-App/10793005

 

2.網格式菜單設計

網格式菜單就類似於metro UI的堆砌色塊,優點簡約而不簡陋,導航清晰、明顯,並能提高效率。但設計時切記不分青紅皂白的去使用色彩哦,這可能會讓用戶不知所措和產生疲倦感。

 

Vectra  By Michal

vectra - branding by Michal Galubinski and thoke design 导航设计 界面设计

查看網址:https://www.behance.net/gallery/vectra-branding/15209033

 

Arrivo Mobile App By Marco

Arrivo Mobile App 导航设计 界面设计

查看網址:https://www.behance.net/gallery/Arrivo-Mobile-App/13950767

 

T R A V E R S E By Willis

T R A V E R S E by  Willis 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/T-R-A-V-E-R-S-E/8769919

 

3. 底部菜單

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

 

Badoo Concept By Jakub Antalík

Badoo concept by Jakub Antalik 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/Badoo-concept/15040411

 

4. 頂部菜單

頂部菜單和底部意義差不多,把菜單放在頂部,可以遵循上至下的閱讀習慣,不過也是有缺點和優點

 

Horner By Cüneyt ŞEN

Horner by Cuneyt SEN UI界面设计

查看網址:https://www.behance.net/gallery/Horner/14630571

 

Air Flow Calculation App By HAMZAQUE

UI设计

查看網址:https://www.behance.net/gallery/Air-flow-calculation-app-for-Bettertec/15130263

 

5. 擴展菜單

擴展式菜單設計現在連網站也很常用,當我們覺得菜單比較點用位置的時候,可以嘗試用這種方式來隱藏菜單,需要注意的是設計展開菜單按鈕大部設計在左或右上角這些顯示的位置。

 

MuSeek By Al Power

MuSeek by Al Power 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/MuSeek/15159455

 

Univit UI By Mohammed Alyousfi & Àlex Casabò

Univit UI by Mohammed Alyousfi & Alex Casabo 菜单设计 APP设计

查看網址:https://www.behance.net/gallery/Univit-UI/13711535

 

總結

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

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s