界面设计规范

 

界面设计规范

文章出处：51testing博客 作者：mojinde 发布时间：2007-03-09

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。

界面设计主要是为了达到以下目的：

1)       以用户为中心。设计由用户控制的界面，而不是界面控制用户。

2)       清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。

3)       拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。

4)       较快的响应速度。

5)       简洁、美观。

以下规则应该重视：

界面风格一致性	操作项	基本规范
	UI色彩与字体	1）  UI 字体，色彩要一致。 2） 整体色彩搭配要融为一体，同时诸如Caption，Button 起提示、提交作用的部分要清楚，醒目。 3）  不可修改的字段，统一使用灰色文字显示。(例：浏览页面、删除页面均需显示灰色)
	窗口风格	1） 所有窗口最大化、最小化风格要一致。 2） 报错页面的风格一致，最好有统一的报错页面。 3） 类似功能的窗口打开的风格要一致。 4） 相同功能在不同模块的名称要一致。 5） 子窗体应尽量在显示在主窗体的左上或居中放置。 6） 弹出式窗口应尽量在不借助水平和垂直滚动条的情况下显示所有内容。 7） 窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；不能只放大窗体而忽略控件的缩放。 8） 父窗体支持缩放时，子窗体不必缩放。 9） 实现自定义界面风格（可参考电子社区系统）
	布局与间距（待定）	1）  窗体控件布局和间距尽量与Windows标准保持一致。 2）  按钮与窗体上、下、左、右之间的间距为 3）  按钮之间的间距为 4）  ……
	菜单深度	1） 菜单深度一般不要超过三层 2） 菜单层次太多时，应给出返回主窗口、主分支的快捷链接。
	按    钮	1） 按钮风格相同，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。 2） 无效按钮要屏蔽。
	控    件	1） 各复选框和选项框按选择几率的高低而先后排列。 2） 复选框和选项框要有默认选项，并支持Tab选择。 3） 界面空间较小时使用下拉框而不用选择框。 4） 选项数较少时使用选项框，相反使用下拉列表框。
文本框输入	操作项	基本规范
	必输项	1）必输项中不可为空，不可输入空格 2）必输项给出必输项标识（*）。 3）非必输项字段，Null插入数据库时不会出错，在数据库中设置默认值。
	字段长度	超过数据库规定长度时不允许输入，自动截断超长部分（注：2字符=1字）
	格式校验	1）身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定。
	日期格式	1） 日期显示格式一致，为：yyyy-mm-dd。 2） 使用日期控件，则不可手工录入。 3） 若允许手工输入：需做格式校验。不可输入字符串、汉字、特殊字符。 4） 若允许手工输入：对于日期段，需在截止日期小于开始日期时给出提示。
	特殊字符	1）输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括：‘  “ =  @  `  ~  $  %  ^  % ￥ & #  @等
	英文输入	英文输入不区分大小写，不可输入汉字、数字及特殊字符
	数值字段	只能输入+ ，— ，0~9及功能键(BackSpace 光标)。数值不能为负数。
	字符字段	字符字段中只能输入字符，非法字符如单引号、数字均不可输入
	单行文本框/多行文本框	1)       长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识
	附件	1）  可正常添加符合格式的附件。 2）  附件可正常打开和保存，附件名较长时可正常操作。 3）  直接输入错误的附件地址，保存时应给出提示信息。 4）  附件打开和保存到本地时，文件名要显示原文件的文件名。
	密码输入	1）  需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度。 2）  程序中应给出文字说明密码的可输入长度。
用户界面行为	操作项	基本规范
	鼠    标	1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；系统忙时显示沙漏形状
	光标定位	1） 打开新增（修改）页面时，光标初始定位在第一个待输入的文本区 2） 因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入。 3） 若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点； 4） 可写控件检测到非法输入后应给出说明并能自动获得焦点
	TAB键	1） 界面支持键盘自动浏览按钮功能。即TAB的自动切换功能。 2）  Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式。

原始链接：http://blog.51testing.com/?5514/action_viewspace_itemid_4624.html