Web UI 设计(网页设计)命名规范
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命名规范是指在用户界面设计中，为各个元素（如按钮、文本框、图标等）选择合适的命名方式，以提高代码的可读性和可维护性。
以下是一些建议的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 设计规范
内蒙古万德系统集成有限公司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命名规范
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等进行设计，在交付时应提供设计稿的源文件，以方便后续修改和扩展。
WebUI设计命名规范讲解(含目录)
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百个字符。
网站UI设计概述
//本次启动配置文件 //下次启动配置文件 //灾备配置文件
配置文件管理
• 配置文件操作管理（续）
系统启动时需要加载系统软件和配置文件，配置文件包括启动配置文件、下次 启动配置文件和灾备配置文件。 • 执行【display startup】命令可查看当前系统的启动配置
<Huawei>display startup
设备环境基本配置
• 语言模式切换
华为VRP的帮助信息可以显示英文，也可以显示中文。默认情况下是英文。
<Huawei>language-mode Chinese Change language mode, confirm? [Y/N]y Jan 31 2020 12:07:00-08:00 Huawei %%01CMD/4/LAN_MODE(l)[50]:The user chose Y whe n deciding whether to change the language mode. 提示：改变语言模式成功。 <Huawei>language-mode English 改变当前语言环境，确认切换？[Y/N]y Info: Succeeded to change language mode.
Startup saved-configuration file:
flash:/vrpcfg.zip
Next startup saved-configuration file: flash:/vrpcfg.zip
Next startup configuration:
backup-configuration
设备环境基本配置
•设备名称设置
在实际使用时，网络设备名称可根据用户需求进行配置。为便于日后的运行与 维护，所有的网络设备都应该有统一明确的命名规范。一般来说，网络设备的 名称建议包括所在机房、所在机架、设备功能、设备层次、设备型号、设备编 号等信息，具体的命名规范在网络方案设计时根据实际需求指定。 例：某设备物理位置位于核心机房03机架，设备层次位于汇聚层，用于汇聚生 产部门流量，设备型号为华为“S5700”，则可命名为Core03-SC-HJ-S5700
网页文件命名规范
网页文件命名规范
网页文件命名规范
一. 文件命名的原则：以最少的字母达到最容易理解的意义。
二. 索引文件统一使用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。
web标准
心之所向，所向披靡我总是对每一个想学CSS 的朋友说: “学CSS 真的很简单，一个星期就搞定。
” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS 也一样，痛并快乐指的就是这些东西吧。
本文里面收集一些有关CSS 的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。
不管是新手还是高手，大家都继续学习吧。
一，Web 标准要玩游戏，就得先了解规则。
要学CSS ，就应该先了解一下Web 标准。
尽管看上去不是必须的(我在学CSS 之前，根本不知道也不想知道Web 标准是个啥玩意儿)。
应该说，你是否学Web 标准，跟你是否能学会CSS 没有什么关系，但跟你能写出什么样的CSS ，以及X html 或其它代码，跟你能做出什么质量的网页有很大的关系。
其实我自己对Web 标准也不甚了解，尽管我看过不少关于Web 标准的文章和书。
(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web 标准，我头里就会有一堆问号:• Web 标准真的有利于seo 吗？ Web 标准的动机难道就是SEO? 出于SEO 动机的Web标准是否会失去一些Web 标准真正的本质?•如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web 标准了?•Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。
这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突…•…我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。
•你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。
网页设计之字体设计规范
网页设计之字体设计规范网页设计之字体设计规范网页字体的选择，需要按照一定的规范来进行选择，以下是店铺整理的网页设计之字体设计规范，欢迎参考阅读!网页设计常用字号最好用偶数字号1、Header导航文字12号或14号；2、Menu导航文字14—18号；3、Sidebar文字12号或14号，4、一级菜单使用14号、二级菜单使用12号或一级菜单使用12号加粗、二级菜单使用12号。
5、Footer文字12号或14号6、正文：大标题文字24—32号；标题文字16或18号；正文文字12号或14号。
7、标题文字字号，18px，20px，24px，28px，32px，尽可能使用双数。
8、按钮文字：比如登录、注册页面按钮或其他按钮，文字14—16号，可根据实际情况调整大小或加粗。
9、同一层级的字号搭配应该保持一致。
比如，同一层级的版块中标题文字和内容文字大小的一致性。
在苹果官网中，产品展示文字以64号和32号搭配，文字内容简短有力，可读性强，同时非常具有视觉冲击力，突出显示了品牌特征。
字体排版规范一、最佳易读性规范1.行宽传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。
中文在14号字体时，建议35—45个文字2.行高网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距比如12号字体，行间距是12px—18px，段落间距则是18px—24px。
另外，行高/段落之间的空白=0.754。
行间距正好是段落间距的75%是非常常见的。
3.行对齐通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐4.文字留白在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。
此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。
5、CRAP原则（carp）对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）字体选择字体：中文：宋体，微软雅黑，方正系列（无状态）字号：网页中正文／导航字号在12px－18px之间英文可以偏小一些10px－16px，再小识别性就不是特别好了，中规中矩，经典通用。
网页设计评分标准
整个网站至少30个页面，每少一个页面扣10分，深度至少包括二级页面,显示分辨率以能自适应显示屏为准。作品总体积不超100MB.
合计
CSS样式
3
合理使用CSS样式 0—3分
表单
5
使用的表单元素种类丰富（有3类或3类以上给全分） 0-5分
第五部分总体印象（20分）
7
创意
5
主题明确，内容健康,思路清晰，新颖独到3-5分
美感
5
色彩合理，布局得体，视觉清新，美感独韵3-5分
技术
5
运用合理，表达通顺，节奏流畅，视听一体3—5分
其他
5
不合理,错误链接,不完整等3—5分
(6）图片以英文或数字命名0—4分,若有以中文命名的图片此项得0分
第四部分技术(20分）
6
框架、层、表格
4
框架结构、层、表格的使用，能完整浏览网页内容 （含利用滚动条浏览) 0—4分
自制动态效果
8
（1）使用字幕、按钮、翻转、浮动图片、时间轴等单一技术手段制作动态效果4分,多一种效果加1分。
（2）动态效果使页面重点突出，且无杂乱感 0-3分
网页设计评分标准
学号
总分
总分
总分
序号
评分点
分值
计分标准
得分
第一部分页面（15分）
1
文件操作
2
文件命名规范(0-2分），首页以default。html或index。html命名，否则0分.
2布局5（1结构清晰，布局合理、规范（2）布局新颖，有创意
美观性
5
（1)文字清晰
（2）背景恰当、美观
(3)整体效果(字体大小、颜色搭配、动画在整个页面的效果等)
web前端开发命名规则
web前端开发命名规则在web前端开发中，命名规则是确保代码可读性、可维护性和可扩展性的重要因素。
一个良好的命名规则可以使代码更加清晰、易于理解和修改。
以下是一些建议的web前端开发命名规则：1.文件命名规则o统一使用小写的英文字母、数字和下划线的组合，避免使用汉字和特殊字符。
o文件名应该具有描述性，能够清晰地表达文件的用途或内容。
o对于动态文件，可以使用性质描述作为文件名的一部分，例如“register_form.aspx”表示注册表单。
o对于不同模块之间的文件，可以使用前缀来区分，例如“module1_script.js”和“module2_style.css”。
2.变量和函数命名规则o变量和函数名应该具有描述性，能够清晰地表达其用途或功能。
o变量名应该使用小写字母和下划线的组合，例如“user_id”。
o函数名应该使用小写字母和下划线的组合，例如“get_user_info”。
o对于复杂的变量或函数，可以使用驼峰命名法，例如“userName”。
3.类和对象命名规则o类名应该使用大写字母开头的驼峰命名法，例如“User”。
o对象名应该使用小写字母开头的驼峰命名法，例如“user”。
4.HTML元素命名规则o HTML元素应该使用小写字母开头的驼峰命名法，例如“div”或“span”。
o对于自定义的HTML元素或属性，应该使用小写字母和下划线的组合，例如“data-user-id”。
5.CSS类和ID命名规则o CSS类名应该使用小写字母开头的驼峰命名法，例如“.my-class”。
o CSSID名应该使用小写字母开头的驼峰命名法，例如“#my-id”。
o对于复杂的CSS类或ID，可以使用前缀来区分，例如“.btn-primary”表示主要的按钮样式。
6.注释命名规则o注释应该具有描述性，能够清晰地解释代码的作用或意图。
o注释应该使用英文进行编写，以便于国际化的理解和交流。
7.代码缩进和排版规则o代码应该具有整齐的缩进和排版，以便于阅读和理解。
Web UI 设计(网页设计)命名规范_1
---------------------------------------------------------------最新资料推荐------------------------------------------------------ Web UI 设计(网页设计)命名规范Web UI 设计(网页设计) 命名规范, 关键词是网站产品, 产品设计, 最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。
今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套 Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计) 命名规范。
这套规范并非单纯的 CSS、 html 或 JavaScript 命名规范，它涉及了很多使用 PhotoShop 这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，有点罗嗦，吼吼~) 。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些 css、 html、 js 和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套 WebUI 设计命名规范总结自我的一些 Web 设计经验和国外设计师的命名方式推荐。
Web UI 设计命名规范一. 网站设计及基本框架结构: 1.1 / 4Container container 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: wrapper, wrap, page. 2. Header header 是网站页面的头部区域，一般来讲，它包含网站的 logo 和一些其他元素。
这部分还可以命名为: page-header (或 pageHeader) . 3. Navbar navbar等同于横向的导航栏，是最典型的网页元素。
前端UI设计规范全解读
前端UI设计规范全解读UI设计规范是指一套关于前端用户界面设计的准则和标准，它涵盖了页面布局、颜色搭配、字体选择、图标运用、按钮设计、响应式设计等方面的要求。
合理地运用UI设计规范可以提升网站或应用的用户体验，增加用户的粘性和使用愿望。
本文将全面解读前端UI设计规范，帮助读者更好地理解和运用相关要求。
一、页面布局良好的页面布局是一个用户界面设计的基础，它影响着用户对信息的理解和导航体验。
页面布局的准则包括以下要点：1.1 网格系统网格系统是页面布局的基石，通过将页面划分为若干等宽等高的格子，使得页面元素可以有条理地进行排列。
推荐使用12栏网格系统，具备响应式设计能力，以适应不同屏幕尺寸的设备。
1.2 留白设计留白是页面布局中的重要元素，它有助于调整页面的平衡感和视觉焦点。
合理的留白设计能提升内容的可读性和用户体验。
一般来说，内容与边框的间距控制在10px以上，不同区域之间的间距控制在20px以上。
1.3 平铺设计平铺是指将元素以网格形式进行排列，使得视觉上具备层次感和整齐感。
推荐使用对齐方式，如左对齐、居中对齐等，以保持页面整洁美观。
二、颜色搭配颜色是页面设计中的重要组成部分，它们能够引导用户的注意力、表达不同的情绪和风格。
在进行颜色搭配时，需考虑以下准则：2.1 色彩搭配色彩搭配要遵循品牌或项目的整体风格，采用相近或相对的颜色进行组合。
推荐使用主色与辅助色相结合的方式，避免花哨的颜色使用。
2.2 色彩搭配的对比度对比度是指前景颜色与背景颜色的差异程度，在颜色搭配时要注意对比度的选择。
颜色对比度应满足WCAG 2.0标准的AA级别，以保证视觉障碍用户的可读性需求。
2.3 调色板的设计为了保持页面整体风格的统一性，建议建立一个调色板用于管理颜色的使用。
调色板中应包含品牌色、主色、辅助色以及中性色等，便于在UI设计中统一运用。
三、字体选择字体在页面设计中扮演着重要的角色，它直接影响用户对文字内容的阅读体验。
UI设计中的命名规范
很多UI设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，这是不好的。
因为统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。
而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。
而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。
1.所有命名全部为小写英文字母在程序员的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的，所以命名全部用小写的英文字母是最基本的规则。
有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。
2.命名格式一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：组件_类别_功能_状态@2x.png举例：tabbar_icon_home_default@2x.png(对应中文：标签栏_图标_主页_默认@2x.png) 模块特有切图命名规则：模块_类别_功能_状态@2x.png举例：mail_icon_search_pressed@2x.png(对应的中文为：邮件_图标_搜索_默认@2x.png) 我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。
(要注意，命名中不能含有空格)3.常用英文单词如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。