最近一直在关注设计系统，恰逢笔者正准备毕业，毕业设计就索性开发了一个模块化组件搭建界面原型的 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等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备： http://hao..com
