这套规范并非单纯的CSS、html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。首先作者是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服务器端语言的,至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套Web UI设计命名规范,是总结自我的一些Web设计经验,和国外设计师推荐的命名方式。
一.网站设计及基本框架结构:
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
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如:header,mainWrap,footer,bg.
第二级结构图例(医院网站):
header:nav,logo,s01,s02,“设为首页|加入收藏”文字层,“English”文字层,flag.
mainWrap:main(demo,news,healing),sidebar-main(search,about,doctors).
footer:“版权信息……”文字层,line.
第三级结构图例及效果图对比(医院新闻栏目):
news:“骨科新闻”文字层,“新闻”图标,“+更多”文字层,title-bg,newpic,“新闻标题”文字层,“新闻正文”文字层,line
四.常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考。
分享到:
相关推荐
用户界面设计指南,为开发人员提供界面设计和开发的指南,引导开发人员设计简洁美观的用户界
由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付 诸东流。 目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,本文总结的十条规则是应该被重视的...
界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏...
用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南 用户界面设计指南
界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范
界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范界面设计规范
iPad软件界面设计基本规范,iPad设计
软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户界面设计讲座.ppt软件用户...
中南民族大学用户界面设计的实验报告,可供参考
iPad软件界面设计基本规范.pdf
用户界面设计--有效的人机交互策略
APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、...
UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图
SourceSafe使用规范 编码规范 界面设计规范 软件安装盘制作规范 项目组内部守则 数据库命名规范
有关Web软件用户界面设计的指南一类内容
界面设计规范界面设计规范
规范IT软件开发界面标准,WEB界面设计
静态网页制作与网站赏析\网站赏析第3讲-网页界面设计
软件界面设计规范,编码规范。微软发布的软件界面设计规范