ui字体设计应该怎么做（UI字体前端）

这次的干货经过了重新的分类和筛选，其中主推的取色工具 Pika、图标服务 Iconduck 以及 Persona 对于 UI 和 UX 对设计师而言，应该是相当有用的东西。当然，除了这些之外，包括字体、教程、前端等多种类型的素材，快来看看吧：

4款精选工具

01

PIKA

https://superhighfives.com/pika

Pika 是一个全新的配色管理 Mac 应用，它可以直接帮你在屏幕上取色，能够节省时间，避免麻烦。它更为强大的地方在于，可以帮你确认配色的可访问性，并且提供合理的格式来承载配色方案，直接使用。

02

ICONDUCK

https://iconduck.com/

Iconduck 是一个可搜索的数据库，它包含 10 万多个不同的图标，以至于你再也不用到处去搜索图标，而可以在这里一站式地搞定图标的问题。另外，这里搜集的图标都是免费的。

03

DESCRIPT

https://www.descript.com/

Descript 是一个可以非常高级的工具，它可以将视频和音频当中有问题的内容给去除掉，而处理的机制则类似于 Word 文档，可以转录，截屏，编辑，发布，而所有的功能都有 AI 作为辅助。

04

PERSONA（搭梯子使用）

https://withpersona.com/

这是一个多合一的用户画像工具，它提供一个搜集、验证、管理的一体化的用户画像管理体系，它是全自动的，能够在大概 10 分钟完成用户画像的构建到执行的全部工作，它有免费的版本，也有功能全面的进阶版。你可以从免费版入手验证一下这个工具的效果。

6款生产力工具

01

PEEKALINK

https://www.peekalink.io/

Peekalink 能够将链接转换为更加视觉化，更加有趣的样式，并且非常容易上手。你只需要将链接发送给 API 即可获得响应，然后就能用了。

02

LINKACE

https://www.linkace.org/

LinkAce 是一个开源的代码托管服务，用来存储和管理需要保存的链接，你可以借助标签和列表进行管理以及搜索，并且借助自动备份和监控功能，访问所有的内容。

03

FORMALITY

https://formality.dev/

Formality 是一个 WordPress 插件，能够帮你简化表单，它可以和基于 Gutenberg 的表单生成器一起使用，这款表单生成器能够以单个块的格式来控制表单，这款插件能够生成和主题无关的设计，自然也可以和任何布局样式进行搭配使用，并且包含自定义的设置。

04

WONDERCALL

https://tico.chat/en/wondercall

Wondercall 这是一个适用于任何网站和 APP的嵌入式视频通话系统，你可以将它嵌入到你的产品当中，方便用户进行视频通话。

05

EDITOR X

https://www.editorx.com/

Editor X 是一个完成测试的网站编辑器，它是专门为设计师和服务代理商所准备的一款网站搭建工具，能够快速地创建网站，能够实时注释，完善的权限管理，以及便于使用的共享设计库。另外，这个平台提供了无代码交互的功能，相当不错。

06

SHAREFUL

https://apps.apple.com/app/id1522267256

Shareful 是一款 Mac 应用，它可以让系统的共享菜单更加强大，并且安装它之后，你可以直接从系统的共享菜单当中调用它，它添加了复制、另存为和间接打开的共享选项。

2套图标合集

01

SUPERCONS

https://supercons.vercel.app/

Supercons 是一个可以在 React 中使用的开源图标合集，素质过硬，可以帮你更快推进设计项目。

02

PLUMPY ICONS

https://icons8.com/l/plumpy/

Plumpy Icons 是一套填充样式风格的图标合集，这套图标设计得非常有趣，采用双色设计，并且由于它是矢量的，所以可以任意缩放大小。其中包含有 4000 多个图标，根据你的需求，你可以选择收费或者免费的套餐。

3套教程和Demo

01

NOISE PLANETS

https://avinayak.github.io/art/2021/01/09/noise-planets.html

Noise Planets 是一套有着有趣效果的纹理生成工具，它生成的纹理小样会被放置到一个圆形的区域当中，你可以通过教程和代码片段，将这些内容转化为动画。

02

CSS POLYGON SHAPES

https://codepen.io/yuanchuan/full/QWGWXPz

这款 CSS 多边形图形工具是使用 CSS-doodle 和 Clip-path 生成的，你可以根据需求对它的造型进行进一步的自定义。

03

MUTSUACEN

https://mutsuacen.com/

Mutsuacen 是一款小程序，能帮你创建交互式 的动画，如果你有现成的素材，还能更大程度地发挥这款工具的潜力。当然，如果你单纯拿它来涂鸦，也非常好玩。

8款字体和文本工具

01

TEXT WARPING – ANIMATED

https://codepen.io/lokesh/full/vYXvwGQ

这是一款由 Lokesh Dhakar 所制作的字体效果工具，能够在保证字体可读性的同时，还能创造出时髦的效果。

02

GAZPACHO

https://www.myfonts.com/fonts/santi-rey/gazpacho/

Gazpacho 是一款灵活有趣的字体家族，有14 种不同的样式，从细斜体到超粗的样式全都有。这套字体的可读性都很不错。

03

STAY HOME

https://www.dafont.com/stay-home-2.font

Stay Home 是一款线条简约的线性字体，它的字符集字数不多，但是可以匹配一些有趣的小程序来使用。

04

DOGMEAL FIGURE

https://www.fontspace.com/dogmeal-figure-font-f56470

Dogmeal Figure 是一款看起来非常蠢萌的字体，字体中会带有很多骨头和小狗爪印的元素，对于比较童趣的项目会非常有用。

05

HASTER

https://www.1001freefonts.com/haster.font

Haster 是一款扁平几何风的字体，它的形状和线条非常硬朗，适合拿来展示。

06

COVID PANDEMIC LOCKDOWN

https://www.fontspace.com/zai-covid-pandemic-lockdown-font-f56457

Covid Pandemic Lockdown 是一款非常新颖的字体，有着较为粗的笔触和好玩的样式。

07

VALERIA

https://www.dafont.com/valeria-2.font

Valeria 是一款简约的字体，形体结构相对复古一点，笔触有明显的喇叭口，可读性不错。

08

CORNELLIA

https://www.fontspace.com/cornellia-font-f56465

Cornellia 是一款漂亮的手写字体，它不同的字母组合的时候，会有漂亮的连笔效果，非常优雅有趣。

,