UI设计规范说明书.docx

《UI设计规范说明书.docx》由会员分享，可在线阅读，更多相关《UI设计规范说明书.docx（13页珍藏版）》请在三一办公上搜索。

1、UI设计规范说明书UI设计规范说明书 第1页 EMRS设计规范手册 V1.0 UI设计规范说明书 第2页 目 录 概要 . 3 登录页面. 4 1. 启动 . 4 2. 登录页面元素 . 5 导航菜单. 6 1. 弹出框比例 . 9 2. 弹出框风格 . 9 3. 弹出框边界 . 9 4. 弹出元素对齐 . 9 整页面 . 11 字体规范. 12 页面元素. 16 页面色调. 19 用户界面行为 . 20 2 UI设计规范说明书 第3页 概要 界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力

2、求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。 3 UI设计规范说明书 第4页 登录界面 1. 启动 目前我们的pride 、EMRS系统首页登录都是以的展现方式，有2个页面，此法太过累赘，同时跳出框也把产品的logo信息给遮住，可以以一个页面的方式来显示 不需要2个页面，类似。 4 UI设计规范说明书 第5页 2. 登

3、录页面元素 登录页面的基本元素包括：输入框、按钮、进度条。这样的好处就是以一个页面代替2个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面进度 5 UI设计规范说明书 第6页 导航菜单 规范 1）菜单深度一般不要超过三层 2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。 导航如不是客户特俗要求的定制，均制成类似以上的导航，采用windows标准的定制导航界面，导航必需兼容1024*768、1280*800、1440*900 三个主流分辨率，其中默认分辨率为1024*768。 6 UI设计规范说明书 第7页 标题区：显示当前用户姓名、所属科室。字体：15像素 ，黑色，加粗 工具栏

4、区：可显示二级菜单相应栏目。字体9pt，不加粗 ，黑色，每个栏目必须有快捷键，栏目间的间距为20像素 二级菜单区：二级菜单字体为9pt，宋体，不加黑，行距10像素；所有的二级菜单栏目都应该有相应的图标设计。 自定义栏目区：自定义医生所需要显示的快捷方式 最大、最小、关闭区： 按钮必须醒目、操作性强7 UI设计规范说明书 第8页 窗口风格 1）所有窗口最大化、最小化风格要一致 2）报错页面的风格一致，最好有统一的报错页面 3）类似功能的窗口打开的风格要一致 4）相同功能在不同模块的名称要一致 5）子窗体应尽量在显示在主窗体的左上或居中放置 6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容 7

5、）窗体最小化/最大化时，控件也要随着窗体而缩放 1. 详细： 8 UI设计规范说明书 第9页 ，右上角的关闭按钮 最大 最小化按钮，都统一改成系统弹出框的长、宽比例为3:1 2. 弹出框比例 系统弹出框的长、宽比例为3:1，功能页面弹出框长和宽的比例为5:4 3. 弹出框风格 所有的弹出框右上角的关闭按钮 最大 最小化按钮，都统一改成， 弹出框四周的边距为13像素,风格上和windows操作习惯尽可能一致。 4. 弹出框边界 病人基本信息显示：床号、姓名、病人ID、住院号、性别、年龄、身份、费别、出生地、证件号、入院日期、入院方式、入院诊断、预交金、过敏史、检查检验结果总览。 弹出框边界要与背

6、景有区分，边界要清楚 所有弹出框最大化不要遮住 windows任务栏 5. 弹出元素对齐 弹出框的文字要有对齐 9 UI设计规范说明书 第10页 如弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。当不同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右对齐， 输入框统一左对齐。如 如弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文字对其空间不够，可考虑换行 10 UI设计规范说明书 第11页 整页面 检验结果窗口中，点“导出excel”按钮，可将结果数据导出来，保存为excel文件存放到本地。 检验结果窗口中，选择某个报告项目后，点击“趋势力”按钮，检验结果会以图例的方

7、式显示某个时间段内的变化情况。 整页区分于弹出页面，包含导航 主页 不是以弹出的形式来显示页面，整页必须兼容1024*768 1280*800 1440*900 等三个主流的分辨率 其中默认分辨率应该为1024*768。 11 UI设计规范说明书 第12页 字体规范 规范：UI字体、色彩要一致 整体色彩搭配要融为一体，起提示作用的部分要清楚醒目 不可修改的字段，统一使用灰色文字显示 页面标题: 14号加粗宋体，黑色，字体间距默认 主菜单：12号字体，宋体，字体间距默认，菜单之间的间距为20像素，每个菜单项目都必须有快捷键 下拉菜单：下拉菜单采用9pt、宋体、黑色、 文字行距10像素。 12 U

8、I设计规范说明书 第13页 页面tab切换按钮：Tab切换按钮采用10.5pt、 宋体、 黑色 13 UI设计规范说明书 第14页 Tab页面的选项卡偏小，对用户体验感觉不好，推荐大小：116*32像素 标题菜单：菜单标题文字一般采用10.5pt，间距默认。 表格文字：表格文字标题部分统一采用10.5pt黑色宋体字，表格内容采用9pt字体。其中标14 UI设计规范说明书 第15页 题文字都采用居中对齐的方式，表格内的文字采用左对齐或者右对齐的方法。一个表格文字不能有大有小。 如那样就不合理，文字大小太混乱 如标题栏目的文字有大有小，应该统一为10.5pt；tab选项卡的文字偏小，文字应该为10

9、.5pt，便于客户体验操作 如表格内的文字当出现3个或者2个的时候2个文字的字体必须中间有空格，与三个文字的两边都对齐， 不合理 15 UI设计规范说明书 第16页 不合理 页面元素 1、 按钮：按钮风格相同，大小相似，字体一致 无效按钮要屏蔽。如高：24像素，宽：根据文字长度定；按钮的文字居中，字体统一大小10.5pt，上、右、下、左的边距分别为：13px,11px,13px,11px 按钮之间的间距统一为8px 2、表格：表格整体色调采用灰调，便于医生、护士长时间操作部视觉疲劳，表格分为标题部分，主体内容部分，标题部分应该用相应的颜色加以区别，表格隔行应用不同的颜色加以区别。表格选中行应用

10、色调区分，表格的行高为25像素。表格四周的文字要有空隙padding属性2px。不同表格之间必须有对齐。如三个表格之间表格的顶部、 底部都应该有对齐，表格之间应有空隙，空隙。 8像素 16 UI设计规范说明书 第17页 17 UI设计规范说明书 第18页 3输入框： 必输项 1）必输项中不可为空，不可输入空格 2）必输项给出必输项标识 字段长度 超过数据库规定长度时不允许输入 格式校验 1）身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定 日期格式 1）日期显示格式一致，如 ：yyyy-mm-dd 2）使用日期控件，尽量不是手工录入 特殊字符 1）输入区域输入特殊字符，插入数据库时

11、不出错或提示不允许输入特殊字符。特殊字符包括：=$%￥&#等 英文输入 英文输入不区分大小写，不可输入汉字、数字及特殊字符 数值字段 只能输入+ - 09及功能键(BackSpace 光标) 字符字段 1）如果支持日韩文字，则要判断全角假名/半角假名 单行文本框/多行文本框 1) 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识 附件 1）可正常添加符合格式的附件 2）附件可正常打开和保存，附件名较长时可正常操作 3）直接输入错误的附件地址，保存时应给出提示信息 4

12、）附件打开/保存到本地时，文件名要显示原文件文件名 密码输入 1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度 2）程序中应给出文字说明密码的可输入长度入无效；对于多行文本框给出最大字符数标18 UI设计规范说明书 第19页 页面色调 页面色调以现有的银灰调为准，避免客户视觉疲劳，避免出现大面积纯度高亮的颜色 选项卡背景颜色：R：222 G：227 B：227 通用表格色调 表格标题色调： R：200 G：203 B：210 表格主体色调： R：238 G：238 B：238 表格选中条颜色：R：116 G：132 B：155 19 UI设计规范

13、说明书 第20页 用户界面行为 鼠标 1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；系统忙时显示沙漏形状 系统响应时间 系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则： 响应时间长度界面设计： 1）0-5秒鼠标显示成为沙漏； 2）5秒以上显示处理窗口，或显示进度条； 3）一个长时间的处理完成时应给予完成警告信息。 光标定位 1）打开新增页面时，光标初始定位在第一个待输入的文本区 2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入 3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点 4）可写控件检测到非法输入后应给出说明并能自动获得焦点 TAB键 1）界面支持键盘自动浏览按钮功能。即TAB自动切换功能 2）Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式 布局 1）窗体控件布局和间距尽量与Windows标准保持一致 20 UI设计规范说明书 第21页 2）尽量采用Dock和锚点来让布局合理 3）尽量让窗体中显示大部分常用功能 21