UI设计规范说明书三篇.pdf

UI设计规范说明书三篇

篇一：UI设计规范说明书

目录

概要3

登录页面4

1.启动4

2.登录页面元素4

导航菜单5

1.弹出框比例8

2.弹出框风格8

3.弹出框边界8

4.弹出元素对齐8

整页面10

字体规范11

页面元素15

页面色调18

用户界面行为19

第1页共61页

概要

界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同

的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确

保一致。

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

理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致

的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息

显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂

的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

第2页共61页

登录界面

1.启动

目前我们的pride、EMRS系统首页登录都是以（图1）的展现方式，有2个页面，

此法太过累赘，同时跳出框也把产品的logo信息给遮住，可以以一个页面的方

式来显示不需要2个页面，类似（图2）。

（图1）

2.（图2）

3.登录页面元素

登录页面的基本元素包括：输入框、按钮、进度条。这样的好处就是以一个页

面代替2个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面

进度

第3页共61页

导航菜单

规范

1）菜单深度一般不要超过三层

2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。

（图3）

导航如不是客户特俗要求的定制，均制成类似以上的导航（图3），采用windows

标准的定制导航界面，导航必需兼容1024*768、1280*800、1440*900三个主流

分辨率，其中默认分辨率为1024*768。

（图4）

第4页共61页

（图5）

【1】标题区：显示当前用户姓名、所属科室。字体：15像素，黑色，加粗

【2】工具栏区：可显示二级菜单相应栏目。字体9pt，不加粗，黑色，每个栏

目必须有快捷键，栏目间的间距为20像素

【3】二级菜单区：二级菜单字体为9pt，宋体，不加黑，行距10像素；所有的

二级菜单栏目都应该有相应的图标设计。（图5）

【4】自定义栏目区：自定义医生所需要显示的快捷方式

【5】最大、最小、关闭区：按钮必须醒目（操作习惯和风格和PCwindows系统

一致）、操作性强

第5页共61页

窗口风格

1）所有窗口最大化、最小化风格要一致

2）报错页面的风格一致，最好有统一的报错页面

3）类似功能的窗口打开的风格要一致

4）相同功能在不同模块的名称要一致

5）子窗体应尽量在显示在主窗体的左上或居中放置

6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容

7）窗体最小化/最大化时，控件也要随着窗体而缩放

1.详细：

（图5）

第6页共61页

（图6）

，右上角的关闭按钮最大最小化按钮，都统一改成系统弹出框的长、宽

比例为3:1

2.弹出框比例

系统弹出框的长、宽比例为3:1，功能页面弹出框长和宽的比例为5:4

3.弹出框风格

所有的弹出框右上角的关闭按钮最大最小化按钮，都统一改成，

弹出框四周的边距为13像素,（图5）风格上和windows操作习惯尽可能一致。

弹出框边界

病人基本信息显示：床号、姓名、病人ID、住院号、性别、年龄