2017年的9大网页设计工具

时间：2022-08-13 22:57:01 | 来源：网站运营

时间：2022-08-13 22:57:01 来源：网站运营

我们现在可以找到很多付费的和免费的网页设计工具，这些工具可以帮助设计师轻松完成工作。下面介绍一下2017年首选的网页设计工具。

1. Atomic

Atomic是一个不需要编码的原型工具。虽然使用这个工具有点贵（每月15至35刀不等），它有个30天的免费试用期。

简单开始一个项目

你可以先新建一个画布，也可以将Photoshop和Sketch文件导入Atomic

历史记录

这个工具记录你对项目所作的所有修改，可以返回到记录中的任何一步

多设备体验

你可以在电脑或Mac上设计原型，设计出来的效果可以在任何设备上预览

互动

它提供了多种交互触发器和手势，例如悬停，滑动，双击等

分享和反馈

原型可以通过链接进行共享，协作人员可以在同一个地方进行评论


2. Antetype

Antetype是一个UX设计应用程序，它可以创建高保真原型，许多公司的设计师都选择了它，诸如苹果，Twitter，SAP，Kinston等。

原型

它提供了高端UI原型设计所需的所有工具

控件

Antetype支持400以上预先设定的小工具。窗口小部件库适用于所有项目。现有的小部件或全新定制的部件所做的更改可以同步应用程序范围内

嵌套

Antetype支持层次化嵌套，可以进行复杂的UI设计

规格

准备就绪后你只要点击一次就可以创建一个设计规格

输出

Antetype可以导出为基于像素或基于矢量的图形

CSS

这个工具还可以自动生成标准CSS代码

响应式和支持 Retina 屏

Antetype的图形在两个HiDPI显示器都是最佳的，可以调整大小灵活适应移动设备的屏幕


3. Macaw

Macaw是可以写语义HTML和简洁的CSS的网站设计工具，实时代码预览，便捷输出。

Stream流

Macaw的设计环境是由一个叫Stream实时排版引擎，它允许对元素进行类似于Photoshop图像编辑器的方式来操作。Stream引擎计算边距，clears，floats和向静态文档流添加组件所需的其他属性

Alchemy引擎

Macaw的强大的设计到代码的引擎 – Alchemy –可以将设计转换为CSS和HTML

响应

Macaw可以创建响应式设计，内置的断点编辑器可以帮你轻松地在不同尺寸的屏幕上实现完美的响应式显示

字体

你可以使用系统字体，也可以添加Web字体

样式

一个样式可以应用于各种不同元素中，单个位置的样式还可以修改

交互

通过设置变量和嵌入脚本可以快速生成原型

定位

你可以利用fixed, static和absolute定位来构建动态布局

组件存储

元素可以存储在组件库中，储存的元素可以在任何页面上重复使用


4. Avocode

Avocode是前端切图神器，它实现从视觉到代码的过渡，自动生成导出图片的代码。

转换为CSS

这个工具可以将图层，字体和段落样式转换为CSS。它还支持Less，Sass或Stylus等预处理器

Retina图形

Avocode根据视口大小缩放图像。支持的格式包括JPEG，PNG，SVG和BASE64

轻松导入文件

只需拖放即可将设计文件导入Avocode

颜色转换

只需选择某种颜色，Avocode会自动将其转换为必要的格式，如HEX和RGBA

自定义代码输出

可以通过变量（如渐变，字体，颜色，距离和大小）自定义代码输出

支持Photoshop和Sketch

这个工具可以保留在Sketch和Photoshop中的元素，如图层，画板，智能对象等


5. Pixlr

Pixlr 是一个超强的免费在线处理图片工具。内置600多种特效及滤镜，包含了优秀免费修图软体常见的特效滤镜套用、曝光对比调整、相框与特殊光线外挂等等。

简单点说，Pixlr就是一个类似 Photoshop 的 web 软件，适合进行图片处理。


6. Webydo

Webydo 是一个在线网站设计及托管平台，帮助网页设计师摆脱传统的网站建站流程，Webydo的工具能够将他们的设计自动转换成的HTML5网站，设计师在这个过程中无需接触任何的手动编程工作。因此Webydo迅速成为一些设计师的最爱的网页设计工具。


7. Wagtail

Wagtail是一个开源的，响应式CMS，旨在加快Web开发的速度。它提供多语言和多站点支持。CMS采用直观的内容结构，支持复杂网站的所有基本组件。

StreamField

可以按任意顺序创建和排列不同内容类型的代码块

代码段

可以将现有内容添加到另一个页面。可以在网站的不同位置以不同的格式复制

资源管理器

其功能和组件以模块化的结构进行组织，提供简单的内容导航

图像裁剪

CMS自动检测面部和其他图像特征，并进行相应地裁剪。也可以取消自动检测，定义自己的图像的焦点

表单构建器

Wagtail可以创建具有任意数值域的表单。可以在管理界面中存储表单提交，以供日后检索，可选择将每个表单提交到指定的地址


8. Mobirise

Mobirise属于2016年免费的响应页面设计工具。简洁易懂通过可视图化的操作界面，为开发者提供快捷的功能服务。这个Windows和Mac离线的应用程序可以制作中小型网站，着陆页，在线作品集和产品服务的推广网站。

响应式自然

Mobirise是款手机网站建设软件，用户界面非常友好。可以在视觉编辑器中预览网站在不同设备屏幕上的显示效果

Bootstrap 3

这个工具基于移动设备优先的框架

现成代码块

Mobirise提供了各种现成的代码块，包括粘性头部，汉堡包菜单，沉浸全屏模式，视频背景，Bootstrap 轮播插件，内容滑块，带有灯箱插件的响应式网页图片库等等

拖放功能

只需通过拖放就可以将代码添加到页面，进行编辑和发布

无限托管能力

使用Mobirise构建的网站可以托管在任何地方，无论是Amazon S3，Github，Google Drive，FTP还是本地驱动器


9. Figma

Figma是第一个实时协作的界面设计工具。它有三个难能可贵的功能：实时协作，矢量网络和版本控制。Figma就像是基于浏览器并具有实时协作功能的Sketch。

实时协作

团队还可以直接在设计界面上进行讨论，令协作更加方便。

Figma在Mac，Windows、Linux甚至是移动端（只能预览）都可以运行。这将极大的改变团队生态，让设计师和开发者更好的协作。任何人都可以进来并查看所有细节：字体，颜色，尺寸，间距等等。开发者们也可以轻松看到整个UI的布局是如何适配不同屏幕尺寸的。

评论功能是内置的，团队成员可以针对你的设计留言，当有新评论或者新回复时你也会收到提醒。一旦你完成了，就可以点击“已解决”来隐藏意见。

版本控制

版本控制在Figma里更易于查看，从而更快的进行不同版本的对比。使用起来比Sketch 的版本控制要顺手很多。

每个文件的每个版本都在它们的服务器上，这让迭代变得很容易也很省心。

自适应布局是现代设计工具必不可少的功能，你可以通过设置让元素紧靠边缘来组合你的整个约束条件，或是让元素居中显示。这和Sketch中的Pin to Corner和缩放对象差不多。我不得不承认Figma的版本使用起来更视觉化也更直观。

矢量网络

矢量网格是具有突破性的，不只是移动锚点，你可以直接移动线条，连接点也会自动的随之移动。这是因为在Figma里可以连接多条线，组成矢量点阵的网格，而不是单纯的起始点和结束点。这种难以置信的易用程度，一上手就知道。