文档介绍：该【UI设计规范说明书三篇 】是由【小屁孩】上传分享，文档一共【61】页，该文档可以免费在线阅读，需要了解更多关于【UI设计规范说明书三篇 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。 : .
UI设计规范说明书三篇--第1页
UI设计规范说明书三篇
篇一：UI 设计规范说明书
目录
概要................................................................ 3
登录页面............................................................ 4
1. 启动 ....................................................... 4
2. 登录页面元素 ............................................... 4
导航菜单............................................................ 5
1. 弹出框比例 ................................................. 8
2. 弹出框风格 ................................................. 8
3. 弹出框边界 ................................................. 8
4. 弹出元素对齐................................................. 8
整页面............................................................. 10
字体规范........................................................... 11
页面元素........................................................... 15
页面色调........................................................... 18
用户界面行为....................................................... 19
UI设计规范说明书三篇--第1页 : .
UI设计规范说明书三篇--第2页
概要
界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同
的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确
保一致。
界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合
理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致
的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息
显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂
的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。
UI设计规范说明书三篇--第2页 : .
UI设计规范说明书三篇--第3页
登录界面
1. 启动
目前我们的 pride 、EMRS 系统首页登录都是以 （图 1）的展现方式， 有 2 个页面，
此法太过累赘，同时跳出框也把产品的 logo 信息给遮住，可以以一个页面的方
式来显示不需要 2 个页面，类似（图 2）。
（图 1）
2. （图 2）
3. 登录页面元素
登录页面的基本元素包括：输入框、按钮、进度条。这样的好处就是以一个页
面代替 2 个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面
进度
UI设计规范说明书三篇--第3页 : .
UI设计规范说明书三篇--第4页
导航菜单
规范
1）菜单深度一般不要超过三层
2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。
（图 3）
导航如不是客户特俗要求的定制， 均制成类似以上的导航 （图 3），采用 windows
标准的定制导航界面，导航必需兼容 1024*768 、1280*800 、1440*900 三个主流
分辨率，其中默认分辨率为 1024*768 。
（图 4）
UI设计规范说明书三篇--第4页 : .
UI设计规范说明书三篇--第5页
（图 5）
【1】标题区：显示当前用户姓名、所属科室。字体： 15 像素，黑色，加粗
【2】工具栏区：可显示二级菜单相应栏目。字体 9pt ，不加粗，黑色，每个栏
目必须有快捷键，栏目间的间距为 20 像素
【3】二级菜单区：二级菜单字体为 9pt ，宋体，不加黑，行距 10 像素；所有的
二级菜单栏目都应该有相应的图标设计。 （图 5）
【4】自定义栏目区：自定义医生所需要显示的快捷方式
【5】最大、最小、关闭区：按钮必须醒目（操作习惯和风格和 PCwindows 系统
一致）、操作性强
UI设计规范说明书三篇--第5页 : .
UI设计规范说明书三篇--第6页
窗口风格
1）所有窗口最大化、最小化风格要一致
2）报错页面的风格一致，最好有统一的报错页面
3）类似功能的窗口打开的风格要一致
4）相同功能在不同模块的名称要一致
5）子窗体应尽量在显示在主窗体的左上或居中放置
6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容
7）窗体最小化 /最大化时，控件也要随着窗体而缩放
1. 详细：
（图 5）
UI设计规范说明书三篇--第6页 : .
UI设计规范说明书三篇--第7页
（图 6）
，右上角的关闭按钮最大最小化按钮， 都统一改成 系统弹出框的长、 宽
比例为 3:1
2. 弹出框比例
系统弹出框的长、宽比例为 3:1 ，功能页面弹出框长和宽的比例为 5:4
3. 弹出框风格
所有的弹出框右上角的关闭按钮最大最小化按钮，都统一改成 ，
弹出框四周的边距为 13 像素 ,（图 5）风格上和 windows 操作习惯尽可能一致。
弹出框边界
病人基本信息显示：床号、姓名、病人 ID 、住院号、性别、年龄、身份、费别、
出生地、证件号、入院日期、入院方式、入院诊断、预交金、过敏史、检查检
验结果总览。
（图 6）
弹出框边界要与背景有区分，边界要清楚（图 6）
UI设计规范说明书三篇--第7页 : .
UI设计规范说明书三篇--第8页
4. 所有弹出框最大化不要遮住 windows 任务栏（图 6）
5. 弹出元素对齐
弹出框的文字要有对齐
（图 7）
如（图 7）弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。当不
同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入
框统一左对齐。如（图 8）
（图 8）
如（图 10 ）弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文
字对其空间不够，可考虑换行
（图 10 ）
UI设计规范说明书三篇--第8页 : .
UI设计规范说明书三篇--第9页
整页面