如: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

　　登录条: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

　　以上命名规范仅供参考。如果大家对于Web UI设计规范有自己的见解，欢迎大家在此留言一同讨论，互相学习，共同进步:)

网页设计流程中推选的命名规范2，欢迎咨询合作。

查看更多宁波网站建设网页设计流程