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

阿里巴巴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命名规范是指在用户界面设计中，为各个元素（如按钮、文本框、图标等）选择合适的命名方式，以提高代码的可读性和可维护性。

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

ui命名规范

侧栏 sidebar
广告条 banner
导航 nav
子导航 subnav
菜单 menu
子菜单 submenu
下拉菜单 dropmenu
工具条 toolbar
表单 form
栏目 column
箭头 arrow
搜索 search
搜索按钮 btn_search
滚动条 scroll
ui界面ps源文件图层命名规范
一般以“控件位置 > 控件类别 > 控件详情描述 > 控件状态”的顺序命名。
标题栏 titlebar
状态栏 statusbar
列表 list {1，2，3...}
表格 sheet
图片 pic
推广图 banner
背景 bg
按钮 btn
指示器 indicator
启动器 launcher
图标 icon
标签 tab
内容区域 content
线条 line 2px
多选 checkbox
单选 radio
提示 tips
进度 process
信息 info
头像 head
返回 back
点 point
页头 header
登录条 logiБайду номын сангаасbar
标志 logo
内容 content
标签页 tab
文章列表 list
提示信息 msg
小技巧 tips
栏目标题 title
链接 links
页脚 footer
服务 service
热点 hot

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命名规范为了方便开发和维护用户界面（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 设计命名规范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 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。

UI设计规范文档-BS版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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设计字体规范的一些要点，共计1000字。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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设计常用命名规范(一)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设计中的命名规范

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

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

设计命名规范

《设计命名规范》命名数据库表根据表所属的子系统/模块，命名方式为：数据库表名= 子系统/模块缩写+ “_”+ 表含义其中子系统/模块的缩写首字母大写，表含义中每个单词的首字母为大写。

子系统/模块及其缩写应在《数据库设计说明书》的2.3约定部分加以描述。

例外：代码表可统一采用”code”为表的前缀。

如：code_area 表示地区代码表表字段：每个数据库中为每个表定义唯一的缩写，长度为4~6个字符，字段名= 表缩写+ “_” + 字段含义。

字段含义首字母应大写，字段含义由多个单词组成时，每个单词的首字母均大写。

数据库表名及表缩写应在《数据库设计说明书》的2.3约定部分加以描述。

字段前缀定义如下：如：area_id ：地区代码ID号area_name ：地区代码名称索引索引名= idx + “_” + 表缩写+ 相关字段/索引含义关联关联指数据库表之间的外键关系关联名= rl + “_” + 主表缩写+ 从表缩写存储过程：存储过程名= proc + “_” + 存储过程含义触发器：触发器根据触发条件（如增加、删除、修改等）和触发时间（在…之前，在…之后等），定义触发器前缀如下：增加记录之前触发：tib增加记录之后触发：tia修改记录之前触发：tub修改记录之后触发：tua删除记录之前触发：tdb删除记录之后触发：tda触发器= 触发器前缀+ “_” + 表名视图：视图名= view + “_” + 视图含义约束：约束名= cons + “_” + 约束含义如果设计工具自动生成约束条件，约束命名可使用设计工具的标准。