网站界面操作用户体验要求
1、总则
一般来说，所有的图形界面设计应以整齐、一致、简单、易用、可用为原则。

1.1 总体布局：界面布局整齐，信息组合呈现块状、层次清晰。

1.2 人机交互：一般来说，系统的通用输入设备主要包括键盘和鼠标。

1.2.1 键盘
设计良好的键盘 UI 是软件可访问性的一个重要方面。它使盲人用户或有某种行动障碍的用户能够浏览应用程序并与其功能交互。这类用户可能不能够操作鼠标，并且4依赖于辅助

技术（例如，键盘增强工具、屏幕键盘、屏幕放大器、屏幕阅读器和语音输入工具），所有这些技术都要依靠应用程序的键盘 UI。
许多辅助技术以编程方式使用键盘 UI，即使用户没有使用标准键盘输入设备也是如此。尽管一些辅助技术可能有能够使操作更简单的自定义键盘快捷键，但是在键盘 UI 设计上（

针对辅助技术以及用于可访问性的所有方面），一致性和标准化将能够避免用户在操作中产生混淆。[7]

3.2.1.1： web输入控件的自动聚焦和可用键盘切换输入焦点
说明：使用JavaScript实现页面加载完成后立即自动聚焦（focus）到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

建议3.2.1.2：web界面中禁止自定义快捷键

3.2.1.3：用户可以方便地与系统进行交互，在鼠标与键盘之间的切换不要太频繁。

建议3.2.1.4：禁止在web界面上做“键屏蔽”设置
说明：禁止“键屏蔽”是为了保证用户最大的操作自由；例如：禁止复制快捷键、禁用shift键等。

建议3.2.1.5：建议在密码输入的操作界面中支持软键盘输入的方式
说明：根据网络信息安全的需要，目前web界面中采用软键盘输入密码是一种通用做法。如下图所示：
 
3.2.1.6：TAB焦点应在用户可进行操作的控件间切换

3.2.1.7：当使用“Tab”键和方向键进行遍历时，“Tab”键的遍历顺序和“下”、“右”方向键的遍历顺序为从左到右、从上到下；“Shift+Tab”键的遍历顺序和“上”、

“左”方向键的遍历顺序为从右到左、从下到上。
说明：在国际化应用中，顺序必须符合当地的使用习惯。如以色列或阿拉伯用户，他们习惯“从右向左，从上到下”的顺序；这需要设计过程中考虑提供多种的选择模式。

1.2.2 鼠标
一般来说，系统设计中主要考虑对鼠标左键和右键功能的支持，对于鼠标中键和智能鼠标不作要求。

3.2.2.1：当浏览器支持鼠标的智能中键操作时，系统必须保证在用户使用智能鼠标功能的时候，不影响系统正常运行。

建议3.2.2.2：禁止系统改变鼠标默认样式
说明：鼠标默认样式对于用户操作有着重要指示作用，如当前区域支持“文本输入”显示“I”形状、支持“点击”显示手形，当前等待状态显示“漏斗”形状。如果随意更改鼠标

形状，将会影响用户操作判断。

建议3.2.2.3：禁止软件自定义鼠标右键菜单
说明：在B/S操作界面上点击鼠标右键，将会弹出浏览器自定义的右键菜单，这些功能对用户非常有用，自定义右键将会屏蔽掉这个菜单。

建议3.2.2.4：对用户的鼠标定位操作，当移动到可响应的位置上时，给予视觉或者听觉的提示。
说明：如下图所示，采用了改变鼠标所处行背景色的提示方法。
 
图3 鼠标定位视觉提示示例

1.2.3 行为
建议3.2.3.1：用户进入常用功能的操作页面的鼠标点击次数不超过三次。
说明：在不丢失系统功能的前提下，在设计中要尽可能的减少用户需要点击鼠标的次数。需要用户选择的参数条件系统需要根据用户的使用需求给出默认的选择项目。

3.2.3.2：对于执行时间超过3秒的任务或操作，当前界面必须给出提示；例如采用将鼠标图标显示为忙、显示进度条的方式进行提示。
说明：
1、任务执行时间是指用户通过鼠标或键盘发出命令到界面完全显示操作结果的时间。
2、对于图形用户界面中，对于类似人机接口（如MML/CLI接口）的任务交互，此处不进行约束。

3.2.3.3：对于执行时间超过10秒的任务或操作，必须采用进度条方式进行提示。

建议3.2.3.4：对于执行时间超过3秒的任务或操作，建议采用进度条方式进行提示。

建议3.2.3.5：尽可能早的在客户端完成输入数据合法性验证
说明：输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行，对于是否需要在服务器端验证

不属于可用性的范围，本建议不做限定。

建议3.2.3.6：对于需要频繁操作的场合，应减少服务器和客户端交互次数，提交完毕直接返回原来的表单页面或默认页面。

1.3 设计要求
3.3.1.1：界面中的图标和图形要保证在256色模式下能正常显示
说明：要求在256色模式下设计图标与图像，避免高彩色和真彩色图样在256色模式下失真。

建议3.3.1.2：界面应少用大尺寸图形及大容量的图形、不使用图形来显示字符，图形应该正确、高效利用，避免因图形而降低系统的运行速度。

3.3.1.3：系统禁止使用BMP和PNG格式的图片
说明：BMP格式的图片占用空间大，而PNG格式的图片在IE5.0浏览器中无法正常显示。
建议3.3.1.4：为系统界面中显示的所有图标、图像资源设计替代文本
说明：当图标、图像链接出错时，替代文本可说明此处的图标、图像内容。

建议3.3.1.5：在同一系统或产品中，通用的字符串资源统一定义、统一维护，所有模块使用一份资源。
说明：这样的设计好处至少有三个：一则减少资源占用，二则不会形成不一致，三则便于维护，避免到处定义。

2 基本元素
2.1 公司信息
2.1.1 品牌标志

2.1.2 全称与简称

说明：
1、在Co和Ltd之间有一个点“.”和一个逗号“,”，Ltd后面有一个点“.”，“Co.,”和“Ltd.”之间有一个空格（半角）。需要注意的是，当Ltd.出现在句末时，不要再另加句

号点。
2、简称仅限在帮助文件和技术资料的正文中使用。

2.1.3 地址和网址

2.2 文本
2.2.1 字体（font-family）
4.2.1.1：系统中的中文标准字体为“宋体”（SimSun）、英文标准字体为“Arial” ，禁止使用非标准字体。
说明：
1、标准字体必须都是为操作系统默认自带的字体。
2、当软件中需要显示非标准字体的文字时，如公司标准的Frutiger系列字体，则必须转为图片形式，以保证文字效果正常显示。

2.2.2 字号（font-size）
4.2.2.1：字号单位使用像素（px）。在包含有汉字的界面中，字号设置为 12px；在不包括汉字的纯英文界面中，字号设置为 10px。
说明：中文汉字显示只有大于12px时，人眼识别起来才会比较清楚可见；而英文字母显示大于10px就已经非常清楚可见了。按照业界惯例，纯英文界面采用10px字号。

建议4.2.2.2：在web界面开发中，建议根据需要重新定义h1、h2、h3、h4、h5、h6的具体字号，然后再引用这些标签。
说明：很多研发工程师喜欢直接引用h1，h2，h3，h4，h5，h6标签来定义文本大小，但是这些样式系统定义差别较大，显示效果不是太理想。

2.2.3 样式（style）
4.2.3.1：一般情况下，系统中文字的字形常规，文字无效果。
说明：界面中的文字禁止使用上划线、斜体效果、删除线、闪烁等效果。

4.2.3.2：对于无效的文本，将文本的颜色进行灰化处理，禁止使用删除线。

4.2.3.3：非链接文本禁止使用下划线

2.2.4 颜色（color）
建议4.2.4.1：对操作成功或失败的提示说明，其文本的颜色有别于正文。
说明：在实际的应用中，操作成功或操作失败使用与正常文本不同颜色提示。

2.2.5 对齐与缩进
4.2.5.1：中文段落首行必须缩进两字符

4.2.5.2：文本与图片共排时，根据需要设置对齐方式，必须保证文本与图片的位置便于用户阅读和理解。
说明：如下图所示：

其他约束请详见表格单元格文本的对齐部分。

2.2.6 段落文本
4.2.6.1：段落行间距必须保持一致，行间距为字号的1.5倍。
说明：在字号设置为12px时，行距值设置为18px。

2.2.7 列表文本
建议4.2.7.1：对于成组的文本使用列表，方便用户快速理解和分类。

2.2.8 表格文本
4.2.8.1：在表格单元格内的文本换行不可打破英文单词

4.2.9.1：系统中使用正确格式来描述文本或数据，遵守不同地区对相同内容的不同格式要求。

2.2.10 编码格式
4.2.10.1：当系统只有中文版本时，采用GB2312或GBK的编码格式。
说明：软件系统必须根据不同的使用环境，选择正确的编码格式。如果是简体中文软件，编码格式设置为GB2312。如果软件中必须使用特别生僻的字，超出了GB2312定义的范围，

编码格式设置必须设置为GBK。

4.2.10.2：当系统需要支持不同语言版本的版本时，必须采用UTF-8的编码格式。

2.3 颜色
界面颜色总的应用原则是“总体协调，局部对比”。界面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一点强烈色彩的对比。
配色的原则是以灰色为主，颜色不能全部都是高纯度的。
考虑色盲、色弱者的需求。色盲：通常分红绿色盲和蓝色色盲，色盲者无法感知红绿或蓝等个别色彩，在界面中除了运用色彩表达相关信息之外，增加多纬度方式：如结合不同的

图形符号、动画、声音等方法来保证用户色盲者正确感知信息；色弱者对红绿、蓝色感知微弱，规避方法同前面一样。

2.3.1 颜色的选用
4.3.1.1：禁止大面积使用正红色（R255/G0/B0）、正蓝色（R0/G0/B255）、正绿色（R0/G255/B0）
说明：考虑色盲、色弱者的需求，同时界面中使用正红、正蓝、正绿容易引起操作用户的视觉疲劳。此处大面积是指当前界面中超过十分之一大小的区域。

2.3.2 前景色和背景色搭配
文本或图形对象与其背景的明度要拉开，以增强界面的可读性；背景和文字的对比尽量要大，以便突出文字内容。
一般来说，界面的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。
在ISO9241标准中要求界面中文本或图形对象颜色和背景颜色的明度至少3:1，首选为10:1；在实际界面图形设计中，为了保证良好的视觉效果，要求界面中文本或图形对象颜色和

背景颜色明度对比至少为5:1。

2.3.3 链接色搭配
4.3.3.1：链接文本颜色禁止使用浏览器默认链接色，链接文本与非链接文本颜色显示有明显区别。

4.3.3.2：当鼠标指向链接文本时，链接文本采用更加亮丽的颜色，产生突出效果；当鼠标点击链接文本时，链接文本采用更加深暗的颜色，产生下沉效果。

4.3.3.3：除表格数据中的类似详细信息功能的链接文本外，其他种类的被点击过的链接文本，禁止改变其显示颜色。

说明：
1、系统框架颜色为公司VI的灰色系，不允许出现其他色系，同时注意软件系统框架颜色不包括界面中使用的图标、图像元素。
2、链接点击参考效果图如下：

建议4.3.4.2：系统界面中不同告警级别配色建议采用 “网管/LMT系统告警配色建议”中所定义的数值。

说明：由于光网络需要遵守中国的通信行业标准[7]，如下表所示，光网络领域产品的不确定告警和提示告警用色与规范标准用色允许互换。
表3 YD/T 1289.2-2003行业标准定义的传送网告警级别与颜色对应表

2.4 表格
表格是用于在web界面上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。

单元格是表格的最小基本单位，最常见的单元格是一行一列的最小单元格，一个单元格也可以跨多行或多列。如下图所示：
 
图17 表格单元格样例

2.4.1 属性
4.4.1.1：除界面布局使用的表格边线外，其他的表格边线必须设置为单细线
说明：参见下图：
 
图18 表格样例

4.4.1.2：当表格文字字号采用10px -12 px时，表格行高设置为20 px - 24 px。

建议4.4.1.3：当表格只包括两列内容时，建议第一列与第二列的列宽比例为1:2
说明：列宽比例换成百份比为33%:67%，这样有良好的视觉效果。

4.4.1.4：表格单元格内的数据左右最小边距为3 px，上下最小边距为2 px。
说明：单元格内的数据禁止贴边。

4.4.1.5：表格单元格的数据对齐设置遵循如下标准：
表4 表格单元格对齐方式
区域 数据类型 水平对齐方式 垂直对齐方式
表头 文本 水平居中  上对齐
表格内容  文本 左对齐  上对齐
 数字、小数、日期、货币、时间、百分比、分数 右对齐  上对齐

说明：
1、对于用户的定制表格需求和系统对表格单元格显示内容无法预知的情况，不在本约束范围内。
2、文本在单元格中对齐效果图如下：

建议4.4.1.6：当表格单元格内文本内容过长而无法完全显示时，建议采用在文本最后添加“…”的方式显示。
说明：通过增加“…”提醒用户，属于业界通用做法，同时保证界面显示正常。

4.4.1.7：当表格列支持列排序时，在表格的表头标签后增加三角排序图标表示该列支持排序，使用排序图标的样式表示当前的排序状态。

4.4.1.8：表格的标题行进行突出的效果处理

建议4.4.1.9：表格中相邻的行采用不同的背景色进行间隔处理

2.4.2 行为
4.4.2.1：在表格中，鼠标停留和鼠标选中的行，必须进行显示上的改变。
说明：例如使用背景色改变、文本变色、加粗等方法。参见表格中行设置效果样例。

4.4.2.2：使用鼠标左键单击表格中支持排序的某列表头时，该列的排序方式升序、降序之间循环切换。

建议4.4.2.3：列表表格要支持“全选”和“取消选择”

2.4.3 设计要求
4.4.3.1：表格的嵌套层次禁止超过4层
说明：大量的web界面设计实践表明，4层表格可以完成所有界面的开发。

4.4.3.2：表格格式设置的优先顺序为：单元格 -> 行 -> 表格
说明：例如，在行定义中背景颜色为蓝色，在单元格中定义单元格为黄色，最终在单元格格中显示的是黄色，而不是蓝色。

4.4.3.3：为适应多分辨率的要求，表格宽度用百分比表示。
说明：主要是用于外部表格Table的定义，当然开发人员可以对整个表格中的多个列用具体的宽度值来定义，但要保证有列宽采用百份比或不定义，适应软件窗口大小的调整。

4.4.3.4：当单元格行高设置小于12 px的时候，必须在单元格中加入间隔图片（1 px透明图片）。
说明：这是一个高度和宽度都为1px，背景透明的gif的图片；可利用photoshop工具软件制作。

建议4.4.3.5：多列数据不需要定义列宽，表格将根据内部包含的内容进行自动分配列宽。

2.5 表单控件
表单的作用是为用户提供交互的操作方式。

2.5.1 文本域
文本域：接受任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看

到这些文本。如下图：

建议4.5.1.1：文本输入框的宽度应根据实际输入字段的长度定义
说明：在下图所示。

建议4.5.1.2：文本输入框的边框采用单线条

4.5.1.3：文本输入框必须提供相应的域标签

4.5.1.4：当文本输入框与其域标签采用左右布局时，域标签在文本输入框前面；当文本输入框与其域标签采用上下布局时，域标签在文本输入框上面且垂直左对齐。
说明：如下图所示：

建议4.5.1.5：文本输入框与其域标签采用左右排列的布局
说明：

4.5.1.6：对于必须完成输入的文本输入框，在文本输入框右侧加红色的“*”。
说明：如图30所示。

2.5.2 单选按钮
单选按钮：单选按钮用在由互斥属性或选项组成的组里；也就是说，若单选按钮的某一项被选中，则所有其它单选按钮都将自动被置为未选中状态。

4.5.2.1：多个单选按钮采用遵守一行、一列或矩阵的布局方式

4.5.2.2：对于暂不可用的单选按钮进行变灰处理

建议4.5.2.3：单选按钮的默认初始状态为最常用选项被选中

建议4.5.2.4：当选项超过6个时，建议采用下拉列表控件。

2.5.3 复选框
复选框用来设置非互斥的属性。复选框经常成组出现，任何时候都可以选中任意数目的项。
复选框应当用在一组非互斥选择中，它们不应该被用作互斥二元选择。一个孤立的复选框，不象一组单选按钮那样容易理解，尤其对新手和偶尔使用的用户。

4.5.3.1：复选框禁止采用添加边框的效果
说明：复选框增加边框后的效果图如下：

4.5.3.2：多个复选框采用遵守一行、一列或矩阵的布局方式

4.5.3.3：一组复选框默认初始状态为其中的必选项被选中

4.5.3.4：对于暂不可用的复选框进行变灰处理
说明：如下图所示：

2.5.4 下拉列表
通过使用下拉列表控件，用户可以点击其右边的小三角，下拉显示一组选项完成选择操作。
 
在实际开发中，组合查询或数据过滤功能的设计中经常使用下拉列表，这样界面会显得更加简洁。如下图所示：

建议4.5.4.1：下拉列表的宽度应保证超过半数的选项在界面中完整显示

4.5.4.2：无效的下拉列表必须采用包括右边黑色三角形在内的整个控件显示变灰的效果。
说明：如下图所示：

4.5.4.3：下拉列表中的选项必须采用按照任务、或按照逻辑、或按照英文字母的顺序进行排序。

建议4.5.4.4：当选项数量范围从2到6个时，建议采用单选按钮。
说明：采用单选按钮更为直观，可用性更高。

2.5.5 列表框
列表框包含一系列用户可以选择或访问的选项。列表框可以支持互斥或非互斥的选择。与下拉列表相比，列表框最大区别是可借助 ctrl 或 shift 键完成一个或多个选项的选择。
 
在实际开发中，组合查询或数据过滤功能的设计中经常使用下拉列表，这样界面会显得更加简洁。

建议4.5.5.1：列表框的宽度应保证超过半数选项在界面中完整显示

4.5.5.2：列表框中的选项必须采用按照任务、或按照逻辑、或按照英文字母的顺序进行排序。

建议4.5.5.3：对于暂时无效的选项，不要出现在列表框选项中

建议4.5.5.4：当选项数量范围从2到6个时，建议采用单选按钮或复选框。

2.5.6 按钮
按钮是界面中最常用的控件之一，通过按钮来控制表单的操作。

4.5.6.1：无效按钮进行变灰的处理

4.5.6.2：按钮宽度比其中的文本宽度长，禁止出现按钮文本贴边情况。

4.5.6.3：系统中按钮之间的距离统一，最小间距为10 px。

4.5.6.4：标准编辑（新增，查询，删除，修改…）按钮的大小必须一致。
说明：按钮大小参考值为70px×22px。

建议4.5.6.5：按钮上只显示字符
说明：
1、由于“图标+字符”的显示方式，在实际开发设计中会带来很大的设计工作量。
2、禁止按钮上的 “图标+字符”的效果采用图形方式实现，这样的设计对本地化支持很差。

2.5.7 其他专用控件
面包屑（Breadcrumb）：告诉用户当前操作所属的层次，用户可快速返回上一级。参见面包屑视图示意图。

日历、时间控件组：能够提供给用户快速、正确的完成日期，时间输入的操作面板。

文件上传控件：供用户完成本地文件上传到服务器上的控件
 
说明：这些控件是采用浏览器集成技术，目前无法实现对控件按钮风格的完全控制。

选项卡（Tab Page）：提供一组选项卡页面，完成多个操作面板之间的切换。

树形菜单：一个可以展开收缩的动态公层树形操作面板。

2.6 窗口
相对于C/S的窗口而言，B/S软件的窗口主要是指浏览器窗口。窗口设置主要是对浏览器窗口组件的控制。一个标准的浏览器窗口由下面部分组成：标题栏、菜单栏、工具栏、状态

栏、地址栏、链接栏、主操作区，详见下图：

窗口主要包括：模式窗口和无模式窗口两种形式。

2.6.1 属性
4.6.1.1：窗口标题栏必须显示软件名或软件当前的操作，不可为空或其它无关内容。

建议4.6.1.2：窗口标题栏标题建议使用名词短语或动宾短语，信息排列格式为：<软件名称>-[]-[<定位信息>]
说明： 如下图：

4.6.1.3：窗口的标题栏和地址栏禁止使用跑马灯效果

建议4.6.1.4：窗口中建议只使用垂直滚动条
说明：
1、窗口中尽量不要使用水平滚动条；
2、在无法避免使用水平滚动条的情况下，可以采用分页显示技术消除垂直滚动条。

2.6.2 弹出式窗口
由于弹出式窗口容易造成界面凌乱，降低系统的可用性，所以在实际开发中应该尽量少用弹出式窗口，

4.6.2.1：横排窗口的宽高比例应在1.25 ~ 1.618范围内，竖排窗口的宽高比例应在0.618 ~ 0.80范围内。
说明：窗口的宽高比例遵从“黄金分割”比例。

建议4.6.2.2：横排窗口的宽高比例为1.33，竖排窗口的宽高比例为0.75。
说明：考虑到目前显示器的比例为4:3，建议窗口也保持4:3的比例。

4.6.2.3：弹出式窗口需要用户确认后才能关闭

建议4.6.2.4：弹出式窗口支持通过按钮关闭

4.6.2.5：仅有主操作区界面的弹出式窗口禁止屏蔽最小化按钮
说明：这样为方便用户窗口切换操作。

2.7 链接/路径
2.7.1 链接种类
命名锚记链接，此类链接跳转至文档内的特定位置。
电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。
空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。

2.7.2 相对路径与绝对路径
绝对路径：绝对路径提供所链接文档的完整 URL，而且包括所使用的协议（如对于 web 页，通常使用 http://）。

一个绝对路径。
文档相对路径对于大多数 web 站点的本地链接来说，是最适用的路径。在当前文档与所链接的文档处于同一文件夹内，而且可能保持这种状态的情况下，文档相对路径特别有用。

文档相对路径还可用来链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接的文档的路径。

建议4.7.2.1：除客户服务邮箱和公司网站等外部地址链接，软件中所有的链接路径采用相对于软件服务器根目录编写，禁止链接外部文件。
说明：尽管对本地链接也可使用绝对路径链接，但不建议采用这种方式。因为一旦此软件服务器IP地址有变动，则所有本地绝对路径链接都将不可用。

2.7.3 框架内目标窗口
4.7.3.1：对于存在框架链接的页面，一定要指定默认框架名，例如< base=“framename” >。
说明：框架跳转目标参数说明：
 _blank 将链接的文档载入一个新的、未命名的浏览器窗口。
 _parent 将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
 _self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。
 _top 将链接的文档载入整个浏览器窗口，从而删除所有框架。

2.7.4 图像地图
图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个地址）。图像地图是一种非常友好，直观的在图片上加上动态

效果的一种方法。

2.7.5 链接风格
详见样式定义部分的详细说明。

3 系统框架
采用B/S架构的产品或系统的界面一般来说主要由以下几种典型界面：登录界面、加载界面、主界面；同时在系统运行过程中，Help界面、About界面、错误处理界面是主界面的必

要部分。
同时系统对多语言切换和换肤功能的支持也是目前web产品的常用功能。

3.1 登录界面
3.1.1 属性
5.1.1.1：登录界面各区域布局由上至下依次为：识别区、输入输出区、消息区；各区域大小范围定义参考主界面各区域大小范围。
说明：登录界面布局如下图所示：
识别区
输入输出区
消息区
图40 登录界面布局示意图
5.1.1.2：登录界面中必须包括的界面元素有：品牌标识、系统名称、版权声明信息。

5.1.1.3：除支持自动适配语言版本的系统外，支持多语言版本的系统的登录界面必须提供语言选择入口。
说明：如果客户端实现切换语言版本必须首先服务器完成语言版本的情况，实质上是单语言版本，不属于多语言版本。

3.2 主界面
3.2.1 总体布局
web产品由于功能、业务、实现方式上的千差万别，决定了在界面布局和分区上必须灵活，以满足产品不同的需求。
依据产品实际需要，可以在一定的原则上，对主界面进一步扩展布局和切分区域，或者裁减某些区域。

5.2.1.1：主界面中必须包括识别区和消息区

建议5.2.1.2：主界面禁止屏蔽地址栏

建议5.2.1.3：为保证界面整体布局一致，主界面采用左（导航区）右（输入输出区）、上（识别区）下（消息区）结构。
说明：参考下图：
 
1：识别区（Identification area）  2：导航区（Navigation area）  3：输入/输出区（Input/output area）  4：消息区（Message area）

5.2.1.4：当主界面采用左（导航区）右（输入输出区）、上（识别区）下（消息区）结构时，主界面各区域的大小范围分别为：

5.2.1.5：除Help界面外，弹出式窗口只显示输入输出区，不允许切分出其它区域。
说明：包括About界面；如下图所示：
输入输出区

5.2.1.6：根据实际需要，可以在识别区下面切分出一个独立的状态信息区。
说明：状态信息区主要是用来放置登录用户、登录时间、日期、版本号、切换用户、退出等信息。如下图中的灰色区域：
识别区
状态信息区
导航区 输入输出区
消息区

建议5.2.1.7：当界面的输入输出区中采取上中下结构时，建议选择条件部分置上；输出结果（如表格）置中；结果的操作按钮置最下方。

3.2.2 色彩搭配
建议5.2.2.1：主界面各区域颜色由深至浅依次为：识别区、消息区、导航区、输入输出区
说明：如下图所示：
识别区
导航区 输入输出区
消息区

3.3 Help界面
Help界面作为主界面的一个单独窗口，在设计时应该注意在布局和风格上应与主界面保持一致。

5.3.3.1：所有B/S架构的产品必须提供Help

3.4 错误处理界面
3.4.1 属性
5.4.1.1：错误提示界面采用模式窗口
说明：这样用户必须关闭窗口后才能继续操作。
 
图46 告警类的提示信息窗口样例

5.4.1.2：对于客户端输入数据的有效性验证，出错提示应该由客户端直接弹出对话框提示。
说明：如下图所示：
 
图47 客户端错误处理对话框样例

3.5 About界面
3.5.1 属性
5.5.1.1：About界面必须包含以下信息：品牌标识、系统名称、版本信息、版权声明信息、公司网址链接、技术支持网址链接。其中网址必须为实际的地址链接，提

供浏览器打开功能。
 
5.5.1.2：About界面如果需要显示其他必要的信息，需要以TAB页的方式增加。
说明：如系统的详细子版本号、LICENSE等其它信息。

3.6 多语言功能
3.6.1 属性
5.6.1.1：当系统支持多语言版本切换功能时，语言切换功能入口清晰，操作便利；禁止通过关闭浏览器实现语言切换。

5.6.1.2：当系统支持多语言版本切换功能时，除多语言切换入口外，界面上禁止多种语言混杂一起的情况。
说明：在非英文版本（如中文或其它）界面中允许出现一些专用英文术语和词汇。

5.6.1.3：当系统支持多语言版本切换功能时，系统默认采取与浏览器当前的语言版本一致。
说明: 当浏览器当前是英文版本时，其打开的应用系统界面默认采用英文版本。

建议5.6.1.4：当系统支持多语言版本切换功能时，系统默认当前登录的语言版本自动与上一次登录的一致。

3.6.2 行为
5.6.2.1：当系统支持多语言版本切换功能时，语言切换后不影响当前操作，不更改当前操作位置。

3.7 换肤功能
通过系统提供的换肤功能，用户根据自己的喜好选择系统界面的样式和风格，这是目前界面设计领域惯用做法。

3.7.1 属性
5.7.1.1：当系统支持换肤功能时，换肤功能入口清晰，操作便利。

5.7.1.2：当系统支持换肤功能时，保证界面换肤整体平滑切换，不出现图片错位、结构布局凌乱的情况。

建议5.7.1.3：当系统支持换肤功能时，系统默认当前登录的皮肤自动与上一次登录的一致。

建议5.7.1.4：企业用户版提供至少三套皮肤界面，个人用户版提供至少五套皮肤界面。
说明:三套皮肤界面可以包括默认风格、暖色调和冷色调界面风格。

3.7.2 行为
5.7.2.1：当系统支持换肤功能时，新皮肤刷新出来的时长不超过5秒。

建议5.7.2.2：当系统支持换肤功能时，系统皮肤切换后不影响当前操作，不更改当前操作位置。