这套规范并非单纯的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层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站):
第三级结构图例及效果图对比(医院新闻栏目):
效果图
图层命名结构
四.常用命名汇总:
页头: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设计规范有自己的见解,欢迎大家在此留言一同讨论,互相学习,共同进步:)
分享到:
相关推荐
Web UI 设计命名规范是指在网页设计过程中,对于网页设计元素的命名规则和规范。本规范不仅涉及到 CSS、HTML、JavaScript 等编码语言的命名规范,也涉及到使用 PhotoShop 等设计工具进行网页设计过程中的命名规范。 ...
### UI(用户界面)设计规则和规范 #### 一、引言 用户界面(User Interface,简称UI)作为软件与用户交互的最直接层面,其重要性不言而喻。一个设计良好的界面不仅能够给用户留下深刻的第一印象,还能有效地引导...
本文将详细介绍 Web 界面设计规范,包括界面设计的目的、适用范围、文件命名规范、控件命名规范、控件外观规范和界面设计规范等方面的知识点。 一、界面设计的目的 界面设计的目的是为了使最终设计出来的 Web 界面...
《Windows微软软件UI界面设计规范详解》 UI界面设计,作为软件专业化和标准化的重要组成部分,旨在提升用户体验,强化品牌形象。Windows软件UI设计涵盖了多个关键环节,包括启动封面、软件框架、按钮、面板、菜单、...
UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图
在“WebUI设计作业4”这个主题中,我们聚焦于网页用户界面的设计,这是一个至关重要的领域,直接影响到网站的用户体验和交互效率。WebUI设计涵盖了多个方面,包括色彩搭配、布局设计、字体选择、图标应用、导航结构...
UI切图命名规范,好的规范,能提高质量和效率
Web界面设计及UI设计就是要多看多学,这里提供Web界面设计及UI设计、WEB界面设计.pdf、Web界面设计-样章.pdf、交互设计那些事儿.pdf和Web界面设计规范.doc,需要的人可以下载看看
Web UI制作规范是确保网页设计一致性和用户体验的关键因素。这份文档详细阐述了制作高质量Web界面的设计和组织准则,包括目录结构、命名规范以及界面设计的最佳实践。 首先,Web目录结构的规范化至关重要,因为它...
UI 界面设计文档是指在软件开发过程中,对用户界面的设计和规划,以确保用户可以轻松地使用软件并达到最佳的用户体验。这类文档通常包括界面设计规范、界面关系图、工作流程图、主界面设计、子界面设计、美学设计、...
本文整理汇总了最新的界面设计中常用的一些ui尺寸规范和方法大全以及ui设计语言和原则,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。
WebUI设计作业主要涵盖网页用户界面的设计原则、技巧与实践,是将视觉艺术、交互设计、用户体验和前端技术融合的综合性工作。在这个作业中,2011060414和201108024可能是两个不同阶段的设计稿或案例,代表着学习过程...
WebUI 4.27版本的插件是针对Unreal Engine (UE4) 4.27更新的一个重要组成部分,专注于提升游戏开发中的用户界面体验。这个插件为UE4引入了先进的网页交互功能,使得开发者能够创建更加丰富、动态且具有高度定制化的...
"11期:UI设计.pdf"和"UI(用户界面)设计规则和规范.pdf"详细列出了UI设计的通用规则和行业标准,包括色彩系统、尺寸标准、间距原则等,这些都是保证设计一致性、易用性和专业性的基石。 七、网站UI设计之道 "众妙...
OpenBMC WEBUI 的可访问性是指遵守 Web 内容无障碍指南(WCAG)2.1 规范,确保所有用户都可以访问和使用 WEBUI。可访问性的原则和实践包括: * 遵守 WCAG 2.1 规范 * 验证标签顺序是否遵循应用程序的流程 * 验证...
UI设计规范是一套详细的设计原则和指南,用于指导设计师如何创建高效、一致且具有吸引力的用户界面。以下是关于UI设计规范的详细解读: 1. **色彩规范**:色彩在UI设计中扮演着情感传达和视觉引导的角色。规范通常...
【标题】"web项目UI界面2"涉及到的是Web应用程序用户界面设计的重要方面,尤其是在构建信息管理平台时。UI(User Interface)是用户与系统交互的桥梁,它的设计直接影响到用户的使用体验和效率。一个良好的Web UI...
WebUI图标素材是网页用户界面设计中不可或缺的一部分,它们为网站和应用程序提供了视觉引导和交互元素,极大地提升了用户体验。在Web开发过程中,特别是在没有专业美工支持时,这些图标素材显得尤为重要,因为它们...