后台系统控件交互知识-导航窗体篇

UED1

1.1       导航

1.1.1   菜单导航(顶部、左侧)

jmys001

简介:空间排列的一行项目,一组能够为用户提供自助服务的功能菜单

使用说明:双击可修改菜单名支持支持一级、二级、三级菜单管理;

在元件交互可设置触发事件和触发后执行的动作(添加点击链接页面用例)

使用场景:当前控件的顶部菜单&左侧菜单是后台常用的一种展示方式,菜单扩展性较好

1.1.2   菜单导航(顶部二级)

jmys002

简介:空间排列的项目,一组能够为用户提供自助服务的功能菜单

使用说明:双击可修改菜单名支持支持一级、二级菜单管理;

在元件交互可设置触发事件和触发后执行的动作(添加点击链接页面用例)

使用场景:当前控件适用于小型,功能不是特别强大,菜单扩展需求不大的后台

1.1.3   面包屑-普通

jmys0003

简介:面包屑是作为辅助和补充的导航方式

使用说明:双击文本修改具体模块名称

选择具体模块名称,添加点击跳转链接用例

使用场景:告知用户在网站或应用中所处的位置并能方便地回到原先的地点,表示层级关系

1.1.4   面包屑(可筛选)

jmys003

简介:面包屑是作为辅助和补充的导航方式

使用说明:双击文本修改具体模块名称

下拉面板中修改具体选项列表

使用场景:让用户方便切换用户、公司等的切换

1.2       窗体

1.2.1   详情窗体(分层)

jmys004

简介:多信息进行分类聚合,进行分层级/分类展示的窗体

使用说明:双击文本修改具体模块/分类名称、颜色

使用场景:适用具体内容信息量大,通过信息模块整合展示

1.2.2   数据概览窗体

jmys005

简介:数据展示概览窗体

使用说明:双击文本修改具体字体和颜色

使用场景:概览页-数据概览会使用较多

1.2.3   tab窗体

jmys006

简介:tab切换需查看内容的窗体形式

使用说明:双击文本修改tab名称

切换tab触发交互,进行面版的切换

使用场景:菜单Tab将大量关联的数据或者选项划分成更易理解的分组,提供简单的页面展示形式,即在不需要切换出上下文,页面跳转的情况下,有效的进行内容组织的扁平化导航设计

1.2.4   步骤窗体

jmys007

简介:引导用户完成某一连续行为动作的窗体

使用说明:双击文本修改tab名称

按钮触发交互,进行面版的切换

使用场景:分步骤引导将一系列需要用户完成通过步骤实现很好的引导,这个引导的好处可以让产品本身复杂化专治清晰化

1.2.5   表单窗体

jmys008

简介:模块信息的聚合窗体(增删改查等)

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)

保存、取消按钮触发交互,增加用例,隐藏当前窗体

使用场景:较多使用在信息聚合弹窗展示的时候

1.2.6   展开收起窗体

jmys009

简介:当内容过多,可以展开收起进行控制

使用说明:选中下拉按钮,触发交互增加用例,展开:推动面板向下;收起:拉动面板向下

使用场景:有效的聚合信息,节省空间;优化界面

1.2.7   提示框

1.2.8.1   需确认(模态)

jmys010

简介:需确认告知用户信息的弹框

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)

确定按钮触发交互,增加用例,隐藏当前窗体

使用场景:让用户更聚焦,了解当前信息;并且需要用户反馈确定信息

1.2.8.2   二次确认

jmys011

 

简介:需确认告知用户信息的弹框

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)

使用场景:让用作做决定或者解决某个任务。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。

1.2.8.3   离开确认

jmys012

简介:需确认告知用户信息的弹框

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)

使用场景:用作做决定或者解决某个任务。处是让用户更再次确认当前执行的操作。

1.2.8.4   无须确认(tips)

jmys013

简介:告知用户信息的弹框

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体)

使用场景:用作提醒。好处是及时反馈用户行为操作

1.3       中间状态

1.3.1   加载中

jmys014

简介:进度中的一种展示方式

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;

等待1000ms,隐藏当前窗体

使用场景:用用户过程态的一种,对用户的操作做一定的反馈

1.3.2   进度条

jmys015

简介:进度中的一种展示方式

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;

等待1000ms,隐藏当前窗体

使用场景:用用户过程态的一种,对用户的操作做一定的反馈

1.3.3   刷新中

jmys016

简介:进度中的一种展示方式

使用说明:先将当前窗体设为隐藏;而后触发交互,增加用例(灯箱显示当前窗体) ;

等待1000ms,隐藏当前窗体

使用场景:用用户过程态的一种,对用户的操作做一定的反馈

 

更多控件交互知识,请查看

1、后台系统控件交互知识 – 图表篇

2、后台系统控件交互知识 -表单控件篇(一)

3、后台系统控件交互知识 -表单控件篇(二)

 

4