UI 设计师必备的一项基础能力：规范能力。

为了避免重复造轮子，反复掉入同样的陷阱，阅读并熟知主流平台的设计规范，是非常有帮助的。

本文内容主要介绍了iOS 、Android、Ant Design的相关规范，为的是不重复累赘描述同一个知识点，涉及到移动端和PC端，主要为了帮助基础同学学习，适当地删减了一些有难度的规范。

设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。

一、设计规范的价值 

1.确保界面的统一性(界面) 

通过设计规范的约束，保证产品的色彩使用、图标图形、空间、文字、页面布局等内容保证严格的一致性。 

2.技术及品牌的延续 

规范能延续产品风格及特性，保证产品视觉及交互层面的统一，包括技术带来的变革，增强用户的认知性，不同程度得提升用户体验。

3.协同工作提高效率(设计) 

多人合作完成一个项目时，需要视觉规范。遵循设计规范，保证视觉统一、提高工作效率。

4.指导搭建框架及布局(开发) 

辅助技术层搭建框架及布局的规则更清晰明确，如按钮、颜色、字体大小等，提高开发效率，确保应用软件最终实现效果与视觉设计相符合。

二、视觉规范 

视觉设计规范是指对设计的具体技术要求，是设计工作的规则。包含了目标、功能、技术指标，以及限制条件等。

（1）视觉规范的作用 

① 视觉设计规范，是量化的设计指标，具有指导性、约束性。

视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数，针对新手设计师、第三方团队，可以很好地做到经验传递，迅速了解上手。减少标注时间，提高前端开发质量。

② 视觉设计规范，是确定关键因素，要有有效性、复用性。

获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。促进多人协作，解决视觉不统⼀现象。

(2）视觉常见类别 

① 品牌规范：塑造形象以及应用的规范。主要包含了标识的标准制图，配色字体等。以及常用的搭配方式。

⼀个企业或者⼀个产品，都有相应的品牌视觉识别系统（VIS）。品牌视觉识别系统是视觉设计最好的参考基础，既然是⼀种指导体系或者说是参考，那么也相应地会有品牌的规范。

② 平台设计语言规范：平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范，主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。

③ 产品业务规范：侧重在产品设计和实现层，内容清晰并且实用，标注详尽，方便设计师们使用。更注重个性化的部分。

三、平台设计语言规范-Material Design 

https://material.io/

Material Design 规范在于统一 Google 多种平台下的一致性，代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。

谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。

1.Material Design 的作用 

从设计角度：建立共同的设计语言，将产品风格、品牌及交互形式统一起来。

从使用角度：提高产品认知度，提升品牌延续性及产品体验的一致性。

2.Material Design 的特征 

（1）环境 

Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中，虚拟灯光照射整个场景。

（2）属性

Material 有自身固定不变的外在特征和内在行为逻辑 ，理解这些固有的属性有助于实际的设计项目。

• 立体性 

• 空间位置的唯一性 

• 不可穿透 

• 形状可变化 

• 沿水平方向做变化 

• 不可弯曲 

• 能与其他材质对象合并 

• 分裂，再合并 

• 可沿任何轴上移动

（3）高度和投影

Material 借鉴了现实物理世界中的物质特性，并将其运用在虚拟三维空间中的 Material 元素上， 有利于帮助用户理解信息层级，同时可以统一各应用之间的体验。

投影提供了元素深度和运动方向的重要视觉线索；在运动中，投影提供了元素移动方向及高度变化。

四、平台设计语言规范-iOS 平台设计规范 

https://developer.apple.com/desig

iOS 设计规范逝之苹果开发者官网上面的 iOS 人机交互指南（iOS Human Interface Guideline）。制作这个规范的目的是为了让所有安装到 iOS 系统的 App 都遵从某些特定的视觉特性、交互特性，以达到风格一致的使用体验。另一层面，也是便于让设计人员和开发人员能够更好地理解 iOS 系统，更合理的运用系统提供的功能和接口，更高效地制作出 App。

1.iOS 平台设计规范的三大基本设计主题 

（1）清晰 （Clarity）

在整个 iOS 系统中，每一种尺寸下的文本信息都应该是易读的，图标应该是精确易懂的，每一个装饰应该是精巧适当的，而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。

（2）遵从（Deference）

在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互，而不会对用户的操作产生干扰。内容全屏显示时，半透明或者模糊处理的方式可以提示用户更多的内容。减少使用边框，渐变及阴影可以使界面轻 量化，突出显示内容（内容优先）。

（3）深度（Depth）

不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容，赋予了界面活力，使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感，用户在操作功能时不至于迷失。当用户在浏览内容时，流畅的转场效果提供了一种纵深感。

2.iOS 平台的设计原则 

为了最大限度地提高影响力和覆盖面，在应用设计规范时应牢记以下原则：

（1）审美完整（Aesthetic Integrity）

审美完整性体现了 App 的外观和行为与其功能的整合程度。例如，一个帮助用户执行严肃任务的 App 可以通过微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。

另一方面，沉浸式的 App，比如游戏 App等，就可以提供吸引人的外观，传递乐趣和刺激感，同时鼓励发现。

（2）一致性（Consistency）

系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例可以使得一个 App 的设计符合一致性。

（3）易用性（Direct Manipulation）

易用性指的是用户可以理解屏幕的内容，用手势、触动屏幕等动作直接操作，并且，用户通过直接操纵，可以看到他们的行动的直接的、可见的结果。

（4）反馈（Feedback）

反馈指对用户的行动进行了确认，并且通过显示行动结果以使用户了解情况。iOS 系统的 App 要为用户的每一项操作提供可感知的反馈。如：轻触时会突出显示交互元素；进度指示器会传达长时间运行的项目的状态；动画和音效有助于阐明操作的结果。

（5）隐喻（Metaphors）

当一个 App 中的虚拟元素以及动作都是用户对熟悉事物的隐喻的时候（包括现实世界和数字世界），用户会学习的更快。比如，用户移动视图来查看更多内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快的翻页。

（6）用户操控（User Control）

在整个 iOS 中，用户是掌控者，而不是 App，App可以建议一个行动方案或者警示危险后果，但 App 不能替用户做决策。

好的 App 可以在用户授权和避免不必要的结果之间找到正确的平衡。

App 可以通过交互元素，确认、取消的提醒以使得用户觉得自己在控制。

五、平台设计语言规范-Ant Design平台设计规范 

https://ant.design/index-cn

Ant Design服务于企业级产品的设计体系，常用于PC端设计规范，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

1.Ant Design平台的设计原则 

（1）亲密性

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。

（2）对齐

正如「格式塔学派」中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

（3）对比

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

（4）重复

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

（5）直接了当

正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。

eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

（6）足不出户

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

（7）简化交互

根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。

（8）提供邀请

很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。

邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。

（9）巧用过渡

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

• Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
• Receding: 与当前页无关的信息元素应采用适当方式移除。
• Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

（10）即时反映

「提供邀请」的强大体现在 交互之前 给出反馈，解决易发现性问题；「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈；「即时反应」的重要性体现在 交互之后 立即给出反馈。

就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

写在最后 

当然，这并不代表了解这些就能做出优秀的设计方案了，英文水平比较好的同学建议直接读原文，直接从 Material Design 和 iOS 的官网进行规范学习，效果更佳。当然如果英文水平有限，网上也有很多译版方便大家阅读。

而关于Ant Design的设计规范，可以去官网查阅更多的详细内容，但PC端的设计规范平台还有很多，字节、腾讯等设计官网都有。

记得对于规范不需要死记硬背，练多了自然能够记住。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司