扫一扫
海螺热血榜
( 04月 )

稿费:{{item.money}}元

好评:{{item.praise}}

品牌策划> 营销案例> 手机端案例:几款APP导航菜单设计方案

手机端案例:几款APP导航菜单设计方案

17年08月03日11时37分 tripleww 来源: 转载

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机App导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感。


今日分享几款APP导航菜单设计方案,不仅UI界面美观,而且可以提高用户体验度。


APP导航设计类型:

  1. 列表式菜单
  2. 矩阵、网格式菜单
  3. 底部菜单
  4. 顶部菜单
  5. 扩展菜单

一、列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的,遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计,使得菜单更多加美观。

GIF Aimation


15e20bcfb72a5f6b1064de43211c7e32.gif (600×450)


Elevatr


060900I9S.jpg (500×483)


HabitClock App


060902IXh.jpg (500×456)


Instagrab for iOS


060903eJR.jpg (500×421)


二、矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块,优点简约而不简陋,导航清晰、明显,并能提高效率。但设计时切记不分青红皂白的去使用色彩哦,这可能会让用户不知所措和产生疲倦感。

Vectra


060905ehq.jpg (500×523)


Arrivo Mobile App


060906vNX.jpg (500×488)


Abracadabra App


25c210fb0890d215237dfea27a75a925.gif (600×450)


TRAVERSE


060909Xpy.jpg (500×583)


三、底部菜单


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


Badoo concept


0609104e4.jpg (500×460)


Animated sliding tab bar


8b4fae5979756a03784e91cd8befe465.gif (600×450)


四、顶部菜单


顶部菜单和底部意义差不多,把菜单放在顶部,可以遵循上至下的阅读习惯,不过我认为有个缺点就是不能单手操作


Horner


060913mCD.jpg (500×495)


Discovery Channel


060915yqo.jpg (500×554)


Air flow calculation app


060916hvt.jpg (500×408)


Shario App


060918NYt.jpg (500×594)


五、扩展菜单

扩展式菜单设计现在连网站也很常用,当我们觉得菜单比较点用位置的时候,可以尝试用这种方式来隐藏菜单,需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek


060919IYW.jpg (500×487)


Univit UI


060920StX.jpg (500×411)


SVOY app design



手机端案例:几款APP导航菜单设计方案
展开阅读全部

0

0
评论 0
注册/登录后,方可发布评论