webui设计(网页设计)命名规范

《webui设计(网页设计)命名规范》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、WebUI设计（网页设计）命名规范，关键词是网站产品，产品设计,最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下來半天，所以和大家分享一下我Z前总结的一套WebUI设计命名规范，也就是网站用户界面设计（俗称网页设计）命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程屮的命名规范。（好久没写文章了，有点罗嗦，吼吼~）。首先我是出于公司几位美工的设计效果图源文件没冇对图层命名而开始考虑总结一套的，还冇一个原因就是网上大多命名规范都是关于编码的，也就是那些css、htm

2、l、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而月•前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于I才I队的协作和工作效率肯定是有好处的。这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。WebUT设计命名规范-•网站设计及基木框架结构:menu1.Container“container“就是将页面屮的所有元素包在一起的部分，这部分述可以命名为：“wrapper“，“wrap“，upage2.Header"header"是网站页而的头部区域，一般来讲，它包含网站的logo和一些

3、其他元素。这部分述可以命名为："page-headern（或pageHeader）.1.Navbeir"navbar"等同于横向的导航栏，是最典型的网页元索。这部分还可以命名为：“nav”，^navigation”，“nav-wrapper”.2.Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为：“subNav“，“links“，^sidcbar-main"・3.Main“Main”是网站的主要区域，如果是傅客的话它将包含的日志。这部分还可以命名为：“content“,"main-content”（或"mainContent''）。4.Sidebar"Sidebar"部分可

4、以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为：“subNav“，uside-panel“，usecondary-content“・5.FooteruFootern包含网站的一些附加信息，这部分还可以命名为："copyright—.需要注意的几点：1•尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.如：red/left/big等。2.组合命名规则：［元素类型］-［元素作用/内容］如：搜索按钮:btn-search登录表单：form-login新闻列表：list-news3.涉及到交互行为的元素命名：凡涉及交互行为的元

5、索通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则：鼠标悬停：：hover点击：click已浏览：visited女口：搜索按钮：btn-scorch、btn-scorch-hover、btn-scorch-visited三.Photoshop图层结构规范:Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名（图层+编号）。第一级图层结构如下图：」SJMx1iB道1路径一学网w/w.xue5.com：動忙_Iheaderw)_rnainWrap_Ifooter»口bg第二级结构图例（医院网站）:◎◎▼_Jheader►口n

6、av►口logos02sOlT设为首页1加入收藏ITEnglish—flag一）mainWrap▼L_1main_JdemoA_Jnews_

7、healing_

8、sidebar-main於search_1about_Jdoctors0▼LJfooterTCopyright2008BeijingHos...◎

9、

10、bg第三级结构图例及效果图对比（医院新闻栏目）:学网www.xue5.corn•兀夕为八旬老人成功实施新疆生产建设兵团农十三师红星医院为一位骨折并伴有肺气肿84岁….•为八旬老人成功实施股骨头置换术•两科密切协作共同研讨“AS0应对策略”■2008年北京医院工会创逹“和谐职工小家...

11、•关于裕丽等23位同志转正定职的舅癬站&回““网.236z.com效杲图newsaei骨科新闻学网^Aw.aue5.corri1ico+更爹

12、-

13、title-bg匚］piCA▼为八旬老人成功实…新疆生产建设…，为八旬老人成功…HbgKoalirbn图层命名结构WebUI设计（网页设计）命名规范，关键词是网站产品，产品设计,川・常用命名汇总：页头:header登录条:loginbar标卷：logo侧栏:sidebar广告条