原子设计在具体交互方案中的应用 ⚛

是什么

少就是多

相信这句话大家都听说过，首先什么应该「少」？

少的对象就是原子，原子可以是界面的元素、功能或点击、滑动等原子交互。

为什么「少」了就会「多」（带来好处）？以下举几个案例进行说明。

在 Figma 中构建一个圆形，至少有两种方法

我通常会使用第 2 个方法，因为在后续的设计维护中，如果要将圆形改为矩形，则可以通过简单的修改圆角即可实现，而无需删除旧图形拖入新的图形。

在这个案例中，使用方法 1 涉及到 2 个原子——圆形、矩形；而方法 2 则只涉及 1 个原子——矩形。

所以减少原子可以提升效率和灵活度，因为更少的原子减少了相互切换的摩擦。

图形界面的操作效率相比命令行界面来说并没有进步，甚至退步。但图形界面减少了用户操作的原子数量，让软件更易于使用和学习。

因为在面向命令行的操作中，用户需要精确地通过至少 26 个按键（输入命令字符）来控制计算机，而图形界面则提供了少的多的选择，减少了用户出错的可能。

我们知道直线、曲线这 2 种线条，而对于计算机来说，直线等于曲率为 0 的曲线。通过调整曲率这一参数即可获得不同的线条形态。

与第一个案例相同，通过减少原子的数量降低了系统设计的复杂度（开发 1 个功能和开发 2 个功能的差别）。

如何减少原子从而达到「多」的效果呢？通过 3 个步骤思考问题

需求要解决的问题、要达到的目的是什么？具体的场景是什么？

使用已有功能满足而不增加产品本身的复杂度。

如果要做，能否扩大功能的使用场景？这样后续有新需求则可以使用此功能满足，而无需增加新的功能。

插件支持搜索 Figma 文档中的文本，针对用户不同的搜索场景，需要支持设置搜索范围——在选中的图层中搜索、在整个页面中搜索。

对于用户「设置搜索范围」的功能需求，基于「能否用已有功能满足」进行思考 🤔，发现可以通过用户是否在 Figma 的画布中选中图层来预判用户的意图，如果存在选中的图层则在选中方位内搜索，否则搜索整个页面。

这样既符合用户的直觉也没有增加产品的使用复杂度、开发成本。

通过减少原子的数量来提升易用性和降低系统复杂度、降低维护成本；通过思考 1. 能不能不做；2. 能否用已有功能满足；3.能否用于其他场景；过滤需求以达到减少原子的目的。