上汽软件界面设计规范.docx

1、上汽软件界面设计规范软件界面设计规范版本:1.0编号:QMD-JS-031.总 论 本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与SPI联系，SPI会及时更改本规范的相关代码样例和文档。基本要求 1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、includ

2、e 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。 2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包

3、含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。 脚本编写我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。 2.详细规范Html 文件 文档标题 补充 为了保证网站能够与下一代的web

4、语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 而不 是 . 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。 关于 Table在写 互相嵌套时，严格按照的规范，对于单独的一个来说，对齐， 缩进两个半角空格， 中如果还有嵌套的表格，也缩进两个半角空格，如果中没有任何嵌套的表格， 结束标记应该与 处于同一行，不要换行， 如我们注意在源代码中不应有这样的代码：

5、 而应该是这样的： 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：   属于同一个级别 的 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 和 之间写一 个   如果高度小于12px, 则应该 在 和 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command-apply souce formatting进行重新整理！ Width 和height 的写

6、法也有统一的规范，一般情况下只有一列的表格，width 写在 的标签内，只有一行的表格，height 写在 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。 Table 编写的一 般 原 则 ：1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽

7、量避免 两个标记，经验表明，这两个标记会带来许多麻烦。 2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 标记，以便能够使这个大表格分块显示。 3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用   或者全角空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记，注意，一般情况下，请不要省

8、略 结束标记 。 4. 原则上，我们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 附上 width 和 height 属性。 5. 为了最大程度的发挥浏览器自动排版的功能

9、，在一段完整的文字中请尽量不要使用 来人工干预分段。 6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 7. 所有的字号都应该用样式表来实现，禁止在页面中出现 标记。 8. 请不要在网页中连续出现多于一个 的   也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。 9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和aria

10、l 两种字体。 10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样： 而应该这样： 12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。 13、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。 网站目录设置规范 目录建立的原则：以最少的层次提供最清晰简便的访问结构。 根目录：根目录指DNS域名服务器指向的索引文件的存放目录。服务

11、器的ftp上传目录默认为html 根目录文件根目录只允许存放index.html和main.html文件，以及其他必须的系统文件。 每个语言版本存放于独立的目录。已有版本语言设置为：简体中文 gb繁体中文 big5英 语 en日 语 jp 每个主要功能(主菜单)建立一个相应的独立目录。 根目录下的images为存放公用图片目录，每个目录下私有图片存放于各自独立images目录.例如：menu1imagesmenu2images 所有的js文件存放在根目录下统一目录script 所有的CSS文件存放在根目录下的style目录网站文件命名规范 文件命名的原则：以最少的字母达到最容易理解的意义。 索

12、引文件统一使用index.html文件名(小写)index.html文件统一作为桥页，不制作具体内容，仅仅作为跳转页和meta标签页。主内容页为main.html 按菜单名的英语翻译取单一单词为名称。例如：关于我们 aboutus信息反馈 feedback 产 品 product所有单英文单词文件名都必须为小写，所有组合英文单词文件名第二个起第一个字母大写；所有文件名字母间连线都为下划线 图片命名原则以图片英语字母为名。大小原则写同上。例如：网站标志的图片为logo.gif鼠标感应效果图片命名规范为图片名+_+on/off。例如：menu1_on.gif/menu1_off.gif其它文件命名

13、规范：1.js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js2.所有的CGI文件后缀为cgi所有CGI程序的配置文件为config.cgi注意：1. 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm 2文件名称统一用小写的英文字母、数字和下划线的组合。 3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 。 4. 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明htm

14、l 文件的命名原则 ： 在根目录下开设news目 录 第一条缺省新闻取名index.htm 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。 5. 图片的命名原则遵循以下几条规范 ： 名称分为头尾两两部分，用下划线隔开。 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等 。 一般来说: 放置

15、在页面顶部的广告、装饰图案等长方形的图片我们取名：banner 标志性的图片我们取名为：logo 在页面上位置不固定并且带有链接的小图片我们取名为button 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu 装饰用的照片我们取名：pic 不带链接表示标题的图片我们取名：title 依照此原则类推。 尾部分用来表示图片的具体含义。 下面是几个样例，大家应该能够一眼看明白图片的意义： banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif log

16、o_national.gif pic_people.jpg pic_hill.jpg. 网站首页head区代码规范head区是指首页HTML代码的和之间的内容。 必须加入的标签：1.公司版权注释 2.网页显示字符集简体中文：繁体中文：英 语：3.网页制作者信息4.网站简介5.搜索关键字 6.网页的css规范(参见目录及命名规范)7.网页标题xxxxxxxxxxxxxxxxxx可以选择加入的标签1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。2.禁止浏览器从本地机的缓存中调阅页面内容。 3.用来防止别人在框架里调用你的页面。4.自动跳转。5指时间停留5秒。6.网页搜索机器人向导.用

17、来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。7.收藏夹图标 所有的javascript的调用尽量采取外部调用. 附标签：标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景网站建设尺寸规范 页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px，

18、另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 网站链接结构规范 链接结构的原则：用最少的链接，使得浏览最有效率。首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条 字体和颜色的设计规范规则2-3-1：页面当中所有字体除特别说明外，全部采用宋体9pt。（CSS: 默认）规则2-3-2：页面列表中所有标题及表头字体全部加粗。（CSS: strong）窗体规则2-4-1：所有非查询、非报表功能页面宽度必须不超过屏幕设置的分辨率1024*768（即当前屏幕显示设置为102

19、4*768时，并将该页面最大化状态下，该页面无左右滚动条）。规则2-4-2：所有页面包含页眉和页脚，同时页眉和页脚采用include方式，页眉内容是产品信息及功能菜单，页脚内容是公司版权等的联系方式信息（当正文显示内容不足一页长度的将公司版权等联系方式置于该页面最下方）。规则2-4-3：所有功能页面的正文内容包含页面位置，并且正文内容占浏览器95%空间。规则2-4-4：功能页面正文内容中第一行必须是当前页面的菜单位置，并且该内容居左对齐。示例：图表 2 规则2-4-3规则2-4-5：所有页面的正文内容与“当前位置”必须间隔一个空行，正文内容与页脚间隔一个空行。规则2-4-6：查询页面中的条件区

20、域与数据区域之间必须间隔一个空行。示例：图表 3 规则2-4-6规则2-4-7：条件区域内的项目相互间必须以“cellpadding=1”分隔，文字标签必须左对齐并且标签不带冒号，区域中按钮居右对齐，如果是复选框和单选框内容要求必须放在同一单元格内，同时选项项和文字说明之间留一个空格，完整选项之间留二个空格。示例：图表 4 规则2-4-7规则2-4-8：条件区域的背景色必须刚好完整覆盖所有内容，颜色统一采用CSS中定义的值。（CSS: t_tablebocolor）规则2-4-9：页面上所有区域中内容超过两行及以上的，每行的背景色必须按CSS行颜色规定相互交替。（CSS: t_troddcol

21、or, t_trdblcolor）示例：图表 5 规则2-4-9规则2-4-10：页面上数据区域左上方必须显示区域的描述标题，标题字体与背景色必须使用CSS的定义，标题文字无冒号，标题下显示分隔线，分隔线必须按单元格中间断开，并且所有标题行不允许出现按钮，列表数据区域出现的按钮应居左对齐。（CSS: a_areatitle, t_tabletitle, t_reporttitle）示例：图表 6 规则2-4-10规则2-4-11：页面中各区域中标题的对齐方式同数据的对齐方式，数字（值）类采用居右对齐，不统一长度的文本数据类型采用居左对齐，统一长度的文本或日期数据类型采用居中对齐。规则2-4-1

22、2：短日期显示格式必须为YYYY-MM-DD，长日期显示格式必须为YYYY-MM-DD hh:mm，时间采用24小时制。示例：1972年10月01日显示为： 1972-10-011972年10月01日上午8点05分显示为： 1972-10-01 08:051972年10月01日下午4点05分显示为： 1972-10-01 16:05规则2-4-13：页面上数据区域上的多行列表必须每个数据行相互用空行隔开，每个数据行都有自己的列标题，列标题行与数据行之间使用“space.gif”显示分隔线。（CSS: bluebg）示例：图表 7 规则2-4-13可视化控件规则2-5-1：页面上按钮区域的背景色

23、必须统一采用CSS中定义的值。（CSS: b_button, b_buttonspecial, b_buttondisable）示例：规则2-5-2：页面上按钮宽度必须不超过6个汉字，按钮文字数量不足4个的在文字前后各加一个空格，文字中间对称的加入空格以补足4个；超过4个的在文字前后加入对称的空格以补足6个，文字中间不加空格；超过6个以上的在文字前后各加一个空格。示例：规则2-5-3：当页面当中存在多个按钮的情况，并列二个同类型按钮之间的保留二个空格，并列有三个及三个以上按钮之间保留一个空格。规则2-5-4：多个按钮并列进行横排且居右对齐，同时“确定”按钮应放在最左面一个，“返回”按钮放在最右

24、面一个。示例：图表 8 规则2-5-4规则2-5-5：对当前页面的“提交”、“保存”及“确认”功能应统一使用“确定”字样。规则2-5-6：日期选择按钮使用“.”，当遇到需要选择“起始”、“终止”日期的情况，则选择按钮相应为“起始”、“终止”，并采用按钮统一规范。示例：图表 9 规则2-5-6.1图表 10 规则2-5-6 2规则2-5-7：页面上条件或数据区域内的按钮必须放置在右下方或右方。示例：图表 11 规则2-5-7规则2-5-8：日期按钮的选择后必须停留在系统日期上，并且不允许手工输入，除在设计文档中另有说明。规则2-5-9：页面提交后无论正常完成还是发生错误都必须转入提示信息页面，提

25、示页面上必须有返回按钮。规则2-5-10：在正常完成的提示页面点击返回按钮后，如果是从列表页面上通过按钮（新增/修改/删除）进入提交页面的，返回列表页面；如果是菜单连接的页面直接提交成功的，返回上一提交页面并且清空所有输入的内容。规则2-5-11：在提交发生错误的提示页面点击返回按钮后，必须返回提交的页面，并且提交前的页面所有输入/选择的内容必须保留。规则2-5-12：页面上必输项目必须在文本框后面显示”*”，”*”与文本框间保留一个空格。示例：图表 12 规则2-5-12规则2-5-13：页面中显示或输入带区号电话号码的，电话区号和电话号码之间用“-”分隔，并且当中不留空。规则2-5-14：页面上文本框后有按钮的（例如选择日期等），按钮与文本框间保留一个空格，如果按钮出现在必输项后面，则按钮在“*”号之后显示。示例：图表 13 规则2-5-14规则2-5-15：页面上计量单位必须跟在输入框后，计量单位与输入框间保留一个空格，如遇必输项需显示计量单位的，计量单位在“*”号之前显示。示例：图表 14 规则2-4-15规则2-5-16：页面上的只读、禁用内容必须使用不同样式。规则2-5-17：在校验页面所有未输入的必输项后，提