合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

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

2018-05-30 10:48:23网站设计

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

一、Atomframer

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

我总结定义了共计 82 种常见的设计模式,基本满足了大部分基础移动端页面的使用场景。并且本工具的使用方法十分简单快捷,只需以下几个步骤便可完成。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

第一步,选择合适的导航JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

通过点选,便可切换相应的导航栏、筛选栏、工具栏以及标签栏。每个导航类别分别对应一个特定区域的组件变化,点选切换保证了每个类别的导航之间能够相互独立。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

第二步,拖拽需要的内容组件JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

通过拖拽,添加常规元素、页内导航、内容容器以及列表表单等用于承载页面内容的组件。这些组件共用同一块区域,自由组合,并且允许添加多个相同组件,且这些相同组件相互独立,互不干扰。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

第三步,长按调整组件之间的顺序JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

通过长按能够调整被添加的组件之间的顺序,提供给组件之间的组合更多的可能性。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

第四步,选中组件后修改其信息JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

当一个组件被选中后,能够在右边的表单区域修改其内部的文字信息,使得相对通用的组件具备传递具体业务信息的能力。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

表意图标本身便具有一定的含义,即与文本一样传递了信息,故对图标的选择也同样重要。JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

 JMd合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
界面设计模型