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
谁去读设计规范
该设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员， 运营编辑人员的参照。
少对主题信息传达的干扰，利于阅读与信息传递。
- 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 的字号比较合适。