【转】5种实用App导航菜单设计方案

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

这5种App菜单设计方案也许有很多设计师已经在使用,但不能否认它是目前实用的,而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚,希望你看了后会有灵感收获,能把你的菜单设计得更棒,好好学习吧。

APP导航设计类型:

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

一、列表式菜单

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

GIF Aimation

f43643be91eab60a022c3c8a02c12fde

Elevatr

56d16d91223e2af59d975c519e9fb83e

HabitClock App

cf08fcdea961d78e201c260756136f6f

Instagrab for iOS

ae047189c6c0aecd50cd22d194d8f4db

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

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

Vectra

47471e98a59588878741b612eecfa278

Arrivo Mobile App

6730c9aed231d541911dc88209eabb8e

Abracadabra App

d1b28e90cc01722a3430ddf4f2d43811

TRAVERSE

33e8ceab141eb541238de0a120683bfb

三、底部菜单

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

Badoo concept

13f5d840671755150aa0a27a0d7ab463

Animated sliding tab bar

7e456aecc2d148b44ddc7309a77ac1b7

四、顶部菜单

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

Horner

fa85eab84e80e8c75d2e05cbf8e4a5b6

Discovery Channel

164f07e5297f7ce938eedf0b31159def

Air flow calculation app

a6b87db17f73f056339d1c9b6ab4020f

Shario App

8c1e097c2b149c4b9dfa55af877779c5

五、扩展菜单

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

MuSeek

54996f3f977cdfedbb000e9286ba583a

Univit UI

e09813307b249da8c6b5661ff84b70b1

SVOY app design

9aa69becada4730d7ca0259eb5d87f17

Időkép

9518440ca9191894094f219d38348107

总结

从上面5个菜单设计方案中可以看出都有自己的优缺点,所以我们应该选择对你项目最为有效的方案,并能提高用户体验。



发表评论

电子邮件地址不会被公开。 必填项已用*标注