[设计师篇-第1期]答疑：前端常说的前端框架，是指各类组件库吗 ？

先说答案：不是，但组件库和前端框架有关系。请往下看

咱们先来个通俗的理解

1. 前端写代码，干活，写业务，有点相似种地的感受(码农 哈哈哈哈哈，你为什笑的这么开心😓)

2. 种地须要工具对吧。而 Javascript 就是生铁疙瘩，你拿铁疙瘩去种地，效率很低。即便给这个铁疙瘩包了很漂亮的锡纸（CSS），效率仍是很低。

3. 人群中有一些聪明绝顶的家伙（😂），想了些办法，把这些铁疙瘩，进行了炼化，把他们作成了 熟铁（Vue、React 等开发框架）

4. 因而又有人用这些熟铁，作成了各类零件（组件）

   1. 车灯（button）
   2. 座椅（表格）
   3. 发动机（轮播图）
   4. 轮子（日期选择器）

5. 把这些零件拼接在一块儿，就成了拖拉机、汽车、收割机 ，极大提升了生产效率。这里的拖拉机、汽车，就是你们的在工做中，在 sketch 中用各类组件作的 A后台，B管理系统

6. 而你在使用sketch的时候，你的同事可能会问你:

   Hi，你的按钮、下拉菜单作的不错，能分享给我吗？`

   因而你就把它存成一个组件分享给你的同事了，后来，你同事有点不想整了，直接和你说：

   你还能把按钮、轮播图、表格、下拉菜单、日期选择器、导航条 都分享给我啊？

   你和他说

   阿西吧，奶茶拿来！

常见的设计规范/组件库的 按钮

1. material design
2. bootstrap
3. element
4. ant design
5. sales force

这是 按钮的一些规范，能够发现大部分是相同的。 这时候，就能够发现了：和sketch相似，不管是 PC 端的 UI 设计仍是移动端的 UI 设计，页面都是由每一个模块拼接组成（功能点组成）。 而这些模块再进行拆分，发现均可以由一些基础组件拼接而成，基础组件列表不外乎以下这些，这也是design system 构建的基础。

• Button
• Icon
• Dropdown
• Menu
• Select
• Steps
• Form
• DatePicker
• DateRangePicker
• MonthPicker
• Checkbox
• Radio
• Switch
• Input
• Input-Number
• TextArea
• Rate
• Loading

这也是最近可能比较火的设计理念吧：原子设计。

从前端的角度来讲，原子设计貌似是一件理所固然的事情，毕竟全部的大东西都是靠这小东西拼接而成的，因此对工程师来讲，作小东西是划算的，这样比较灵活 + 复用性比较强，可以应对更多的场景和需求。 说白了：这样可以提升工做效率，方便扩展，也可以知足设计师的大部分需求

设计和前端合做的一些基础知识

不知道你是否知道，前端通常的开发语言为：JavaScript + CSS + HTML

其中：

1. JavaScript 为主，负责交互逻辑 + 业务逻辑
2. CSS负责样式，用来负责装饰页面是否美观
3. HTML 最次之，用来负责总体骨架（能够忽略）

前端工程师70%的时间是和JavaScript打交道的(我的经验之谈)

1. 其中以 JavaScript 为主，CSS 为辅， HTML 最次之(我的见解)

2. 你们在开发的过程当中，一些业界大牛不光技术很厉害，思想也很厉害，好比Twitter 的两位，一位前端工程师 + 一位设计师，发现Twitter的不少地方都用到了样式相同的

   1. 按钮（静态的，偏向于静态，多数只是展现使用，）
   2. 卡片、导航条等等，这些都是相对偏静态的

3. 除了这些静态的，还有一些不光样式相同，还有一些交互也很类似的，好比：

   1. 弹窗（modal）

   1. 独立于页面之上，中间是一个矩形的区域，用于操做，四周是偏向于透明的黑色（样式统一）
   2. 点击中间的区域的取消、或者右上角的关闭、或者按键盘的 Esc 都会关闭这个弹框（交互统一）

   2. 表格
   3. 下拉菜单
   4. 轮播图

4. 以上这些，在长期的项目演进迭代过程当中，Twitter的两位发现，这些东东均可以进行抽象，把不一样平台的弹框、表格、下拉菜单、轮播图的样式和交互进行尽可能统一，通过迭代和演进。有一天，有一个叫Bootstrap 的东东问世了

解答问题：前端常说的前端框架，是指各类组件库吗

1. 前端说的组件库：是指在各大Design System的指导下，经过某种前端框架进行开发落地的东东。
2. 有点在马克思主义的引导下，进行社会主义建设的感受。
3. Design System === 前端UI 的设计规范
4. 这里的前端框架，如今多数指的是 Vue、React、Angular 这三个主流开发框架了
5. 这算是开发层面的东西了，和设计师同窗也是有关系的（关系不大，但了解这些开发语言 和 设计师之间的关系，可能更好）

这里的 在 Design System 指导下，进行开发落地，通常是须要指定一种前端框架的

意味着：

1. 其对应的开发者众多，众人拾柴火焰高，好比国内使用 Vue、React 的比较多。
2. 也就是说，在某个设计规范(好比Material Design) + 前端框架(好比React) 对应的组件库会更完善
3. 若是有了bug，修复的时间和效率也更高

实际工做

这里的 在 Design System 指导下，进行开发落地，通常是须要指定一种前端框架的。 好比国内使用 Vue、React 的比较多，也就表明着其对应的开发者众多，众人拾柴火焰高，也就是说，《这些开发语言 + 某个设计规范》的组件库会更完善，有了bug，fix 的效率也更高

回到这里，在决定作设计稿以前以前，能够找大家的工程师问下，他们用的组件库是什么？这个组件库背后的设计团队，有没有对外输出 Sketch 文件

据我所知，国内的 饿了么UED、蚂蚁金服UED 会产出：设计规范 + Sketch + 在设计规范指导下的，代码组件库

特别是在大家项目已经采用一些组件库或者框架的前提下，最好提早沟通。 不然可能会出现：开发会抗拒你设计的新的东西

1. 你们毕竟不想从头开始作。接触一个新的设计规范，极可能意味着其不成熟，可能设计规范说的很明白的，好比对表格的每一行的高度都有说明，但苦逼的是，没有人写代码去落地，致使空有理论
2. 这也是开发最抵触的地方：没有人去落地，最终多是大家开发去落地，在国内这种大环境下，老大无论你采用什么设计规范，只要最终项目可以定期上线便可，因此也请设计师同窗多多理解开发同窗吧
3. 毕竟双方的编辑成本不一样：设计师同窗在sketch上一个小时作的，可能开发们，要作两三天，并且还要考虑不少实际的交互问题，和后端工程师的数据交互，异常状况处理等等问题，还有就是代码的扩展性等等问题 😂

完结撒花 🎉🎉🎉🎉🎉