移动端常见的导航设计模式有哪些?
移动端常见的导航设计模式有哪些?
发布时间:2016-10-09 来源:查字典编辑
摘要:关于导航的设计模式,已经有很多了,网页设计自然不用说,即便是相对“新兴”的移动应用界面,可选择的导航设计模式也有很多。尽管移动端设计可谓限制...

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

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

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

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

GIF Aimation by Sergey Valiukh

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

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

Elevatr by Fueled

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

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

HabitClock App by Kutan URAL

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

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

Instagrab for iOS by Davis Yeung

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

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

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

Vectra, branding by Michal Galubinski and thoke design

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

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

Arrivo Mobile App by Marco La Mantia Simone Lippolis

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

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

Abracadabra App by Sergey Valiukh

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

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

T R A V E R S E by Willis

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

3.底部导航菜单 这个,很常见,主要做功能区分。

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

Badoo concept by Jakub Antalík

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

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

Animated sliding tab bar by Virgil Pana

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

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

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

Horner by Cüneyt ŞEN

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

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

Discovery Channel by Enes Danış

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

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

Air flow calculation app for Bettertec by HAMZAQUE Designs

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

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

Shario App by MING LabsPierrick Calvez

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

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

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

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

MuSeek by Al Power

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

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

Univit UI by Mohammed Alyousfi àlex Casabò

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

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

SVOY app design by Alexandre Efimov

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

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

Időkép by Attila Szabó

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

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新交互设计教程学习
热门交互设计教程学习
网页设计子分类