`
cloudlee8
  • 浏览: 9649 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

 
阅读更多

Web UI 设计命名规范
最近工作实在是繁忙,所以好久没有更新自己的博客了,实在是对不起各位读者。今天好不容易闲下来半天,所以和大家分享一下我之前总结的一套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图层结构规范:

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

第一级图层结构如下图:

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




转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/web-ui-design-name-convention.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作


分享到:
评论

相关推荐

    Web UI 设计命名规范讲解

    Web UI 设计命名规范是指在网页设计过程中,对于网页设计元素的命名规则和规范。本规范不仅涉及到 CSS、HTML、JavaScript 等编码语言的命名规范,也涉及到使用 PhotoShop 等设计工具进行网页设计过程中的命名规范。 ...

    Web UI 设计命名规范

    在网页设计中,良好的命名规范对于提升代码可读性、维护性和团队协作效率至关重要。本文主要探讨了Web UI设计中的命名规范,特别是针对网站的基本框架结构和命名策略。 首先,我们要理解网站的基本框架结构。一个...

    Web网页设计命名规范

    Web网页设计命名规范 Web网页设计命名规范是Web程序员在设计和开发过程中需要遵循的一套命名规范,旨在提高代码的可读性、维护性和重用性。本规范涵盖了Web UI设计命名、交互行为命名、Photoshop图层结构规范等多个...

    UI切图命名规范

    UI切图命名规范,好的规范,能提高质量和效率

    Web界面设计规范(Web Form的UI设计)

    本文将详细介绍 Web 界面设计规范,包括界面设计的目的、适用范围、文件命名规范、控件命名规范、控件外观规范和界面设计规范等方面的知识点。 一、界面设计的目的 界面设计的目的是为了使最终设计出来的 Web 界面...

    WebUI设计命名规范模板.docx

    WebUI 设计命名规范模板 本文档总结了一套 WebUI 设计命名规范,旨在帮助设计师和开发者在设计和编程过程中遵循一致的命名规则,提高工作效率和协作性。本规范涵盖了网站设计的基本框架结构、命名规则、Photoshop ...

    Web-UI制作规范.doc

    在Web UI设计命名规范方面,960网格系统被广泛推荐为网页设计的最佳尺寸。这个宽度适应大多数显示器的分辨率,确保内容在不同设备上显示良好。页面结构通常由多个组件构成,如Container(或Wrapper)包裹所有元素,...

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

    Web UI设计命名规范是网页设计中不可或缺的一部分,它旨在提高设计团队之间的沟通效率和前端开发的便捷性。一套良好的命名规范能够确保设计师和开发者在处理设计稿时有一致的理解,减少误解和错误。以下是对这份命名...

    webui2重构规范

    二、**命名规范** 1. **文件命名**:使用小写字母,单词间以短横线(-)分隔,例如`login-form.html`。 2. **js方法命名**:采用驼峰式命名,如`getUserInfo`。 3. **css样式命名**:推荐使用BEM(Block Element ...

    Web网页设计命名规范.pdf

    1. WebUI命名规范 命名规范通常会规定HTML和CSS的类名命名方式。如wrapper、wrap和page等都是用于标识网页结构部分的命名。具体例子包括: - wrapper: 通常用作包裹最外层的容器,有时也称为wrap。 - page: 代表整个...

    Web_UI_制作规范

    接着,Web UI 设计命名规范强调了语义化和一致性。例如,页面宽度常采用960网格系统,适应多数显示器。页面元素的命名要反映其功能,如`container`(包裹容器)、`header`(头部)、`navbar`(导航栏)、`menu`...

    WEB设计标准规范.docx

    WEB 设计标准规范是指在网页设计中所需遵守的规则和指南,以确保网页的可读性、可用性和美观性。该规范涵盖了网页设计的各个方面,包括界面尺寸、布局、导航、文档命名和文件命名等。 1. 简介 WEB 设计标准规范的...

    WEB应用程序UI模版代码编写及使用规范

    【WEB应用程序UI模版代码编写及使用规范】 在WEB应用程序开发中,UI模板代码的编写与使用规范至关重要,它能够确保项目的高效协作、代码的一致性和可维护性。以下是规范的详细内容: 一、适用环境和对象 此规范...

    商业编程-源码-用XML和XSLT进行高级的Web UI设计(六).zip

    1. **XML基础**:理解XML的基本结构,包括元素、属性、命名空间以及DTD(文档类型定义)或XSD(XML Schema)的使用,这些都是确保XML文档符合规范的关键。 2. **XPath语言**:学习如何使用XPath来选取XML文档中的...

    日企软件工程师Web界面设计规范

    该规范适用于所有参与Web界面开发的软件工程师,包括前端开发者、UI设计师以及项目管理者。无论是开发企业内部应用还是对外发布的公共平台,都需要遵循这些规范。 三、文件命名规范 文件命名应清晰、简洁且具有描述...

    Web_UI_制作规范.

    Web UI 制作规范是网页设计中的重要环节,它确保了网页界面的统一性、可维护性和可扩展性。在创建Web用户界面时,遵循一套规范可以提高开发效率,同时增强用户体验。以下是一些关键的知识点: 1. **命名规范**: -...

    web项目整体开发流程及规范

    2. **UI设计规范**:在设计阶段,UI设计师需遵循一套统一的设计规范,包括色彩搭配、字体选择、布局原则等,以确保用户界面的一致性和易用性。此外,设计稿应清晰标注尺寸、颜色代码和交互逻辑,方便开发人员理解和...

    20B_基于Scrapy的WebUI开发_测试需求规格说明书v1.2.01

    总结,基于Scrapy的WebUI测试需求规格说明书是一个详细指导测试过程的文档,涵盖了测试目的、背景、范围、方法、工具、分工、环境和用例设计等多个方面,旨在确保WebUI的功能完善、性能优良且安全可靠。

Global site tag (gtag.js) - Google Analytics