后台系统控件交互知识-导航窗体篇
1.1 导航
1.1.1 菜单导航(顶部、左侧)
简介:空间排列的一行项目,一组能够为用户提供自助服务的功能菜单
使用说明:双击可修改菜单名支持支持一级、二级、三级菜单管理;
在元件交互可设置触发事件和触发后执行的动作(添加点击链接页面用例)
使用场景:当前控件的顶部菜单&左侧菜单是后台常用的一种展示方式,菜单扩展性较好
1.1.2 菜单导航(顶部二级)
简介:空间排列的项目,一组能够为用户提供自助服务的功能菜单
使用说明:双击可修改菜单名支持支持一级、二级菜单管理;
在元件交互可设置触发事件和触发后执行的动作(添加点击链接页面用例)
使用场景:当前控件适用于小型,功能不是特别强大,菜单扩展需求不大的后台
1.1.3 面包屑-普通
简介:面包屑是作为辅助和补充的导航方式
使用说明:双击文本修改具体模块名称
选择具体模块名称,添加点击跳转链接用例
使用场景:告知用户在网站或应用中所处的位置并能方便地回到原先的地点,表示层级关系
1.1.4 面包屑(可筛选)
简介:面包屑是作为辅助和补充的导航方式
使用说明:双击文本修改具体模块名称
下拉面板中修改具体选项列表
使用场景:让用户方便切换用户、公司等的切换
1.2 窗体
1.2.1 详情窗体(分层)
简介:多信息进行分类聚合,进行分层级/分类展示的窗体
使用说明:双击文本修改具体模块/分类名称、颜色
使用场景:适用具体内容信息量大,通过信息模块整合展示
1.2.2 数据概览窗体
简介:数据展示概览窗体
使用说明:双击文本修改具体字体和颜色
使用场景:概览页-数据概览会使用较多
1.2.3 tab窗体
简介:tab切换需查看内容的窗体形式
使用说明:双击文本修改tab名称
切换tab触发交互,进行面版的切换
使用场景:菜单Tab将大量关联的数据或者选项划分成更易理解的分组,提供简单的页面展示形式,即在不需要切换出上下文,页面跳转的情况下,有效的进行内容组织的扁平化导航设计
1.2.4 步骤窗体
简介:引导用户完成某一连续行为动作的窗体
使用说明:双击文本修改tab名称
按钮触发交互,进行面版的切换
使用场景:分步骤引导将一系列需要用户完成通过步骤实现很好的引导,这个引导的好处可以让产品本身复杂化专治清晰化
1.2.5 表单窗体
简介:模块信息的聚合窗体(增删改查等)
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)
保存、取消按钮触发交互,增加用例,隐藏当前窗体
使用场景:较多使用在信息聚合弹窗展示的时候
1.2.6 展开收起窗体
简介:当内容过多,可以展开收起进行控制
使用说明:选中下拉按钮,触发交互增加用例,展开:推动面板向下;收起:拉动面板向下
使用场景:有效的聚合信息,节省空间;优化界面
1.2.7 提示框
1.2.8.1 需确认(模态)
简介:需确认告知用户信息的弹框
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)
确定按钮触发交互,增加用例,隐藏当前窗体
使用场景:让用户更聚焦,了解当前信息;并且需要用户反馈确定信息
1.2.8.2 二次确认
简介:需确认告知用户信息的弹框
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)
使用场景:让用作做决定或者解决某个任务。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。
1.2.8.3 离开确认
简介:需确认告知用户信息的弹框
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)
使用场景:用作做决定或者解决某个任务。处是让用户更再次确认当前执行的操作。
1.2.8.4 无须确认(tips)
简介:告知用户信息的弹框
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)
使用场景:用作提醒。好处是及时反馈用户行为操作
1.3 中间状态
1.3.1 加载中
简介:进度中的一种展示方式
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;
等待1000ms,隐藏当前窗体
使用场景:用用户过程态的一种,对用户的操作做一定的反馈
1.3.2 进度条
简介:进度中的一种展示方式
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;
等待1000ms,隐藏当前窗体
使用场景:用用户过程态的一种,对用户的操作做一定的反馈
1.3.3 刷新中
简介:进度中的一种展示方式
使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;
等待1000ms,隐藏当前窗体
使用场景:用用户过程态的一种,对用户的操作做一定的反馈
更多控件交互知识,请查看
4