最近一直在关注设计系统，恰逢笔者正准备毕业，毕业设计就索性开发了一个模块化组件搭建界面原型的 Web 工具 —— Atomframer 。通过对设计模式的选取，三分钟即可搭建一个用于快速沟通的界面原型。

一、Atomframer

我总结定义了共计 82 种常见的设计模式，基本满足了大部分基础移动端页面的使用场景。并且本工具的使用方法十分简单快捷，只需以下几个步骤便可完成。

第一步，选择合适的导航

通过点选，便可切换相应的导航栏、筛选栏、工具栏以及标签栏。每个导航类别分别对应一个特定区域的组件变化，点选切换保证了每个类别的导航之间能够相互独立。

第二步，拖拽需要的内容组件

通过拖拽，添加常规元素、页内导航、内容容器以及列表表单等用于承载页面内容的组件。这些组件共用同一块区域，自由组合，并且允许添加多个相同组件，且这些相同组件相互独立，互不干扰。

第三步，长按调整组件之间的顺序

通过长按能够调整被添加的组件之间的顺序，提供给组件之间的组合更多的可能性。

第四步，选中组件后修改其信息

当一个组件被选中后，能够在右边的表单区域修改其内部的文字信息，使得相对通用的组件具备传递具体业务信息的能力。

表意图标本身便具有一定的含义，即与文本一样传递了信息，故对图标的选择也同样重要。