空间管理您的位置: 51Testing软件测试网 » pioneer of living space.......... » 日志

我们拒绝平庸，拒绝随波逐流，拒绝墨守成规，让梦想不再流浪。

B/S界面规范

上一篇 / 下一篇 2014-06-04 09:34:33 / 个人分类：总结

查看( 4190 ) / 评论( 1 ) / 评分( 0 / 0 )

!EHp9V,N0

,[ndRv)z{f!G5]m0表1 风格配色说明表... 36

表2 网管/LMT系统告警配色建议... 37

&~3f6ja%v%k0表3 YD/T 1289.2-2003行业标准定义的传送网告警级别与颜色对应表... 38

表4 表格单元格对齐方式... 3951Testing软件测试网2U!OY&Lhe0A

;JG |9|D)?F9OU0表5 表格排序的图标定义... 40

z8u |!M }5{9LT0表6 主界面各区域大小范围... 5651Testing软件测试网f-aK%S^

图目录 List of Figures

图1 web有效页面定义示意图... 12

图2 面包屑视图示意图... 1351Testing软件测试网gIF$RV m.Y

图3 结构原理示意图... 18

图4 简单性原理示意图... 19

L7PV/y:}v0图5 可见性原理示意图... 19

'`]'z C8YJ0图6 反馈原理示意图... 20

图7 宽容原理示意图... 2151Testing软件测试网NhsRt

8BfL(A {*C;Hu0图8 重用性原理示意图... 21

5Nv2M)F6Kb n0图9 控件、文字信息组合成块状... 22

2O r3aT#E0图10 web界面的软键盘样例... 24

"vZ7~+Qm0图11 鼠标定位视觉提示示例... 25

图12 图片替代文本示意图... 2751Testing软件测试网a1j ]3Q{7B%G

图13 Vertical Brand Signature 竖式品牌标志... 28

Y|:hx3a:Iaq0图14 Horizontal Brand Signature 横式品牌标志... 28

9\9C%`#_$[8@j0图15 文本与图片共排对齐示意图... 31

图16 列表文本示意图... 31

c}h5pG!c*B7Xn6P:i0图17 表格单元格文本换行示例... 32

图18 公司VI规范的标准色示意图... 33

图19 公司VI规范的辅助色示意图... 34

图20 文本颜色和背景颜色明度对比明显... 34

,Q2iHT%M p$q't0图21 图形对象颜色和背景颜色明度对比明显... 35

o3Nf*uW T{Qz;r8Z0图22 文本颜色和背景颜色明度对比不明显... 35

图23 风格界面效果示意图... 36

图24 链接点击效果示例... 37

V p1J-Y1\[+VR0图25 表格单元格样例... 3851Testing软件测试网(N@!C.g1O~]

图26 表格样例... 39

图27 单元格文本对齐效果... 40

L4e7\gk[f0图28 表格示意图... 41

;Sai|F_cD!Y r0图29 多种文本输入框示意图... 4251Testing软件测试网!~cSL,Ze

b@!M{ SLDcxE0图30 文本输入框宽度定义方法... 43

9M$v?Tg6K0图31 左右排列的文本输入框... 43

I,`O6gyPo!i`0图32 上下排列的文本输入框... 43

H?&} y\}F2AeY0图33 单选按钮示意图... 44

图34 复选框示意图... 44

$O+YNESy\ u0图35 复选框的错误样式... 45

-Kn9c%M,nw0_'q0图36 复选框的变灰效果... 45

图37 下拉列表示意图... 45

图38 组合查询中使用下拉列表的样例... 45

图39 下拉列表的变灰效果... 46

3zg E,O7AkI0图40 列表框示意图... 46

图41 按钮样例... 47

图42 日历、时间控件组样例... 48

图43 文件上传控件样例... 4851Testing软件测试网4i7kxQ)nm

图44 选项卡样例... 4951Testing软件测试网8d Z p&i:rZ0P

"[1SS3LO5T9t&g0图45 树形菜单... 49

图46 典型浏览器窗口... 50

4auM9|*Y'BB+\J0图47 窗口标题示意图... 50

&~v!T:|^1rsy^g0图48 登录界面布局示意图... 54

图49 登录界面示意图... 5451Testing软件测试网$o0vU[5nZ.Y

uApX/mLu0图50 主界面布局和大小示意图... 56

图51 弹出式窗口布局示意图... 56

图52 web主界面切分出状态信息区示意图... 5751Testing软件测试网}2j)DI*uL

wJ/W_0kG3E0图53 主界面各区域颜色配色示意图... 57

图54 告警类的提示信息窗口样例... 5851Testing软件测试网v^DB:P%O

图55 客户端错误处理对话框样例... 58

51Testing软件测试网*d(?0{q"~ i4e

B/S界面规范 V3.0

-nq,g)g!u0范围Scope：

]A{-O$E7{0本规范适用于公司采用B/S架构的O&M类产品。

本规范适用于800×600分辨率与1024×768分辨率及更高，支持FireFox 1.06、Netscape 6.0与IE 5.0浏览器以及更高的版本。

(dMJ6HQ;o)~%EX%f0本规范示例的界面分辨率为1024×768，并已经在IE 5.0浏览器上测试通过。

如果本规范与行业标准存在冲突，则行业标准优先于本规范，但对于行业标准不涉及的部分，则公司各产品领域必须严格遵守本规范。

简介Brief introduction：

uOU1A o#fty&Ff0本规范描述了B/S架构下的web界面所必须遵守的规则，以及一些优先使用的建议，统一了web产品界面视觉风格和交互操作规则，从而保证web图形界面具有较强的一致性、良好的可用性以及良好的界面视觉识别体系。51Testing软件测试网{R}\Sa"[

51Testing软件测试网!QJr(Y%NV5U5~

关键词Key words：

|;v2v6AVf0B/S web 界面 GUI 布局一致性可用性

51Testing软件测试网I"Z Bv)_ e

引用文件：

F_D't/_+q}0下列文件中的条款通过本规范的引用而成为本规范的条款。凡是注日期的引用文件，其随后所有的修改单（不包括勘误的内容）或修订版均不适用于本规范，然而，鼓励根据本规范达成协议的各方研究是否可使用这些文件的最新版本。凡是不注日期的引用文件，其最新版本适用于本规范。

缩略语Abbreviations

缩略语

2R3x0Sp:WIeS051Testing软件测试网!N?{ o"G@ Z

Abbreviations

*M)o^)Rv1e0

英文全名

%n4b,ToN"f+VI#v0

Full spelling

:@j|:QlR0

中文解释

&bL}f:`%@ ~0

Chinese explanation

_T4jds4p#O0

HTML

-p"?$J]o.N+X3r0Hyper Text Markup Language

超文本标记语言

HTTP

/mX!| Zn]~%FMr]!O2P0Hyper Text Transfer Protocol51Testing软件测试网,@?PZx

-?{+b5jqR6W,tV0超文本传输协议

WWW

@ |)Km&c0World Wide Web51Testing软件测试网8[L:o!_ K;gL

t;q-Vc%a0万维网

/Z }1e.s3V2oD7h0GUI

MW)\$i0tcl;ys0Graphic User Interface51Testing软件测试网j)c%g%{C

cy5N?)Wk0用户图形界面51Testing软件测试网M.chCT8P0g9G

DOM

_Xt@'y8J&]t1FE6kU0Document Object Model

文档对象模型

JSP51Testing软件测试网x-VTm.s

Java Server Pages

ad\ oz.b`#M.To0JAVA服务器界面

GQ6U7[+HT0ITU-T51Testing软件测试网1In [~Q y%z g

zRQ%b O%NGmt^0International Telecommunication Union - Telecommunication Standardization Sector

国际电信联盟-电信标准部

HCI

Human-Computer Interfaces

人机接口

:Ppp"MnW0pt51Testing软件测试网$ba0[J-H

Point

:DL|%GCK!~s0磅，绝对长度单位。1mm相当于3pt。

Pixel

M*a'So8ED5|0像素，相对长度单位。它是相对于显示器屏幕分辨率而言的。譬如，Windows的用户所使用的分辨率一般是96像素/英寸；而Mac的用户所使用的分辨率一般是72像素/英寸。51Testing软件测试网~^+^a)MZZ

-cy?*D)n&NL0VI

Visual Identity

视觉识别

.Asm/^7k_ }0URL

YV5K}:yR4p0Uniform. Resource Locator51Testing软件测试网.Y__o"YX

}!\R_h'Z2A*Y0统一资源定位符，也被称为网页地址。它是因特网上标准的资源的地址。

51Testing软件测试网u}O8MwE(\

*qtM&T @%dP ^0Field label

域标签51Testing软件测试网+P XA+R bI

/V'gwra!BRoJ051Testing软件测试网W&aqk'tPf

"NO*u3t [0Text Box51Testing软件测试网$Q6^6v^!eJ"x

文本框

K(LN5yM0Single Line Edit

9OphBYvZ_s8I3CTY0单行文本框

Multi Line Edit

多行文本框51Testing软件测试网+Cj t?I+kj

xH.}1T1qO1?_0Drop Down List Box

下拉列表

yk(D eR]051Testing软件测试网tVmB O O`1r

List Box

N]Tk7`Bx0列表框51Testing软件测试网0K;b)R0X6h

.X2C!M@-U0

Radio Button

WD[5Y\c6o0单选按钮51Testing软件测试网bs(s)S6V

gp2Yhj6~r0

Check Box

)MA vm%B6{3yf-?"T0复选框

51Testing软件测试网Z5c4Ua0^

'T*Y YwAL;fC2g0List-Based Views

列表类视图51Testing软件测试网S2Red{(lx

K_HW/RZ0Tree-Based Views

3d$z/x)l6@vW2}$|0树类视图51Testing软件测试网 aF,eP'bzAy

+mjSa3O?:Cw)u v)e+C0

fkJIn%d0Chart-Based Views

图类视图51Testing软件测试网8vY o_\"N

g h;b\8M h$B"Fq0

Tab Order

Tab顺序

;g}'GjaB.K%g;X\9~0

Click51Testing软件测试网"Z?/Z;i!J \

'l4U(@0iwQ0单击

51Testing软件测试网V [yi rq7P

LF,E0j$Ag0Double-Click

双击

(AZE7}3lI0Z6Q&cMv7o0Drag51Testing软件测试网Q@_9^kqr#X

拖拉

51Testing软件测试网c0lXI_7?

Focus51Testing软件测试网/H g/L.k%w~

焦点

(~;~/X vg&qg0

M5?2j%_2\S6j3I*A0术语和定义Term & Definition：51Testing软件测试网Lf Ej[8Ed

C/S：客户机/服务器（架构）；是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。

51Testing软件测试网1eb+d%@!FE

/L!@K/r"dWx~X$y0B/S：浏览器/服务器（架构）；是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务器端实现，形成所谓3-tier结构。B/S结构，主要是利用了不断成熟的WWW浏览器技术，结合浏览器的多种Script语言(VBScript、JavaScript…)和ActiveX技术，用通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能，并节约了开发成本，是一种全新的软件系统构造技术。

W.wgh5k/o]hX n5~%C0

视觉识别性：一种视知觉感受比较深刻的现象，它往往依靠某种非大众化的颜色或设计元素作为自己的形象特点，强调与众不同，或者同一种形象反复出现，使受众的视知觉感受深刻，容易辨认、过目不忘。51Testing软件测试网 VjXj!~S~U

_$d9@R|-z0站点：在本规范中套用Internet的术语“站点”，也叫做Web系统；它是以超文本标注语言（HTML）与超文本传输协议（HTTP）为基础，能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

0c2Z:t gL#\ P!x0界面：web系统在浏览器所展现的可视区域即为界面；界面是页面、窗口、对话框等的统称，在实际设计中，界面可以是单个页面、窗口、对话框，也可以是前者的集成。

^#K0o*JzrC0

T#M)d(`2y3G5N9{I h0界面模式：能满足一类应用的固化的界面组织方式与操作流程，如框架、层叠等均可视为界面模式。51Testing软件测试网,Z/oF5p.Z8F

51Testing软件测试网4p+N h;nuD

页面：构成界面的单个超文本文件，如单个html、asp、jsp、php即为一个页面。

.]/o{F"j051Testing软件测试网%T rlxg N]

5TXGJ(xY0框架：一种界面模式，通常一个界面由多个页面嵌套组成，这样的界面组成模式称为框架。

窗口：窗口为应用提供了环境；所有的接口对象都在窗口里组织和表达。窗口是用户与应用交互的首要途径。

0T ~/d!qd Px.v3pu051Testing软件测试网Gs6q_.T&Eb"`

mKt-[)r_3BP'b0主窗口：主窗口是用户与应用交互的主要场所。应用程序可以有多个主窗口，而各主窗口是相互独立的。

OF wO8b/xt9u+C&F051Testing软件测试网M9z1pR@ Iz)w

子窗口：子窗口为主窗口里的交互提供了辅助方式。对话框是一种特殊类型的子窗口，特定处理某命令的完成以及为用户提供信息。

7H|/y kvN [0

模式子窗口：模式子窗口要求用户在继续工作之前，对窗口进行某些操作。在进行下一步工作之前，应用程序子窗口要求从用户那里得到信息，但不能要求依赖于其它应用的继续而获得信息。或者，子窗口可以在继续任何其它动作之前，要求从用户那里得到信息。

6z;E3[B}0无模式子窗口：无模式子窗口允许用户在未释放子窗口的情况下，从事其它操作。[1]

web有效页面：浏览器窗口除去IE自身的菜单栏，地址栏，状态栏，工具栏，标题栏能提供给用户信息的有效空间。图1的布局仅作为术语定义的参考，详细规范参见规范系统框架主界面部分。

51Testing软件测试网IV5{Ce

Jt:za.c/t n0图1 web有效页面定义示意图

1：识别区（Identification area） 2：导航区（Navigation area） 3：输入/输出区（Input/output area） 4：控制区（Control area） 5：消息区（Message area）

,a8HTuIv D0

/e%Hw!v)qdcH0识别区（Identification area）：web有效页面的一个区域之一，通常显示产品的名称、版本信息、视觉形象，或者相关广告。51Testing软件测试网c6s%rd"qcjN

导航区（Navigation area）：web有效页面的一个区域之一，它的作用是包含任务层次流向，指引用户找到要操作的功能。51Testing软件测试网1q4\4POnjo

输入/输出区（Input/output area）：web有效页面的一个区域之一，接收用户输入信息、向用户显示信息的区域。51Testing软件测试网-dbEU:]3q]&P

K}-D@u7H0控制区（Control area）：web有效页面的一个区域之一，提供控制信息及交互控制信息、命令入口、选择命令的区域。

}vZv-k#S0n0消息区（Message area）：web有效页面的一个区域之一，通常显示版权、联系方式等信息。51Testing软件测试网h.Z@(S,o5r$[

go;vU ^5OL GVZQ051Testing软件测试网9YgHsi

8Sa&B\/nUX%v)j0对话框：为了提示或反馈某种信息或状态的弹出界面，对话框不提供用户的数据输入。

[T$tcm0相关任务链接：就是完成一个功能点的几个同层次的页面之间的跳转关系。

2~qd `)} g0

v.jPW-b0web页面控件：就是能与用户进行交互，能响应事件的一些web元素；作用与GUI控件功能相吻合，在规范正文的其他专用控件中有具体的描述。

51Testing软件测试网6T PFQ.Z9d re

0STF)N&\%as0面包屑（Breadcrumb）视图：一种导航图，用来表示当前的页面在整个web站点的路径，用A>>B>>C表示；其中A表示第一层功能，B表示第二层功能，C表示第三层功能。

w8k ^m]scJhJ _&|0图2 面包屑视图示意图

Java Applet： Java Applet是Java小程序，一种独立的小型可执行程序，后缀名为class，可以与图像一样放置在web上。独立于平台，可以在客户端完全下载运行，Java Applet下载迅速，界面表现能力强。51Testing软件测试网p(c(@dq4O$_$o

Gv7KOI-@1ZS\0

TZb,Z-ut/q2T~$Sb0组：界面上多个相同类型字段的集合。51Testing软件测试网C`,aO9SN2E

lG$f"Lh0皮肤（SKIN）：构成界面系统整体视觉风格的图形元素的集合。

51Testing软件测试网[*d7U(?uE

f!gT(IDw*H0明度：是指色彩本身的明暗度，低明度色彩是指阴暗的颜色，高明度色彩是指明亮的颜色。在色相中，黄色明度最高，蓝色则最低。51Testing软件测试网O6`I*bp

)Y&z2p*\(s%]u$|0

纯度：纯度指色彩的纯粹程度，又称彩度、饱和度、艳度。

$c Y C&@skZ7L2g!^0

T*NJ y6D^.ru0冷色：色彩在由视知觉经验引起的心理作用，通常由蓝绿到蓝紫范围的色彩使人感到寒冷，主要包括蓝绿、群青、普蓝、蓝等色彩，称为冷色。

暖色：由品色到黄色的范围会使人感到温暖，主要包括品红、红、橙、黄等色彩，称为暖色。51Testing软件测试网9_r'v$q)lw

w4p? u$S l-Y0色彩对比度：指两种或以上的色彩排列在一起时产生的明确的色彩差别。51Testing软件测试网(\ N`(}#QY R+F

v#gYi6bqq&UnO"c0域标签：也称Field label，是界面中文本输入控件、选择域的标识，在公司部分领域也被称作参数。[2]

51Testing软件测试网Ub#kTOu(i

焦点：就是光标，当对象获得焦点时就可以接受用户的输入。

S0}&M3{v_8F#n(|1br@051Testing软件测试网2J4q|0t[J'^

5s:s/?$y3IS0Tab顺序：Tab顺序即指一般窗口中视图及控件（类似如Windows中资源管理器）和对话框中各控件随Tab键按下的输入焦点移动顺序。

|+xj3P1g0web安全色：在HTML中，颜色或者表示成十六进制值（如 #FF0000）或者表示为颜色名称（red）。网页安全色是指以 256 色模式运行时，无论在 Windows 还是在 Macintosh 系统中，在 Netscape Navigator 和 Microsoft Internet Explorer 中的显示相同的颜色。传统经验是，有 216 种常见颜色，而且任何结合了 00、33、66、99、CC 或 FF 对（RGB 值分别为 0、51、102、153、204 和 255）的十六进制值都代表网页安全色。51Testing软件测试网zNlApF

但测试显示仅有 212 种网页安全色而不是全部 216 种，原因在于 Windows Internet Explorer 不能正确呈现颜色 #0033FF （0,51,255）、#3300FF （51,0,255）、#00FF33 （0,255,51）和 #33FF00 （51,255,0）。51Testing软件测试网w!?@Kh

6e%|:]T!q ``0当 Web 浏览器第一次设置它们的外观时，大部分计算机只显示 265 色（8 位）。今天，大多数计算机都能显示数以千计或数以百万计的颜色（16 位和 32 位），所以如果您为使用当前计算机系统的用户开发站点时，完全没有必要使用浏览器安全调色板。

使用网页安全颜色调色板的一种情况是开发适用于替代 Web 设备，如 PDA 和手机显示屏的站点。许多这类设备只提供黑白色（1 位）或 256 色（8 位）显示屏。51Testing软件测试网mLW:c T1c

6_._s,J^;q0Netscape Navigator 的 UNIX 版本使用与 Windows 和 Macintosh 版本不同的调色板。如果专门为 UNIX 浏览器开发（或者目标用户是使用 24 位显示器的 Windows 或 Macintosh 用户或使用 8 位显示器的 UNIX 用户），请考虑使用结合了 00、40、80、BF 或 FF 对的十六进制值，这些值产生用于 Sun 系统的网页安全色。

bp~KNf/\0

*V|0~7Xp\5k;k0

1 概述

在电信网管业务中存在2种类型的接口（Interface），一种介于管理系统和设备之间，通常我们称之为“机机接口”；另一种则介于管理系统与使用它的操作人员之间，通常我们称之为“人机接口”。在ITU M.3000系列标准中，人机接口又被定义为“G”接口[3]。

P.Jr#uV8Q&J0对于人机接口，从接口呈现效果来看，接口又可分为两种类型，一种是图形化人机接口，即图形用户界面，如Windows系列操作系统界面等；另一种是非图形化人机接口，如MS-DOS系统操作系统界面等。51Testing软件测试网z@8bR ~p

1q&K&d2I7p3e ek2W0

在图形用户界面设计中，首先要必须保证人与机器之间正确的交互（Interaction），同时还要从心理学角度，保证人对界面操作在感觉（视觉、触觉、听觉等）和情感两个层次的完美体验。因此，图形用户界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。

用户希望我们的软件或系统不但功能完备，并且简单易学易用。有人认为，优秀界面的最高境界是用户不用阅读操作手册或接受培训就可以正常使用它。实际上，精心设计用户界面会节约公司成本，因为易于使用的软件会降低疲劳、减少出错、提高工作效率、减少培训和维护支出。

同时从公司角度来看，为适应公司全球化业务的发展，树立国际品牌，实现华为品牌资产持续增值，规范华为视觉传播系统，已经正式发布了《华为公司视觉识别系统规范》（下文中简称华为公司VI规范）。[4]产品或系统的图形用户界面作为华为视觉识别（VI）系统的一个重要部分，必须遵守华为公司VI规范，保证视觉表达更加的系统性和一致性，以期建立属于华为的视觉表达风格并能积累长期的品牌资产，华为需要系统地提升视觉传播的统一性和独特性。

g D8I9l-_6Y0如何快速地、高质量的完成图形用户界面设计，保证交付的图形用户界面具备高可用性和良好的一致性，同时体现出统一的华为品牌风格，对于我司的产品开发来说是巨大挑战，这也是本规范的制定初衷。

4Dp9r2xL*p)u.Y0本规范从产品交付角度，结合我司的实际情况，总结归纳了采用B/S架构的产品或系统的图形用户界面设计通用原理；从界面表现和人机交互角度，给出了界面和内部各种元素、控件必须遵守的规则要求，同时对于一些好的设计，给出了建议。

51Testing软件测试网0Z2x+} ^T/Y

1.1 文档结构

本规范包括以下几大部分：

i?0l:wN"p01、界面可用性：重点阐述在人机界面设计中，在可用性方面需要遵循的通用原则。

2、设计总则：界面设计应该遵循的总体原则。

~ x IbcW&{I{I03、基本元素：重点描述在图形用户界面设计中所使用到基本对象（如文本、图像、颜色、链接、控件等）以及基本操作进行约束，是界面一致性和统一风格的设计基础。

0gDX&i)}0QK#q04、系统框架：这部分集中对web系统的登录界面、主界面、帮助界面的布局、颜色等进行约束，使系统各部分在界面外观及操作流程上达到一致性。

1.2 假设和约束

1、本规范只约束软件或系统交付给用户的默认配置。对于用户在使用过程中，自行定制改变后的显示属性及其交互行为，则已经不属于本规范约束范围。

1EVcaj_m02、B/S产品或系统的联机帮助界面不属于本规范约束范围，其主要遵循公司资料开发部制定的《联机帮助技术规范》，可以在公司“内部标准规范总库”上获得。51Testing软件测试网-\o)tx|@

8_`:M+mp)PT!W03、采用Java Applet技术实现的界面由《华为公司C/S界面规范-O&M类 V3.0》进行约束。

c6\)o/\}(kv!y@] eI04、对于属于OEM-IN类型的软件或系统，当该软件或系统使用华为品牌提供给客户时，也属于本规范约束范围。

p2~!Z\%uQ/}05、对于属于OEM-OUT类型的软件或系统，原则上也需要遵守本规范，但如果客户有特殊的需求，可以不遵从本规范中的某些条款。

:h;d\EZ'PK06、本规范中所有示意图和说明只是对规范内容的辅助说明，它们是对规范文本的可视化表达和补充解释，用来帮助读者加深对规范条款的理解、以及作为产品开发和测试的参考；其本身并不具备约束力，所有条款的含义及规格应以规范文本为准。51Testing软件测试网7_zOu @

7、根据产品或系统应用的主要应用领域不同，我们将web产品划分为个人类、企业类两类，个人类主要指以面向消费类市场，满足大量独立个体的需求为目的的产品，界面表现出个性化、时尚的特点；企业类主要指以面向企业类市场，实现团体、组织的业务功能为目的的产品，界面表现较为规范化、严谨。不同类型的产品或系统，除了视觉风格允许有适当的用户化差异外，在操作流程、交互和可用性设计等方面应保持一致。在本规范的某些规则中，针对不同类型的产品或系统，给出不同的可选条例，以适应特定用户的使用习惯。

2 界面可用性 2.1 易读性原则

人在感知文字信息的时候往往受惯性思维或以往经验所约束，会很自然的遵循一些潜规则去感知信息。从视觉感知心理学角度来讲，规则的、层次分明的信息最易于为人的大脑所识别从而极快的进入大脑进行分析处理；而凌乱的、不规则的信息，人的心理有拒绝的情绪，大脑的感知系统需要消耗很大能量进行处理。

信息传达的易读性可以通过信息分类、信息块状化、信息主次化、信息秩序化等方式进行完善。

信息分类：大脑感知信息的时候，大脑处理系统通常需要对信息进行分类加工。特别是当屏幕上的信息量很多的时候，分类的信息让用户更容易地感知、发现和解释/理解信息。

cFE(dN(ku0信息组合呈块状：信息经过分类之后，同类的信息作为一个单元组，并且呈块状的出现在界面，块状的目的是使信息单元之间的区别明显拉开，使读者更易感知单个信息，并且整体不会感觉太繁杂。

Su:@'^0g t0信息主次明显：界面中信息会非常多，将信息安排的条理清晰、主次明显，将会减少用户完成任务的时间，对于一些关键的信息，或者完成某种任务的重要操作，要置于用户最易看到或最易操作位置，一些无关紧要的信息用户可以忽略过去，从而减少用户的脑力消耗。51Testing软件测试网ew/N@n.x

X-R|Q,BpSf5D/}0信息秩序习惯：信息组的秩序安排应遵循常用的形式、习惯、风俗。比如文本按照左对齐（或右对齐，部分从右至左阅读习惯的人群）就比居中对齐符合阅读习惯。

51Testing软件测试网0vdAf0Az6i8G

图3 易读性原则示意图51Testing软件测试网9l*Jy \6c)gK

5R y7g u,Z ?0B0

2.2 层次扁平化原则

9t/t.f@2J9xSC0信息的组织往往有计算机逻辑型、物理秩序型，系统开发过程中往往会根据某种逻辑物理关系去组织信息，但这种信息的组织方式不符合用户的便捷操作，比如C的操作是属于B，B又属于A，如按照正常逻辑的做法是设置A为入口，由A再找到B入口，然后由B看到C的操作菜单。用户在访问这种多层次的用户界面系统时，都会出现问题，因为他们不熟悉系统的逻辑、前后等关系，会被这种错综复杂的包含关系迷惑，同时，多余的步骤增加了任务完成的时间和工作量，增加用户认知的负担，导致用户有挫折感。

:F6h7pnK(h0友好的做法，应该将这些计算机逻辑、物理秩序隐藏起来，将这些信息关系扁平化，让用户直达操作，而不需要绕圈子。即把A、B隐藏起来，把C的操作直接显示出来。

图4 把操作项直接显示的层次扁平化

51Testing软件测试网S,wNGnJt

2.3 近距离原则

f \s3}6W{0j0相近的信息之间的关系会比距离远的更紧密，用户搜索相关联的信息或操作是从近及远，即所谓的就近原则。如果某个事件操作的执行按钮随便放在一个距离远的不相关的区域，用户会无所适从。

在组织信息时，必须把相关的信息扎堆，组成信息组。同时，应该遵循一定的顺序，比如从上到下，从左到右的操作顺序。近距离原则其实就是把有关联的信息按照用户的操作习惯组织成信息组。

图5 近距离原则示意图

9jN{vJo:Xtq,\4Rn051Testing软件测试网u R.Zo1Z#].F

2.4 可见性原理

}.Cz'u _O}0完成任务所需的所有选项和材料都对用户可见，不要让额外或冗余的信息干扰用户。

可见性原理是指用户界面应当根据用户所要做的事情，让所需的所有东西可见和可及。其目标就是在“所见即所得”（WYSIWYG）的基础上，进一步实现“所见即所需”（WYSIWYN）。所见即所需型界面让且仅让那些完成任务所必需的东西为用户所见。

b_5P6^],V0一方面，设计目标是让所有需要和相关的选项可见和明确。另一方面，一个好的设计不应让用户陷于过多的选择当中，不应让用户被不必要的信息所迷惑。理论基础：人的识别能力要强于记忆能力。用户在工作中不应该有过多的依赖于短期记忆的中间输入。

1J F"x.\`v0

?-F'A f.uLNxJ@"z0

图6 可见性原理示意图51Testing软件测试网 ~PRc#\-G

2.5 反馈原理

0J CtX7LQ0通过使用用户熟悉、清晰、简洁和无歧义的语言，让用户时刻了解系统对用户操作的反应和解释，了解与用户有关且被他们所关心的系统状态变化、出错、异常等所有情况。51Testing软件测试网 GK1x-j;K1a(r

好的用户界面应当像一个健谈的人，时刻告诉用户系统内部正在发生什么事情。

T(jK:fve0一个可用的系统要告诉用户许多事情。不过反馈原理不应该成为设立过多信息框的借口。这条原理的目标是找到简洁自然的交流方式。好的反馈信息并不一定要用文字。指挥车流的交通警察并不需要举起一块告示牌来告诉人们交通指令。出错和异常情况的反馈信息，应该简洁，采用用户的语言，并且容易为用户所理解。它最好开始就能让用户马上知道问题在哪里，接下来有针对性地解释问题是什么，并且建议解决问题的方法或操作步骤。

51Testing软件测试网0c7Q6qBQu7E

l4r0_8tC0图7 反馈原理示意图

)oW+P%]2@;W9_051Testing软件测试网LZ|"Qf5O

2.6 宽容性原理

保持灵活和宽容，通过提供撤销和重做功能来减少用户出错和不当操作所带来的开销，同时通过允许各种不同的输入形式和顺序以及通过合理的解释用户的所有合理操作来尽可能防止出错。减少出错是比提供好的出错信息更好的办法。高可用性的系统帮助用户少犯错误。宽容原理中包含了若干种减少用户出错的策略。在遇到未曾预料的输入或操作时，软件至少不应有什么愚蠢之举。数据合法性检查似乎是一种不错的方法，但是也要注意检查的时机和后续处理，并防止滥用，影响输入效率。

7d] Id.i\w'Pkf3@]051Testing软件测试网_x;XVE.?%P

O;gxH9S*v7jP3~ _,fg0图8 宽容原理示意图51Testing软件测试网8|T`9w8P:x)V

2.7 重用性原则

对于内部和外部的组件和行为加以重用，有目的而不是无目的地维持一致性，从而减少用户重新思考和记忆。令人奇怪的是，被人们广泛推崇的一致性原理在实践中却很少被人们所真正实现。实际上，在复杂的用户界面上实现高度的一致性并非易事。而且，实现高度的一致性经常意味着要牺牲其它重要的设计标准。关键的问题是重用，而不是一致性。重用程度越高，一致性就越好。因为重用可以使界面具有可预测性，减少用户的学习和记忆。不一致的界面不仅会降低软件的可用性，而且会增加程序设计的工作量。51Testing软件测试网J;gF%~)z$|

重用可以是界面的布局重用，概念、操作、动作、隐喻、控件、特效、菜单等的重用。

~+NY!@T$j+E _Y0

图9 重用性原则示意图

9]n3e#_*d5H F'~ V-k%a051Testing软件测试网C/Wz&R3|\$L|

2.8 保持适当关联的原则现有的系统中经常设计为用户必须打开很多窗口才能完成一个任务，然而这些窗口中的个体可能没有体现与任务、其他窗口之间的层次关联，因而妨碍了用户观看或恢复到初始视图。解决问题的复杂任务的界面设计中，应该在应用程序与相关界面、界面与界面之间一直可以看到前后关联。

3 总则一般来说，所有的图形界面设计应以整齐、一致、简单、易用、可用为原则，在ITU-T Recommendation Z.361 HCI规范和ISO 9241系列界面设计规范中对界面设计给出了比较完整、系统的理论指导。

t+\5iS(^~w0

e f4`5j0uw0

H1v.YxDJ9Gg0

3.1 全球化 3.1.1 布局

+Pk/phU/y0规则3.1.1.1：在控件的水平方向和垂直方向预留足够的空间，以适应控件的扩展

q([VuZv`3E0说明：当GUI界面从英语翻译到其它语言，包含文本的控件的长度将至少扩展30%[1]。这些控件包括按钮、菜单、表单、标签、文本域等。如果窗口本身已经很宽了，扩展将引起窗口超过屏幕的宽度。遵从国际化的界面布局规则，将在减少GUI界面调整的情况下，使GUI界面更好地适应翻译后的文本扩展。51Testing软件测试网/X%PQcDmtr

例如，相对于将控件并排放置，将控件上下放置可以为控件在水平方向扩展预留空间。

\:O!i/W,SmmJ!ms^0

图 1 控件并排放置

_B{$q%x/kDM%m0

;Wf6t/wL$\[0

图 2 控件上下放置

;v c;~uV|z0

规则3.1.1.2：控件本身预留足够的空间以适应扩展，或者控件自适应文本的长度和宽度51Testing软件测试网$_F[C~B'b

Y/X+o)M\8?*ktER0说明：基于翻译后文本将会扩展的预期，在设计控件大小的时候预留一定的余地，以适应文本扩展。某些控件在一定的布局方式下，支持自适应文本长度和宽度的能力。51Testing软件测试网vz,}Cu

dN?P-L)IR(k0

]X0C/tHR.v0

规则3.1.1.3： GUI界面的布局要适应本地的阅读顺序习惯

说明：世界上大多数语言都是从左到右的阅读顺序，但有些语言是从右到左的阅读顺序。例如，汉语、英语等都是从左到右的阅读顺序，但阿拉伯语、希伯来语是从右到左的阅读顺序。当软件翻译成具有从右到左的阅读顺序的语言时，GUI界面的布局也要切换成从右到左的布局。例如，垂直滚动条将从窗口的右边移到窗口的左边；标签将从关联控件的左边移到关联控件的右边。一般情况下，GUI界面的布局根据区域（locale）实现自动切换。

Dz'c2RG^7Eq5T0

图 3 英文界面：从左到右显示

VEW.t%f7N1a8o(f0

图 4 阿拉伯文界面：从右到左显示

O;OkqEN,\M_0

n;rG7h][051Testing软件测试网^3P1n"tIZ

建议3.1.1.4：建议使用HTML和其它标记的方向属性来实现本地阅读顺序的布局

说明：为了支持从左到右和从右到左布局，操作系统和浏览器已经做了大量工作。只要合理使用HTML或者其它标记，就可以方便地实现从左到右和从右向左布局、显示文字。

例如，html的属性dir，可以取值为“ltr”，“rtl”，分别表示“从左向右”和“从右向左”，如果不加声明，则使用缺省的“ltr”。

,wI*`5\q&G2xe \0还有其它方向属性，例如：PADDING-RIGHT、TEXT-ALIGN、MARGIN-LEFT等。

{0Z\B5\^051Testing软件测试网\t9G_jD

建议3.1.1.5：尽量避免控件使用绝对位置51Testing软件测试网[+D}`,IK;Er

说明：考虑GUI界面阅读顺序的变化，尽量避免控件使用绝对位置。

PZ+{4[(yQ?(s4Yr051Testing软件测试网+r"br8v.SH

规则3.1.1.6：不要在文本中嵌入GUI控件51Testing软件测试网ry?:Y+Z@6h

说明：当从一种语言翻译到另外一种语言的时候，词序也会改变。以下图为例，当翻译成法语后，词序发生了变化，GUI界面需要重新调整布局。

Ie:V cC$G0

图 5 翻译成法语后出现错误的词序

#{]7?X4S}(WJ2T0

.LV N5RX%C0更具弹性的做法是不要在文本中嵌入GUI控件：51Testing软件测试网 {q(PT5y0z*vY

9OR5v`xgnAF0

图 6 词序在英语和法语中都正确

51Testing软件测试网mx)dIC5h)[W

51Testing软件测试网b,}n:wzN9}@

3.1.2 字体

规则3.1.2.1：使用本地通用的字体

a'u4Wu~0说明：不同地区、不同语言对应的本地通用字体不尽相同。GUI界面上的文本使用本地通用的字体。一般情况下，GUI界面上的文本使用的字体是可以配置或修改的。

Q;x#^'}#uu051Testing软件测试网P V&@0Y`$f.vt

3.1.3 图像与图标

7yS#I3\G[3FB+zk0规则3.1.3.1：使用国际通用的或者中性的图像和图标51Testing软件测试网i_f2an0n

说明：图像和图标表达的内容丰富、形象，但是不同地区的人其文化背景不尽相同，对图像和图标的理解也不尽相同，有时甚至是完全对立的。同时，创建和修改图像和图标需要大量的投入。因此，尽量使用国际通用的或者中性的图像和图标。51Testing软件测试网&A];[8i8KdW$I

,OHK+s j@0

H s0GRn9v e1O(q0建议3.1.3.2：避免在图像和图标中出现人的身体部位以及体现性别、肤色的内容

+C,b.p1I9v1\^ d+Hu0说明：人的身体部位在不同的地区有不同的含义，某个身体部位在某些地区会成为一个禁忌。同样，性别和肤色在某些地区也可能成为禁忌。

/kp/^/`.x"U0L[H6y0建议3.1.3.3：避免在图像和图标中包含文本

z^A@vc%k0说明：创建和修改图像和图标需要大量的投入。因此，尽量使用与语言无关的图像和图标。

3.1.4 颜色

(D$c#W{BU7q"w0规则3.1.4.1：使用国际通用的或者中性的颜色51Testing软件测试网+QM |oG

@+L {[\`;U0说明：单独讲颜色，颜色是不能传达任何信息的。但当颜色跟特定的文化背景和场合结合起来后，颜色就具有了表达某种含义的功能。例如，红色在某些国家代表吉祥、喜庆，传达的是一种积极的信息。白色在美国代表纯洁、美好。在韩国，当某人的名字以红色出现的时候，表示该人已经过世了。使用国际通用的或者中性的颜色，避免在特定场合下使用跟本地的禁忌冲突的颜色。

3.1.5 主题样式

规则3.1.5.1：所有的主题样式与HTML代码分离，形成CSS样式表51Testing软件测试网"DYl$Luu

2h.g?k Z2A`lX0说明：通常，不同的语言版本使用不同的主题样式。主题样式写在HTML代码里面，如果要发布多语言版本，维护起来相对困难。将所有的主题样式提取到CSS文件里面统一管理，软件根据当前的区域（locale）读取对应的CSS文件。建议GUI界面使用的字体、颜色、文字方向、界面布局方向等跟区域和语言相关的样式分离到CSS文件中。

%z5El$P,Q0

3.2 人机交互

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

3.2.1 键盘

Qi8G$Lxm*S3z0设计良好的键盘 UI 是软件可访问性的一个重要方面。它使盲人用户或有某种行动障碍的用户能够浏览应用程序并与其功能交互。这类用户可能不能够操作鼠标，并且可能依赖于辅助技术（例如，键盘增强工具、屏幕键盘、屏幕放大器、屏幕阅读器和语音输入工具），所有这些技术都要依靠应用程序的键盘 UI。

1A?4c/Cu$lkWX.?V0许多辅助技术以编程方式使用键盘 UI，即使用户没有使用标准键盘输入设备也是如此。尽管一些辅助技术可能有能够使操作更简单的自定义键盘快捷键，但是在键盘 UI 设计上（针对辅助技术以及用于可访问性的所有方面），一致性和标准化将能够避免用户在操作中产生混淆。[7]51Testing软件测试网,S6M{1K(k3RS-X

'_s+K;LH-Q AR0规则3.2.1.1： web输入控件的自动聚焦和可用键盘切换输入焦点

.lc*F)e@gW0说明：使用JavaScript实现页面加载完成后立即自动聚焦（focus）到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

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

P3s\%q$_7e0r2] N!E0规则3.2.1.3：用户可以方便地与系统进行交互，在鼠标与键盘之间的切换不要太频繁。

-Y7c@3Oel0j2b3T5R051Testing软件测试网\6`"fr0L4j v

J]3p1x2}0建议3.2.1.4：禁止在web界面上做“键屏蔽”设置

说明：禁止“键屏蔽”是为了保证用户最大的操作自由；例如：禁止复制快捷键、禁用shift键等。

4ZSU)V5eP?|Vl0

建议3.2.1.5：建议在密码输入的操作界面中支持软键盘输入的方式

!rpw\?2LC5E0说明：根据网络信息安全的需要，目前web界面中采用软键盘输入密码是一种通用做法。如下图所示：51Testing软件测试网J&n.Q3pz

})pd$VT"f0

图10 web界面的软键盘样例51Testing软件测试网*@?;iwix

规则3.2.1.6：TAB焦点应在用户可进行操作的控件间切换

/x9EP+V&[&C:`051Testing软件测试网qZ+Yy#gQB

+k7U-E/S.TPO(E0规则3.2.1.7：当使用“Tab”键和方向键进行遍历时，“Tab”键的遍历顺序和“下”、“右”方向键的遍历顺序为从左到右、从上到下；“Shift+Tab”键的遍历顺序和“上”、“左”方向键的遍历顺序为从右到左、从下到上。

说明：在国际化应用中，顺序必须符合当地的使用习惯。如以色列或阿拉伯用户，他们习惯“从右向左，从上到下”的顺序；这需要设计过程中考虑提供多种的选择模式。51Testing软件测试网Nn;L$A}0s

E\GF`i2yN7I0

3.2.2 鼠标

:oWU6L)PtT6v0一般来说，系统设计中主要考虑对鼠标左键和右键功能的支持，对于鼠标中键和智能鼠标不作要求。51Testing软件测试网*|Id0~"[

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

51Testing软件测试网8^qvI K2z

建议3.2.2.2：禁止系统改变鼠标默认样式

说明：鼠标默认样式对于用户操作有着重要指示作用，如当前区域支持“文本输入”显示“I”形状、支持“点击”显示手形，当前等待状态显示“漏斗”形状。如果随意更改鼠标形状，将会影响用户操作判断。

建议3.2.2.3：禁止软件自定义鼠标右键菜单

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

@&mF[a%nZ|0

vGVM8o4sJ0建议3.2.2.4：对用户的鼠标定位操作，当移动到可响应的位置上时，给予视觉或者听觉的提示。

说明：如下图所示，采用了改变鼠标所处行背景色的提示方法。

图11 鼠标定位视觉提示示例51Testing软件测试网$C#Uzg,NC

3.2.3 行为

j7y;j L.L/[Cwa0建议3.2.3.1：用户进入常用功能的操作页面的鼠标点击次数不超过三次。

说明：在不丢失系统功能的前提下，在设计中要尽可能的减少用户需要点击鼠标的次数。需要用户选择的参数条件系统需要根据用户的使用需求给出默认的选择项目。51Testing软件测试网 WO7D tJ7Y-r

Bm3P1\J3gD051Testing软件测试网T1~!@h;sp Z

规则3.2.3.2：对于执行时间超过3秒的任务或操作，当前界面必须给出提示；例如采用将鼠标图标显示为忙、显示进度条的方式进行提示。51Testing软件测试网~ {z!j2v

说明：51Testing软件测试网/|tTCH

1、任务执行时间是指用户通过鼠标或键盘发出命令到界面完全显示操作结果的时间。

g\-g.[0yG+jf6P^02、对于图形用户界面中，对于类似人机接口（如MML/CLI接口）的任务交互，此处不进行约束。51Testing软件测试网1g'm-~4@~

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

建议3.2.3.4：对于执行时间超过3秒的任务或操作，建议采用进度条方式进行提示。51Testing软件测试网 a0k;v QAi `

51Testing软件测试网[vR I]"Gv

建议3.2.3.5：尽可能早的在客户端完成输入数据合法性验证

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

j9? dRN0

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

JX'N'M\M0

51Testing软件测试网'jT1O[ @;x[

3.3 国际标准

遵从浏览器的国际标准有利用产品UI在各大主流浏览器的正常呈现，同时也会因表现的一致性而使得前台研发工程师的研发难度降低。

V0GfIn4N'js0规则3.3.1：UI页面必须遵从W3C的transitional文档解析标准，以在保证解析一致的前提下，降低研发难度。即，在Web页面源码的首行加入如下代码：

ar`0M7t051Testing软件测试网wdVF c-H#e

*r X9n7Gz%[Oy0图12 Web页面首行声明解析标准

(SOA+IK1I~4QI/O0说明：不同浏览器在未声明DOCTYPE文档解析标准时，对UI元素的解析标准不同，而相对于strict、frameset标准而言，transitional标准对研发UI的难度就小。例如：strict标准不允许使用元素的某些属性，比如超链接a的属性target、iframe的所有属性均会在strict标准下失效。而frameset标准仅适合framset页面使用。

B hVD+i051Testing软件测试网g9bd"VtI

规则3.3.2：所有Web页面包括对应的JS和CSS文件，存储编码统一采用UTF-8保存。同时须保证所有Web页面头中必须声明文档字符集为UTF-8，示例代码如下：

d*D:k'Xh xYL[0

图13 Web页面中声明文档字符集的片段

说明：UTF-8字符集可以保证产品的特殊字符不会出现乱码；存储编码与字符集都统一为UTF-8，是为了保证页面之间、页面与数据源（数据库、XML、JSON等）之间的数据传输不会出现乱码。

3.4 跨浏览器

3OEr+]:B nO0规则3.4.1：公司所有Web类产品，必须支持IE6.0（及以上版本）及Firefox3.0（及以上版本）等主流浏览器上正常显示及UI交互。

ofQl'V2_;f0说明：IE及Firefox无论在国内还是国际范围，它们的市场占有率之和远远超过了半数，跨浏览器的兼容能力可以帮助产品具有更大的竞争优势（包括但不限于UI重用、跨产品UI融合）。

51Testing软件测试网dZ'`-p?

0J;{2]kS0建议3.4.2：建议在支持IE、Firefox等主流浏览器的同时，同样支持Chrome、Safari、Opera、Maxthon等市场占有率呈逐年上升的浏览器。

3.5 显示适配

规则3.5.1：页面内容的排行采用流式布局方式，以适应不同显示设备（输出设备）的分辨率，减少横向滚动对用户的干扰。51Testing软件测试网M)F6eCg

说明：.所谓流式布局意思是从左到右对该容器里面的控件进行布局，当一行不能容纳时候自动换行。该布局是从左到右（双向显示时，从右向左），然后从上到下。51Testing软件测试网\[9Pz8GS*nG

/V@X&CkCS051Testing软件测试网L&V)B%{lJ9^

@c9O$L2r#Ny z)g0图14 流式布局样例

f j3SMeM0

规则3.5.2：产品整理框架采用弹性布局（网式布局）方式，

说明：。

el Pzb@Kb.FD0

图15 弹性布局样例

51Testing软件测试网\ C&W^Q QD

4 企业VI品牌 4.1 全称与简称

8b/R+r7c0]z0规则4.1.2.1：在系统中统一使用的中文全称为“技术有限公司”；中文简称可以使用“技术”、“公司”或者“”。

说明：简称仅限在帮助文件和技术资料的正文中使用。

规则4.1.2.2：在系统中统一使用的英文全称为“Technologies Co., Ltd.”；英文简称可以使用“ Technologies”或者“H”，禁止使用“ Company”。51Testing软件测试网iL!p%D!A%[(fO

说明：

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

[#?1DGJ)Lu&dL02、简称仅限在帮助文件和技术资料的正文中使用。

4.2 品牌标志

品牌标志由图标和文字构成。品牌标志中文字是为特别设计的。该标志不得作任何修改，包括任何缩放变形和重新绘制。该标志必须置于正确和清晰有序的背景上。当使用有色背景时，请确保标志清晰可辨。51Testing软件测试网1A,G(U"M;S|A

51Testing软件测试网Uh"HDm |H

1p*~4b-_$r5q0图16 Vertical Brand Signature 竖式品牌标志

9xx'C\`5s&E0

图17 Horizontal Brand Signature 横式品牌标志

b8D1d8M.c[0规则4.1.1.1：除了用于16px*16px 和 24px*24px 尺寸显示的情况外，界面中使用的华为品牌标识包括图标和文字部分。51Testing软件测试网 h5W"R`bfk

说明：在16px*16px 和 24px*24px 尺寸情况下，华为品牌标识中文字无法识别，允许只显示图标部分；而且对于16px*16px尺寸，允许使用单色（R255/G0/B0），无需渐变效果。

Oj c*C-w0建议4.1.1.2：系统界面中建议不要使用横式品牌标志

51Testing软件测试网oE*@,zkl.{/s

规则4.1.1.3：品牌标识图片的替代文本为“Ha”

规则4.1.1.4：品牌标志的背景色应选择浅色不杂乱的背景

规则4.1.1.5：品牌标志不得做任何修改，包括任何缩放变形和重新绘制51Testing软件测试网+rr,V-tJ)D

FU[1SK{0

4.3 品牌色

'o1o&KKr)I8Z0品牌专用色对于强化“活力充沛、值得信赖”的品牌形象至关重要。红和华为灰搭配使用，其中以灰为主，搭配少量红，界面呈现灰红的色调，构成了品牌特色的界面风格。51Testing软件测试网S$jF%j:X#GH

红色彩强烈，因此需要在各种应用中谨慎使用，避免削弱文字、图片和其它关键设计元素的表现力，因此红色的面积不得超过界面全部面积的八分之一。51Testing软件测试网R t v:q8g

图18 Vertical Brand Signature 公司品牌色

OZny&O c,J0

F&P Dij)t(a@M^0规则4.2.1：界面主色调采用公司灰，搭配少量的公司红、公司黑。51Testing软件测试网.]N8V W*fE

$|:ah wA,T H4u0说明：为了界面有深浅变化和区域、块状的视觉感，可以采用多个公司灰色构建界面。可以采用纯灰色块，或者灰色渐变。

F0K4ag |3y7[0

3b.K.Wyh*l0

图19 Vertical Brand Signature 公司品牌色应用51Testing软件测试网gU&@9n%f

K3yGq ~(i+m4g"U051Testing软件测试网z}P-@r

4.4 形象图片

形象图片是构成华为品牌的关键元素。图片风格直接影响公司被感知的形象，并使华为公司有别于竞争对手。

界面中，图片的运用主要是对某个重要信息进行图解、突出、视觉渲染，图片通常出现在登录页面、首页顶部(banner)、导航入口、关于页面等，页面的图片对系统的认知、视觉识别性、品牌形象至关重要

nq'u5N_p0

th]}I~#c @0图20 形象图片的应用

规则4.3.1：在选择图片时，请选择那些包含品牌颜色的图片。

uV1l"dgo0说明：颜色无需完全一致或非常突出，局部细节色彩的一致都有助于形成一致的感觉，从而强化的视觉风格。

.~dC{^+S t051Testing软件测试网AhnZ"d3H)K

图21 包含华为品牌色的图片

I:\._CC!kgw0

规则4.3.2：当选择有人物的图片时，请确保图片的信息清晰明确。必须反映品牌的核心价值和个性。51Testing软件测试网J)pa:Y3]}O

Z P/B&Sqs0

w&X `x;e#fQ$H0规则4.3.3：当选择借喻式的图片时，请确保它们反映品牌的核心价值和个性。

说明：借喻式的图片以间接的方式传达信息。这类图片使品牌超越语言的局限，而更加富有深意。

T1NZ;P3LVs ]0

EC&T~)j0建议4.3.4：避免使用那些陈腐过时或平庸乏味的图片、避免使用姿势造作、内容不适合华为品牌的图片。51Testing软件测试网0_K-ePO({4AJ

,udK0Y&l9zi0说明：不恰当的图片会削弱品牌的视觉表现力，并破坏视觉传播的统一。

$G6o"]&v2}3Z1u3n ?0

图22 禁止使用陈腐平庸、不适合品牌的图片

4.5 品牌字体

使用统一的公司专用字体，可以强化品牌表现力。公司指定专用字体在英文版中是FrutigerNext系列字体，在中文版中是黑体系列字体。FrutigerNext系列字体外形现代，与品牌标志相匹配，并且在多种字号大小时都具有较强的可读性。黑体系列字体不仅适合阅读，而且与FrutigerNext系列字体十分匹配

w9l%lGi!H)^J0

图23 品牌字体

规则4.5.1：界面中的系统名称、标题等关键文字信息，在英文版中采用FrutigerNext系列字体，在中文版中采用黑体系列字体

说明：FrutigerNext和黑体只限于界面中的重要文字，比如：登录界面、主页顶部、关于页面、帮助页面的出现的系统(或版本)名称。但页面中的正文内容不在此范围51Testing软件测试网 p~c%Pm^

51Testing软件测试网tpN~1[:}*Uu

图24 重要文字的字体采用FrutigerNext

4.6 地址和网址

规则4.1.3.1：在系统中使用的中文地址统一为：总部办公楼

.y[L8})yr%t$V:k0

规则4.1.3.2：在系统中使用的英文地址统一为：Administration Building, Huawei Technologies Co., Ltd., Bantian, Longgang District, Shenzhen, 518129, P.R. China

51Testing软件测试网HT Q)I'{[KK

规则4.1.3.3：在系统中使用的公司网址统一为：http://www.huawei.com51Testing软件测试网)?+t6iV5Ue'[/K

#v7j5[&_9Jq'd^0规则4.1.3.4：在系统中使用的公司技术支持网址统一为：http://support.huawei.com51Testing软件测试网 {.IL|4[DL

?(V|F9cO+zu\s0

说明：1998-2010是指年份，是需要根据系统具体的年份动态刷新的。前面的1998指的是第一个版本诞生的年份，后一个2010是指该系统当前的年份。

51Testing软件测试网*Pj8XU$VS

+\8U)C.{ E+bMvd051Testing软件测试网0\b{/flB

!p~yy5VjO0

5 基本元素 5.1 表格Table

规则4.1.1：除下列情况外，禁止使用表格作为布局元素。

说明：因表格的结构化特性使得展现能力不够录活，W3C标准对表格的定位是为了显示查询结果数据，而非布局。51Testing软件测试网mrXpcdV7_

图25 查询结果表格示例

规则4.1.2：表格中列的竖线有无对文本的影响，见下图。

说明：没有竖线的情况下，若表格内的文本不采用左对齐，会使得用户阅读时焦点出现跳跃，不方便定位。51Testing软件测试网Io+g t e

51Testing软件测试网)j-NV$s:l;n

图26 无竖线表格示例

51Testing软件测试网&I$^)@;EQ:i!vG

2`_ Y^$[ m6f,WL6d0图27 竖线表格示例

51Testing软件测试网l:K9tP7MT

建议4.1.3：单元格内文本不允许贴边；单元格内的多行文本垂直上对齐；水平方向一般采用左对齐，但数值型文本可采用右对齐以方便比较大小。

4k%Qf3o&t9Wn L.`R0说明：文本贴边会使得部分字符识别困难（如：“1”和“l”）。

51Testing软件测试网+P?B {A_c

图28 单元格中文本示例

(~1Q6JJ%?9A0

2?(Y0z,`.O/kJ x051Testing软件测试网3W5yp({4r3uA

建议4.1.4：表格的操作工具区位置应置与其顶部，以保证操作入口可见性；页码及翻页信息置于表格底部。

51Testing软件测试网TB3x v'G/X

图29 单元格中文本示例

kBCI9jhk0

5.2 列表list

建议4.2.1：适用于榜单类小列表或排名的界面设计。

PQD1V/Q4ey6[0说明：列表体现的是数据轻量，格式简单，有一定排序。51Testing软件测试网] sM3a&w?m`

cgQ c0F0

d:B/V(gNKc"Z$P0图30 列表示例51Testing软件测试网8l4_OeM)k

5.3 标签页Tab

)YN D1Q2n+}"]:I0规则4.3.1：标签页首，若文本被截断，则须给出鼠标移上的Tip提示，以帮助用户阅读。

51Testing软件测试网(x:CJ9i m6M)p)k

+^5v.I2L@;h,|0

.n:E#Q^kn0w0图31 标签页Tab 内容布局示例

图32 标签页Tab 窗口布局示例

5} gogUZy[0

{;io_9Z8T}@8M0规则4.3.2：切换Tab页后再返回原Tab页面，不会引起该Tab页的全部刷新（如：展示查询结果的页面，或表单填写页面就不可刷新，以免丢失数据）。51Testing软件测试网%uv`#h9[5zGk

fUx#u)h|s8?h0

建议4.3.2：Tab页若可以关闭，且有右键菜单，则菜单中至少包括“关闭”、“关闭其他页”及“关闭所有”三项。

._'O5j+K:I*FdHc0建议4.3.2：Tab页签打开过多时，出现扩展菜单按钮。点击该按钮，可显示被隐藏部分的Tab页签构成的菜单。51Testing软件测试网9A?J:j(p#}

5.4 树Tree

规则4.3.1：如果树节点数量较大，必须采用分层加载技术，保证用户阅读效率。

l(B0T*a BF0说明：节点量较大时，若采用一次性加载节点，会使得用户较长时间处理等待状态，用户感知很差。

H%W:L6N+?8@Kg0

图33 树Tree 示例

规则4.3.2：对于带有复选框的树，能够体现出三种状态：全选中、部分选中、未选中。

规则4.3.3：对树新增节点操作后，新增的节点需要立即显示在树上，即树立即展开并定位到新增的节点。51Testing软件测试网5Oeh-rhk1D

%^#u"l%dP/Y:WGO}P0建议4.3.4：树节点上的图标尺寸建议值为16px*16px。图标种类不宜过多，否则不易用户识别理解。51Testing软件测试网4n*XL\ |/rS*?

51Testing软件测试网 QhcMWrU

$`Uk B;|UN0

5.5 提示Tip

规则4.3.1：提示Tip的宽度可以自适应其文本内容，并保证其在浏览器可视区域内正常显示。

说明：关键字、术语、未显示全的段落文本，应配备对应的提示Tip，以帮助用户了解详细信息。51Testing软件测试网Qn6~dY)U u Cb

{$B&{7| sm051Testing软件测试网]*]}.H4a)@ B&b

a$OZ K)Q#u_!?k0图34 Vertical Brand Signature 竖式品牌标志

2O"j!~k'[G(xzL0

e3@ bY,NJ!Li0建议4.3.2：Tip的宽高尺寸可以选择120*30、120*90、180*135、200*150作为参考值。51Testing软件测试网V3P0H-mG\)S

lCJ&H%z%?AMP0

5.6 表单控件Form.

规则4.3.1：文本输入的提示标签（域标签），以英文半角冒号“:”结尾，水平左对齐。文本标签不能贴边。

j\YyW/Cs0说明：冒号用于表示提示标签与输入控制之间的关系。标签文本水平左对齐可以帮助用户快速定位到每一行。文本标签不贴边以保证所有字符能够被用户正常识别。

51Testing软件测试网\ K!`^u

E^4rc g0k&\!UB0图35 表单单列布局示例51Testing软件测试网ZJ/_N k!q

&v/JM!WRa.]:vg0

图36 表单按钮布局示例

"Go7J8Y-O0

规则4.3.1：表单的第一个输入项（如：文本输入框）为默认输入焦点。见上图。51Testing软件测试网$LSe/_'@F

说明：当同一页面中有多个表单时，则第一个表单的第一个输入项为默认输入焦点。

*b'd+Lcv0

p4L.[n*yh&Xw0规则4.3.1：表单中，必填项必须以符号“*”来明确标识出，该符号位置放置在输入框的后方。字符颜色为#990000。

z5Wm uj"w(KbC0说明：必填项的标识，须满足全球化的双向显示要求。

51Testing软件测试网 jb5Q'L|"EC }

图37 表单必填项标识符示例

h Lzx7OK9b7M0

规则4.3.1：输入查询内容或关键字后，可以使用Enter键激活查询操作，效果和点击“查询”按钮一致。

说明：输入关键字后回车已成为一种习惯性用户行为，这种快捷操作有利用提升用户查询效率。

6csqY"v0rR#g0

建议4.3.2：单选框（radio）和复选框（checkbox）控件，应该与其对应的文本标签（Label）相关联，即：点击其文本标签与点击控件有相同的效果（均可选中或取消选中）。51Testing软件测试网(hB,l|t(T

说明：单选框与复选框因控制本身的尺寸较小，根据Fitts定律，会使得鼠标定位时间较长，通过将标签关联的方式，可将其感应区变大，提升用户操作效率。51Testing软件测试网rzz8o5zM

+VfT6jOvh"z|0图38 表单 radio或checkbox的文本标签示例

??}G [O'ZF0

z&QH*Xn$u.|-Npz RU0规则4.3.1：多行文本输入框、多行下拉列表应与其标签域垂直上对齐。

S+t%NmZ9p%f6[H0图39 表单标签域与输入框垂直上对齐示例51Testing软件测试网ky/o^-k.g

规则4.3.1：数据度量衡的位置，。

1E&\~G V%m0

[6d2r9X}F(y3ENH0S0

图40 表单数据的度量衡示例

51Testing软件测试网6P"f/d"L3q

5.7 窗口Window

规则4.3.1：展示少量的输入操作。

N1hV s"^ e G&z0说明：对于展示较多的输入操作或文本信息，不适用于这种窗口方式呈现。因为这种方式使用可视区相对较小，展现信息有限，容易出现滚动条，不利用用户操作或阅读。

5r)viplPp"g5[.J|d0图41 窗口Window 示例

2s#g[%A#[s6^YD0建议4.3.2：窗口宽度可以自适应内容，避免出现不必要的滚动条，影响阅读。

5.8 消息Message

*pz"Z D0Q5g0规则4.3.1：少量信息的反馈。当展示给用户消息（Message）时，高亮显示该消息，并为用户设置默认的操作焦点。51Testing软件测试网/ON)xs,pD"?

说明：消息Message可分为确认（confirm）、提示（prompt）。确认是为了让用户再次确定该操作是否继续进行，提示是给用户的反馈信息或提醒。默认操作焦点是为了提升用户的操作效率，同时保证消息框的操作不仅可以由鼠标完成，也同样可以由键盘来完成。

5CV\+q,^*spa051Testing软件测试网%`+|S0H(E t@

图42 消息Message示例

)L1|:p&oQgi0

$a0ga i%O(S&VY(A0规则4.3.2：消息窗口内的按钮水平居中显示。51Testing软件测试网@,d&O `.x

%z L)JJ|"vZ!_0

5.9 版式Format

T u PZ|2N,L0规则4.3.1：版式的设计应满足自适应布局要求。

c ?U@+rF8@&oMf0说明：。

f2_*\$B)X&S(?'G0

D2TxVmC$U6w0图43 运营产品版式示例51Testing软件测试网xyjI QhJ}

4J.`bt9GEy EE0

Wy~/nz0图44 Portal 版式示例

5.10 面包屑crumbs

规则4.3.1：每个层次之间以“>”分隔，并可以通过点击，随时返回至上一级。

cs3JQ0yc G$d0

!txsV$m#O0图45 面包屑 crumbs示例

规则4.3.2：面包屑上的超链接，至少能体现出鼠标移上和正常两种状态。

WrXC;n;u5V:d0

6 系统框架

采用B/S架构的产品或系统的界面一般来说主要由以下几种典型界面：登录界面、加载界面、主界面；同时在系统运行过程中，Help界面、About界面、错误处理界面是主界面的必要部分。51Testing软件测试网^E}q3z6O!ta

pvhmE1O0同时系统对多语言切换和换肤功能的支持也是目前web产品的常用功能。51Testing软件测试网k"J!F QLNek

6.1 登录界面 6.1.1 属性

规则5.1.1.1：登录界面各区域布局由上至下依次为：识别区、输入输出区、消息区；各区域大小范围定义参考主界面各区域大小范围。

#h`'DW n0说明：登录界面布局如下图所示：

识别区

HrF`"cIL4Z:L.sI1tV0

输入输出区

51Testing软件测试网'p7d~4P;@T(V

消息区

&Ish6_O+mVX051Testing软件测试网.I$s1Q%E?"YFV

图46 登录界面布局示意图51Testing软件测试网zDW4gsl |$N

~j&u+dp5\"L.fx;u$f*W/k0

图47 登录界面示意图

51Testing软件测试网W0J7Q,P B9|0KB

oGD#nZ7r$c&U$U0规则5.1.1.3：除支持自动适配语言版本的系统外，支持多语言版本的系统的登录界面必须提供语言选择入口。

7}}$_'Th.y0说明：如果客户端实现切换语言版本必须首先服务器完成语言版本的情况，实质上是单语言版本，不属于多语言版本。

6.2 主界面 6.2.1 总体布局

z0^[$E,Y*g0web产品由于功能、业务、实现方式上的千差万别，决定了在界面布局和分区上必须灵活，以满足产品不同的需求。51Testing软件测试网H.})o\LI

JW2\+Y1]5cs;y;A0依据产品实际需要，可以在一定的原则上，对主界面进一步扩展布局和切分区域，或者裁减某些区域。

,?t+K.fA7XE051Testing软件测试网MEX0RM[)W

\/f&zyc0规则5.2.1.1：主界面中必须包括识别区和消息区

rZ8n7R"oTZ0

Nv!a;VLO.L3f'~0建议5.2.1.2：主界面禁止屏蔽地址栏

r5`1iJ R8S:f0

建议5.2.1.3：为保证界面整体布局一致，主界面采用左（导航区）右（输入输出区）、上（识别区）下（消息区）结构。

'WJg&txq0说明：参考下图：

图48 主界面布局和大小示意图

w&IhfEaY%d01：识别区（Identification area） 2：导航区（Navigation area） 3：输入/输出区（Input/output area） 4：消息区（Message area）

iIcm[Lv9l9f051Testing软件测试网#\ i Rgk8N

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

8~a/~tIa#fW-G'x"V0表1 主界面各区域大小范围

主界面区域

51Testing软件测试网i1K;s8\4cV

长

8Ndm!c)n&i'i$m%D^051Testing软件测试网W(~9I.x R4E0q

高

"aR5rPD ?0

识别区

s+b$oDj Et(K0100%

s2Gf]DE060px – 90px

+c2|]_M!V0Dg2I0导航区51Testing软件测试网VDIa;k K

160px – 200px

Y3iBxj:lhv0100%

jg ZV0f5C0输入输出区

100%51Testing软件测试网z-K1t2f C

100%51Testing软件测试网W#Z(?}Z

K2ED?+qeIR0消息区51Testing软件测试网(c#nV6@x,I

100%

d8oct+`}.VOk035px

\IR~#QeG7k0

说明：如图50说明。51Testing软件测试网a^-hTA

5^n'~ JUb_0

tz}k;|Un0规则5.2.1.5：除Help界面外，弹出式窗口只显示输入输出区，不允许切分出其它区域。

8Pazzd o0说明：包括About界面；如下图所示：

输入输出区

5T%u]WR0

,Q%c)LG4co0图49 弹出式窗口布局示意图51Testing软件测试网B/?I!c b1s0DF

hC%?1wZ0规则5.2.1.6：根据实际需要，可以在识别区下面切分出一个独立的状态信息区。

R#s#ke1RX^k!ee0说明：状态信息区主要是用来放置登录用户、登录时间、日期、版本号、切换用户、退出等信息。如下图中的灰色区域：51Testing软件测试网_Yw:DRv

识别区

51Testing软件测试网(m.P0s&XWpy

状态信息区

;@v)KH+N0

导航区

输入输出区

51Testing软件测试网Z,`^ AXn

消息区

9~1DH#Pot0图50 web主界面切分出状态信息区示意图

KZ [3`"M\o0

建议5.2.1.7：当界面的输入输出区中采取上中下结构时，建议选择条件部分置上；输出结果（如表格）置中；结果的操作按钮置最下方。51Testing软件测试网!_zO+O'LXG9w

-d(rmdTV0

6.2.2 色彩搭配

建议5.2.2.1：主界面各区域颜色由深至浅依次为：识别区、消息区、导航区、输入输出区

说明：如下图所示：

识别区

)h|f ^@ Z.H]051Testing软件测试网2_V~6c \,ly

导航区

输入输出区

5B!fE9ri(uP@P051Testing软件测试网]1erQ#X

消息区

51Testing软件测试网J~{8B9_7B

Q1x}t3K;MM0图51 主界面各区域颜色配色示意图

6.3 Help界面

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

Z;{MW6}a9h6ds'R$T0

规则5.3.3.1：所有B/S架构的产品必须提供Help51Testing软件测试网~r.uVcY`K

6.4 错误处理界面 6.4.1 属性

h\P?FN$^0U$D0规则5.4.1.1：错误提示界面采用模式窗口

说明：这样用户必须关闭窗口后才能继续操作。

51Testing软件测试网T$g)p6DM5ORx

图52 告警类的提示信息窗口样例

51Testing软件测试网3k.LF [7ee$j

规则5.4.1.2：对于客户端输入数据的有效性验证，出错提示应该由客户端直接弹出对话框提示。

说明：如下图所示：

图53 客户端错误处理对话框样例

9t4Rm&BT&LU051Testing软件测试网.qP5Zk^v(Fw

6.5 About界面 6.5.1 属性

规则5.5.1.2：About界面如果需要显示其他必要的信息，需要以TAB页的方式增加。51Testing软件测试网 zux[jXIW

说明：如系统的详细子版本号、LICENSE等其它信息。

6.6 多语言功能 6.6.1 属性

3e/n8gDfSKL,l0规则5.6.1.1：当系统支持多语言版本切换功能时，语言切换功能入口清晰，操作便利；禁止通过关闭浏览器实现语言切换。

51Testing软件测试网&yCf*xu+m`

E ?_,s){ F"O oi0规则5.6.1.2：当系统支持多语言版本切换功能时，除多语言切换入口外，界面上禁止多种语言混杂一起的情况。

a2K;[U5{:~my:v:o y E0说明：在非英文版本（如中文或其它）界面中允许出现一些专用英文术语和词汇。51Testing软件测试网4Y8[ M^+mJl

51Testing软件测试网9R9LEu5n,C

规则5.6.1.3：当系统支持多语言版本切换功能时，系统默认采取与浏览器当前的语言版本一致。

4m ~J _"FC t0说明: 当浏览器当前是英文版本时，其打开的应用系统界面默认采用英文版本。

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

(^ ?n%nil?0

6.6.2 行为

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

6.7 换肤功能

%mM$II~#O0通过系统提供的换肤功能，用户根据自己的喜好选择系统界面的样式和风格，这是目前界面设计领域惯用做法。51Testing软件测试网`}Ri4b"Q

6.7.1 属性

UM;ZM7h^4~2S9C0规则5.7.1.1：当系统支持换肤功能时，换肤功能入口清晰，操作便利。51Testing软件测试网I?Ihg#TP

5Fc_)x)v0

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

51Testing软件测试网Dc2X!p!y"Y

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

51Testing软件测试网]cXI t

Y8no1IY7gIj0建议5.7.1.4：企业用户版提供至少三套皮肤界面，个人用户版提供至少五套皮肤界面。

说明:三套皮肤界面可以包括默认风格、暖色调和冷色调界面风格。

51Testing软件测试网Lfq `8Sl

6.7.2 行为

Mu;]'](f#z Yn]:O0规则5.7.2.1：当系统支持换肤功能时，新皮肤刷新出来的时长不超过5秒。

&[B&w ^lL |5d0建议5.7.2.2：当系统支持换肤功能时，系统皮肤切换后不影响当前操作，不更改当前操作位置。

(I:?+Ja tVg k0

#C \an'a5xU0

收藏举报

TAG:

引用删除 hequhecong / 2014-07-10 13:31:05: 收藏

查看全部评论

丰卉者

用户菜单

我的栏目

标题搜索

日历

数据统计

访问量: 110190
日志数: 89
图片数: 1
文件数: 15
建立时间: 2013-03-01
更新时间: 2018-08-23

B/S界面规范

用户菜单

我的栏目

标题搜索

日历

我的存档

数据统计

RSS订阅