体验设计: 切换网站页面颜色的底层逻辑

Apple 为了满足不同用户的个性化需求和使用习惯，提供了深色模式和浅色模式。深色模式在低光环境下使用，例如在晚上或昏暗的房间里，可以减少眼睛的疲劳并节省电池寿命。深色背景可以降低屏幕的亮度，使得查看内容更加舒适。浅色模式适合在明亮环境下使用，例如在白天或明亮的室外场景中，可以增强可读性和视觉效果。浅色背景可以提供更好的对比度，使得文本和图标更加清晰可见。用户可以根据自己的喜好和使用场景选择合适的模式，以获得更好的使用体验。

颜色的力量

颜色是一种强大的表达工具，能够引起人们的情感共鸣和记忆，也就是说人们对颜色的感知是不同的。

还是拿苹果的深浅色模式举🌰：

深色模式在夜间使用或低光环境下使用时，可以减轻眼睛的疲劳，并提供更舒适的阅读体验。深色背景可以凸显出文本和其他元素，使其更加醒目。此外，深色模式还可以为应用增添一种现代感和高端感。
浅色模式在白天或明亮环境下使用时更具可读性。白色背景可以提供清晰的对比度，使文本和图像更加易于阅读和理解。浅色模式通常被认为是更传统和常见的设计选择，因为它更符合我们对于亮度和颜色的认知。

那其实在网页设计中，颜色的运用远不止于深色和浅色模式。颜色可以用来引导用户的注意力、传达品牌的个性和价值观，并创建与目标用户群体相匹配的情绪和氛围。

比如:

红色：激情、力量、爱情，常用于引起注意和表达紧迫性。例如，红色的按钮可以用于突出重要的操作或警示信息。

蓝色：冷静、信任、稳定，常用于传达专业性和可靠性。例如，银行和科技公司常常使用蓝色作为主色调，以增加用户对其安全性和可信度的信任感

绿色：自然、健康、希望，常用于环保、健康和农业相关的网站。绿色也与财务和金融领域相关，和金钱相关，一般都是负面的，比如一片绿的基金。。。

黄色：活力、快乐、创造力，常被用于表达乐观和活力。黄色也可以吸引用户的注意力，并被用于突出特别的优惠或促销信息。

紫色：神秘、创意、豪华，常用于与创意、艺术和奢侈品相关的网站。紫色还与精神和宗教领域相关，可以代表着智慧和灵性。

css 复制代码

body {
  background-color: #f5f5f5;
  color: #333333;
}

.button {
  background-color: #ff0000;
  color: #ffffff;
}

.link {
  color: #0000ff;
  text-decoration: underline;
}

深色模式 vs. 浅色模式实现

深色模式和浅色模式是现代操作系统和浏览器提供的两种不同的颜色模式选择。在主流网站中基本都提供这两种颜色，比如 YouTube, Twitter, Facebook, Instagram。

我们应该使自己的视觉适应用户的偏好，那我们怎么知道用户目前是深色还是浅色模式呢？可以使用媒体查询:

js 复制代码

// 使用媒体查询切换网站页面颜色
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDarkMode.matches) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.remove('dark-mode');
}

window.matchMedia('(prefers-color-scheme: dark)') 是一个 JavaScript 方法，用于检测用户的首选颜色模式是否为深色模式（dark mode）。

在现代操作系统和浏览器中，用户可以选择在浅色模式（light mode）和深色模式之间切换。使用 window.matchMedia('(prefers-color-scheme: dark)') 可以检查用户当前的首选颜色模式是否为深色模式。

此方法返回一个 MediaQueryList 对象，您可以使用该对象的 matches 属性来判断用户当前的首选颜色模式是否为深色模式。如果 matches 的值为 true，则表示用户当前处于深色模式；如果 matches 的值为 false，则表示用户当前处于浅色模式。

除了使用 JS 的方式外，我们也可以使用 CSS 的方式来定义深浅主题样式:

css 复制代码

/* 在暗黑模式下设置不同的颜色样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

/* 在明亮模式下设置不同的颜色样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

在一些主流框架和库中，对深浅模式也都有支持，比如流行的 Tailwind CSS 库中，可以使用dark和light类来设置深浅颜色切换。

css 复制代码

<div class="dark:bg-gray-900 dark:text-white light:bg-white light:text-gray-900">
  这是一个使用Tailwind CSS的示例。
</div>

在上面的示例中，dark:bg-gray-900 dark:text-white类会在暗黑模式下将背景色设置为深灰色（gray-900）并将文本颜色设置为白色（text-white），而light:bg-white light:text-gray-900类会在明亮模式下将背景色设置为白色并将文本颜色设置为灰色（gray-900）。

通过检测用户的首选颜色模式，我们可以根据用户的喜好来调整您的应用程序或网站的外观和样式。

用户发体验与可访问性考虑

换网站页面颜色不仅仅是为了迎合用户的审美偏好，还应考虑到用户体验和可访问性。以下是网站设计中错误使用颜色的一些例子：

使用太多的鲜艳颜色，导致页面过于杂乱和不协调。
使用对比度较低的颜色组合，使文字不易阅读。
使用过于饱和的颜色，给用户造成眩目或不舒适的感觉。
使用颜色作为唯一的信息传达方式，而不提供其他辅助手段，导致色盲用户无法理解页面内容。
在不同页面或功能中使用不一致的颜色，给用户造成困惑和不一致的体验。

这些错误使用颜色的例子都会影响用户体验和界面可用性，因此在网站设计中需要谨慎选择和使用颜色。

网站的可访问性是指网站能够被所有人，包括身体上、感知上或认知上具有不同能力的用户访问和使用的能力。这包括但不限于为残障人士提供辅助功能、提供易读的内容、可导航的页面结构和响应式设计。

来看一个示例:

html 复制代码

<button aria-label="搜索" class="search-button"> <span class="search-icon"></span> </button>

在这个例子中，我们使用了 aria-label 属性来为按钮添加了一个描述性文本，以便屏幕阅读器可以读出按钮的目的，帮助视觉障碍用户理解按钮的功能。这只是一个简单的例子，可访问性设计涉及到许多方面，包括颜色对比度、焦点管理、可导航性等。在实际开发中，应该遵循更详细的可访问性指南，以确保网站能够为所有用户提供良好的体验。

颜色对比度

使用明亮的文字颜色与深色的背景颜色，例如：黑色文字与白色背景。

html 复制代码

<p style="color: #000000; background-color: #ffffff">这是一段明亮的文字在深色背景上的示例。</p>

避免使用相似度很高的颜色进行对比，例如：浅灰色文字与白色背景。

html 复制代码

<p style="color: #999999; background-color: #ffffff">这是一段相似度很高的文字在浅色背景上的示例。</p>

焦点管理

使用可见的焦点样式来标识当前焦点所在的元素，例如：边框或高亮效果。

html 复制代码

<style>
  .focus-style {
    outline: 2px solid blue;
  }
</style>

<button class="focus-style">点击此按钮</button>

确保焦点可以通过键盘进行导航，例如：使用tab键切换焦点。

html 复制代码

<button tabindex="0">点击此按钮</button>
<a href="#" tabindex="0">点击此链接</a>

可导航性

使用清晰的页面结构和链接文本，以便用户可以轻松导航网站。

html 复制代码

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

提供"跳过到内容"链接，让用户可以直接跳过导航和其他重复内容，快速进入主要内容区域。

html 复制代码

<a href="#main-content" class="skip-link">跳过到内容</a>

<main id="main-content">
  <!-- 主要内容 -->
</main>

一个懂得如何设计用户友好界面、优化用户交互的前端开发人员，能够为用户提供更好的使用体验，从而提升产品的竞争力和用户满意度。通过深入了解用户需求和行为模式，前端开发人员可以设计出符合用户期望的界面，提高用户的使用效率和舒适度。此外，懂得用户体验设计的前端还能与设计团队更好地协作，理解和实现设计师的意图，打造出更具吸引力和创新性的用户界面。因此，前端增加核心竞争力的方式除了往"后"靠，也可以往"前"靠，掌握用户体验设计，"极具美感"的前端开发人员在就业市场上更小众，更受欢迎。

结束语

颜色切换提供了一个让用户在互联网世界中定制自己喜欢的外观和体验的机会。通过了解颜色的力量、深色模式和浅色模式的差异、实现方法、用户体验等方面的知识，我们无论是在黑暗的夜晚还是在明亮的白天，都可以给用户不同的颜色感知来表达我们的产品~

如果本文对你有帮助，点个赞和关注吧❤️！