BS系统界面设计标准规范

B/S系统界面设计规范1.引言

界面美观、操作易用性、维护成本低是评价B/S系统关键。本规范参考了部分成熟产

品科学开发方法，将开发过程中方法、规则等强行约束。期望藉此来提升用户操作感

受，提升B/S产品质量。

1.1.编写目标

广义界面概念包含了除页面布局设计之外，交互性设计，及人体工程学方面研究。

本规范制订依据从广义概念出发，总结以往项目标成败经验，目标是从整体上提升企业

B/S类产品质量、开发效率。从以技术为中心发展为以用户为中心，将类似项目成功经

验继承和积累下来，将B/S系统和C/S系统开发过程上区分降低到仅显示控制极小层

面。

新开发方法强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这么就

把页面和控制代码两个层面清楚分开。

1.2.背景

B/S模式系统以其易布署、易扩展、能够高度集成多种技术特点，在企业产品线中占

越来越大比重，.Net、J2ee等技术发展更是将B/S系统开发和桌面应用程序开发工

程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员能够

应用愈加科学方法合作，团体合作方法甚至决定了一个系统开发成败。

现在企业较多服务器端编程人员仍然处于“后ASP时代”开发方法，表现为前台

页面仍然和服务器代码高度关联，带来后果是反复建设、高昂维护成本或失去控制

项目，没有充足发挥出集成开发工具优势。

在以往开发方法下界面设计侧重在静态页面建设上，每个页面作为一个独立模

块来处理，在页面交互中则是程序员依据自己习惯来控制，程序对个人编程风格依靠

很强，这些在以往开发WEB站点方法扩展到B/S系统有时是不正确，甚至是背道而弛

，当然也不利于规模化团体合作。

1.3.定义

术语定义：

效果图：由界面设计人员设计页面效果图，综合了概要设计业务需要和整个站点

风格，它要求了页面布局上每个细节。

容器：即HTML标识嵌套结构，如在表格->行->单元格内放置图片，那么能够认为

单元格是放置图片容器。

样式表：即级联式样式表CSS，它是W3C机构在HTML标识语言上扩展格式语言。

非标准交互控件：是经过标准控件组合、扩展等方法以提升特定业务实施效率而进行封

装控件，或概括为用户依据以往操作经验不能够直接领会出操作方法交互控件。

2.界面设计规范细则

总体目标

以规范作为基础标准，在此框架内进行合理扩展和改变，将站点内每个模块服从于整个

站点，模块页面和“高内聚”控制代码紧密结合在一起，同时对应于应用程序基于系统

架构分析。

2.1.通用标准

1界面色彩要求：计算机屏幕发光成像和一般视觉成像有很大不一样，应该注意这种差

别作出合适色彩搭配。对于需用户长时间使用系统，应该使用户在较长时间使用后

不至于过于感到视觉疲惫为宜。比如轻松淡彩为主配色，灰色系为主配色等等。切忌

色彩过多，花哨艳丽，严重妨碍用户视觉交互。

2界面平面版式要求：系统样式排版整齐划一，尽可能划分不一样功效区域于固定位置，

固定格式，方便用户导航使用；排版不宜过于密集，保留一定“留白”区域，减轻

查看时视觉疲惫。

3数据显示集中标准：多种列表在页面中往往是传输信息关键，尽可能集中表现出来，

并提供必需关联数据、表等合适组织起来，而且在视觉上使用户很轻易觉察数据之

间关系，并方便查看、编辑等；冗长拖沓数据组织形式可能给用户带来很低维

护效率。

4主次分明标准：页面中同时分布较多栏目标情况下，根据页面（Flow）伸展方向，

即由上到下，有左到右，依据浏览方向，关键内容应该在左边最易注意位置，导

航等置于页面头部固定位置。使导航等关键内容一直处于用户视野（Sight）之中.

页面右边通常是部分目前页面关键操作扩展、选项等内容。

5改变（对比）标准：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅

读部分，只在文本字体、色彩上增加格式改变，如加粗、下划线、行前导符、链接

文本不一样状态定义（link\hover\visited）等，就能够将冗长文档、表格等组织很

有条理；冗长内容“层次“就有了改变，更轻易辩识(Readable)；在美学角度增加了

相临部分间对比。

6页面留白：页面留白同时也是一个增加可读性（Readable）方法。在文字区域预防用

户读完一行无法定位下一行位置麻烦，在整体布局上，它能够减轻用户视觉疲惫。

7即时响应标准：每一个交互动作应该能够立即看到操作结果，而且用色彩、文字粗细、

闪烁、弹出、页面布局显著改变等突出方法通知用户。

8鼠标最短距离移动标准：交互按钮控件等依据实施前后关系及表单中状态控制等合

理组织起来。

2.2.显示（版式）设计

1．页面布局基于表格Table建立完全符合设计效果图。

2．文字轻易阅读。行间距、字体大小等经过样式表统一控制。

3．页面链接依据不一样功效、不一样状态用不一样颜色、状态标志，增加页面层次。

4．基于表格Talbe布局（Layerout）控制，便于控制实现不一样分辨率下适应，和页面

上下方向自动扩展；表格作为控件“容器”规范外观和规格，不一样页面中行列分布

基础一致。

5．使用样式表修饰页面表格Table,如表格单元格、背景，表格内字体等，方便以后对于整

个站点维护和扩展。

6．页面分组页面查询区域、数据列表、具体信息、编辑区域等依据不一样功效分组，所在区

域专题（Title）标注该区域名称，类似功效页面间布局保持一致。

7．建立数据表格关系包含数据表格使用户在视觉上了解相互间关系，如序列、父子表等。

8．页面留白页面有显著留白区域，且不一样群组之间距离保持一致。

9．分辨率适应页面布局以确保在低分辨率[800*600]下正确显示为前提，适应高分辨率情

况使用表格宽度等参数使用百分比方法自动适应；

2.3.对程序设计及编码要求

1表格作为控件物理上包含容器和内部包含控件之间属性定制互不影响，即实现其

无关性，这么才能完整确保页面基础结构在局部修改时不发生改变。

2努力争取样式表实现页面格式全部控制，废弃如<font>、<backcolor>等内嵌标识，实例化坐

标位置<div>标识、页面中控制布局标识修饰含style属性内嵌样式修饰，便于使

用第三方页面维护工具修改页面。

3页面基础HTML及服务器端控件扩展标识等均保持代码洁净整齐，便于检验和控制；

4含有复杂嵌套结构,<tr>,<td>标识在行间留白及结构缩进，便于以后维护。

5非数据操作使用用户端脚本实现，降低非必需服务器[WEB服务器、数据库服务器]

负载；

2.4.交互设计

a)控件控制

1第三方服务器端控件使用要确保含有广泛兼容性和安全性，且含有完备接口指定外

观属性和交互方法。

2复杂应用程序中非标准交互控件给出具体操作方法提醒。

3页面中尽可能使用统一导航类型，如使用基于点击“图形”链接、“文字”链接

或文字图形混合其中一个方法。

举例：

4页面按钮作为基础交互控件，提倡使用有鼠标响应状态改变和禁用状态BUTTON按

钮，除特殊界面需要，不提倡使用图形按钮，而且确保同一应用程序内只使用一个外观

按钮。

5拖放服务器端控件在页面表格Table里在实施过程中不能破坏页面原布局。如.NET

中CANLENDAR控件提议在弹出子窗体内独立使用。

6包含数据表格使用中没有数据情况有文字标注[无**数据]]，表头字段名用区分于数

据行格式显示。

7分栏目标专题名称使用用户轻易了解，以用户第一人称角度命名方法，降低生硬

称谓给用户带来不友好感。

8B/S应用程序许可含有类似拖放操作非标准交互控件，不过需增加操作说明。

b)表单控制

1页面内部有必需前后文帮助信息，将页面关键任务目标、注意事项等描述在表单前申

明，便于用户立即取得导引。

2页面在交互控制中添加完整状态控制，操作中灰显特定组合控件来实现用户正确

操作，立即刷新表单中遗留数据。

3表单内任务无关信息、较少使用选项等能够经过DHTML技术、服务器端控件

隐藏等降低用户操作中干扰原因。

4表单内在特定字段域周围给出必填信息提醒，并用醒目颜色标注，提醒用户注意，验

证错误提醒要给出正确合适指导；为提升用户填写效率，提议使用用户端验证；

复杂逻辑验证使用服务器端验证。

5信息显示过滤可能出现用户不能识别HTML特殊字符。

6表单中用户在交互过程中确保用户方便切换编辑、浏览状态，方便用户用最快速度

获取需要信息，提升操作效率。

7常常使用工具按钮（如新增、编辑等功效按钮）确保在页面经单向拖曳浏览后，不需

往返拖曳滑竿即可操作；长页面能够考虑页首、页尾均放置工具按钮。

8主具体表及父子表关系查看方法使用联动式导航到下级数据，即点选主项目或父项目

统计时系统自动查询并显示出关联具体信息、子表数据，无需点选任何按钮。

c)窗体控制

1.使用含有广泛兼容性j***ascript控制用户端交互和简单导航,，除服务器控件部分自动

扩展到用户端Jscript外，程序员手动控制脚本不推荐使用Jscript和VBscript。

2.操作过程中有清楚分界子任务使用弹出窗体实现，确保完成后向主任务窗体返回必需

结果，立即刷新主任务窗体，使用户看到操作完成结果，而且经过控件获取焦点等

方法突出显示该结果。

3.弹出窗体页面专题、栏目标题（Title）等资料和关联父窗体保持上下文一致，方便

用户了解并做出处理策略。

4.采取框架结构应用程序，要充足考虑不一样分辨率下自动扩展，不一样框架之间同时通

讯立即，方便用户快速切换目标导航，观察数据之间关系等。

5.窗口专题显示标志用户目前所在模块或子系统名称，子任务窗体专题使用“动词+名词”

语法结构指明用户目前任务；

2.5.输入设计

1．高效率输入方法，特定字段内容输入方法选择使用效率最高，不轻易发生错误

方法。

如录入日期使用用户点选弹出日历控件，并无须干预自动返回正确格式。

2．方便获取到必需信息，无须用户记忆中间结果。

3．表单格式尽可能保持业务原始票据格式或字段排列次序，方便用户集中录入过程。

4．表单字段左对齐。

5．输入控件宽度基础符合数据库能够容纳宽度，暗示系统能够接收字符容量。

2.6.提醒信息

5.1.错误操作提醒信息使用非专业、易了解名词通知用户。

5.2.以第二人称“你”或“您”称呼用户，强调用户主导能力。

5.3.对用户宽容语气。

5.4.严重警告信息使用弹出信息框提醒，不严重在页面前后文处直接输出，弹出不宜

太频繁使用。

5.5.可能对系统造成破坏性操作要给出警告信息和用户确定（Confirm）按钮，用户可

以取消操作，预防意外错误操作造成损失。

6.复杂步骤在完成后给出完成成功提醒。

2.7.犯错处理及犯错画面转向

1.系统内部状态改变对于用户有较大影响情况，给出用户显著处理方案提醒，或给

出自动导航，使用户快速恢复工作状态。

2.比如用户SESSION过期，用户无法进行操作时，系统自动跳转至登录界面。

3.提供给用程序级错误截获，在不可预见情况下仍给用户通知目前情况。

4.提供页面间自动导航控制[FlowControler],以更宽容方法接收用户操作，帮助用户处

理复杂交互任务。

3.小结

以上小结着重从交互方面将易忽略部分给规范，在用户操作过程中每一个操作即时看

到操作结果，这也就符合了即时响应标准要求，降低了用户交互操作复杂度，提升了

效率。

4.展望

基于