程序原型设计工具_设计原型：5个比Photoshop更好的应用程序

Photoshop是受设计师欢迎的工具，它的扩展（如CSS3P和FontAwesomePS）使其也成为创建Web设计原型的好工具。 尽管如此， 它并不是真正为此目的而创建的，并且随着响应设计 ， CSS预处理器 ，CSS框架和与分辨率无关的图形（ SVG ）的当前趋势的发展，Photoshop与Web设计的相关性越来越低。

不过不用担心，因为独立开发人员开发了许多替代应用程序来填补空白。 在本文中，我们将研究这些应用程序，并找出与Photoshop用于创建Web设计原型相比，它们的功能有多出色 。

1. Webflow

Webflow允许您通过拖放来设计网站。 Webflow基于Bootstrap网格创建布局，因此您的网站设计可响应。 Webflow还附带一组标准的Web组件，例如块，列表和文本格式，您可以将其添加到Webflow工作区中。

可以从侧面板轻松添加样式，还可以进一步调整元素的属性。 设计完成后，您可以将设计结果导出到代码HTML和CSS中。 您还可以与团队共享您的工作。

2. Avocode

Avocode支持PSD文件，并允许您立即将其编辑并转换为具有HTML和CSS的可行网站。 Avocode将提取项目中的所有资产，包括CSS，图像和SVG（如果有）。 您可以轻松地以Less，SASS或Stylus的形式提取任意选定图层CSS，因为它已与CSSHat集成。

此外，Avocode配备了版本控制功能，以防万一出问题，您可以恢复到以前的设计。

3.金刚鹦鹉

如果您正在使用Adobe Photoshop之类的图像编辑器， Macaw可以让您设计Web布局和Web元素。 您可以创建列或块区域，调整其位置，并根据需要设置字体。 Macaw使您可以在一处更改多个元素的样式。 您还可以使用该库存储所有元素，以备后用。

为了创建响应式设计，Macaw允许您设置断点并针对所有设备优化站点。 设计过程完成后，Macaw可以为您生成正确HTML和CSS。

4.素描

Sketch是设计界面和网站的理想选择。 它创建基于矢量的对象，而不是在位图中。 因此，当您调整画布大小的大小时，您的设计不会失去质量。 诸如“内置网格”之类的功能将帮助您更好地安排对象或网络布局的位置。

此外，Sketch渲染的字体类似于Webkit上显示的字体（请考虑使用Chrome，Opera和Safari）。 因此，您不必担心图像中文本的结果不如浏览器中显示的原始文本那样清晰和准确。 Sketch还可以导出图层中每个元素CSS。

5.原型

Antetype是基于矢量的应用程序，专注于视觉设计，非常适合创建诸如渐变，投影，内部阴影，文本阴影，边框样式和圆角等界面元素。 Antetype还提供了数百个可直接在项目中使用的小部件。

要创建响应式设计，您可以设置断点以调整屏幕尺寸。 您还可以以Image或CSS的形式导出每个元素。

翻译自: https://www.hongkiat.com/blog/prototype-designing-apps/