界面功能规范_web功能界面设计规范

界面功能规范由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“web功能界面设计规范”。

界面功能规范

安装及卸载

用户按照User Guide就可以自行完成安装或卸载，无需技术人员的支持。

安装或卸载的过程，有“cancel”按钮，可以中断操作。中断后，系统可以回到初始状态。

系统卸载后在用户的计算机中不应该留下垃圾文件。取消安装后，重新再次安装可以成功。

根据用户需求，在不同的OS下，可以安装成功。

自动升级

自动升级完成后，系统中的数据和各项用户设置不能发生改变。

自动升级过程中需要为用户提供进度条。

若在自动升级中提供了取消的功能，则中途取消后，系统需要回到升级之前的状态。

Login界面控件

至少应包含Login Name、Paword输入框，login，找回密码这几项。------（我去掉了cancel，因为参考外国很多网站的登录页，都没有cancel按钮）“Login Name”、“Paword”及对应的输入框应左右对齐，宽度一致。找回密码功能必须提供。如下图所示，但Login按钮需要移动到左边。

可以有Remember Me和验证码。若有验证码，则需提供刷新验证码的功能。

Login界面功能与键盘操作

Login界面的所有控件之间可以使用Tab键来移动焦点。

若用户输入了Login Name和Paword，按下Enter键时，应该让用户登录。

若是在C/S模式下，用户按下ESC键时应直接关闭登录窗口。

常见问题：

没有找回密码功能。用户输入超长的字符串到Login Name和Paword中，点击登录按钮后，系统应给出错误提示。

表格

列表表格需要固定长度。

当文本以正常形式输入并保存，列表中显示的时候，超过了默认表格宽度，应该要自动换行。

Full Name、Email、日期、电话号码属性列，应该固定足够的长度。

表格中的内容应该按照某种规则排序。

表格的表头应所有文字居中。

表格中的内容应遵循以下原则：若是文字内容应左对齐，若是数字或日期内容应右对齐。

表格内容很多时需要分页。分页应提供页面导航功能，包括：上一页、下一页、跳转到某一页、总页数、当前页码。如下图所示图片中，使用列表的方式显示数据集时，必须在列表的下方显示总记录数。

当表格中的数据为空时，必须显示该表格的表头。若表格的最后一页所有数据被删除后，应自动跳转到前一页上。

文本输入

在多行文本框中，手工输入了回车换行，显示文本的时候，文本不能是一行显示完，要实现回车换行。

当输入的文本达到限制内的最大长度，在保存数据时系统应该给予提示。在不同的页面上相同字段的输入长度限制应该相同。

输入特殊字符时，要做处理。如：、等，保存包含特殊字符的字符串时系统要保存正确。

当文本框内有内容时，用户使用Tab键移动光标进入文本框，需要自动将所有内容选中。

若文本输入框的外面有显示该文本框的最大输入长度。那么应该同时显示已经输入的字符长度。

必输项应该在输入框后面标记“*”号。该符号与输入框之间应该有一个空格符的距离。

页面上有多个输入项时，上下的输入项之间应该保持宽度一致。内容相近或相互关联的输入项应该用Group Box框起来。如下图所示：

对输入的合法性进行检查时，要使用统一的方式来显示提示信息。

日期控件

日期控件中内容应默认显示当前系统日期。若非必填的日期内容，须允许用户输入空白值或者删除当前的输入值。

Web页面上的日期控件需要注意不同时区之间的差异。如服务器在美国，中国的用户浏览该页面时会出现如下的问题：

当程序和数据库都安装在美国时区的OS中，在中国时区的OS中用浏览器访问，有以下两种情况的错误：

1）数据库中保存的是正确的时间，但显示出来就是错误的时间

如：在BBS中创建topic后，topic的创建时间是 07/01/2008 16:09，但在topic显示出来的时间是：07/02/2008 00:10 2）数据库中保存的是错误的时间。

如：在浏览器上操作的时候，选择的是 07/01/2008 02:07保存，但查看的时候，时间显示的是06/30/2008 10:07（重现见RFA Internal系统中关于user的birthday的保存）或者在浏览器上操作的时候，选择的是 07/01/2008 02:07保存，查看的时候，时间是正确的：07/01/2008 02:07，但数据库中是：06/30/2008 10:07。日期控件需要在不同的浏览器下正常显示（IE、Firefox、Safari）。如图：

导航栏和页面链接

Web类型的项目中，大的功能模块需要都显示在导航栏上。每一个页面的导航栏都应该和首页的导航栏保持一致。如图：

可以点击的页面链接下应该加上下划线。暂时不能点击的页面链接应该没有下划线。

所有的功能链接都必须保证正确。

提示信息的显示

提示信息的显示应该统一。根据项目类型的不同而定。如C/S模式的系统，应该采用弹出对话框的形式显示信息。

系统中所有提示信息的字体和大小应该统一。对话框的标题上应该显示提示名称。如下图：

不同浏览器下一致性

若Web类项目需要在不同的浏览器下显示。则需要进行相应的测试。确保在IE下的显示效果和其他浏览器相同。

Web类项目需要在不同的浏览器下显示，则需保证web界面、功能与在IE下一致。

文字信息

所有的文字信息，若是英文，需要请Writer审核。

文字应统一按照左对齐的格式显示。文字内容应该与边框有一个空格符的间隔。

在全英文操作系统中，若有中文信息，则该信息不能显示为乱码。

文字的字体类型、大小需一致。

图片上传及显示

包含图片的记录，在用户编辑过图片后应该立即在界面上看到修改的结果。

上传或下载大尺寸图片或多张图片时Performance不能太低。必须提供进度条，并且提供中途取消的功能。如下图：

Web页面上的图片应是GIF或JPG格式，应没有DMP等其他格式的图片。保证所有图片都可以在常用浏览器（IE、Firefox等）下正常显示。

浏览包含图片的记录时应该提供缩略图。缩略图应是原图片按照比例缩小后的图片。不能出现图片的变形或分辨率下降太多。如图所示：

界面控件排布

界面控件的长度和排布应尽量对齐。界面下方的“保存”或“关闭”按钮应该统一居中或左右对齐。不能有的界面居中有的界面又是左右对齐。

Web系统安全性

在未登录的情况下直接访问Web系统的功能页面。系统必须提示用户登录后才可访问。

下拉列表

如下拉列表框等控件。其中的内容若过长，且控件本身的长度不够，那么可能会显示不完整。需要调整控件长度，使其中的内容尽量显示完整。

下拉列表中的内容应该按照首字母排序。应该根据用户的输入自动定位到相应的内容上。如图所示：

搜索功能

在搜索条件输入框中应该有缺省值。若搜索的字段不是必填字段，应该允许用户输入空白值（包括日期格式的字段）。

应该提供Search Within Result功能，即在查找的结果集中继续查找。搜索结果应该提供用户选择排序的方式。如：按名称排序或者按日期排序。

搜索结果，默认某种排序方式。

显示搜索结果的同时应该把搜索条件显示在页面上。如图所示：

用户管理：

必须为系统管理员提供更改用户密码的功能。

应该为系统管理员提供更改用户基本资料的功能。

用户的基本资料应该有一定的逻辑判断。例如：雇佣日期不能早于出生日期等。

用户的地址和电话号码需要按照美国用户的习惯设计。如图：

电话号码的输入应该依照以下的输入规范：

如果是Web页面，则在用户登录后应该在页面的上方显示当前登录用户的用户名。如果是Windows窗体界面，则在用户登录后应该在Status bar中显示当前用户的用户名。

键盘操作

在C/S模式的系统中，用户应该可以使用键盘操作到系统的所有功能。

一些常用的快捷键应该符合普通用户的习惯。例如：按下ESC键即退出当前界面。按下Enter键即相当于鼠标左键的点击。

可以使用Tab键移动焦点到任何一个输入框和按钮上，并且从第一个控件到最后一个控件之间可以循环往复。

Tab键移动焦点的顺序应该按照从上到下，从左到右。

列表中的选中焦点应该可以用上下方向键浏览。如图：