UI设计规范说明书文档格式.docx
《UI设计规范说明书文档格式.docx》由会员分享，可在线阅读，更多相关《UI设计规范说明书文档格式.docx（24页珍藏版）》请在冰豆网上搜索。
辨率为1024*768。
（图4）
卅一百所属科室’普通外科
（图5）
，黑色，加粗
，黑色，每个栏目必须有快
10像素；
所有的二级菜单栏
PCwindows系统一致）、
【1】标题区：
显示当前用户姓名、所属科室。
字体：
15像素
【2】工具栏区：
可显示二级菜单相应栏目。
字体9pt，不加粗
捷键，栏目间的间距为20像素
【3】二级菜单区：
二级菜单字体为9pt，宋体，不加黑，行距
目都应该有相应的图标设计。
（图5）
【4】自定义栏目区：
自定义医生所需要显示的快捷方式
【5】最大、最小、关闭区：
按钮必须醒目（操作习惯和风格和
操作性强
1）所有窗口最大化、最小化风格要一致
2）报错页面的风格一致，最好有统一的报错页面
3）类似功能的窗口打开的风格要一致
4）相同功能在不同模块的名称要一致
5）子窗体应尽量在显示在主窗体的左上或居中放置
6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容
7）窗体最小化/最大化时，控件也要随着窗体而缩放
1.详细：
（图6）
，右上角的关闭按钮最大最小化按钮，都统一改成•日亜■■系统弹出框的长、宽比例为3:
1
2.弹出框比例
系统弹出框的长、宽比例为3:
1，功能页面弹出框长和宽的比例为5:
4
3.弹出框风格
所有的弹岀框右上角的关闭按钮最大最小化按钮，都统一改成□-
弹出框四周的边距为13像素，（图5）风格上和windows操作习惯尽可能一致。
4.弹出框边界
\--rtphf-0
匚區区|
KBE?
H'
EIRSIU歸iilZ）RFiS'
HIIMCDHBiB：
-
也』akJ舉Q理］jl：
>
>
□C|RR』-丄*-电-/*淇」*
-■
在科新IAK..1床住=竟'
|?
.需盍和\
L王亚CTES7—百）:
赫闻EST-百丢電
戛庵fl胚
A#13M
2册：
LCTF5T—百）15：
5Hi厝［TEST-百
E花宝鱼EL百
垃堆ELITIST—百P
11绷塚储ITETT
口SiiSCresi^S
50巒劇怔CIKT"
®
朗榊龜Ifresr—百
號戛昭WEST—百
口M■■节insr-6
!
X帝林"
怖交負亦
日ffl
王T.S2TEI
f件
4乩碎
整
*情
■整查
性别、
性别、年
龄、身份、费别、出生地、证件号、入院日期、入院方式、入
院诊断、预交金、过敏史、检查检验结果总览。
nr^上■*■flEFEtti•玉4由曲wiUjIhFW.."
勵Hu驱Jf畑I"
勒EW斂计•・!
£
■咸•llfi倒N…丨砂.血…CH=<
i■寄*7事勺』0:
弹出框边界要与背景有区分，边界要清楚（图6）
所有弹出框最大化不要遮住windows任务栏（图6）
5.弹出元素对齐
弹出框的文字要有对齐
（图7）
如（图7）弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。
当不同长度文
字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入框统一左对齐。
如（图8）
病重
—
天
ICU
HBsAg
V
（图8）
如（图10）弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文字对其空间不够，可考虑换行
i：
翻条伸］
病人ID
11
病薬静索
经泊医主
性捌□男□女□旦他査询IQ}
出15^1年器r出碗科呈［出尿日期lOQOO-OO-OO.Xil~|oooo-w-oo
诊斷編码
OICt-S©
TCP-10OKD-9^ICt-10跚：
鞋手术—曲
（图10）
整页面
整页区分于弹出页面，包含导航主页不是以弹出
的形式来显示页面，整页必须兼容1024*768
1280*8001440*900等三个主流的分辨率其中默
认分辨率应该为1024*768。
字体规范
规范：
UI字体、色彩要一致整体色彩搭配要融为一体，起提示作用的部分要清楚醒目不
可修改的字段，统一使用灰色文字显示
页面标题：
（图11）14号加粗宋体，黑色，字体间距默认
当前用户二TEST-百所属科室書普通外科
（图11）
主菜单：
（图12）12号字体，宋体，字体间距默认，菜单之间的间距为20像素，每个菜单
项目都必须有快捷键
置若⑺杳君M幽ten杳询©
柔统
（图12）
下拉菜单：
（图12）下拉菜单采用9pt、宋体、黑色、文字行距10像素。
操作Q）查询©
首页
病程
医嘱
检查
手术
急诊手术
用血
随访►
重症监护
门诊会诊
换药处理
临床路径►
区域协同k
页面tab切换按钮：
Tab切换按钮采用10.5pt、宋体、黑色
一在科病人\床位一览\一患者窑引\
（图13）
味弓1
姓名匕经治医
［财1所在病府:
晋外科护理单元
蝕洽医生,TEST—■&
v捕人ID：
35101016住院号：
10181在别：
畀年龄：
3坯
S侏军農上费肌军幅保迄斯：
11
苜扩眉■
首页S脸验于朮
用血匪徑史贾用备；
E录护理
期川鋼：
運氏期OI阙O全部医嘱状态®
执行O全梯Q已俸昱示伺耳O已执行◎韶见示0医嘔本
Tab页面的选项卡偏小，对用户体验感觉不好，推荐大小：
116*32像素
标题菜单：
（图14）菜单标题文字一般采用10.5pt，间距默认。
TEST—百医生所属病人2011年8月8日医疗信息一览表
病人统ifOi£
K41CoO^Ao手术惜况O安丼o其中：
O杆丈0O犬oO中。
水0
危重情况。
病危11OF口O-®
20护23O-bSioO二镇弓0三松2
（图14）
表格文字：
表格文字标题部分统一采用10.5pt黑色宋体字，表格内容采用9pt字体。
其中标
题文字都采用居中对齐的方式，表格内的文字采用左对齐或者右对齐的方法（视情况而定）
一个表格文字不能有大有小。
如（图14）那样就不合理，文字大小太混乱
如（图15）标题栏目的文字有大有小，应该统一为10.5pt；
tab选项卡的文字偏小，文字应
该为10.5pt，便于客户体验操作
如（图16）表格内的文字当出现3个或者2个的时候2个文字的字体必须中间有空格，与
三个文字的两边都对齐，
诊断对照组
诊斷符合恬况
]|J诊与出阮
不肯宦~
入院与出尻
术前与术后
\
12像素
枚射与术后
临床与病理
hi
放射与病理
临床与尸检
（14）不合理
医FF达<
T^ST—6）
坤2玻取：
所在師扇吾外科护理单元
V厢人Hr；
30101309
住祝坯L309性
肌n年骑
医仆
姓
笔
1铁路保经治医主：
TEST-百
島曲：
地亩
*别：
戡路保腥谧
r
己拎右检查检基手齐用曲爭
莊史齋用
帝击录护邂
住1
几就科室，普道扑斟
人就日期=201（1-1.2-0915：
11
砌悟况；
出院科室；
出院日朝；
医疗忖款肓武•：
军車训灌65
医煤特殊插种】
诊断話息
诊断对照時息
芋术
imwisis
盘虧帶合《况
门塗逾断2或1
□
2010-12^0915:
06
门逾与昨
2010-12-0915:
入躺出碗
帧術
2010^12-0915:
11v
放射与术后
手术佶息
手术容称
手术医师［助
1［助麻醉医师麻呼方式
切口
愈合
手术日期
A
0000-00-0000-：
00
v
（XKO-OO-D000：
00
oooc-oo-oo00:
（15）不合理
普通外科
96
苏为材
男
21
106
明日
43
（图16）
页面元素
1、按钮：
按钮风格相同，大小相似，字体一致无效按钮要屏蔽。
如（图17）高：
24像素,
宽：
根据文字长度定；
按钮的文字居中，字体统一大小10.5pt，上、右、下、左的边距
分别为：
13px,11px,13px,11px按钮之间的间距统一为8px
（图17）
2、表格：
（图18）表格整体色调采用灰调，便于医生、护士长时间操作部视觉疲劳，表格
分为标题部分，主体内容部分，标题部分应该用相应的颜色加以区别，表格隔行应用不同的
颜色加以区别。
表格选中行应用色调区分，表格的行高为25像素。
表格四周的文字要有空
隙padding属性2px。
不同表格之间必须有对齐。
如（图19）三个表格之间表格的顶部、底
部都应该有对齐，表格之间应有空隙，空隙。
8像素
床
性別
柚m
Jflff手才邛LJ
未肓无酸
医打
医生
2耶
花通外科
2
5S0
白
转常恨區
TES—百
普蟄卜科
g
mi
43Q
口
TEST—百
-1OW23
翊玲
巨峙
13171
普通州科
6
異
noQ
TE5HW
Q
花通外44
7
胃
420
曲
普通怦科
330
农咅医保
普通弊44
17
经洁医
33Q
fflW-SK
普通骼科
21Q
二级
艾滋需
普通井料
1C6
HAS
<
3Q
辄医夜
普通悴科
115
sat
32Q
军臥E匡
TET-百
王S
Z5*
二趣
杖悽担吃国
SR
test-5
■P940S
普通外44
a
欧吹
羁
33*
12
ftsiz
36#
*
而归&
］风恪
5】疣保
普癣隔
13
卑
帕*
34而如果
市皴恨健
TESTY
-3Q
普通井科
18*
«
TEST〜百
晋通井科
豳
與*
让建SP恪
离休壬谭
tktY
34
ST*
仃
闻幣国很惶讶醫
软路禽休
TKL百
晋通并科
113
自功化
EIS
TKT-S
1123
显
畀
St-®
U
TE5L百
15
SA
43-ts
TESL百
迎通井科
24
jfr
s-ts
归恢
单世砒
輕后矍
7T—R
—打
弦状动舟躬样瓏忧性心1E翳…
SRSffi
14245.4T
Kff?
晋通护科
42
At^S
31—區
二堀
术后&
01天
硕症
rhE'
ffl
-2H>
舸
儿豎节
TQ—K
SB
TESTAS
（图18）
检査模扳管理
CT
SSCTa
CT呈咽韶（冠状位】-CT鱼咽部1平扫）CT豊咽部（平扫+噌强）crSD酶呼曰三维重崖-cr£
咽部（増强扫描+三雅；
啪像平扫煌脛CIVE】
6耳CT
CT耳"
CT耳【平狂+二维車產）…CT耳【増弟扫㈱三雄更建：
b唯CT
询（平扫）
谕I平扫+増適刑（平扫+三维車建）询（増强扫斷三维重建］G颈勰2T
谕韵舞星曰S+三维重iCT孫部（平扫）瀾韶（平扫倔虽）请韶（亘噌）
CT血管成偉曙强（颈轻血，员部（平扫十三维車律）
-款腔CT谧腔（平扫）erm虽（平扫+酱劭谁脛（支増）er■盘腔（平扫十三维重建〕诡腔（醫虽押描十三维重；
诡管成偉贈逼（盆脛血旦它
-ifcr
CT幌腺（平扫僭豹cm（平扫+三題逮）CT總（増强扫描+三维更崔.CT腮砰扫）
B上腹戟CT
CTlfiSa（平扫）CT上腹韶【平扫储强）v
InF—4E,n8JMi
世』>
模板名称
检查类型
创建医生
创建时间
A.
111
CT
HST—百
3011-7-291.L
123
尿动力
2010-10-20..
23423114
磁共振
3010-10-18…
匸
听力室
難成金
2010-9-151…
323
琏共振
7ES7—百
2©
10-10-1S
4个
TEST—舀
3010-9-131...
3S
T^ST^育
2011-7-291..
aaaa
201.0-10-12…
iheng
3011-1-281..
丸二
红外
TEST—育
2010-10-11…
从说地方很多执恪化
神內
20U-1-101.r
其额定
3010-10-15..
徐館
听R室
TEST—H
201Q-10-91..
徐葭2
2010-10-9i…
徐葭3
確共振
2010-10-14…
护昭
■U电5F
ruj^H■■r?
jfiC-«
我|「
1画
塾模板辽）「删涂模板⑻:
模板详细信息
模板茗称：
in执行科室
»
（D）保存①
（图19）
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:
222G:
227B:
227
（图20）
通用表格色调
（图21）
表格标题色调：
R：
200
G:
203
B:
210
表格主体色调：
238
238
表格选中条颜色
:
116
132
155
诊断信息
用户界面行为
鼠标
1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；
系统忙时显示沙漏形状
系统响应时间
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影
响到用户的操作节奏，并可能导致错误。
因此在系统响应时间上坚持如下原则：
响应时间长度界面设计：
1）0-5秒鼠标显示成为沙漏；
2）5秒以上显示处理窗口，或显示进度条；
3）—个长时间的处理完成时应给予完成警告信息。
光标定位
1）打开新增（修改）页面时，光标初始定位在第一个待输入的文本区
2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入
3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点
4）可写控件检测到非法输入后应给出说明并能自动获得焦点
TAB键
1）界面支持键盘自动浏览按钮功能。
即TAB自动切换功能
2）Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式
布局
1）窗体控件布局和间距尽量与Windows标准保持一致
2）尽量采用Dock和锚点来让布局合理
3）尽量让窗体中显示大部分常用功能
升级会员 