来源:http://blog.bingo929.com/web-ui-design-name-convention.html

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

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

[转]Web UI 设计命名规范的更多相关文章

  1. Web UI 网站用户界面设计命名规范

    Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...

  2. Web UI 设计(网页设计)命名规范

    Web UI 设计命名规范 一.网站设计及基本框架结构: 1.    Container“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wr ...

  3. 25套用于 Web UI 设计的免费 PSD 网页元素模板

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  4. 25套用于Web UI设计的免费PSD网页元素模板

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  5. 免费素材:25套免费的 Web UI 设计的界面元素(转)

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  6. 基于 Raphael 的 Web UI 设计 - 初稿

    基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说 ...

  7. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  8. 移动Web UI库(H5框架)有哪些,看这里就够了

    前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...

  9. 10个优秀的JavaScript Web UI库/框架推荐

    在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率. 本文为你带来10款非常优秀的基于JavaScript的Web U ...

随机推荐

  1. 【HDOJ】4587 TWO NODES

    Tarjan解无向图的割点和桥,参考白书. /* 4587 */ #include <iostream> #include <vector> #include <algo ...

  2. 【HDOJ】1394 Minimum Inversion Number

    逆序数的性质.1. 暴力解 #include <stdio.h> #define MAXNUM 5005 int a[MAXNUM]; int main() { int n; int i, ...

  3. [FJSC2014]异或之

    [题目描述] 给定n个非负整数A[1], A[2], ……, A[n]. 对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A[i] xor A[j],这样共有n ...

  4. (转载)MySQL默认INFORMATION_SCHEMA,MySQL,TEST三个数据库用途

    (转载)http://www.45it.com/database/201204/29390.htm 本文简要说明了MySQL数据库安装好后自带的INFORMATION_SCHEMA,MySQL,TES ...

  5. Linux学习笔记11——文件I/O之二

    一.文件共享 内核使用三种数据结构表示打开的文件,它们之间的关系决定了在文件共享方面一个进程对另一个进程可能产生的影响. 1.每个进程在进程表中都有一个记录项,记录项中包含有一张打开文件描述表 2.内 ...

  6. duang体加班版

    领导第一次让我加班的时候,其实我是拒绝的,因为我觉着加班这个事,不能你让我加我就加,晚了就没有地铁了..领导跟我说可以打车报销.加了一个月之后,我的钱包duang~,后来我知道报销其实是假的,我每天打 ...

  7. HDU 3555 Bomb(数位DP)

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  8. UILabel的使用方法

    UILabel 就是一个显示文字的控件,可以设置文字的各种属性. 构造方法:     //通过设置Label的边框来初始化UILabel     labelOfSlider = [[UILabelal ...

  9. 【转】SVN linux命令及 windows相关操作(二)

    转自这里:http://www.uml.org.cn/pzgl/200904246.asp 1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么要用SVN? 4 怎么 ...

  10. Google Picasa

    本博文的主要内容有 .Google Picasa的下载 .Google Picasa的安装 .Google Picasa的使用 Google 的免费图片管理工具Picasa,数秒钟内就可找到并欣赏计算 ...