第一节：状态栏

状态栏出现在屏幕的最顶部，并显示有关设备当前状态的有用信息，如时间，信号数据，⽹络状态和电池电量。

状态栏中显示的实际信息因设备和系统配置⽽异。

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

按类型分

1.基础类

背景色为黑白的状态栏为基础类状态栏

交互说明：

状态栏也能自定义背景色和导航栏颜色保持一致。

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

2.背景模糊类

在 iOS 系统中，通过对状态栏和导航栏进行背景模糊处理，可以使得产品体验更加沉浸

交互说明：

具体的实现效果可以通过前端代码实现，这里只是模拟 iOS 的背景模糊

第二节：导航栏

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

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

按类型分

1.基础类

基础类导航栏，包含返回和当前页面标题

交互说明：

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

2.扩展类

扩展类导航栏，在原基础导航栏上加入功能

交互说明：

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

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

3.模态类

模态类导航，使用在模态组件中

交互说明：

1.导航栏的标题文字不易超行，当超行时，打点展示

2.导航栏中取消和关闭，是关闭模态窗口，返回原本操作流程中

第三节：范围栏

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

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

按类型分

1.搜索栏+分段式导航

搜索栏+分段式导航，通过导航的滑动和点击来切换搜索结果

交互说明：

搜索栏+分段式导航，通过滑动和点击来切换搜索结果

2.搜索栏+分段控件

搜索栏+分段控件，分段标签页个数一般控制在2-3个

交互说明：

搜索栏+分段控件，通过点击来切换搜索结果

3.搜索栏+按钮式

搜索栏+按钮式，增加分段控件的感知度，让用户更直观操作

4.搜索栏+大文字标签

搜索栏+大文字标签，iOS11 下产物，大文字标签页，文字居左排布

交互说明：

搜索栏+大文字标签，通过滑动和点击来切换搜索结果

第四节：搜索栏

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

按类型分

1.基础类

只提供文本输入进行搜索功能

交互说明：

1.用户激活输入框，跳转到新界面。

2.在输入的过程中,用户点击删除图标，清空输入框的信息并停留在原界面。

2.扩展类

搜索栏中内置扫描二维码或麦克风语音交互

交互说明：

1.用户点击相机图标，跳 转到扫一扫功能界面

2.用户点击麦克风图标，进行语音转文字亦或跳转到语音助手功能界面

3.用户点击取消按钮，回到输入框常态界面。

3.分类筛选类

对于搜索的结果可进行分类筛选

交互说明：

1.用户点击搜索后，出现搜索筛选分类。切换到不同分类，信息筛选为对应分类的信息

2.搜索完成后，用户点击删除图标，回到输入框激活状态

按类型分

1.文本超行

仅支持文本输入，不能换行输入，文字超行时，文字往前面移动

2.切换搜索结果

当分类项无法全部显示时，分类项展示部分出来，让用户知道可以通过左滑查看更多。

第五节：工具栏

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

按类型分

1.基础类

图标类工具栏，使得工具栏简洁，通过图标的意符，表示功能

2.基础类

文字类工具栏，通过文字表示功能，降低对功能的理解成本

3.图标文字类

图标文字类工具栏，多用于电商产品的详情页中

UI设计规范视觉篇到这里就讲完了，后期我们会更新导航类、按钮类、操作反馈类、表单类、提示类、列表类、加载类、缺省页等相关设计规范，敬请期待吧~