如何选择完美的调色板和字体搭配

网站影响力是关于品牌及其公司文化的视觉表现。 除了构图之外，颜色和字体配对也会潜意识地影响用户对您的网站以及产品或服务的印象。 在网站设计中，视觉层次结构通过利用字体大小、粗细、样式和颜色来强调某些部分的重要性，以引起对特定元素的注意。 它们最终会影响用户体验和参与度。 目的是获得颜色和字体对组合的适当平衡。

代表品牌

你的品牌是什么？ 它代表什么？ 它的个性是什么？ 谁是你的目标受众？ 哪些类型的人购买您的产品或服务？ 您的关键设计原则应该有助于回答这些问题。

极简主义，极简主义，还是“恰到好处”？

通常会看到非常干净和简约的界面，仅包含公司徽标和一些文本，给人一种整洁干净的外观，散发着精致的气息。 苹果在这方面做得最好，尝试了多种字体和布局。

通常，非常简单的配色方案会与灰色、白色和大面积的负空间混合。 但如果你销售很多东西，最大化屏幕空间效果更好——eBay 和 Amazon.com 就是很好的例子。 网站的调色板很简单，但主色调来自产品。

季节性

冬季的蓝色和白色、春季的黄色和绿色、夏季的红色和绿色以及秋季的橙色、黄色和红色非常适合季节性产品，例如时装和设计师产品，但可能不适合非季节性产品。

情绪板

每个活动或网站计划的情绪板都可以即时可视化您想要的风格或概念。 人们可以交互式地选择和更改元素，以快速测试想法以及颜色和字体组合。

阅读网站

报纸、写作网站、博客等阅读网站的文本内容非常多。 大多数浏览器提供“禅宗模式”阅读模式，因此也请考虑这一点 - 仅选择两到三种字体或单个字体系列。 合并图像和设计元素以分解较长的文本部分。

选择完美的调色板

颜色传达的不仅仅是美丽和风格，它们还能引起观众的情感反应； 请记住，颜色象征在不同文化中都是普遍存在的。 颜色只是值得考虑的设计方面之一，网站有许多令人难以抗拒的调色板。

除了网站设计之外，这些色彩原则还可以应用于产品定制，例如客户制作自己的 T 恤。 允许他们从一系列颜色中进行选择可以增强个性化体验并符合他们的个人风格偏好。

配色方案（调色板组合）

配色方案结合了一个或多个调色板中的多种颜色，以满足传达特定风格、情绪或视觉信息的某些设计目标。 一些示例如下：

• 单色配色方案（单一颜色）——改变色调、色调、色调和色调。 白色、灰色或黑色等中性色扩展了调色板，提供浅色和深色色调以避免看起来单调。
• 中性配色方案（无彩色的白色、灰色和黑色色调与米色、棕褐色、灰白色等近中性色调相结合）。 不饱和的颜色传达出中性的美感，可以是经典的，并且可以与华丽的颜色完美搭配。
• 互补色方案（色轮的相对两侧）——流行的方案是蓝色和橙色、红色和绿色、以及黄色和紫色。
• 类似配色方案（色轮中彼此相邻的三种颜色的组）——基础色调和两个相邻的色调很好地协调，例如传达日出或日落主题的红色、粉色和橙色色调。
• 三元配色方案（色轮上彼此等距的三种颜色） - 例如蓝色、红色和黄色作为一组，紫色、绿色和橙色作为另一组。 确保使用色调并降低饱和度以避免颜色冲突。

有多种用于创建调色板的在线工具，Coolors 是流行的免费网站之一。 它可以帮助快速准确地生成调色板。

来源：Coolors.co，2023

针对色盲的设计

全球约有 3 亿人患有某种形式的色盲（主要是红绿色盲）。 这是一个非常大的潜在客户群，他们可能无法看到您网站的部分或大部分元素。 红绿色盲的四种主要形式是：

• 红色盲：红色阴影难以察觉，被视为黑色； 颜色被视为蓝色或金色的色调。 深棕色容易与其他颜色（如红色、橙色或绿色）的深色相混淆。
• 绿色盲：绿色盲难以察觉； 通常会看到蓝色和金色。 红色和绿色的色调可以互换。 黄色和明亮的绿色看起来是一样的。
• 红色异常：红色显示为深灰色； 所有的红色都不那么明亮。
• 淡色：主要看到蓝色、黄色和通常柔和的颜色。

其他类型包括蓝黄色盲等。 幸运的是，一些在线工具可以帮助您设计安全的主题并调整调色板。

Adobe Color 的辅助工具允许您拖动滑块以获得正确的颜色值。 您还可以将主题拖放到网站上以检查当前的调色板方案。

字体配对技巧

正如许多在线平面设计学位课程所教授的那样，版式的四个基本原则是对比度、空间、层次结构和尺寸。 主要目标是在设计中平衡易读性和风格。 以下是您可以尝试的一些字体配对的关键想法：

• 尝试使用浅色、常规和粗体字体粗细（相同字体）。
• 组合不同的字体系列和字体。
• 在单词、短语或句子中合并各个字母的字距或间距。
• 使用首字下沉，其中正文的第一个字母很大，通常风格化，并且对任何设计开放。 这是古书中使用的经典方法。
• 字体美观必须与整体设计相平衡。
• 让一些字体区域变得古怪或看起来不合时宜，以表达兴奋或新奇，但如果需要简单，请保持简单！
• 合并 CJK 字体——中文、日文和韩文脚本，以实现一些风格。 向母语人士咨询翻译的细微差别。
• 当主要字体没有所需的风格或影响时，使用辅助字体。

一些示例如下：

• 阿布里尔·胖脸和 Poppins
• Alegreya（粗体和常规）
• 巴洛浓缩和蒙特塞拉特
• 鸬鹚 Garamond 和 Proza Libre
• DM Serif 显示和 DM Sans
• Etcetera Type Company 的《Epilogue and Anybody》

• IBM Plex Sans 压缩版和 IBM Plex Sans
• 卡拉和因康索拉塔
• 卡拉和梅里韦瑟
• Libre Baskerville（粗体和常规）
• Libre Baskerville 和 Source Sans Pro
• 龙虾二号和 Kaushan 文字，Impallari Type
• 蒙特塞拉特岛和欣德岛
• 努尼托和 PT Sans
• Nunito Sans（粗体和常规）
• 奥斯瓦尔德和 Source Sans Pro

• 奥斯瓦尔德和 Source Serif Pro
• 普莱费尔展示和拉托
• Playfair Display 和 Source Sans Pro
• 四世纪和洛拉
• Quattrocento 和 Quattrocento Sans
• 流沙（粗体和常规）
• Roboto 压缩版和 Roboto
• Stint Ultra Expanded 和 Pontano Sans
• Ultra 和 PT 衬线
• Work Sans 和 Merriweather
• Yeseva One 和 Josefin Sans

字体配对工具

1. Google Fonts 是一个必看网站，提供有关选择字体配对的一般想法。 所有字体都是开源的并且可以免费使用。
2. FontPair 允许您查看交互式字体配对以及来自 Googe Fonts 的任何字体，这些字体均可免费使用。

开发您的字体

为什么不直接制作你的字体呢？ 苹果从 Helvetica Neue 改为他们内部创建的名为 San Francisco 的字体，这对他们来说效果很好。 开源 Birdfont 是一个免费的在线工具 - 创建并测试您的字体！

颜色和字体消失！

上述技术仅次于消息和用户体验。 该设计依赖于反馈并且是迭代的——通过对一小部分用户和客户进行 A/B 测试，预计会有一些设计更改。 发挥你的想象力，创造一种方式！