BS系统界面设计规范

B/S系统界面设计规范前言界面雅观、操作易用性、保护成本低是评论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.1.通用原则界面色彩要求：计算机屏幕的发光成像和一般视觉成像有很大的不同样，应当注意这类差别作出适合的色彩搭配。关于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感觉视觉疲备为宜。比方轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨明丽，严重阻拦用户视觉交互。界面平面版式要求：系统款式排版齐整划一，尽可能区分不同样的功能地区于固定地点，固定的格式，方便用户导航使用；排版不宜过于密集，保存必定的“留白”地区，减少查察时的视觉疲备。数据显示集中原则：各样列表在页面中经常是传达信息的核心，尽量集中的表现出来，并供给必需的关系数据、表等适合的组织起来，并且在视觉上使用户很简单觉察数据之间的关系，并方便查察、编写等；冗长拖拉的数据组织形式可能给用户带来特别低的保护效率。4主次分明原则：页面中同时散布好多栏目的状况下，依据页面（Flow）的伸展方向，即由上到下，有左到右，依据阅读的方向，重要的内容应当在左侧最易注意的地点，导航等置于页面头部固定地点。使导航等重要内容一直处于用户的视线（Sight）之中.页面右侧一般是一些目前页面主要操作的扩展、选项等内容。变化（比较）原则：在页面主体内容部分经常有好多文本信息，它是需要用户仔细阅读的部分，只在文本字体、色彩上增添格式的变化，如加粗、下划线、行前导符、链接文本的不同样状态定义（link\hover\visited）等，就能够将冗长的文档、表格等组织的很有条理；冗长的内容“层次“就有了变化，更简单辩识(Readable)；在美学角度增添了相临部分间的比较。6页面留白：页面留白同时也是一种增添可读性（

Readable

）的方式。在文字地区防备用户读完一行没法定位下一行的地点的麻烦，在整体布局上，它能够减少用户的视觉疲备。7即时响应原则：每一个交互动作应当能够立刻看到操作的结果，并且用色彩、文字粗细、闪耀、弹出、页面布局的显然变化等突出方式见告用户。鼠标最短距离挪动原则：交互按钮控件等依据履行前后关系及表单中状态的控制等合理的组织起来。2.2.显示（版式）设计1．页面布局鉴于表格Table成立完好符合设计收效图。2．文字简单阅读。行间距、字体大小等经过款式表一致控制。3．页面链接依据不同样功能、不同样状态用不同样颜色、状态标记，增添页面层次。4．鉴于表格Talbe的布局（Layerout）控制，便于控制实现不同样分辨率下的适应，和页面上下方向的自动扩展；表格作为控件“容器”规范外观和规格，不同样页面中的队列散布基本一致。5．使用款式表修饰页面表格Table,如表格单元格、背景，表格内字体等，方便此后关于整个站点的保护和扩展。6．页面分组页面查问地区、数据列表、详尽信息、编写地区等依据不同样功能分组，所在区域主题（Title）注明该地区的名称，近似功能页面间布局保持一致。7．成立数据表格关系包括数据的表格使用户在视觉上理解互相间关系，如序列、父子表等。8．页面留白页面有显然留白地区，且不同样群组之间距离保持一致。9．分辨率适应页面布局以保证在低分辨率[800*600]下的正确显示为前提，适应高分辨率情况使用表格宽度等参数使用百分比方式自动适应；2.3.对程序设计及编码的要求表格作为控件物理上包括的容器和内部包括的控件之间的属性定制互不影响，即实现其没关性，这样才能完好的保证页面的基本构造在局部改正时不发生变化。2力争款式表实现页面格式所有控制，荒弃如<font>、<backcolor>等内嵌标记，实例化坐标地点的<div>标记、页面中控制布局的标记修饰含style属性的内嵌款式修饰，便于使用第三方页面保护工具改正页面。3页面基本HTML及服务器端控件扩展标记等均保持代码洁净齐整，便于检查和控制；4含有复杂嵌套构造的,<tr>,<td>标记内行间留白及构造的缩进，便于此后的保护。5非数据操作使用客户端脚本实现，减少非必需的服务器[WEB服务器、数据库服务器]负载；2.4.交互设计控件控制第三方服务器端控件的使用要保证拥有宽泛兼容性和安全性，且拥有齐备的接口指定外观属性和交互方式。复杂的应用程序中非标准交互控件给出详尽的操作方法的提示。3页面中尽量使用一致的导航种类，如使用鉴于点击“图形”的链接、“文字”的链接或文字图形混淆此中一种方式。举例：4页面按钮作为基本交互控件，倡导使用有鼠标响应状态变化和禁用状态的BUTTON按钮，除特别界面需要，不倡导使用图形按钮，并且保证同一应用程序内只使用一种外观的按钮。5中

拖放的服务器端控件在页面表格Table里在履行过程中不能够损坏页面原布局。如CANLENDAR控件建议在弹出的子窗体内独立使用。

.NET6包括数据的表格使用中没有数据的状况有文字注明

[无

数据]]

，表头字段名用差别于数据行的格式显示。分栏目的主题名称使用用户简单理解的，以用户第一人称角度的命名方式，减少僵直的称呼给用户带来的不友善感。B/S应用程序同意含有近似拖放操作的非标准交互控件，可是需增添操作的说明。表单控制页面内部有必需的前后文帮助信息，将页面主要任务目标、注意事项等描绘在表单前声明，便于用户实时获取导引。页面在交互控制中增添完好的状态控制，操作中灰显特定组合的控件来实现用户的正确操作，实时的刷新表单中遗留的数据。3表单内任务没关的信息、较少使用的选项等能够经过DHTML技术、服务器端控件的隐蔽等减少用户操作中的搅乱要素。表单内在特定的字段域周边给出必填信息提示，并用醒目颜色注明，提示用户注意，考证的错误提示要给出正确适合的指导；为提高用户填写的效率，建议使用客户端考证；复杂逻辑的考证使用服务器端考证。5信息显示过滤可能出现的用户不能够识其他HTML特别字符。表单中用户在交互过程中保证用户方便的切换编写、阅读状态，方便用户用最快的速度获取需要的信息，提高操作效率。经常使用的工具按钮（如新增、编写等功能按钮）保证在页面经单向拖曳阅读后，不需往返拖曳滑竿即可操作；长页面能够考虑页首、页尾均放置工具按钮。主详尽表及父子表关系的查察方式使用联动式导航到下级数据，即点选主项目或父项目记录时系统自动查问并显示出关系的详尽信息、子表数据，无需点选任何按钮。c)窗体控制1.使用拥有宽泛兼容性的

j*ascript

控制客户端交互和简单导航

,，除服务器控件部分自动扩展到客户端的Jscript外，程序员手动控制脚本不介绍使用Jscript和VBscript

。操作过程中有清楚分界的子任务使用弹出窗体实现，保证达成后向主任务窗体返回必需的结果，实时刷新主任务窗体，使用户看到操作达成的结果，并且经过控件获取焦点等举措突出显示该结果。弹出窗体的页面主题、栏目标题（Title）等资料与关系的父窗体保持上下文一致，方便用户理解并做出办理策略。采纳框架构造的应用程序，要充分考虑不同样分辨率下的自动扩展，不同样框架之间同步通信实时，方便用户迅速切换目标导航，察看数据之间的关系等。5.窗口主题显示标记用户目前所在模块或子系统名称，子任务窗体主题使用“动词+名词”的语法构造指明用户目前的任务；2.5.输入设计1．高效率的输入方式，特定的字段内容的输入方式采纳使用效率最高，不简单发生错误的方式。如录入日期使用用户点选弹出的日历控件，并不必干涉的自动返回正确的格式。2．方便的获取到必需的信息，不必用户记忆中间结果。3．表单格式尽量保持业务原始单据的格式或字段摆列次序，方便用户的集中录入过程。4．表单字段左对齐。5．输入控件的宽度基本符合数据库能够容纳的宽度，示意系统能够接受的字符容量。2.6.提示信息5.1.错误操作的提示信息使用非专业的、易理解的名词见告用户。5.2.以第二人称“你”或“您”称呼用户，重申用户的主导能力。5.3.对用户宽容的语气。5.4.严重的警示信息使用弹出信息框提示，不严重的在页眼前后文处直接输出，弹出不宜太屡次的使用。5.5.可能对系统致使损坏性的操作要给出警示信息和用户确认（Confirm）按钮，用户可以取消操作，防备不测的错误操作造成损失。6.复杂步骤在达成后给出达成成功的提示。2.7.犯错办理及犯错画面的转向系统的内部状态变化关于用户有较大影响的状况，给出用户显然的解决方案提示，或给出自动的导航，使用户迅速的恢复工作状态。比方用户SESSION过期，用户没法进行操作时，系统自动跳转至登录界面。供给给用程序级错误截获，在不行预示的状况下仍给用户见告目前状况。供给页面间自动导航控制[FlowControler],以更宽容的方式接受用户操作，辅助用户处理复杂的交互任务。小结以上小结重视从交互方面将易忽略的部分赏赐规范，在用户操作过程中每一个操作即时的看到操作的结果，这也就符合了即时响应原则的要求，降低了用户交互操作的复杂度，提高了效率。展望鉴于以上规范，在目前主