B/S界面规范
上一篇 / 下一篇 2014-06-04 09:34:33 / 个人分类:总结
#G&Ms2g;AN0
h;JD3So051Testing软件测试网v1H)[T+TWo-L
51Testing软件测试网Fk#_s xKc7ou,Yx表1 风格配色说明表... 3651Testing软件测试网\t%D$y$v"T`7n!G`
SFr7I)Ug.uz m){0表2 网管/LMT系统告警配色建议... 3751Testing软件测试网LW/g(p.m)n
51Testing软件测试网i*h$N!Y~表3 YD/T 1289.2-2003行业标准定义的传送网告警级别与颜色对应表... 3851Testing软件测试网.Y6xG0N8VBB5r
H|_]Y"y hE4y0表4 表格单元格对齐方式... 39
(JK&KOR gWKF051Testing软件测试网Kw,C*l'S"Yw*m表5 表格排序的图标定义... 40
i3L[-ks6a eY0,nv;Xdv-kV3P0表6 主界面各区域大小范围... 56
uhsL6f1}6z0图目录 List of FiguresO+a$l,e$B^!jl)S@051Testing软件测试网3{f s P"{
6bKBU]|0图1 web有效页面定义示意图... 1251Testing软件测试网3_!i%A.E{a&A3Bx
nyv }!z3a0图2 面包屑视图示意图... 13
!wp/zx`] jv051Testing软件测试网6i:L4vg,[PB3Si"Z图3 结构原理示意图... 1851Testing软件测试网'i${ q.Ol3Z2xF
51Testing软件测试网 u"rdU e9F图4 简单性原理示意图... 19
3k(D KJyng0IE%DT7Vw"~0图5 可见性原理示意图... 1951Testing软件测试网"d7d@Y:E!RN#{
9_$U$KDVc0图6 反馈原理示意图... 2051Testing软件测试网 mr P1C!GzJ$N&MJ u
51Testing软件测试网c2s+U D(lv;gTO图7 宽容原理示意图... 21
l^ S5{jF0&G2n%Y Y&hxz*^2B0图8 重用性原理示意图... 21
j9a9RAFJ051Testing软件测试网,l }A+r$L_I图9 控件、文字信息组合成块状... 2251Testing软件测试网 |3l3t g:Gx4?a
51Testing软件测试网U/lS#l6@图10 web界面的软键盘样例... 24
N9D"s{s051Testing软件测试网C l'MH&sV/b3Qv图11 鼠标定位视觉提示示例... 25
*rY l~f051Testing软件测试网a+h7H"K3BkXo4|图12 图片替代文本示意图... 27
W|*g#Z(BQ051Testing软件测试网%V'a D!Z(^t~V图13 Vertical Brand Signature 竖式品牌标志... 28
cW"?D$M:eL!P051Testing软件测试网Y9g.bScrn图14 Horizontal Brand Signature 横式品牌标志... 2851Testing软件测试网j(Tv3G$KVE
51Testing软件测试网)tL)T^)[+Z%b/KQJ+L.e图15 文本与图片共排对齐示意图... 31
7l-Zk:x_0trL2n%duH0图16 列表文本示意图... 31
| zM@l&q%o01Z^ N3x Ul"@6ae0图17 表格单元格文本换行示例... 3251Testing软件测试网-cEa qL#PHrf
51Testing软件测试网zgtd+fsS9s图18 公司VI规范的标准色示意图... 33
)`|WPK.oaLm+T0B\'Q%c*e0图19 公司VI规范的辅助色示意图... 34
ED(~'~Or0mI6qJ.PB_0图20 文本颜色和背景颜色明度对比明显... 34
#I!i'FD Q/w0#b&u5i1z Eo4aA0图21 图形对象颜色和背景颜色明度对比明显... 35
%EC&l/j0\4R051Testing软件测试网2tb0|c#`[图22 文本颜色和背景颜色明度对比不明显... 35
Z\:c)C!|M-K051Testing软件测试网"?8x#YMBA图23 风格界面效果示意图... 36
R@7u+JFC-KF^!h0-Js+?Yj0图24 链接点击效果示例... 3751Testing软件测试网&FC:}9B8V-JE
51Testing软件测试网A8aT^ z~l图25 表格单元格样例... 38
N$O(nX1j/d051Testing软件测试网7c$l)B[ i图26 表格样例... 39
K8oZ%]O'P i6HJeE051Testing软件测试网W8Ke%h,o]图27 单元格文本对齐效果... 4051Testing软件测试网0](r&F5Q%TNO
51Testing软件测试网R!d9J'STMd}r图28 表格示意图... 4151Testing软件测试网}@@@8n-aqY
;C[0~"^d8KM'T5z0图29 多种文本输入框示意图... 4251Testing软件测试网dc+Nl+Ab(L
L%h2g"q#d0图30 文本输入框宽度定义方法... 43
'|\pbG\Ov g,U051Testing软件测试网9q HZ)s9tw图31 左右排列的文本输入框... 43
F5|RyW0{"M-q&r8F6am5h0图32 上下排列的文本输入框... 43
Daw'J[Zb0E9c-j051Testing软件测试网'GK!i9a#am图33 单选按钮示意图... 4451Testing软件测试网IU | {(_
51Testing软件测试网9SO}JZC图34 复选框示意图... 4451Testing软件测试网r|5Z$Z/G]U4I(r
51Testing软件测试网 |IC%U"@iP%q图35 复选框的错误样式... 45
E ~6W~7d+O-q051Testing软件测试网.K)p8hN+q"d-T图36 复选框的变灰效果... 45
g$G*_&R0?{? s0n;\D@)U;N O8Y{8NBE0图37 下拉列表示意图... 4551Testing软件测试网"D3}0BL4aet
51Testing软件测试网!}y%\ s4H#Q.bo图38 组合查询中使用下拉列表的样例... 45
g-?W[hu:KG0i {H:m*v:Gvc0图39 下拉列表的变灰效果... 4651Testing软件测试网J)_/h#b2U*Z!{0O
51Testing软件测试网%Pk)y$@CV Vwk#W$m图40 列表框示意图... 4651Testing软件测试网N4F7lGG7\"kI6EG
51Testing软件测试网#E:V+En,N图41 按钮样例... 4751Testing软件测试网"@+F_;`\M
kVx.x/j2PO$H _0图42 日历、时间控件组样例... 48
~_k0L \8S051Testing软件测试网3G-H(o6[ m_R图43 文件上传控件样例... 4851Testing软件测试网:WYp$so d mjS|&{
51Testing软件测试网nU.P0\$b y图44 选项卡样例... 4951Testing软件测试网^e]fdR
ZrV5K!z9~(O+j2i} ^0图45 树形菜单... 49
~ Z-Z%j,`z0`\%^|IFj0图46 典型浏览器窗口... 5051Testing软件测试网 U%bYD.j
{D&Uk2oU%{0图47 窗口标题示意图... 50
E}l$@:k f0DY-np*wpeX0图48 登录界面布局示意图... 54
T0F$@ Y&~A}0\#s6b0-hm)}-iC1@B0图49 登录界面示意图... 5451Testing软件测试网V1`+e/S"N/u;@tp
51Testing软件测试网oD1w%dp4_6v图50 主界面布局和大小示意图... 5651Testing软件测试网P&C&l&X-k0?#Y
51Testing软件测试网 g!e;@m$GANvO;[1M图51 弹出式窗口布局示意图... 56
+mp5zEGa o0DvX ]tb0图52 web主界面切分出状态信息区示意图... 57
5G'Kj0beh_:dF0P c![Kf{]7k0图53 主界面各区域颜色配色示意图... 5751Testing软件测试网2}G(u1y4?L{+^
7pC#IX(p%@g7s0图54 告警类的提示信息窗口样例... 5851Testing软件测试网xR,ns!n[kD!M"B
51Testing软件测试网uXe J?Jq/x[h图55 客户端错误处理对话框样例... 5851Testing软件测试网B'SE3kq5U&H
$lh\3`#mN051Testing软件测试网}pE5Q"zo
51Testing软件测试网AqYFT51Testing软件测试网 ]t+SES9E5y[
B/S界面规范 V3.051Testing软件测试网%Zu_b8s1m
ON-PN/Sj0范 围Scope:51Testing软件测试网2y!e~|` H|F/r
L:oE~Z3fjn0本规范适用于公司采用B/S架构的O&M类产品。51Testing软件测试网PQ x)wsf^]
51Testing软件测试网d U.d!X\V/V本规范适用于800×600分辨率与1024×768分辨率及更高,支持FireFox 1.06、Netscape 6.0与IE 5.0浏览器以及更高的版本。51Testing软件测试网d8K9U.Vfqg|F2}
51Testing软件测试网0Zm-Rv2V6G本规范示例的界面分辨率为1024×768,并已经在IE 5.0浏览器上测试通过。
*U#F I/Q+{ D FpSW051Testing软件测试网K2F]w~如果本规范与行业标准存在冲突,则行业标准优先于本规范,但对于行业标准不涉及的部分,则公司各产品领域必须严格遵守本规范。51Testing软件测试网Hkf$lr!~
%}I[8bZ)K{6sd051Testing软件测试网]9Fn },w.~
51Testing软件测试网/C r Ctg)i2e.]yqK;N)C*`X#Dr7v;i051Testing软件测试网x~j~3^${&}_简 介Brief introduction:
E,y*r2@5XS i.~q L0)jpwc,KKPp nQde0本规范描述了B/S架构下的web界面所必须遵守的规则,以及一些优先使用的建议,统一了web产品界面视觉风格和交互操作规则,从而保证web图形界面具有较强的一致性、良好的可用性以及良好的界面视觉识别体系。51Testing软件测试网"{;D aG M
51Testing软件测试网;T9?Fr8W/e e1~CM'd8V N3dC.zPB(u#B.wY051Testing软件测试网.\"Ij?z6w P关键词Key words: