网页设计过程中推荐的命名规范

2016-02-19 23:50 20 1 收藏

下面是个简单易学的网页设计过程中推荐的命名规范教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

最近工作实在是繁忙,所以好久没有更新自己的博客了,实在是对不起各位读者。今天好不容易闲下来半天,所以和大家分享一下我之前总结的一套Web UI 设计命名规范,也就是网站用户界面设计(俗称网页设计)命名规范。

这套规范并非单纯的CSS、html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了,有点罗嗦,吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服务器端语言的,至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范

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

网页设计-命名规范

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

三.Photoshop图层结构规范:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

第一级图层结构如下图:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

web-ui-设计-规范

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

网页设计-教程

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

网页设计-效果图
效果图

photoshop-网页设计-教程
图层命名结构

四.常用命名汇总:

页头: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设计规范有自己的见解,欢迎大家在此留言一同讨论,互相学习,共同进步:)

来源:http://www.tulaoshi.com/n/20160219/1630722.html

延伸阅读
标签: 分娩
说到 分娩 ,还在 孕期 的你会不会感到紧张害怕呢?其实,分娩过程有一个乐观的心理是很重要的哦。 一、分娩过程的心理调节 1、第一产程 助产人员与产妇密切接触.在进行护理过程中,通过亲切交谈.了解她们的思想状况,了解她们对妊娠、分娩生理常识的掌握情况.以便在分娩过程中有针对性的进行护理。通俗易懂地向她们...
标签: 减肥 瘦身
减肥过程中要注意的事项 生活中有许多人都会通过减肥的方法来帮助自己达到纤细的身材。那么我们在减肥的过程中需要注意什么呢?下面给大家介绍减肥过程中要注意的事项,供大家参考。 晚上八点后可以吃东西 实际上你什么时候吃东西都无所谓。真正对体重有影响的是卡路里含量是多少?有没有进行体育锻炼?这三点才是决定你...
就我自己看到的而言,很多平台的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我个人理解,对表单设计的经验做些分享,首先什么样的表单才能算的上是好的表单?这个得搞清楚。 先撇开交互和产品,若加上这两点,那有的说了。 1. 能够清晰传递表单信息并使用户快速轻松完成 2. 对于整站而言,能够样式统一减少用户学习成本...
批评别人的作品比自己制作一个优秀的作品要容易得多。但如果你使用一个有系统的方式去批评,列出项目清单并准备好插图,它就会被认为是个成熟的分析!在我看来,图标设计正经历着一个过渡阶段。一方面,屏幕分辨率在增长,因此要提高图标品质。另一方面,我们仍拥有好的旧款图素。16X16乃至于更小的图标仍在被广泛使用。所以,这里为大家介绍一...
标签: Web开发
     我不是一个很有经验的程序员,在做项目的过程中会遇到很多的问题,在数据库中使用分页就是我做项目中遇到的一个问题.我从网上查了很多资料,有很多种方法.但我觉的创建临时数据表是最简单的方法,在我做Membership扩展时发现原来微软也是这样用的,你可一随便打开一个Membership的存储过程看看.    &nbs...

经验教程

447

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部