在 2012 年时，我（英文原文作者）曾解释过为什么应该让人们在输入密码时看到明文，尤其是在移动设备上。两年过去了，相关的实践模式越来越多的进入我们的视野。

拓展阅读

掌握这 7 条准则，提升用户登录成功率！ TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。

阅读文章 >

为什么要显示密码明文？ 密码输入方面的可用性问题被诟病已久。复杂的安保要求（最少 xx 个字符、必需包含标点符号和大写字符…）以及难用的输入方式等等时常会使用户产生强烈的挫败感，甚至蒙受损失。

数据显示，约 82% 的用户曾经忘记过密码；找回密码是使用频率最高的功能之一；如果人们在网购过程中忘记密码并尝试找回，那么其中约有 75% 的用户不会完成最终购买。可以说，密码这种机制的弊端是越发明显的；而在移动设备上，受到使用情境及设备自身在显示和操作等方面的局限，情况则变得更加糟糕。

密码遮罩使本就复杂的输入变得更加困难，而且对安全方面的贡献着实有限，尤其是在移动设备上 – 键盘就位于输入框下方，你输入字符时，对应的按键还会突出显示，其中的字号比输入框里的更大。所以在现实中，如果真的有人想在你身旁偷窥，密码遮罩其实起不到什么保护作用；这种情况下，倒是把手机拿到一个更隐蔽的地方进行输入来的更安全。

切换隐藏与显示 出于所有这些原因，我们决定在 Polar 的登录界面将密码明文呈现给用户，并在密码栏右侧提供一个隐藏按钮，如果你确实需要，便可以点击该按钮将密码切换为遮罩符。

虽然我相信这是有利于可用性及可访问行的正确做法，但还是有些担心用户看到密码明文后会产生负面感受，毕竟长久以来的遮罩设计模式已经使人们产生了“安全”的认知习惯。

所以，当我听说有人不仅发布了以明文呈现密码的产品，而且还取得了成功的事情之后，觉得很是惊喜。在这篇推中，Steven Hoober 告诉我们，两千万的 Sprint 用户已经在使用着移除了密码遮罩的产品，没有遇到任何问题；Mike Lee 也说，当时 Yahoo!的改版当中包含了移除密码遮罩等一系列改进，并带来了两位数的增长幅度，并且没有发现任何安全方面的问题。

在我看来，密码遮罩突然间就变成了旧事物，一个存在了很长时间的设计模式开始被逐渐的质疑和唾弃。回头看看，我们曾经那么理所当然的把密码遮罩当作默认模式来使用，而对可用性甚至是业务的损害也随之而来。

解决方案 最近一段时间，很多公司开始认真对待密码遮罩的问题了，并带来了很多不同的解决方案。PayPal 和 Foursquare 采用的就是前面提到的我们在 Polar 当中使用的模式：

LinkedIn、Adobe 和 Twitter 也是类似，不过将文字按钮改为了睁一眼闭一眼的图标。图标形式有利有弊，一方面可能不如文字形式那么显而易见，但另外一方面，对于有国际化需求的产品来说，可以避免译文长度难以控制的问题。

微软采用的实践方式略有不同。在 Windows 8 中，密码默认仍以遮罩形式显示，按住右侧的眼睛图标可以查看密码明文，移开手指后再次恢复遮罩状态。

Amazon 一直在反复迭代着登录表单的设计模式：最初是无法查看密码明文，就像大家一直以来那样；后来允许用户勾选是否显示密码明文，但默认仍是显示遮罩；接下来就是默认显示密码明文，但允许用户勾选使用遮罩模式。

虽然这些方案各有利弊，但最重要的一点是，微软、Adobe、Twitter、LinkedIn、PayPal、Amazon 以及其他很多公司都已经意识到了长久以来存在于登录表单当中的可用性问题，并大胆的进行了改变。

设计在细节中 虽然越来越多的公司开始尝试让用户在输入密码时看到明文，但这并不意味着你可以随便拿来某种模式扔到自家产品中。实际上，正是这种人云亦云的思维模式让我们长久以来一直在使用那些其实不那么合理的设计模式，包括密码遮罩。更加可取的是，试着花些时间结合自己产品的具体情况真正研究一下各种方案的利弊，要知道这些细节当中的变化是有可能对产品产生很大影响的。我们不妨来看看 Jack Holmes 做的关于移除密码遮罩研究。

Jack 的测试表明，对于电商类产品，当登录密码默认以明文形式显示的时候，60%的被测用户感到不安，他们觉得这可能是网站中的 bug 或某种严重的安全隐患，只有 45%的用户认为这种方式相比以往更加好用；而在默认显示明文并提供复选框来恢复遮罩的模式下，100%的被测用户意识到这是一个正常的功能改进，而且不会影响到他们对这个电商网站的信赖感。

从 60%的疑虑，到 100%的认可 – 细节中的设计真的事关重大。从这个研究结果来看，Amazon 决定采用“默认显示密码明文，允许用户手动隐藏”的模式不是没有道理的。

Web v.s. App 前面提到的都是应用或系统中的案例，但目前在页面端采用这类模式的还不多见。都是一样的服务，为什么要让通过浏览器访问的用户不得不面对比较难用的界面呢？

不外乎是安全方面的顾虑，尤其是这样一种情况：

我的设备有可能被你使用 你解锁了我的设备 你打开了一个网站 我正好在浏览器中保存了登录这个网站所用到的密码 这个网站正好提供了查看密码明文的功能 于是你知道了我的密码

Web 浏览器将密码保存及自动输入功能与查看密码明文功能搭配在一起使用，确实是一件非常危险的事，可能带来严重的安全问题。降低危险系数的一个做法是，如果探测到浏览器已经自动填入了之前保存的密码，那么就在页面中把密码框直接隐藏起来；如果有人想查看密码，那么密码框会清空，用户需要重新输入密码；此时输入的密码为明文，并允许切换为遮罩模式。

遗憾的是，在网页端实现这套方案所需付出的设计和开发成本似乎已经超出它能带来的潜在价值。

超越密码 在移动端登录的问题上，Amazon 从未停止过迭代。在最近的 iOS 版本中，他们甚至移除了密码登录，让用户可以直接通过 Touch ID 验证身份。

Uber 走的更远些。要通过他们的服务来叫车和支付，你甚至无需创建账户、输入密码、填写复杂的支付信息 – 所有的身份认证工作都可以通过 Touch ID 完成(使用 Apple Pay)。

虽然 Touch ID 仅限于 iOS 设备，但这确实是一种极大降低身份验证操作成本的新标准。如果人们能自主选择登录或支付的方式，你觉得大家会选择复杂的表单、乱七八糟的密码规则及不可见的密码遮罩，还是一个简单的触摸？

从这个角度看问题的话，登录表单和密码机制的未来就变得清晰起来；这些甚至不会再成为问题。

在 2012 年时，我（英文原文作者）曾解释过为什么应该让人们在输入密码时看到明文，尤其是在移动设备上。两年过去了，相关的实践模式越来越多的进入我们的视野。

拓展阅读

掌握这 7 条准则，提升用户登录成功率！ TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。

阅读文章 >

为什么要显示密码明文？ 密码输入方面的可用性问题被诟病已久。复杂的安保要求（最少 xx 个字符、必需包含标点符号和大写字符…）以及难用的输入方式等等时常会使用户产生强烈的挫败感，甚至蒙受损失。

数据显示，约 82% 的用户曾经忘记过密码；找回密码是使用频率最高的功能之一；如果人们在网购过程中忘记密码并尝试找回，那么其中约有 75% 的用户不会完成最终购买。可以说，密码这种机制的弊端是越发明显的；而在移动设备上，受到使用情境及设备自身在显示和操作等方面的局限，情况则变得更加糟糕。

密码遮罩使本就复杂的输入变得更加困难，而且对安全方面的贡献着实有限，尤其是在移动设备上 – 键盘就位于输入框下方，你输入字符时，对应的按键还会突出显示，其中的字号比输入框里的更大。所以在现实中，如果真的有人想在你身旁偷窥，密码遮罩其实起不到什么保护作用；这种情况下，倒是把手机拿到一个更隐蔽的地方进行输入来的更安全。

切换隐藏与显示 出于所有这些原因，我们决定在 Polar 的登录界面将密码明文呈现给用户，并在密码栏右侧提供一个隐藏按钮，如果你确实需要，便可以点击该按钮将密码切换为遮罩符。

虽然我相信这是有利于可用性及可访问行的正确做法，但还是有些担心用户看到密码明文后会产生负面感受，毕竟长久以来的遮罩设计模式已经使人们产生了“安全”的认知习惯。

所以，当我听说有人不仅发布了以明文呈现密码的产品，而且还取得了成功的事情之后，觉得很是惊喜。在这篇推中，Steven Hoober 告诉我们，两千万的 Sprint 用户已经在使用着移除了密码遮罩的产品，没有遇到任何问题；Mike Lee 也说，当时 Yahoo!的改版当中包含了移除密码遮罩等一系列改进，并带来了两位数的增长幅度，并且没有发现任何安全方面的问题。

在我看来，密码遮罩突然间就变成了旧事物，一个存在了很长时间的设计模式开始被逐渐的质疑和唾弃。回头看看，我们曾经那么理所当然的把密码遮罩当作默认模式来使用，而对可用性甚至是业务的损害也随之而来。

解决方案 最近一段时间，很多公司开始认真对待密码遮罩的问题了，并带来了很多不同的解决方案。PayPal 和 Foursquare 采用的就是前面提到的我们在 Polar 当中使用的模式：

LinkedIn、Adobe 和 Twitter 也是类似，不过将文字按钮改为了睁一眼闭一眼的图标。图标形式有利有弊，一方面可能不如文字形式那么显而易见，但另外一方面，对于有国际化需求的产品来说，可以避免译文长度难以控制的问题。

微软采用的实践方式略有不同。在 Windows 8 中，密码默认仍以遮罩形式显示，按住右侧的眼睛图标可以查看密码明文，移开手指后再次恢复遮罩状态。

Amazon 一直在反复迭代着登录表单的设计模式：最初是无法查看密码明文，就像大家一直以来那样；后来允许用户勾选是否显示密码明文，但默认仍是显示遮罩；接下来就是默认显示密码明文，但允许用户勾选使用遮罩模式。

虽然这些方案各有利弊，但最重要的一点是，微软、Adobe、Twitter、LinkedIn、PayPal、Amazon 以及其他很多公司都已经意识到了长久以来存在于登录表单当中的可用性问题，并大胆的进行了改变。

设计在细节中 虽然越来越多的公司开始尝试让用户在输入密码时看到明文，但这并不意味着你可以随便拿来某种模式扔到自家产品中。实际上，正是这种人云亦云的思维模式让我们长久以来一直在使用那些其实不那么合理的设计模式，包括密码遮罩。更加可取的是，试着花些时间结合自己产品的具体情况真正研究一下各种方案的利弊，要知道这些细节当中的变化是有可能对产品产生很大影响的。我们不妨来看看 Jack Holmes 做的关于移除密码遮罩研究。

Jack 的测试表明，对于电商类产品，当登录密码默认以明文形式显示的时候，60%的被测用户感到不安，他们觉得这可能是网站中的 bug 或某种严重的安全隐患，只有 45%的用户认为这种方式相比以往更加好用；而在默认显示明文并提供复选框来恢复遮罩的模式下，100%的被测用户意识到这是一个正常的功能改进，而且不会影响到他们对这个电商网站的信赖感。

从 60%的疑虑，到 100%的认可 – 细节中的设计真的事关重大。从这个研究结果来看，Amazon 决定采用“默认显示密码明文，允许用户手动隐藏”的模式不是没有道理的。

Web v.s. App 前面提到的都是应用或系统中的案例，但目前在页面端采用这类模式的还不多见。都是一样的服务，为什么要让通过浏览器访问的用户不得不面对比较难用的界面呢？

不外乎是安全方面的顾虑，尤其是这样一种情况：

我的设备有可能被你使用 你解锁了我的设备 你打开了一个网站 我正好在浏览器中保存了登录这个网站所用到的密码 这个网站正好提供了查看密码明文的功能 于是你知道了我的密码

Web 浏览器将密码保存及自动输入功能与查看密码明文功能搭配在一起使用，确实是一件非常危险的事，可能带来严重的安全问题。降低危险系数的一个做法是，如果探测到浏览器已经自动填入了之前保存的密码，那么就在页面中把密码框直接隐藏起来；如果有人想查看密码，那么密码框会清空，用户需要重新输入密码；此时输入的密码为明文，并允许切换为遮罩模式。

遗憾的是，在网页端实现这套方案所需付出的设计和开发成本似乎已经超出它能带来的潜在价值。

超越密码 在移动端登录的问题上，Amazon 从未停止过迭代。在最近的 iOS 版本中，他们甚至移除了密码登录，让用户可以直接通过 Touch ID 验证身份。

Uber 走的更远些。要通过他们的服务来叫车和支付，你甚至无需创建账户、输入密码、填写复杂的支付信息 – 所有的身份认证工作都可以通过 Touch ID 完成(使用 Apple Pay)。

虽然 Touch ID 仅限于 iOS 设备，但这确实是一种极大降低身份验证操作成本的新标准。如果人们能自主选择登录或支付的方式，你觉得大家会选择复杂的表单、乱七八糟的密码规则及不可见的密码遮罩，还是一个简单的触摸？

从这个角度看问题的话，登录表单和密码机制的未来就变得清晰起来；这些甚至不会再成为问题。

大家好，我是和你们聊设计的花生~

有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对 设计师 和创意工作者来说无疑是好消息。

之前已经向大家详细介绍过 2 款 AI 图像生成器 Disco Difussion 和 Dall·E 2，今天继续为大家推荐另外 2 个现在比较热门的 AI 图像器 Midjounery 和 Tiamat ，另外会简要地为大家介绍这 4 款的 AI 图像生成器的特色优点，方便大家做进步深入了解。

Midjourney Midjourney 是国外除 Disco Difussion 和 Dall·E 2 之外又一个比较优秀的 AI 图像生成器，它综合能力全面，图像生成速度极快。虽然图像的精准度及艺术性不及 Disco Difussion，但易上手程度比 Disco Difussion 好很多。

Midjourney 的程序服务及社群都是放在 Dicord 上的，在其 Discord 社区中直接发送「/imagine+提示词」给官方机器人就能在十几秒内生成图像并反馈给用户。想使用的话需要先注册一个 Dicord 的账号。Midjourney 已经开放内测名额申请渠道，且对申请者资格要求比较宽松，申请后会在 2-3 周内得到回复。和 Disco Difussion 一样，很多艺术家都使用 Midjourney 生成自己想要图像作为创作灵感参考。

使用 Midjourney 生成的 AI 图像：

来源： https://www.instagram.com 。使用 Midjourney 生成，作者 Instagram @olafblomerus。

来源： https://www.instagram.com 。使用 Midjourney 生成，作者 Instagram @ryanbooth。

来源： https://discord.com/channels 。使用 Midjourney 生成，作者 Discord @flvmin☆

来源： https://www.artstation.com  。使用 Midjourney 生成，作者 Artstation @Gleb Alexandrov

「Midjourney 图像版权」版权归 Midjourney 所有，付费后可商用

「Discord 账号注册」 https://discord.com/ （需梯子）

「Midjourney 注册及内测资格申请渠道」 https://www.midjourney.com/auth/signin/ （需梯子）

Tiamat Tiamat 是国内首个 AI 图像生成器，程序服务与社群目前都是放在飞书上运行的。其优点在于支持纯中文提示词，图像生成速度在 5-6 分钟，图像质量非常不错，且图像风格与国外的 Disco Difussion 和 Midjourney 相比有明显的“中国风”特色。

根据 Tiamat 开发人员微博@青柑普洱不甜_Tiamat 介绍，Tiamat 的图像生成功能目前已广泛运用于游戏场景概念设计、空间装饰艺术等领域。Tiamat 目前也开放了内测申请渠道，需要的小伙伴可以申请。

使用 Tiamat 生成的图像：

来源： https://weibo.com/5519581673/LyiXKm5nC ， Tiamat 生成，作者@JZ_打个比方

来源： https://weibo.com/7749217820/LnX3XseDH ， Tiamat 生成，作者@青柑普洱不甜_Tiamat

来源： https://weibo.com/3204942002/LxwsPtJWv ， Tiamat 生成，作者@青茉 Moin插画

「Tiamat 图像版权」商用前需联系官方进行授权

「Tiamat 官方微博」 https://weibo.com/u/7749217820

「Tiamat 内测资格申请渠道」 https://tiamat-ai.feishu.cn/share/base

Disco Difussion AI 绘画的热潮就是由 Disco Difussion 掀起的，它强大且极具艺术性的图形生成功能引起无数人的惊叹。Disco Difussion 现在已经成为国内外首屈一指的 AI 图像生成器，而且免费开放供所有人使用，是很多设计师、插画家和艺术工作者的创作灵感生成器。

Disco Difussion 的程序托管在谷歌的 Colaboratory 上，用户可以直接在浏览器中编写和运行代码，这意味着使用 Disco Diffusion 对电脑配置没有要求，但这样图像生成速度较慢，而且图像生成前需要做好一些参数设置，相比来说上手难度比 Midjourney 要大一些，但效果更好。

不过现在 B 站上有很专业的 Disco Difussion 使用教程，教大家如何将使用本地渲染器加快渲染速度，以及如何通过修改提示词、设置参数等生成更加精准好看的图像。

使用 Disco Difussion 生成的图像：

来源： https://www.instagram.com ，作者 Instagram@_deeplydreaming_

图片来源： https://www.instagram.com ，使用 Disco Difussion 生成，作者 Instagram@mrhabmo

来源： https://www.instagram.com ，使用 Disco Difussion 生成，作者 Instagram@thibaudzamora

「Disco Difussion 图像版权」基于 MIT 开源协议，用 Disco Diffusion 渲染生成的图像版权归图片创作者本人所有，但要注意图像在生成过程中是否存在侵权行为。

「Disco Difussion 程序链接」 https://colab.research.google.com/github/alembics/disco-diffusion

了解更多 Disco Difussion 的详细内容：

堪比艺术家！被疯狂安利的 AI 插画神器 Disco Diffusion 有多强？ 大家好，我是和你们聊设计的花生~ 有关注「神器挖掘机」阿文（微博 @Simon_阿文 ）的朋友，可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。

阅读文章 >

Dall·E 2 如果说 Disco Difussion、Midjourney 和 Tiamat 都善于生成恢弘华丽的场景，那 Dall·E 2 的侧重点就在于“让大象转身”，能切实帮助设计师完成很多需要耗费大量时间精力的工作。根据 Dall·E 2 官网上公布的内容可以得知，其主要功能包括：

① 根据文本生成各种风格的图像，尤其是能够以假乱真的照片图像：

②根据给出的提示无痕修改现有图像：

图片来源：Dall·E 2 官网

③根据一张给定的图片生成许多与之相关的“变体”：

图片来源：Dall·E 2 官网

Dall·E 2 目前也开放了内测名额申请渠道，但是审核标准比较严。毕竟 Dall·E 2 的图形生成功能过于强大，随意开放使用很可能带来难以预料的不良影响，其官网上也有关于其图像使用范围及注意事项的详细说明，感兴趣的小伙伴可以自行探索。

「Dall·E 2 图像版权」版权归开发公司 Open AI 所有，不可商用，且图像公开发布时需带有官方水印。

「Dall·E 2 官网」 https://openai.com/dall-e-2/

「Dall·E 2 内测名额申请链接」 https://labs.openai.com/waitlist

了解更多 Dall·E 2 的详细内容：

10秒出图，以假乱真！设计师「用嘴修图」的愿望要成真了？ 大家好，我是和你们聊设计的花生~ 之前给大家推荐了 AI 图画生成器 Disco Difussion，它可以根据文本提示自动生成恢弘奇幻的艺术，非常适合作为艺术创作的灵感来源。

阅读文章 >

总结 以上就是目前最热门 4 款 AI 图像生成器——Disco Difussion、Midjourney、Tiamat和Dall·E 2的基本情况，相关的资源链接也已经附在每节的末尾，大家可以根据自己的情况选择对应的图像生成器进行尝试。探索的过程还是非常有意思的，而且早一点接触这AI工具的相关知识对未来的设计工作肯定也是有所助益。

前言 声明：文章中所有的色彩规范都只针对可视化大屏设计，后台可视化以及 B 端可视化的规范可能会有差异；此处只是个人看法，如有错误欢迎指正；部分内容有参考百度以及相关资料；文中部分配图内容来自网络；

读者朋友们大家好呀！又鸽了！非常抱歉！距离上次《字体篇》已经 5 个多月了，由于工作原因搁置了很久，终于给大家更新啦！本期给大家带来的就是《可视化十要素-色彩篇》。

往期回顾：

超全面的数据可视化设计指南：字体篇 前言 读者朋友们大家好呀！

阅读文章 >

超全面的数据可视化设计指南：风格篇 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

阅读文章 >

超全面的数据可视化设计指南：设备篇 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

阅读文章 >

整体架构 色彩篇主要分为：色彩三要素、配色方法、可视化中的颜色扩展、色彩选用原则、行业配色。

主要想通过色彩的原理，配色的多种方法，以及如何拓展可视化界面中的元素颜色（文字，装饰，背景，弹框等），最后总结了颜色的记忆属性（行业 配色 ）。

色彩三要素 1. 色相

色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。比如红色、黄色、蓝色等。色相可以具体到各个行业所代表的不同颜色，比如公安为蓝色，党建为红色，金融为橘色等。

色相只是颜色的另一种说法。

2. 明度

明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度，例如天蓝色就比红色的明度高，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。

明度定义了颜色的明亮程度，从黑色到白色。

3. 饱和度

饱和度也叫纯度，通常是指色彩的鲜艳度。

色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。色彩的纯度变化，可以产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。

配色方法 1. 图片配色法

图片配色法可以运用 PS 工具，选择你钟意的一张图，拖进 PS 里，执行：滤镜-像素化-马赛克，就可以得到基于图片的马赛克像素点，然后吸取颜色即可。

2. 插件配色法

插件配色法可以通过 Eagle、美叶等软件直接获取图片色，非常之方便，此种方法相比较于图片配色法，更具科学性和准确性。

3. 色环配色法 利用色环配色大家可能都知道，但是我们需要做到的是如何灵活的配色以及进行适量的处理。

邻近色配色法

三种颜色组成，观感更加舒适，色系搭配更舒服。

补色配色法

补色是指色环中两个对称的色块，他们是色环中相隔最远的两个颜色，因此两种颜色的对比也是最大的。

补色分割配色法

补色分割与补色配色相似。首先选定一个颜色，然后使用它一个邻近色，最后找出它的补色。（也叫等腰三角形配色）

三角配色法

三角色由三种颜色组成，是色环上平均分布的三种颜色，共同在色环上连接成三角形。这种方法更适合色彩鲜艳。

四角配色法

这种方法由两对补色组成，共 4 种颜色，其中只有一个是主色，另外三个颜色是辅助色。

可视化中的颜色扩展 通过对主色的叠加不同透明的黑色与白色（扩展白度和扩展黑度），可以扩展出背景、弹框、装饰、文字等颜色。

1. 扩展白度

扩展白度就是为所有颜色创建出更多较浅的颜色（增加白色透明）。比如我们通过大幅提升主色的白度，可以作为项目的文本色，那么我们该如何增加白度呢？

2. 扩展黑度

扩展黑度就是为所有颜色创建出更多较深的颜色（增加黑色透明）。比如我们通过大幅提升主色的黑度，可以作为项目的背景色和卡片底色，那么我们该如何增加黑度呢？

3. 扩展背景

我们通过将主色增加黑度的方式，去定义背景色。具体数值：主色增加 90%-95%黑色，作为背景色。

4. 扩展弹框

我们通过将主色增加黑度的方式，去定义弹框色以及模块背景色。具体数值：主色增加 75%-85%黑色，作为弹框色和模块背景色。

5. 扩展装饰线

我们通过将主色增加黑度的方式，去定义装饰线色。具体数值：主色增加 50%-70%黑色，作为装饰线的颜色。

6. 扩展装饰点

我们通过将主色增加黑度的方式，去定义装饰点色。具体数值：主色增加 30%-50%黑色，作为装饰点的颜色。

7. 扩展文字

我们通过将主色增加白度的方式，去定义正文文字色。具体数值：主色增加 90%-95%白色，作为正文的颜色（辅助文字可以减少一半透明度）。

8. 扩展辅助色

饼图中可以会用到很多的颜色去配置，那我们应该如何去配置呢？

大屏色彩原则 遵守“631”“三不”“两多”这几个原则，可以让你在可视化中的 色彩搭配 能力更加自如。

1. “631”原则 运用配色 631 法则，将配色定义为主色 60%，辅助色 30%，对比色 10%去贯穿整套界面。文字的颜色通过重要，普通，次要去分配，带有色彩倾向丰富页面视觉。

2. “三不”原则 不选用同一色系

同色系会使画面看起来对比度非常弱，色彩指代感弱，色彩之间不好拉开层级。

不选用颜色接近

邻近色会使画面感觉偏弱，没有强对比，画面层次感不足。

不选用同色透明

同色透明会让画面非常的灰，是可视化中的大忌，切勿使用。

3. “两多”原则 多选用对比色

强对比可以拉开视觉层级，突出画面，视觉至上。

多选用黑白灰

黑白灰可以使画面变的非常高级，并且画面细节度拉满。

行业大屏配色总结 色彩具有很强的记忆属性，因此用户会将他们感受到的内容与色彩联系起来。可以从大量资源池中去寻找灵感，比如金融行业，我们可以从已知的金融元素都是红黄搭配的，因此我们在配色时肯定需要注意这一特征的。

1. 交通行业

交通一般以蓝色为主调，配合红黄绿（红绿灯颜色）三种代表着道路拥挤程度，蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。

含义： 平静、和平、安全、宁静、信任。

适用： 交通，公安，监控，政府机关。

缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

2. 文旅行业

文化旅游代表着健康，和谐，自然，户外，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。

含义： 健康、自然、平静、放松、成长。

适用： 医疗康复、生态、旅游。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

3. 公安行业

蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。

含义： 平静、和平、安全、宁静、信任。

适用： 公安，监控，交通，政府机关。

缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

4. 电力行业

电力行业一般以国家电网的绿色系为主，给人一种安全可靠，绿色环保的电力行业。

含义： 安全、可靠、绿色、环保。

适用： 电力，电网，网络安全。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

5. 生态行业

生态代表着健康，和谐，自然，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。

含义： 健康、自然、平静、放松、成长。

适用： 医疗康复、生态、旅游。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

6. 金融行业

金融行业非常注重属性搭配，暖色系可以增加购买欲望，使人有温暖的感觉。橙色被认为是一种非常有活力和热情的颜色， 它促进活动和创造性思维。

含义： 创意、能量、热情、活跃、烦躁。

适用： 金融，证券，货币，党建。

缺点： 当橙色作为主色时，你可能需要另一种颜色作为警告色。

知识点总结 加强对色彩三要素：色相、明度、饱和度的认知； 掌握三种配色方法：图片配色法、插件配色法、色环配色法，以及了解配色的原理； 可视化界面中如何扩展颜色（白度，黑度，背景，弹框，装饰，文字，辅助色等）； 配色 631 原则，主色、辅助色、对比色应用原则； “三不”原则：不选用同一色系、不选用颜色接近、不选用同色透明； “两多”原则：多选用对比色、多选用黑白灰； 不同行业配色注意事项，通过元素搜集以及情绪版，配置不同行业可视化配色； 颜色的含义以及适用的地点；

前言 声明：文章中所有的色彩规范都只针对可视化大屏设计，后台可视化以及 B 端可视化的规范可能会有差异；此处只是个人看法，如有错误欢迎指正；部分内容有参考百度以及相关资料；文中部分配图内容来自网络；

读者朋友们大家好呀！又鸽了！非常抱歉！距离上次《字体篇》已经 5 个多月了，由于工作原因搁置了很久，终于给大家更新啦！本期给大家带来的就是《可视化十要素-色彩篇》。

往期回顾：

超全面的数据可视化设计指南：字体篇 前言 读者朋友们大家好呀！

阅读文章 >

超全面的数据可视化设计指南：风格篇 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

阅读文章 >

超全面的数据可视化设计指南：设备篇 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

阅读文章 >

整体架构 色彩篇主要分为：色彩三要素、配色方法、可视化中的颜色扩展、色彩选用原则、行业配色。

主要想通过色彩的原理，配色的多种方法，以及如何拓展可视化界面中的元素颜色（文字，装饰，背景，弹框等），最后总结了颜色的记忆属性（行业 配色 ）。

色彩三要素 1. 色相

色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。比如红色、黄色、蓝色等。色相可以具体到各个行业所代表的不同颜色，比如公安为蓝色，党建为红色，金融为橘色等。

色相只是颜色的另一种说法。

2. 明度

明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度，例如天蓝色就比红色的明度高，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。

明度定义了颜色的明亮程度，从黑色到白色。

3. 饱和度

饱和度也叫纯度，通常是指色彩的鲜艳度。

色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。色彩的纯度变化，可以产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。

配色方法 1. 图片配色法

图片配色法可以运用 PS 工具，选择你钟意的一张图，拖进 PS 里，执行：滤镜-像素化-马赛克，就可以得到基于图片的马赛克像素点，然后吸取颜色即可。

2. 插件配色法

插件配色法可以通过 Eagle、美叶等软件直接获取图片色，非常之方便，此种方法相比较于图片配色法，更具科学性和准确性。

3. 色环配色法 利用色环配色大家可能都知道，但是我们需要做到的是如何灵活的配色以及进行适量的处理。

邻近色配色法

三种颜色组成，观感更加舒适，色系搭配更舒服。

补色配色法

补色是指色环中两个对称的色块，他们是色环中相隔最远的两个颜色，因此两种颜色的对比也是最大的。

补色分割配色法

补色分割与补色配色相似。首先选定一个颜色，然后使用它一个邻近色，最后找出它的补色。（也叫等腰三角形配色）

三角配色法

三角色由三种颜色组成，是色环上平均分布的三种颜色，共同在色环上连接成三角形。这种方法更适合色彩鲜艳。

四角配色法

这种方法由两对补色组成，共 4 种颜色，其中只有一个是主色，另外三个颜色是辅助色。

可视化中的颜色扩展 通过对主色的叠加不同透明的黑色与白色（扩展白度和扩展黑度），可以扩展出背景、弹框、装饰、文字等颜色。

1. 扩展白度

扩展白度就是为所有颜色创建出更多较浅的颜色（增加白色透明）。比如我们通过大幅提升主色的白度，可以作为项目的文本色，那么我们该如何增加白度呢？

2. 扩展黑度

扩展黑度就是为所有颜色创建出更多较深的颜色（增加黑色透明）。比如我们通过大幅提升主色的黑度，可以作为项目的背景色和卡片底色，那么我们该如何增加黑度呢？

3. 扩展背景

我们通过将主色增加黑度的方式，去定义背景色。具体数值：主色增加 90%-95%黑色，作为背景色。

4. 扩展弹框

我们通过将主色增加黑度的方式，去定义弹框色以及模块背景色。具体数值：主色增加 75%-85%黑色，作为弹框色和模块背景色。

5. 扩展装饰线

我们通过将主色增加黑度的方式，去定义装饰线色。具体数值：主色增加 50%-70%黑色，作为装饰线的颜色。

6. 扩展装饰点

我们通过将主色增加黑度的方式，去定义装饰点色。具体数值：主色增加 30%-50%黑色，作为装饰点的颜色。

7. 扩展文字

我们通过将主色增加白度的方式，去定义正文文字色。具体数值：主色增加 90%-95%白色，作为正文的颜色（辅助文字可以减少一半透明度）。

8. 扩展辅助色

饼图中可以会用到很多的颜色去配置，那我们应该如何去配置呢？

大屏色彩原则 遵守“631”“三不”“两多”这几个原则，可以让你在可视化中的 色彩搭配 能力更加自如。

1. “631”原则 运用配色 631 法则，将配色定义为主色 60%，辅助色 30%，对比色 10%去贯穿整套界面。文字的颜色通过重要，普通，次要去分配，带有色彩倾向丰富页面视觉。

2. “三不”原则 不选用同一色系

同色系会使画面看起来对比度非常弱，色彩指代感弱，色彩之间不好拉开层级。

不选用颜色接近

邻近色会使画面感觉偏弱，没有强对比，画面层次感不足。

不选用同色透明

同色透明会让画面非常的灰，是可视化中的大忌，切勿使用。

3. “两多”原则 多选用对比色

强对比可以拉开视觉层级，突出画面，视觉至上。

多选用黑白灰

黑白灰可以使画面变的非常高级，并且画面细节度拉满。

行业大屏配色总结 色彩具有很强的记忆属性，因此用户会将他们感受到的内容与色彩联系起来。可以从大量资源池中去寻找灵感，比如金融行业，我们可以从已知的金融元素都是红黄搭配的，因此我们在配色时肯定需要注意这一特征的。

1. 交通行业

交通一般以蓝色为主调，配合红黄绿（红绿灯颜色）三种代表着道路拥挤程度，蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。

含义： 平静、和平、安全、宁静、信任。

适用： 交通，公安，监控，政府机关。

缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

2. 文旅行业

文化旅游代表着健康，和谐，自然，户外，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。

含义： 健康、自然、平静、放松、成长。

适用： 医疗康复、生态、旅游。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

3. 公安行业

蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。

含义： 平静、和平、安全、宁静、信任。

适用： 公安，监控，交通，政府机关。

缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

4. 电力行业

电力行业一般以国家电网的绿色系为主，给人一种安全可靠，绿色环保的电力行业。

含义： 安全、可靠、绿色、环保。

适用： 电力，电网，网络安全。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

5. 生态行业

生态代表着健康，和谐，自然，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。

含义： 健康、自然、平静、放松、成长。

适用： 医疗康复、生态、旅游。

缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

6. 金融行业

金融行业非常注重属性搭配，暖色系可以增加购买欲望，使人有温暖的感觉。橙色被认为是一种非常有活力和热情的颜色， 它促进活动和创造性思维。

含义： 创意、能量、热情、活跃、烦躁。

适用： 金融，证券，货币，党建。

缺点： 当橙色作为主色时，你可能需要另一种颜色作为警告色。

知识点总结 加强对色彩三要素：色相、明度、饱和度的认知； 掌握三种配色方法：图片配色法、插件配色法、色环配色法，以及了解配色的原理； 可视化界面中如何扩展颜色（白度，黑度，背景，弹框，装饰，文字，辅助色等）； 配色 631 原则，主色、辅助色、对比色应用原则； “三不”原则：不选用同一色系、不选用颜色接近、不选用同色透明； “两多”原则：多选用对比色、多选用黑白灰； 不同行业配色注意事项，通过元素搜集以及情绪版，配置不同行业可视化配色； 颜色的含义以及适用的地点；

每年年底，QQ 都会迎来一年一度的年终盘点活动，帮助用户实现 QQ 社交记忆回溯。通过生成用户专属的 社交形象 ，拉近用户和 QQ 之间的距离，体现品牌温度。

拓展阅读

大厂实战！2021 QQ 社交形象年度盘点设计复盘 又到年底了，想必大家开始在朋友圈和微博中陆续看到各种各样的年度盘点报告。

阅读文章 >

设计目标 年度盘点活动不同于主题运营活动，是对 QQ 用户年度高光时刻的总结。在活动设计目标的设立上，我们希望塑造 QQ 温暖 品牌形象 的同时清晰展示 QQ 用户年度的社交记忆点，通过创造用户记忆点，激发用户分享。

创意构思 我们从 QQ 用户熟知的社交行为、场景出发，进行视觉元素延展。将用户的浏览过程喻作 QQ 社交记忆的探索历程。通过 QQ 元素等场景映射，唤醒用户的社交记忆，最终形成用户专属的社交形象。

风格设定 基于活动的目标我们衍生出以下设计关键词（见下图），简洁有品质是本次活动视觉风格的核心传达目标。

1. 色彩

为凸显回忆感知以及透传 QQ 品牌。在色彩的选择上我们使柔和的蓝黄渐变色系，背景色系就像天空会跟随活动节奏、故事内容而动态变化，利用色彩变化传达时光回溯的氛围感知。

2. 质感

考虑到整体的风格设定偏洁净明快的感受，我们多以玻璃、半透明 3s，哑光三类材质为主。选择透光性强与色彩融合度高的材质搭配使用，让画面更具轻盈、简约的品质感。

视觉表现 1. 信息传达

年终盘点活动与主题运营活动不同，繁冗的氛围传达并不等同清晰的信息传达，在活动的设计上，我们希望一页只讲述一件事，弱化装饰，突出主体内容。

2. 品牌透传

场景内我们融合了 QQ 品牌调性的元素，如聊天 aio、消息气泡，QQ 空间等，加强用户代入感。

3. 动效编排

我们根据页面场景的展示内容类型，进行动画节奏上的编排。保持信息传递的效率，并在需要氛围强化的环节增强动画吸引力。营造灵动的内容浏览体验，提升动画张力。

在动画的运动样式上，我们提炼出映射 QQ 社交场景的动态设计语言。通过模拟聊天气泡出现、新消息通知弹出、空间访客踩一踩等社交场景中的动画形式，透传 QQ 品牌调性，增强动画表现力。

激发分享欲 从设计层面，如何激发用户的分享欲？在本次活动分享中用户的专属社交形象扮演着重要的角色，接下来我们将介绍影响社交形象品质的三大设计因素。

1. 形象设定

我们选用 QQ 作为社交形象主体，根据用户不同的社交属性去赋予其色彩、材质的变化。在初步的生成方案上，我们尝试挖掘更多的组合可能性，从 QQ 围巾、嘴巴等部件进行材质变化。但三维的部件设计、审核成本高且组合起来多种情况形象差异性小。

为此我们降本提效精简了生成逻辑，在鹅身上视觉强感知的场域进行差异化设计。

2. 构成规则

我们将社交关键词分为三大阶级并衍生出社交形象构成的梯度规则。从社交小白到社交天花板，不同强弱的社交属性决定着鹅身的变化。例如低阶的材质表现使用的是石膏、木纹，形容人们在社交上木讷、寡言少语，而高阶的鹅身质感、色彩，图案表现更加丰富。

3. 隐藏款埋入

在 QQ 形象设计 上，我们根据不同的社交关键词进行了不一样的设计，包括样式、材质、颜色等，这些不一样的设计在隐藏款上尤为突出。

例如针对社交关键词“一呼百应 KOL“，此社交关键词形容的是人气高，是众人的焦点，为了体现这种超高人气，QQ 形象通体采用透明材质，并在内部放置了很多不同的体现开心的黄脸表情。

在隐藏款“自带光环的主角”的设计上，我们希望传递出受人瞩目的光感，结合我们的生活，光线经过玻璃后，通过不断折射反射，能很好的传递出多彩和绚丽感觉，所以这款 QQ 形象通体采用了玻璃材质，强化和传递出受人瞩目的主角光环。

隐藏款之外，其他更多 QQ 形象我们也会根据社交关键词进行不一样的设计。

形象展示 金属鹅 Metal Q

玻璃鹅 Glass Q

树脂鹅 Resin Q

形象延展应用 除此之外，我们在春节贺卡活动中还复用了部分鹅身形象，并为虎年设计了专属的虎纹迷彩鹅。期待后续在运营活动中尝试更多的个性化 QQ 形象，刷新 IP，升华品牌。

结语 在当今社会强调本我的趋势下，活动千人千面的属性越发重要。将经典的 QQ 形象与用户社交特征相结合，传递具备独特性、品质感的品牌视觉表现，更能拉近 QQ 与用户的距离。我们相信在未来的年终盘点活动中，QQ 会带给大家更多的惊喜，敬请期待吧！

欢迎关注作者微信公众号：「腾讯ISUX」

我将分为 C4D 和插画两部分来介绍一下，在 Behance 和 Dribbble 上，小哈关注的宝藏 设计师 ：

往期回顾

这10个顶尖大神的作品，是我每日学习的源泉！ 想学设计可以关注哪些设计师？

阅读文章 >

这10个顶尖大神的作品，是我每日学习的源泉 我将分为 C4D 和插画两部分来介绍一下，在 Behance 和 Dribbble 上，小哈关注的宝藏设计师。

阅读文章 >

C4D： 1. Romain Braccini

设计师 Romain 的这组作品以 36 个字母为灵感，构建了一个个奇幻有趣的画面。在 3D 作品里融合了插画的纹理，色彩梦幻，让观众耳目一新。

更多作品： https://www.behance.net/blansable

2. Omar. Aqil

Omar 是一位来自巴基斯坦的 3D 设计师。在他的作品里，让小哈印象最深刻的是用现代 3D 技术重构毕加索的经典作品，他的三维作品形式抽象、简洁，很有想象力。除了造型很富有创造力，材质的熟练运用也为作品增色不少。

更多作品：

https://dribbble.com/omaraqildesign https://www.behance.net/omaraqil

3. Zhang 张小哈

这是我的个人作品，我是一枚独立 插画师 、设计师，我喜欢在作品中探索二维与三维之间的关系，喜欢有创造力、想象力、有情感的表达，下面是我的部分作品，希望你会喜欢。

更多作品：

https://dribbble.com/zhangxiaoha https://www.behance.net/zhangxiaoha

4. Siddhant Jaokar

Siddhant 是一位来自印度的设计师，这组作品在简洁的生活物品上增加了插画风格的纹理，再赋予柔和的色彩，形成了独一无二的艺术作品。

更多作品：

https://dribbble.com/hyperthalamuscorp https://www.behance.net/hyperthalamus11

5. Ângelo Fernandes

Ângelo 擅长做低多边形的三维建筑场景，他的作品光影柔和，细节丰富，充满了生活气息，让小哈不由自主想停留在他所构建的场景里。

更多作品： https://www.behance.net/angelo_fernandes

插画： 1. Clément Barbé

Clément 是一位来自法国的插画师，他的场景插画十分成熟，造型简洁有力，躁点细腻，色彩舒适，纹理生动。

更多作品： https://www.behance.net/clementbarbe

2. Gaspart

Gaspart 的人物作品生动有趣，活力满满。这组玻璃房里的人物，造型简洁，层次丰富，瓶子图形的限制和夸张的人物造型形成了很强的张力。

更多作品：

https://dribbble.com/Gaspart https://www.behance.net/gaspart

3. Lucas Wakamatsu

Lucas 是一位来自巴西的自由设计师，他擅长绘制人物主题的插画。他的作品用色给小哈留下了深刻的印象，色彩明亮鲜活，让观众感受到了巴西文化的热情与活力。

更多作品：

https://dribbble.com/lucaswakamatsu https://www.behance.net/lucaswakamatsu

4. Muhammed Sajid

来自印度的 Muhammed 同时擅长绘制人物及场景插画，他的作品非常成熟，细节丰富，构图饱满，完成度很高，特别是场景插画里植物的绘制非常出彩。

更多作品：

https://dribbble.com/muhammedsajid https://www.behance.net/muhammedsajid

5. FEBIN RAJ

RAJ 喜欢绘制自然场景，他擅长用色彩表现光影，作品造型虽然简洁，但意境深远。他的风格小哈非常喜欢，同时也具备了商业性，受到了许多客户的青睐。

更多作品：

https://dribbble.com/febinraj https://www.behance.net/febinraj

6月第3波设计干货合集来了！这次的合集和之前类似，有好几个素质颇为过硬的图标和插画合集，与此同时，还有试图取代 Google Fonts 的字体服务，以及我特别喜欢的一个网站合集，这份合集非常值得收藏。对了，上个月的 干货合集 也记得看看：

第一波！2022年6月精选实用设计干货合集 6月第1波设计干货合集来了！

阅读文章 >

第二波！2022年6月精选实用设计干货合集 6月第2波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费精选渐变色背景素材 https://ingradients.net/

渐变色工具喜加一，这个名为 Ingradients 的网站提供了超过6000 种手工制作的渐变色彩，这些渐变色可以以 Fig、SVG、JPE、PNG 等多种格式下载，应用于不同需求的设计项目，并且 Ingradients 根据不同的主题制作了不同的合集，你可以在合集中搜寻你感兴趣的配色或者壁纸素材。

2、替代 Google Fonts 的开源字体服务 https://fonts.bunny.net/

很多网站是可以直接调用 Webfont 来作为网站字体的，国外最常用的服务之一是 Google Fonts，由于国内无法访问，而且Google 会追踪你的网站数据导致很多人对于 Google Fonts 颇为诟病，于是 Bunny fonts 就诞生了，这是一个完全开源免费的字体服务平台，由 Bunny.net 发起，让网站所有者将字体和数据的权利掌握在自己手中又能保证便捷性，网站和服务完全遵循 GDPR 协议，感兴趣的同学可以了解一下。

3、ClipDrop 智能图片放大服务 https://clipdrop.co/image-upscaler

又是一个借助机器学习来提升图片素质的服务，这个 ClipDrop 出品的服务在提升图片素质这件事情上做的相当不错，在放大的同时，锐化细节，消除其他图片压缩工具带来的噪点，放大2倍是完全免费的，注册之后可以享受放大4倍的服务，具体可以参看网站提供的说明。

4、设计师私藏极简原创优质网站合集 https://www.mebut.online/

这是设计师 Kabir 的私藏优质网站推荐合集。按照 Kabir 的说法，咱们在网上找优秀网站的时候，很容易找到「XX个XXX网站推荐」，这类推荐里很多网站都出自一些企业，并且设计上通常做的非常的绚丽，对于很多独立设计师、个人开发者而言，太难以作为参考了，于是他专门搜集了一些排版精致、风格简约且足够原创的优质网站，其中很多都是个人网站，其中的很多设计不仅值得参考，而且具备可执行性。

5、免费 Notion 风格手绘图标素材 https://maryamato88.gumroad.com/l/pbmkt

Notion 将带有美式卡通特色的描边插画风格给带火了，如今越来越多的设计师开始设计类似风格的图标素材，而这一组 免费图标 就是结合了手绘元素的 Notion 式图标风格，不复杂但是非常可爱。这套图标总计有 50 个，有SVG 和PNG 两种格式，完全可定制，可以个人使用也可以商用，火速下载吧！

6、免费的超大图标合集 MingCute https://www.mingcute.com/

这是一套简洁又精致的开源图标库，这套图标最大的特色就是统一而类别齐全，整套目前包含有 1242 个不同的图标，分为十几个不同的类别，足以应对绝大多数领域的日常设计需求，所以它非常值得收藏和使用。

7、风格超有爱的插画合集 https://www.getillustrations.com/illustration-pack/essential-illustrations

首先……这套插画合集是付费的，而且不便宜，但是它依然值得推荐。如果你是插画师，这套素质优秀的插画合集值得参考，如果你所在的团队有足够的预算为插画付费，这套敢拿「基础插画」作为自身名称的插画合集绝对是素质过硬的，总计45 个类别超过1200幅高素质插画，商用也足以覆盖绝大多数的需求。

8、免费 3D UI 主题插画合集 https://bashasibuan.gumroad.com/l/3DSummer

着是一个夏日主题的 3D UI 场景插画素材合集，完全免费，而且其中包含 10 个背景（5个实底背景，5个半透明背景），72 个 3D 对象组成，你可以将他们排列组合成各种各样的场景，满足你的设计需求。这套素材是完全免费可商用。

6月第3波设计干货合集来了！这次的合集和之前类似，有好几个素质颇为过硬的图标和插画合集，与此同时，还有试图取代 Google Fonts 的字体服务，以及我特别喜欢的一个网站合集，这份合集非常值得收藏。对了，上个月的 干货合集 也记得看看：

第一波！2022年6月精选实用设计干货合集 6月第1波设计干货合集来了！

阅读文章 >

第二波！2022年6月精选实用设计干货合集 6月第2波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费精选渐变色背景素材 https://ingradients.net/

渐变色工具喜加一，这个名为 Ingradients 的网站提供了超过6000 种手工制作的渐变色彩，这些渐变色可以以 Fig、SVG、JPE、PNG 等多种格式下载，应用于不同需求的设计项目，并且 Ingradients 根据不同的主题制作了不同的合集，你可以在合集中搜寻你感兴趣的配色或者壁纸素材。

2、替代 Google Fonts 的开源字体服务 https://fonts.bunny.net/

很多网站是可以直接调用 Webfont 来作为网站字体的，国外最常用的服务之一是 Google Fonts，由于国内无法访问，而且Google 会追踪你的网站数据导致很多人对于 Google Fonts 颇为诟病，于是 Bunny fonts 就诞生了，这是一个完全开源免费的字体服务平台，由 Bunny.net 发起，让网站所有者将字体和数据的权利掌握在自己手中又能保证便捷性，网站和服务完全遵循 GDPR 协议，感兴趣的同学可以了解一下。

3、ClipDrop 智能图片放大服务 https://clipdrop.co/image-upscaler

又是一个借助机器学习来提升图片素质的服务，这个 ClipDrop 出品的服务在提升图片素质这件事情上做的相当不错，在放大的同时，锐化细节，消除其他图片压缩工具带来的噪点，放大2倍是完全免费的，注册之后可以享受放大4倍的服务，具体可以参看网站提供的说明。

4、设计师私藏极简原创优质网站合集 https://www.mebut.online/

这是设计师 Kabir 的私藏优质网站推荐合集。按照 Kabir 的说法，咱们在网上找优秀网站的时候，很容易找到「XX个XXX网站推荐」，这类推荐里很多网站都出自一些企业，并且设计上通常做的非常的绚丽，对于很多独立设计师、个人开发者而言，太难以作为参考了，于是他专门搜集了一些排版精致、风格简约且足够原创的优质网站，其中很多都是个人网站，其中的很多设计不仅值得参考，而且具备可执行性。

5、免费 Notion 风格手绘图标素材 https://maryamato88.gumroad.com/l/pbmkt

Notion 将带有美式卡通特色的描边插画风格给带火了，如今越来越多的设计师开始设计类似风格的图标素材，而这一组 免费图标 就是结合了手绘元素的 Notion 式图标风格，不复杂但是非常可爱。这套图标总计有 50 个，有SVG 和PNG 两种格式，完全可定制，可以个人使用也可以商用，火速下载吧！

6、免费的超大图标合集 MingCute https://www.mingcute.com/

这是一套简洁又精致的开源图标库，这套图标最大的特色就是统一而类别齐全，整套目前包含有 1242 个不同的图标，分为十几个不同的类别，足以应对绝大多数领域的日常设计需求，所以它非常值得收藏和使用。

7、风格超有爱的插画合集 https://www.getillustrations.com/illustration-pack/essential-illustrations

首先……这套插画合集是付费的，而且不便宜，但是它依然值得推荐。如果你是插画师，这套素质优秀的插画合集值得参考，如果你所在的团队有足够的预算为插画付费，这套敢拿「基础插画」作为自身名称的插画合集绝对是素质过硬的，总计45 个类别超过1200幅高素质插画，商用也足以覆盖绝大多数的需求。

8、免费 3D UI 主题插画合集 https://bashasibuan.gumroad.com/l/3DSummer

着是一个夏日主题的 3D UI 场景插画素材合集，完全免费，而且其中包含 10 个背景（5个实底背景，5个半透明背景），72 个 3D 对象组成，你可以将他们排列组合成各种各样的场景，满足你的设计需求。这套素材是完全免费可商用。