2022年页面设计规范 .pdf

《2022年页面设计规范 .pdf》由会员分享，可在线阅读，更多相关《2022年页面设计规范 .pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、页面开发规范网购第 1页 共9页文档属性：属性文档属性文档主题：页面开发规范文档编号：文档版本：版本号 ( 如： V1.0) 版本日期：2009-12-30 文档状态：文档变更版本修订日期修订人描述V1.0 2009-1-23 吕勇创建文档名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 9 页 - - - - - - - - - 页面开发规范网购第 2页 共9页页面开发规范名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

2、 - - - 名师精心整理 - - - - - - - 第 2 页，共 9 页 - - - - - - - - - 页面开发规范网购第 3页 共9页目录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 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - -

3、- - - - - 名师精心整理 - - - - - - - 第 3 页，共 9 页 - - - - - - - - - 页面开发规范网购第 4页 共9页1概述1.1 背景不规范的页面，会存在很多的冗余代码、结构不合理等现象，将对研发的嵌套工作造成了一些影响， HTML 页面代码的易读性较差。1.2 目的规范 HTML 页面：1. 减少冗余代码2. 提高代码的易读性3. 逐步提高设计师对代码的理解，能够和开发工程师更好的交互4. 让页面更优化，高效让用户能够更好的体验. 2规范细则2.1 页面设计意图明确1） 页面标题明确，能清晰反映本页面策划功能，禁止“无标题文档 ”，“标题1”，“标题2”

4、等归属不明确标题2） 页面文字描述清晰，和产品策划人员沟通确认页面文字描述3） 同项目中不同页面中相同或者相似功能页面文字描述保持一致性2.2 页面HTML 代码结构清晰，易于阅读和研发嵌入程序代码1） HTML 代码分区明确在页面的每一个功能分区前后加入标记，说明此区块的功能指向，例如名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 9 页 - - - - - - - - - 页面开发规范网购第 5页 共9页 名师资料总结 - - -精品资料欢迎下载 - - - - -

5、- - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 9 页 - - - - - - - - - 页面开发规范网购第 6页 共9页2） 代码结构清晰明确，要求HTML 标签的开始和结束对齐，合理换行，代码缩进符合规范的代码： 这里是内容区域这里是内容区域 不符合规范的代码： 这里是内容区域这里是内容区域 这里是内容区域这里是内容区域3） 同项目中不同页面中类似区域保持一致，例如表格样式、 表格文字的对齐方式，要注意表格单元格中文字的对齐方式、距离等因素名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - -

6、 - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 9 页 - - - - - - - - - 页面开发规范网购第 7页 共9页2.3 页面流程清晰，指向明确1） 页面中的链接指向正确，链接指向代表了操作流程，操作流程的合理性在此会得到反映2） 页面中的链接指向禁止使用空链接以及#号代替3） 不同页面的文字、链接的样式等要保持风格一致性4） 导航链接清晰、指向明确完整、风格一致5） 不同页面图标、按钮风格一致，间距合理美观6） 页面中能够少用图片就少用图片，尤其背景色、边框等，尽量少用图片7） 页面中不要保留从其他页面拷贝的无用Javascript代码8） 页面

7、中使用的 style 、javascript要单独放到文件引用，不能直接写入页面2.4 页面制作规范细节，增强seo效果. 1） 命名一律小写， 尽量用英文， 尽量少加中杠和下划线；尽量不缩写， 除非一看就明白的单词如果可以话2） 目录建立的原则：以最少的层次提供最清晰简便的访问结构，根目录一般只存放index.htm 以及其他必须的系统文件， 每个主要栏目开设一个相应的独立目录， 根目录 下的images 用于存放各页面都要使用的公用图片，子目录下的 images 目录存放本栏目页面使用的私有图片。3） 所有的 CSS ，js 的都采用外部调用，书 写 时 重 定 义 的 最 先 ，伪类 其

8、次，自定 义最后（ 其中a:linka:visited a:hovera:actived要按照顺序写）便于自己和他人阅读。4） 为了保证不同浏览器上字号保持一致，字号建议用点数pt 和像素 px来 定义 ， pt 一般使用中文宋体的 9pt 和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号， 黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。5） 图片都加上 alt 标签，防止嵌入程序时候程序员忘记此标签调用，合理的使用标题等文字去描述图片，这样能增加页面的关键字密度。6） 尽量不使用 Table 布局，去掉页面中的例如font/bgcolor等格式

9、化控制标签。 用符合 web标准的代码来制作页面。这样能够让代码结构化、语义化。提高页面代码的可读性。7） 首页HTML 代码的 和 之间的内容，容易忘记加入的标签，网站简介 搜索关键字 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 9 页 - - - - - - - - - 页面开发规范网购第 8页 共9页2.5 id,class 及其css命名规范参考，提高团队开发效率和方便管理.1） 页面不统一的命名规则，会导致新制作没法很快接手，没法很好的维护现有的页面，一个大

10、型的网站来说这个是一个重大的失误，所以制作请统一命名规范，大型网站团队开发统一的命名规范，增强代码可读性，便于制作之间接手，配合，提高团队开发效率.以下是增强 SEO 的div+css 命名规范实例 . 1.css class 的命名页头： header 登录条： loginbar 标志： logo 侧栏： sidebar 广告： banner 导航： nav子导航： subnav 菜单： menu 子菜单： submenu 搜索： search 滚动： scroll页面主体： main 内容： content 标签页： tab 文章列表： list 提示信息： msg 小技巧： tips 栏

11、目标题： title 加 入 ： joinus 指 南 ： guild 服 务 ： service 热点： hot 新闻： news 下载： download 注册： register 状态： status 按钮： btn 投票： vote 合作伙伴： partner 友情链接： friendlink 页脚： footer 版权： copyright2.css ID 的命名外套：wrap 主 导航 ： mainnav 子导航： subnav页脚：footer整个页面：content页眉：header页脚：footer商标：label标题：title主导航：mainnav （globalnav

12、）顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar旗志：logo标语：banner菜单内容 1： menu1content菜单容量：menucontainer 子菜单：submenu 边导航图标： sidebarIcon 注释：note名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 9 页 - - - - - - - - - 页面开发规范网购第 9页 共9页面包屑：breadcrumb( 即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：login功能区：shop( 如购物车，收银台)当前的current3.另外在编辑样式表时可用的注释可这样写：内容区4.样式文件命名主要的 master.css 布局，版面 layout.css 专栏 columns.css文字 font.css 打印样式 print.css 主题 themes.css名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 9 页 - - - - - - - - -