UI设计规范说明书(同名24006).docVIP

UI设计规范说明书(同名24006)

UI设计规范说明书第PAGE14页

PAGE14

UI设计规范说明书第PAGE1页

EMRS设计规范手册

V1.0

概要

界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

登录界面

启动

目前我们的pride、EMRS系统首页登录都是以（图1）的展现方式，有2个页面，此法太过累赘，同时跳出框也把产品的logo信息给遮住，可以以一个页面的方式来显示不需要2个页面，类似（图2）。

（图1）

（图2）

登录页面元素

登录页面的基本元素包括：输入框、按钮、进度条。这样的好处就是以一个页面代替2个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面进度

导航菜单

规范

1）菜单深度一般不要超过三层

2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。

（图3）

导航如不是客户特俗要求的定制，均制成类似以上的导航（图3），采用windows标准的定制导航界面，导航必需兼容1024*768、1280*800、1440*900三个主流分辨率，其中默认分辨率为1024*768。

（图4）

（图5）

【1】标题区：显示当前用户姓名、所属科室。字体：15像素，黑色，加粗

【2】工具栏区：可显示二级菜单相应栏目。字体9pt，不加粗，黑色，每个栏目必须有快捷键，栏目间的间距为20像素

【3】二级菜单区：二级菜单字体为9pt，宋体，不加黑，行距10像素；所有的二级菜单栏目都应该有相应的图标设计。（图5）

【4】自定义栏目区：自定义医生所需要显示的快捷方式

【5】最大、最小、关闭区：按钮必须醒目（操作习惯和风格和PCwindows系统一致）、操作性强

窗口风格

1）所有窗口最大化、最小化风格要一致

2）报错页面的风格一致，最好有统一的报错页面

3）类似功能的窗口打开的风格要一致

4）相同功能在不同模块的名称要一致

5）子窗体应尽量在显示在主窗体的左上或居中放置

6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容

7）窗体最小化/最大化时，控件也要随着窗体而缩放

详细：

（图5）

（图6）

，右上角的关闭按钮最大最小化按钮，都统一改成系统弹出框的长、宽比例为3:1

弹出框比例

系统弹出框的长、宽比例为3:1，功能页面弹出框长和宽的比例为5:4

弹出框风格

所有的弹出框右上角的关闭按钮最大最小化按钮，都统一改成，

弹出框四周的边距为13像素,（图5）风格上和windows操作习惯尽可能一致。

弹出框边界

病人基本信息显示：床号、姓名、病人ID、住院号、性别、年龄、身份、费别、出生地、证件号、入院日期、入院方式、入院诊断、预交金、过敏史、检查检验结果总览。

（图6）

弹出框边界要与背景有区分，边界要清楚（图6）

所有弹出框最大化不要遮住windows任务栏（图6）

弹出元素对齐

弹出框的文字要有对齐

（图7）

如（图7）弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。当不同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入框统一左对齐。如（图8）

（图8）

如（图10）弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文字对其空间不够，可考虑换行

（图10）

整页面

检验结果窗口中，点“导出excel”按钮，可将结果数据导出来，保存为excel文件存放到本地。

检验结果窗口中，选择某个报告项目后，点击“趋势力”按钮，检验结果会以图例的方式显示某个时间段内的变化情况。

整页区分于弹出页面，包含导航主页不是以弹出的形式来显示页面，整页必须兼容1024*7681280*8001440*900等三个主流的分辨率其中默认分辨率应该为1024*768。

字体规范

规范：UI字体、色彩要一致整体色彩搭配要融为一体，起提示作用的部分要清楚醒目不可修改的字段，统一使用灰色文字显示

页面标题:（图11）14号加粗宋体，黑色，字体间距默认

（图11）

主菜单：