原子设计理论 UI案例详解

1,807 阅读4分钟
原文链接: mp.weixin.qq.com

前言

每当你做设计规范时候有没有很苦恼,如何才能把界面所需样式覆盖完,如何在多平台,多系统之间采用一致的语言而不会影响体验,如何保证多系统品牌调性一致,国外一个网页设计师 Brad Frost ,写了一本书 Atomic Design ,这本书是关于如何构建套设计系统方法论的著作,今天就和大家详细了解下

原子设计是什么?

原子设计是创造设计语言的一套方法论,就是由原子、分子、生物、模式,页面构成,如上图(当然这不是唯一的方法,但是这个方法确实很实用) 可能大家有些不明白,说更清晰一些就是,我们构建UI界面其实都是由一些小原子组成,如颜色、字体、空间、图标/图形、阴影、动效、声音等等,这些都是所有界面的基础元素,我们叫做原子。那么再来细一点,假如按钮它是分子,它是由图形字体颜色这些小原子组成,明白了吗?继续推,那么构成生物组织就是由这些前期定义好的分子组成,列如下图是一个分子

到这里相信大家应该明白其工作原理了,一套熟悉的模式出来了。

为什么要学习原子设计?

在多屏时代,我们时时刻刻都在设计产品界面,需适配多系统,其中很重要的一点是如何在多系统之间保持体验一致性,很多人想到的就是规范,对,没错,可是如何做一套严谨逻辑好,灵活的设计规范,那么原子设计可以帮助我们来很好的实现它,它在构建设计系统中算是比较科学的一种方法,国外很多设计团队都在使用这样的设计方法,来规范自家产品组件,那么今天我们来详细探索它的一些实际运用案例

实例操作

前面铺垫了那么多,终于等到这一步了,有木有很激动,好了回归正题,前面大概介绍其工作原理,那么现在准备表演了!我会分详细步骤和大家说

1.构建原子 2.构建分子 3.构建生物 4.构建模式 5.最终页面

1.构建原子

这里建立的原子是页面中所需要的基础元素.前面有介绍,我如果忘记再去看一遍,首先我们开构建视觉基础单元(如下我只是做示例有这些元素,没有详细写完,不然这篇文章会很长) 字体 (整体系统字体层级,这里省略详细内容)

PingFang SC      Regular

PingFang SC      Semibold

图标(整个系统图标调性走向,大小,品牌符合)

颜色(整个系统颜色体系)

网格(系统所需间距系统)

阴影(设计语言所需阴影,没有可以不要)

黄金比例(界面所需尺寸比例)

2.构建分子

分子是前面构建原子的任意组合,这里你可以构建出系统所需要的所有小分子,既单个小组件,这里你需要穷举所有可能性,如下面的列表和按钮分子

3.构建生物

生物其实就是由多个分子集合而成如下:黄金比例/头像列表/字体/按钮 / 图标(一个功能组件)

4.构建模式

模式其实就是由多个生物集合而成;导航/卡片

5.最终展示

最后就是由前面构建好的一系列生物组织来构成最终的视觉页面

总结

写在最后,原子设计是一套具有科学严谨的创建设计系统的方法论,是一个构建ui系统的心理模型,因此希望以后大家都能从中借鉴一些方式,那当我们真实设计中所运用时候,如何去做呢?首先是需要确定视觉语言方向(就是前期风格探索),定好方向后,开始运用原子设计方法论来构建一套科学严谨且灵活性高的设计系统

MicroUX小铺 好产品拼的是共情力 Mini Program