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

小小鲁班
130 阅读7分钟

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

我们先来个通俗的理解

前提知识：前端一般的开发语言为：JavaScript + CSS + HTML 其中：

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

  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 都会关闭这个弹框（交互统一）
    1. 表格
    2. 下拉菜单
    3. 轮播图

  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. Element UI Resource
  2. Ant Design Resource

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

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

完结撒花 🎉🎉🎉🎉🎉

avatar
文章
阅读
粉丝