用户界面设计规范

用户界面设计规范软件用户界面的重要性不言而喻。成功的Web应用软件必须满足以下三个要素：符合用户需求的功能、易于使用的界面、美观的界面设计。其中，用户界面设计是关键工作之一，而不是次要工作。本文旨在以用户界面(UI)设计理念和用户操作习惯为原则，提出WEB应用软件用户界面设计的原则、标准、约束和界面元素等详细要求，以保证界面设计的一致性、美观性、扩展性、安全性等。同时，本文规范界面(UI)开发人员在设计、制作、开发用户界面行为，避免页面效果不统一、不协调等问题。本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。具体范围包括Web软件用户界面(UI)设计原则、要素和具体细则内容，以及页面元素的应用范围、样式等详细定义。使用人员包括：界面设计人员、制作开发人员、界面测试评估人员。用户界面是人与软件系统进行交互的接口，实现用户与计算机之间的通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件，是软件系统成功与否的一个很重要因素。本文所指的页面，均基于1024×768的屏幕分辨率，并使用Pixel(像素)作为描述单位。参考资料包括《用户界面设计--有效的人机交互策略(第三版)》、《Web软件用户界面设计指南》、《GUI设计禁忌》、《软件人机界面设计》等。在页面设计方面，我们应该以用户界面(UI)设计理念和用户操作习惯为原则，尽可能地提高用户体验。Web软件的用户界面设计应该以易用性为首要考虑因素，始终从用户操作的角度出发，最大限度地保证用户界面的易用性。相比于网站页面的设计，Web软件用户界面设计要求界面一致、美观，即系统中的所有页面应在布局、样式等达到统一。同时，为了降低开发和维护成本，开发者需要尽可能将页面元素、布局、样式和行为四大要素分离，实现页面设计的复用性。在用户界面设计方面，有几个关键要点需要注意。首先，用户界面应该适合软件功能，即界面与软件功能相融洽的程度。其次，用户界面中的所有元素应该容易理解，没有错误文字或令人费解的文字，图标按钮的含义应该直观明了，最好图标加文字说明，界面结构能够清晰地反映工作流程，以便用户按部就班地操作。此外，系统应该能够及时反馈信息，提示用户操作的处理情况。还需要提供防错处理，包括对数据进行校验功能，将在某些情况下不应该使用的菜单项、按钮变成灰色，提供用户确认对话框等。界面的总体布局应当有一定的逻辑性，最好能够与工作流程吻合，元素放置布局应当整齐清爽。颜色的使用也应该合理，不应该使用过多数目的颜色，应当根据对象的重要性来选择颜色，使用颜色时应当保持一致性。最后，同一软件的用户界面应当有一定程度的相似性，同类的界面元素应当有相同的视觉和相同的操作方式，风格一致的界面可以减少用户的记忆量、减少出错几率、并且迅速积累操作经验。3.8最少操作步骤（最高效率）为了提高工作效率，界面设计应根据用户需求，尽可能地减少操作步骤。3.9可复用为了提高质量、开发效率和降低成本，应该利用现成的界面组件。界面组件应包括代码、应用示例和相关文档。4界面设计原则用户界面的设计需要考虑以下原则（按照重要程度高低进行排列）。4.1以用户为中心原则软件是为用户服务的，因此设计的界面应该得到用户的认可。4.2界面美观、合理、一致性原则一个软件系统的所有界面应采用统一的布局和风格样式，包括对齐、颜色、大小等。页面布局要求结构清晰、层次分明，页面元素不应过于拥挤，也不应过于空旷。4.3操作易用性原则页面应具有很强的可操作性，符合用户操作习惯，主要体现在以下几个方面：简单易学、合理的错误避免和纠正（如检验、警告等）、灵活性（如提供快捷键、数字键盘录入等）。4.4帮助引导性原则帮助是软件系统必不可少的内容，当用户不能进行操作时，要提供帮助支持，正确地引导用户进行操作。4.5界面模板化、组件化原则为了快速开发和减少维护成本，同时也为了保持界面一致性，界面应采用页面模板和复用组件来定义。5界面设计一般性规范5.1.1合理性细则1.父窗口或主窗口的中心位置应该在屏幕对角线焦点附近。2.子窗口位置应该在主窗口的左上角或正中。3.重要的命令按钮和使用频率较高的按钮应该放在界面上显眼的位置。4.页面的尺寸应该合适，界面元素不应过于拥挤，边界处需要留有一定的空间，也不可过于宽松，显得零乱。5.界面元素需要一致的对齐方式，以避免参差不齐的视觉效果。6.同类的界面元素尽量保持大小一致，至少保持高度或宽度的一致，逻辑相关的界面元素要就近放置，便于用户操作。7.与正在进行的操作无关的按钮应该被禁用（失去功能），但应该显示。8.对可能造成数据无法恢复的操作必须提供确认操作对话框。9.对运行过程中出现问题而引起错误的，应有提示。10.提示、警告或错误说明应该清楚、明了、恰当。5.1.2协调性细则1.页面长宽应接近黄金点比例，切忌长宽比例失调或宽度超过长度。2)避免使用过长的按钮名称，以免占用过多的界面空间。3)不要在空旷的界面上放置过大的按钮，以保持界面整洁。4)在放置控件后，应尽量避免出现大量空白区域，以充分利用界面空间。5)字体大小应与界面大小相协调，通常使用宋体12px比较美观。6)前景和背景色应合理搭配，反差不宜过大，最好避免使用深色，如大红、大绿等。常用颜色应考虑使用Windows界面色调。7)如果使用其他颜色，主色应柔和、具有亲和力和吸引力，切勿使用刺眼的颜色。8)大型系统常用的主色有"R225,G225,B225″、"R239,G239,B239″、"R192,G192,B192″等。效果如图所示。9)界面风格应保持一致，字体大小、颜色和字体应相同，除非需要进行艺术处理或有特殊要求。10)如果能够提供给用户自定义界面风格，则更好，以便用户自行选择颜色、字体等。5.1.3.易用性细则1)常用按钮应支持快捷方式。2)完成同一功能或任务的元素应放在集中位置，以减少鼠标移动的距离。3)将界面按功能划分为局域块，并应提供功能说明或标题。4)界面应支持键盘自动浏览按钮功能，即按Tab键可自动切换。5)界面上首先应输入的和重要信息的控件应在Tab顺序中靠前，并放在窗口上较醒目的位置。6)Tab键的顺序应与控件排列顺序一致，通常从上到下，同时行间从左到右。7)同一界面上的控件数量最好不要超过10-15个（不包括LABEL控件），超过10-15个时可以考虑使用分页界面显示。8)分页界面应支持快速切换页面，常用组合快捷键为Ctrl+Tab。9)默认按钮应支持Enter键操作，即按Enter后可自动执行默认按钮对应操作。10)可写控件应检测到非法输入后给出说明，并能自动获取焦点。5.1.4.健壮性细则1)最重要的是排除可能导致应用程序非正常中止的错误。2)应尽可能避免用户无意录入无效数据。3)对可能导致严重后果的操作应有补救措施，以便回到原来的正确状态。4)应对一些特殊符号的输入、与系统使用的符号相冲突的字符进行判断，并阻止用户输入该字符。常见的特殊字符有：；'",`'："["{、\|}]+=)-(_*&&^%$#@！~,.。?/以及空格。5)最好支持可逆性处理，以便取消一些系列操作。6)在输入有效字符之前，应阻止用户进行只有输入之后才可进行的操作。7.1.5常用菜单命名应结合业务，使用与业务相关的动宾短语，如：辞退人员、录用人员等。层次树的层次不能太深，以不超出4层为标准。名称字数不应超过10个字。分组菜单要根据业务进行分组，把业务相近的放在一个组内。图片菜单组与菜单项前的图片要有区别，图片应放置在名称前边，高度要与菜单的字一样高，且要和文字的间隔为5px。当某一节点处于激活状态时，要有明确的提示效果。示例：常用菜单：-录用人员-辞退人员-显示待办-打印7.1.6页面标题(PageTitle)页面标题是能够描述页面功能的说明性文字，如："录用国家公务员"、"辞退人员"。页面标题的名称与系统树节点项的名称保持一致。位置在页面的左上角，缩进20px。字体为宋体，大小为14px。水平对齐为左对齐。为了页面美观，名称前应有图片；所有页面采用统一的图片；图片与名称之间间隔为5px；图片不应过大，以免占用太多的页面空间。示例：录用国家公务员7.1.7组名(GroupName)组名用于标识不同的信息分组。位置在组开始的左上角，缩进20px，左对齐。大小为14px，字体为宋体。示例：基本信息工作经历7.1.8域名称(FieldName)域名称也可以称为标签，输入项的语义，如：姓名、性别、年龄等。命名以业务语义来定义，文字内容应该明了。位置在输入项的左侧，缩进20px。水平对齐为左对齐，垂直对齐为居中。字数限制最长8个汉字(极个别的可超过8个汉字)。示例：姓名：性别：年龄：7.1.9单行文本框(SingleTextInput)单行文本框用于在页面中接收或显示文本信息，以单行形式体现的录入框。外观为3D效果(仿真WindowXP)，可编辑状态和不可编辑状态颜色应显示不同，建议不可编辑时"灰掉"。宽度以实际录入需要确定宽度，分两种情况：1、默认情况为198px，如：姓名，性别等；2、在表单型录入页面中，如果实际录入文字较长，需单独成为一行的文本输入域，宽度为550px，如：籍贯、地址等。示例：姓名：[输入框]性别：[输入框]籍贯：[输入框，宽度为550px]地址：[输入框，宽度为550px]日期框(DateInput)是一种录入框，其内容为日期类型。规范要求其外观为3D效果(仿真WindowXP)，宽度为180px，高度为20px，水平对齐为左对齐，垂直对齐为中对齐。日期格式为年4位，月2位，日期2位。日期的录入格式为YYYY-MM-DD，显示格式也为YYYY-MM-DD。录入方式可以激活日历面板返回日期值，也可以手动录入日期。日期要有一个默认值，应根据业务需要设置，有的是当前日期，也可能是某一时刻日期。对于只读的日期框，日期内容应灰掉，表示不可修改。对于业务上必须填写的日期框，背景颜色应与一般不同。日历面板激活图片放置于日期框右边，中间没有间隔；图片长为15px，高为20px。数值框(NumberInput)是一种录入框，其内容为数值类型。规范要求其外观为3D效果(仿真WindowXP)，宽度为198px，高度为20px，水平对齐为左对齐，垂直对齐为中对齐。数值格式采用"千位记数"格式显示，每三位用","分隔。对于只读的数值框，应将内容灰掉，表示不可修改。对于业务上必须填写的数值框，背景颜色应与一般不同。多行文本框(Textarea)是一种能够进行多行录入或显示的文本框。原则上，其不能因为特殊的多行文本输入框而影响整个页面的效果，也不能引起位置错乱现象。规范项：规范内容外观，3D宽度不应过高，可根据页面实际需要和美观效果来定义放置。一般要单独占一行，除非有特殊需要。水平对齐左对齐垂直对齐中对齐。只读的灰掉，表示不可修改。必填的背景颜色应与一般不同。滚动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色。回车键回车换行进行下一行录入，不进行焦点转换。7.1.13.下拉框(Select)规范项：规范内容效果，3D效果(仿真WindowXP)宽度。下拉框的宽度要以"显示完整性"的重要程度，来分别定义，根据下拉框中最长列表项的字数确定宽度，以15个汉字为标准，可以按以下规范进行。1)字数小于等于15个汉字的：宽度设为198px；2)字数大于15的，宽度设为550px；3)字数大于15小于等于18的，如果"显示完整性"的程度比较低，则可以按(1)执行；字数大于15小于等于18的，如果"显示完整性"的程度比较高，则可以按(2)执行；高度20px水平对齐左对齐垂直对齐中对齐。下拉项目标题文字紧凑排列，之间不加空格。下拉项目水平对齐左对齐。只读的灰掉，表示不可修改。必填的背景颜色应与一般不同。字体默认设置。7.1.14.列表框(List)规范项：规范内容外观，3D效果(仿真WindowXP)宽度。同下拉框水平对齐左对齐垂直对齐中对齐。只读的灰掉，表示不可修改。必填的背景颜色应与一般不同。字体默认设置(不作另行设置)。滚动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色。7.1.15.单选按钮(Radio)规范项：规范内容外观，3D效果(仿真WindowXP)宽度20px高度20px。选项标题文字紧凑排列，之间不加空格。应该带有明白的文字解释。避免两个单选按钮表示同一内容的两种状态(例如YES/NO)。使用场景在表单录入型页面中，选项一般不应超过6个，如果需要更多不使用单选按扭，可转化为下拉框。水平对齐左对齐垂直对齐中对齐。默认置必须有一个选项是选中的。放置在表单录入页面中，单独成行，集中水平放置。在信自列表中应集中竖排放置。7.1.19数据网格(DataGrid)数据网格是用来显示多行记录的数据集合。一般来说，表格的行用来显示记录的名称，表格的列用来显示属性。点击列标题可以实现排序，并显示排序方式的图像提示。表头应该使用宋体字体，大小为12px，左对