设计稿焦点状态如何清晰显示

本文目录导读：

1. 设计规范如何定义
2. 前端实现如何让焦点状态清晰
3. 测试与验证
4. 设计稿标注示例

这是一个非常关键的设计细节,焦点状态（Focus State）不仅是设计规范的要求，更是实现无障碍访问的核心，想要让焦点状态“清晰显示”，可以从设计规范和具体实现方法两个层面来看。

设计规范如何定义

在设计稿中就需要明确：

焦点样式的颜色与大小

• 颜色：通常使用高对比度的颜色，如蓝色、白色或深色背景下的亮色，推荐遵循系统或品牌色，但必须与背景有足够的对比度（建议对比度至少3:1，最好4.5:1）。
• 宽度：通常为2-4px。
• 偏移量：焦点框与元素本身的间距建议为2-4px，这样既显眼又不显得拥挤。

支持的设计形态

• 实线框：最常见的实现方式。
• 内发光/阴影：适合圆角元素或需要更柔和视觉的场景。
• 高亮底色+边框：适合按钮或卡片类元素。

交互行为说明

设计稿中需要标注：

• 默认状态 -> 焦点状态 -> 激活/点击状态 的完整过渡
• 如果是自定义组件（如下拉框、滑块），需单独注明焦点时的操作路径

---

前端实现如何让焦点状态清晰

不要移除默认的 focus 样式

/* 错误做法：直接移除 */
*:focus {
  outline: none;
}

应该改为：

*:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

或者自定义样式：

button:focus-visible {
  box-shadow: 0 0 0 3px #005fcc;
}

使用 focus-visible 区分鼠标与键盘

这是现代浏览器推荐的方式：

/* 仅当键盘导航时显示焦点框 */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* 鼠标点击时不显示焦点框（可选） */
:focus:not(:focus-visible) {
  outline: none;
}

这样做的好处是：鼠标用户不会看到焦点框，键盘用户能清晰看到。

针对复杂组件强化焦点

对于自定义组件（如下拉菜单、单选按钮组），需要确保内部可聚焦元素都有焦点指示：

<div role="combobox" tabindex="0" class="custom-select">
  <!-- 内部可聚焦项也要有焦点样式 -->
</div>

.custom-select:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

使用动画增强可感知性

.focusable:focus-visible {
  outline: 2px solid #2563eb;
  transition: outline-offset 0.1s ease;
}

微小的动画可以让焦点变化更容易被注意到。

---

测试与验证

在开发阶段,建议：

1. 键盘测试：只使用键盘（Tab、Shift+Tab、箭头键）遍历所有可交互元素，确认每个元素焦点可见。
2. 屏幕阅读器测试：配合 NVDA、VoiceOver 等，确认焦点元素被正确朗读。
3. 高对比度模式测试：确保在 Windows 高对比度模式或其他系统高对比度设置下焦点依然可见。
4. 移动端测试：确认触控设备上焦点样式不会影响正常操作。

---

设计稿标注示例

一个典型的设计稿标注应该包含：

默认: 透明无边框
Hover: 背景色变浅(如 #f0f0f0)  无额外边框
Focus (键盘): 2px 蓝色实线边框, outline-offset: 2px
Active: 背景色加深(如 #e0e0e0)

对于表单控件,还应标注 focus-within 状态（当内部输入框获得焦点时，整个输入组件的样式变化）。

---

如果项目有特殊需求（例如希望焦点框更明显或更隐蔽），建议与产品需求文档保持一致，但底线是：所有可交互元素必须有一个可感知的焦点指示器，并且对比度足够高，颜色不依赖于色觉感知（如只靠红色/绿色区分）。

标签： 焦点状态 视觉清晰