WEBUI设计命名约定，也就是web用户界面设计(web设计)命名约定。
此规范不仅仅是CSS、html或JavaScript命名约定，还包含使用PhotoShop等设计工具进行web设计时的许多命名约定。
虽然许多图稿的设计效果图源文件都没有命名图层的习惯，但internet上的大多数命名约定都是针对css、html、js和某些服务器端语言的，而大多数命名约定都是针对设计的虽然设计师还是技术团队的成员，但是前端开发工程师需要使用设计师效果图的源文件，因此统一命名规范和设计规范无疑有助于团队的合作和工作效率。
网页设计命名约定
一.网站设计和基本框架结构：
1.Container
“容器”是页面中所有元素的集合，也可以将其命名为：“wrapper”、“wrap”或“page”。
2.Header
“header”是网站页面的头部分，通常包含网站徽标和其他元素。 此部分还被命名为：“page-header”(或pageHeader )。
3.Navbar
“navbar”与横向导航栏相同，是最典型的网页元素。 此部分还被命名为：“nav”、“navigation”和“nav-wrapper”。
4.Menu
“菜单”区域包含常用链接和菜单，此部分还被命名为：“subNav”、“链接”和“sidebar-main”。
5 .主要
“Main”是网站的主要区域，如果是博客，则是其中包含的日志。 也可以将此部分命名为：“content”、“main-content”(或“mainContent”)。
6.Sidebar
“Sidebar”部分可以包含站点的辅助内容，包括最近更新的内容列表、站点介绍和广告元素…本部分包含：“subNav”、“side -”
7.Footer
“Footer”包含网站的其他信息，此部分也被命名为：“版权”。
2 .需要注意的地方：
1 .尽量考虑要素本身的作用或命名“意图”，力求语义化。 请不要使用表面上的名字。
例如：red/left/big等。
2 .组合命名约定：
元素类型-元素的作用/内容
例如：搜索按钮：btn-search
登录表单：form-login
新闻列表：列表新闻
3 .互动所涉要素命名：
交互中涉及的元素通常具有不同的样式，例如悬停、单击和浏览。 命名请参照以下规则：
鼠标悬停：hover单击： click已浏览：已查看
例如：搜索按钮：btn-search、btn-search-hover、btn-search-visited
Photoshop图层结构规范：
Photoshop层的命名遵循树结构。 如果元素由三个或更多层组成，则可以形成组。 所有图层都不应使用默认命名(图层编号)。
1级图层结构如下图：所示
二级结构图例(医院网站) :
三级结构图与效果图比较(医院新闻栏) :
效果图表
图层命名结构
四.常用命名总结：
页首：头
登录栏：loginbar
徽标：徽标
侧边栏：sidebar
广告栏：banner
导航：nav
副导航：subNav
菜单：menu
子菜单：subMenu
下拉菜单：dropMenu
工具栏：工具栏
表单：表单
专栏：column
箭头：arrow
:搜索
搜索按钮：btn-search
滚动条：scroll
内容：内容
选项卡：选项卡
文章列表：列表
提示信息：msg
小技：tips
专栏标题：title
链接：links
页脚：footer
服务：服务
热点：热点
新闻：新闻
下载：下载
注册：注册
状态：status
按钮：btn
投票：vote
合作伙伴：合作伙伴
版权：版权
网站地图：sitemap