Day 06 - Design System — 为什麽前端工程师也该知道它?

https://ithelp.ithome.com.tw/upload/images/20210921/20120754WxHmivOdbJ.png
新章 突入!
终於进入到期待已久的第二章 Design System 啦!

那在讲 Design System 之前想要先提到一个观念:「前期规划 > 实作」。

软件工程师的本质其实跟建筑师很接近,只是他们是建造房屋,我们是建造系统。

一个好的房子,它需要良好的架构设计,会需要规划蓝图、理解整个建物的结构,在前期规划设计上会花很多的时间。

而这概念对应到 网页 来说,就是 Design System!

Design System 的前身 — Atomic Design

讲 Design System 之前要先来讲讲 Atomic Design 这个概念。

毕竟整个网页架构的设计的先驱可以是说由 2013年 Brad Forst 提出的 Atomic Design 开了第一枪。

後续 Google 才在 2014 年做了 Material Design,再到 2016 年由 Airbnb 进而提出了更完整的 Design System,更多细节可以参考 Karri Saarinen, Principle Designer at Airbnb 的演讲。

那 Atomic Design 是什麽呢?

那我们先来看看张图:

https://ithelp.ithome.com.tw/upload/images/20210921/20120754nnz7IF7SJF.png

简单来说,就跟化学里的原子概念一样,原子组成分子,分成组成一个组织,只是最终组成的是一个个页面。

而原子、分子和组织与页面中的元素对应如下:

https://ithelp.ithome.com.tw/upload/images/20210921/20120754GCepDSrtrW.png

前几天一直卖关子的精华也就在这了,Input 或 Button 等 UI 元件都是一个原子,Input + Button 可以组成一个分子(InputSearch),InputSearch 再加上其他东西则可以形成一个组织(Header),再慢慢组上去变 Templates,然後再变成一个完整的页面。

这就是在网页中一个个的 UI 元件如何堆叠上去的一种设计理念 — Atomic Design。

还有兴趣深入的读者们可以再去看 UX四神汤 的 Atomic Design 介绍文

所以 Design System 是什麽?

它有很多种定义,但比较多人推崇的依然是 Airbnb 提出的:

Set of shared and integrated patterns and principles that define the overall design of a product

指出说 Design System 是由一组共享、整合的元素及原则来定义产品整体的设计。

这样讲应该还是有点抽象,让我们从 Design System 解决了什麽问题开始切入:

  1. 不一致的介面体验
    • 举个例子就是一个网页可能会有很多种 button ,却都执掌相同的功能
    • 像是一个送出按钮一下是圆的、一下是方的、一下又是纯文字无边框的按钮,没有系统化地去设计介面,就会让使用者很混乱,无法预测画面该长什麽样子。
  2. 重复造轮子
    • 除了设计师跟使用者很混乱以外,对前端开发者也是一样。
    • 明明都是 Button,为什麽那边是圆的,这边是方的,因此常常会需要重复做好几份功能一样但样式不一样的 Button,因而导致不断花费时间在做很多基础设置。

那 Design System 又是如何帮我们解决这些问题的呢?

就如同定义中所说的,建立一套原则来设计,区分与规范出许多设计中的单位,如颜色、字的层级、间距、尺寸大小等等的,接着依此设计出各个元件,以至於整个系统的风格。

而既然有规则,前端在开发时也可以把这些规则先写好,後续元件和页面的开发也都能按照这套写好的规则,大量减少了重复的程序码,而後续不论是在统一修正或是改写上就也都能一次到位。

除此之外还会有以下优点:

  1. 加速开发流程 → 减少了重复的程序码
  2. 较好的产品延展性 → 统一规格後,要修正跟扩充都不用再一个个去修改元件,修改大规则就好
  3. 专注在产品本身 → 元件们的规则统一後,就能专注在页面上的商业逻辑,提升整体网站操作流程上的使用者体验

欸?上面先是提到了 Atomic Design ,又接着谈 Design System ,但他们之间的关系是什麽?又差在哪?

Atomic Design 早先提出来,是在讲述元件如何组装成一个完整的页面的设计理念。

而後续衍伸出的 Design System 则是在网页中找到规则,把应用层面推到更广,去思考元件、元件组装上会遇到的共同需求,把这些需求拉出来到系统的层级,让你能把整个网站的风格和设定都先定义出来,会用到它的地方可以小至一个元件,大至整个网页。

那 Design System 有缺点吗?

当然有!但其实也不太能说是缺点啦,主要都是看使用情境、脉络。

在软件开发的一切都是取舍,原则、技术的演进跟应用主要都还是视情况而定,再怎麽完整的架构跟系统,都还是有其不适合的情境,於是在这边就来提一下 Design System 使用上需要顾虑的一些情境:

  1. 小专案、小型团队不适合
    • 团队层面上,是人力不足,光是设计 Design System 的时间可能就要结案了,而且其实人不多的情况下沟通上也相对顺畅,很多事情当下同步一下就好了。
    • 专案层面上,因为专案太小,多去弄一套 Design System 出来只会绑手绑脚,还不如就直接把专案写完。
  2. 维护跟产品迭代的考量
    • Design System 是一套原则、定义好的元素,随着使用它的专案越来越多,使用情境上也会越来越多样跟复杂,因此这个系统不是说设计出来就可以直接用个十年,而是要不断地动态去更新版本,想弄出一版就一劳永逸的话是不可能的。

小结

Design System 其实是一个很大的主题,其实挺难在一篇文章中解释清楚,而我也知道这篇文章都只有文字会有点难描述清楚,因此今天只是先提供给大家一个脉络,理解前身的 Atomic Design、为什麽要有 Design System 和 Design System 这三个观念而已。

但其实不管是 Design System 还是之前提到的 MVC、MVVM 等等都是人订出来的一些专有名词而已,而对於这些名词的定义跟应用也都有很多种诠释的方式,但他们的本质都是在定义一些原则和规范,希望能系统性地解决一些在开发上很常遇到的痛点,所以在学习这类观念的时候,可以以当前遇到的问题出发、多方参考实作的方式,理解整个脉络之後,再适当地应用到当前的情境哦!

明天我会搭配 Google Material UI Design 来介绍 Design System 在市面上运行的样子,也会讲到前端在架构网页可以怎麽去应用 Design System 的概念让我们开发得更加顺畅!

Reference 老样子来推荐一些很棒的参考文章:

  1. Do we need design system? 什麽是设计系统,我们需要他来做什麽?
  2. Design System Practice
  3. UI 使用者介面的设计系统(Design System)是什麽?

<<:  [第六只羊] 迷雾森林建筑工事 V 哈罗世界安安vue

>>:  [Day17] POPCAT in WASM (Part 1)

企划实现(23)

立案後的费用产生 很多人会产生一个疑问,立案後如果没有营业跟有营业的费用产生的差别。 这里必须要先说...

[2021铁人赛 Day25] Web Exploitation Web渗透题目 01

引言 今天我们来解 Web 渗透 ( 渗透测试 ) 的题目, 在这之前,你需要先初步了解 HTTP...

如何衡量万事万物 (5) 蒙地卡罗模拟法

在【CH6. 建立模型以衡量风险】这章里,作者介绍了蒙地卡罗法,可以根据机率产生模拟情境,用来分析风...

便利贴中的手势操作

在 Jetpack Compose 的官方文件中,拖曳手势操作是这样子使用的: Box(modifi...

[Day 04 - CSS] 网页长这样能看吗,CSS魔术Show

CSS (Cascading Style Sheets,阶层样式表),用来描述 HTML 外观的样式...