一个完整的页面是由无数个元素构成的,页面元素可以进行层层的拆解。这里所说的组件是指经过设计元素的解耦,使其独立且具有标准规范和可复用场景的基本元素。从字面上理解:“组”是页面元素的搭建方式,“件”由不同的最小单位解耦元素组成
原子最早是由英国化学家/物理学家约翰·道尔顿提出的,继承古希腊原子论和牛顿微粒说,提出的原子论。化学元素由不可分的微粒(原子)构成的,它在一切化学变化中是不可再分的最小单位。
原子理论同理适用于我们的设计系统中:
我们的页面是由原子(最小单位设计元素)、分子(基础控件)、组织(基础功能组件)、模版(业务定制组件)、页面构成的
【原子】:原子是最基本和最小颗粒度的单位,无法进一步细分的UI元素,在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。
【分子】:原子排列组合构成了分子,在界面中多以「设计控件」的形式存在,形成相对简单的UI组件的原子的集合。例如:导航栏、标签栏、搜索框、按钮、弹窗等。
【组织】:原子、分子排列组合形成界面离散部分的相对复杂的组件,在界面中多以「基础组件」的形式存在,例如:内容卡片、表单页面。
【模版】:原子、分子、组织按照业务需求排列组合构成了模板,在界面中也称为「业务组件」,例如:筛选列表。
【页面】:按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」
设计组件不是把UI元素堆积到一个地方,然后各处集中引用这么简单。 组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过特定规则自由组合来构成整个产品。
【独立】:一个组件就是一个独立的产品:在制定组件的过程中要考虑到组件应用中的各个场景,降低、拆解组件中的耦合度,同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景
【完整】:一个完整的组件构成包含了三种属性
a.响应状态:包含组件库中原子的大小类型、分子的的响应方式、组合方式、多状态的交互