页面设计规范.docVIP

页面开发规范 第 PAGE 2页 共 NUMPAGES 6页 产品需求文档模板 网购 第 PAGE 1页 共 NUMPAGES 4页 面开发规范 1 概述3 1.1 背景 3 1.2 目的 3 2 规范细则3 2.1 页面设计意图明确 3 2.2 页面HTML代码结构清晰，易于阅读和研发嵌入程序代码4 2.3 页面流程清晰，指向明确 6 2.4 页面制作规范及其细节，增强seo效果 6 2.5 页面id,class及其css命名规范参考，提高团队开发效率和方便管理6 1 概述 1.1 背景 不规范的页面，会存在很多的冗余代码、结构不合理等现象，将对研发的嵌套工作造成了 一些影响，HTML页面代码的易读性较差。 1.2 目的 规范HTML页面： 1. 减少冗余代码 2. 提高代码的易读性 3. 逐步提高设计师对代码的理解，能够和开发工程师更好的交互 4. 让页面更优化，高效让用户能够更好的体验. 2 规范细则 2.1 页面设计意图明确 1） 页面标题明确，能清晰反映本页面策划功能，禁止“无标题文档”，“标题1”，“标题2” 等归属不明确标题 2） 页面文字描述清晰，和产品策划人员沟通确认页面文字描述 3） 同项目中不同页面中相同或者相似功能页面文字描述保持一致性 2.2 页面HTML代码结构清晰，易于阅读和研发嵌入程序代码 1） HTML代码分区明确 在页面的每一个功能分区前后加入标记，说明此区块的功能指向，例如 !-- 统一头开始/铃声排行开始 -- !-- 统一头结束/铃声排行结束 -- 2） 代码结构清晰明确，要求HTML标签的开始和结束对齐，合理换行，代码缩进 符合规范的代码： !-- 铃声排行开始 -- table cellpadding=”0” cellspacing=”0” border=”0” tr /tr /table td 这里是内容区域 /td td 这里是内容区域 /td !-- 统一头结束/铃声排行结束 -- 不符合规范的代码： table cellpadding=”0” cellspacing=”0” border=”0” trtd这里是内容区域 /td td 这里是内容区域 /td /tr /tabletable cellpadding=”0” cellspacing=”0” border=”0” trtd这里是内容区域 /td td 这里是内容区域 /td /tr /table 3） 同项目中不同页面中类似区域保持一致，例如表格样式、表格文字的对齐方式，要注意表格 单元格中文字的对齐方式、距离等因素 2.3 页面流程清晰，指向明确 1） 页面中的链接指向正确，链接指向代表了操作流程，操作流程的合理性在此会得到反映 2） 页面中的链接指向禁止使用空链接以及#号代替 3） 不同页面的文字、链接的样式等要保持风格一致性 4） 导航链接清晰、指向明确完整、风格一致 5） 不同页面图标、按钮风格一致，间距合理美观 6） 页面中能够少用图片就少用图片，尤其背景色、边框等，尽量少用图片 7） 页面中不要保留从其他页面拷贝的无用Javascript代码 8） 页面中使用的style、javascript要单独放到文件引用，不能直接写入页面 2.4 页面制作规范细节，增强seo效果. 1） 命名一律小写，尽量用英文，尽量少加中杠和下划线；尽量不缩写，除非一看就明白的单词 如果可以话 2） 目录建立的原则：以最少的层次提供最清晰简便的访问结构，根目录一般只存放index.htm 以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录 ，根 目 录 下 的images 用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私 有图片 。 3） 所有的CSS，js的都采用外部调用，LINK href=style/style.css rel=stylesheet type=text/css 书 写 时 重 定 义 的 最 先 ，伪 类 其 次 ，自 定 义 最 后（ 其 中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。 4） 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来 定 义 ，pt一般使用中文 宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，