随着设计领域的细分以及用户群体的发展，各类设计工具开始涌现，这些新兴工具分别针对不同的使用情景和需求，让产品的设计、运营甚至灵感的获取都更为顺畅、系统地完成。然而要找到一款最适合的工具也并非易事。在这里，我们整理了10款专为UX/UI设计师打造的热门工具，它们能有效地帮助你制作交互原型、网页设计，并提供收集、管理设计素材的便利。
1. Mockplus-全平台“更快、更简单”的原型设计工具
Mockplus是一款支持全平台的快速原型设计工具，满足包括手机项目、平板项目、网友项目、桌面项目、自定义项目及自由项目的原型设计需求。它以“更快、更简单”的特点在国内甚至国际原型市场中占有一席之地。最近3.0版本中发布的团队协作功能，更是大大提高了团队沟通默契和效率。此外，高度封装的智能交互组件、完全可视化的交互设计，在同类原型工具中也是独有的。
官网地址：http://mockplus.cn/
更多信息：https://www.mockplus.cn/blog
2. Figma-协作式界面设计工具
Figma可以说是一款新兴的协作式界面设计工具，它的界面布局和Sketch几乎一样。这款工具以云端为基础，允许多人同时合作一个项目，设计稿会根据评论及修改进行实时更新。美中不足的是，这款工具对中文的支持不太好，经常出现字体无法识别(实际已安装)的情况。免费版本中，只能创建3个项目，最多支持查看30天内的历史版本。
官网地址：https://www.figma.com/
更多信息：https://www.facebook.com/figmadesign/
3. Framer-开源型原型工具
与其他原型设计工具有所不同，Framer允许用户以编代码的形式(Coffeescript-精简版的JavaScript)进行设计，对于大多数设计师来讲，上手难度和学习曲线相当高。尽管Framer凭借其强大的交互和动画优势逐渐在原型设计领域有一定热度，但所有设计只能通过代码才能实现这点，让它注定更受程序员的欢迎。
官网地址：https://framer.com/
更多信息：https://blog.framerjs.com/
4. Sketch及插件-矢量绘图软件
Sketch想必大家并不陌生了，另外两款被大家所熟知的矢量绘图软件还有Photoshop和Adobe Illustrator这两款工具。通常大家提到的Sketch是指与其相关的插件，比如ContentGenerator、Icon Stamper、Measure等等。不过，它只支持基于制作好的UI视觉图进行交互，而且只有MAC版本，对于Windows用户来讲不太友好。
官网地址：https://www.sketchapp.com/
更多信息：https://www.sketchapp.com/extensions/
5. Protopie-新兴原型工具
Protopie这款交互工具最近比较火，它是来自韩国的创业团队产品，可以通过不同模块组成一个完整的交互原型，使用时无需编码且以可视化的方式进行设计。不过，它比较大的缺点在于目前不支持电脑预览、文字输入、Web端网页制作和导出。
官网地址：https://www.protopie.io/
更多信息：https://www.facebook.com/protopie/
6. Pidoco-基于Web的原型设计软件
Pidoco是一个基于网页和云端的在线原型图、线框图制作工具，可以在浏览器、iOS、Android设备上实时演示原型。但它的不足之处在于，没有密码保护，而且内置的组件模板十分有限。
官网地址：https://pidoco.com/en
更多信息：https://pidoco.com/en/company/press
7. Webflow- 在线响应式网页设计工具
Webflow是试图帮助那些对编程毫无概念的设计师更好地制作网页设计的平台，一直以“傻瓜式”著称。它提供的模板可以在三种设备(桌面设备、平板和智能手机)上实现响应式效果。但免费版本会限制某些功能，且在注册之前看不到控制面板。
官网地址：https://webflow.com/
更多信息：https://forum.webflow.com/
8. Atomic-给予浏览器的Web应用程序
这是一款拥有漂亮的用户界面和直观的时间轴的设计工具，需要GoogleChrome来运行，没有桌面应用程序。对于iOS设计人员，这款工具推出了带有iOS设计元素的套件，比较方便。
官网地址：https://www.atomic.io/
更多信息：http://blog.atomic.io/
9. Blocs-MAC网页代码编辑器
Blocs是一款针对Mac的视觉网页设计工具，提供Retina视网膜支持，可离线工作，且支持创建静态的网页。
官网地址：https://blocsapp.com/
更多信息：https://forum.blocsapp.com/
10. IconFinder
这是一个Icon素材站点，通过关键字进行搜索，同时根据需求(图标格式、价格、许可类型、图标尺寸等要素)来选择喜欢的图标。它宣称是目前世界上最大、最全的图标资源库网站。
官网地址：https://www.iconfinder.com/
更多信息：http://blog.iconfinder.com/
写在最后的话
以上就是推荐给设计师的热门工具清单，希望对你有所帮助。笔者相信，好的工具一定是在具备强大功能的同时，又能让设计者专注于设计本身、不为工具所累，这其中最有发言权的便是Mockplus。反正我已经入坑了，你不也来试试?
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/4484.html
微信扫一扫
支付宝扫一扫
相关推荐
-
电商网站购物车是否应该前置登录流程的思考
本文讲的是在电商网站购物流程中，用户将商品加入购物车时是否需要登录的一点思考。利用自己一点浅薄的电商产品经验，对电商产品设计中的一些内容与模块进行思考总结与输出。 互联网产品设计原…
-
搜狐视频是如何设计和迭代“播放历史”模块的？
内容梗概 定义问题 产品调研 迭代优化方案 1，定义问题： 1.1 播放历史是传统可用性导航的一种，其目的在于提高产品易用性与用户效率。而用户打开历史记录，一般有以下4种场景： 上…
-
每个设计师都应该掌握的10大配色技巧
配色这件事怎么聊都聊不完，不是么?选对色彩，是每个设计师的基本功，说来简单，但是千变万化，看似复杂，然则有迹可循。似乎每个设计项目在配色上，都多少会有些争议，团队讨论的时候谁都可以…
-
前端开发的历史和未来趋势
前端开发的历史和趋势 什么是前端 前端：针对浏览器的开发，代码在浏览器运行 后端：针对服务器的开发，代码在服务器运行 前后端不分的时代 互联网发展的早期，前后端开发是一体的，前端代…
-
网站的前端设计与网页制作的关系
如今做网站依然是技术为王，追逐领先技术已经不再是大学生等高学历群体的专利。就业难的当下，3G行业依然保持其旺盛的发展潜力，给经济危机笼罩的当下增添了喜色。 一些在就业市场边缘徘徊的大专生甚至高中生也跃跃欲试，希冀踏上3G的跳板摆脱学历带来的桎梏。大专生和高中生的理论基础和实践经验相对来说都比较薄弱，他们将目标瞄向要求比较低的网页制作。
-
国内设计师用户体验设计究竟有多牛逼
随着国内互联网巨头纷纷迈出国际化步伐以及国内用户挑剔程度的日益加深，设计师和产品经理不得不对自己有更高的要求，而这种高要求往往从原型阶段就能见真章。 在国内设计师纷纷向国外看齐的大…
-
所有的动效设计几乎都是这14个软件做出来的
随着UI设计的不断发展，UI动效越来越多的被应用于实际的生活中。手机、iPad、电脑、网页等各设备都在大范围应用，那么问题就来了，为什么UI动效越来越被广泛应用？它有哪些优势呢？有…
-
网站页面设计精确度能达到像素吗？
首先说一下UED和UCD，对于web设计师而言，这是两个必需先搞明白的名词，当然如果你有灵性也可以不懂，只要做出客户满意，自我感觉良好的作品就OK了，UED的本意是用户体验设计，是英文User Experience Design的缩写。通常的理解，我们做的一切都是为了呈现在您眼前的页面。UCD（User Centered Design）是指以用户为中心的设计。是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。
-
如何从设计上提高app首屏转化率和利用率？
产品名称：金融圈APP 设计团队：金融圈UED设计中心 项目介绍：本项目为首页改版方案，与产品经理，交互，运营，视觉四方共同讨论得出的一期改版方向 设计目的：以体验设计方法论体系结…
-
用DW8制作网页中常用的过渡效果
光标在代码窗口的最上一行的最前边，是合适的位置之一，对于不熟悉代码者来说，这样简单、易操作。但有些网页刚打开时光标也不在代码窗口的最上一行的最前边，那要通过边框的滚动条找到代码的第一行，然后在最前边点击鼠标，把光标定位在代码窗口的最上一行的最前边。
