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

UI设计常用命名规范(一)01用户界面设计时需要考虑的设计细则：易用性；一致性；合理性；美观与协调性；独特性；容错性等。

头部：header 登录：login 背景：background 导航栏：nav 注册：regsiter 用户：user 菜单栏：tab 编辑：edit 图片：img 内容：content 删除：delete 广告：banner 左中右：left 、center、right 返回：back 图标：icon 标题：title 下载：download 注释：note 底部：footer 弹出：pop 搜索：search控件的前缀名称：控件复选框chk cbo cmd dat dir fil fra frm gqb hsb img lbldrvt chkprint cboTitle cmdcancel datBiblic dirSource filSource fraLanguage frmMain gqbChannel hsbVolume imgIcon lblHelpMessagedrvTarget 组合框命名按钮数据目录列表框文件列表框图文框窗体组按钮水平滚动条图像标注驱动器列表框前缀举例控件线条lin lst mdi mun ole pic clp shp txt tmr vsb pnlopt linVertical lstResutCodes mdiContact munFileOpen olephoto picDiskSpace clpToolbar shpCircle txtAddress tmrAlarm vsbRate pnlSettingoptSpanish 列表框MDI子窗体菜单OlE容器图片框剪贴图形状文本框计时器垂直滚动条面板选项按钮前缀举例iOS10和iOS9中APP设计字体参考规范1- iPhone 上iOS设计稿字体英文为：HelveticaNeue2- 至于中文，Mac下用的:黑体-简3- Win下则为:华文黑体4- Android 上的字体为：Droid sans fallback所有字体大小：要用双数字号例如：20px 22px 24px 26px 28px 30px 32px 34px等等都是双数02。

网页设计字体大小规范网页设计中，字体大小的规范是非常重要的，它可以影响用户对网页内容的阅读体验，也会直接影响网页的可读性和可访问性。

在进行网页设计时，我们需要遵守一些字体大小的规范，以确保网页内容的清晰度和可读性。

下面是一些常见的网页设计字体大小规范。

1. 主标题（Heading）字体大小应该大于正文内容。

一般来说，主标题的字体大小可以设置为28px到36px之间，根据网页的风格和内容来定。

2. 子标题（Subheading）字体大小应该相对较小，一般可以设置为18px到24px之间。

子标题是对主标题的进一步解释和补充，字体大小要比主标题小一些，以区分层次。

3. 正文（Body）字体大小应该设置为16px到18px之间，这是最常用的正文字体大小。

这个字体大小足够清晰，同时也适合大多数用户阅读。

4. 标注和辅助文本（Caption and Auxiliary Text）字体大小应该相对较小，一般可以设置为14px到16px之间。

这些文本通常是对图片、表格或其他内容的解释或补充，字体大小要比正文小一些。

5. 链接（Link）字体大小应该和正文保持一致，一般可以设置为16px到18px之间。

链接可能是网页中最重要的交互元素之一，字体大小要保持与正文一致，以确保用户能够快速识别并点击链接。

6. 导航菜单（Navigation Menu）字体大小应该设置为18px到20px之间。

导航菜单是用户在网页中进行导航的重要工具，字体大小要稍大一些，以方便用户快速定位和点击。

7. 按钮（Button）字体大小应该设置为16px到18px之间。

按钮是网页中最常见的交互元素之一，字体大小要适中，以便用户能够清晰地看到按钮上的文本内容并点击。

除了以上的字体大小规范，还需要注意以下几点：1. 网页设计中，字体大小的一致性非常重要。

相同类型的文本应该使用相同的字体大小，以保持整体的统一感。

2. 不同层级的标题和文本应该使用不同的字体大小，以区分层次和重要性。

ui命名规范UI命名规范是指在用户界面设计中，为各个元素（如按钮、文本框、图标等）选择合适的命名方式，以提高代码的可读性和可维护性。

以下是一些建议的UI命名规范：1. 使用清晰明确的名称：使用具有描述性的名称来表示每个UI元素的功能或用途。

避免使用缩写、简写或无意义的名称。

例如，使用“登录按钮”而不是“btn1”。

2. 使用一致的命名方式：在整个项目中保持一致的命名方式，以便开发人员和设计师能够轻松理解和识别UI元素。

例如，如果在一个页面中使用了“登录按钮”，在其他页面中也应该使用相同的命名。

3. 避免使用特殊字符：命名时应避免使用空格、特殊字符和标点符号，因为它们可能导致在编程语言中的问题。

最好使用驼峰命名法或下划线命名法。

例如，使用“loginButton”或“login_button”。

4. 使用语义化的名称：选择与元素功能相关的名称，这样可以更好地理解和维护代码。

例如，使用“搜索框”而不是“input1”。

5. 区分相似元素：如果界面上有多个相似的元素，如多个按钮或输入框，可以通过添加数字或其他描述来区分它们。

例如，“搜索按钮1”和“搜索按钮2”。

6. 使用模块化命名：如果UI元素是属于某个模块或组件的一部分，则可以在命名中包含该模块或组件的名称，以提高可读性。

例如，“登录模块 - 登录按钮”。

7. 使用合适的前缀或后缀：为了更好地标识UI元素的类型，可以在命名中使用适当的前缀或后缀。

例如，“btn登录”和“txt 用户名”。

8. 避免使用中文拼音或翻译：为了更好地与代码保持一致，命名时应使用英文单词，而不是中文拼音或翻译。

例如，使用“loginButton”而不是“dengluAnniu”。

9. 保持命名简洁和精简：尽量使用简短的名称，以减少代码量并提高可读性。

避免过长或冗余的命名。

例如，使用“send”而不是“sendButton”。

10. 与团队保持一致：与团队成员协商并制定一套共同的UI命名规范，以确保整个项目的一致性。

内蒙古万德系统集成有限公司WEB UI设计(流程/界面)规范目录一：UI设计基本概念与流程................................................................................................................................................................................................................ - 3 -1.1 目的......................................................................................................................................................................................................................................... - 3 -1.2范围.......................................................................................................................................................................................................................................... - 3 -1.3 概述......................................................................................................................................................................................................................................... - 3 - 二：UI界面用户体验设计原则与规范 ................................................................................................................................................................................................ - 4 - 1：应该遵循的基本原则 ............................................................................................................................................................................................................... - 4 - 2：页面外观规范........................................................................................................................................................................................................................... - 4 -②宽带页面 ........................................................................................................................................................................................................................... - 5 -③自适应 ............................................................................................................................................................................................................................... - 5 -④其他页面 ........................................................................................................................................................................................................................... - 5 -基本结构 ................................................................................................................................................................................................................................. - 6 - 页面版式： ............................................................................................................................................................................................................................. - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。

ui命名规范为了方便开发和维护用户界面（User Interface，简称UI），在编写UI代码时需要遵循一定的命名规范。

一致的命名规范可以使代码更加清晰、易于理解和维护，提高开发效率。

下面是一些常用的UI命名规范：1. 使用有意义的名字：命名应该简洁明了，能够准确描述UI 元素的作用或者功能。

2. 使用小写字母和下划线分隔单词：这种方式称为蛇形命名法（snake case）。

例如，按钮元素可以命名为"submit_button"。

3. 使用语义化的名字：命名应该能够准确表示UI元素的类型和用途。

例如，使用"login_button"表示登录按钮，而不是使用"button_1"。

4. 避免使用缩写和简写：虽然缩写可以减少字符数，但是会增加代码的可读性。

应尽量避免使用缩写或简写，除非在开发团队中有统一的约定。

5. 使用一致的命名风格：在整个项目中使用一致的命名风格可以使代码更加整洁。

例如，可以选择使用驼峰命名法（camel case）或者蛇形命名法，但在整个项目中要保持一致。

6. 使用前缀或后缀表示类型：可以使用特定的前缀或后缀来表示UI元素的类型。

例如，使用"btn_submit"表示提交按钮，使用"txt_username"表示用户名输入框。

7. 避免使用保留字和关键字：命名不应与编程语言的保留字和关键字冲突，以免造成编译或运行错误。

8. 使用英文单词：命名应使用英文单词来描述UI元素，避免使用拼音或其他语言的命名，以保持一致性。

9. 不包含特殊字符和空格：命名应仅使用字母、数字和下划线，不应包含特殊字符和空格。

10. 根据不同的UI元素使用不同的命名规则：例如，可以使用特定的命名规则来命名按钮、输入框、标签等不同类型的UI元素，以便更好地区分它们。

11. 使用有意义的命名顺序：在命名UI元素时，应优先考虑其作用和功能，而不是其外观或位置。

前端设计师必备的设计稿交付规范设计稿交付是前端设计师工作中非常重要的一环，它对于后续的开发和实施工作至关重要。

为了确保设计稿的准确性和可执行性，前端设计师应该遵循一定的交付规范。

本文将介绍前端设计师必备的设计稿交付规范，旨在提高设计稿的质量，加强与前后端开发的协作效率。

一、设计稿命名规范设计稿命名规范是交付过程中的首要步骤，它可以更好地展示设计稿的内容和用途。

设计稿的命名应该简洁明了，避免使用含糊不清的名称，以免造成误解。

下面是一些常用的设计稿命名格式的示例：1. 页面名称-版本号：例如"首页-v1.0"、"商品列表-v2.0"；2. 项目名称-页面名称：例如"电商平台-购物车页面"、"企业官网-联系我们页面"；3. 功能名称-页面名称：例如"登录功能-登录页面"、"搜索功能-搜索结果页面"。

二、设计稿尺寸规范设计稿的尺寸规范决定了设计稿在不同设备上的适应性。

在交付设计稿之前，前端设计师需要明确设计稿的尺寸，确保它能够适配不同的屏幕分辨率和设备类型。

以下是一些常见的设计稿尺寸规范：1. 响应式设计：为了适应不同屏幕尺寸，设计稿应该采用响应式布局，可以设计多个断点尺寸，如：320px、768px、1024px、1440px等；2. 移动端设计：常见的移动端设计稿尺寸有：750px、1080px等；3. PC端设计：常见的PC端设计稿尺寸有：1280px、1440px、1920px等。

三、设计稿文件格式规范选择适合的设计稿文件格式可以确保设计稿的质量和可扩展性。

通常，设计稿可以使用以下几种文件格式：1. 图片格式：常见的图片格式有JPEG、PNG和GIF等。

设计稿中的图片应该尽量使用无损压缩的格式，以保证图像的清晰度和细节；2. 矢量图形格式：矢量图形格式如SVG可以保留图形的无损可编辑能力，在不同尺寸下都能保持清晰度，适用于图标和矢量图形等；3. 原生设计软件格式：设计师可以使用原生设计软件如Sketch、Adobe XD、Figma等进行设计，在交付时应提供设计稿的源文件，以方便后续修改和扩展。

Web UI 设计命名规范Web UI 设计命名规范 (1)一.网站设计及基本框架结构: (2)二.需要注意的几点: (2)一.网站设计及基本框架结构: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-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited推荐网页制作规范01 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。

网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节，使网页设计制作的水平更上一层楼。

以下是网页制作的一些注意事项，希望大家能引起重视。

一、网页制作中<head></head>中必写信息：1、<title>******</title>******为关键字--公司名称，不要超20个汉字或100个字母，这一项一般问题不大，但英文公司标题切不可每个字母都大写，这一点一定要注意，中文网站写中文，英文网站写英文，每个页面均要写。

2、语言规范英文版<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">中文版<meta http-equiv="Content-Type" content="text/html; charset=gb2312">繁体中文<meta http-equiv="Content-Type" content="text/html; charset=big5">3、<META NAME="Keywords" CONTENT="******”>******为关键字项，其字数中文控制在25-30单词/字内, 英文控制在3、4百个字符。

（在中文搜索引擎中，一个标点，一个阿拉伯数字，一个英文字母均算一个；在英文搜索引擎中，一个标点，一个阿拉伯数字，一个英文单词均算一个，要求是将重点关键词放在最前面；不要带有排他性描述文字，如最大，最好，第一等；也不要全部由产品简单的罗列堆砌而成；不要与Title,Description有重复描述，否则不仅降低描述质量，而且还无端浪费有限的“介绍文字”资源；故这些最好由业务员在与客户签约时，请厂家来确定，以免不必要的修改，最重要的是以后修改效果可能不太好）"4、<META NAME="Description" CONTENT="******” >****** 为网站描述项，其字数中文控制在25-30单词/字内, 英文控制在3、4百个字符。

网页文件命名规范
网页文件命名规范
一. 文件命名的原则：以最少的字母达到最容易理解的意义。

二. 索引文件统一使用index.html文件名(小写)
index.html文件统一作为"桥页"，不制作具体内容，仅仅作为跳转页和meta标签页。

主内容页为main.html
三. 按菜单名的英语翻译取单一单词为名称。

例如：
关于我们\aboutus
信息反馈\feedback
产品\product
所有单英文单词文件名都必须为小写，所有组合英文单词文件名第二个起第一个字母大写；
所有文件名字母间连线都为下划线
四. 图片命名原则以图片英语字母为名。

大小原则写同上。

例如：网站标志的图片为logo.gif
鼠标感应效果图片命名规范为"图片名+_+on/off"。

例如：menu1_on.gif/menu1_off.gif
五. 其它文件命名规范
1.js的命名原则以功能的英语单词为名。

例如：广告条的js文件名为:ad.js
2.所有的CGI文件后缀为cgi
所有CGI程序的配置文件为config.cgi。