后台系统控件交互知识－导航窗体篇
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，隐藏当前窗体
使用场景：用用户过程态的一种，对用户的操作做一定的反馈
更多控件交互知识，请查看
3