本规范适用于UI界面的设计和制作过程,暂为试行,不排除有修改或增删的可能,实际应用时,本着严格遵守,但也要机动灵活的原则,活学活用,具体情况,具体分析。
规范包含5个方面的约束:
1. 用户界面设计
2. 目录结构
3. 原型(XHTML)
4. 样式表(CSS)
5. 脚本(JS)
用户界面设计
1. Logo设计中使用矢量格式,并禁止使用描边效果,注意Logo应用场合的多样性。
2. 文本颜色与背景色要有强烈对比,以便于阅读。
3. 每一个界面都要设计明确而清晰的导航。
目录结构
1. 首页命名为index.html
2. 建立Theme目录,样式的组织以“主题”为单位,默认在Theme目录下建立Default目录,和默认样式相关的文件都放在这个目录下,其中样式相关的图片要单独建立一个Pic目录,放在Pic目录里。如果系统有多套皮肤,则为每套皮肤建立目录,与Default目录同级,以主题名称来命名,下属目录结构与Default相同。如下图所示:
网页在引用样式时,只需调用Import.css,其它的样式通过Import.css来调用,即:Import.css只包含对其它样式的引用;同时建立Global.css,包含对全局标签的样式定义;其它的样式表,则要具体情况具体分析,但总的原则是:按功能模块来划分样式表的构建,比如系统有3个(表现形式上差异很大的)主要模块,则除建立Import.css和Global.css之外,还需要对每个模块建立单独的CSS文件,每个CSS文件包含对所定义模块的标签的具体样式定义。
3. 建立Js目录,在Js目录下建立Common.js,包含在页面中涉及的全局函数或事件,至于是否建立其它JS 文件则视具体情况而定。
4. 建立Files目录,将一些页面图片(划入内容的范畴,与主题无关)和其它的一些相关文件(如需用户下载的文件)放置到此目录下。
5. 建立Library目录,这个目录倒并非系统必须,如果你用DW编辑网页,则最好利用此目录建立库文件(相当于ASP中的Include文件),方便原型的维护;程序员也可以直接将此目录下的文件拿走做Include代码文件。
原型
1. 所有的页面都应该声明文档类型,如下所示:
2. 视具体情况,加入Meta标签(主要用于SEO):
3. 使用Link链接样式表,如果是多主题,则用Link的rel来区分。
4. 在页面中载入js/common.js,然后在页面的底部调用InitPage函数。
5. 每个页面有唯一的H1,可以是这个页面的主标题。
6. 页面的XHTML书写要有良好的语义和可扩展性。为关键的和不可重用的区块儿定义ID,为可重复利用的区块儿定义Class。
7. 为Body定义ID,相当于定义了命名空间,多页面元素的多样化展示很有好处。
8. 按层级层层定义元素的显示,比如第一层命名为Area,第二层命名为Panel…
9. 命名按照语义命名,不允许出现Left,Red等诸如此类的命名,命名规则为大写第二个单词的首字母,如:userInfo。尽量使用全称,也可以按照约定缩写一些单词。
10. 页面的编码,如果只考虑中文应用,则采用GB2312,如果考虑到国际化应用,则采用UTF8编码。
11. 灵活应用H2,H3,H4,H5,H6,作为每一个区块儿的标题。
12. 为所有的原型界面做一个界面说明,包括每个原型界面的文件名和目录结构。
样式表
1. gloabal.css中包含全局标签的样式定义(包括body,h1,form,img,ul,ol,dl…)。
2. 在模块单独的样式表中,分2个区域,一个区域是ID Sheet,一个区域是Class Sheet。其中ID Sheet区域包含所有ID的样式定义,Class区域则包含所有Class的样式定义。
3. 对主要的样式加注释,必要时可用一定符合区分
4. 尽量减小样式表的体积,能缩写就缩写,比如可以写“color:#FFF”,就不写“color:#FFFFFF”。
5. 尽量不使用不符合规范的CSS样式,比如只有IE支持的CSS滤镜。
6. 样式表中允许在顶部写入作者的署名,和更新日期。
7. 关于如何使用CSS Hack以让样式表适应所有的浏览器,请参见网上文章。
脚本
1. 将页面中可能涉及到的JS函数都放在common.js中,方便维护。
2. 页面中也可以视具体情况引入其它的JS文件。