UI设计规范UI栏篇,状态栏/导航栏/搜索栏设计规范
第一节:状态栏
状态栏出现在屏幕的最顶部,并显示有关设备当前状态的有用信息,如时间,信号数据,⽹络状态和电池电量。
状态栏中显示的实际信息因设备和系统配置⽽异。
产品的特定在特定的情况下,为了呈现沉浸式的用户体验,会暂时隐藏状态栏。
按类型分
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设计规范视觉篇到这里就讲完了,后期我们会更新导航类、按钮类、操作反馈类、表单类、提示类、列表类、加载类、缺省页等相关设计规范,敬请期待吧~