新章 突入!
终於进入到期待已久的第二章 Design System 啦!
那在讲 Design System 之前想要先提到一个观念:「前期规划 > 实作」。
软件工程师的本质其实跟建筑师很接近,只是他们是建造房屋,我们是建造系统。
一个好的房子,它需要良好的架构设计,会需要规划蓝图、理解整个建物的结构,在前期规划设计上会花很多的时间。
而这概念对应到 网页 来说,就是 Design System!
讲 Design System 之前要先来讲讲 Atomic Design 这个概念。
毕竟整个网页架构的设计的先驱可以是说由 2013年 Brad Forst 提出的 Atomic Design 开了第一枪。
後续 Google 才在 2014 年做了 Material Design,再到 2016 年由 Airbnb 进而提出了更完整的 Design System,更多细节可以参考 Karri Saarinen, Principle Designer at Airbnb 的演讲。
那我们先来看看张图:
简单来说,就跟化学里的原子概念一样,原子组成分子,分成组成一个组织,只是最终组成的是一个个页面。
而原子、分子和组织与页面中的元素对应如下:
前几天一直卖关子的精华也就在这了,Input 或 Button 等 UI 元件都是一个原子,Input + Button 可以组成一个分子(InputSearch),InputSearch 再加上其他东西则可以形成一个组织(Header),再慢慢组上去变 Templates,然後再变成一个完整的页面。
这就是在网页中一个个的 UI 元件如何堆叠上去的一种设计理念 — Atomic Design。
还有兴趣深入的读者们可以再去看 UX四神汤 的 Atomic Design 介绍文。
它有很多种定义,但比较多人推崇的依然是 Airbnb 提出的:
“Set of shared and integrated patterns and principles that define the overall design of a product”
指出说 Design System 是由一组共享、整合的元素及原则来定义产品整体的设计。
这样讲应该还是有点抽象,让我们从 Design System 解决了什麽问题开始切入:
就如同定义中所说的,建立一套原则来设计,区分与规范出许多设计中的单位,如颜色、字的层级、间距、尺寸大小等等的,接着依此设计出各个元件,以至於整个系统的风格。
而既然有规则,前端在开发时也可以把这些规则先写好,後续元件和页面的开发也都能按照这套写好的规则,大量减少了重复的程序码,而後续不论是在统一修正或是改写上就也都能一次到位。
除此之外还会有以下优点:
Atomic Design 早先提出来,是在讲述元件如何组装成一个完整的页面的设计理念。
而後续衍伸出的 Design System 则是在网页中找到规则,把应用层面推到更广,去思考元件、元件组装上会遇到的共同需求,把这些需求拉出来到系统的层级,让你能把整个网站的风格和设定都先定义出来,会用到它的地方可以小至一个元件,大至整个网页。
当然有!但其实也不太能说是缺点啦,主要都是看使用情境、脉络。
在软件开发的一切都是取舍,原则、技术的演进跟应用主要都还是视情况而定,再怎麽完整的架构跟系统,都还是有其不适合的情境,於是在这边就来提一下 Design System 使用上需要顾虑的一些情境:
Design System 其实是一个很大的主题,其实挺难在一篇文章中解释清楚,而我也知道这篇文章都只有文字会有点难描述清楚,因此今天只是先提供给大家一个脉络,理解前身的 Atomic Design、为什麽要有 Design System 和 Design System 这三个观念而已。
但其实不管是 Design System 还是之前提到的 MVC、MVVM 等等都是人订出来的一些专有名词而已,而对於这些名词的定义跟应用也都有很多种诠释的方式,但他们的本质都是在定义一些原则和规范,希望能系统性地解决一些在开发上很常遇到的痛点,所以在学习这类观念的时候,可以以当前遇到的问题出发、多方参考实作的方式,理解整个脉络之後,再适当地应用到当前的情境哦!
明天我会搭配 Google Material UI Design 来介绍 Design System 在市面上运行的样子,也会讲到前端在架构网页可以怎麽去应用 Design System 的概念让我们开发得更加顺畅!
Reference 老样子来推荐一些很棒的参考文章:
<<: [第六只羊] 迷雾森林建筑工事 V 哈罗世界安安vue
>>: [Day17] POPCAT in WASM (Part 1)
立案後的费用产生 很多人会产生一个疑问,立案後如果没有营业跟有营业的费用产生的差别。 这里必须要先说...
引言 今天我们来解 Web 渗透 ( 渗透测试 ) 的题目, 在这之前,你需要先初步了解 HTTP...
在【CH6. 建立模型以衡量风险】这章里,作者介绍了蒙地卡罗法,可以根据机率产生模拟情境,用来分析风...
在 Jetpack Compose 的官方文件中,拖曳手势操作是这样子使用的: Box(modifi...
CSS (Cascading Style Sheets,阶层样式表),用来描述 HTML 外观的样式...