快解锁这12款神奇的设计工具
翻译：王猫猫 审校：Arwen | UXRen翻译组 #368译文
原作者：Alissa Condra
原标题：《12 apps to elevate your UX process》
副标题：使用设计或非设计类工具提升设计效率
正如我们说“吃晚餐”时，并不只是“吃”，设计师工作时也不是只做设计（虽然我们希望纯粹的工作）。
当厨师准备下厨时，他需要先计划（做什么菜），然后收集食材、做前期准备、试菜，最后成品摆盘上菜。同样，设计师的工作也是从计划开始，通过各种准备、测试后，最终展示他的杰作。正如厨师除了用刀外还会用到其他工具，设计师的工作也不能只靠sketch完成。
https://giphy.com/gifs/Sweetbitter-STARZ-starz-season2-sweetbitter-RlHIot6ArrGeOwUNM
设计师还需要做大量的工作来发现问题、找到解决方案、排除实施障碍，并且将解决方案付诸实施。本文专门介绍了一些我在UX设计实践中用到，并收藏在Chrome书签中的12款设计辅助工具。
1. Wappalyzer(搞清楚网站技术栈的工具)
当我向新客户提案时，我都会先做一些前期调研，然后从用户体验的角度将调研结果展示给客户。了解自己即将设计的新版app或者改版内容是非常重要的。提案时，我会通过幻灯片向客户展示当前的体验过程以及我从中发现的机会点。
Wappalyzer是一款可以查看当前网站技术栈的信息（或上传网站URL来帮你做分析）的Chrome插件。在做演示时，引用Wappalyzer的技术可以使新客户或潜在客户更清楚地知道你的设计方案对他们的平台是可行的（并能使你看起来更聪明）。
2. UX Archive(用户页面流研究工具)
你是否曾经为了研究某个标准流程（比如登录流程或账户创建流程），然后在app里无数次截屏，浪费了整个下午都在创建不需要的帐户？
UX Archive可以替你完成这项繁重的工作。它能根据任务要求很好的分组设计图库，而且当你注册后，还可以建立自己的图库。虽然我也不确定它是否会更新图库内容，但当需要获取新灵感时它已经可以提供相当大的帮助了。
3. Uplabs(从模板开始)
Uplabs平台上有各种类型的优秀设计模板，有免费的也有付费的。如果你正在寻找灵感并且希望在这个平台售卖自己的模板，Uplabs上也有不少设计挑战赛（design challenges）。
我偶尔会遇到时间或预算都不充足的私人项目或客户项目，这时候就需要借助网上的设计模板。（在这种情况下，你需要让你的客户清楚你使用了网上的设计模板，并且保证你所下载的模板都得到了正确的版权许可）
4. Coolors.co(调色板工具)
你可以用它探索流行趋势的调色板，在浏览器中轻松浏览和调整阴影和色调，并进行渐变，最后你可以共享，复制和导出最终的调色方案。
5. Frontify(创建可复用、易操作的风格指南及品牌图库)
Frontify像是品牌版的WordPress。你可以建立风格指南，图片库，以及可以重复使用的模板库，这些模板库可供客户和服务团队共同管理和更新。如果你希望在你离开后你的设计（包括新风格）还可以保持井井有条和一致性，这样的工具就显得至关重要。
Frontify需要付费订阅，不过也有不少替代方案，其中一些是免费的。
6. Zeplin(与开发者进行设计的无缝对接)
Zeplin可以帮你从常见的设计工具中导出所有的屏幕、组件、元素，并开放只读功能给开发哥哥。当你在一个产品团队中工作时，这种生产力工具非常重要，我猜你也不想浪费大半天的时间在切图和导色值上吧。
7. Layoutit(页面标注工具)
你是否有兴趣直接使用代码做设计呢？
如果你想体验一下前端开发，我非常推荐你用一下它。即使你只是用自己的私人项目来玩玩，它也能让你对前端开发有基础的了解 ，了解你的设计是如何左右前端开发哥哥的工作状态的（更煎熬还是更轻松）。
Layoutit可以让你超级轻松的玩转前端代码。你可以从Bootstrap或CSS网格开始，通过浏览器实时编辑，下载源代码到你最爱用的编辑器中开始使用吧。
8. html-css-js.com(HTML和CSS简易生成器)
（讲真）这个网站是丑爆了，但是上面有很多简易的HTML和CSS的生成器，如图片、渐变色、图表。我还没有深入的研究过它的教程，但希望你使用之后有积极的反馈。
9. JSFiddle(前端代码可视化编辑)
JSFiddle是一款强大的网站编辑器，如果你是一位经验丰富的前端开发工程师，也会觉得锦上添花。它不仅可以让你写代码的同时预览实时效果，还可以调用常见模板，添加第三方资源，还可以与他人在线实时协作。
10. UsabilityHub(验证你的设计)
借助各种可用的研究工具，如果还无法获取产品新版本发布前后的数据表现，这就十分荒谬了。我总是重申这个观点：如果想成为一名优秀的设计师，必须学会做用户研究。
UsabilityHub就是这样一款强大的研究工具。如果你没有渠道接触到潜在用户或者也没有能力找到一位助手来帮助安排用户进行测试，我建议你使用此这款工具或其他类似的平台，这款工具自带用户招募渠道（user panel）。
11. Loom(收集用户的实际使用反馈)
Loom能同时捕获和记录用户的浏览器操作和网络摄像头的使用，而且可以很便捷地进行分享。它非常适用于内部沟通或者做教程视频，而我也用它来做用户研究。无论是使用原型还是上线测试，它都是主持人记录测试现场的绝佳工具，而且它也可以在远程无主持的测试中使用。（向用户）发出问卷后，主持人通过Loom进行讲解，让用户完成一系列任务时陈述自己的思考过程（然后记录下来）（如果你不知道从哪里开始着手的话，另一个链接的内容可以帮助你开启用户研究。）
Loom是一个非常简单的工具，可以同时记录用户的浏览器操作和网络摄像头视频，并轻松共享给其他同事。这款工具非常适合内部交流或制作教学视频，我也将其用于用户研究。无论是使用产品原型还是线上站点，它都是主持人记录测试现场的绝佳工具。你也可以考虑将其用于无主持人的远程测试。（向用户）发送问卷后，主持人通过Loom进行讲解，并让用户完成一系列任务的同时，陈述他们的思考过程。
12. Grammarly(简单便捷地撰写UX文档)
Grammarly已经上线有段时间了，你很可能已经用过它，如果没有，那现在就下载。编写一份清晰、简洁、引人注目的UX文案对于提升UI设计效率是非常重要的，Grammarly在这方面超级有用（或者你可以考虑直接雇我！）
原文来源：https://uxdesign.cc/12-non-design-tasks-to-elevate-your-design-process-b3a669f3bd03(2020.10.29)
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。
