R053web页面规范.doc

四维科技web网页规范宁波四维科技有限公司SW/R-053文 档 编 号产品版本密 级SWXXXwygfA/NYYYYA0产品名称： 共 页Web网页规范(仅供内部使用)编 制：徐翔日期：2008-5-5审 核：日期：批 准：日期： 宁波四维科技有限公司版权所有 不得复制变更历史(Change History)序号人员日期变更详情1徐翔2008/5/5目录 目录31规范制定原则42文件目录42.1建立原则42.2根目录和根目录文件42.3目录存放位置指定43文件命名54页面设计54.1编码54.2页面64.2.1感官体验64.2.2交互体验84.2.3显示路径94.2.4情感体验105提示信息10web网页规范1 规范制定原则l 使页面风格统一，更美观易用。l 避免因不规范引起的软件缺陷。l 提高团队开发项目过程的页面质量。2 文件目录2.1 建立原则以最少的层次提供最清晰简便的访问结构。2.2 根目录和根目录文件根目录：DNS域名服务器指向的索引文件的存放目录。根目录文件：根目录只允许存放default.aspx，index.htm和main.htm文件，以及其他必须的系统文件。2.3 目录存放位置指定1、 文件目录与菜单目录对应。每个主要功能(主菜单)建立一个相应的独立目录，子菜单下级还有子功能，则该子菜单也建立文件夹。文件夹名称、文件名称应可以首字母大写。2、 公用图片和其他私有图片都放在根目录下统一目录images。3、 所有的js文件存放在根目录下统一目录script。4、 所有的css文件存放在根目录下统一目录style，其余页面均调用该目录下的css文件，整个系统尽量只使用一种或少量样式表。5、 静态设计页面放在根目录下统一目录demo。6、 公用报错页面存放在根目录下统一目录error。3 文件命名1、 文件命名的原则：以最少的字母达到最容易理解的意义。 2、 索引文件统一使用default.aspx文件名(小写) 。3、 按菜单名的英语翻译取单一单词为名称。例如： 关于我们 aboutUs 产 品 product 4、 单英文单词文件名都必须为小写，组合英文单词文件名第二个起第一个字母大写，不用下划线连接。 5、 图片命名原则以图片英语字母为名。大小原则写同上。 例如：网站标志的图片为logo.gif 6、 鼠标感应效果图片命名规范为图片名+on/off。 例如：menu1on.gif/menu1off.gif4 页面设计4.1 编码1、 网页显示字符集整个项目要使用统一的字符编码。第一，在母板头部添加： 如果开发工程师个人也参考使用上面。第二，在web.config中添加： 2、 网页的css规范 (参见目录及命名规范)，各页对字体定义均采用样式表控制，避免直接在页面中对字体样式进行定义。3、 网页标题 xxxxxxxxxxxxxxxxxx，每页标题必须和该页功能保持一致。 4、 所有的javascript的调用尽量采取外部调用 5、 应尽可能多的对需要在页面重复出现的公共信息打包，然后再在各页面相应位置通过调用javascript实现。6、 所有页面间链接均采用相对路径，严格杜绝采用绝对路径链接。7、 维护信息时各栏目输入框(如text、textarea、select等所有表单按钮)的名称应与对应数据库字段值完全保持一致。8、 表格作为控件物理上包含的容器和内部包含的控件之间的属性定制互不影响，即实现其无关性，这样才能完整的保证页面的基本结构在局部修改时不发生变化。9、 第三方服务器端控件的使用要保证具有广泛兼容性和安全性，且具有完备的接口指定外观属性和交互方式。10、 复杂的应用程序中非标准交互控件给出详细的操作方法的提示。11、 非数据操作使用客户端脚本实现，减少非必要的服务器WEB 服务器、数据库服务器负载。4.2 页面4.2.1 感官体验呈现给用户视听上的体验，强调舒适性。1、 兼容性：大部分项目都要求兼容IE6，7和FF。在框架层面上就将这个问题处理好，为后面的兼容问题节省下大部分时间。2、 分辨率：开发环境的分辨率建议使用：1024768。客户使用的机器目前仍是1024768为主流。避免因分辨率不同引起的界面显示不完整。适应高分辨率情况，使用表格宽度等参数使用百分比方式自动适应，或使用颜色填充的方法。3、 页面尺寸：页面长度原则上不超过1屏，宽度不超过1屏，适合多数浏览器浏览（以15寸及17寸显示器为主）。每个标准页面为A4幅面大小，即8.5X11英寸。全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px。每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K4、 设计风格：符合目标客户的审美习惯，并具有一定的引导性。在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。5、 风格统一：所有页面保持风格一致，风格包括页面高宽，大小，颜色，布局，字体大小，行间距，按钮，执行方式等。6、 LOGO：确保logo的保护空间，确保logo的清晰展示而又不占据过分空间。7、 页面速度：正常情况下,尽量确保页面在5秒内打开。8、 页面布局：样式排版整齐划一，尽可能划分不同的功能区域于固定位置，固定的格式，方便用户导航使用；排版不宜过于密集，保留一定的“留白”区域，减轻查看时的视觉疲劳。9、 数据显示集中原则：各种列表在页面中往往是传递信息的核心，尽量集中的表现出来，并提供必要的关联数据、表等恰当的组织起来，并且在视觉上使用户很容易察觉数据之间的关系，并方便查看、编辑等；冗长拖沓的数据组织形式可能给用户带来非常低的维护效率。10、 主次分明原则：页面中同时分布较多栏目的情况下，按照页面（Flow）的伸展方向，即由上到下，有左到右，根据浏览的方向，重要的内容应该在左边最易注意的位置，导航等置于页面头部固定位置。使导航等重要内容始终处于用户的视野（Sight）之中。页面左边或右边一般是一些当前页面主要操作的扩展、选项等内容。11、 变化（对比）原则：在页面主体内容部分往往有很多文本信息，它是需要用户认真阅读的部分，只在文本字体、色彩上增加格式的变化，如加粗、下划线、行前导符、链接文本的不同状态定义（linkhovervisited）等，就可以将冗长的文档、表格等组织的很有条理；冗长的内容“层次“就有了变化，更容易辩识(Readable)；在美学角度增加了相临部分间的对比。12、 页面留白：页面留白同时也是一种增加可读性（Readable）的方式。在文字区域防止用户读完一行无法定位下一行的位置的麻烦，在整体布局上，它可以减轻用户的视觉疲劳。13、 页面色彩：与整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。14、 页面导航：导航条清晰明了、突出，层级分明，并固定不随页面滚动条滚动。 15、 页面缩放：工作区的内容需随窗口大小变化，或要有滚动条出现。16、 页面滚动：尽量不要有过多的拉动滚动条的动作，避免无用滚动条，切忌向上回滚页面。17、 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。每个非首页静态页面含图片字节不超过60K。18、 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。120*90，120*60是小图标的标准尺寸。 19、 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。4.2.2 交互体验呈现给用户操作上的体验，强调易用/可用性。20、 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段在页面级作判断限制。（如手机位数、邮编等等，避免无效信息）21、 输入框：文本输入框，可输入任意字符，长度输入限制。对于是数字格式的文本框，只能输入数字，小数点保位数根据实际情况确定。时间输入框：可采用时间控件方式或是规定格式。对于为起止时间的，前者应小于后者，是否相等看实际情况。22、 页面操作：考虑按照一般用户常规使用习惯，避免操作繁琐；多模块中相似或相同功能，相应操作方式要一致。23、 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。24、 操作性提示：所有页面级判断的内容需要在页面级完成，不能直接提交到后台；对系统有破坏性的操作都需要有提示。如删除，在删除前，需要进行确认。操作的提示信息需简明易理解，各功能类似的提示信息，其提示风格需保持一致。25、 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。26、 即时响应原则：每一个交互动作应该能够马上看到操作的结果，并且用色彩、文字粗细、闪烁、弹出、页面布局的明显变化等突出方式告知用户。27、 鼠标最短距离移动原则：交互按钮控件等根据执行前后关系及表单中状态的控制等合理的组织起来。28、 页面刷新：不提倡整页刷新方式，建议页面刷新为部分刷新；在要求高性能的功能处必须采取部分刷新方式；尽量采用无刷新（AJAX)技术，以减少页面的刷新率。AJAX是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。29、 页面搜索：关键字搜索，可以根据输入的文字模糊查询列表中某字段的内容；可以通过回车自动搜索输入的内容，该回车功能视情况而定。30、 弹出窗口：尽量减少弹出的窗口，以避免开过多的无效窗口，弹出窗口风格保持一致，包括头部、按钮等。31、 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。4.2.3 显示路径无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。浏览体验：呈现给用户浏览上的体验，强调清晰美观。32、 栏目的命名：与栏目内容准确相关，统一简洁清晰，不宜过于深奥。33、 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。34、 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。35、 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。36、 页面链接：根据不同功能、不同状态用不同颜色、状态标志，增加页面层次。37、 页面打印：允许用户打印该页资料，可以预览，内容按照标准完整显示，包括页眉，页脚，上下左右宽度页边距。38、 文字排列：标题与列表明显区隔，段落清晰。39、 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。40、 页面底色：不能干扰主体页面的阅读。41、 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。42、 分页浏览：对于长篇文章 进行分页浏览。43、 快速通道：为有明确目的的用户提供快速入口。4.2.4 情感体验呈现给用户心理上的体验，强调友好性。44、 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。45、 友好提示：给予每个操作鼠标跟随提示。对于个别操作进行友好提示和注意点说明，必要时添加图示。以增加浏览者的亲和度。46、 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍。5 提示信息1、 错误提示信息的处理（5-1） 所有错误信息全部使用中文提示错误信息，标点使用中文半角符号，格式如下： 提示信息+错误！2、 成功提示信息的处理（5-2） 所有成功信息全部使用中文提示成功信息，标点使用中文半角符号，格式如下： 提示信息+成功！3、 页面的返回 所有需要返回上一页的时候使用history.back();不使用history.go(-1); 需要返回前n页（n1）时使用history.go(-n)； 所有返回都使用连接的方式而不是button。4、 提交前数据的判断保证提交前的数据都会通过JavaScript进行数据类型以及长度的判断：(1) 是否为数字：使用函数isNaN()。(2) 长度判断: 长度要判断去掉前后空格后的实际长度。(3) 为空判断： 所有不容许为空的输入字段都要在去掉前后空格后进行判断，同时如果该字段为