WebUI制作规范

《WebUI制作规范》由会员分享，可在线阅读，更多相关《WebUI制作规范（38页珍藏版）》请在装配图网上搜索。

1、Web UI制作规范2012-8-17:初稿深圳发票网提供：目录一、Web 目录结构规范 二、Web UI设计命名规范2.1Web界面设计最佳尺寸2.2网站设计及基本框架结构2.3命名规则注意几点2.4常用命名汇总三、Web UI图片规范 3.1 web UI图片命名规范 3.2 web UI 图片处理规范 3.3 web UI 图片优化规范四、Web基本框架布局规范 4.1常用到的Div和Table 4.2页面信息交互五、CSS样式书写规范及优化5.1 CSS文件命名规范5.2常用类/ID命名规范5.3结构与样式分离5.4文档的结构化书写5.5注释书写规范5.6 CSS样式属性代码优化缩写5

2、.7 CSS各浏览器解决不兼容问题六、文字编排与设计七、常用的一些工具八、需要关注的体验理念.九、其他规范.十、seo优化规范 .一、 Web 目录结构规范：l 目录建立的原则：以最少的层次提供最清晰简便的访问结构。 l 目录的命名以小写英文字母，下划线组成。l 根目录一般只存放index.htm以及其他必须的系统文件 l 根目录下的images用于存放各页面都要使用的公用图片。l 所有JS等脚本存放在根目录下的scripts或js目录 l 所有CSS文件存放在根目录下style或css目录 l 多语言版本存放于独立的目录。例如：简体中文存放在cn目录下， 繁体中文存放在 tw目录下，英文存放

3、在en目录下等。 l 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录下。二、 Web UI设计命名规范：2.1 Web 界面设计最佳尺寸960网格系统web界面设计最佳尺寸目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。2.2 网站设计及基本框架结构l Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“,

4、 “page“.l Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).l Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.l Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.l Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “con

5、tent“, “main-content” (或“mainContent”)。l Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.l Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“2.3命名规则注意几点l 尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.如:red/left/big等。l 组合命名规则:元素类型-元素作用/内容如:搜索按钮: b

6、tn-search、登录表单:form-login、新闻列表:list-news。l 涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited2.4常用命名汇总页头header、top登录条loginbar标志logo侧栏sidebar广告条banner导航:nav子导航:subNav菜单:menu子菜单:subMenu下拉菜单:dropMenu工具条: toolbar表

7、单:form栏目:column箭头:arrow搜索:search搜索按钮:btn-search滚动条:scroll内容:content标签页:tab文章列表:list小技巧:tips栏目标题:title链接:links页脚:footer、end服务:service热点:hot新闻:news下载:download注册:Register 、reg状态:status按钮:btn上传:upload登陆:login投票:vote合作伙伴:partner版权:copyright网站地图: sitemap三、 Web UI图片规范：3.1 web UI 图片命名规范 l 图片名称分为头尾两两部分，用下划线隔

8、开。l 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上做栏目链接的图片我们取名：menu ；不带链接表示标题的图片我们取名：title ；装饰用的照片我们取名：pic ；依照此原则类推。l 尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_lntu.gif logo_lntu.gif button_next.gif menu_aboutus.gif title_news.gif pic_people.jpgl 有

9、onmouse效果的图片，两张分别在原有文件名后加_on和_off命名。l 多语言的图片应放到多语言目录下3.2 web UI图片处理规范l 在图标的制作上应采用简捷，色彩明快的图标；在选用单色图标时应根据本栏目的色彩进行搭配。 l 图标存储为GIF格式(除个别情况外)，尽量采用16色、填充色或单色。 l 图片依情况存成GIF或JPEG格式，原则上色调单一的图片存成GIF格式，色彩复杂、层次丰富的存在JPEG格式。 l 设计时不得用15K以上的图片，如图片过大可以考虑采用图片分割的办法。 l 内容图片、导航图片的border设为0，并要求加上alt说明。 l 普通图片不必加alt说明，但如果有

10、链接要把border设为0。l 公用图片或有可能更换的图片不要 3.3 web UI图片优化规范GIF格式优化l GIF 是用于压缩具有单调颜色和清晰细节的图像（如艺术线条、徽标或带文字的插图）的标准格式；l 压缩时，如果色系较少，颜色少于256，调色板可以选择为“精确”，不要选“失真”。 l 一般情况，调色板选择“最合适”，最大颜色数选择“256”。如果色彩稍多于256色，可将抖动设为“100%”。 l 为防止边缘出现锯齿，不需要透明的时候，尽量不透明。l 压缩工具：Adobe Image Ready、Image Optimizer压缩前 12K压缩后6KJPG格式优化l JPEG 是用于压

11、缩连续色调图像（如照片）的标准格式。l 压缩时在图像质量和文件尺寸之间找到平衡点l 80%的压缩率是比较合适在网页中使用的l 压缩工具：Image Optimizer压缩前 65.4K压缩后10.6K其他优化建议如果图像不包含任何信息,仅是作为装饰使用，请将改图片从HTML中分离出来。l (HTML代码)l .pic background: url (.) (css代码)l 利用css将辅助图片作为背景使用。l 图像作为内容时定义l 若作为内容放在HTML代码里则必须制定高度和宽度（需要动态更新，并且图片大小不固定的除外）。 原因：减少页面reflow次数，加快显示。四、 Web基本框架布局规

12、范：Web基本框架布局规范 4.1常用到的Div和Table 采用CSS+DIV对网站重构日趋被大家重视起来，有以下优势： 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。 2：提高搜索引擎对网页的索引效率 用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。 3：提高页面浏览速度 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。 还有因为标签是要等下载好以后才可以显示的，所以整个网页是一下子跳出来的，这样让人感觉起

13、来显示速度非常的慢。而使用css+div, 标签不用等下载好就可以显示里面的内容的,所以让人感觉打开网页的速度非常之快。 4：易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。 从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。 CSS+DIV所以成为目前网页布局主流。Table最大缺点是代码臃肿，你至少需要写下 这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，而 Div 只需 一个标签。 页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。 不利于搜索引擎优化：搜索引擎喜欢内容与

14、修饰分开。 可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。 不够语义（Semantic）：我们需要语义的 Web。 一般table 只用做于数据处理。4.2页面信息交互 4.2.1操作结果确认在提交数据，或是载有数据的页面关闭，或其他需要和用户进行确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：l 提示确认输入信息正确：弹出对话框，并将已填写的内容列出，要求用户确认内容的正确性，给出“确定”和“取消”的选择按钮；l 提示确认数据更改是否保存：弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出“是

15、”和“否”的选择按钮；l 提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出“是”和“否”的选择按钮；l 确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除的操作，给出“确定”和“取消”的选择按钮； 4.2.2其他规则对于信息交互过程中，其他需要遵守的规则有：l 重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；l 容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；l 与正在进行的操作无关的按钮应该加以屏蔽，例如：按钮背景为灰色显示；l 对可能造成数据无法恢复的操作必须提供确认信息，给

16、用户放弃选择的机会；l 非法的输入或操作应有足够的提示说明；l 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待； 4.2.3页面信息提示在web页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：l 警告信息l 禁止信息l 操作执行成功信息l 操作执行失败信息l 错误信息l 帮助信息l 提示信息这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式，对话框的页面结构如下图：图标区按钮 1按钮 2标题区提示信息区l 标题区：简要给出此次提示信息的性质，例如：警告：操作非法！l 图标区：给出和此次提示信息性质匹配

17、的图标；l 提示信息区：给出此次提示信息的具体内容；l 按钮区：给出供用户进行选择的按钮；对于对话框的背景颜色，要求和系统的整体风格选取的颜色一致，而右上角的操作区只保留关闭一个可操作功能，最小化和最大化的功能将不显示。对应采用的图标的图例为：警告信息：禁止操作信息：操作成功信息：操作失败信息：错误信息：帮助信息：提示信息：提示信息内容要求：l 提示信息中如有标点符号，统一为全角符号；l 提示信息如有主语，统一为您；l 在重要或复杂的操作成功后，给予提示信息；l 有后续操作的操作在成功后，也需给予提示信息，说明当前的状态。l 提示信息不宜太长，宽度应不超过当前窗口宽度的1/2，当超过此比例时，

18、请视具体情况进行换行；l 当功能按钮为图片按钮时，光标停留需给予浮动提示信息；4.2.4键盘响应支持由于用户有时候还需要结合键盘进行操作，所以页面需要提供一些简单的键盘支持，例如：“Esc”、“Enter”、“Tab”“Space”，系统应对这些键值作出响应。其中：l Esc，“取消”当前操作；l Enter，“确认”或进行下一步操作或提交；l Tab、或Shift+tab能够在页面元素中按照一定次序切换焦点，遵循从左上至右下的原则；其他快捷键的支持，需要根据项目的实际情况来定义。五、 CSS样式书写规范及优化：5.1CSS文件命名规范全局样式：global.css；框架布局：layout.c

19、ss；字体样式：font.css；链接样式：link.css；打印样式：print.css；5.2常用类/ID命名规范页眉：header内容：content容器：container页脚：footer注释：note（更多参照2.4常用命名汇总）1、常用类的命名规则：应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”2、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要

20、表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;5.3结构与样式分离：在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。5.4、文档的结构化书写：页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：首页介绍服务/*=主导航=*/#mainMenu width:100%;height:30px;background:url(

21、images/mainMenu_bg.jpg) repeat-x;#mainMenu ul li float:left;line-height:30px;margin-right:1px;cursor:pointer;/*=主导航结束=*/5.5注释书写规范1、行间注释：直接写于属性值后面，如：.searchborder:1px solid #fff;/*定义搜索输入框边框*/background:url(./images/icon.gif) no-report #333;/*定义搜索框的背景*/2、整段注释：分别在开始及结束地方加入注释，如：/*=搜索条=*/.search border:1

22、px solid #fff;background:url(./images/icon.gif) no-repeat #333;/*=搜索条结束=*/5.6 CSS样式属性代码优化缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：#mainMenu background:url(./images/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;#

23、subMenu background:url(./images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu background:url(./images/bg.gif);border:1px solid #333;width:100%;overflow:hidden;#mainMenu height:30px;#subMenu height:20px;2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.se

24、arch background-color:#333;background-image:url(./images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;.search background:#333 url(./images/icon.gif) no-repeat 50% 50%;3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn margin-top:10px;margin-right:8px;margin-bot

25、tom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;则可缩写为：.btn Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;缩写为：.btn margin:10px 5px;而当

26、上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：.btn margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;缩写为：.btnmargin:10px;4、颜色值的缩写：当RGB三个颜色值数值相同时，可缩写颜色值代码。如：.menu color:#ff3333;可缩写为:.menu color:#f33;5.7 CSS各浏览器解决不兼容问题因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css

27、的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。1、 IE6、IE7、Firefox之间的兼容写法：写法一：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;根据上述表达，同一类/ID下的CSS hack可写为：.searchInput background-color:#333;/*三者皆可*/*background-color:#666!important; /*仅IE7*/*backgr

28、ound-color:#999; /*仅IE6及IE6以下*/一般三者的书写顺序为：FF、IE7、IE6.写法二：IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：.searchInput background-color:#333;/*通用*/_background-color:#666;/*仅IE6可识别*/写法三：*+html 与 *html 是IE特有的标签, Firefox 暂不支持。.searchInput background-color:#333;*html .searchInput background-color:#66

29、6;/*仅IE6*/*+html .searchInput background-color:#555;/*仅IE7*/屏蔽IE浏览器：select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。*:lang(zh) select font:12px !important; /*FF的专用*/select:empty font:12px !important; /*safari可见*/IE6可识别：这里主要是通过CSS注释分开一个属性与值，注释在冒号前。select display /*IE6不识别*/:none;IE的if条件hack写法：所有的IE可识别： Only IE

30、 只有IE5.0可以识别: Only IE 5.0 IE5.0包换IE5.5都可以识别: Only IE 5.0+ 仅IE6可识别: Only IE 6- IE6以及IE6以下的IE5.x都可识别: Only IE 6/+ 仅IE7可识别: Only IE 7/- 2、清除浮动：在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。select:after content:”.”;display:block;height:0;clear:both;visibility:hidden;六、 文字编

31、排与设计6.1、文字的编排与设计总体原则：提高文字的辨识性和页面的易读性 文字大小: 建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。 需突出的内容部分、新闻标题、栏目标题等多使用14号字体 广告内容、辅助信息或介绍性文字等多使用12号字体 避免大面积使用加粗字体特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗2 文字颜色： 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色

32、前，首先要明确一这个判断的衡量标准。 我们是以Ps的颜色系统为讨论基础的。 2.1灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。建议使用：建议使用：2.1深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。当色相越接近天蓝时，（B）值应该越低。很多门户网站使用蓝色为文字颜色，常用的有建议使用天蓝色

33、的： 纯蓝色： 2.3其他颜色当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。 2.4英文字体的使用 英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近 系统自带并能与汉字匹配的点阵字比较:Arial字体优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐缺点:大写I与小写L无法区分下划线:Tahoma字体优点:字宽

34、较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字方块字点阵字；能区分大写I与小写L缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐下划线:下划线:Verdana字体优点:没有下划线贴边的问题,能区分大写I与小写L缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐下划线:应用案例七、 常用的一些工具：l Icon 素材搜索l CSS在线优化及压缩：l HTML5和CSS3工具资源汇总l Web前端开发必备手册下载l 300+Jquery, CSS, MooTools 和 JS的导航菜单资源l 用户体验八、 需要关注的体验理念 产

35、品设计口碑传播少即是多兼容性无所不用其极关注性能和速度抓住高端用户大气的设计满足用户个性化需求寻求差异 运营 不稳定会功亏一篑 跟踪用户定位问题 抗灾容灾能力 交互设计 Dont make me think 符合用户习惯与预期 做适时的提醒 不强迫用户 选择最佳方案 操作便利 视觉设计 传播产品理念 大气成熟，干净整洁，工具化 规范与统一 重点突出 防止不恰当的低龄化九、 其他规范l js的命名原则以功能的英语单词为名。例如：广告条的js文件名为：ad.js.l 所有的CSS的尽量采用外部调用.l 所有的javascript脚本尽量采取外部调用.l Web 页面编码一律统一用 UTF-8编码：

36、UTF-8是世界性通用代码，也完美的支持中文编码，如果我们做的网站能让国外用户正常的访问，就最好用UTF-8。l 字体符号用像素px来定义，px使用中文宋体12px 和14px黑体字体采用：Arial, Helvetica, sans-serif,宋体。l 所有连接使用相对路径/images/，切记不可使用绝对路径。如：./images/l 所有文件，目录，图片全部以小写字母命名，禁止用中文命名。l 清理无效的链接和图片十、 Seo搜索引擎优化规范 SEO是Search Engine Optimization的缩写，用英文描述是to use some technics to make your

37、 website in the top places in Search Engine when somebody is using Search Engine to find something，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。定义：指遵循搜索引擎的搜索原理，对网站结构、网页文字语言和站点间互动外交略等进行合理规划部署，以改善网站在搜索引擎的搜索表现，进而增加客户发现并访问网站的可能性的这样一个过程。遵循下面的方法可以增加页面的搜索引擎友好度：1. 站点结构设计：搜索引擎更喜欢有好的网页结构，无误的代码和明确导航的站点；2. 在元标签(meta 标签)放入关键词，密度最好在5-20% 之间；3. 有规律的更新页面内容；4. 良好的友情链接；5. 明智的选择域名，尽量包括关键词；6. 写适宜长度的文章，太短的文章不能获得较高的排名，同时避免内容的重复；7. 目录的数量越多，搜索引擎搜索的也就越全面8. 将站点提交到搜索引擎，更快的方法还是得到已经被搜索引擎收录的站点的链接；9. 关键词应该出现在网页标题标签里面；10. URL里面有关键词，即目录名文件名可以放上一些关键词；11. 在网页导出链接的链接文字中包含关键词；12. 图像ALT标签可以放入关键词；13. 整个文章中都要包含关键词，但最好在第一段第一句话就放入。