你了解移动端导航设计吗?收下这篇系统性的总结!

这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析,一起来系统性地掌握这些知识~

合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。

这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析,一起来系统性地掌握这些知识~

什么是移动端导航?

简单来说,导航是用户从 A 点到 B 点的方式,是他们发现设计点并与产品交互的过程。

可能很多用户认为导航的目标是“在尽可能短的时间内让B x I J u p &用户从 A 到 B”,但时间短只属于操作结果,这W Y G 3 ( A s个结果需要依靠合理且简单的设计才能实现。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 一个页面中可以存在多种导航。例如在油管首页,有Q s o 4 L C [ s S顶部导航栏、筛选器导航和底部导航,这些导航相互搭配为产品助力。

移动端导航常见的设计样式

1. 汉堡菜单

围绕汉堡菜单有很多争论,但存在即合理,在合适的场景下汉] y E ;堡菜单也能发挥大的作用。

来看一下汉堡菜单具备的优势:

  • 视觉空间:节省屏幕空间,包含有价值的信息;
  • 心智模型:大多数用户熟悉这种v M ! W , ! } G设计样式并知道如何操作;
  • 使用经验:调节学习曲线,改善使用体验。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 使用用户熟悉的设计可以s . \ Q [ F $ r }事半功倍。例如美团和饿了么两个产品有着完全不同的主题色,但外. ; w 9 f # T卖点餐流程却是一样的,仍然是用户熟悉的操作,并没有因为产品的不同而改变点餐流程。

2. 底部导航

底部导航栏通常包含产品中最主要的导航链接,用户只需要简单的点击就能直观地在不同页面间切换。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 几乎每款产品都缺少不了底部导航栏,它方便用户单手操作,不需要太费力就能快} = ) &速访问产品~ 4 8 C d 5 c A .页面,提高可用性。

3. 顶部导航

关于顶部导航,可以看之前分享的文章,里面详细介绍了顶部导航的设计方法。