注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

Web UI 设计命名规范  

2011-12-25 09:35:12|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Web UI 设计命名规范 

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

Web UI 设计命名规范 - Milo - IOS  JAVA KEY

 

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-searchbtn-search-hoverbtn-search-visited

 

.Photoshop图层结构规范:

 

Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)

 

第一级图层结构如下图:

Web UI 设计命名规范 - Milo - IOS  JAVA KEY

 

第二级结构图例(医院网站):

Web UI 设计命名规范 - Milo - IOS  JAVA KEY

 

第三级结构图例及效果图对比(医院新闻栏目)

Web UI 设计命名规范 - Milo - IOS  JAVA KEY

 

效果图

Web UI 设计命名规范 - Milo - IOS  JAVA KEY

 

四.常用命名汇总:

 

页头: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

 

iMilo

2011-12-25

 

 

参考:Web UI 设计命名规范(原创理论)

  评论这张
 
阅读(585)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017