平面设计师

运用专业的 UI/UX 视觉设计判断力，对线框图、组件、界面屏幕及完整界面进行设计。将模糊的审美需求（例如“让它更出彩”“看起来过时了”“感觉太杂乱”）转化为具体、可论证的设计决策——这些决策需基于视觉感知研究成果与当前平台设计规范。

何时使用该技能

• 设计或评审界面屏幕、组件、落地页、仪表盘或移动应用 UI
• 选择配色方案、字体比例、间距规则或网格系统
• 为设计系统定义设计令牌（design tokens）或组件变体
• 优化现有布局的视觉层级、可扫描性或转化率
• 添加或审核微交互、状态过渡与动效
• 实现 UI 的无障碍访问（符合 WCAG 对比度要求、面向神经多样性用户的模式、动态字号支持等）
• 将“2018 年扁平风”界面按 2026 年最新预期进行现代化升级

核心决策框架

每一项视觉决策都应依次回答以下三个问题：

1. 视线首先落在哪里？ — 主要操作必须在对比度、尺寸和位置上胜出。执行 5 秒眯眼测试：若将关键操作按钮（CTA）透明度调至 30% 后即不可见，则说明层级结构已失效。
2. 用户需要将哪些元素感知为相关？ — 在添加边框、分隔线或容器之前，优先应用格式塔原理中的邻近性与相似性原则。留白比线条更能清晰地组织信息群组。
3. 哪些内容可以延迟呈现？ — 渐进式披露优于信息堆砌。每个可见元素都在消耗用户的认知负荷。

视觉系统默认值

以下为起始参考值；如需偏离，请确保有明确依据：

色彩与对比度

• WCAG 最低要求：正文文本对比度 ≥4.5:1；大号文本（≥18pt 或 ≥14pt 加粗）及 UI 组件对比度 ≥3:1。AAA 级别要求为 7:1 / 4.5:1。玻璃态/模糊背景通常不达标 —— 必须针对其后可能出现的最暗与最亮内容分别测试。
• 多巴胺配色方案（高饱和霓虹色、Y2K 风格）需搭配一个去饱和度的 60% 主色以保障可用性；全界面纯高饱和会显得像儿童玩具。
• 深色模式 ≠ 反转颜色 — 纯黑背景配纯白文字易引发光晕效应。推荐采用类似 #E6E6E6 文字配 #121212 背景的非纯黑方案。
• 切勿仅靠色相传递信息。 必须搭配图标、标签或形状（例如：红色错误提示 + ⚠ + “错误：”）。
• 状态色（成功 / 警告 / 错误 / 信息）应独立于品牌色轴存在：即使品牌焕新，状态色也应保持一致且可识别。

排版

• 最多使用两种字体家族。 一种用于展示类文本（display），一种用于正文（text）。若产品需展示代码或需对齐的数字，可额外增加一种等宽字体（monospace）。
• 光学尺寸缩放（optical sizing）在大范围使用中至关重要。 将展示字重用于正文尺寸会显得臃肿；将正文字重用于大标题尺寸则显得单薄。建议在支持时优先选用带光学尺寸轴（opsz）的可变字体。
• 数字排版：表格、仪表盘及任何数字列请使用等宽数字（font-variant-numeric: tabular-nums）；其余场景使用比例数字（proportional figures）。
• 动态/超大字号 是 2026 年主流大标题设计模式，但若未提供 prefers-reduced-motion 降级方案而直接启用动画，则将损害无障碍体验。

值得掌握的布局模式

• Bento 网格 —— 大小不一的模块化图块；适用于功能展示、仪表盘与作品集。每一块图块均需自包含（承载单一概念、一个 CTA）。
• F 型布局 适用于文字密集型页面；Z 型布局 更适合精简型落地页。将主要 CTA 置于用户预期扫描路径的终点处。
• 不对称 / 破格布局 在 2026 年营销类 UI 中再度流行，但生产环境的应用 UI 仍更青睐严格网格系统。
• 滚动驱动叙事（scroll-driven storytelling） 已成标准长文表现形式；请预留 IntersectionObserver 实现的渐进式呈现预算，而非采用侵入式滚动劫持（scroll-jacking）。

动效与微交互

• 持续时间：状态变化（悬停、按下）为 100–200ms；过渡动画（展开/收起）为 200–400ms；叙事性呈现仅限 400–800ms。超过 800ms 的动画将被感知为异常。
• 缓动函数：cubic-bezier(0.4, 0, 0.2, 1)（Material “标准” 缓动）是稳妥默认值。线性缓动（linear easing）仅适用于不确定状态的旋转加载器（indeterminate spinner）。
• 务必尊重 prefers-reduced-motion —— 应将位移变换（transform）替换为不透明度淡入淡出（opacity fade），绝不可完全移除反馈。
• 每个可交互元素至少需提供四种视觉状态：默认态（rest）、悬停态（hover）、激活/按下态（active/pressed）、聚焦可见态（focus-visible）。必要时，禁用态（disabled）作为第五种状态。
• 触感极繁主义（tactile maximalism）（即“Q 弹 UI”）—— 按钮在按下时压缩 2–4%，释放时短暂过冲（overshoot）。在触控设备上呈现高端质感，但若所有元素均如此则易显花哨。

设计令牌与系统

• 令牌应分层级： 基础令牌（color-blue-500）→ 语义令牌（color-action-primary）→ 组件令牌（button-primary-bg）。组件应引用语义令牌，而非基础令牌。
• 除色彩与字体外，间距、圆角、层级高度（elevation）、动效时长与 z-index 均应建立完整的令牌体系。
• 设计工具与代码之间须有唯一可信源（one source of truth）。 无同步漂移的手动交接，意味着必须采用 Style Dictionary、Tokens Studio 或平台原生变量方案，而非截图交付。

无障碍访问（不可妥协的底线）

• 对比度须满足 WCAG 2.2 AA 级别要求（见上文）。
• 点击区域尺寸下限：iOS ≥44×44 pt，Android ≥48×48 dp，网页端 ≥24×24 CSS px（并保证足够间距）。
• 焦点指示器（focus indicator）必须在所经所有背景上均清晰可见 —— 品牌色的 2px 圆环在同色区块中常失效；建议采用对比色描边 + 偏移组合方案。
• 支持操作系统级动态字号放大至 200%。须验证：文字不被裁切、不因截断而丧失可操作性、不破坏整体布局。
• 面向神经多样性用户的默认设置：避免自动播放动效、允许关闭视差效果、保持认知负荷分块可控、所有限时交互必须提供暂停控制。

2026 年趋势速查表

请有选择地应用 —— 时尚 ≠ 适用于所有产品。

• 触感极繁主义 —— 具有真实深度感的光泽、陶土、果冻质感。适用于消费级/创意类工具，不适用于金融/企业级产品。
• 多巴胺 + Y2K 配色方案 —— 高饱和霓虹色、铬金属感、渐变。须按 60–30–10 原则平衡：保留一个高饱和强调色，其余主辅色均做去饱和处理。
• 改良版玻璃拟态（glassmorphism） —— 带背景模糊（backdrop-blur）的半透明表面。务必验证文字对比度能否通过玻璃背后 最不利 内容的考验。
• Bento 网格 —— 功能展示页、设置界面、仪表盘。
• 自适应 / “氛围感” UI —— 主题随情绪、时间或专注状态动态切换。必须预设确定性的回退主题（fallback theme）。
• 可控的不完美 —— 手绘笔迹、拼贴纹理、涂鸦元素。传达人性化温度；除非刻意制造反差，否则不应与超高精度网格混用。
• 多模态可操作性（multimodal affordances） —— 即便仅为点击/触控型应用，也应暴露语音与键盘操作路径；图标设计需兼容各类输入方式。

常见陷阱

• 切勿 在未针对玻璃/模糊表面后可能出现的最暗 与 最亮内容分别测试文字对比度的前提下，直接上线该表面。设计师常遗漏对明亮内容的测试。
• 切勿 在整个配色方案中滥用 Y2K 风格高饱和 —— 仅保留一个强调色高饱和，其余全部去饱和；否则 UI 将难以阅读。
• 切勿 在无对应令牌（token）的情况下指定像素值。margin-top: 13px 是设计系统濒临崩溃的早期预警信号。
• 切勿 依赖悬停（hover）传递关键信息或触发关键操作 —— 触控用户无悬停能力，键盘用户需获得与悬停对等的聚焦（focus）支持。
• 切勿 使用 width/height/top/left 属性实现过渡动画 —— 应仅使用 transform 和 opacity 以确保动画运行于合成器线程（compositor thread）。
• 切勿 仅用占位符文本（placeholder text）充当唯一标签 —— 它在获得焦点时即消失，且无法被屏幕阅读器识别。
• 美观-可用性效应（aesthetic-usability effect） 确实存在，但具有两面性：精美 UI 会在 测试阶段 掩盖可用性缺陷，随后却在用户流失中集中暴露。请围绕真实任务开展测试，而非仅凭第一印象评估。
• 潮流 ≠ 永恒。系统中长期存在的部分（如字体比例、间距规则、无障碍规范）应默认采用保守设计；潮流元素仅应用于可随时替换的表层处理（surface treatments）。

故障排查

参考资料

• 原理深度解析 —— 视觉层级、格式塔原理、UX 设计法则
• 设计系统与令牌 —— 分层令牌、组件变体、跨团队协作交付
• 无障碍检查清单 —— WCAG 2.2 AA 级别的实用通过指南
• 2026 年趋势与注意事项 —— 何时采纳、何时规避