原型设计是交互设计师与pd、pm、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。原型设计工具可以帮助程序员解决设计问题，即便审美不行也没关系，这些工具都有着很棒的模板可供选择。与客户快速分享不同迭代的可能性可以显著加速设计过程，接下来这十大原型设计工具值得一试。
app设计：十大顶级原型设计工具快收入
1. origami studio
origami最初由facebook开发，以帮助团队建立和设计产品。现在可以免费使用，程序员可注册为苹果开发人员，使用quartz composer下载并安装xcode以使origami在mac上顺利运行。
与其他原型工具相比，此工具需要更多安装工作。一旦安装完成，就可以立刻开始创建设计概念，模拟滚动、滑动和页面链接。sketch和photoshop的设计可以导入origami，并且项目图层将被保留，可以根据需要进行链接，动画或转换。origami不以移动设计为中心：可以设计响应式网站，并模拟文本输入，facetime相机和os x拖放等功能。
只需点击一下即可导出原型组件(包括动画)，origami还提供了演示工具，使用户可以为设计添加自定义背景，全屏查看，并模拟不同的设备。然而，缺点是无法让客户或设计团队直接对项目或版本记录评论。
2. webflow
webflow真正的发光点是，当原型设计完成后，点击一个按钮就可以转换为生产就绪的网站。
最近，webflow引入了新功能：一个用于原型的cms。webflow的cms完全可视化，允许创建强大的动态网站而无需编写代码，另一个特别有用的功能是使用博客页面原型概念创建博客。
如果你是自由设计师，并且难以找到程序员将你的设计变现，webflow可以帮你。你可以设置帐户或指定管理员来管理内容，也可以在客户端直观进行更改，或者将原型导出到代码中，webflow干净的语义代码可以节省程序员几个小时的代码清理时间。
webflow附带可以拖放到原型中的网站模板和web组件。webflow响应自然，网站布局将针对所有设备进行优化：桌面设备，移动设备和平板电脑。如果这还不够，你还可以设计适用于移动设备和所有现代浏览器的动画。webflow还具有内置扩展性，可以轻松地将直播原型连接到slack，mailchimp，google drive以及超过400种其他服务。
3. proto.io
proto.io自带的网站和应用程序模板可让你快速启动项目，现成的模板内置了多种互动功能，整个应用程序在网络上运行，所以可以在任何平台上运行proto.io。但其每个功能似乎都创建了一个新窗口(用于构建和实时预览项目)。如果希望将标签数量保持在最低限度，那么这可能是一件令人烦恼的事。
proto.io最近发布了一些插件，可以通过简单的拖放整合sketch和photoshop设计。当导入文件时，proto.io将文件保留在适当位置，用户不必浪费时间重新对齐。如果已经导入proto.io，也可以继续在sketch或photoshop中进行更改，proto.io原型将自动更新，不必重复导出和导入。
4. framer
framer是最受欢迎的原型设计工具之一。它可以通过代码对任何东西进行原型制作，从而创造出新的突破性设计。但该工具学习困难，不过framer编码语言的文档结构非常良好，并有很多学习资料。
framer的mac应用程序是精心设计的，可在编写代码时提供实时预览。使用framer，用户不会受到其他应用程序拖放工具的限制。此外，由于framer使用代码来构建原型，所以可将实时数据从twitter和parse等来源整合到原型中。
像其他工具一样，framer支持sketch和photoshop项目，并且还将保留设计图层。与大多数工具不同的是，framer还可以导入after effects文件。当你准备好分享原型时，framer可以生成与客户端共享的url。这些可共享网址可在移动设备上打开以进行实时预览，framer还可以对vr进行原型设计。
5. vectr
vectr是免费的，无论是桌面还是网络浏览器，原型都将保持同步，随时都可使用并始终可访问到最新更改。
vectr原型可与url共享，并集成到诸如slack之类的应用程序进行强大的协作。目前，vectr功能并不丰富，该应用程序的路线图已经发布，详细列出了功能列表。包括：完全脱机桌面应用程序，更多平台，内置版本控制，内置设计资源市场，协同编辑，内置反馈和注释工具等。
6.atomic
atomic拥有漂亮的用户界面和直观易用的动画时间轴，atomic是一个需要运行google chrome浏览器的web应用程序，此外，没有可用的桌面应用程序。
如果使用after effects进行原型动画，你将感觉到atomic的动画时间轴有多棒。atomic很灵活，方便调整交互，只需点击播放按钮就可查看更改和动画。
其历史选项允许用户快退以查看历史迭代，并从任何角度创建新版本。对于ios设计人员，atomic推出了带有ios设计元素库的套件，以实现快速原型设计。你也可以直接将自定义css添加到atomic中，也可以导出css，简单地将其复制并粘贴到项目中。
7.easee
easee是最令人印象深刻的原型设计工具之一，当很多人认为该产品是steven fabre的激情项目时，easee却给人留下了深刻的印象。easee的目标是帮设计师为网络构建漂亮的动画，而无需编写代码。
使用easee，你可以从sketch和photoshop中拖放图层并开始动画制作。easee可以在应用程序中创建平滑动画并导出到css，因此可以将它们导入到实际的web项目中，还可以在网上查看动画实时预览。
8.invision
invision可以说是世界上最流行的原型设计工具。该团队不断添加新功能，帮助设计人员更高效地进行原型设计。invision的最大功能是其对项目反馈的管理，客户和设计团队可以直接在原型上提供意见。
将项目状态传达给客户和团队是至关重要的，通过invision的项目管理页面，用户可以将设计组件组织到状态工作流中。例如，如果将设计组件拖入“进行中”队列，客户或团队查看状态时会立即知道正在进行的工作。
前不久，invision发布了一个称为boards的功能，它可用作演示工具，项目资产管理器以及创建moodboards。
invision的功能列表似乎永无止境：用户可从sketch或photoshop导入设计文件，动画设计资源，链接页面以模拟现实生活中的网站，并在移动设备上预览原型，还有版本控制，无限的免费用户测试以及与slack，dropbox，box等应用程序的集成等。
9.adobe comp
最近发布的ipad pro告诉我们，许多广告素材正在使用平板电脑开发项目。adobe comp提供了将自然绘图手势转换为生产就绪图形所需的工具。
使用adobe comp，可以创建与photoshop，illustrator和indesign无缝集成的打印，web和移动布局。comp可与adobe stock和typekit一起使用，从而提供图像，图形和数百种字体，可以在设计原型时轻松整合。
adobe comp提供了开发和设计原型的新方法，并且由于其用户友好的设计，实际上没有学习障碍。
10.principle
principle由os x的前苹果工程师构建，principle具有可将原型导出到视频或动画gif的功能，可以在dribbble，twitter或任何地方共享!
principle仅适用于mac，如果你使用过sketch，则原理界面将会非常熟悉。虽然principle不包括协作工具，但这种缺点可能会被其离线功能所掩盖。
广州app开发公司 品向科技：这十大原型设计工具的功能都很强大，你可以结合团队的特点和兴趣选择最适合的工具。原型设计之于应用开发，是为第一要素。它所起到的不仅是沟通的作用，更有体现之效。通过内容和结构展示，以及粗略布局，能够说明用户将如何与产品进行交互，体现开发者及ui设计师的idea，体现用户所期望看到的内容，体现内容相对优先级等等。
原文标题：广州app开发：十大顶级原型设计工具快收入口袋
文章转自：广州品向科技官网（px）
原文网址：