50 多种免费工具和资源，助您打造出色的用户界面

精选设计工具

图标字体定制

图标集合：

“你的能力取决于你使用的工具”

这句谚语流传多年，强调了使用正确工具的重要性。这句格言适用于数百个不同的领域和学科，幸运的是，它也适用于设计领域。

从我作为一名高级产品设计师的经验来看，几乎没有什么比使用正确的工具来创建美观的用户界面更重要。合适的图片或均衡的配色方案，能够让用户界面的优劣产生巨大的差异。

我将分享一系列免费且非常有用的资源/工具，我每天都会使用这些资源/工具为我的客户以及我的项目Cruip和SaaS Landing Page创建用户界面（网站、登录页面、网络应用程序等） 。

为了让您轻松找到特定的资源/工具集，我将列表分为不同的类别：

• 照片和视频
• 插图
• 调色板
• 排版
• 动画和效果
• 图像学
• 图案和形状
• 公用事业

因此，如果您正在寻找一组免费的图标，只需跳转到图标类别。

最后说明一下：此列表未包含一些用于创建用户界面的热门资源，例如 Unsplash（照片和视频类别）或 Google Fonts（字体设计类别）。为什么？因为您可能已经知道它们了。

50 多种免费工具和资源可用于创建出色的 UI：

照片和视频

科弗尔

精美、免费的视频，可作为您的主页背景。

Mixkit

精彩的库存视频剪辑、库存音乐和 Premiere Pro 模板全部完全免费！

Pexels

才华横溢的创作者分享的最佳免费库存照片和视频。

照片创建器

利用数千个模型、物体和背景创建逼真的照片。

取消筛选

100% 自动删除视频和 GIF 背景。

删除背景

自动 100% 去除任何图像的背景。

生成的照片

为商业内容获取高质量生成面孔的最实用的方法。

双色调

在几秒钟内将任何照片转换为双色调。

插图

Notioly

美丽的 Notion 风格插图。

打开窥视

100% 免费的手绘插图库。

Smash 插图

免费混合搭配插图构造器。

打开涂鸦

免费素描插图集。

控制插图

108 幅免费平面插图，带有可定制的角色。

哎哟!

免费矢量插图使您的项目更加精致。

头像生成器

一个用于生成手绘头像的简单网络应用程序。

伪代码生成器

将真实代码（Github Gist）转换为虚假代码（SVG 图像）。

调色板

参数混色器

受音频参数均衡器启发的调色板作曲家。

CSS渐变

一个简单而多彩的 CSS 渐变生成器。

色彩灵感

只需单击一下即可使用数千种美丽的调色板。

彩色六边形

免费的颜色工具，提供有关任何颜色的信息并为您的设计生成匹配的调色板、色调/色调。

色彩空间

为您的下一个项目生成漂亮的调色板、渐变色和匹配的配色方案！

Palettte应用程序

创建、分析和编辑平滑的调色板。

可着色

颜色组合对比度测试仪。

排版

Freebiesbug（免费字体）

为网页和图形设计师精心挑选的免费字体和字形。

字体竞技场

免费字体，以及高级字体的免费替代品。

贝丰茨

下载免费字体供个人或商业使用。

字体松鼠

下载数千种完全合法、高质量、免费的字体。

丰乔伊

轻松混合搭配不同的 Google 字体，实现完美搭配。

类型比例

预览并选择适合您项目的字体比例。尝试不同的字体大小、比例和网页字体。

动画和效果

平滑阴影生成器

使用缓和曲线制作平滑的阴影。

CSS效果片段

使用 Vue.js 制作的 CSS 效果集合。

分离器发电机

可定制的 CSS 部分分隔符集合，可以轻松复制代码。

安尼米斯塔

在这里，您可以使用一系列可立即使用的 CSS 动画，对其进行调整，并只下载您实际会用到的动画。

可拖动

轻量级、响应迅速、现代的拖放库。

区块显示效果

在示意图框中展示内容的想法。

图像学

图标商店

由一流设计师设计的适用于个人和商业项目的免费矢量图标库。

CSS图标

开源 CSS、SVG 和 Figma UI 图标可在 SVG Sprite、styled-components、NPM 和
API 中使用。

图标过渡生成器

在两个图标之间创建一个快速过渡并下载 SVG 代码。

蒂尔达图标

700 多个用于登陆页面的免费图标集合。

伊科纳特

完全可定制且可访问的矢量图标。

伊娃图标

Eva Icons 是一套包含 480 多个精美开源图标的包，用于常见操作和项目。

动画图标

400 个免费动画图标可以 JSON 格式下载，适用于 Lottie、GIF 和 After Effects 格式。

图案和形状

CSS 模式

仅限 CSS 库，可使用美丽的图案填充空白背景。

获取 Waves

一个简单的网络应用程序，用于生成 svg 波形，每次都是独一无二的。

斑点制造器

只需几秒钟即可创建有机 SVG 形状。

辐射线

用于生成用于绘图的多边形 SVG 的网络工具。

模式

免费收集所有矢量格式的精美图案。

涂鸦

100 多个矢量涂鸦为您的设计项目增添趣味。

公用事业

Nucleo 应用程序

一个强大的应用程序，用于收集、定制和导出您的所有图标。

清单设计

最佳 UX 和 UI 实践的集合。

设计系统库

您可以从中汲取灵感，获得全面而精心挑选的设计系统、风格指南和模式库列表。

CSSPeeper

以简单、有序且美观的方式检查样式。

AI 图像升级器

使用人工智能自动放大和增强图像。

结论

希望你喜欢这份免费工具和资源清单。还想了解更多？点击此处查看第二部分。