从产品经理角度聊聊设计系统与技术那些事儿

第一次接触“VUE”和”REACT”这两个技术名词是在学习梳理阿里设计语言antdesign的时候了解到的，当前多数互联网公司渐渐开始运用这两个框架技术。所以想结合近期一直做的B端项目（已隐去实际业务属性），和梳理的一些design system相关的理解，谈谈设计与技术之间的一些看法。

一

技术前后端划分与产品前后端划分

作为产品经理，你是如何划分产品的前后端的？是否也是一般按业务的使用者对产品进行划分，例如淘宝的用户端、商家端，或者滴滴的乘客端、司机端、运营后台；甚至司机端还可以再细分网约车司机端、代驾司机端等。当然，也可能按照业务模块进行划分，例如物流系统、支付系统、订单系统、财务系统、CRM系统等。

产品经理眼中的前后端

不同行业的用户端、商家端、运营管理后台或中台不尽相同，但是从理解分类上应该是一致的。此外还有不少人认为iOS和Android开发也是后端的（早期的时候我就犯过此类错误，数据报错了急匆匆去找iOS开发处理，结果…）。

开发眼中的前后端区分

前端负责“用户看得见”的内容，将UI稿转换成网页、APP、电脑软件等，同时实现所有交互事件，例如用户点击、滑动、拖动等操作。后端需要去实现各种业务逻辑，订单流转、登入登出及权限管理、实现数据的存储导出、进行不同系统间的对接等等。说到底，了解了前后端的分工对我们产品经理或设计师而言的意义不仅仅是出现bug的时候可以直接找到相应开发，更在于设计好我们的产品功能。

二

设计系统与技术

“设计系统”这个概念之前听说过，但是未进行深究。最近在总结设计规范，复盘设计组件运用规律的时候发现一个优秀“设计系统”必然是与技术紧密相连的。Alla Kholmatova在《Design System》中有如此描述：在产品设计中，通过熟知的技术框架和原理，有效合理的利用设计pattern元素，可以有效的提高团队工作效率，赋能企业产品商业价值。

既如此，我们就需要明确何为“设计系统”？所谓“设计系统”即是：是一组为了共同的目标而服务的内在相互联系的Design pattern（ Pattern是指我们用于创建界面的重复的元素，它可以用于解决特定的设计问题。如用户流程、交互方式、按钮、输入框、图标、颜色、字体等 ）和多人协同执行的方法。

当然设计系统与技术之间的联系并不仅仅是上图所示那样简单。具体的还需要我们产品经理做更多的思考，不仅是需要有战略眼光、商业视角，以及团队协调能力和基本的产品设计能力。在一个完整的产品技能树中，产品的设计其实是非常基础的一项能力，这是初级产品经理侧重的方面，对于中高级产品经理而言，考虑产品的整体性、效率实施、商业价值实现、团队质量把控才是侧重的。

2.1

设计系统于实际案例中应用

对于设计系统的理解，其实最好的学习资源自然要属antdesign，此处，不做具体细说，有需要的可以去深入看看。我想说的是，对于设计系统而言，我们需要从原子设计理论来理解感觉会更合适。

产品经理之所以需要统筹团队或者说协调团队，主要是因为涉及到业务和界面交互两个领域的事情。业务涉及的是如何为公司产品探索出可以商业化或变现的方式或途径，而界面交互主要是涉及视觉呈现和交互体验的方面。所以，比较大的团队都是进行了细致化的划分。而有的则是产品经理除把控业务还需要把控交互体验。

设计系统由上图来说，主要涉及的是界面交互问题。具体业务的流程，依据不同公司，不同行业的不同，自然也会不同。设计系统结合不同的业务流程进行套版，就成为不同的产品，可以服务不同的商业场景。

2.2

技术的前后端分离与设计系统

对于前端工程师来说，后端工程师的唯一产出就是数据，包括用于服务器渲染HTML模版的初始数据和客户端请求返回的数据。明确了各自的分工后，我们分别从开发、测试和部署3个方面分析前后端分离要解决哪些问题。

用户可见的界面、进行的交互操作就是前端负责，业务的逻辑、流程、数据的处理就是后端的职责。

这篇分享侧重于一种思考方式或者说是一种理解，在阐述上加入了不少自己的看法。其中难免有谬误的地方，欢迎交流学习。

点 在看～

捧个人场 就 行～

关注一起努力向前，重启2020