本文目录
- UI设计规范都有哪些
- ui设计规范和规则
- UI设计有哪些规范
- UI设计具体有什么要求
- UI设计规范都包含哪些规范
- UI设计规范详解，一起来看看！
- ui设计规范文档怎么写
- UI设计规范
- ui设计规范有哪些
- 手机UI设计的基本规范
UI设计规范都有哪些
好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
1.简易性
界面的简洁是要让用户便于使用、便于了解产品，并能减少用户发生错误选择的可能性。
2.用户语言
界面中要使用能反映用户本身的语言，而不是游戏设计者的语言。
3.记忆负担最小化
人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定，24小时内存在约25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。
4.一致性
它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与产品内容相一致。
5.清楚
在视觉效果上便于理解和使用。
6.用户的熟悉程度
用户可通过已掌握的知识来使用界面，但不应超出一般常识。
7.从用户习惯考虑
想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。
通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。
8.排列
一个有序的界面 能让用户轻松的使用。
9.安全性
用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。
10.灵活性
简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄、界面)。
11.人性化
高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。
12.颜色不一样
UI设计师是随着网络而兴起的新兴设计行业，从事对软件的人机交互、操作逻辑、界面美观的整体设计工作
涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及跨媒介设计以人为本，以用户体验需求为基础，发展多元化是目前中国信息产业中最为抢手的人才之一。
ui设计规范和规则
ui设计规范和规则：
一：平台(系统)规范，主要对于其平台内生态的设计指南。
二：公司规范，主要是公司品牌logo、产品主色调、图标库、字体库等。如360采用绿色作为主色调，腾讯则采用蓝色作为主色调 等。
三：产品规范，主要是产品设计和实现层面的方案，也是最常用到的，Web 和APP产品居多，产品规范需要基于平台和公司规范基础上参考制作。
UI设计有哪些规范
高质量的规范文档是一个优秀设计系统的代表物。我们详实地描述每个 UI 组件的设计与代码规范，来帮助设计师高效地作出决策，推动开发速度。编写高质量的文档需要前期规划和一系列合理的流程来辅助，付出的成本相当高。
这个系列由六篇文章组成，致力于描述编写组件规范文档的过程。本篇我会从目标读者、文档内容、文档结构开始。然后会涉及案例，设计与代码指南。这些内容来自于我自己这些年的实践经验以及社区里大家所分享的知识。
那么我以一个问题开始今天的主题：文档的目标读者是谁，他们需要什么样的内容，作为编写者我们该怎样组织文档结构来作出清晰的表达？
文档的目标读者
首先：你要弄清楚谁是你的文档的主要读者。
工程师，设计师，还有公司里的所有人！
当一个设计系统包含了代码指南，工程师们显然会是读者。那么一个只包含了代码指南的设计系统应该服务于设计师吗？如果文档里只包含了设计规范而没有代码（如 Material Design），工程师还是读者吗？
在我看来，两个问题的答案都是肯定的。规范文档是从不同的角度来服务于多种角色的。
除了设计与工程，它还服务于其他人吗？很有可能，特别是当文档所在的设计系统已经成为产品的基石时。简短有效的介绍对于 PM（产品经理） 很有价值，QA（测试） 则比较关注案例部分…等等。
规范文档是从不同的角度来服务于多种角色的
很多设计系统团队还会把自己的系统公开出来，在体现共享精神的同时也能起到吸引行业人才的作用。所以文档应该能够体现团队的专业与严谨。
文档的主要目标是：为设计师、工程师和团队里的其他角色服务，让他们能够高效地做决策。
Takeaway：设计系统的效应和影响力不只覆盖设计与工程，一个成长中的系统必将会服务于更多的角色。
工程师，接着是设计师，然后才是其他人
为所有角色服务并不意味着平等地服务所有角色。工程师每天会查阅 10 次或更多次文档，他们甚至会把文档与代码编辑器窗口并排排列！设计师的访问次数应该是少于工程师的，其他角色则会更少。
所以谁是最重要的？以我的经验来看，设计系统最初就是为了工程与设计之便，由工程师和设计师建立的。即使其他角色也对其有所贡献，但他们仍是偏次要的。因此我们首先需要确保工程师与设计师的需求能够得到满足。
设计师与工程师优先级最高
那么，工程师与设计师孰轻孰重呢？我最近参与设计的设计系统项目中都需要同时服务于两者，为设计和代码制作规范指南。我也在一些企业的文档中看到了对其中一方的过多偏见，或者是有将他们的目标完全分离开的倾向（稍后我会解释）。有很多维度需要考量：设计系统的目标，他们的使用频率，内容深度、质量、生产成本，以及和他们日常工作的相关度。
设计师 vs 工程师
Takeaway：读者的优先级由很多因素决定。要有预期：工程师和设计师的需求会有冲突，并尽可能地优化和处理这些冲突。如果实在不行，就要偏向于距离最终产品最近的那一方，通常是工程师。这就意味着工程师优先，设计师其次。
文档内容
规范文档是连接读者与内容的媒介。内容会有不同的格式或模块，因此成本也各有差异，而你需要最终把它们编织在一起。
文档内容模块：简介和案例文档内容模块：设计参考和代码参考
抽象地来看，规范文档的内容通常包含以下四种模块：
介绍：组件的名称，以及一段简明扼要的介绍。（必要）
案例：这个组件的各种形式，状态，尺寸等等其他要素，比较好的做法是用代码直接把这些展示出来，而不是不可以交互的静态图片。（必要）
设计参考：比如什么时候应该用这个组件，允许的做法与不允许的做法，以及视觉、交互、文案方面的指南。（推荐）
代码参考：包含 API 和其他实施及部署方面的指南。（必要）
设计与代码的分类逻辑出现差异（最简单的例子就是 Loader 和 Spinner 的命名：代码里叫 Loader，而设计里则叫 Spinner）
功能差异：设计规范里出现了代码不能实现的功能，或者代码里加入了设计里没有考虑的功能。
简介
案例
设计参考
代码参考
不同的模块会有不同的制作成本
「介绍」写起来当然非常的短平快。结构优秀的「案例」也是值得投入成本的，并且写起来会越来越顺手。工程师也需要一个合理清晰的「代码参考」。但是，真正有效的「设计参考」可能会非常耗费成本。
横轴：细节的丰富程度由浅到深。纵轴：制作成本由低到高
请点击输入图片描述
Takeaway：规范文档可以包含很多内容模块。所以需要团队在前期就进行充分的讨论，对每种内容模块做出符合自己团队和产品价值的判断，再投入成本去制作。
文档的信息结构
设计与代码：分开还是合并？
在实践中，设计师往往会自顾自的发布或更新和自己相关的内容，工程师也一样。这样的惯性行为会在无意中增加设计与工程的距离。所以大家需要在前期就对文档的信息结构达成共识。
谷歌的 Material 文档生态就是这种距离感的代表。 Material’s design foundation 优先服务于设计实践, 而 Material Design Lite，Polymer Project，Android Developer’s，Material UI (built for React) 都是服务于代码，和设计规范绑定的并不紧密。
请点击输入图片描述
这种分离的状态其实是有意义和理由的。因为 Material 是一个操作系统的底层系统，跨越了许多框架，团队，平台。它的复杂度在某种意义上超越了目前世界上所有的设计系统。但你要知道大多数的设计系统并不是服务于一个操作系统的，因此不会发展至如此复杂的形态。
对于像我们一样的产品团队来说，设计和代码分开是符合共识的。这种做法能够给分别为两种角色设计符合他们需求的体验。
组件设计规范与 API 和代码规范分别放在两个网站上。来自：Atlassian
请点击输入图片描述
这种做法也有风险。随着时间推移，两个网站可能出现不同步的现象：
你可能会觉得这样也挺好，毕竟设计和代码本身就是两个领域。至少对于文档的写作者来说这种分离还是挺方便的（只用考虑自己的需求，管理自己的进度）。
但真正的读者需要的是一个「真相的唯一来源（Single source of truth）」。如果你是一个对设计和代码都有需求的读者，你会发现自己不停在两个网站间切换，两个地方都有对你有价值的内容，这感觉就像是在打网球时陷入了拉锯战。
Takeaway：要慎重地看待设计与代码的分离。虽然一开始方便了内容作者和发布者，但之后会有风险。这种做法也可能会在潜移默化中造成设计与工程的距离扩大。
合并内容的两种方案：堆叠还是切换？
例如 Morningstar Design System 是把设计和代码放在一个页面里，读者就能找到完全统一的命名，指南，功能描述。
一个页面之堆叠式：把设计和代码放在一个页面中，纵向滚动来查看。
请点击输入图片描述
堆叠式的布局方式会使得页面变得冗长。当然还有一种方式是使用 Tab 来切换内容。
一个页面之切换时：把设计和代码放在一个页面中，通过 Tab 来切换内容。
请点击输入图片描述
Takeaway：将设计和代码混合在一起是有可能的，大家可以按自己的需求来选择以上两种布局方式。
按类型来为内容做排列和编组
不论选择那种布局方式，文档内容的模块结构和顺序应该是保持一致的：
其实只要把「案例」放到读者一进来就能看到的地方，把设计和代码参考放在一步点击就能达到的地方，就是一个不错的设计了。下面是几种行业内比较有代表性的模式：
左：IBM Carbon 模式 中：Hudl’s Uniform System 模式 右：Lightning Design System 模式
请点击输入图片描述
IBM Carbon 认为代码更应该被优先展示，将交互用法和样式分别放在其他的 Tab 中。Hudl’s Uniform system 把顺序反了过来，设计优先于代码。 Salesforce’s Lightning Design System 把代码和组件案例放在 Tab 上方，默认选中开发者指南这个 Tab，而后两个 Tab 则被奇怪地留空了。
Takeaway：把简介和案例放在一开始最重要的位置，接下来的模块则没有唯一的方案，需要大家自己做出符合自己团队情况的判断。
若页面很长，则为读者提供定位导航
你的文档页面越长，越需要给读者清晰的认知，要让他们知道这个页面里会包含哪些内容以及当前所处的位置。纵向的定位导航栏是个不错的方案：一直固定存在于页面右侧，在滚动时同步追踪位置，并且可以包含子标题。
Morningstar Design System 在文档页面右侧设计了一个两级的定位导航栏
请点击输入图片描述
Takeaway：不论选择哪种形式，最重要的是在整个系统中保持逻辑一致，符合读者的预期与心理模型。
展示设计？展示代码？还是都展示？
把设计和代码融合，就会有读者只对其中一个方面感兴趣，他们会提出自己的意见：
设计负责人可能会问到：我能把这些代码案例和指南隐藏掉嘛？
工程师可能会问：我能把这些和设计规范有关的文字隐藏掉嘛？
可以考虑加一个选项或按钮来允许隐藏设计/代码内容。比如：
Design Only：把代码指南、代码片段和属性表等等都隐藏起来
Code Only：把视觉样式指南和文案指南都隐藏，但还是要把一部分交互用法指南保留着，这对工程师们也有用。
UI设计具体有什么要求
1、保证界面清晰
清晰的界面，是每个UI设计师都必须遵从的原则。一个让用户看起来非常模糊，主题杂乱的界面会让用户对这个软件产生一种厌烦感，还会让用户产生视觉疲劳。所以一个优秀的UI设计师第一要求就是要建立一个清晰的界面，提高用户体验。
2、实现软件简洁
对于UI设计来说，仅仅有个清晰的界面是远远不够的。一个好的UI设计产品，还要给用户一个简洁的感觉，让用户对软件产生一个好的第一印象。简洁的 UI 设计会让用户在最短的时间内找到自己想要的内容，避免一些不方便的功能影响了用户的使用。
3、给用户熟悉感
熟悉感，主要指的是UI设计要保证用户在使用过程中延续用户的操作性，不要让功能一会变成这个一会变成那个，严重影响了用户对软件操作的熟练性。比如：删除或者是倒退的按钮在右下角，你不可能放在功能键附近;有的链接的位置你也不能放在经常按键的位置。
4、多和用户进行交流沟通
UI设计，即交互设计，是关乎用户界面的问题，UI设计的最终目标就是要提升用户体验，让软件更加满足用户的操作需求，这样才能提高软件在市场上的受欢迎度，获得大众的认可，才能为互联网公司未来融资打下基础。
5、保持一致风格
UI设计要求中还有一个要求就是要让整个产品风格一致，比如要让整个产品采用扁平化模式，不能出现首页和栏目页不一致的情况。另外，产品的颜色搭配和字体、布局也要保证统一，让用户使用的更加舒心，不会产生错愕的感觉。
UI设计规范都包含哪些规范
1.基础规范
基础规范我划分的是组成页面最小的元素、是最基础的一步。基础规范有文字、颜色、布局层级、图形、分割线等。
2.组件规范
组件规范是由两个元素组成，且可点击的控件。组件规范有按钮、导航栏、搜索框、tab栏、列表、表格、筛选器等。
3.模块规范&banner运营规范
模块规范是一个大的板块，如金刚区、列表流、图片流等;因为banner运营是一个很复杂的模块，需要单独定义规范。
4.特殊状态规范
设计场景中一些特殊的状态，也是我们设计时经常忽略的地方。特殊状态规范有弹窗、空白页、加载态、toast浮层、启动图等等。
通过这四种规范的建立，UI设计规范已经很全面、细致了，希望大家在做设计的过程中善于总结归纳，同时积极主动的去建立规范、建立组建库。逐步的去解放自己的时间、成本，去做一些更具有创造力的工作，减少重复性工作。
UI设计规范详解，一起来看看！
1.行高
参考3C原理，不明白可以百度搜，英文的行高是字号的1.2倍，但是中英文字体原因，中文字体一般是1.5-2倍之间，我们需要充分考虑不同人群特点，老人，儿童，年轻人，以及使用环境。
英文的行高一般为字体1.2倍，比如你字号是20号，那么行高24，当然也有很多国外设计师采用黄金比例的行高，比如1.414倍，1.618倍，1.717倍数等等。中文常用的行高，一般为字体大小的1.5倍比较合适，当然也可以一些简单的做法，就是字号+4原则，比如你字号是20，你的行高24，字号28，行高32也是可行的，每个团队可以根据需求去定义。
2.字重
字重，顾名思义就是字体粗细，越来越多的产品需要通过字体粗细来拉开信息层次，当下主流趋势iOS11中也是通过字重来拉开信息层级的，所以在定义字体规范时候也需要重复考虑进去什么时候用什么字体。
3.网格设计策略
(1). 定最小单位
先定义最小单位，单位越小页面越紧凑，目前常用比较多的有，4，5，8，假设我们最小单位是4为倍数，那我们所有的间距都按照8的倍数递增，得到间距规则，8，16，20，40，60。
(2). 按增量设计
界面中所有的间距地方，全部运用8，16，20，40，60这几个原则来做设计，保证页面统一性。页面中的元素高度，比如banner高度也是按照间距增量去设计高度，那么整个页面就更加有系统性和科学性。在做系统设计时候经常用到的，通过增量来做设计，希望大家都可以掌握这种间距原则!
4.图形
图形是界面中的灵魂，图形也是很好传递视觉语言很重要的一部分，如何保证图形一致性，打造界面中视觉记忆点，这个点很大，展开来讲很多，包括品牌符号、icon插画元素一系列等等。
以上就是青藤小编关于UI设计规范的相关分享，希望对大家有所帮助，想要了解更多相关内容，欢迎大家及时在本平台进行查看哦!
ui设计规范文档怎么写
ui设计规范；ui设计规范有哪些？这个问题对于ui设计师来说应该是比较关心的吧，因为作为ui设计师，ui整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作还是推动产品开发，你的设计规范是否完善，对产品的质量起着决定性的关键作用。那么我们今天就来聊聊这个问题吧！
ui设计规范有几大分类组成：
1、Logo
品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。将产品中所使用到的Logo统一分类，以下引用Moby’s Petshop UI Style Guide的Logo资源例举说明。
Moby’s Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的使用也需要考虑到Footer黑色背景下的Logo。所以用Logo的横竖向排版和单个Logo图形来分类更好。
分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。
2、标准色
颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词，明确用于什么界面。
以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。
对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。
在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。
3、字体
字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。
4、段落设置
在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。
需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义。
5、图标
图标是重要的软件标识，在设计资源中是最重要的模块之一。在软件产品中甚至可能每个页面都存在图标，图标除了美化的作用以外，还有着明确指代含义的计算机图形。
具体分为以下三个作用：
图标是与其它网站链接以及让其它网站链接的标志和门户。图标是网站形象的重要体现。图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。
6、图片
图片也是属于设计规范最重要的部分之一，按照用途分类整理图片资源，设计风格系统化。
7、度量
在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。
对度量解释最好的是设计中经常使用到的栅格系统（Grid Systems），运用固定的格子设计版面布局，其风格工整简洁。这就是我们在网页和APP设计的过程中经常使用到栅格系统的原因。
8、阴影
阴影风格及参数也是设计规范中的一部分，在整理设计规范的时候，需要注意的是阴影的参数值是网页中控制阴影的参数值，而不是设计软件中的参数值。
举个例子：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，这才是程序员需要的阴影参数值，否则最终开发出来的阴影会出现不一致的情况，无法达到规范的目的。
9、组件
常用的UI组件（Component）：Button控件、下拉框、选择框（单选\复选框）、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。
Button控件
按钮是最常见的组件之一，按钮有5个状态：Normal、Hover、Active、Disabled 、Loading。
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外还需要标注icon和按钮文本之间的间距和icon图标的大小。
10、下拉框
下拉框是为用户提供多个选择的单选组件，优点是用最简单的界面布局方式收纳了很多的选项，需要注意定义下拉选择框弹出的时候，鼠标移动上去的Normal、Hover、Active状态。
11、选择框（单选\复选框）
顾名思义，单选框是众多选择里面选一个，而复选框是众多选择里面可以无限制选择。单选框和复选框都需要三个状态，即未选中状态、选中状态和不可点击状态。
时间选择器：
时间选择器是选择年月日的组件，分别对应年月日星期的信息，在设计的时候需要考虑到4个状态，分别是：Select、Not_Select、Hover和Disable，并且写进设计规范。
输入框：
输入文本框是我们软件产品设计必不可少的组件，文本输入框有4个状态：Normal、Active、Disable和Error。
搜索框：
和输入框相同的地方是都需要聚焦然后输入内容完成操作，应该有为Normal、Active、搜索下拉状态、Error状态。
进度条：
这个需要在规范中注明上传进度条的整个交互操作流程，对Normal状态、点击上传/拖拽上传状态、上传中、上传成功、上传失败，整个流程状态的整理。在上传过程中，任何用户操作都应该有及时响应的动作，这样用户在使用的过程中才不会迷茫。
分页器：
分页器是用于切换内容页面的复合组件，常规的分页器有上下页操作按钮、分页页码按钮、输入页码手动查找的搜索框，以及分页器的4个状态：Normal、Hover 、Active、Disabled。
提示框：
提示框是一个事件触发弹出面板显示的组件，经常使用提示框的地方是，删除按钮、疑难问题点、提示类弹出信息等。这个风格设计就比较多了，设计风格各不相同，定义底板样式、文字样式和阴影参数。
警告框：
页面报错时的显示样式，常用的警告类信息是：操作成功、提醒用户注意、警告用户注意等。
表格：
表格类信息居多，应重点整理表格样式以及文本颜色大小。
弹出面板：
弹出面板主要由4个部分组成，分别是面板内的文本信息、按钮、面板大小样式、蒙版颜色和透明度。
数字步进器：
数字步进器属于复合类型的组件，可以理解为按钮和输入框联动的组件，所以输入框和按钮拥有的属性状态，步进器都有。
选项卡：
切换选项卡即切换内容，和下拉选择框不同的是，选项卡是将多个选项都排列出来的单选组件，需要考虑4个状态：Normal 、Hover 、Active 、Disabled 。
ui设计规范，ui设计规范有哪些？这个问题介绍到这里就介绍完了，现在你清楚ui设计了吗？设计规范对整个项目的规范性推动很强大，但是需要花时间和耐心细心打磨，所以需要花费很多时间和精力去整理资料、编辑素材、分类整合，最后还要在设计软件中将整个规范重新排列设计。如果你还有其他关于ui设计的问题欢迎持续关注易夏岚或者与我进行交流~
UI设计规范
概念，灵感，方法和工具概念：设计互联网产品，Style Guide / Pattern Library 和纯粹的 Specification 各具不同功能和作用，却都含“设计规范”的概念。1. Style Guide / Pattern Library：偏重视觉概念，一般以文档或图像格式呈现（不限定）。内容：对设计作品中的字体（Typeface）、字型（Font）、色板、品牌标识规范（Brand Guideline）、Icon 等要素作出展示和说明。主要作用于设计团队或设计师之间，展示产品的视觉设计风格。便于风格复用，规范第三方的品牌塑造（Branding）和接入。实例参考（更多参考下文中“灵感”）：Brand Assets | KickstarterLogos & branding | Dropbox2. Style Guide / Pattern Library：偏重（Web 前端）开发概念，基本都以网页文档形式呈现。内容：对界面元素（UI Elements）的样式风格及实现其效果所对应的代码片段（HTML, CSS）作出说明解释，包含交互和动效设计（以 JavaScript 为主，更多信息参考：界面动效设计方法有哪些？）。例如：常见的基础布局（Grid System）、字体排版（Typography）、按钮、菜单、列表、对话框（Dialog）、Tooltip 等等。用于团队 Web 设计和开发协作，统一产品风格。复用时提升工作效率，同时也保证用户体验质量。实例参考（更多参考下文中“灵感”）：Pattern Library | MailChimpMapbox styleguide | Mapbox概念 1 和 2 结合的实例（更多参考下文中“灵感”）：Product Style Guide, Visual guidelines | SalesforceStyle Guide | Lonely Planet3. Specification (Spec)：介于设计与开发之间，由设计师直接在视觉稿（Mockup）中创建。内容：主要由 Annotation（注释，国内俗称“标注”）和 Measurement（量度）构成。Annotation 既注释设计稿中界面元素所使用的字体字型、色值等，Measurement 则注明各元素的尺寸及它们的边距，留白等。用于设计师与开发人员之间沟通和工作交接，保证开发出地产品界面和视觉稿高度统一。______________________________________________________________________________________灵感：一些常用的项目和文档都有采用上述的“概念”，比如采用了概念 1 的：iOS Human Interface GuidelinesMaterial Guidelines采用概念 2 的：SkeletonPureBootstrap而概念 3 往往仅在公司或团队内部使用（详见下文“工具”）。灵感和实例资源：Website Style Guide Resources | 收录大量案例，该项目同时也收录了相关文章、工具、书籍、播客等。Find Guidelines | 一个直观的 Guideline 官方链接收集列表。Brand Style Guide Examples | 同上All The Style Guides | 同上，托管在 Tumblr ，以博客形式呈现。______________________________________________________________________________________方法和工具：1. Style Guide / Pattern Library：方法不限，以能够准确展现视觉设计风格和品牌识别（Identity）的规范为标准。正因其偏视觉化，编写文档不是必须的，可直接用图形编辑软件产出。例如：Airbnb UI Toolkit WebSalesforce1 UI KitHousing UI Style Guide也可借助工具：Style Inventory for Sketch | Sketch 插件，基于视觉稿生成 “Style Guide”。Style Tiles | 用于快速制作“Style Guide”的 PSD 模版，Frontify Style Guide | Frontify 是一个面向设计团队的协作平台，提供“Style Guide”生成和“Spec”工具。CSS Stats | 解析 URl 对应网站的 Style（主要依靠分析 CSS 文件），展示相关信息，比如字体尺寸（font-size）、色板、浮动（float）采用数量等。Stylify Me | 填入网站 URL，自动生成对应页面的“Style Guide”。提供 PDF 文件保存。2. Style Guide / Pattern Library：因要制作出网页文档，且其中含有大量的 Web 组件（代码片段）和元素（视觉），可借助前端框架高效产出，比如相对大众的 Bootstrap，Semantic UI。在大量的自由和开源前端框架项目中，选择有维护支持，自身喜欢或熟悉的即可。可用工具：设计师 Brad Frost 有一套叫做“原子设计（Atomic Design）”的 Web 设计理论，在该领域有一定影响，其核心概念就是复用“Pattern Library”，高率生产 Web 页面：Atomic Design | Brad Frost他为该理论创建了一个开源项目，基于 PHP：Pattern Lab | Build Atomic Design SystemsWeb Starter Kit（HTML, CSS, JS） | Google Web Fundamentals 提供的 Web 生产样板，支持创建“Pattern Library”形式的文档。Style Guide Boilerplate（PHP） | “Pattern Library”样板，类似 Pattern Lab。更多方法类文章和工具列表可参考：Website Style Guide Resources50 Style Guide Tools, Articles, Books and Resources | Tuts+3. Specification (Spec)：“Spec”应以尽量降低设计师精力消耗，并能让开发人员清晰理解为标准。提高效率并保证质量的基础，是选择合适的工具。在绘制设计稿所用的图形编辑软件中启用扩展和插件，直接生产“Spec”，高效直击主题：specKing | Photoshop（$19，推荐，正在使用）Specctr | Photoshop, Illustrator（$49 ,PS 和 AI 单独出售）Markly App | Photoshop, Sketch（$39.99，PS 和 Sketch 单独出售）Sketch Measure | Sketch（自由）一些其他插件也提供制作“Spec”功能，比如：PNG EXPRESS | Automated Design Delivery for Photoshop（$29）Ink | A Photoshop documentor plugin（免费）团队协作平台和其他工具：Avocode | 简化设计师与开发人员之间的协作流程（Web 产品），提供 Slice（切图）、Spec、图层转 CSS 等功能。Zeplin | 同样是一款有质量的设计协作软件。目前仅支持 Sketch 设计稿，PS 支持仍在开发中。产品处于邀请内侧阶段。Frontify | 上文“Style Guide 工具”提到过，属协作平台，支持对设计稿“Spec”。Assistor PS | 可独立在系统中运行的 PS 协助软件，但需借用 PS 载入设计文档。提供 Slice，Spec 等功能。
ui设计规范有哪些
界面设计尺寸及栏高度
边距和间距
内容布局
界面图片设计比例
建立统一风格的图标
APP版式设计规范
界面文字设计规范
设计适配
切图规范
设计稿标注
手机UI设计的基本规范
大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。
而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。
那我们就来看看安卓和iOS的具体有哪些界面规范。
一、iOS界面规范
首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。
苹果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。
来分析一下界面的尺寸规范：
首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。
而下边的底部栏（导航栏）高度则为98px。
注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？
☆ 关于图标部分
苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。
整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。
☆ 关于分割线部分
注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。
☆ 关于板块与板块之间
板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？
☆ 关于列表中的尺寸规范以及字体要求
☆ 关于左右间隔的安全区域
这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。
☆ 关于切换按钮的尺寸
☆ 关于字体
iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。
主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
关于苹果界面的小部分尺寸规范就介绍到这里，下期再做安卓界面的尺寸介绍。
作为UI设计师，一定要具体掌握界面的大小尺寸来适应美学观点，让人感觉协调舒适，能在有效的范围内极快吸引用户的注意力。
二、安卓界面规范
众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体，英文字体为robot字体。
只使用偶数单位 24 pt，28 pt，36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？
讲图标之前先来分析一下一排英文的意思：
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。
px是像素的意思， 不同设备显示效果相同。
安卓各屏幕密度关系如下：
3、图标
不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：
系统图标的尺寸：
快捷图标的尺寸：
应用图标的尺寸：
4、应用栏的尺寸
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。
如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~
安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。
所以作为UI设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。
