WebUI设计命名规范讲解
UI设计规范 2
Web Ui设计规范版本号：2014050401规范制作：UI设计组为规范公司所开发的软件产品界面风格，明确UI设计师在进行界面设计时所需要遵循的准则和方法、界面中各个元素的规格及要求，确保web页面在风格、结构和功能上的基本统一，提高工作效率，便于团队合作开发，特制定此UI设计规范。
此规范不具有唯一性，不是最终版本，文档中部份规范内容可与实际情况有出入。
1 颜色1.1 应用原则●整体色彩不宜超过3种，并遵循对比原则，突出色彩层次感。
除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。
整个界面色彩尽量少的使用类别不同的颜色。
●当页面需要加边框时，边框的颜色最小值为底色颜色深度的200%，最大为300%，具体如下：1.2 颜色代码标准●在CSS中，所有颜色都以16进制色值来进行书写，如：#a0a0a0。
1.3 界面色彩2 字体2.1 字体大小与字型选择2.1.1 字体使用原则●字体以不超过2种字体为准，特殊情况除外。
●字体大小号的选择以12px、14px、16px等偶数字体大小为准。
●中文采用标准字体：“宋体”、“微软雅黑”，英文采用“Arial”或“verdana”，不能使用特殊字体(如隶书、草书等，特殊情况、广告图片中可以使用图片替代)，保证用户使用起来显示都很正常。
●另外所有控件尽量使用大小统一的字体属性，除了特殊提示信息，加强显示等列外情况。
2.1.2 标题字体“微软雅黑”为主，“宋体”为辅的使用原则，用加粗的方式表达加强突出效果。
2.1.2.1 菜单标题●菜单标题字体大小：最小取14px，最大取16px。
2.1.2.2 正文标题●正文标题字体大小：最小取24px，最大取32px。
2.1.3 正文的字体●“宋体”为主，“微软雅黑”为辅的使用原则。
●一般情况下，正文字体大小以12px为准，特殊情况下可以加粗或取14px大小的字体。
2.1.4 按钮字体2.1.4.1 登录、注册页面按钮●字体大小以14px-16px为准。
UI设计网页要求规范
1、页面命名每个页面都要有与之模块对应的名称。
2、页面兼容性（1）页面大小兼容o自适应1366*768px及以上的分辨率o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条）（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。
弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。
（3）浏览器兼容兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。
o文字文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。
具体字号大小和颜色参考UI设计效果图。
o容图片容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作显示数据（表格）（1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。
（2）单无格：文字图片容左对齐，数字、金额容右对齐。
（3）操作容原则上均用文字表达，如“编辑-删除”（4）鼠标划过表格单行时，颜色高亮。
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。
（6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。
选中数据（1）勾选全选则选中当页所有记录（2）去掉当页某个记录的勾选，则全选也去掉勾选。
（3）翻页后，自动去掉已勾选的记录及全选的勾选。
（4）翻页后是否进行选择记录的保留应试具体业务而定。
（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据（1）新增的记录必须排在新增页的首行；（2）所有列表页面默认按数据新增时间倒序排列。
（3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。
（4）提交成功后自动回到数据列表页。
（5）提交时需对主要标识字段进行重复值、空值（空格）判断。
修改数据（1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。
Web前端开发-命名规则
Smart UI前台开发帮助1)要求只能使用上述规定的标签2)每个标签要求结构完整；如：<span/>应写为:<span></span>除hr、br、img、input外标签都应该是标签对完整的<br /><hr/><img />3)除容器和文字标签外，不允许在标签中放置内容。
错误的写法：<input type="checkbox">库存</input>正确的应该是：<input type="checkbox" value="库存" ></input>4)关于对象的样式设置应该尽量使用系统定义的样式，除特殊的情况。
如：<td style="text-align: right; font-size: 12px; width: 30px">1.1.1、JS编写要求1)要求结构清晰，代码规范。
2)所有string对象必须以'单引号包括起来，如内部需要在使用',使用转义符\"3)一个function 中内容不能过长，应该适当根据功能拆分成多个function。
4)所有dom对象尽量全部使用jquery的方法进行操作5)关于js数据类型的处理应尽量使用jshepler,类型的prototype来完成.6)尽量使用局部变量，减少全局变量的使用，以减少内存的占用7)减少js闭包的使用，尽量避免内存泄露的风险。
8)使用var弱类型对象时应该明确标示其作用范围，一旦含义改变时一定要注释清楚。
9)统一使用ipsa2.0的基础组件库（jscontrols）编码，非特殊情况禁止直接调用控件（plugin）。
10)$ihelper库中已包含大多数情况的操作，基础操作应该都用$ihelper完成。
app,ui,设计(网页设计)的命名规范和ps图层结构规范
竭诚为您提供优质文档/双击可除app,ui,设计(网页设计)的命名规范和ps图层结构规范篇一：web+ui+设计命名规范讲解webui设计命名规范这套规范并非单纯的css、html或javascript命名规范，它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，有点罗嗦，吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套webui设计命名规范总结自我的一些web设计经验和国外设计师的命名繁体中文：英语：原始制作者信息网站简介搜索关键字网页的css规范网页标题这里是你的网页标题head区可以选择加入的标识设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅。
禁止浏览器从本地机的缓存中调阅页面内容。
用来防止别人在框架里调用你的页面。
自动跳转。
5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。
默认是all。
收藏夹图标js调用规范所有的javascript脚本尽量采取外部调用css书写规范所有的css的尽量采用外部调用书写时重定义的最先，伪类其次，自定义最后（其中a:linka:visiteda:hovera:actived要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。
网页设计命名规范
⽹页设计命名规范⼀.⽹站设计及基本框架结构:⽹页设计命名规范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三.Photoshop图层结构规范:Photoshop图层命名遵循树形结构，凡某元素组成的图层⼤于3层，即可形成组，所有图层尽量避免使⽤默认命名(图层+编号)。
学UI设计要知道的命名规范与方法
不同的团队使用的软件都不一样，如果经常使用sketch软件中Symbols 的同学，可能在命名的时候会考虑更多内容，但是照顾到还有很多同学在使用PS 作图，所以平面设计培训在这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路。
关于切图命名的规范，我个人觉得关键是在于团队能够有一个统一的规则，所有成员严格遵守并且和所有开发全盘拉通，不然一切都是空谈。
一、为什么要制定规范的命名规则1. 自身层面对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。
2. 团队层面如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协同也有极大的推动作用。
3. 开发层面这一点是最重要的，可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，因为只要我们的命名足够规范，并且和开发达成共识，他们完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。
二、所有命名全部为小写英文字母这一点的理由很简单，我们的目标是让开发直接拿我们的切图进行使用，不能够随意修改名称，但是我们要知道，开发哥哥的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的。
所以命名全部用小写的英文字母是最基本的规则。
【UI 设计新手必须要知道的命名方法】三、命名格式众所周知，一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：组件_类别_功能_状态@2x.png举例：tabbar_icon_home_default@2x.png(对应中文：标签栏_图标_主页_默认@2x.png)模块特有切图命名规则：模块_类别_功能_状态@2x.png举例：mail_icon_search_pressed@2x.png(对应的中文为：邮件_图标_搜索_ 默认@2x.png)当然这两个例子都是比较基本的情况，有很多时候可能一个单词并不能清楚的描述功能，比如有两个名字相同的搜索图标，大小不一，那这种情况你就可以这样命名：mail_icon_search_big_default@2x.png，我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称，希望大家能够活学活用。
Web UI 设计命名规范讲解(含目录)
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 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。
《WEB-UI设计》网页视觉设计规范课件
网页颜色
设计时请使用256WEB安全色，在ps中，选择RGB/8位，其他模式的色域很宽，颜色 范围很广，在不同显示屏会有失色现象。 活动专题页可不按此规范执行。
6
字体字号
网页正文采用微软雅黑，或宋体，12/14 px 字体大小，随着浏览器变大，扁平化设计 流行，以前适用的12PX 宋体，渐渐被大字号的字体替代。但是主流网站现在依旧适用 12px 系统默认字体。 标题使用 14、16 、18号字体 英文字体从9px开始就能清晰显示，选择空间很大。10px-16px都是常见的字体大小。 英文字体请使用自带字体。例如。Tahoma、Arial、Verdana 注：随着H5的流行，可以加载非系统默认的字体显示。建议加载非字体字体，最好选 择英文字体加载，不要选择中文，因为中文相对于英文来说要大很多。会增加网站加 载时间。
3
标准意义
1. 统一识别 规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避免用户 在浏览时理解困难。
2. 节约资源 除活动推广等个性页面外，设计其他页面使用本规范标准能极大地减少设计时间， 达到节约资源的目的。
3. 重复利用 使用属性单元，页面新建时可执行此标准重复使用，减少无关信息，就是减
WEB UI设计
网站视觉设计规范
1
规范介绍
适用于WEB产品线的人机交互界面设计方面的指导手册。 贯穿以用户为中心的设计指导方向，根据WEB产品的特点指定除的一套规范，以达到 提升用户体验，控制产品质量，提高设计效率的目标。
2
谁去读设计规范
该设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员， 运营编辑人员的参照。
少对主题信息传达的干扰，利于阅读与信息传递。
WEBUI设计规范
内蒙古万德系统集成有限公司WEB UI设计(流程/界面)规范目录一：UI设计基本概念与流程................................................................................................................................................................................................................ - 3 -1.1 目的......................................................................................................................................................................................................................................... - 3 -1.2范围.......................................................................................................................................................................................................................................... - 3 -1.3 概述......................................................................................................................................................................................................................................... - 3 - 二：UI界面用户体验设计原则与规范 ................................................................................................................................................................................................ - 4 - 1：应该遵循的基本原则 ............................................................................................................................................................................................................... - 4 - 2：页面外观规范........................................................................................................................................................................................................................... - 4 -②宽带页面 ........................................................................................................................................................................................................................... - 5 -③自适应 ............................................................................................................................................................................................................................... - 5 -④其他页面 ........................................................................................................................................................................................................................... - 6 -基本结构 ................................................................................................................................................................................................................................. - 6 - 页面版式： ............................................................................................................................................................................................................................. - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。
Web界面设计规范说明
Web界面设计规范Design Specification for Web UI （仅供内部使用Only for inside of ****）作者：********日期：2005年5月31日****财务HFS版权所有不得复制Copyright by **** 2005,All rights reservedWeb界面设计规范－文档修改记录Design Specification for Web UI—Revision History目录一、目的 (3)二、适用范围 (3)三、文件命名规范 (3)四、控件命名规范 (4)五、控件外观规范 (5)六、界面设计规范 (6)6.1字体 (6)6.2颜色 (6)6.3边距 (6)6.4尺寸单位 (6)6.5表格排版规范 (6)6.5.1表格代码对齐 (6)6.5.2表格高宽 (7)6.5.3表格其他规范 (7)七、其他规范 (7)7.1网站目录结构 (7)7.2排版规范 (8)7.2客户端脚本 (8)7.3状态管理 (9)一、目的为了使最终设计出来的Web界面风格一致化，开发者之间相互协作更轻松，特制定此Web 界面设计规范！回目录二、适用范围1.此规范适合所有Web Form的UI设计。
2.有关Windows Form的UI设计请参考＜＜Windows界面设计规范＞＞。
回目录三、文件命名规范Web Form扩展名Extension 描述Description前缀Prefix.aspx /.ascx Web用户自定义控件wuc回目录四、控件命名规范控件类型Control Type 前缀Prefix例子ExampleLabel lbl lblTip TextBox txt txtName Button btn btnOK LinkButton lbtnImageButton ibtnHyperLink hlkDropDownList ddlListBox lstDataGrid grdDataList dlstRepeater repCheckBox chkCheckBoxList chklstRadioButtonList rdolstRadioButton rdoImage imgPanel panPlaceHolder plhCalendar cldAdRotator adrTable tbl RequireFieldValidator rfvCompareValidator cpvRangeValidator rgv RegularExpressionValidator revCustomValidator cstv ValidationSummary vlsXml xmlLitteral ltl CrystalReportViewer crv回目录五、控件外观规范说明：{50px|文本宽度}，表示该参数可以的取值为：“50px”或者“文本宽度”控件类型Control Type 宽度(像素)Width(px)高度(像素)Height(px)备注RemarkLabel {适应文本} {适应文本} TextBox {150px|100%|超短|超宽} {默认值} Button {50px|文本宽度} {默认值} LinkButton {适应文本} {适应文本} ImageButton {适应图片} {适应图片} HyperLink {适应文本} {适应文本} DropDownList {150px|100%|适应文本} {默认值}ListBox{150px|100%|适应文本} {100px |适应项目数|按需}DataGrid {按需} {按需}DataList {按需} {按需}Repeater {按需} {按需}CheckBox {适应文本} {默认值}CheckBoxList {适应文本} {适应项目}RadioButtonList {适应文本} {适应项目}RadioButton {适应文本} {默认值}Image {适应图片} {适应图片}Panel {适应内部控件|按需} {适应内部控件|按需} PlaceHolder {适应内部控件|按需} {适应内部控件|按需}Calendar {按需} {按需}AdRotator {按需} {按需}Table {按需} {按需} RequireFieldValidator {适应文本} {默认}CompareValidator {适应文本} {默认}RangeValidator {适应文本} {默认} RegularExpressionValidator {适应文本} {默认}CustomValidator {适应文本} {默认}ValidationSummary {默认} {默认}Xml {默认} {默认}Litteral {默认} {默认}CrystalReportViewer {默认} {默认}回目录六、界面设计规范6.1字体所有Web 界面基准字体大小一律为：9pt 。
UI命名规范(10.01.24)
UI部门命名规范北京神州数码思特奇信息技术股份有限公司二〇二二年三月目录1 文档的目录结构 (5)1.1门户型网站的目录结构 (5)1.2产品线系统的目录结构 (6)2 DEMO布局方式 (7)2.1封装在一个WRAP层里： (7)2.2头部、主体、底部各自独立 (7)3 CSS样式命名 (8)3.1CSS文件命名 (8)3.1.1 CSS文件命名 (8)3.2CSS类名、ID命名 (11)3.2.1 CSS类名、ID命名 (11)4 图片的命名规则 (18)4.1图片文件夹命名规则 (18)4.1.1 门户型网站图片文件夹命名规则： (18)4.1.2 产品线系统的图片文件夹命名规则 (18)4.2图片命名规则 (19)5 注释的规则 (20)5.1H TML 注释 (20)5.2CSS样式注释 (20)5.3需要大量注释说明则建议采用： (21)5.4JS的注释 (21)6 JS命名规则 (22)6.1JS文件目录规则 (22)6.2JS文件命名规则 (22)6.3JS函数命名规则 (23)1文档的目录结构1.1 门户型网站的目录结构1.2 产品线系统的目录结构2DEMO布局方式2.1 封装在一个WRAP层里：一般适用于门户型网站，对层的操作比较少的情况下2.2 头部、主体、底部各自独立一般适用于公司产品线系统头部主体内容底部3CSS样式命名3.1 CSS 文件命名3.1.1CSS文件命名●CSS文件命名全部采用小写；●不要使用拼音作为文件的名称；●门户型网站的CSS文件命名按照现有的命名方式即可；●产品线系统的CSS命名：除了公用的common.css 、framework.css、reset.css 等通用的样式以外，其他的样式文件以控件命名；3.1.1.1门户型网站样式命名在\nresources\common\css目录下●common.css：通用的样式，包括一些样式的重定义，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式等等；●layout.css ：主要布局样式，网站主框架的布局，每个模块页面的布局样式等●dtree.css：网站通用树的样式●fenye.css：网站通用分页的样式在\ nresources \ yellow \ css 或者\ nresources \ blue \ css 目录下●yellow.css 或者blue.css：相对于布局样式的外观样式，yellow.css是以黄色或橘黄色为主色系的样式、blus.css是以蓝色为主色系的样式注：yellow.css与blue.css对比：两者的主要区别在于风格的不同，大部分类的名称相同。
前端UI设计规范解读
前端UI设计规范解读前端UI设计规范是指在开发网页或应用程序时，为了保证用户界面的一致性和易用性而制定的一系列设计原则和规则。
本文将对前端UI设计规范进行解读，重点介绍常见的规范要求和具体实践。
I. 色彩规范色彩是界面设计中最重要的元素之一，能够直接影响用户体验和页面的可读性。
在前端UI设计中，需要遵循以下色彩规范：1. 主色调选择：根据产品定位和品牌风格选择主色调，主色调需要在整个界面中保持一致，以增强品牌识别和界面的统一感。
2. 辅助色彩搭配：辅助色彩用于强调和突出重要信息，需要与主色调相互补充，同时注意搭配的对比度和可读性。
3. 平台色彩规范：不同的操作系统和平台对色彩的呈现有所差异，需要根据目标平台的规范进行调整，保持界面的一致性。
II. 排版规范排版是指文字和元素在界面中的布局和呈现方式，良好的排版能够提升页面的可读性和用户体验。
在前端UI设计中，需要遵循以下排版规范：1. 字体选择和搭配：选择适合不同场景的字体，一般建议使用系统字体或流行的Web字体，同时注意字体的大小和行高的搭配，保证文字的清晰可读。
2. 行、段落间距：合理的行高和段落间距能够提升文字的阅读舒适度，一般建议根据字体大小和行数设置适当的行高和段落间距。
3. 对齐方式：选择合适的文字对齐方式，一般可以选择左对齐、居中对齐或右对齐，保持整体布局的统一性。
III. 图标和按钮规范图标和按钮是用户与界面进行交互的重要元素，良好的规范能够提升用户的点击率和易用性。
在前端UI设计中，需要遵循以下图标和按钮规范：1. 图标设计和使用：图标需要简洁明了，易于识别和理解，同时需要保持一致性，建议使用矢量图标，以适应不同尺寸和分辨率的设备。
2. 按钮设计和布局：按钮需要有明显的点击效果和反馈，建议使用大而突出的按钮，同时注意按钮的布局和间距，避免点击误操作。
3. 按钮状态管理：按钮可以有不同的状态（默认状态、鼠标悬停状态、点击状态等），需要通过颜色和动画等方式进行明确的状态变化，提升用户的操作感知。
前端UI设计规范详细解析
前端UI设计规范详细解析前端UI设计规范是指在开发Web应用程序时，要遵守的一系列设计准则和标准，目的是为了提高网页的可用性、易用性和可视性。
本文将详细解析前端UI设计规范的相关内容。
一、色彩规范在前端UI设计中，色彩是一个重要的设计元素。
合理的色彩运用能够增强用户对页面的印象和吸引力。
以下是一些常用的色彩规范：1. 主色调选择：根据品牌定位和目标用户进行主色调的选择，主色调要与品牌形象一致。
2. 辅助色彩运用：辅助色彩用于突出重点部分或交互元素，要与主色调形成对比，不宜过多使用。
3. 色彩搭配原则：避免使用颜色过于杂乱或过于对比的搭配，保持整体色调的统一性和和谐感。
二、字体规范字体在前端UI设计中也具有很大的重要性，合适的字体选择和排版能够增加页面的可读性和视觉效果。
以下是一些常用的字体规范：1. 字体选择：根据品牌定位选择合适的字体，避免使用太过花俏或难以阅读的字体。
2. 字体大小和行距：根据不同的元素和视觉重要性，合理设置字体大小和行距，保持整体的平衡感。
3. 字体颜色：字体颜色要与背景颜色形成对比，保证文字的清晰可读。
三、布局规范合理的布局规范能够提高页面的可视性和易用性，以下是一些常用的布局规范：1. 响应式设计：根据不同的设备和屏幕尺寸，采用响应式布局设计，保证页面在不同设备上都能够良好地展示和使用。
2. 内容层次结构：根据页面的内容重要性和用户阅读习惯，合理设置内容的层次结构和排列顺序。
3. 对齐和间距：对页面上的元素进行对齐和间距的处理，保持整体的整洁和美观。
四、交互规范良好的交互设计可以提高用户的操作体验和页面的可用性，以下是一些常用的交互规范：1. 一致性原则：保持网站内不同页面和元素的交互方式和样式的一致性，避免用户的困惑和迷失感。
2. 易操作性：采用简洁直观的交互方式，避免操作过程的繁琐和复杂性。
3. 页面反馈：及时提供用户操作的反馈信息，例如按钮状态、加载进度等，让用户清楚地知道当前的状态和结果。
前端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设计中统一运用。
三、字体选择字体在页面设计中扮演着重要的角色，它直接影响用户对文字内容的阅读体验。
app,ui,设计(网页设计)的命名规范和ps图层结构规范
竭诚为您提供优质文档/双击可除app,ui,设计(网页设计)的命名规范和ps图层结构规范篇一：web+ui+设计命名规范讲解webui设计命名规范这套规范并非单纯的css、html或javascript命名规范，它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，有点罗嗦，吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套webui设计命名规范总结自我的一些web设计经验和国外设计师的命名繁体中文：英语：原始制作者信息网站简介搜索关键字网页的css规范网页标题这里是你的网页标题head区可以选择加入的标识设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅。
禁止浏览器从本地机的缓存中调阅页面内容。
用来防止别人在框架里调用你的页面。
自动跳转。
5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。
默认是all。
收藏夹图标js调用规范所有的javascript脚本尽量采取外部调用css书写规范所有的css的尽量采用外部调用书写时重定义的最先，伪类其次，自定义最后（其中a:linka:visiteda:hovera:actived要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。
UI设计网页规范
UI设计网页规范UI（User Interface，用户界面）设计是指设计师通过对网页的布局、颜色、字体、图标等元素的设计，来提高用户在使用网页时的体验和满意度的过程。
在进行UI设计网页规范之前，首先要明确网页的目标和用户群体，以此为基础进行设计。
接下来，我将分享一些重要的UI设计网页规范，帮助设计师进行更有效的设计。
1.网页布局规范-使用网格系统进行页面布局，以保持页面的整齐和统一感。
-页面布局要符合用户的阅读习惯，将重要的信息放置在页面的上方和左侧。
-设置合理的行距和段落间距，以提高页面的可读性。
2.色彩规范-选择合适的色彩搭配，使页面整体感觉和谐、统一、可以使用调色工具来帮助选择合适的色彩搭配。
-避免使用过多的颜色，保持页面色彩的简洁性。
-使用色彩的对比来突出重要的信息，可以使用鲜明的颜色来吸引用户的注意。
3.字体规范-选择适合的字体风格，使页面的字体看起来舒适、易读。
-根据不同的信息层级，选择不同的字体大小和字体粗细。
-避免使用过多的字体种类，保持页面字体的一致性。
4.图标规范-使用符合网页风格的图标，以增加页面的美观性和易读性。
-选择合适的图标大小，使其清晰可见，避免模糊或失真。
-使用图标来呈现复杂的信息，提高页面的简洁性。
5.导航规范-设计简洁明了的导航栏，使用户能够轻松找到所需的信息。
-使用面包屑导航来显示用户当前所在位置，以增加用户的导航参考。
-使用页面内锚点链接，帮助用户快速定位到页面的不同部分。
6.图片规范-选择高质量的图片，以提高页面的视觉效果。
-优化图片的大小和格式，以减小页面的加载时间。
-使用图片来呈现具体的信息，同时提供替代文本以保证可访问性。
7.响应式设计规范-设计适应不同设备和屏幕尺寸的页面布局，提供更好的用户体验。
-使用媒体查询来设置不同设备的布局、字体大小等样式。
-保持页面在不同设备上的一致性，以便用户可以无缝地切换设备继续浏览。
以上是一些基本的UI设计网页规范，设计师可以根据项目的具体需求进行调整和完善。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited推荐网页制作规范01 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。
一般文件及目录命名规范：每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。
例如：feedback(信息反馈)，aboutus(关于我们)多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。
例如：news_01.htm。
注意，数字位数与文件个数成正比，不够的用0补齐。
例如共有200条新闻，其中第18条命名为news_018.htm图片的命名规范：名称分为头尾两两部分，用下划线隔开。
头部分表示此图片的大类性质。
例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。
尾部分用来表示图片的具体含义，用英文字母表示。
例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。
其它文件命名规范js的命名原则以功能的英语单词为名。
例如：广告条的js文件名为:ad.js所有的CGI文件后缀为cgi。
所有CGI程序的配置文件为config.cgi02 目录结构规范目录建立的原则：以最少的层次提供最清晰简便的访问结构。
目录的命名以小写英文字母，下划线组成。
(参照命名规范)根目录一般只存放index.htm以及其他必须的系统文件每个主要栏目开设一个相应的独立目录根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片所有JS,ASP,PHP等脚本存放在根目录下的scripts目录所有CGI程序存放在根目录下的cgi-bin目录所有CSS文件存放在根目录下style目录每个语言版本存放于独立的目录。
例如：简体中文gb所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录03 尺寸规范尺寸规范请根据您的实际情况调整：页面标准按800*600分辨率制作，推荐尺寸为766*430px页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px，另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K04 首页代码规范首页的代码关键在head区，head区是指首页HTML代码的<head>和</head>之间的内容。
head区必须加入的标识公司版权注释<!--- The site is designed by yourcompany,Inc 03/2001 --->网页显示字符集例如：简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">英语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">原始制作者信息<META name="author" content="webmaster@">网站简介<META NAME="DESCRIPTION" CONTENT="这里填您网站的简介">搜索关键字<META NAME="keywords" CONTENT="关键字1,关键字2,关键字3,..."> 网页的css规范<LINK href="style/style.css" rel="stylesheet" type="text/css">网页标题<title>这里是你的网页标题</title>head区可以选择加入的标识设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=">5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">CONTENT的参数有all,none,index,noindex,follow,nofollow。
默认是all。
收藏夹图标<link rel = "Shortcut Icon" href="favicon.ico">JS调用规范所有的javascript脚本尽量采取外部调用<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>CSS书写规范所有的CSS的尽量采用外部调用<LINK href="style/style.css" rel="stylesheet" type="text/css"> 书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。