前言
本文主要整理了Web前端设计开发的相关规范,主要由网络收集,希望对大家在Web设计和开发的过程中有一些帮组。
目录
一、界面设计规范细则
二、CSS编写和命名规范
三、JavaScript编程规范
正文
一、界面设计规范细则
根据日常软件和系统界面设计中存在的一些问题和用户一些使用习惯,并且在基于对用户体验相关知识的研究基础上,特制定以下规范作为用户界面设计或界面功能实现时的指导和参考内容。

易用性规范

2.001 常用按钮要支持快捷方式。
2.002 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
2.003 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
2.004 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
2.005 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab
2.006 默认按钮要支持Enter和选操作,即按Enter后自动执行默认按钮对应操作。
2.007 可写控件检测到非法输入后应给出说明并能自动获得焦点。
2.008 Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。
2.009 复选框和选项框,按选择几率的高底而先后排列。
2.010 复选框和选项框要有默认选项,并支持Tab选择。
2.011 界面空间较小时使用下拉框而不用选项框。
2.012 选项数较少时使用选项框,相反使用下拉列表框。
2.013 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业词汇;用户为儿童:这可以语气亲切和蔼;老年用户则应该成熟稳重。
2.014 鼠标为不可点击状态时显示箭头,可点击状态显示手型;系统忙时显示沙漏形状

规范性规范

2.015 菜单前的图标能直观的代表要完成的操作。
2.016 工具栏要求可以根据用户的要求自己选择定制。
2.017 系统常用的工具栏设置默认放置位置。
2.018 工具箱要具有可增减性,由用户自己根据需求定制。
2.019 状态条要能显示用户切实需要的信息,常用的有、目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。
2.020 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
2.021 状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。
2.022 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
2.023 工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

帮助规范

2.024 帮助文档中的性能介绍与说明要与系统性能配套一致。
2.025 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
2.026 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。
2.027 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
2.028 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
2.029 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性规范

2.030 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。
2.031 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
2.032 非法的输入或操作应有足够的提示说明。
2.033 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
2.034 提示、警告、或错误说明应该清楚、明了、恰当。
2.035 提交失败后必须保存用户已经输入的内容,以便修改后再次提交。

美观与协调规范

2.036 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
2.037 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
2.038 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
2.039 按钮的大小要与界面的大小和空间要协调。
2.040 避免空旷的界面上放置很大的按钮。
2.041 放置完控件后界面不应有很大的空缺位置。
2.042 字体的大小要与界面的大小比例协调。
2.043 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等。
2.044 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
2.045 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
2.046 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。
2.047 色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符。
2.048 颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试。
2.049 使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

菜单设计规范

2.050 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。
2.051 常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。
2.052 下拉菜单要根据菜单选项的含义进行分组,并按照一定的规则进行排列,用横线隔开。
2.053 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
2.054 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。
2.055 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
2.056 菜单深度一般要求最多控制在三层以内。
2.057 对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。
2.058 菜单前的图标不宜太大,与字高保持一直最好。
2.059 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。
2.060 主菜单数目不应太多,最好为单排布置。

独特性规范

2.061 安装界面上应有单位介绍或产品介绍,并有自己的图标。
2.062 主界面,最好是大多数界面上要有公司图标。
2.063 登录界面上要有本产品的标志,同时包含公司图标。
2.064 帮助菜单的"关于"中应有版权和产品信息。
2.065 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性规范

2.066 应当注意尽可能避免用户无意录入无效的数据。
2.067 采用相关控件限制用户输入值的种类。
2.068 当用户作出选择的可能性只有两个时,可以采用单选框。
2.069 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
2.070 当选项特别多时,可以采用列表框,下拉式列表框。
2.071 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。
2.072 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
2.073 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
2.074 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
2.075 对错误操作最好支持可逆性处理,如取消系列操作。
2.076 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
2.077 对可能造成等待时间较长的操作应该提供取消功能。
2.078 特殊字符常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$ #@!~,.。?/还有空格。
2. 079 与系统采用的保留字符冲突的要加以限制。
2.080 读入用户所输入的信息时,根据需要选择是否去掉前后空格。
2.081 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

输入项规范

2.082 必输项中不可为空,不可输入空格
2.083 必输项给出必输项标识(*)。
2.084 非必输项字段,Null插入数据库时不会出错,在数据库中设置默认值
2.085 日期显示格式一致;或提供固定格式的选择。
2.086 输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。
2.087 英文输入不区分大小写,不可输入汉字、数字及特殊字符
2.088 数值字段只能输入+ ,— ,0~9及功能键(BackSpace 光标) 。数值不能为负数。
2.089 单行文本框/多行文本框;长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识
2.090 附件;可正常添加符合格式的附件;  附件可正常打开和保存,附件名较长时可正常操作;直接输入错误的附件地址,保存时应给出提示信息;附件打开和保存到本地时,文件名要显示原文件的文件名。
2.091 密码输入;在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度;程序中应给出文字说明密码的可输入长度。

二、CSS编写和命名规范

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。

第一节 CSS 样式文件的命名

建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在【CSS】文件夹里:

主要

main.css

文字样式

font.css

表格

table.css

主题

themes.css

打印

print.css

补丁

mend.css

第二节 CSS 选择符的命名

所有选择符必须有小写英文字母或“_”下划线组成;样式名必须是表示该样式的大概含义;参考后面的“样式命名参考”。

当定义的样式名比较复杂时用下划线把层次分开;

比如:dcrm_logo{ …}   dcrm_logo_ico{…}

第三节  图片的命名与书写

图片的命名原则小写英文字母名称放在头尾两部分,用“_”下划线隔开,头部表示此图片的大类性质例如广告、标志、菜单、按钮等等;尾部表示图片的概念。

广告

banner

标志

logo

链接的小图片

button

装饰图

pic

标题的图片

title

banner_sohu.gif 、banner_sina.gif、 menu_about_us.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg

第四节 CSS 注释书写规范  4.1 提示和标签信息注释

这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。

.search{

border:1px solid #fff;   /*Border Color*/ }

注意:注释内容和前面样式语句间有3个空格,后面1个空格

4.2 修改样式注释(时间和相关人员)

/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour

--------------------------------------------------------------------------------------------*/

4.3 文档结构

/*__Header

--------------------------------------------------------------------------------------------*/

.search{

border:1px solid #fff;   /*Border Color*/ }

/*__Menu

--------------------------------------------------------------------------------------------*/

.menul_ul{

border:1px solid #fff;   /*Border Color*/ }

注意:相对独立的2段内容之间空1行

第五节  CSS布局编码标准和建议  5.1 建立样式表索引

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息;定义站点的布局,记录文件版本号(利于多作者协作及将来更新)

/*---------------------------------------------------------------------------------------------

*Filename:                        main.css

*Description:                      Global CSS

*Version:                         1.0.0(2009-12-28)YYYY-MM-DD

*Website:                         http://www.testsoft.com

==STRUCTURE:=================================== == ==== =====

*Page width:                       980px

*Number of columns:                2

--------------------------------------------------------------------------------------------*/

5.2 命名锚点 的使用

命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统,所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点,并在整个文档中查找,从而获取该CSS节。

*==STRUCTURE:===============================================

$__header              Header Definitions

$__menu                Global Site

$__content             Everything within the content

-----------------------------------------------------------------------------------------------*/

/*__header

-----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

/*__menu

----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

5.3 建立良好的CSS编码顺序

最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式,比如下面这个例子:

p { color: red; background: yellow;}

p { color: green;}

以上的段落最终将呈现绿色的字体,并带有黄色的背景,这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了,至于黄色背景为何没有消失,那是因为第二个 p 的定义中并没有与之冲突的定义,因此它还是有效的。

5.4 合适的缩写

在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁;缩写语法参考相关章节。

5.5 CSS图像拼合(即CSS Sprites技术)

CSS Sprites技术:将用到的所有背景图片合并为一张图片,使用css背景属性,来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

5.6 CSS组合和嵌套

CSS组合

你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

h2 { color: red; }

.w3cbbs { color: red; }

.w3cbbs_52css { color: red; }

则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: red; }

CSS嵌套

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。

#top { background-color: #ccc; padding: 1em;}

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

第六节  常用CSS选择符命名参考

导航

nav

页头

header

主导航

mainnav

页面主体

main

顶导航

topnav

内容

content

子导航

subnav

页脚

footer

菜单

menu

版权

copyright

子菜单

submenu

登陆

login

标志

logo

侧栏

sidebar

广告

banner

搜索

search

滚动

scroll

标签页

tab

小技巧

tips

合作伙伴

partner

加入

joinus

标题

title

注册

regsiter

指南

gUIld

新闻

news

下载

download

按钮

button

状态

status

服务

service

投票

vote

注释

note

友情链接

friendlink

提示信息

msg

注意:命名方式使用“类别_功能”的方式(.bar_news{}   .bar_product{})。

三、JavaScript编程规范
请参考 Google JavaScript 编码规范指南:
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
网上也有好多中译版的大家可以搜一下。
网络参考:
1. http://liumiao.me/html/wd/W3C/127.html
2.  http://liumiao.me/html/wd/W3C/125.html

Web前端设计开发规范相关推荐

  1. Web前端工程师开发规范必须要注意的事

    Web前端工程师开发规范必须要注意的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范 ...

  2. HTML5期末大作业:餐饮网站设计——餐饮店铺(1页) web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:餐饮网站设计--餐饮店铺(1页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. ...

  3. HTML5期末大作业:甜品奶茶网站设计——大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:甜品奶茶网站设计--大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...

  4. HTML5期末大作业:服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业 常见网页设计作业题材 ...

  5. HTML5期末大作业:服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品_期末大作业

    HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业 常见网页设计作业题材 ...

  6. HTML5期末大作业:生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:生鲜水果蔬菜商城网站设计--天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...

  7. HTML5期末大作业:管理系统后台网站设计——代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:管理系统后台网站设计--代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. ...

  8. HTML+CSS+JS 生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品_期末大作业

    HTML5期末大作业:生鲜水果蔬菜商城网站设计--天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...

  9. HTML5期末大作业:土王酒业网站设计——土王酒业(7页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业

    HTML5期末大作业:土王酒业网站设计--土王酒业(7页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...

最新文章

  1. Android Activity 和 ViewGroup中事件触发和传递机制
  2. 开发日记-20190815 关键词 读书笔记《Linux 系统管理技术手册(第二版)》DAY 23
  3. pat1085. Perfect Sequence (25)
  4. python简单入门
  5. RTP协议全解(H264码流和PS流)
  6. 绝地求闪退be服务器未运行,绝地求生大逃杀BE启动失败,应用程序无法正常启动...
  7. getdate函数_PHP getdate()函数与示例
  8. linux C语言多线程库pthread中条件变量的正确用法逐步详解
  9. C语言中static的用法
  10. Spark算子---实战应用
  11. java poi无法读取word_poi,word_POI读取word内容的疑问,poi,word,java - phpStudy
  12. charles浏览器抓包https_十分钟学会Charles抓包(iOS的http/https请求)
  13. C语言基础篇,什么是封装,附代码!
  14. 变量名可以是python的关键字_python – 如何使用关键字作为变量名?
  15. 修改Nodejs内置的npm默认配置路径
  16. AV系统类毕业论文文献有哪些?
  17. 《疯狂的站长》读后感3
  18. windows删除文件时需要管理员权限的方法
  19. 视频传输协议之MPEG-DASH
  20. GPU显存占满利用率GPU-util为0

热门文章

  1. 软件测试面试题:怎么验证一个复选框是不是被选中或者未被选中?
  2. 史玉柱:从一片废墟到创造500亿财富
  3. 各种背景音乐,以后公司的颁奖、签约仪式不怕找不到背景配乐了!
  4. 简易在线留言板(上)——树洞留言板
  5. MCU微控制器在电动滑板车技术核心剖析
  6. CSS3 实现 60 FPS (60帧)动画效果
  7. 第四周作业-项目招标书
  8. 转:壹百度-百度十年千倍的29条法则
  9. sdl 自动翻译服务器,在SDL Trados(2009,2011,2014) 里使用微软自动翻译注意事项
  10. 有6个月免费的正版NOD32杀软用了