WebUI设计命名规范讲解.docx
- 文档编号:17780210
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:11
- 大小:30.06KB
WebUI设计命名规范讲解.docx
《WebUI设计命名规范讲解.docx》由会员分享,可在线阅读,更多相关《WebUI设计命名规范讲解.docx(11页珍藏版)》请在冰点文库上搜索。
WebUI设计命名规范讲解
WebUI设计命名规范
这套规范并非单纯的CSS、html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了,有点罗嗦,吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服务器端语言的,至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
WebUI设计命名规范
一.网站设计及基本框架结构:
1.Container
“container“就是将页面中的所有元素包在一起的部分,这部分还可以命名为:
“wrapper“,“wrap“,“page“.
2.Header
“header”是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。
这部分还可以命名为:
“page-header”(或pageHeader).
3.Navbar
“navbar“等同于横向的导航栏,是最典型的网页元素。
这部分还可以命名为:
“nav”,“navigation”,“nav-wrapper”.
4.Menu
“Menu”区域包含一般的链接和菜单,这部分还可以命名为:
“subNav“,“links“,“sidebar-main”.
5.Main
“Main”是网站的主要区域,如果是博客的话它将包含的日志。
这部分还可以命名为:
“content“,“main-content”(或“mainContent”)。
6.Sidebar
“Sidebar”部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为:
“subNav“,“side-panel“,“secondary-content“.
7.Footer
“Footer”包含网站的一些附加信息,这部分还可以命名为:
“copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。
不要使用表面形式的命名.
如:
red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:
搜索按钮:
btn-search
登录表单:
form-login
新闻列表:
list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停:
:
hover点击:
click已浏览:
visited
如:
搜索按钮:
btn-search、btn-search-hover、btn-search-visited
推荐网页制作规范
01命名规范
文件命名的原则:
以最少的字母达到最容易理解的意义。
一般文件及目录命名规范:
每一个目录中应该包含一个缺省的html文件,文件名统一用index.htm
文件名称统一用小写的英文字母、数字和下划线的组合
尽量按单词的英语翻译为名称。
例如:
feedback(信息反馈),aboutus(关于我们)
多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。
例如:
news_01.htm。
注意,数字位数与文件个数成正比,不够的用0补齐。
例如共有200条新闻,其中第18条命名为news_018.htm
图片的命名规范:
名称分为头尾两两部分,用下划线隔开。
头部分表示此图片的大类性质。
例如:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名:
banner;标志性的图片我们取名为:
logo;在页面上位置不固定并且带有链接的小图片我们取名为button;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:
menu;装饰用的照片我们取名:
pic;不带链接表示标题的图片我们取名:
title依照此原则类推。
尾部分用来表示图片的具体含义,用英文字母表示。
例如:
banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpg.
有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。
其它文件命名规范
js的命名原则以功能的英语单词为名。
例如:
广告条的js文件名为:
ad.js
所有的CGI文件后缀为cgi。
所有CGI程序的配置文件为config.cgi
02目录结构规范
目录建立的原则:
以最少的层次提供最清晰简便的访问结构。
目录的命名以小写英文字母,下划线组成。
(参照命名规范)
根目录一般只存放index.htm以及其他必须的系统文件
每个主要栏目开设一个相应的独立目录
根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片
所有JS,ASP,PHP等脚本存放在根目录下的scripts目录
所有CGI程序存放在根目录下的cgi-bin目录
所有CSS文件存放在根目录下style目录
每个语言版本存放于独立的目录。
例如:
简体中文gb
所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录
03尺寸规范
尺寸规范请根据您的实际情况调整:
页面标准按800*600分辨率制作,推荐尺寸为766*430px
页面长度原则上不超过3屏,宽度不超过1屏
每个标准页面为A4幅面大小,即8.5X11英寸
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px,另外120*90,120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K
04首页代码规范
首页的代码关键在head区,head区是指首页HTML代码的
和之间的内容。head区必须加入的标识
公司版权注释
---Thesiteisdesignedbyyourcompany,Inc03/2001--->
网页显示字符集例如:
简体中文:
繁体中文:
英语:
原始制作者信息
网站简介
搜索关键字
网页的css规范
网页标题
head区可以选择加入的标识
设定网页的到期时间。
一旦网页过期,必须到服务器上重新调阅。
21: 57GMT"> 禁止浏览器从本地机的缓存中调阅页面内容。 用来防止别人在框架里调用你的页面。 自动跳转。 5指时间停留5秒。 网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 CONTENT的参数有all,none,index,noindex,follow,nofollow。 默认是all。 收藏夹图标 JS调用规范 所有的javascript脚本尽量采取外部调用 CSS书写规范 所有的CSS的尽量采用外部调用 linka: visiteda: hovera: actived要按照顺序写)便于自己和他人阅读。 为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px的字号比较合适。 CSS推荐模板。 — p{text-indent: 2em;} body{font-family: "宋体";font-size: 9pt;color: #000000;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px} table{font-family: "宋体";font-size: 9pt;line-height: 20px;color: #000000} a: link{font-size: 9pt;color: #0000FF;text-decoration: none} a: visited{font-size: 9pt;color: #990099;text-decoration: none} a: hover{font-size: 9pt;color: #FF9900;text-decoration: none} a: active{font-size: 9pt;color: #FF9900;text-decoration: none} a.1: link{font-size: 9pt;color: #3366cc;text-decoration: none} a.1: visited{font-size: 9pt;color: #3366cc;text-decoration: none} a.1: hover{font-size: 9pt;color: #FF9900;text-decoration: none} a.1: active{font-size: 9pt;color: #FF9900;text-decoration: none} .blue{font-family: "宋体";font-size: 10.5pt;line-height: 20px;color: #0099FF;letter-spacing: 5em} --> body标识 为了保证浏览器的兼容性,必须设置页面背景 05形象设计规范 网站的CI整体形象包括下面几个要素 标志(logo) 网站必须有独立的标志 标志可以以网站中英文名称设计,也可以采用特别的图案。 原则是简单易记。 标志必须可以用黑白和彩色分别清晰表现 标志图片的名称为"logo_域名.gif",例如: logo_sina.gif 尽量提供标志的矢量图片 请尽可能在每个页面上都使用标志 标准色 网站应该有自己的标准色(主体色) 标准色原则上不超过两种,如果有两种,其中一种为标准色,另一种为标准辅助色 标准色应尽量采用216种web安全色之内的色彩 必须提供标准色确切的RGB和CYMK数值 请尽可能使用标准色 标准字体 网站应该定义一种标准字体(指logo上,图片上使用的字体) 标准字体原则上定义两种,一种中文字体,一种英文字体(不包括文本内容字体) 必须提供标准字体的名称和字库 请尽可能使用标准字体 06内容编辑规范 内容 必须遵守我国《计算机信息网络国际联网安全保护管理办法》的规定 任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息: (一)煽动抗拒、破坏宪法和法律、行政法规实施的; (二)煽动颠覆国家政权,推翻社会主义制度的; (三)煽动分裂国家、破坏国家统一的; (四)煽动民族仇恨、民族歧视,破坏民族团结的; (五)捏造或者歪曲事实,散布谣言,扰乱社会秩序的; (六)宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖,教唆犯罪的; (七)公然侮辱他人或者捏造事实诽谤他人的; (八)损害国家机关信誉的; (九)其他违反宪法和法律、行政法规的。 转载必须找到原出处,经联系后使用 标题 力求简短、醒目、新颖、吸引人。 正文 文章的段首空两格,与传统格式保持一致 段与段之间空一行可以使文章更清晰易看 杜绝错字、别字和自造字 简体版中不得夹杂繁体字 译名要按我国规范。 例如: singapore统一翻译"新加坡"不能用"星加坡" 全角数字符号(不含标点)应改为半角 07新技术使用规范 使用新技术原则是: 兼容浏览器,保证下载速度,照顾最多数的用户。 cookie用于识别、跟踪和支持访问者,通过cookie你可以了解用户的访问路径,收集和存储用户的喜好,但要考虑到用户关闭cookie的情况处理,非要用cookie,应提供全面的解决办法。 Java是一种跨平台的面向对象的编程语言,它在Web中的应用主要是JavaApplet,但是JavaApplet的下载速度较慢,谨慎使用。 在服务器端,最好打开SSI解析,但不要使用过多的SSI嵌套。 不能使用SSI时,可以用includeLibrary(包含库文件)代替,效果要差一些 Flash已经是较普遍的技术,推荐使用。 新网页制作建议采用XHTML规范,便于未来和XML接轨。 XML系列技术可以在服务器端使用,客户端暂时不推荐使用 非特殊要求,不推荐在网页上提供需要下载额外插件的多媒体技术 程序语言推荐使用PHP,JSP,Java等跨平台语言,不推荐CGI,ASP技术 08导航规范 导航要简单、清晰,建议不超过3层的链接 用于导航的文字要简明扼要,字数限制在一行以内 首页,各栏目一级页面之间互链,各栏目一级和本栏目二级页面之间互链 超过三级页面,在页面顶部设置导航条,标明位置 突出最近更新的信息,可以加上更新时间或New标识 连续性页面应加入上一页,下一页按钮 超过一屏的内容,在底部应有gotop按钮 超过三屏的内容,应在头部设提纲,直接链接到文内锚点 09数据库使用规范 服务器上有关数据库的一切操作只能由服务器管理人员进行。 程序中访问数据库时使用统一的用户、统一的连接文件访问数据库。 原则上每一个栏目只能建一个库,库名与各栏目的英文名称相一致,库中再包含若干表。 比较大的、重点的栏目可以考虑单独建库,库名与栏目的英文名称相一致。 数据库、表、字段、索引、视图等一系列与数据库相关的名称必须全部使用与内容相关的英文单词命名,对于一个单词难以表达的,可以考虑用多个单词加下划线(_)连接(不能超过四个单词)命名。 (参见命名规范) 不再使用的数据库、表应删除,在删除之前必须备份(包括结构和内容)。 1.UI设计规范的作用 接触UI设计这么长时间下来,很明白UI并不仅仅体现在界面设计上,更大一部分是关于可用性的设计。 而现在我觉得我所完成的UI设计规范的作用更多的是在提高公司各项目的产品化,而这一点也跟我们老大的期望保持一致(因为我们公司前一代的产品线在界面上实在是太不统一了),作为整体解决方案的不同部分,我觉得界面的规范统一从另一个方面也能提供用户的界面学习性,同时在外部宣传上也是一大优势。 (呵呵,说白了就是一个产品化规范,当然相对于公司落后的基础还有很长一段路要走) 2.UI设计规范的可用性(可执行性) 白鸦的文章里面提到了很多对于规范可用性的思考,这也是我最近在考虑的一个问题。 虽然现在规范出台了,项目组也都收到了,但是在后续的跟踪过程中却没有看到任何改善的痕迹。 其实大家都明白,开发人员往往只关注功能的实现,而没有按照规范设计界面的习惯。 所以在和经理的交流过程当中,他有提到规范因强制而成规范这个观点,而规范文档也需要提高其一定的规范性来保证执行。 不过,经理和我都认可一种理想化状态: 就是如果能够在开发前期按照具体规范设计完所有界面,而程序员只需要负责具体的功能实现。 但是,以后的升级修改的时候谁来保证呢? 如果是这样的话,UI设计规范的目标读者是不是只是针对界面设计人员呢? 3.UI设计规范的细化程度 也许和我现在所处的项目都是基于Windows平台的C/S系统有关系,所以我对于界面的认识往往主要集中在Windows窗体上。 ...
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WebUI 设计 命名 规范 讲解