修订历史记录

1、修订历史记录日期版本说明提出机构编写人及联系方式2005-11-171.0马俊2005-11-221.1关于css定义字体的顺序进行了修改马俊目录目录2一、UI设计原理3二、UI界面设计原则31.概括说明32.具体应用中的原则3三、Logo及颜色标准51.正确的Logo图标样式52.Logo标准色63.标准字体7四、使用网站标准来书写XHTML、HTML、CSS、JS81.head区代码规范82.body区代码规范93.用CSS定义元素外观164. JS交互规范19五、文件的命名21六、目录结构22七、易用性规范221.易用性原理222.易用性规范23八、文件的备份及历史工作的保存31UI的是

2、英文User Interface缩写，也就是用户与界面的关系。包括交互设计，用户研究，与界面设计三个方面。一、 UI设计原理UI设计原理：以用户为中心一个重要的人机界面设计原理是：是用户控制软件，而不是软件控制用户。它的含义如下：l 操作者是用户而不是电脑或者软件，你可以让电脑自动执行任务，但是这种自动执行应该允许用户选择和控制； l 用户有权选择个性化的界面，软件应该提供多样的界面或参数供用户选择； l 软件应该尽可能的提供交互和响应，确保命令简单、明显，结果是直接的，并且容易取消。 二、UI界面设计原则1.概括说明l 直接 设计优秀的软件，用户能够直接操作并得到需要的信息。用户应该能够在屏

3、幕上看到操作的效果，明显、明确的提示信息能够减少用户的困惑。l 一致 一致性可以帮助用户利用已有的知识，更快的学习和掌握新知识、新功能。一致性包括命令、信息窗、操作行为、界面的元素布局等。l 宽容 应该允许用户对软件进行探险，允许用户范错误。对危险的操作应该提供适当的警告信息，或者提供逆操作和恢复操作。l 反馈 对用户所有的操作做出反馈和响应，比如在一个长时间的处理动作中提供当前处理状态和说明。没有什么比毫无反应的屏幕更让用户担心了，实验证明，大部分的用户只能忍受几秒钟的“屏幕假死”状态。l 美化 一个美观漂亮、布局合理的界面是软件是非常重要的组成部分。对于用户接受软件有无法衡量的价值。l 简

4、单 一个界面应该尽可能的简单(而不是单纯)，易于学习和使用。2.具体应用中的原则l 一般适用原则简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯；方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等；用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程；实时帮助原则：用户需要能随时响应问题的用户帮助；提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的

5、常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义；界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互；界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感；l B/S构架适用原则页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量

6、，加快加载速度，方便用户体验；屏幕适应：Web界面需要适应不同用户屏幕大小；浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来的客户端不同效果；最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏；禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作；避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免；三、Logo及颜色标准在海虹以往的各种产品的设计中，出现了很多版本的Logo图标，这样做是不对的，违反了企业VI设计中的统一性、一致性，使企业的形象模糊不清，会使客户心中产生困惑，从而影响企业的可信度。

7、1.正确的Logo图标样式绘制坐标图：反白图：2.Logo标准色标志标准色依然沿用海虹控股的原有标志的色彩规范，色彩要求给人的感觉是专业、信任。交易平台系统中使用的标准色：海虹医药电子交易平台系统是一个专业的、用户类型多、使用频繁、访问量巨大的系统。色彩总体要求是给人以专业的感觉、长时间看界面视觉不产生疲劳。因此在web256安全色基础上降低饱和度和明度获得如下的标准色。3.标准字体印刷标准字体 中文标准字体为：方正超粗黑简体。在不同情况下可以使用黑体、方正大黑、文鼎特粗黑简、汉仪菱心体简、文鼎新艺体简等字体代替。Web标准色：#000000； 英文的标准字体为：Verdana。Web标准色：

8、#848684；四、使用网站标准来书写XHTML、HTML、CSS、JS1. head区代码规范l 为页面添加正确的DOCTYPE 很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：过渡型（Transitional ）严格型（Strict ）框架型（Frameset ）对于我们初级改善来说，

9、只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。Tip:你懒得输入上面过渡型代码的话，可以访问l 设定一个名字空间（Namespace） 直接在DOCTYPE声明后面添加如下代码：一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。l 声明你的编码语言 为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为

10、BIG5。网页显示字符集 例如：简体中文：繁体中文：英 语：l 关键字等META信息 允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在网站首页及各频道首页的html的之间应该加入Keywords 和Description 元标记，但仅使用在首页，其它页面并非必须。原始制作者信息 网站简介 搜索关键字 l 公司版权注释 l 所有的css尽量采取外部调用 l 网页标题 这里是你的网页标题 l 所有的javascript脚本尽量采取外部调用 2.body区代码规范l 用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属

11、性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：公司简介正确的写法是：公司简介同样的，改成，改成等等。这步转换很简单。l 给所有属性值加引号 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例：height=”100”，而不能是height=100。l 关闭所有的标签 在XHTML中，每一个打开的标签都必须关闭。就象这样：每一个打开的标签都必须关闭。HTML可以接受不关闭的标，XHTML就不可以。这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保

12、页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠“/”来关闭它们自己。例如：l 把所有和&特殊符号用编码表示任何小于号（），不是标签的一部分，都必须被编码为> 任何与号（&），不是实体的一部分的，都必须被编码为& 注：以上字符之间无空格。l 给所有属性赋一个值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： 必须修改为： l 用结构化元素代替无意义的垃圾 许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：句子一句子二句子三

13、如果我们采用一个无序列表代替会更好：句子一句子二句子三你或许会说“但是显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。l 关于表格给每个表格和表单加上id 给表格或表单赋予一个唯一的、结构的标记，例如接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记“menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别

14、的表现层处理。表格的嵌套 表格嵌套的原则是：嵌套层数不超过三，能不嵌套的尽量不要使用嵌套； 制作人员与美工设计合作时，应尽可能地将美工的设计图做拆分，以避免在网页中将所有内容嵌套在一个大的表格中。因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 （此标签仅限IE）标记，以便能够使这个大表格分块显示； 嵌套的表格大小尽量给定Width 和height数值，单位尽量为px，以便于浏览器加快解释的速度，如采用自适应性页面布局，可统筹考虑使

15、用%还是px单位。 当浏览时单元格中无内容时，在原代码中必须保证其代码不为空，可以使用 或者透明GIF图片填充； 表格中单元格不同数目时，建议使用和，以保证表格能够正确排列，并方便他人阅读表格代码； 对于表格一般不建议使用除center外的align属性，即 left或right ；不知道作何理解，我通常表格内的位置，都是用td的对齐属性以减少代码； Width 和height 的写法：一般情况下Width 和height 写在 的标签内；多行多列的表格，单元格的width写在每一列的第一个 标签内，不再书写height标签。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height

16、 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考； 注意在源代码中不应有这样的代码： 而应该是这样的： 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： l 关于图片图片问题主要存在size过大的问题，在这里我们把图片的优化归在代码优化一部分一起介绍而不另分一类，是因为图片优化与代码内容优化的目的是一样的。网页中一般应用两种格式的图片jpeg和gif，这两种图

17、片的应用很多人把握的并不是很好，jpeg适用于颜色比较多、构成比较复杂的图片（比如一些照片、渐变颜色等等），gif适用于颜色比较少、构成比较简单的图片（比如网站的logo、大的色块构成的图片等等）。Gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度；网页中插入的图形文件除程序自动调用的以外，必须指定其大小，即必须书写为，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象；带有连接的图形文件必须在样式表中设置border:0;，以避免图形被加入边框

18、颜色；为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：正确的写法：l 图标原则建立有意义的图标使用已有的图标(不要滥用新图标)在一个系统中使用不同的图标来表示相同的含义，或者使用一个图标来表示不同的多个含义都会使用户迷惑。如果不是一个新的含义需求，我们应该尽量使用已有的、已经有确定含义的图标。相对固定的位置相同含义/作用的图标应该放在屏幕相同的位置。含义明确好的图标

19、不需要作过多的解释，图形本身能够很清楚、容易的让人们理解到它的含义。相邻的图标之间不会产生歧义和混淆。色彩一般使用原则红：警告、错误、停止、禁止、危险绿：ok、允许、不危险黄：中等危险警告灰：不可用状态新建ICON前的可用性检查在设计一个新图标前，设计师应该了解其他更多的情况，比如：是否已经有现成的图标，这个图标将被放在什么系统中，这个系统原来的图标规范等等。下面的检查列表(checklist)帮助检查新图标的可用性。checklist是否已有与新图标类似的图标(在公司的任何产品中)?如果有，是哪一个? 这个已有的图标是否有合适的文字解释?是否需要修改? 能不能使用已有的图标?如果不能，为什么

20、? 新图标将放在哪里(菜单条、菜单树、列表),尺寸和颜色要求是什么? 新图标与原系统图标是否一致? 其它海虹的产品中是否使用了该图标，含义是否一致? 该图标是否需要一个特殊的颜色? 对图标的设计,你有没有一个详细的想法? 图标样稿是否通过用户测试?图标尺寸16x1622x2232x3248x4864x64128x128l 文字排版 文章分段请使用 标记，注意，一般情况下，请不要省略 结束标记； 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; ； 的CSS设置中请选定text-align: just

21、ify方式，以保证文字左右均对齐排列，尽量避免锯齿现象的发生（此方式仅限IE，最好少用，最好删除）； 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 来人工干预分段； 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号； l 字体、字号为了保证不同浏览器上字号保持一致，字号建议用点数（pt）和像素（px）来定义，使用pt单位时一般使用中文宋体的9pt和11pt，使用px单位时一般使用中文宋体12px 和14.7px，这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和

22、14.7px 的字号比较合适； 所有的字号都应该用样式表来实现，禁止在页面中出现 标记；中英文混排时，我们尽可能的将英文和数字定义为verdana 或arial 两种字体，中文字体定义为宋体；l 添加注释为了你的代码方便程序员以及其他设计人员阅读，请在代码后书写注释；style.css文件中，每一条样式都要注释，以明确说明该条样式的作用；functions.js文件中，每一个函数都要注释，以说明该函数的作用。不要在注释内容中使“-”“-”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: 用等号或者空格替换内部的虚线。3.用CSS定义元素外观 l 所

23、有的CSS的尽量采用外部调用 l 书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。l CSS缩写规范使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value

24、1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 边框(border)边框的属性如下：border-width:1px; border-style:solid; border-

25、color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds)背景的属性如下：background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0

26、 0; 语法是background:color image repeat attachment position;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 字体(fonts)字体的属性如下：font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family

27、:Lucida Grande,sans-serif; 可以缩写为一句：font:italic small-caps bold 1em/140% Lucida Grande,sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。列表(lists)取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以缩写为一句：list-style:squar

28、e inside url(image.gif);l CSS命名规范交易系统4.0中，为了避免与程序冲突，除了需要用js控制的对象采用id定义，其他样式全部采用class定义。命名原则小写：所有的定义都使用小写； 不使用任何前缀，也不要使用任何下划线。 尽量使用有明确语义的英文，原则上不使用拼音。 div的命名以系统模块+具体功能方式，例如：数据系统的标志条定义为：datasystemlogobar 允许缩写定义，例如数据系统：datasystem缩写为ds，但请在文件头部注释说明； 一些命名惯例导航:nav 菜单:menu 登录条:loginbar 标志条:logobar 数据:data 标题

29、:titlebar 按钮:buttonbar 版权:copyright 广告:ad 搜索:search 表格索引：pageindex 状态：state 图例：legend4. JS交互规范l 一般交互原则一致性：菜单选择、数据显示以及其它功能都应使用一致的格式； 提供有意义的反馈；执行有较大破坏性的动作前要求确认； 在数据录入上允许取消大多数操作； 减少在动作间必须记忆的信息数量；在对话、移动和思考中提高效率；允许用户非恶意错误，系统应保护自己不受致命作物的破坏；按功能对动作分类，并按此排列屏幕布局，设计者应那里提高命令和动作组织的内聚性 提供语境相关的帮助机制；l 信息显示原则只显示与当前用

30、户语境环境有关的信息； 不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息； 使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源； 产生有意义的出错信息； 使用缩进和文本来辅助理解； 使用窗口分隔控件分隔不同类型的信息； 高效地使用显示器的显示空间；l 数据输入原则尽量减少用户输入动作的数量； 维护信息显示和数据输入的一致性； 交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持； 在当前动作的语境中使不合适的命令不起作用； 让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；

31、 为所有输入的动作提供帮助； 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息；l 向导（WIZARD）使用原则对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。l 颜色使用原则统一色调，针对软件类型以及用户工作环境选择恰当色调。 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等；如果没有自己的系列界面，采用标准界面

32、则可以少考虑此方面，做到与操作系统统一，读取系统标准色表；色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，如!，?着重号，以及图标等；颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试；遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色；整个界面色彩尽量少的使用类别不同的颜色；l 字体使用原则使用统一字体，字体标准的选择依据操作系统类

33、型决定； 中文采用标准字体，“宋体”，英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常；字体大小根据系统标准字体来，例如 MSS字体8磅，宋体的小五号字(9磅）五号字（10.5磅)；所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况；l 系统大小字体属性改变的处理Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。 但是由于常常方便使用点阵作为

34、窗口设计单位，导致改变大字体后，出现版面混乱的问题。 这个情况下，应该做相应处理：写程序自动调节大小，点阵值乘以一个相应比例；全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦；l 控件使用原则不要错误使用控件，例如： 使用Button样式做TTable的功能，拿主菜单条显示版权信息；统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映；一个控件只做单一功能，不复用 。 很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解； 控件布局屏幕不能拥挤 拥挤的屏幕让人难以理解

35、，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40，而分组钟覆盖度不应该超过62 ；让人看上去，不能太拥挤，也不能太松散； 整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距； 区域排列 一行控件，纵向中对齐, 控件间距基本保持一致； 行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)； 当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域； 数据对齐要适当 说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其； 纵向控件宽度尽量保持相通。并左对齐； 例

36、如金额等字符穿应根据小数点对齐，或者右对齐； 有效组合 逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想光的项目应当风格开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域； 窗口缩放时，控件位置、布局： 为了使界面不出现跑版或者难看的局面，解决方法：固定窗口大小，不允许改变尺寸， 改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变； 五、文件的命名l 所有文件的命名只能由小写英文字母，数字和下划线组成，绝对禁止包含汉字、空格和特殊字符；l 文件的命名必须能表明文件的含义，不要用无意义的数字或字母；l 尽量使用有明确语义的英文，原则上不使用拼音；l 所有的H

37、TML页面的后缀名用html，不要用htm；l 图片的命名格式为：类型+意义+后缀，例如：menu_about.gif；六、目录结构l 在网站根目录中开设images、js、css三个子目录，images目录中放网站所有页面都要用到的公共图片（包括*.swf），例如公司的标志、banner 条、菜单、按钮等等；js 子目录中放外调的JavaScript文件；css 子目录中放外调的样式表文件； l 根目录下默认存在一个index.html文件作为网站的首页；l 千万不要把图片和flash的源文件（*.psd、*.fla）放在images目录中；l 不要把一些网页制作过程中的临时文件放在目录中提

38、交任务，比如*.bak文件；七、易用性规范1.易用性原理在阅读详细细节规范前。推荐您先了解易用性的一些基本原理。 l 为用户设计任何软件的目的都是帮助特定的一组用户完成工作，所以我们首先要考虑的是谁是你的用户； 这个软件能够让他们做什么。 你必须熟悉你的用户，理解他们的需求，知道他们必须达到的目标。l 不要限定你的用户基础使你的软件适合特定用户中所有人，包括色盲；残疾；听力障碍者； 非本国语言使用者； l 国际化和本地化国际化是指软件界面和功能应该适合不同语言环境；本地化是指可以将所有提示信息、标签、过程界面用本地语言替换。 l 使您的软件保持一致使您的软件外观和操作与其他软件保持一致，这是最

39、重要的易用性基本原理，却常常被忽视。一致性可以帮助用户用以往的软件使用知识更快的接受和学习新软件l 让用户知道软件正在做什么及时给用户反馈信息，让用户总是知道你的软件在做什么。不要让他们猜测系统状态，l 保持简单美观让你的操作界面保持简单、有效，不要放过多的按钮、菜单、图标。 l 把控制权交给用户电脑是为人服务的，应该允许人们随时随地运行或暂停软件。 l 允许用户犯错我们都会犯错误。软件应该允许人们恢复他们的操作。对不可恢复的操作要提前警告。2.易用性规范易用性按钮名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道

40、该界面的功能并进行相关的正确操作。 完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式；完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离； 按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题；界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能；界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置；同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示； 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab ；默认按钮要支持Enter即选操作，即按Enter后自动执行默认按钮对应操

41、作；可写控件检测到非法输入后应给出说明并能自动获得焦点； Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式； 复选框和选项框按选择几率的高底而先后排列；复选框和选项框要有默认选项，并支持Tab选择；选项数相同时多用选项框而不用下拉列表框； 界面空间较小时使用下拉框而不用选项框；选项数较少时使用选项框，相反使用下拉列表框；专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼；规范性通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就

42、越好。小型软件一般不提供工具厢。 常用菜单要有命令快捷方式；完成相同或相近功能的菜单用横线隔开放在同一位置； 菜单前的图标能直观的代表要完成的操作； 菜单深度一般要求最多控制在三层以内； 工具栏要求可以根据用户的要求自己选择定制； 相同或相近功能的工具栏放在一起； 工具栏中的每一个按钮要有及时提示信息； 一条工具栏的长度最长不能超出屏幕宽度； 工具栏的图标能直观的代表要完成的操作；系统常用的工具栏设置默认放置位置；工具栏太多时可以考虑使用工具厢； 工具厢要具有可增减性，由用户自己根据需求定制； 工具厢的默认总宽度不要超过屏幕宽度的1/5；状态条要能显示用户切实需要的信息，常用的有： 目前的操作

43、、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比；状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄； 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感； 菜单和状态条中通常使用五号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调；右键快捷菜单采用与菜单相同的准则；帮助系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。 帮助文档中的性能介绍与说明要与系统性能配套一致；打包新系

44、统时，对作了修改的地方在帮助文档中要做相应的修改； 操作时要提供及时调用系统帮助的功能。常用F1；在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置，也就是说帮助要有即时针对性；最好提供目前流行的联机帮助格式或HTML帮助格式； 用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词；如果没有提供书面的帮助文档的话，最好有打印帮助的功能。 在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式；合理性屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。 父窗体或主窗体的中心位置应该在

45、对角线焦点附近； 子窗体位置应该在主窗体的左上角或正中； 多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜；重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置； 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置，横排开头或最后与竖排最后为易点位置；与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)；对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会；非法的输入或操作应有足够的提示说明；对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待；提示、警告、或错误说明应该清楚、明了、恰当；美观与协调

46、性界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度；布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间；按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置； 按钮的大小要与界面的大小和空间要协调； 避免空旷的界面上放置很大的按钮； 放置完控件后界面不应有很大的空缺位置； 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体； 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等，常用色考虑使用Windows界面色调；如果使用其他颜色，主色要柔

47、和，具有亲和力与磁力，坚决杜绝刺目的颜色；大型系统常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等。 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方； 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放；对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能； 通常父窗体支持缩放时，子窗体没有必要缩放；如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等；菜单菜单是界面上最重要的元素，菜单位置按照按功能来组织。 菜单通常采用“常用-主要-次要-工具-帮助”的位置排列，符合流行的Wi

48、ndows风格。 常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍； 下拉菜单要根据菜单选项的含义进行分组，并且按照一定的规则进行排列，用横线隔开； 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列；没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边； 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列； 菜单深度一般要求最多控制在三层以内；对常用的菜单要有快捷命令方式，组合原则见8； 对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式即只有需要的菜单才显示最好；菜单前的图标不宜太大，与字高保持一直最好； 主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好； 主菜单数目不应太多，最好为单排布置；独特性如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 安装界面上应有单位介绍或产品介绍，并有自己的图标；主界面，最好是大多数界面上要有公司图标；登录界面上要有本产品的标志，同时包含公司图标； 帮助菜单的“关于”中应有版权和产品信息；公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装