我花了80天，开发出这个3分钟快速搭建界面原型的设计工具

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

一、Atomframer

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

第一步，选择合适的导航

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

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

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

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

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

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

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

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

第五步，导出图片，完成！

完成组件的组合与信息重写之后，只需要将其导出为图片的形式，便可方便地传播了，大功告成！怎么样，三分钟不到吧。

确保效率的同时，我们来看看 Atomframer 最终搭建的界面效果。

二、组件的合理定义

使用模块化的思想来设计原型设计工具，即是用成熟的设计模式来支撑细化的行为节点，相当于引入每个行为的成熟解决方案，最终将每个行为对应的解决方案拼凑成一整个完整的界面方案。所以要求每个组件都尽可能为最优解，并且具有灵活性和扩展性。

我最终定义了共计7个类别，82种常见的组件，以确保有足够全面的组件以供选择。

三、组件的定义规则

组件的定义及扩展主要遵循以下规则：

• 区分组件最终承载的用户行为及用户目标。
• 考虑组件在同一目标下不同的结构。
• 根据组件所包含元素的不同进行划分。
• 改变组件中所包含元素的数量 / 位置 / 尺寸来进行横向的扩展。
• 将简单组件进行嵌套形成新的复杂组件，以支持更复杂的行为。

四、开始使用

浏览器：为了保证最佳的体验，请大家使用 Chrome 或者 Safari 对 Atomframer 进行访问，使用其他浏览器不能够保证完全正常运作。

平台：现阶段仅支持 Windows 以及 Mac 用户对 Atomframer 进行访问，暂不支持其他平台，且不支持移动端访问。

准备就绪后，通过以下地址进行访问：

www.atomframer.com

五、More

开发 Atomframer 的初衷是为了尝试描述一款作为设计系统输出窗口的工具，并且能为将来的高效设计过程提供想象的空间。作为设计工具，目前还不完善，我对如何解决设计与开发之间的障碍的探索也才刚刚开始，但设计师嘛，总归是要有自己的一点执念。

接下来将不定期对 Atomframer 进行维护优化，也欢迎各位朋友给我提建议，我们相互学习，共同进步。

欢迎关注作者的微信公众号：「Designut」

「更多原型工具」

• 《事半功倍！帮你设计加速的7款顶尖原型工具》
• 《Framer 大更新！可能是目前最适合设计师学习代码的一款原型工具》
• 《只需浏览器，就能帮你搞定原型设计》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： https://www.muzisucai.com/