移动ui组件设计详解（移动端设计规范）

移动ui组件设计详解（移动端设计规范）定义：状态栏 (Status Bar)所以这套规范，可以给予其他设计团队迅速搭建属于自己产品的设计规范，直接复用，减少设计团队走弯路。整个系列文章完结后，会附上规范文档，给予大家阅读和使用。本套移动端设计规范一共包含8大类，分别为：UI栏类、导航类、引导类、加载类、缺省类、提示类、操作类和表单类。本篇讲解的是UI栏类，UI栏类一共包含5种，分别为：状态栏 (Status Bar)、导航栏(Navigation Bar)、工具栏(Tool Bar)、搜索栏(Search Bar)和范围栏(Scope Bar)。

好多项目从0到1做一个APP，会遇到下面两个问题。

1.前期没规范，样式不断的被多次创造，设计师做起来工作量太大，没有前期打磨，导致出现各种设计问题。

2.前期制作规范花费时间太多，同时会纠结iOS和Android到底做两套，还是做一套的问题。做两套会导致开发成本和设计成本增加，Android规范有些并不太适合做商业化产品。只做一套（iOS）对Android开发来说工作量变大，同时导致Android端的设计品质下降。有没有更好的折中方案。

我这套系列文章可以解决上面两种问题。并做到最优解。这也是我要做这套系列规范的目的。

所以这套规范，可以给予其他设计团队迅速搭建属于自己产品的设计规范，直接复用，减少设计团队走弯路。整个系列文章完结后，会附上规范文档，给予大家阅读和使用。

本套移动端设计规范一共包含8大类，分别为：UI栏类、导航类、引导类、加载类、缺省类、提示类、操作类和表单类。

本篇讲解的是UI栏类，UI栏类一共包含5种，分别为：状态栏 (Status Bar)、导航栏(Navigation Bar)、工具栏(Tool Bar)、搜索栏(Search Bar)和范围栏(Scope Bar)。

状态栏 (Status Bar)

定义：

状态栏出现在屏幕的最顶部，并显示有关设备当前状态的有用信息，如时间，蜂窝数据，⽹络状态和电池电量。状态栏中显示的实际信息因设备和系统配置⽽异。

产品的特定在特定的情况下，为了呈现沉浸式的用户体验，会暂时隐藏状态栏。

用途：

告知用户当前设备的重要的状态信息

使用说明：

1.除了背景色为黑白色，也能自定义和导航栏颜色保持一致。

2.产品在特定界面可隐藏状态栏，不建议所有页面都隐藏状态栏。

导航栏(Navigation Bar)

定义：

导航栏能够实现在应用不同信息层级结构间的导航，也可用于管理当前屏幕内容。

导航栏出现在屏幕顶部的状态栏下方，并可以通过⼀系列分层屏幕进行导航。当显示新屏幕时，通常标有前⼀屏幕的后退按钮出现在栏的左侧。有时，导航栏的右侧包含⼀个控件，如编辑或完成按钮，⽤于管理活动视图中的内容。

用途：

1.通过导航栏上的标题，告知用户当前界面的主要信息内容。

2.提供返回上一页或者关闭的作用。

3.提供快捷功能入口或者对当前页面的管理操作。

使用说明：

1.导航栏的标题文字不易超行，当无标题时，可以将标题空出来。

2.右侧操作按钮不超过2个，超过两个，可收到更多功能中。

工具栏(Tool Bar)

定义：

⼯具栏出现在App 屏幕底部，包含了执行当前视图或包含内容相关操作的按钮。⼯具栏是半透明的，也可能有背景⾊，并且通常在⽤户不太需要它们时被隐藏。

用途：

1.当前页面需要操作时

2.重要主操作使用

使用说明：

存在多种操作，一般2-5个，超过5个通过更多聚合。

搜索栏(Search Bar)

定义：

用户通过输入的关键词，搜索到用户想要的信息。

用途：

当应用内包含大量的信息的时候，用户通过搜索快速地定位到特定的内容。

使用说明：

1.对于搜索的规范，iOS 官方给出的是隐藏搜索栏，用户通过下拉展示搜索栏。Android是通过搜索图标控件引导用户点击出现搜索栏。

2.搜索栏中可置入语音，通过语音进行搜索。

范围栏(Scope Bar)

定义：

范围栏只有在与搜索栏一起时才会出现，它让用户可以进一步筛选搜索结果的范围。

当用户想在明确的分类范围内进行搜索时，使用范围栏则非常有效。然而，更好的选择是优化您的搜索结果，让用户不需要使用范围栏对搜索结果进行筛选，便可以找到他们所需要的内容。

用途：

将搜索结果过多，用户找到想要的信息效率很低时，通过范围栏进行细分，方便用户在类目里面快速的找到想要的结果。

使用说明：

当类目数量较多时，且一行宽度不够排列时，可通过左右滑动范围栏里面的类目可查看更多的类目。

感谢阅读！