移动端的那些导航组件（一）

导航组件就像是一张地图，告知用户当前在什么地方，如何去到别的地方，帮助用户快速地在不同信息之间进行切换。在一个项目中，导航组件通常会以不同的形态、不同的命名、不同的交互方式出现。今天来认识四个常见的常见导航组件，分别是标签栏、导航栏、标签页和侧边导航。

标签栏｜TabBar

标签栏一般是用在几个同等级的页面之间，用于页面与页面之间的切换。现在市面上大多的App的标签栏都是位于应用程序的底部，在iOS设计规范中苹果建议底部放置3-5个标签，避免标签过多使页面信息复杂，从而影响到用户寻找信息，标签过多还有一个缺点就是容易造成误操作。

在进行标签栏设计的时候需要注意的点👇
1.标签控制在3-5个
2.使用能够准确表达含义的icon和文本，保证易阅读和可识别性
3.还是以iOS为主，标签栏的高度是49pt，采用的是【上面图标下面文本】的模式，图标区域是24pt,文字是10pt。（具体的尺寸和摆放位置可根据业务调性调整】

导航栏｜NavBar
导航栏一般位于屏幕的顶部，一个是作为当前页面的大标题而存在，另一个引导用户返回上级页面或进行其他操作，如分享,当导航栏有其他操作时，要确保操作区域有足够的空间。

在某些特定的场景下，比如要满足用户的沉浸式体验，Nav Bar也会隐藏起来。

侧边导航｜SideBar
侧边导航是垂直展示的导航栏，用于在不同的内容区域之间进行切换，在电商类型的项目中十分地常见。

标签切换｜Tabs
Tabs标签页，又称选项卡，也是用在不同的内容区域之间切换。
标签页可以固定展示，或者左右滑动，如果需要对选项有进一步描述时，可以用复杂选项卡，在Ant Design Mobile中提供了【JumboTabs】的前端组件。