主流原型设计工具介绍

本文主要是介绍主流原型设计工具介绍，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

　　目前市场上主要的原型设计工具主要分为三种，分别是简单快速型、轻快灵活星。功能全面型、接下来我会从这三个类别开始，依次介绍归属于这些类别的原型设计软件。

　　首先，第一类产品，其特点是简单快速。代表工具有Chinoco、InVision、Flinto Lite、幕客、Adebo.Xd、Baron Fig + POP、Montage等。他们的操作难度普遍较低。

就像Chainco的标语一样，这一类工具是UI设计师的交互演示利器。三款工具都是在网页端进行设计，虽然风格略有不同，但实质上是大同小异。交互的设置上多以创建热区为基础，点击热区跳转页面为主要功能，几乎不需要任何学习成本，也没有什么操作难度。国内用户可能对Chainco更熟悉一点，但Chainco还没有国外的版本，而且由于具有协作功能等原因，InVision显现出更加优秀的一面，也赢得了更多国外用户的青睐。

　　Baron Fig + POP非常方便的快速绘制APP构想的工具。Baron Fig 是一家专门为有创意需求的人记录、讨论自己的创意的文具公司。在官网上你能采购到各种尺寸的卡片、本子、纸张，很方便你直接在实体纸张上绘制APP创意构想。 Montage，并非电影剪辑中的蒙太奇手法，而是一款不需要设计技巧的，利用现成组建快速生成APP原型的工具，网页端直接打开，登录即可使用。

　　作为Adobe旗下的一款原型设计工具，有着平台自带的一个天然优势—用户可直接导入PS、AI、SKETCH文件作为原型素材。设计的页面间可以通过拖拽创建交互，可设置过渡动画；Adobe XD有提供基础组件元素、平台组件库和少量图标库。可以通过链接分享原型。此外，还支持设计稿的自动标注。而作为一款本地工具，目前只能通过登录Adobe icloud账号云端管理项目。当然，虽然官方有在宣传是免费工具，但是免费度非常有限：只能最多使用 2 GB云存储，Typekit，以及最多共享1个设计规范和1个原型。

　　作为目前国外非常知名的一款在线原型设计协作工具，Invision 的发展势头很强。虽然最一开始Invision 主要是做设计稿之后的交互原型和团队协作管理，比如可以顺畅衔接Sketch/PS设计稿，为设计稿做批注，以及Freehand功能可以实现团队自由讨论想法。

　　但后来发布的 Invison studio 具备从基础开始的设计功能，可以完成相当精细的设计稿，较为强大的交互动效功能也可以满足大多数设计者的动效需求。利用 InVision Studio，还可以将团队的设计规范落地在设计工作中。不过对于国内用户来说，Invision 始终还有些不便利：比如全英文的界面；国内访问速度一般；以及价格较贵。

　　接下来，我们介绍第二类产品，他们的特点是轻快灵活，操作起来相对简单，适用的范围也比较广泛，其中代表工具：Mockplus、Proto.io 6、UXPin、Flinto for Mac、Balsamiq

　　比较经典的，例如Flinto for Mac，只需要根据层级移动组件位置，就可以创造出对应的交互效果。同时，这些工具虽然看上去操作方式并不是完全一致，但它们都不约而同的采用了拖拽链接点来作为基本的操作方式。这种操作中的高度可视化，使得设计的过程变得十分简单有效。

　　Proto .io 也是国外一款轻便好用的在线原型设计工具，在大多数浏览器中都能使用，支持导入Sketch和PS设计稿做交互。界面清爽，拥有较为丰富的UI组件。可以直接用链接分享原型，而且因为集成了移动录屏工具lookback，适用于用户测试场景：可以记录用户点击、滑动、点击区域；也可以记录用户的声音和facecam视频评论。

　　Balsamiq Mockups 是一款简单的低保真线框图和原型工具。做 Web 网页端产品的原型一定不要错过它。以手绘风的低保真输出为主要特色，美观、清爽，并且支持几乎所有的 HTML 控件原型图。同样还支持 iPhone 手机元素原型图。 proto.io是一个高保真原型工具，专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。 它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。目前Proto .io 有协作功能，只是比较受限；此外，交互设计较为复杂，细节效果只能通过容器实现，上手成本较高。价格相对Invision较便宜，但相对国内产品来说仍然较高。 Mockplus可以说是在这四款工具中比较具有代表性的，相对于proto.io这种由小组件组成容器，再由容器组合为其他组件的设计模式，Mockplus则是更多的直接提供高度封装组件。作为一个“懒人”，熊先生对这种化繁为简的方式甚是喜爱。而且依靠着这种简单的操作方式和程序本身自带的超过2000枚的矢量图标，你甚至可以在完全没有网络的情况下仍然出色地完成原型设计。导出的演示包、HTML的离线包也会让预览变得不受网络的限制。

 　　最后，是第三类原型设计软件，他们的特点是功能全面，但是相应的使用难度也比较高，主要的代表工具：Axure RP、Justinmind、Framer JS、Marvel App、Atomic

原型设计想做到功能全面，那就难免会和代码挂上钩。这一类中，Axure应该是大家更为熟悉的一个。也可以说，Axure是原型设计工具中在设计难度和可用性上平衡把握的比较好的一个了。但是，即便如此，它的变量、判断等等功能还是难倒了许多交互设计师。此外，作为一款离线工具，Axure的原型预览和分享方式并不十分友好。浏览器预览本地文件需要安装插件；支持上传到Axshare分享，但在国内的速度也较慢。因为离线，Axure 文档存档会比较安心，不过如果涉及到多人协作，也会有“信息更新不及时”的问题。

　　Uizard 能够直接将设计师的手绘线框图转化为电子文档，并自动进行前端编码，到处 html 或 CSS。将你的手稿拍下来，上传到网站，你就可以得到你的电子线框图

　　Atomic简单易学的原型工具，且具备一定的交互功能。Atomic 是一个简单易学的原型工具，仅支持网页端操作，团队可以实时共创协作，且具备一定的交互功能。设计师们可能会想到 Atomic Design（原子设计），构建 Design System 的核心指导理论。他们并没有必然的联系，但在整个设计理念上是一脉相承的该网站易用性较高，有非常清晰、简单的使用说明，帮助使用者快速上手。

　　“可以邀请团队成员同时编辑同一个项目（就像Figma），制作完成后，可以简单快速地分享链接并添加留言评论。还可以创建类似于Sketch的共享库，这样整个团队可以共用同一个设计资源。”

　　如果说Axure是在寻求平衡，那么Framer JS则是在诠释着到底什么才是用代码“写”原型。这才是这一类中真正以代码为基础的原型设计工具，只要能够写出相应的代码，它就可以把你的想法通通变成现实。

　　这一类工具功能虽然相对全面，但是学习成本被大幅提升，尤其是Framer JS，功能强大到使其他工具望尘莫及，但其学习成本也可以说是“十年磨一剑”。所以，想要熟练运用这一类工具，最好还是先掌握了足够的知识，再来尝试。

这篇关于主流原型设计工具介绍的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！