UI设计规范说明书

EMRS设计规范手册
V1・0
概要 (3)
登录页面 (4)
1.启动 (4)
2.登录页面元素 (5)
导航菜单 (6)
1.弹出框比例 (9)
2.弹出框风格 (9)
3.弹出框边界 (9)
4.弹出元素对齐 (9)
整页面 (11)
字体规范 (12)
页面元素 (16)
页面色调 (19)
用户界面行为 (20)
界面设计中保持界面的一致性。

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

界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调
统一。

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

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

（图1）
曲医11匚科技有晦盏旬@3011-2020
（图2）
2.登录页面元素
2个页登录页面的基本元素包括：输入框、按钮、进度条。

这样的好处就是以一个页面代替
面，简洁明了，登录页面都需要加入进度条，便于客户等待页面进度
导航菜单
规范
1） 菜单深度一般不要超过三层
2） 菜单层次太多时应给出返回主窗口、主分支的快捷链接。

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

（图4）
•在
料Is lA\.l Iff
的一
贰'lal*耳
引
\ ■刊 feaiK 痛丄.山|4宾
•TM9幅
ASMJ ns 阳啲・无 "SRSmajM 起HL 耳 绘阳屈岁 lhiltdLert ；HE ARiStfi 旳祖谊柚•
SKBnW- EflU-frW 1?： ]1 圍
ARQIHi 凶WH ■嘅证蜡朮谁聞
住
sffittl 稚手门盘M
■
田童
驰
珠遼
fflia
险=!宝欢■】0 ^asffli as
【1】标题区：显示当前用户姓名、所属科室。

字体： 15像素
【2】工具栏区：可显示二级菜单相应栏目。

字体 9pt ，不加粗 捷键，栏目间的间距为 20像素
【3】二级菜单区：二级菜单字体为 9pt ，宋体，不加黑，行距 目都应该有相应的图标设计。

（图5）
【4】自定义栏目区：自定义医生所需要显示的快捷方式
【5】最大、最小、关闭区： 按钮必须醒目（操作习惯和风格和 操作性强卅一百所属科室’普通外科
（图
5）
，黑色，加粗 ，黑色，每个栏目必须有快 10像素；所有的二级菜单栏 PC windows 系统一致）、
囱口风
格
1）所有窗口最大化、最小化风格要一致
2）报错页面的风格一致，最好有统一的报错页面
3）类似功能的窗口打开的风格要一致
4）相同功能在不同模块的名称要一致
5）子窗体应尽量在显示在主窗体的左上或居中放置
6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容7）窗体最小化/最大化时，控件也要随着窗体而缩放
1. 详细：
（图5）
囱口风格
（图6）
，右上角的关闭按钮 最大最小化按钮，都统一改成
•日亜■ ■系统弹出框的长、宽比例为
3:1
2. 弹出框比例
系统弹出框的长、宽比例为 3:1，功能页面弹出框长和宽的比例为 5:4
3. 弹出框风格
所有的弹岀框右上角的关闭按钮 最大最小化按钮，都统一改成□-
弹出框四周的边距为13像素，（图5）风格上和windows 操作习惯尽可能一致。

4. 弹出框边界
\--rt phf - 0
匚區区|
KBE? H'EI RSIU 歸iilZ ） RFiS'HI IMCD HBiB ：-
也』akJ 舉Q 理］j L ： >> □ C| R R 』-丄* -电-/*淇」*
-■
nr^ 上I ■ *
■ flEFEtti •玉4由曲
W
I U J I H FW .."勵Hu 驱Jf 畑I "勒EW 斂计 •・!£■咸 • llfi 倒N … 丨砂.血… CH = < i ■寄* 7事勺』0:£1
（图6）
弹出框边界要与背景有区分，边界要清楚 （图6）
所有弹出框最大化不要遮住
windows 任务栏（图6）
I ® C ttJg
岀 4 C •吐 _________________________________________________
4i ：i ©浮逊W4 m.2KB i4姙酩州加•网 2D1J 鼻27 这叫：04・
100% IRAJ|iaU3
在科新I A K ..1床住=
竟'
|?.需盍和\
L 王 亚CTES7—
百） :赫闻EST-百 丢電
戛庵fl 胚
A#13M
2 册：LCTF5T —
百） 15：
5 Hi 厝［TEST-百
E 花宝鱼EL 百
垃堆ELITIST —百P
11绷塚储ITETT
口 Si iS Cresi^S
50巒劇怔CIKT"®
朗榊龜Ifresr —百 號戛昭WEST —百
口 M ■■节 insr-
6
!X 帝林"
怖交負亦
日ffl
王
T.S2TEI
f 件
4乩碎
整
*情 ■整查
性别、
性别、年 龄、身份、费别、出生地、证件号、入院日期、入院方式、入
5. 弹出元素对齐
弹出框的文字要有对齐
（图
7）
如（图7）弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。

当不同长度文
字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入框统一左对齐。

如（图8）
病重—天
ICU天
HBsAg V
（图8）
如（图10）弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文字对其空间不够，可考虑换行
病薬静索
i：翻条病人ID1 1经泊医主性捌□男□女□旦他査询IQ}
出15^1 年器r 出碗科呈［出尿日期lOQOO-OO-OO.Xil ~ |oooo-w-oo 诊斷編码
O ICt-S ©TCP-10 O KD-9^ICt-10 跚：鞋手术—曲
（图10）
整页面
整页区分于弹出页面，包含导航主页不是以弹出
的形式来显示页面，整页必须兼容1024*768
1280*800 1440*900等三个主流的分辨率其中默
认分辨率应该为1024*768 。

规范：UI字体、色彩要一致整体色彩搭配要融为一体，起提示作用的部分要清楚醒目不可修改的字段，统一使用灰色文字显示
页面标题：（图11）14号加粗宋体，黑色，字体间距默认
O当前用户二TEST-百所属科室書普通外科
（图11）
主菜单：（图12）12号字体，宋体，字体间距默认，菜单之间的间距为20像素，每个菜单项目都必须有快捷键
置若⑺杳君M 幽ten 杳询© 柔统
（图12）
下拉菜单：（图12）下拉菜单采用9pt、宋体、黑色、文字行距10像素。

操作Q）查询©
首页
病程
医嘱
检查
手术
急诊手术
用血
随访►
重症监护
门诊会诊
换药处理
临床路径►
区域协同k
（图12）
页面tab切换按钮：Tab切换按钮采用10.5pt、宋体、黑色
（图 13）
味弓1 姓名匕经治医 ［财1所在病府:晋外科护理单元 蝕洽医生,TEST —■&
v 捕人ID ： 35101016
住院号：10181 在 别：畀 年龄：3坯
S 侏军農上
费肌军幅保
迄斯：11
苜扩眉■ 首页
S 脸验于朮
用血匪徑史贾用备；E 录护理
期川鋼：運氏期O I 阙 O 全部
医嘱状态 ®执行O 全梯Q 已俸 昱示伺耳 O 已执行◎韶见示0医嘔本
Tab 页面的选项卡偏小，对用户体验感觉不好，推荐大小： 116*32像素
标题菜单：（图14）菜单标题文字一般采用 10.5pt ，间距默认。

TEST —百医生所属病人2011年8月8日医疗信息一览表
病人统if O i£K41 C
o O^Ao 手术惜况O 安丼o 其中：O 杆丈0 O 犬o O 中。

：水0 危重情况。

（3病危11 O 昙严F 口
O-®20
护23 O-B S IO O 二镇弓 0三松2
（图 14）
表格文字：表格文字标题部分统一采用 10.5pt 黑色宋体字，表格内容采用 9pt 字体。

其中标
一在科病人\床位一览\
一患者窑引\
题文字都采用居中对齐的方式，表格内的文字采用左对齐或者右对齐的方法（视情况而定）一个表格文字不能有大有小。

如（图14）那样就不合理，文字大小太混乱
如（图15）标题栏目的文字有大有小，应该统一为10.5pt；tab选项卡的文字偏小，文字应该为10.5pt，便于客户体验操作
如（图16）表格内的文字当出现3个或者2个的时候2个文字的字体必须中间有空格，与
三个文字的两边都对齐，
（14）不合理
医FF达
手术佶息
（15）不合理
(图16)
1、按钮：按钮风格相同，大小相似，字体一致无效按钮要屏蔽。

如（图17）高：24像素,
宽：根据文字长度定；按钮的文字居中，字体统一大小10.5pt，上、右、下、左的边距分别为：13px,11px,13px,11px 按钮之间的间距统一为8px
（图17）
2、表格：（图18）表格整体色调采用灰调，便于医生、护士长时间操作部视觉疲劳，表格
分为标题部分，主体内容部分，标题部分应该用相应的颜色加以区别，表格隔行应用不同的颜色加以区别。

表格选中行应用色调区分，表格的行高为25像素。

表格四周的文字要有空隙padding属性2px。

不同表格之间必须有对齐。

如（图19）三个表格之间表格的顶部、底部都应该有对齐，表格之间应有空隙，空隙。

8像素
床
性別
柚 m
Jflff 手才邛LJ 未肓无酸
医打
医生
2耶
花通外科 2
5S 0
白
转常恨TES —百 0
普蟄卜科 g mi 43
Q
口 1
TEST —百 -1OW23
普通外科 4 翊玲
巨峙
TEST-百 13171
普通州科 6
異 no Q 口
TE5HW Q
花通外44 7
胃 42
0 曲
巨峙
TEST —百 Q
普通怦科 0
33 0
口
11
农咅医
TEST-百
普通弊44 17 经洁医
33 Q
11
fflW-SK
TEST-百
Q 普通骼科
96
21 Q 二级
艾滋需
Q 普通井料 1C6 HAS <3 Q
辄医夜 TEST-百 Q 普通悴科 115 sat 32 Q
1
军臥E
TET-百
Q 普通井料 1 王S
Z5
* 二趣
杖悽担吃国
SR
TEST -5
■P940S
普通外44 a 欧吹
羁 33 * £r
11
TEST —百 0
普通外44 12 ftsiz
36
#
*
而归&］风恪 5】疣保 TEST —百
Q
普癣隔
13
卑 帕 * 34而如果 市皴恨TESTY -3Q
普通井科
18 *
«««
TEST 〜百
a
晋通井科 豳
與 *
让建SP 恪
离休壬TKT Y
a
普通井科 34
ST
*
仃
闻幣国很惶讶醫
软路禽
TKL 百 g 晋通并科 113
自功化
*
EIS
TKT-S 1123
显
畀 St -®
U
TE5L 百 g
15
SA
卑 43 -ts
白
11
TESL 百 a
迎通井科 24
jfr s -ts
归恢 单世砒
TEST-百
Q
晋通井科
輕后矍 羁 7T —R —打
弦状动舟躬样瓏忧性心SRSffi
14245.4T
Kff?
晋通护科 42 At^S
31 —區 二堀 术后&01天 硕症 rhE'ffl TKL 百 -2H>1
晋通井科 舸 儿豎节
TQ —K
U
SB
TESTAS
g
（图 18）
检査模扳管理
CT
S SCT
A
CT 呈咽韶（冠状位】- CT 鱼咽部1平扫） CT 豊咽部（平扫+噌强） crSD 酶呼曰三维重崖 -cr£咽部（増强扫描+三雅； 啪像平扫煌脛CIVE 】 6耳CT
CT 耳"
CT 耳【平狂+二维車產） …CT 耳【増弟扫㈱三雄更建： b 唯CT
询（平扫）
谕I 平扫+増適 刑（平扫+三维車建） 询（増强扫斷三维重建］ G 颈勰2T
谕韵舞星曰S+三维重i CT 孫部（平扫） 瀾韶（平扫倔虽） 请韶（亘噌）
CT 血管成偉曙强（颈轻血， 员部（平扫十三维車律）
-款腔CT 谧腔（平扫） erm 虽（平扫+酱劭 谁脛（支増） er ■盘腔（平扫十三维重建〕 诡腔（醫虽押描十三维重； 诡管成偉贈逼（盆脛血 旦它
-ifcr
CT 幌腺（平扫僭豹 cm （平扫+三題逮） CT 總（増强扫描+三维更崔. CT 腮砰扫） B 上腹戟CT
CTlfiSa （平扫） CT 上腹韶
【平扫储强）
v
I nF —4E , n 8JM i
世 』 >
（图 19）
模板名称
检查类型
创建医生
创建时间 A.
111 C T
HST —百 3011-7-29 1. L
123
尿动力 TEST —百 2010-10-20 ..
23423114 磁共振 TEST —百 3010-10-18 …
匸 听力室 難成金 2010-9-15 1…
323 琏共振 7ES7—百 2© 10-10-1S
4个
TEST —舀 3010-9-13 1...
3S C T
T^ST^ 育 2011-7-29 1..
aaaa 听力室 TEST —百 201.0-10-12 …
iheng
尿动力 TEST —百 3011-1-28 1..
丸二
红外 TEST —育 2010-10-11 …
从说地方很多执恪化 神內 TEST —百 20U-1-10 1. r
其额定 红外 TEST —百
3010-10-15 ..
徐館 听R 室 TEST —H 201Q-10-9 1..
徐葭2 听力室 TEST —百
2010-10-9 i … 徐葭3 確共振
TESL 百
2010-10-14 … 7 护昭 ■U 电 5F ruj^H ■■ r? 我|「
................... 1 画
塾模板辽）「删涂模板⑻:
模板详细信息
模板茗称：
in
执行科室
»（D ）
保存①
3输入框:
必输项
1）必输项中不可为空，不可输入空格
2）必输项给出必输项标识（*）
字段长度
超过数据库规定长度时不允许输入
格式校验
1）身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定
日期格式
1）日期显示格式一致，如：yyyy-mm-dd
2）使用日期控件，尽量不是手工录入
特殊字符
1）输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。

特殊字符包括：'"=~$%A% ¥ &#@ 等
英文输入
英文输入不区分大小写，不可输入汉字、数字及特殊字符
数值字段
只能输入+ - 0~9及功能键（Backspace光标）
字符字段
1）如果支持日韩文字，则要判断全角假名/半角假名
单行文本框/多行文本框
1）长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。

建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识
附件
1）可正常添加符合格式的附件
2）附件可正常打开和保存，附件名较长时可正常操作
3）直接输入错误的附件地址，保存时应给出提示信息
4）附件打开/保存到本地时，文件名要显示原文件文件名
密码输入
1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写, 密码的可输入长度
2）程序中应给出文字说明密码的可输入长度入无效；对于多行文本框给出最大字符数标
页面色调以现有的银灰调为准，避免客户视觉疲劳，避免出现大面积纯度高亮的颜色选项卡背景颜色（图20）: R: 222 G: 227 B: 227
（图20）
通用表格色调（图21）
表格标题色调：R：200G: 203 B :210
表格主体色调：R：238G: 238 B :238
表格选中条颜色:R：116G: 132 B :155
（图21）
鼠标
1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；系统忙时显示沙漏形状
系统响应时间
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影
响到用户的操作节奏，并可能导致错误。

因此在系统响应时间上坚持如下原则：
响应时间长度界面设计：
1）0-5秒鼠标显示成为沙漏；
2）5秒以上显示处理窗口，或显示进度条；
3）—个长时间的处理完成时应给予完成警告信息。

光标定位
1）打开新增（修改）页面时，光标初始定位在第一个待输入的文本区
2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点
4）可写控件检测到非法输入后应给出说明并能自动获得焦点
TAB键
1）界面支持键盘自动浏览按钮功能。

即TAB自动切换功能
2）Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式
布局
1）窗体控件布局和间距尽量与Windows标准保持一致
2）尽量采用Dock和锚点来让布局合理
3）尽量让窗体中显示大部分常用功能。