`
rebecca
  • 浏览: 315271 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Web UI 网站用户界面设计(俗称网页设计)命名规范(转)

阅读更多

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

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

Web UI 设计命名规范

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

Web UI 网站用户界面设计命名规范(2) - liuruyi007 - ---清水思源---

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 网站用户界面设计命名规范(2) - liuruyi007 - ---清水思源---

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

Web UI 网站用户界面设计命名规范(2) - liuruyi007 - ---清水思源---

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

Web UI 网站用户界面设计命名规范(2) - liuruyi007 - ---清水思源---

效果图

Web UI 网站用户界面设计命名规范(2) - liuruyi007 - ---清水思源---

图层命名结构

四.常用命名汇总:

页头: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 设计命名规范讲解

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

    UI(用户界面)设计规则和规范

    ### UI(用户界面)设计规则和规范 #### 一、引言 用户界面(User Interface,简称UI)作为软件与用户交互的最直接层面,其重要性不言而喻。一个设计良好的界面不仅能够给用户留下深刻的第一印象,还能有效地引导...

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

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

    windows 微软软件UI界面设计规范

    《Windows微软软件UI界面设计规范详解》 UI界面设计,作为软件专业化和标准化的重要组成部分,旨在提升用户体验,强化品牌形象。Windows软件UI设计涵盖了多个关键环节,包括启动封面、软件框架、按钮、面板、菜单、...

    UI(用户界面)设计规范思维导图

    UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图UI(用户界面)设计规范思维导图,前端设计规范,ios设计规范,移动端设计规范,思维导图

    webUI设计作业4

    在“WebUI设计作业4”这个主题中,我们聚焦于网页用户界面的设计,这是一个至关重要的领域,直接影响到网站的用户体验和交互效率。WebUI设计涵盖了多个方面,包括色彩搭配、布局设计、字体选择、图标应用、导航结构...

    UI切图命名规范

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

    Web界面设计及UI设计

    Web界面设计及UI设计就是要多看多学,这里提供Web界面设计及UI设计、WEB界面设计.pdf、Web界面设计-样章.pdf、交互设计那些事儿.pdf和Web界面设计规范.doc,需要的人可以下载看看

    UI设计规范大全.zip

    本文整理汇总了最新的界面设计中常用的一些ui尺寸规范和方法大全以及ui设计语言和原则,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

    UI界面设计文档,详细设计文档

    UI 界面设计文档是指在软件开发过程中,对用户界面的设计和规划,以确保用户可以轻松地使用软件并达到最佳的用户体验。这类文档通常包括界面设计规范、界面关系图、工作流程图、主界面设计、子界面设计、美学设计、...

    WebUI设计作业

    WebUI设计作业主要涵盖网页用户界面的设计原则、技巧与实践,是将视觉艺术、交互设计、用户体验和前端技术融合的综合性工作。在这个作业中,2011060414和201108024可能是两个不同阶段的设计稿或案例,代表着学习过程...

    webUI 4.27版本的插件

    WebUI 4.27版本的插件是针对Unreal Engine (UE4) 4.27更新的一个重要组成部分,专注于提升游戏开发中的用户界面体验。这个插件为UE4引入了先进的网页交互功能,使得开发者能够创建更加丰富、动态且具有高度定制化的...

    UI设计规范详解 UI设计规范

    UI设计规范是一套详细的设计原则和指南,用于指导设计师如何创建高效、一致且具有吸引力的用户界面。以下是关于UI设计规范的详细解读: 1. **色彩规范**:色彩在UI设计中扮演着情感传达和视觉引导的角色。规范通常...

    web项目UI界面2

    【标题】"web项目UI界面2"涉及到的是Web应用程序用户界面设计的重要方面,尤其是在构建信息管理平台时。UI(User Interface)是用户与系统交互的桥梁,它的设计直接影响到用户的使用体验和效率。一个良好的Web UI...

    webui图标素材

    WebUI图标素材是网页用户界面设计中不可或缺的一部分,它们为网站和应用程序提供了视觉引导和交互元素,极大地提升了用户体验。在Web开发过程中,特别是在没有专业美工支持时,这些图标素材显得尤为重要,因为它们...

    UE4和web网页的UI交互

    UE4通过蓝图系统,使得非程序员也能通过图形化界面设计游戏逻辑和UI交互,降低了开发门槛。 二、Web技术与UE4的结合 在UE4中实现与Web网页的UI交互,通常涉及到Web浏览器插件和网络通信协议。一种常见的方式是利用...

    国开作业《网站界面(UI)设计》形考任务3参考(含答案)938.docx

    国开作业《网站界面(UI)设计》形考任务3参考(含答案)938.docx国开作业《网站界面(UI)设计》形考任务3参考(含答案)938.docx国开作业《网站界面(UI)设计》形考任务3参考(含答案)938.docx国开作业《网站...

    可扩展的扩散 Web UI:一个可扩展的,易于使用的,便携的扩散web UI

    在IT行业中,Web UI(用户界面)是网页应用的核心组成部分,它决定了用户的交互体验和工作效率。标题中的“可扩展的扩散Web UI”指的是一个设计灵活、功能可拓展且易于使用的Web应用程序界面,它旨在提供一个便携式...

Global site tag (gtag.js) - Google Analytics