兼容性
1、自适应1280*768px及以上的分辨率
默认窗口设置下,不应出现水平滚动条,尽量避免出现垂直滚动条(当内容过多时允许滚动条)
2、兼容Chrome、Firefox、IE8及以上主流浏览器。
导航菜单
一、菜单栏
1、产品图标:点击图标,返回首页。
2、菜单栏显示不下,自动出现更多按钮,点击展开所有菜单项。
3、切换病房,点击病房名称,切换其他病房。
4、点击当前登录人姓名,进行角色切换和我的设置。
5、点击消息面板图标,打开消息面板。
6、点击全屏按钮,整个系统全屏显示。
PS:菜单栏默认锁死,在整个菜单栏任一位置单击鼠标,解锁,解锁后鼠标悬浮在菜单名称上可自动展开显示子级菜单。在除菜单栏区域外任一位置单击,即锁死菜单栏,此时鼠标悬浮不会有子级菜单展开。
二、当前页面名称
1、原则上每个页面都需要左上角有当前页面名称。特殊情况自行调整。
三、Tab切换
1、tab页切换时,判断当前页面修改数据是否已保存,如果未保存,提示“数据未保存,是否保存?”,点击【保存】,弹框关闭,数据保存,父页面刷新,页面顶部提示“保存成功!”一秒闪退,。点击【不保存】,弹框关闭,数据不保存,父页面不刷新。点击右上角X,关闭保存提示,继续原页面操作。
列表
一、新增
1、新增时弹框:新增按钮位置在右上角,点击【新增】按钮,弹出新增录入框。
2、树形列表指定插入位置行编辑新增:新增按钮位置在右上角。选择一条一级数据,点击新增按钮,在该一级下新增一条空白行,行编辑直接修改,操作列保存或取消。未选择一级数据,点击新增按钮,在列表底部新增一条一级数据。
3、行编辑新增,新增按钮位置在列表底部,点击【新增】,列表本页底部新增按钮位置新增一条空白数据,同时新增按钮隐藏。
二、编辑
1、弹框编辑:编辑按钮放在列表【操作列】,采用编辑图标按钮。点击图标,弹出编辑框。
2、行编辑:编辑按钮放在列表【操作列】,采用编辑图标按钮。点击图标,启用本行数据编辑态,操作列按钮变更为保存和取消。
三、删除
1、批量删除:删除按钮放右上角,列表第一列要是复选框,支持全选。其他批量操作按钮同理(例如模板审核中的批量审核按钮)。点击【删除】按钮后,弹出提示“确认删除吗?”,点击确认,页面顶部提示删除成功,一秒闪退,并且显示时不能影响页面操作。
2、单条删除:删除按钮放操作列,采用删除图标按钮。点击【删除】图标后,弹出提示“确认删除吗?”,点击确认,页面顶部提示删除成功,一秒闪退,并且显示时不能影响页面操作。
PS:删除成功后刷新不显示删除的记录。
删除成功后返回到原记录所在页面,而当原记录所在页不存在时,则返回上一页。
当被删除的记录与其他记录存在关联时,请示需求界面给予不允许删除、更明细提示等信息。根据需要自行调整。
四、查询
1、查询条件位置统一放列表上方。查询条件最后尽量放上【查询】按钮,点击生效,若查询条件过多,查询按钮可不显示。除点击【查询】按钮生效外,多种查询有各自的直接生效条件,如下:
多种查询直接生效条件:
1)下拉查询:选中下拉值直接生效;
2)单选/复选按钮:选中直接生效;
3)日期查询:选中直接生效;
4)日期范围查询:选中直接生效;
5)文本框查询:默认模糊搜索,回车生效;
6)下拉+文本框组合查询:回车生效;
2、查询条件三个以上,【查询】按钮后给【重置】按钮,点击【重置】,回到默认查询条件状态。【重置】后自动生效,不需要再次点击【查询】按钮。
3、未查询到数据,列表居中显示“没有数据”。
五、单击事件
1、列表单击时,选中当前行。如果当前行为行编辑启用状态,单击只读单元格为选中当前行,单击可编辑单元格为选中当前行并直接定位编辑本单元格。
六、双击事件
1、有行编辑功能的列表。默认不给双击事件,如有特殊需要,双击事件根据需要添加,如双击可直接打开编辑器或设计器。
2、没有行编辑功能的列表。默认双击时打开本条数据的编辑弹框。有特殊需要,双击事件也可根据需要调整。如患者列表双击可直接进入患者首页。PS:列表只读或双击功能只读时,双击事件自动失效。
七、鼠标划过
1、鼠标划过默认给样式变化。如有特殊需要自行调整。
八、单元格内容展示不全(两种可选方案)
1、单元格中内容展示不下,不给鼠标悬浮显示全部,单击本行时高度自动撑开,移除本行选中时,高度自动收起为一行。另外,本行行编辑启用时,也自动撑开。如有特殊需要自行调整,如病情护理记录单,需要默认全部撑开,最高五行。
2、单元格内容展示不下,用...显示,并鼠标悬浮气泡显示全部内容。能显示完整的单元格,鼠标悬浮无气泡显示。如有特殊需要自行调整,如病情护理记录单,需要默认全部撑开,最高五行。但启用行编辑时,本行高度自动撑开。
九、操作列按钮
1、操作列按钮三个以上时,外层显示2-3个常用按钮(尽量用图标,节省列表宽度)+更多按钮,点击【更多】,展开显示其他隐藏按钮。如有特殊展示需要,可自行调整。
十、列表状态
1、列表有状态列时,位置尽量放在列表首列或操作列前一列。点击状态切换按钮,直接触发,启用自动生效,无需提示;停用时提示“确认停用吗?”点击【确认】,页面顶部显示“停用成功!”,一秒闪退,并且显示时不能影响页面操作。
十一、翻页
1、正常列表默认给翻页功能,位置在列表下方,居中显示。默认每页显示20条,显示条数下拉值(20/50/100/500/1000)。
十二、行编辑-格式校验
1、必填项:标题行*标注,失去焦点检验,红框标注,气泡显示提示内容。此时点击操作列【保存】,光标定位到本行第一个红框单元格。
2、格式错误:失去焦点校验,红框标注,气泡显示提示内容。此时点击操作列【保存】,光标定位到本行第一个红框单元格。
十三、全选
1、多选列表,表头都有全选按钮,勾选全选,本页所有数据全部选中。
2、去掉本页一条数据的选中效果,则表头全选取消勾选。
3、翻页后,自动去掉已勾选的记录及全选的勾选。
4、刷新页面后,自动去掉已勾选的记录及全选的勾选。
5、勾选一条数据,按住Shift键,勾选另一条数据,中间部分全部选中。
十四、显示数据(表格内)
1、表头:左对齐,字体加粗,字号14px。
2、单元格:文字内容左对齐,,数字、金额内容右对齐。
3、操作列原则上均用图标表达,特殊情况特殊处理。
十五、表头固定
1、表头固定,不跟随垂直滚动条滚动。
2、列表操作列固定,不跟随横向滚动条滚动。
十六、列排序
1、所有列点击表头名称,给排序切换功能。如果不能实现所有列手动排序,则全部时间列一定要有手动排序功能,其他列根据需要自行调整。
十七、列表疏密设置
1、点击操作列表头右侧的调整列表密度按钮,调整列表行高。
弹出框
一、录入规范
1、必填项:*标注,失去焦点检验,红框标注,并显示提示内容。同时,点击【保存】按钮也触发校验,光标自动定位到第一个红框内。
2、数据格式错误:失去焦点检验,红框标注,并显示提示内容。同时,点击【保存】按钮也触发校验,光标自动定位到第一个红框内。
3、数据范围超限,点击【保存】按钮校验,弹框提醒。
二、弹框可移动
1、弹框原则上居中显示,所有弹框尽量实现可拖动效果。
三、保存数据
1、有保存按钮的弹框。默认点击【保存】按钮,关闭弹框,并刷新外层数据。特殊需要自动调整,如健康教育评价单需要【保存并继续】按钮,点击后,数据保存,但弹框不关闭。
四、关闭弹框
1、弹框右上角默认给关闭按钮,使用图标X。
2、带【取消】按钮的弹框,点击【取消】,关闭当前弹框,数据不保存。
表单控件
一、日期范围控件
1、位置在查询条件栏:日期范围选择是一个整体控件,先选开始日期后选结束日期,结束日期选完后自动收起日期选择框,并生效开始查询列表数据。日期范围查询后可以给【全部】【一周】【今日】快捷按钮,点击即生效。【全部】指的是入院至今,【一周】指的是今日往前七天,前后包含。
二、日期控件/时间控件/日期时间控件
1、支持手动输入和选择。手动输入要符合日期时间逻辑,如不能输入02月30日,不能输入小时数超过0-23,不能输入分钟数超过0-59等。
三、文本框控件
1、文本框控件为空时,可以给提示信息(但控件前有标签名时,框内的“请输入***”这种提示文字不要,如果有特殊提示可以显示),放置在输入框内,浅灰色字体显示。光标进入输入框获得焦点时提示自动消失,若输入框失去焦点且未输入任何文字时恢复提示信息。
2、原则上要给出文本框字符长度。
3、单行输入框:在未限制字数情况下,当输入文字比前输入框长时,最先输入的文字隐藏,光标和最后一个输入的文字显示在输入框尾部。
4、多行输入框:需要有“当前已输入字数/最多可输入字数”(如:50/100)。
ps:回车进入下一个可编辑控件,遇到下拉控件,自动展开,上下键切换下拉选项,回车选中并跳转到下一个控件。默认从左到右,从上到下。
四、图片
1、图片均带1px描边;内容图片未加载出来时显示系统默认图片。
2、图片未上传时,移入图片区域,显示“点击上传”文字,不显示右上角删除按钮。图片已上传时,移入图片区域,不显示“点击上传”文字,显示右上角删除按钮。
加载
一、加载使用场景
1、当刷新时间较长时,需要给出加载中的效果,进度条或转圈。
链接
一、链接
1、链接文字或图片当鼠标划过时会变成点击手形。
按钮
一、按钮样式
1、按钮种类:优先操作按钮,次要按钮,不可用按钮。
2、按钮状态:默认显示状态,鼠标经过状态,点击状态。
3、按钮位置:按windows交互习惯先优先后次要(左确定,右取消)。
4、按钮样式:可直接写文字,或图标+文字,按钮文字尽量控制为2-4个汉字。
二、导出按钮
1、点击【导出】按钮,导出的是符合当前查询条件的所有列表数据,不仅仅是导出本页列表数据。如果当前列表有复选框,勾选多条,即默认导出这几条数据。
三、按钮名称
1、提示信息类:按钮名称为”确认“和”取消“。
2、录入信息类:按钮名称为”保存“和”取消“。
3、数据未保存类:按钮名称为”保存“和”不保存“。
ps:wed端,主按钮在左,次按钮在右(主次按钮根据使用频率来定,默认确定类为主,取消类为次)。移动端主按钮在右,次按钮在左。
提示
一、保存提示
1、点击确认,页面顶部提示“保存成功!”,一秒闪退,并且显示时不能影响页面操作。保存成功后,原页面自动刷新。
二、删除提示
1、点击【删除】按钮后,弹出提示“确认删除吗?”,点击确认,页面顶部提示删除成功,一秒闪退,并且显示时不能影响页面操作。删除成功后,原页面自动刷新。
三、停用提示
1、点击【停用】按钮后,弹出提示“确认停用吗?”点击【确认】,页面顶部显示“停用成功!”,一秒闪退,并且显示时不能影响页面操作。删除成功后,原页面自动刷新。
四、数据未保存
1、当前页面数据修改但未保存,提示“数据未保存,是否保存?”,点击【保存】,弹框关闭,数据保存,父页面刷新,页面顶部提示“保存成功!”一秒闪退,。点击【不保存】,弹框关闭,数据不保存,父页面不刷新。点击右上角X,关闭保存提示,继续原页面操作。
五、导出提示
1、点击【导出】按钮后,页面顶部显示“导出成功!”,一秒闪退,并且显示时不能影响页面操作。导出成功后,原页面不自动刷新。
六、导入提示
1、点击【导入】按钮后,弹框居中显示导入提示,如果有导入失败数据,自动下载失败明细(保存到浏览器下载默认路径),同时导入失败条数后给查看失败明细按钮,点击【查看失败明细】,打开txt文件,只显示“第1,2.。。。。。。条失败”。
七、请先选择患者提示
1、文书书写、诊断录入等需要先选择患者后才能操作的页面,未选患者刷新时要给“请先选择患者”提醒。页面顶部显示,一秒闪退,并且显示时不能影响页面操作。