1       前言

1.1   编写目的

本规范给出了在Windows平台下窗口程序的交互设计/用户界面设计指南。严格来说，交互设计的涵义比起用户界面设计要广得多，但在本篇中为描述简便起见，将两者等同。

参考《设计模式-可复用面向对象软件的基础》一书，本文同样使用“模式”来描述UI设计中的各类内容。

预期的读者：交互设计/UI设计人员、测试人员、软件维护人员以及技术管理人员。

1.2   项目背景

产品名称
产品名称		英文缩写
产品简称		版本号
产品编号
任务提出者
开发者
用户
同其他系统的关系

 

1.3   定义

■ 序号	术语 / 缩写	定义
1.
2.

 

1.4   参考资料

■ 序号	资料名	文件编号	发表日期	出版单位和作者
1.	《设计模式——可复用面向对象软件的基础》			Gang of Four
2.	《冲破高技术营造的牢笼——软件创新之路》			Alan Cooper，VB之父
3.

 

2       总体要求

2.1   一致性

对于UI设计而言，一致性是至关重要的。一致性具有两种含义，第一个含义是指在同一个TabSheet，或者Form（窗口），甚至在整个软件系统中，强调整体风格的一致，包括控件颜色、字体、大小、间距等等；第二个含义是强调软件产品在界面风格以及使用方式上要照顾人们已经养成的使用习惯，应当和操作系统以及大多数流行的软件保持一致。

比如按钮快捷键的定义，要么全都采用“应用(&A)”的方式，要么全都采用“应用[&A]”的方式。在一个画面上，甚至要求所有出现的具有可比性的bevel长度一致。并且，所有控件元素的字体、颜色、相同位置上的边距等均应该一致。

如下图所示，在同一个TabSheet中，为了使界面更美观以及总体风格的一致，五个编辑框/下拉选择框使用了一致的颜色和宽度：

 

2.2   分辨率

按照1024*768的显示标准来决定可见对象（窗体）的大小和相对位置。

2.3   字体和颜色

一般的用户界面应采用宋体，9号字，颜色使用缺省的clWindowText。

可用控件的颜色采用默认设置（如编辑框的背景为clWindow，内容的颜色为clWindowText；按钮的背景为clBtnFace，文字为clWindowText）。

只读的编辑框控件，其背景采用clBtnFace的颜色。

当控件不可用时，要求其颜色能够和可用时区分明显，一般情况下将其Enable属性设置为False后控件都能够自行调整颜色。

2.4   布局

2.4.1    尺寸

窗体：要求宽度和高度之比具有美感。推荐的宽高比例为3:2或者4:3。

按钮：高度21，宽度依据其上的文字多少而定。标准的按钮（如显示“确定”或者“应用(&A)” ）其宽度应当为75。在一个窗体内（或PageControl的一个TabSheet内），要求按钮的宽度一致。

编辑框(Edit)：采用缺省高度；宽度根据使用的场合、容器自身的宽度以及容器内其他控件的宽度灵活而定，其要领是整齐划一。如下图中的编辑框，其宽度和TabSheet内标签的宽度保持一致，并且控件的右边和Bevel对齐。

又如下图，几个编辑框宽度一致，且和底部的按钮右对齐。

2.4.2    对齐

对于控件的布局（排列），要求每列从左对齐，每行从顶对齐。对于属性窗口底部的操作按钮，则要求从右边对齐。

不鼓励，也不推荐为了对齐而在标签的文字中添加空格的做法。

从左对齐，如下图的红线所示；从顶对齐，如下图的绿线所示；从右对齐，如下图的蓝线所示。

2.4.3    间距

控件距离父控件（容器）的顶边距和左边距均为8个像素。如下图所示：

即

同级控件（即同在一个容器内的控件）互相之间的距离应当为6个像素。控件距离容器的右边距和底边距均为7个像素。如下图所示：

2.5   标点符号

为和操作系统的风格保持一致，在通常情况下，控件的Caption必须使用英文的标点符号。如下图：

程序中的一些消息框，若消息内容是纯英文的，则使用英文的标点符号；若消息（句子）整体是中文的，则应该使用中文的标点符号。

使用英文的标点符号，除了能够较好地和操作系统的风格保持一致外，还有助于减轻软件系统将来向国际化版本迁移时的工作负担。