产品设计中的UI设计规范

说起设计规范，各家无论是产品层面的亦或者是系统层面，大家的格式各不相同。但总体结构和要点基本类似，iOS和Android给我们提供了两个最典型的设计规范范本。

什么是设计规范

那么什么是规范？其指的是明文规定或约定俗成的标准，使某一行为或活动达到或超越规定的标准。说白了就是一种标准——为了在一定的范围内获得最佳秩序，经协商一致制定并由公认机构批准，共同使用的和重复使用的一种规范性文件。

[意味深长与历久弥新之美，蕴涵于简约之中，于清晰之中，于高效之中。真正的简约远不止是删繁就简，而是在纷繁里建立秩序。——Jonathan Ive]

具体到产品，具体到设计，具体到UI。互联网中产品设计规范，即，将产品的一般常见视觉样式、交互行为从实用性、功能性、统一性、美观度4个维度出发，根据公司实际产品业务目标，制定出符合产品功能的所有相关设计组件与相应的设计样式。

规范的意义及要点

指导性

在产品设计到了一定阶段，不可避免的设计团队会不断扩大，产品设计涉及面也会越来越广。而恰恰设计的开放度是很强的，一个产品既可以这样设计，亦可以那样设计，纯粹从设计上看，设计并没有绝对的对错，只有适合和不适合之分。你不能说一个界面采用红色就是错了，蓝色就是对的，而是指在当前产品和考虑下红色是更加适合的。所以基于此，此时我们就需要在一个设计团队中建立一套统一的规范，以统一各个设计人员的设计思想。让设计团队能朝着同一方向去做产品设计，从而满足产品设计要求。

好的设计规范，团队成员能高效地给出既能满足业务需求，又能让用户轻易完成操作目标的设计。到了某一阶段，规范会提高效率，改善产品，让产品和团队都能够更加清晰的了解产品特性。

有效性

此为两层含义：1）从设计团队本身来看，从源头上规范了设计样式，总结归纳出产品各种已有模式或模板合集。根据产品的业务目标来得出产品功能需求，然后根据用户目标和使用场景，针对各种可能性，给出了合理且可用的处理方式。这样一来，设计人员在面对类似的设计场景的时候可以快速的套用规范中所阐述的设计样式。这样无需重新推敲、反复验证，大大节省了设计时间。

2）从部门合作来看，我们在部门合作中常常会涉及到各种各样的工作交流。当然也包括了许多重复性沟通，有些设计（可具体为页面）看似不同但是拆解后可发现其实是各个设计组件的排列组合。所以我们制定规范，提取其中共性相同的组件，加以说明阐述，或者制作成模板，从点出发解决面的问题。通过对规范的学习熟悉，让其开发等其他部门充分了解设计的共性问题，让其在碰到类似场景是能做到有据可循，长期以往大大减少一些重复性沟通，也能让开发部门理解设计的内在思考，提高工作效率。

复用性

开发部门都在强调代码的复用性，代码书写规范。设计部门也是如此，设计规范给出的设计可以在产品设计中可重复使用，这正是其精髓所在。之所以为规范，因为它能做到高度归纳，将设计中的一些共性、通性问题归纳总结，统一处理使其具有高度的传承性。比如按钮样式，一般地，在同一个使用场景下中存在两种风格样式的按钮样式，这样不仅会使的产出的设计得不到统一，更会让使用的用户产生疑惑。复用性高也就意味着统一性强，让不论是设计部门、合作部门、使用用户看到的页面后能清楚的意识到这是出自于同一个产品。

总结来说，一份优秀的设计规范可以：

· 对视觉设计团队来说，能让产品设计从源头开始就保持高度的统一性。另一方面，即使团队中如果有人员流动，优秀的规范也能让新同学来到团队后对于当前产品设计迅速上手，避免设计中出现大的偏差。

· 对于开发部门来说，能减少大量的重复性工作，根据视觉规范制作出一份复用性高的开发文档，全站引用，复用性高，即使特殊情况也只需重新编写少部分代码即可，提高效率。

· 对用户来说，统一的设计语言贯穿整个产品中，降低用户的学习成本，避免对使用场景产生疑惑，让用户更专注于内容。

HIG / MD设计规范

UI设计师最熟悉的莫过于iOS/Andriod的设计规范了。确实，这两个系统级别的规范已经成了每个UI设计师必读的设计规范了。

iOS HIG

即iOS Human Interface Guidelines，是苹果在推出iOS系统时，给设计人员输出的人机界面指南。里面充分阐述了iOS设计的前因后果和一些UI设计规范。在指南里，几乎涉及到了绝大部分你所能碰到的不同场景下不同的设计解决方案。（传送门：https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/）

Material Design

Material Design是Android 操作系统最新设计规范。Material Design，谷歌从开篇就表达期望打造一个全新的底层设计规范，继而用这个规范去统一各应用、各平台间的设计和用户体验。（传送门：http://www.google.com/design/spec/material-design/introduction.html）

如何输出设计规范

那么，我们改如何制作一份实用性强的设计规范呢？

产品出不同的阶段、公司处在不同的阶段、公司团队处在不同阶段，都会导致设计团队需要输出不同的设计规范，需要分情况而定。至于如何输出一份设计规范，可以单独拎出来去说。

怎样才能让规范在工作流中起到作用

最后，有了规范之后，怎样才能让手中的设计规范发挥出最大的作用？在设计团队还是部门合作中发挥它应有的作用呢？毕竟，无论你规范做的再完美，没有得到很好地执行和贯彻那一切都是白搭。

从两个角度出发：

1）从设计团队来讲，一旦规范完成，就必须在设计团队内达成共识。设计人员需要比谁都清楚规范的内容，这里所说的不仅仅是做到熟读，还要充分理解，不仅要知道碰到某种情况该怎么设计还有明白为什么这么设计。试想，如果设计人员自己都不清楚规范，那又谈何产出统一性很高的产品？其次，需要设计人员有高度的执行力，规范中提及的情况在遇到相同的问题的时候一定也必须按照规范上的样式或风格设计不能再重新创造出另一种设计方案（除非遇到特殊的情况需要商榷的）。做到「不管是谁只要遵循了规范输出的设计都是高度一致的」的效果。如果要尝试更加优秀的设计解决方案要先在内部讨论验证，通过之后要从规范这个源头改起，然后逐层往下并通知所有设计成员，传达改动内容与原因，最后再统一更新给规范所有阅读对象部门。

2）从部门合作，一份完整的设计规范绝不仅仅只在设计团队中传阅。要PM、设计、RD 等凡是参与到产品的各个合作部门都得去了解。尤其是与设计部门关联密切，直接影响产品成品的开发部门，更是需要充分理解规范的每个细节。另一方面，设计团队也需要安排相关人员进行讲解跟踪落实。另外还需要输出专门规范文档，以供相关人员随时查阅。

总而言之，建立产品设计中UI规范是十分必要的。但不是盲目，需要适时地做，分不同阶段，不同情况去做。比如，在项目初期，产品没有经过迭代，设计风格没有经过沉淀，设计人员又不是很多的情况下我们就无需急着去建立一个设计规范。事实上，这个是设计规范的作用并不能很好的体现出来。

另外，一旦完成了规范输出，就要贯彻执行，接收反馈，总结不足，不断优化。这样才能让设计规范起到它应有的作用，提高工作效率。

毕竟提高工作效率才是我们最终的目的。