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

阿里巴巴 ui 设计规范篇一：ui 设计规范命名规则模块_类别_功能_状态.pngnav_button_search_导航_ 按钮_搜索_默认.pngsearch 搜索bg 背景 selected 按钮状态（选中）button 按钮nav 导航栏disabled 按钮状态（不可点击）tab 菜单栏icon 图标 default 按钮状态（默认）bg 背景personal tada 个人资料presses 按钮状态（按下）user 用户pop 弹出back 返回refresh 刷新delete 删除eidt 编辑image 图片 download 下载content 内容banner 广告 login 登陆left right center 左右中registered 注册title 标题msg 提示信息link 链接note 注释logo 标志icon 制作：iOS120px：Icon_120@80px: Icon_small_40@58px: Icon_small@114px: Icon@Android：36*36px：drawable-ldpi48*48px：drawable-mdpi 72*72px：drawable-hdpi 96*96px：drawable-xhdpiAndroid 安卓系统 dp/sp/px 换算名称分辨率比率rate（320px）比率rate（640px）idpi 240*320mdpi 320*480 1hdpi 480*800xhdpi 720*800xxhdpi1080*1920Android 的图标尺寸屏幕尺寸启动图标操作栏上下文320*480px 48*48px 32*32px 16*16px480*800px480*854px 72*72px 48*48px 24*24px640*960px720*1280px 48*48dp 32*32dp 16*16dp1080*1920 144*144px 96*96px 48*48px比率rate（750px）系统通知最细笔画24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px iPhone 图标尺寸设备 AppStore 程序应用状态栏 spotlight 搜索标签栏(工具栏)导航栏6p 1024*1024px180*180 54px 87*87 146（66）132（160px）（物理 60px）6 1024*1024px120*120 54px 58*58 98 （44）985 1024*1024px114*114 40px 58*58 98 （44） 984 1024*1024px114*114 40px 58*58 98 （44）983 515*512px 57*5720px 29*29 49 （44）44 （80px）点击区域点击区域大于 44pxretain 屏幕大于 88px字体大小上的英文字体：HeiveticaNeue 中文：mac 下是黑体-简win 下华文黑体Ios 长文本（可接受）26px（见小值）30px（舒适值）32px~34px 双数短文本（可接受）28px（见小值）30px（舒适值）32px注释（可接受）24px（见小值）24px（舒适值）28px手机上的字体：Droid sans fallbackAndroid 高分辨率长文本（可接受）21px（见小值）24px（舒适值）27px（480*800）短文本（可接受）21px（见小值）24px（舒适值）27px注释（可接受）18px（见小值）18px（舒适值）21pxAndroid 低分辨率长文本（可接受）14px（见小值）16px（舒适值）18~20px（320*480）短文本（可接受）14px（见小值）14px（舒适值）18px注释（可接受）12px（见小值）12px（舒适值）14~16px篇二：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命名规范，以确保整个项目的一致性。

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）。

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命名规范为了方便开发和维护用户界面（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元素时，应优先考虑其作用和功能，而不是其外观或位置。

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

目录：一、适用环境和对象二、必要性三、技术原则四、代码编写规范五、页面模版使用规范一、适用环境和对象本规范适用基于浏览器的B/S版软件项目开发工作。

开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。

适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。

基于客户端的C/S版软件开发工作不适用本技术规范。

二、必要性本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。

以标准化方式，提高沟通和技术协作的水平，提高工作效率。

减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

三、技术原则代码规范化书写代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。

因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。

数据层、结构层、表现层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。

这里强调的“真正”，是指纯粹的数据信息本身。

把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)”虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。

所有这些用来改变内容外观的东西，称之为“表现(Presentation)”“表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。

抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。

---------------------------------------------------------------最新资料推荐------------------------------------------------------ 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设计字体规范的一些要点，共计1000字。

1. 字体选择在UI设计中，字体的选择至关重要。

应该选择一种具有良好可读性的字体，例如Arial、Helvetica、Roboto等。

同时，要注意字体的版权问题，确保使用的字体是合法的。

2. 字体族和字重UI设计中常常需要使用多种字体族和字重来呈现不同的信息。

通常情况下，可以选择一种主要的字体族用于标题和主要内容，再配合一种辅助的字体族用于次要内容和注释。

此外，可以根据需要选择不同的字重，例如轻体、标准体和粗体，以便突出或弱化某些信息。

3. 字号设置字号的设置是为了确保文字在不同尺寸的屏幕上都能够清晰可读。

通常情况下，标题文字的字号应该比正文文字的字号大，以吸引用户的注意力。

在选择字号时，还要考虑到用户的浏览习惯和视力水平，确保字号既不会过小导致难以辨认，也不会过大占据过多的屏幕空间。

4. 行距和字距行距和字距的设置对于提高文字可读性非常重要。

合适的行距和字距可以使文字更加清晰，同时还能提升整个界面的美观程度。

通常情况下，行距应该稍微大于字距，以便让行与行之间有一定的空隙，方便用户阅读。

5. 字体颜色字体颜色的选择应该与背景颜色相对比，确保文字能够清晰可见。

一般来说，亮色背景应该选择深色字体，暗色背景应该选择浅色字体。

同时，还要避免使用过于鲜艳的颜色或者对比度过高的颜色组合，以免影响用户的视觉体验。

6. 特殊情况下的字体处理在一些特殊的情况下，例如警告、错误或者重要提示等，可以选择一种特殊的字体效果，例如加粗、斜体、下划线或者使用不同的字体颜色来突出显示。

这样做可以让用户更加易于理解和注意到这些重要信息。

7. 外部字体的使用在一些情况下，可能需要使用不同于系统字体的外部字体来增强视觉效果。

在使用外部字体时，应该确保其与整个界面的风格和定位相符，避免过多地使用外部字体，以免造成视觉混乱。