原文地址：Echo的设计笔记（公众号）
作者：Echo
好多项目从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)定义：范围栏只有在与搜索栏一起时才会出现，它让用户可以进一步筛选搜索结果的范围。当用户想在明确的分类范围内进行搜索时，使用范围栏则非常有效。然而，更好的选择是优化您的搜索结果，让用户不需要使用范围栏对搜索结果进行筛选，便可以找到他们所需要的内容。用途：将搜索结果过多，用户找到想要的信息效率很低时，通过范围栏进行细分，方便用户在类目里面快速的找到想要的结果使用说明：当类目数量较多时，且一行宽度不够排列时，可通过左右滑动范围栏里面的类目可查看更多的类目。
可爱的你请把可爱的我设为“星标”。
3本书内容不重复，
从零基础到进阶再到高级，
3本全套齐活儿！
长按上图二维码直接购买（官方有赞店铺）
加QQ群: 733913303领取前面两本书中案例PSD源文件
点击查看课程介绍
长按关注学UI网微信公众号
