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命名规范，以确保整个项目的一致性。

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的字号比较合适。

AppUI命名常见规范

AppUI命名常见规范1、常见界⾯、控件、功能、状态命名集合：APP产品经理、APP设计师、APP开发⼯程师，包括H5前端开发⼈员都可以记住的⽂件命名规范。

界⾯命名整个主程序App搜索结果Search results活动Activity信息Messages ⾸页Home应⽤详情App detail探索Explore⾳乐Music软件Software⽇历Calendar联系⼈Contacts新闻News游戏Game相机Camera控制中⼼Control center笔记Notes管理Management照⽚Photo健康Health天⽓Weather发现Find视频Video邮件Mail⼿表Watch个⼈中⼼Personal center设置Settings地图Maps锁屏Lock screen系统控件库状态栏Status bar搜索栏Search bar提醒视图Alert view弹出视图Popovers 导航栏Navigation bar表格视图Table view编辑菜单Edit menu开关Switch标签栏Tab bar分段控制Segmented选择器Pickers弹窗Popup⼯具栏Tool bar活动视图Activity view滑杆Sliders扫描Scanning功能命名确定Ok添加Add卸载Uninstall选择Select默认Default查看View搜索Search更多More取消Cancel删除Delete暂停Pause刷新Refresh关闭Close下载Download继续Continue发送Send最⼩化Min等待Waiting导⼊Import前进Forward最⼤化Max加载Loading导出Export重新开始Restart菜单Menu安装Install后退Back更新Update资源类型图⽚Image滚动条Scroll进度条Progress线条Line图标Icon标签Tab树Tree蒙版Mask静态⽂本框Label勾选框Checkbox动画Animation标记Sign编辑框Edit下拉框Combo按钮Button动画Animation 列表List单选框Radio背景Backgroud播放Play常见状态普通Normal获取焦点Focused已访问Visited默认Default按下Press点击Highlight禁⽤Disabled选中Selected悬停Hover错误Error完成Complete空⽩Blank位置排序顶部Top底部Bottom第⼆Second页关Header中间Middle第⼀First最后Last页脚Footer2、以iOS为范例(安卓通⽤)的切⽚⽂件命名规范如下：个⼈觉得标识符命名原则，尽可能的⽤最少的字符⽽⼜能完整的表达标识符的含义（如：Navigation bar可以缩减成nav）。

WebUI设计命名规范讲解

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.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。

ui 规范

ui 规范UI规范是一种约定俗成的设计规范，旨在统一用户界面设计，提高用户体验。

以下是关于UI规范的1000字介绍：UI（User Interface，用户界面）规范是指在软件开发过程中，为了满足特定的用户界面设计标准而制定的设计指南和规范。

它可以帮助设计师和开发人员有针对性地进行设计和开发任务。

UI规范主要包括样式、布局、色彩、字体、图标等方面的要求，以确保设计的一致性、易用性和可扩展性。

首先，UI规范在样式方面要求设计师使用一致的设计样式，包括按钮、文本框、下拉框等元素的外观和交互效果。

例如，按钮的形状、颜色、阴影效果应保持一致，以增加用户的可识别度和操作便利性。

其次，UI规范在布局方面要求设计师使用统一的布局结构，以提高用户界面的一致性和易用性。

例如，页面的导航结构应该清晰明确，按钮的排列顺序应符合用户的习惯，并且页面的内容应该合理地分组和排列，以提供一致的信息结构和用户导航路径。

在色彩方面，UI规范要求设计师使用统一的色彩方案，以保持整体界面的视觉一致性和美观性。

例如，主色调、辅助色和背景色的选择应该符合品牌形象和用户情感需求，并且在不同的界面元素之间应该有明显的对比度，以提高用户的可辨识度和可用性。

另外，UI规范还要求设计师使用统一的字体样式，以确保用户界面的可读性和可理解性。

例如，标题、正文和按钮的字体大小、行距和字重要保持一致，以便于用户对信息的阅读和理解。

最后，UI规范还包括图标方面的要求。

设计师应该使用统一的图标库，并确保图标的风格、尺寸和颜色符合设计规范。

图标的使用应该简洁明了，有助于用户快速理解图标所代表的含义，并且在不同的界面元素之间有一致的图标风格，以提升用户的界面导航和交互体验。

总之，UI规范是一种重要的设计工具，它可以帮助设计师和开发人员创建一致、易用和美观的用户界面。

遵循UI规范可以提高产品的用户体验，并减少用户因界面设计差异而产生的困惑和操作错误。

随着UI规范的完善，用户可以更加顺利地使用软件，提高工作效率，提升用户满意度和产品竞争力。

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元素时，应优先考虑其作用和功能，而不是其外观或位置。

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 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。

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 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。

ENOVIA开发规范(一)

开发规范一、UI界面命名规范：1.所有的menu/commad/webform/table等必须以“XXX”为前缀开头，命名以见名知意为主，后加相应后缀，2.主要规则：1.前缀，以“XXX”开头，后再加相应的模块简称，如定额就加“YYY”2.中间，此动作目的，见名称意3.后缀，有些必加（webform\table），有些无（command）3.示例：1.新建条件的webform：XXXYYYCreateOptionForm，编辑代号的webform：XXXYYYEditOptionForm.2.所有条件的table：XXXYYYOptionSummary，注意【以Summary为后缀】3.所有条件的command：XXXYYYAllOption.4.条件在table上的新建按钮command：XXXYYYOptionSummaryCreateNew.条件的工具栏：XXXYYYOptionToolBar，【第一层】；XXXYYYOptionToolBar，【第二层】XXXYYYOptionToolBarActions.二、JSP命名规范：1.以“XXX_”为前缀，后加相应的文件夹名（ootb注册模块），如“emxProgramCentral”，后再加动作目的，再加后缀2.后缀有相应规范，如是预处理页面，就加“FS”；页面显示，加“Dialog”；页面显示后的数据与逻辑处理页面，加“Process”3.示例：假如创建条件用JSP来实现，那相应的页面命名则为：XXX_emxProgramCentralYYYOptionCreateNewDialogFS.jspXXX_emxProgramCentralYYYOptionCreateNewDialog.jspXXX_emxProgramCentralYYYOptionCreateNewDialogProcess.jsp三、JPO命名规范：1．以“XXX”为前缀，中加“emx”，后加相应模块名：如“YYY”，再加相应Type名;2．功能模块以“XXXYYYemx”为名，此次模块开发的所有相关function都写入此jpo 四、开发中的具体规范：1．不能直接在系统ootb的代码中添加、改写代码，必须先查找有无相应的已定制的jsp\jpo，写入其中，若无，则自己定制【参照前二、三条】2．Jpo中自己写入新方法时，必须写入相应的文档注释3．在别人的jpo或jsp中修改或增加代码时，必须写入相应的维护注释4．所有自己新加的jpo或jsp必须写入文件头注释5．所有注释必须中必须要有自己的签名（中文拼音，如“zhangjie”），时间（如“2011-8-10 12:05:24”）6．代码的重要逻辑部分必须加上代码注释；对变量的声明，一行只能有一个声明，声明的注释不作要求，建议写上，但最关键或对逻辑起决定作用的声明，则必须写上注释7．此次开发的代码必须排版，参用java开发通用规则；8．此次开发的所有变量建议采用匈牙利命名法。

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对比：两者的主要区别在于风格的不同，大部分类的名称相同。

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三.Photoshop图层结构规范:Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

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设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，这是不好的。

因为统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。

而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。

而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

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.常用英文单词如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。

UI设计常用命名规范(一)

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

头部：header 登录：login 背景：background 导航栏：nav 注册：regsiter 用户：user 菜单栏：tab 编辑：edit 图片：img 内容：content 删除：delete 广告：banner 左中右：left 、center、right 返回：back 图标：icon 标题：title 下载：download 注释：note 底部：footer 弹出：pop 搜索：search 模块：mod 提示信息：msg 按钮：button控件的前缀名称：控件复选框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容器图片框剪贴图形状文本框计时器垂直滚动条面板选项按钮前缀举例1- iPhone 上iOS设计稿字体英文为：HelveticaNeue2- 至于中文，Mac下用的:黑体-简3- Win下则为:华文黑体4- Android 上的字体为： Droid sans fallback 所有字体大小：要用双数字号例如：20px 22px 24px 26px 28px 30px 32px 34px等等都是双数。

UI的设计规范

UI的设计规范UI设计（界面）规范指的是在进行用户界面设计时需要遵循的一系列原则和准则。

遵循规范的设计可以使用户界面更加易于使用、一致性强、视觉效果好，并且能够提供更好的用户体验。

下面将介绍一些常见的UI设计规范。

一、一致性原则1.风格一致性：UI界面的整体风格应该保持一致，包括按钮样式、颜色、图标等。

2.布局一致性：在不同页面中，相似功能应该采用相似布局，以保持用户的熟悉感。

3.标准化命名：界面上的各个元素要使用统一的命名规范，便于用户理解和记忆。

二、可用性原则1.易学性：用户应该能够快速学会和使用UI界面，无需学习大量的操作指南。

2.可理解性：用户应该能够清楚地理解每个界面元素的作用和功能。

3.一致的反馈：界面需要给用户及时的反馈，告诉用户他们的操作是否成功。

4.可预测性：用户可以根据以往的经验，理解界面的操作和导航方式。

三、可视化原则1.美观性：界面需要具有良好的视觉效果，吸引用户的注意力。

2.简洁性：UI设计应该尽量避免冗余的信息和复杂的布局，保持界面的简洁性。

3.对比与平衡：界面中不同元素之间应该有明显的对比，确保关键信息的显眼性。

4.一致的图标和图片风格：图标和图片应该具有相同的风格和风格，以保持整体的一致性。

四、互动设计原则1.简单的导航：界面的导航应该简单明了，用户能够快速找到自己需要的功能。

2.易于操作：交互元素的大小、位置应该符合人体工程学，便于用户的点击和操作。

3.合理的反应时间：界面对于用户的操作应该有合理的反应时间，不会让用户等待过久。

五、响应式设计原则1.多设备兼容性：UI设计应该考虑到不同屏幕尺寸和设备的兼容性，确保界面在不同设备上都能显示正常。

2.弹性布局：UI设计中的布局应该是自适应的，能够根据屏幕尺寸的变化进行调整。

六、可访问性原则1.良好的可读性：界面上的文字和图标应该具有良好的可读性，不会对用户的视觉造成困扰。

2.色盲友好：UI设计中的颜色选择要考虑到色盲用户的需求，避免使用仅依赖颜色进行信息传递。

UI设计规范

1.1. 总体设计原则·以用户为中心。

设计由用户控制的界面，而不是界面控制用户。

·清楚一致的设计。

所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解·较快的响应速度。

·简单且美观。

1.2.1. 用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。

·操作上假设是用户-而不是计算机或软件-开始动作。

用户扮演主动角色，而不是扮演被动角色。

在需要自动执行任务时，要以允许用户进行选择或控制它的方式来实现该自动任务。

·提供用户自定义设置。

因为用户的技能和喜好各不相同，因此他们必须能够个性化界面的某些方面。

Windows为用户提供了对许多这方面的访问。

您的软件应该反应不同的系统属性-例如颜色、字体或其他选项的用户设置。

·采取交互式和易于感应的窗口，尽量避免使用模态对话框，而使用"非模式"辅助窗口。

"模式"是一种状态，它排除一般的交互，或者限制用户只能进行特定的交互。

当最好使用一个模式或该模式只是可替换的设计时-例如，用于在一个绘图程序中选定一个特定感觉-请确保该模式是显然的、可见的，是一个明确的用户选定的结果，并且容易取消。

·在后台运行长进程时，保持前台式交互。

例如，当正在打印一个文档，即使该文档不能被改变，用户也应该可以最小化该窗口。

·谅解。

用户喜欢探索一个界面，并经常从尝试和错误中学习。

一个有效的界面允许交互式的发现，它只提供一组合适的选择，并在用户可能破坏系统或数据的情况时发出警告。

如果可行，还应提供可逆转或可还原的操作。

即使在设计得很好得界面中，用户也可能犯错误。

这些错误既可以是物理上得（偶然地指向了错误的命令或数据），也可以是逻辑上的（对选定哪一个命令或哪些数据做出了错误的决定）。

有效的设计避免很可能导致错误的情况。

它还包容潜在的用户错误，并且使用户易于还原。