用户界面设计规范.doc

用户界面设计规范1.简介软件用户界面的重要性。软件用户界面的重要性。一般地，成功的Web应用软件至少有三个卖点：1)应用软件的功能符合用户需求。2)用户容易使用该软件。3)用户觉得该软件界面美观。基于第1项，是用户需求方面的事情，2和3都是用户界面的事情，可见用户界面对于一个软件是多么的重要！所以用户界面设计是Web应用软件开发过程中的关键工作之一，而不是次要工作。1.1.目的本文档以用户界面(UI)设计理念和用户操作习惯为原则，为了保证界面设计的一致性、美观性、扩展性、安全性等，对WEB应用软件用户界面设计的原则、标准、约束和界面元素等内容提出详细要求，便于用户界面原形设计、用户界面开发、以及用户界面测试等角色使用和交流，并为以后的用户界面评估制定一套评价体系。同时规范界面(UI)开发人员在设计、制作、开发用户界面行为，通过本文档来约束界面开发人员的随意性，避免造成页面效果不统一、不协调等问题。1.2.范围本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。1.2.1.内容范围本规范严格定义了Web软件用户界面(UI)设计原则、要素和具体细则内容，并且对页面元素进的应用范围、样式进行了详细的定义。1.2.2.适用范围本规范适用于Web应用系统项目中所有界面(UI)设计开发工作。使用人员包括：界面设计人员、制作开发人员、界面测试评估人员。1.3.术语释义1.3.1.用户界面用户界面是人与软件系统进行交互的接口，实现用户与计算机之间的通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件，是用来接收信息和向用户展示信息的窗口，是软件系统成功与否的一个很重要因素。1.3.2.UI即用户界面，又称用户接口1.4.文档约定本文档所指的页面，均基于1024768的屏幕分辨率。所有关于页面或控件的距离、大小描述，单位均是Pixel(像素),简写为PX。1.5.参考资料1、用户界面设计-有效的人机交互策略(第三版)电子工业出版社2、Web软件用户界面设计指南电子工业出版社林锐等著3、GUI设计禁忌机械工业出版社4、软件人机界面设计高等教育出版社陈启安编2.页面设计思想本着以用户为中心的设计思路，Web软件用户界面的设计应将易用性放在首位，任何用户界面的设计都应从用户操作的角度出发，在最大限度内保证用户界面的易用性。Web软件用户界面设计要求不同于网站页面的设计，Web用户界面不追求丰富多彩、绚丽多资的效果。Web软件用户界面设计要求界面一致、美观，即系统中的所有页面应在布局、样式等达到统一。对于软件开发者来说，则需要在前两点实现的同时，满足页面设计的复用性，即要求尽可能将页面元素、布局、样式和行为四大要素分离，以达到最大化的复用来降低开发和维护成本。3.界面设计要点3.1.用户界面适合软件功能(适用性)用户界面的合适性是指界面与软件功能相融洽的程度。软件功能是通过用户界面来展现的，所以用户界面一定要适合软件功能，这是最基本的要求，如果用户无法通过界面来使用软件，易用性根本就无从谈起。用户界面适合于软件的功能提醒界面设计者不要片面追求界面外观漂亮而导致华而不实。3.2.容易理解用户界面中的所有元素不能出现错误文字，也没有令人费解(二义性)的文字；图标按钮的含义一定要直观明了，最好图标加文字说明，防止用户误解；界面结构能够清晰地反映工作流程，以便用户按部就班地操作；3.3.及时反馈信息(提示信息)当用户进行了某项操作后，系统能够及时给出处理信息，例如，当某项操作进行时间较长，则应该提示*操作正在处理，请等待等信息。3.4.防错处理提供对数据进行校验功能；对于在某些情况下不应该使用的菜单项、按钮应当将其灰掉(变成灰色，可见但不可用)；执行破坏性的操作之前，应当提供用户确认对话框来进行确认；3.5.合理的布局界面的总体布局应当有一定的逻辑性，最好能够与工作流程吻合；界面上的元素放置布局应当整齐清爽；3.6.合理的色彩同一界面不应使用过多数目的颜色，因为人们很难记住多种色彩；应当根据对象的重要性来选择颜色，重要的对象应当使用醒目的色彩表示；使用颜色时应当保持一致性；3.7.风格一致和必要的个性化在一个软件的用户界面中，同类的界面元素应当有相同的视觉和相同的操作方式。例如命令按钮，要求所有的形状、色彩、对鼠标、键盘的响方式都是一致的；同一软件的用户界面应当有一定程度的相似性。风格一致的界面可以减少用户的记忆量、减少出错几率、并且迅速积累操作经验。3.8.最少操作步骤(最高效率)界面的设计应当根据用户需要求，在最少的操作少完成工作，以便提高工作效率。3.9.可复用应当利用现成的界面组件，从而提高质量、提高开发效率和降低成本。界面组件应有以下内容组成：(1)界面组件代码(2)应用示例(3)相关的文档4.界面设计原则用户界面的设计需要考虑以下原则(按照重要程度高底进行排列)。4.1.以用户为中心原则始终牢记软件是为用户服务的，界面是用户与系统交互的接口，所以设计的界面首先要得到用户的认可。4.2.界面美观、合理、一致性原则一个软件系统的所有界面应采用统一的布局和风格样式，比如：对齐、颜色、大小等。页面布局要求结构清晰、层次分明，页面元素不应过于拥挤，也不应过于空旷。4.3.操作易用性原则页面可具有很强的可操作性、符合用户操作习惯，主要体现在以下几个方面：(1)简单易学。(2)合理的错误避免和纠正，如检验、警告等。(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)对可能造成等待时间较长的操作应该提供取消功能。8)在读入用户所输入的信息时，根据需要选择是否去掉前后空格。9)有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。6.界面布局规范(模板化)1)每个窗口都要使用相同的颜色搭配方案，例如滚动条的颜色，活动窗口的标题的颜色等。2)每个窗口都应该遵守所在类别的同样的窗口模板。6.1.软件主界面软件主界面设计是用户界面设计中最重要也是最难的工作。主要包括：系统标识区、功能菜单区、内容及操作区、信息反馈区四个区域。结构如下所示：(1)系统标识区(如：拓普税务管理信息系统2.0)当前用户打印/帮助/退出(2)功能菜单(3)内容及操作区(4)信息反馈区各功能区尺寸1)系统标识区：高度为70px。2)功能菜单区：默认宽度200px，高，自动拉长。3)业务操作区：宽800px，高，自动拉长。4)信息反馈区：宽度，随屏幕的宽度，高度，30px。各功能区说明1)系统标识提示界面元素有4项：软件系统的图标和名称。鼠标点击将弹出About对话框(用来说明软件一些开发公司、版权，当前版本等软件信息)。当前用户。鼠标点击将弹出对话框，用户可以修改基本信息和密码。帮助。鼠标点击将弹出帮助窗口。退出。鼠标点击将退出到登陆页面。2)功能菜单放置功能树(具体请参考菜单树规范)3)内容及操作区系统主要的业务操作区域，规范参照具体的界面风格规范内容，这里不在描述。4)信息反馈区用户执行添加、修改、删除等操作后，信息反馈区将显示操作信息列表。6.2.登录界面登录界面是指用户输入用户名、密码等信息后进入系统的页面。登录界面应具有以下特点：1)艺术性：此页面的设计要具有艺术性，结合软件业务、公司文化来设计。2)友好性：登录系统必须填写的信息、系统名称、开发公司等信息，以及当用户无法进入系统时，应当可以指导用户进行补救措施。6.3.信息录入界面6.3.1.页面规格页面宽度：700px信息组织：每行放置4列，分别为：域名称、输入项、域名称、输入项，对应的宽度为：150px、200px、150px、200px如果表单项内容较长，录入项的宽度在198px以上的则应单独为一行(把后3列合并为一行)，域名称、输入项，如家庭地址等信息。对应的宽度为：150px、550px、页面底色：采用统一的底色6.3.2.注意事项1)应保证页面内容排列整齐、一致，忌出现不齐、内容或控件排列零乱的界面。2)必填的录入项要有明确的视觉显示。3)当页面信息内容较多时，可考虑信息分组，分组后要有明确的标题。6.3.3.页面样本示例1 6.4.数据显示界面6.4.1.页面规格：宽度：700px 6.4.2.注意事项1)重点围绕数据显示的要求，解决应该显示哪些数据2)只显示必需的数据，与用户需求无直接关系的一律省略6.4.3.页面样本示例6.5.单一查询参数录入界面特点：提供一个或几个查询参数的录入的页面，信息量少，如各种查询参数录入页面等6.5.1.页面规格页面宽度：400px页面高度：不定，根据情况自动拉长信息组织：参数录入查询页面的信息比较少，所以很难充实、丰满页面，故采用：每行放置列，格式为域名称、输入项，对应的宽度为：150px、250px页面底色：采用统一的底色6.6.查询结果界面特点：是以固定表格展现为主，其他信息为辅的页面、规则性很强，有固定的行、列，如查询结果页面、待管理信息页面等。6.6.1.页面规格页面宽度：700px页面高度：不定，根据情况自动拉长页面底色：采用统一的底色，颜色值推荐为：#EFEFEF布局如下：查询参数录入区信息列表展示区(表头、表体、序号、选择框)分页菜单区操作按钮区查询录入参数的设计原则：(1)忌设计过多的参数录入，以免喧宾夺主。(2)查询参数与查询参数的放置要合理、紧凑，合理利用页面空间。操作按钮区必须有全部选择、取消选择，然后才是和业务相关的按钮。6.7.错误界面用来展现系统错误信息以及回退操作的界面。6.7.1.页面规格宽度：700px高度：400px 6.8.打印界面6.8.1.页面规格页面宽度：信息列表打印型页面是为打印服务的，所在应该根据实际报表需要设定页面的尺寸。不同的报表尺寸规范如下：A3尺寸：长595px，宽842px A4尺寸：长842px，宽1190px 6.9.对话框对话框实际上是一种特殊的窗口，它有固定的风格，通常用于接收输入、显示输出及给出提示信息。在我们的系统中主要应用以下对话框：6.9.1.警告提示对话框只有确认键。信息内容要有明确的含义。警告对话框布局：窗口标题关闭图标警告消息的一段文字确定按钮6.9.2.确认对话框只有确认键和取消键。多用于删除确认或其他操作确认等环境。确认信息意义要明确，不能含糊其词。采用系统标准的操作确认对话框。对于确认对话框的默认键应为取消键确认对话框布局：窗口标题关闭按钮图标确认消息的一段文字是(Y)否(N)确认对话框示例6.9.3.操作通知信息提示框操作通知信息提示框的用途是及时告诉用户谁在什么时侯做了什么事情，这个通知不需要用户进行确认，例如新增加了一个用户，删除了一个用户等。对话框上应显示*操作成功！或*操作失败！。对于失败还要显示失败原因信息，且应指明如何做出补救。只提供关闭按钮。操作通知信息对话框布局：窗口标题关闭图标通知消息的一段文字关闭另外需要注意的是：给出通知消息的最好办法不是弹出对话框，而是在专门的信息反馈区列出通知消息。6.9.4.进度提示窗体如果一些系统操作时间比较长，应提供操作时间进度提示。例如：报告生成等只有取消键，当用户不进行等待时可进行取消?。状态提示显示位置?页面布局：窗口标题关闭图标正在处理什么事务.进度显示关闭7.界面元素设计规范7.1.1.文字页面内的文字默认规则如下，在其他特殊情况下应另行说明。字符集GBK或GB2312字体宋体大小12px颜色黑色图标的含义体现的意义要明确，易于理解，避免二义性；图标外观效果采用Window XP效果7.1.2.图标7.1.3.常用键系统应采用如下常用键：常用键含义和功能、PageDown、PageUp按系统规定使用Tab指不同区域的切换空格指弹出列表框F1显示帮助信息F2 F3回车按钮操作用回车键确认；焦点跳转到下一录入项；Esc退出；取消Ctrl+Insert在Grid中增加一条记录Ctrl+Delete在Grid中删除一条记录Ctrl+C复制Ctrl+V粘贴7.1.4.树(Tree)规范项要求命名要结合业务，尽量用和业务相关的动宾短语，如：辞退人员、录用人员等层次树的层次不能太深，以不超出4层为标准名称字数：不应超过10个字分组菜单要根据业务进行分组，把业务相近的放在一个组内图片菜单组与菜单项前的图片要有区别，图片应放置在名称前边，高度要各菜单的字一样高，且要和文字的间隔为5px激活提示当某一节点处于激活状态时，要有明确的提示效果示例7.1.5.常用菜单规范项要求命名要简洁，符合语义，如：显示待办、打印等字数不应超过4个图片要符合语义，形象，能够直观地代表所要完成的操作提示信息要有提示信息，当鼠标放到功能按钮时，要有执行操作的提示信息，说明具体的操作功能快捷键常用菜单要支持命令快捷方式对齐右对齐效果示例7.1.6.页面标题(Page Title)定义：能够描述页面功能的说明性文字，如：录用国家公务员、辞退人员规范项规范内容名称页面标题的名称与系统树节点项的名称保持一致位置页面的左上角,缩进20px字体宋体大小14px水平对齐左对齐图片为了页面美观，名称前应有图片；所有页面采用统一的图片；图片与名称之间间隔为5px；图片不应过大，以免占用太多的页面空间；效果示例7.1.7.组名(Group Name)定义：当一个页面中出现较多的信息时，把所属范畴相同或相近的信息放在一起，形成信息分组，这时我们用组名来标识不同的信息分组。规范项规范内容位置组开始的左上角对齐缩进20px，左对齐大小14px字体宋体效果示例7.1.8.域名称(Field Name)也可以称为标签，输入项的语义，如：姓名、性别、年龄等。规范项规范内容命名以业务语义来定义，文字内容应该明了位置输入项的左侧，缩进20px水平对齐左对齐垂直对齐居中字数限制最长8个汉字(极个别的可超过8个汉字)7.1.9.单行文本框(Single Text Input)在页面中用来接收或显示文本信息，又是以单行形式体现的录入框我们称之为单行文本框。规范项规范内容外观3D效果(仿真Window XP)，可编辑状态和不可编辑状态颜色应显示不同，建议不可编辑时灰掉宽度以实际录入需要确定宽度，分两种情况：1、默认情况为198px，如：姓名，性别等2、在表单型录入页面中，如果实际录入文字较长，需单独成为一行的文本输入域，宽度为550px，如：籍贯、地址等高度：20px水平对齐左对齐垂直对齐中对齐内容水平对齐左对齐内容垂直对齐中对齐默认值根据业务需要设置默认值只读设置对于只读的文本框，应把内容文字灰掉，表示不可修改必填设置对于业务上必须填写的，文本框背景颜色应与其他文本框有所不同效果示例(普通)效果示例(必填)7.1.10.日期框(Date Input)是录入框的一种，但其内容是日期类型，所以我们称之为日期框。规范项规范内容外观3D效果(仿真Window XP)宽度180px高度：20px水平对齐左对齐垂直对齐中对齐日期格式其中年4位，月2位，日期2位。日期的录入格式：YYYY-MM-DD日期的显示格式：YYYY-MM-DD内容水平对齐左对齐内容垂直对齐中对齐录入方式可以激活日历面板返回日期值；也可以录入日期默认值日期要有一个默认值，应根据业务需要设置，有的是当前日期，也可能是某一时刻日期。只读设置对于只读的日期框，应把日期内容灰掉，表示不可修改必填设置对于业务上必须填写的，背景颜色应与一般有所不同日历面板激活图片放置于日期框右边，中间没有间隔；图片要形象，直观；图片长为：15px，高为：20px；效果示例7.1.11.数值框(Number Input)是录入框的一种，但其内容是数值类型，所以我们称之为数值框。所谓数值并不是数字形式展示的内容，如纳税人识别号、案件编号都不是数值，而类似金额、天数等则属于数值。规范项规范内容外观3D效果(仿真Window XP)宽度198px高度：20px水平对齐左对齐垂直对齐中对齐数值格式采用千位记数格式显示，每三位用，分隔；内容水平对齐右对齐内容垂直对齐中对齐只读设置对于只读的灰掉，表示不可修改必填设置对于业务上必须填写的，背景颜色应与一般不同效果示例7.1.12.多行文本框(Textarea)能够进行多行录入或显示的文本框，我们称之为多行文本框。原则：不能因为特殊的多行文本输入框而影响整个页面的效果，不能引起位置错乱现象。规范项规范内容外观3D宽度550px高度不应过高，可根据页面实际需要和美观效果来定义放置一般要单独占一行，除非有特殊需要水平对齐左对齐垂直对齐中对齐只读对于只读的灰掉，表示不可修改必填对于业务上必须填写的，背景颜色应与一般不同滚动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色回车键回车换行进行下一行录入，不进行焦点转换效果示例7.1.13.下拉框(Select)规范项规范内容效果3D效果(仿真Window XP)宽度下拉框的宽度要以显示完整性的重要程度，来分别定义，根据下拉框中最长列表项的字数确定宽度，以15个汉字为标准,可以按以下规范进行。1)字数小于等于15个汉字的：宽度设为198px；2)字数大于15的，宽度设为550px；3)字数大于15小于等于18的，如果显示完整性的程度比较低，则可以按(1)执行；字数大于15小于等于18的，如果显示完整性的程度比较高，则可以按(2)执行；高度20px水平对齐左对齐垂直对齐中对齐下拉项目标题文字紧凑排列，之间不加空格下拉项目水平对齐左对齐只读对于只读的灰掉，表示不可修改必填对于业务上必须填写的，背景颜色应与一般不同字体默认设置效果示例7.1.14.列表框(List)同时显示两个或两个以上列表选项，供用户选择，支持纵向滚动。不能因为特殊的列表框而影响整个页面的效果，不能引起位置错乱现象规范项规范内容外观3D效果(仿真Window XP)宽度同下拉框水平对齐左对齐垂直对齐中对齐只读对于只读的灰掉，表示不可修改必填对于业务上必须填写的，背景颜色应与一般不同字体默认设置(不作另行设置)滚动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色效果示例7.1.15.单选按钮(Radio)选项标记为圆形按钮，选项之间是互斥的，只能选中一个。规范项规范内容外观3D效果(仿真Window XP)宽度20px高度20px选项标题文字紧凑排列，之间不加空格；应该带有明白的文字解释；避免两个单选按钮表示同一内容的两种状态(例如YES/NO)。使用场景在表单录入型页面中，选项一般不应超过6个，如果需要更多不使用单选按扭，可转化为下拉框水平对齐左对齐垂直对齐中对齐默认置必须有一个选项是选中的放置在表单录入页面中，单独成行，集中水平放置；在信自列表中应集中竖排放置效果示例7.1.16.复选框(Checkbox)选项标记为可以打勾的方框，选项之间没有互斥关系，可以选择一个或者多个。规范项规范内容外观3D效果(仿真Window XP)宽度20px高度20px选项标题文字紧凑排列，之间不加空格；应该带有明白的文字解释；水平对齐左对齐垂直对齐中对齐放置集中竖排放置，在表单录入型页面中不使用复选框，可转化为列表框效果示例7.1.17.按钮(Button)规范项规范内容外观3D效果标题名称按钮的命名要结合业务坏境，选择比较贴近业务的词语，一般不使用提交、重置等和业务不相关的计算机术语；文字紧凑排列，之间不加空格；标题的字数应控制五个汉字以内；通用按钮名称：使用通用标准名称，如，对提问的回答用是、否、取消；对一系列操作的最终指令用返回、确认、存盘、取消对编辑显示类用查找、过滤、排序等；对控制类用运行、停止、确认、取消；对数据表类用添加、删除、修改；对业务按钮名称用表达相应的业务功能的简明规范术语宽度5个字以下(包括5个字)的设为70px；5个字以上的设为120px；高度25px放置按照重要程度、使用频繁情况依此左右放置；与其它页面元素上下间隔为10px，左右间隔5px；按钮与按钮之间的间隔为20px；字体不作另行设置水平对齐中对齐垂直对齐中对齐效果示例7.1.18.动态表()动态表是指可以由用户根据录入需要随意增加行、删除行的表格。动态表是一个很特别录入控制，是在HTML文档对象的基础上扩展而来的。动态表外框定义原则：在表单录入型页面中使用动态表不能影响页面的整体效果布局：每一个动态表，要设两行，格式如下：域名称(按域名称规范)动态表外动态表宽度：动态表的宽度为：62