全面Web化！2024年UI设计师必会工具清单

时光如梭，笔者在UI / UX设计领域从业已经超过10年了。回想早期设计师们的主要工具都是单机软件（如Sketch、Photoshop等），其他工具主要都是围绕它们的一些插件。而10年后，整个设计行业已经明显接受了工具Web化的模式，各种设计场景的解决方案均开始使用Web-App作为新的载体。

如果你是一位想要进入UI和体验设计行业的新人，笔者认为2024年的UI工具学习路径相比之前已经有了明显的变化。后文我将从：主力UI设计、特定素材制作、团队设计工作流、素材和规范管理这四个方面总结15款当下UI设计师必会的工具，供各位读者参考。

一、主力UI设计

1、政治正确 - Figma

官网：https://www.figma.com/

2021年之后的UI行业，Figma几乎就是政治正确的代名词。甚至可以说Figma已经重塑了整个行业的偏好、逻辑和使用习惯。在2024年如果一个行业新人完全不会Figma，甚至对Figma中的一些特有的设计前端化概念没有基本的认知，你将很难进入一个相对成熟的中大型设计团队。如果你是刚进入UI行业的新人，从Figma开始学是最佳的选择。

推荐指数：⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️⭐️

产品类型：Web在线工具

2、国产设计平替 - 摹客DT

官网：https://www.mockplus.cn/dt

Figma对于国内用户有几个老大难问题：一是无官方汉化和任何本地化适配，二是订阅价格极其离谱，三是国外服务器的直连效果很差。所幸国内一些老牌设计工具研发商也提供了平替Figma的产品，这其中笔者最推荐的还是摹客DT。

摹客DT这款产品完全免费，功能上覆盖了Figma的95%以上，全中文界面对于国内设计师也更友好。摹客DT还可以和摹客旗下的CC和RP联动，打通产品原型、设计、交付开发整个流程，一站式解决产品设计团队的所有问题。

推荐指数：⭐️⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️

产品类型：Web在线工具

二、特定素材处理

1、通用图像处理 - Photoshop

虽然现在的UI设计师已经不再使用Photoshop来做UI了，但设计过程中仍然可能需要对图像进行一些处理，无论是抠图、调色还是裁切，甚至是利用AI更改原画面的局部内容，借助Photoshop来处理仍然是最佳方案。尤其是需要和其他设计师合作、或是临时处理网上的一些素材包时，大概率还是要应对PSD格式的文件，这个时候没有PS的知识就会非常尴尬。

推荐指数：⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️

产品类型：本地软件

2、3D视觉设计 - Spline

Spline是一款轻量的在线3D编辑器，学习成本相比传统的C4D和Blender都要更低不少，且在国内的教程也已经相当丰富，完全满足UI设计师日常的3D需求。3D工具最大的痛点就是软件上手难度高，安装环境和相应渲染器、插件比较消耗时间。而在线的3D编辑器可以开箱即用，大大降低了新人的学习门槛，输出内容品质也足够UI使用，和开发的对接也更方便。所以在2024年，笔者更推荐UI新人从Spline开始学习和使用3D效果。

推荐指数：⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️⭐️

产品类型：Web在线工具

3、快速营销设计 - 稿定设计

稿定设计是一款在线的营销物料制作工具，提供了大量可以直接使用的模版素材。模版的设计感十足，可编辑性也非常好，同时素材的更新频次也比较高，非常适合UI设计师快速应付一些日常营销设计需求。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

4、动态素材制作 - AfterEffect

多年以来，笔者一直尝试寻找可以替代AE来制作UI动态素材的产品，但很遗憾行业内似乎没有任何一款产品能撼动AE的地位。虽然一些在线编辑器可以一定程度上降低学习门槛，但其功能和输出能力还是没办法和AE相比。常见的APNG、WebP、Gif、Lottie / SVG等格式的动效素材依然需要用AE来导出，这也就注定了UI设计师需要制作动效素材时，AE几乎是唯一的答案。

推荐指数：⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️⭐️

产品类型：本地软件

5、微动效演示 - Principle

如果需要向其他人快速演示一个逼真的、可操作的微动效demo，使用Principle应该是最合适的选择。这款产品可以一键将Figma / Sketch中的设计导入到编辑区，然后使用多画板创建开始和结束状态，中间的动效会自动补间生成。Principle的制作效率高，且符合UI设计师的思维方式，自带的时间轴编辑器极大地提升了动效细节的控制能力，非常适合制作视觉要求高，但时长较短的交互动效。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：本地软件

6、视频处理 - 剪映

时代确实很卷，当下的UI设计师也可能需要处理视频类型的素材。此时笔者最推荐的还是使用业内评价不错的轻量剪辑工具“剪映”。这款工具充分吸收了Final Cut Pro和Premier的优点，操作简单，内置素材和各种常用设置功能丰富，完全能应付一般的视频内容处理。

推荐指数：⭐️⭐️⭐️⭐️

上手难度：⭐️⭐️

产品类型：本地软件

7、AIGC生成 - 文心一言

AIGC产品目前市面上非常多，这里推荐国内的用户还是使用综合实力领先的文心一言。这款产品在生成文字和图像时表现都比较好，只需要填写合适的Prompt（提示词），就可以获得相应的文字或者图像。此外，现在的AI产品普遍还加入了文件上传、生成PPT等功能，通过这些功能可以更快处理文件内容，并节约制作PPT的构思时间。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

三、团队设计工作流

1、设计检查 - Copixel

官网：https://copixel.bytedance.com/

Copiexl是字节出的一款高效走查开源工具。它的使用很简单，就是打开需要走查的前端web页面或项目，接着使用工具上传该页面的高保真设计稿；然后通过降低设计稿的对比度，与开发出来的前端效果进行对比，达到快速走查发现问题的目的。页面哪里有问题通过对比马上就能发现了。

推荐指数：⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

2、协作交付 - 摹客协作

官网：https://www.mockplus.cn/idoc?home=1

摹客协作平台支持主流的目前主流的设计工具设计稿上传，包括Sketch、PS、XD、Figma、Axure，同时也支持摹客自家的RP和DT设计稿上传。上传后的设计稿可以共享到团队中进行评审和开发交付。对于团队来说，还可以把设计稿之外的规范、文档、素材等内容均上传到同一个项目中进行分享，让所有团队成员都能获得最新的资源。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

3、用户沟通和调研 - 腾讯会议

腾讯会议是国内普及率比较高的在线会议和沟通工具。设计团队可能需要在产品立项、验收、上线后等关键节点快速获取用户的反馈，而此时腾讯会议就显露出了他的核心优势：用户的接受程度比较高。产品支持投屏、录屏、远程控制等功能，设计团队可以将和用户沟通的视频录制下来，后续再深入分析和挖掘。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：本地软件

四、素材和规范管理

1、素材灵感查找 - 花瓣

花瓣是国内老牌的免费素材搜索网站，相比同类型的其它网站，花瓣在素材下载上的体验上更好：用户可以直接右键复制图片并使用到其它产品中，甚至无需下载。由于多年的合理经营，花瓣在素材质量、素材数量和用户活跃度上始终处于国内第一梯队，部分素材开启会员后可以直接下载源文件，丰富的题材类型能满足各种设计师的需求。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

2、本地素材收纳 - Pixcall

Pixcall是一款跨平台的云端的全格式资源收纳工具，可以帮助个人和团队更好地管理图片、视频、文档等数字资产。相比起其他的资源收纳和预览工具，Pixcall可以自由选择本地或云端存储素材，也可以自由选择使用客户端还是云端来进行素材的预览。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

3、团队规范管理 - Zeroheight

Zeroheight是一款设计规范工具，能帮助团队创建和管理设计规范文档。在云端平台中设计师、开发人员和产品经理能够协作创建和维护设计规范，确保团队在设计过程中保持一致性。Zeroheight的在线文档功能强大，还可以和其他设计工具进行实时同步，让规范维护过程变得更轻松。

推荐指数：⭐️⭐️⭐️

上手难度：⭐️

产品类型：Web在线工具

以上就是笔者选择的2024年UI设计师必会的15款工具。可以看到，设计工具的国产化和Web化是大势所趋，年轻的设计师们明显更接受轻量化、专业化、协同化的工作方式。如果你即将开启UI设计师的旅程，不妨从上述的工具开始学起。熟练掌握这些主流工具之后，你一定会得到一个更广阔的就业前景。