web 原型设计工具_适用于Web设计人员的13+种原型设计工具

web 原型设计工具

让我们以不分先后的顺序看一下当今可用于Web设计人员的一些原型制作工具：

1. 成帧器
2. Adobe XD
3. Adobe After Effects
4. Adobe Animate CC
5. Craft.io原型
6. 原理
7. 原子
8. 原型
9. 贾斯汀·明德
10. 折纸
11. 富林托
12. 网络流
13. 奇迹应用
14. 额外： Placeit

首先，向利益相关者和客户提出想法似乎很轻松，但是当事情变得困难时，我们需要工具来帮助加快反馈过程。 对于前端设计师而言，Web变得越来越复杂，具有越来越多的交互式请求。 滑动和拖动之类的动作只是冰山一角，弄清楚整个谜题如何组合在一起才是原型制作真正的艺术所在。

原型适合的地方

根据定义，“原型”是用来测试特定概念的早期示例。 原型用于评估和增强系统，以更好地了解整个项目。 我们每个人每天都在做项目，有些比其他项目复杂得多，但是什么时候该召唤一种工具来帮助反馈食物链呢？

有人会说代码的编写速度要快得多，但是有些时候，最好花时间使用原型，而不是花时间设计可能会很快落到路边的东西。 原型设计邀请您提供有关交互和放置的反馈。 这是一个交互式线框，可让客户更好地了解该项目如何适合其用户。

其他时候，在编码之前进行原型制作可以通过识别可能遗漏的任何边缘情况来帮助使项目受益。

原型设计和Web设计环境

当我们问自己今天适合什么情况时，我们绝对可以归因于对运动工作的需求不断增长。 接口正在成为具有交互内容的生物。 简单的交互可以随意地进行口头解释，但是在其他情况下，它有助于了解如何触发交互-越来越多的客户要求在签字之前先查看概念证明。 现在就比以往任何时候都重要，要有一个想法，在需要原型时应该转向哪里。

1.成帧器

• 加许可：$ 15 / mo（仅限Mac）
• 企业许可证：联系方式
  

Framer使可视化编辑具有代码灵活性，从而提供了无缝的工作流，并辅以设备预览，版本控制和简化的共享。 一个有助于开拓新的交互模式以创建突破性应用的应用。 从您最喜欢的API中提取数据，捕获实际用户输入以进行测试，并与实际用户和反馈进行合作。 直接从Sketch，Photoshop或Figma导入图形。

虽然Framer看起来好像严格用于移动应用程序，但也可以用于非应用程序项目，也可以用作独立库。 单独使用Framer JS库时，可以完全避免使用IDE 。 本质上，它是用于快速原型开发的开源JavaScript框架。 定义动画和交互，并包含滤镜，弹簧物理特性，3D效果等。 尽管不需要CoffeeScript，但是文档使用CoffeeScript和IDE。

应当知道，Framer并非用于创建可用于生产的动画。

@UXDesignDad @framer嗨，安德烈！ Framer是Mac的原型制作工具。 所以没有生产应用apps

— Krijn Rijshouwer（@krijnrijshouwer） 2017年2月2日

因为Framer有其自己的层次概念，并且在代码方面非常繁琐，所以不能像在GreenSock中那样在普通的（现有）DOM中使用它。 实际上，它在DOM中放置了自己的画布，所有动画都在该画布中运行。

• https://framer.com/features/handoff
• https://framer.com/getstarted/guide
  
• https://framer.com/pricing/2017
  
• https://framer.com/getstarted/import
  

2. Adobe XD