交互规范

兼容性

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、文书书写、诊断录入等需要先选择患者后才能操作的页面,未选患者刷新时要给“请先选择患者”提醒。页面顶部显示,一秒闪退,并且显示时不能影响页面操作。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容