恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动端常见的导航设计模式有哪些?
0.0°
2014-05-05 自译外文 经验/观点 原作者: Designmodo 举报 17064 76 35 5

关于导航的设计模式,已经有很多了,网页设计自然不用说,即便是相对“新兴”的移动应用界面,可选择的导航设计模式也有很多。尽管移动端设计可谓限制虫虫,更小得空间意味着更小的尺寸,与此同时,还需要排列大量数据,因此,移动端的导航设计更加需要用心。

除了近期广泛使用的侧拉菜单,其实还有一种导航模式也很好用,不但可以提高用户体验,还可以提高应用的设计感。

1.列表式菜单

就让我们用标准的列表式菜单展开本文吧。这种方式在移动应用中也被广泛使用。这种导航设计解决方案主要是将链接逐条排列,让用户按照习惯,从顶部到底部导航。

 

 

 

 

GIF Aimation by Sergey Valiukh

这仅仅是一个概念设计。颜色结合精准的线图标,再加上加粗字体。用户使用导航变得非常方便。

 

 

Elevatr by Fueled

这是一款已经上线的应用,非常好用。帮助团队有序组织商业目标。也能作为会议记录。主屏幕的导航选项色彩如同彩虹一般绚丽。而背景画布取材图表纸,整体搭配很出挑。

 

 

HabitClock App by Kutan URAL

简约而又富有视觉吸引力,能够帮助你安排早晨时光,让你的生活更加有序。列表除了有导航额作用,还有待办事项通知的作用。

 

 

Instagrab for iOS by Davis Yeung

水平条纹,异常精致。不同链接的图标配色对比鲜明,辨识度很高。

2.矩阵/网格式菜单

网格式导航能占据整个屏幕,将界面的重点放在导航上,让导航更清晰明显。当导航项过多的时候,这种方法非常实用,然后通过等距的网格线整齐分割导航项。

 

 

Vectra, branding by Michal Galubinski and thoke design

非常引人注目,一屏6个导航项,扁平化图标显得非常出众。

 

 

Arrivo Mobile App by Marco La Mantia & Simone Lippolis

设计者布局能力非常出众,将一堆数据放到矩形网格中。而且,每个导航项底部都可以滑出小面板,色彩选择也不错。辨识度和信息量的一次平衡。

 

 

 

 

Abracadabra App by Sergey Valiukh

复古风格,中古色调。屏幕六等分,用于导航。扁平化图标结合加粗字体,提高可读性。

 

 

T R A V E R S E by Willis

草图风格的导航设计,强调功能性。背景采用了轻色调。因此,不用做明显的分割线,辨识度也很高。

3.底部导航菜单

这个,很常见,主要做功能区分。

 

 

Badoo concept by Jakub Antalík

导航放在屏幕底部,每个导航项还可向上扩展,承载更多功能。

 

 

Animated sliding tab bar by Virgil Pana

点击最下方的汉堡图标,即可拉出导航菜单,伟大的设计是隐形的,不占据屏幕空间,且提供更多的信息承载

4.顶部菜单

值得一提的是,顶部菜单不符合人机工程学——手会挡住屏幕。虽然更符合人阅读习惯,用户会最先发现导航,但移动端毕竟不是桌面端——用户要用手去操作。

 

 

Horner by Cüneyt ŞEN

导航菜单可隐藏。导航菜单和整体界面对照鲜明且不突兀,得益于明亮的色彩和纯实的图标。

 

 

Discovery Channel by Enes Danış

一二级导航均位于顶部,招之则来,挥之则去,避免干扰用户。

 

 

Air flow calculation app for Bettertec by HAMZAQUE Designs

标签栏占据顶部,黑白对照感鲜明。

 

 

Shario App by MING Labs&Pierrick Calvez

清爽的矢量概念设计,导航放在顶部

5.扩展式导航菜单/侧拉菜单

目前最为常用,提供更多的信息,同时又不妨碍内容阅读。一般是左侧拉。

 

 

MuSeek by Al Power

音乐应用,音乐应用需要承载很多信息:专辑封面、歌名、歌曲序号。因此没有太多的空间留给导航菜单。因此设计者采用了侧边菜单。

 

 

Univit UI by Mohammed Alyousfi & Àlex Casabò

是一款非常简约的应用,采用了标准的侧拉菜单,简单地滑动手势即可调出。侧边菜单中,线图表大于字体。提供了非常清爽的用户体验。

 

 

SVOY app design by Alexandre Efimov

色彩绚丽,配上朴素的黑色背景,侧边菜单可扩展,再加上折叠动效,效果非常诱人。

 

 

Időkép by Attila Szabó

“拉开帷幕,惊喜展现”这就是这款应用的感受,侧拉玩的不错。

结论

想要一招吃遍天下那是不可能的,每一种解决方案都各有利弊。掌握多种导航设计模式,才能根据项目实际,变通的设计,提高用户体验。

 

 

 

 

 

 

 

 

 


更新:2014-05-05

收藏

76人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签
移动应用界面

    猜你喜欢

      2014-05-05 自译外文 经验/观点 原作者: Designmodo 举报 17064 76 35 5

      移动端常见的导航设计模式有哪些?

      0.0°

      你确定要举报移动端常见的导航设计模式有哪些?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年05月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      35
      76
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录