前端开发者需要了解的「设计体系」 - 掘金

如果你是一个React技术栈，PC中后台的前端开发工程师，一定知道 Ant Design，并且熟练使用Antd的组件进行前端开发。但是你阅读过 Ant Design 的设计体系，并且知道其是如何帮助产品和设计师进行产品设计工作的吗？

假如碰到以下 2 个问题：

• 你是否经常和设计师、产品就页面交互和展示不合理进行讨论，但是无法有效达成一致？
• 你是否可以在没有设计师的情况下，实现一个交互体验、UI 界面都还“不错”的后台页面吗？

从上述2个问题的思考延展出一个话题：作为一名前端开发者，需要了解下什么是设计体系

以下知识点都出自于《设计体系：数字产品设计的系统化方法》

设计体系是什么

设计体系为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。使用对象是产品经理和设计师。

1. 产品目的决定了要采用的设计模式。
2. 模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
3. 共享实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。PS：第三点内容不在这期分享范围内，后续有机会，可以结合古茗前端和UE的协同模式和产出结果再分享。

1.1 设计模式

设计模式是一种用于解决特定设计问题的可复现、可复用的方案。

在数字产品设计过程中，设计模式受三部分内容影响。

• 首先，产品所属的领域及其核心功能影响了功能性模式（functional pattern）
• 其次，产品的精神（或者品牌——取决于对品牌的定义）也形成了塑造产品调性的模式，也叫做感知性模式（perceptual pattern）
• 模式还会受平台的惯例影响，例如PC web，IOS, Android

产品与众不同的原因并不在于它所使用的模式的新颖性，而在于这些模式的运用方式，以及它们如何相互配合以实现特定的设计目的。

设计体系的一个主要目标就是“扩展创意方向”。需要将模式明确地阐述并且分享出来。才可以让团队持续可靠地遵循创意方向。