9 个有用的UI资源网站，可帮助你完成下一个项目

墨蓝 2022-09-10 09:23 177阅读 0赞

![5e7eaf0dca6670dc37ee93f5536dbf0f.png][]

英文 | https://medium.com/codex/9-useful-websites-for-your-next-ui-project-38813ef912a8

翻译 | 小爱

从事新项目是 Web 开发中最令人兴奋的事情之一。但是，启动新项目并从头开始可能需要花费大量时间和精力。尤其是如果你是独立开发人员并且没有团队来帮助你时。

你就需要使用一些工具和资源来加快工作流程并提高工作效率。你可以使用网络上的许多网站来帮助你更快地构建用户界面。

在本文中，我将向你列出一些网站，你可以将其用于下一个 UI 项目。

现在，就让我们开始吧。

**1、Coolors**

地址：https://coolors.co/

Coolors 是一个很棒的网站，可以让你轻松地为项目生成配色方案。除此之外，你还可以使用它来创建调色板并从现有的配色方案中获得灵感。

![74d3b57d98f49049dbef718a2a323bbe.png][]

# **2、 Colors & Fonts** #

地址：https://www.colorsandfonts.com/

这个会是 Web 开发人员和设计师的绝佳资源。它包含丰富的颜色、字体和有用资源库。如果你有兴趣的话，你可以自行查看一下。

![80b8ee03c02a288bda54a5585884ed9c.png][]

# **3、One Page Love** #

地址：https://onepagelove.com/

One Page Love是一个很棒的网站，可以为你策划最好的单页网站设计和模板。这是一个学习的好地方，并为你的下一个 UI 项目提供一些灵感。

![ca4aad41490bd115e33c3e9ccefed111.png][]

# **4、Figma** #

地址：https://www.figma.com/

Figma是当今非常流行的设计工具。它非常人性化，让你可以轻松地为你的项目设计漂亮的用户界面。如果这是你第一次听说它，你绝对应该尝试一下。

![6001492c6458a94356d0e133c6fad0b9.png][]

# **5、Undraw** #

地址：https://undraw.co/

Undraw带有一个完整的不同 SVG 插图库，你可以根据需要使用它们。你可以搜索可用的插图并选择你想要的颜色。

![924cd7289a59bf743949af60cf8a95f0.png][]

# **6、Flaticon** #

地址：https://www.flaticon.com/

Flaticon可让你访问数百万个矢量图标和贴纸，可用于下一个 Web 项目。你还可以下载不同格式的图标，例如 SVG、PNG 等。

![3873953ac190ec93aac19d6bede0d49e.png][]

# **7、CSS路径生成器** #

地址：https://bennettfeely.com/clippy/

如果你不熟悉clip-pathCSS，此工具为你提供了可在 UI 中使用的完整形状库，例如三角形、圆形、椭圆形等。你还可以自定义你选择的形状并获取 CSS 代码。

![988abf71cbfd6873df5b64a4a7fea24f.png][]

# **8、Get Waves** #

地址：https://getwaves.io/

Get Waves是一款出色的工具，可让你轻松生成可用于项目 UI 的精美波浪形状。它允许您制作自定义 wave 并为它们获取 CSS 代码。如果需要，您也可以将它们下载为 SVG。

![494d5fc0922db3852c98333220322380.png][]

# **9、Animista** #

地址：https://animista.net/

Animista是一款出色的 Web 应用程序，带有一系列预制的 CSS 动画，你可以在下一个 UI 项目中使用这些动画。你可以选择不同类型的动画。

![5e5697f58c4c281fcee7d90e5eb7f773.png][]

# **结论** #

正如你在上面看到的，这些都是很棒的网站的列表，可以帮助你进行下一个 UI 项目。通过使用这些网站和工具，你可以在处理项目时节省大量时间并提高工作效率。

感谢你阅读这篇文章，希望你觉得它有用。

#  #

**学习更多技能**

**请点击下方公众号**

![edb0151b7de33bc02018803b3b63cf7b.gif][]

![53e42cf392f4c8f3d2670c870956268b.png][]

![cfb9632817357225decdedb9e8276369.png][]

[5e7eaf0dca6670dc37ee93f5536dbf0f.png]: /images/20220829/c0646799bf364cfc9c1493ef57b7cd9a.png
[74d3b57d98f49049dbef718a2a323bbe.png]: /images/20220829/ae8ae94f4a154566864c28fef186f51a.png
[80b8ee03c02a288bda54a5585884ed9c.png]: /images/20220829/f6a369a774e044c39fa4c3508db54cba.png
[ca4aad41490bd115e33c3e9ccefed111.png]: /images/20220829/c3264673011247c28e3f5c76c2d28d7a.png
[6001492c6458a94356d0e133c6fad0b9.png]: /images/20220829/ec168a2c0c8e4bd382ee39fb54df9ea4.png
[924cd7289a59bf743949af60cf8a95f0.png]: /images/20220829/ed0a736a063e487badc018b8c8a14d39.png
[3873953ac190ec93aac19d6bede0d49e.png]: /images/20220829/baac84eb499a410591795c1d9d46629e.png
[988abf71cbfd6873df5b64a4a7fea24f.png]: /images/20220829/400b4e52ed2841d4bd7301e6ab1dea62.png
[494d5fc0922db3852c98333220322380.png]: /images/20220829/8aea5e70bb8342c6acb5a485ae82c07c.png
[5e5697f58c4c281fcee7d90e5eb7f773.png]: /images/20220829/9bc6217069df42469b52670204bdba66.png
[edb0151b7de33bc02018803b3b63cf7b.gif]: /images/20220829/9f25d577a2f64ca086a816c6fee7b710.png
[53e42cf392f4c8f3d2670c870956268b.png]: /images/20220829/ca6594156d2540f6958f03aeccc2a7f3.png
[cfb9632817357225decdedb9e8276369.png]: /images/20220829/dab6d4c4e28a48f7a5f6a91a53261e7e.png