产品设计工具有哪些（最值收藏的36款工具）

这是来自 Prototypr.io 的春季干货素材合集，总计36款不同类型，不同属性的优质设计素材，覆盖你不同的需求。先收藏再细看，总会有你想要的好东西。

这次的合集当中包含了如下内容：

4个学习资源6款实用小工具6个原型设计工具2个图标合集6款建站工具2个协作平台3个视觉稿工具6个设计素材合集1个有趣的小工具

3个设计学习资源

在这个时代，保持学习和进步是必须的事情。下面的设计资源将会为你提供正确的前进方向，激励你更进一步。

1. Humane by Design →

在很多时候，技术是用来提升我们能力，让我们变得更强大。但是，事情并不总是如此。时间和注意力如今已经是稀缺资源了。很多数字产品都会钻我们天性中的空子，利用人性的弱点。考虑到这一点，Humane By Design 这个资源合集就诞生了，其中汇集了大量更加注重体验和人性化设计的数字产品，他们真正是服务于人，而非利用。

2. Unity for Designers →

这是一个长达6个小时的课程，教你如何从头开始制作一款跨平台的游戏。

3. Top UX School →

Kaiting Huang 基于自己在UX设计领域的经验，创建了这个顶级的UX学校。你可以在这里找到适合自己的UX学习计划。

6款实用小工具

1. Shade →

这是一款在 iPad 和 iPhone 上使用的强大的调色工具，其中包含许多强大的进阶功能，包括智能连接、高级渲染以及导出到 Unity 和 Codea，当然，它的 UI设计非常易用。

2. Accessible Brand Colors →

你的配色是否符合 ADA 的标准？这款工具能够帮助你优化配色，确保色彩的可访问性，甚至直接帮你找到效果更好的类似配色。

3. Color.review →

这也是一款非常棒的提升配色可访问性的工具，它会根据你的前景色和背景色的具体配色来进行配色评级，帮你的设计走上正轨。

4. Culrs 2.0 →

这是一个来自设计师 Jolly Farhana、Arnob Mukherjee、和 Rupak Mishra 的设计项目，它也是帮你进行配色选取的，每套配色都经过精心策划，每套配色的组合都非常优秀。

5. Speak Human →

设计出以人为中心的微文案，对用户体验设计师而言，这是非常重要的工作内容之一。但是在实际工作中，并不是每次都可以完美地完成这样的工作，而这个工具就能帮你快速生成微文案。

6. Typetura →

这是Scott Kellum 和 Sal Hernandez 所制作的一款排版工具，让你在不同的屏幕上流畅地设置不同的文本元素的样式。

6个原型设计工具

1. Voiceflow →

如果你喜欢借助语音来输出文本甚至更多不同类型的内容，那么现在你有福了。使用 Voiceflow，你可以在 Google Assistant 和 Amazon Alexa 的帮助下进行原型制作，甚至发布语音应用，全程都无需代码。

2. Charts for Sketch →

这是 Ruslan Latypov 和 Anton Mishin 所创建的一款工具，用来全面而便捷地在 Sketch 中定制图表和表单，它完全免费！

3. Vectary 3.0 →

Vectary 3.0 发布了！有了它，你可以在浏览器中为你的网站、社交媒体甚至其他项目快速创建3D内容。它还提供协作空间，这意味着你创建了之后还可以迅速地同你的团队进行分享并收集反馈，以便迭代。

4. Haiku Animator →

这是一款对于设计师和开发人员非常友好的动画工具，Haiku 让你可以无缝地创建引人入胜的动画，提升设计和开发效率。

5. Maze 2.0 →

Maze 是一个非常优秀的用户测试平台，能够让设计和体验团队更好更快地了解用户和产品，而不是在猜测和臆想中前进。

6. Retest →

这是一个用户测试工具，你可以轻松地在不同的设备上测试你的网站，确保网站的体验无缝并优化至最佳状态。

2套图标合集

1. Classic Macintosh UI Kit →

如果你是一个怀旧的人，那么这套经典的 Macintosh UI 工具包能够帮你回到美好的80年代，将 UI 变成当年的 Macintosh 的样子。它包含100多个不同的符号、矢量图标，它最大的优点在于，绝大多数的元素都是可编辑的！

2. Potlab Icons →

Potlab Icons 是设计师 Suresh Sakthivel 创意的产物，这个 SVG动画库将会给你的网站和设计项目带来全新的生命力。自定义的色彩和笔触，你将会拥有最大的自由度！

6款建站工具

1. GitHub Personal Website Generator →

我们都热爱 Github ！而这是 Github 所提供的个人网站生成器。有了它，你能按照自己的需求来定制素材和体验，享受开发的过程。

2. Book for Leeflets →

想要生成一个可访问性强、自定义且像素完美的单页网站？按照这套方法来就行了。

3. Gridbox v5.0 →

使用 Gridbox V5.0 你能更加直观地使用代码创建网站原型，这款工具附带了一个 Bootstrap 和 HTML5 元素库，可以更快、更加高效地构建页面。

4. Core by Mason →

这是由 Mason 所提供的一款完全免费的 UI Kit，其中包含了各种各样的功能和组件，包括 Banner、订阅、CTA元素和表单，不一而足。适用于 React 和 HTML。

5. CSSeffectsSnippets →

CSSeffectsSnippets 是基于 Vue.js 来构建的，你只需要点击你所需要的动画，相应的代码就会被复制到剪贴板当中，接下来你就能开始使用它们了！

6. Lax.js →

Lax.js 是一款轻量级的 Javascript 插件，可以让网站在滚动浏览的时候生成令人惊叹的动画。这是一个打动用户的好选择哦~

2个协作平台

1. Honest Feedback →

了解如何展示你的工作和技能，就是找到工作机会的关键。Honest Feedback 为设计从业者提供了一个安全的空间，让设计师在这里获得关于作品集和作品设计的反馈和指导，非常简单，但是非常好用。

2. Plectica →

这是一个为团队所提供的概念绘制工具，它让团队中的不同人共同完成概念设计，并且在这里整合并进入同一步调。Plectica 为设计师和开发者构建出一个足够简单但是有效的环境，更快地将视觉内容和想法连接到一起。

3款视觉稿设计工具

1. Mock →

Mock 是一款非常独特的视觉稿生成工具，它是借助视频录制的方式，将屏幕内容转化到不同的硬件上，生成视觉稿。

2. Mockdown →

Mockdown 将低保真视觉稿又带回来了。它可以将你的UI图片转化为低保真模型，用来进行视频展示和概念演练。目前测试版可以免费使用，试试看吧！

3. LongLiveSS →

这款简单的工具，能够让你以非常优雅的方式来保存网站截图，只需要提供你想保存的网页的链接地址，以及图片尺寸，它就能帮你生成。

6款设计素材合集

1. Ear Palettes →

这个配色合集的灵感来源于摇滚音乐的专辑封面，所以就有了这个 Ear Palettes 的名字。

2. Logo Grabber →

这个工具也相当实用，只要你提供相应公司的网站，这款工具能够帮你找到并获取公司的 LOGO。

3. Landing Stock →

找到完美的图库是一件很难的事情，无论是什么图片。而设计师 Craig Barber 则打算帮你解决这个问题，解决方案就是这个 Landing Stock 网站，它有一个精心设计的着陆页图片库，确保能帮你生成高质量的、干净的图库。

4. UnDeck →

如果你正在服务于某个机构，那么你一定知道找到高质量的展示用的图片有多麻烦。亚特兰大的服务供应商 KP 为此专门创建了 UnDeck 这个网站，专门提供高素质且免费的资源平台。来试试看吧。

5. Glide →

无论是展示幻灯片还是视觉稿，Slidor 所提供的这个强大的模板 Glide 都能够帮你搞定。

6. Laazy →

忙碌可能是瞎忙，而偷懒同样可以非常有效地解决问题。Laazy 可以帮助设计师和开发者更有效地在浏览器中使用图片。

1款有趣的工具

1. Tinkersynth →

这并不只是一款生成数字艺术作品的线性工具，它还是一家艺术商店，它鼓励你多尝试多试验，去创作更多有趣的东西。