UI设计规范说明书.doc

EMRS设计规范手册 V1.0 目 录 概要 3 登录页面 4 1. 启动 4 2. 登录页面元素 4 导航菜单 5 1. 弹出框比例 8 2. 弹出框风格 8 3. 弹出框边界 8 4. 弹出元素对齐 8 整页面 10 字体规范 11 页面元素 15 页面色调 18 用户界面行为 19 概要 界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。 登录界面 启动 目前我们的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】最大、最小、关闭区： 按钮必须醒目（操作习惯和风格和PC windows系统一致）、操作性强窗口风格 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*768 1280*800 1440*900 等三个主流的分辨率 其中默认分辨率应该为1024*768。  字体规范 规范：UI字体、色彩要一致 整体色彩搭配要融为一体，起提示作用的部分要清楚醒目 不可修改的字段，统一使用灰色文字显示 页面标题: （图11）14号加粗宋体，黑色，字体间距默认 （图11） 主菜单：（图12）12号字体，宋体，字体间距默认，菜单之间的间距为20像素，每个菜单项目都必须有快捷键 （图12） 下拉菜单：（