Web UI设计命名与基础框架结构.pdfVIP

WebUI设计命名规范

一.设计及基本框架结构:

1.Container

“container“就是将页面中的所有元素包在一起的部分，这部分还可以命

名为:“wrapper“,“wrap“,“page“.

2.Header

“header”是页面的头部区域，一般来讲，它包含的logo和一些

其他元素。这部分还可以命名为:“header”(或pageHeader).

3.Navbar

“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名

为:“nav”,“naviion”,“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

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