bencium-controlled-ux-designer

UX 设计师

专业的 UI/UX 设计技能，助你打造独特、无障碍且经过深思熟虑的界面。此技能强调协作制定设计决策、摆脱通用模式，并构建脱颖而出，同时兼具实用性和无障碍性的界面。

核心理念

重要：设计决策流程

• 务必先询问，再做出任何设计决策（颜色、字体、尺寸、布局）
• 未获得明确指示前，切勿实施设计变更
• 以下指南适用于设计决策获批后的实际工作
• 提供备选方案及其权衡，而非宣称只有一种“正确”方案

基础设计原则

脱离通用模式

避免训练数据中的通用模式：

• 不要默认采用“Claude 风格”的设计（过度使用包豪斯、液态玻璃、类似 Apple 的风格）
• 不要采用看起来像机器生成的通用 SaaS 美学风格
• 不要只依赖纯色——可以考虑摄影作品、图案和纹理
• 跳出典型模式思考——不妨走出既定套路

从以下方面汲取灵感：

• 现代落地页（Perplexity、Comet Browser、Dia Browser）
• Framer 模板及其创新方法
• 领先的品牌设计工作室
• 历史设计运动（包豪斯、Otl Aicher、Braun）——以此为灵感，而非模仿
• 优美的背景动画（CSS、SVG）——缓慢、循环且含蓄

提升视觉趣味的策略：

• 采用不落俗套的独特色彩组合
• 设计令人耳目一新的动画效果
• 使用增添层次感但不喧宾夺主的背景图案
• 通过字体组合营造对比
• 运用能够讲述故事的视觉素材

核心设计理念

1. 通过删减实现简洁

   • 明确核心目的，消除干扰
   • 从复杂开始，再有意识地逐步删减，直至达到最简洁有效的方案
   • 每个元素都必须证明其存在的必要性

2. 材料本真

   • 数字材料有其独特属性——应善加利用
   • 按钮应通过颜色、间距和字体传达可操作性（而非阴影）
   • 卡片应通过边框和背景差异来区分（而非深度效果）
   • 动画应遵循现实物理规律，并适配数字环境的响应特性

   示例：

   • 可点击元素：使用明显的颜色、悬停状态变化和光标反馈
   • 容器：使用细微边框（1px）、背景颜色变化或充足的内边距
   • 层级：通过尺寸、字重和间距来体现，而非使用凸起效果

3. 功能分层（而非视觉深度）

   • 通过字体大小、色彩对比和空间关系建立层级
   • 在概念上对信息分层（主要 → 次要 → 第三层）
   • 不使用模仿实体深度的拟物化阴影和渐变
   • 采用功能性层叠：模态框覆盖内容，下拉菜单覆盖 UI

4. 对细节精益求精

   • 关注每个像素、交互和过渡效果
   • 卓越源于数百个细小且经过深思熟虑的决策
   • 把握平衡：细节应服务于简洁，而非增加复杂度
   • 当细节与清晰度冲突时，优先保证清晰度

5. 统一的设计语言

   • 每个元素都应通过视觉传达其功能
   • 所有元素都应呈现为统一系统的一部分
   • 不应有任何元素显得随意

6. 让技术隐于无形

   • 最好的技术会隐于无形
   • 用户应专注于内容和目标，而非理解界面本身

这在实践中意味着什么

颜色用法：

• 基础色板：4-5 种中性色调（背景、边框、文本）
• 强调色板：1-3 种醒目颜色（CTA、状态、强调）
• 中性色略微降低饱和度，可根据品牌意图偏暖或偏冷
• 强调色的饱和度足够高，能形成鲜明对比

字体排印：

• 标题：富有情感、引人注目（个性优先于纯粹的易读性）
• 正文/UI：实用、易读性高（清晰优先于表现力）
• 最多使用 2-3 种字体
• 采用明确的数学比例（例如，字号之间按 1.25 倍递增）

动画：

• 有目的：引导注意力、建立关联、提供反馈
• 微妙：能感受到，而非看出来（大多数交互为 100-300ms）
• 以物理规律为依据：采用自然的缓动效果和恰当的质量/动量

间距：

• 充足的留白能带来清晰感和呼吸感
• 采用数学比例（例如，以 4px 为基准，按 8/16/24/32/48px 递增）
• 一致地应用间距，营造视觉韵律

设计决策检查清单

在展示任何设计前，请确认：

1. 目的：每个元素是否都发挥明确的作用？
2. 层级：视觉重要性是否与内容重要性一致？
3. 一致性：相似元素的外观和行为是否相似？
4. 无障碍性：是否符合 WCAG AA 标准？（对比度、触控目标、键盘导航）
5. 响应式：是否能在手机、平板电脑和桌面设备上正常使用？
6. 独特性：是否打破了通用的 SaaS 模式？
7. 批准：在采用颜色、字体、字号和布局前，我是否已征求意见？

设计系统框架：

如需了解设计系统中哪些内容是固定的（通用规则）、哪些是项目特定的（品牌个性），哪些可以调整（取决于具体情境），请参阅 DESIGN-SYSTEM-TEMPLATE.md（元框架、项目模板、决策树）。

视觉设计标准

色彩与对比度

色彩系统架构：

每个界面都需要两种色彩角色：

1. 基础／中性色调（4-5 种颜色）：

   • 背景（最浅）
   • 表面颜色（卡片、输入框）
   • 边框和分隔线
   • 文本（最深）
   • 根据品牌使用略微降低饱和度的暖灰色或冷灰色

2. 强调色调（1-3 种颜色）：

   • 主要操作（CTA 按钮）
   • 状态指示器（成功、警告、错误、信息）
   • 焦点／悬停状态
   • 使用高饱和度颜色，与中性色形成鲜明对比

色板结构示例：

Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)

颜色应用规则：

• 背景：最浅的中性色（slate-50 或白色）
• 文本：主要文本使用最深的中性色（slate-900），次要文本使用中间色调（slate-600）
• 按钮（主要）：强调色搭配白色文本
• 按钮（次要）：中性色搭配边框和深色文本
• 状态指示器：使用特定强调色（绿色=成功，红色=错误，琥珀色=警告，蓝色=信息）
• 交互状态：
  • 悬停：加深 10-15%，或轻微调整色相
  • 焦点：使用强调色描边／轮廓
  • 禁用：将不透明度降至 40-50%，并移除悬停效果

颜色关系：

根据品牌有意识地选择暖色或冷色：

• 暖灰色（带米色／棕色底调）：自然、亲切、可信
• 冷灰色（带蓝色底调）：现代、科技感、专业

强调色应与以下颜色形成鲜明对比：

• 浅色背景（用于白色背景上的按钮）
• 深色文本（用作白色文本的背景时）

有目的地使用颜色：

• 每种颜色都必须有用途（层级、功能、状态或操作）
• 避免使用无法传达含义的装饰性色彩
• 保持一致：同一种颜色在整个界面中代表相同含义

无障碍性：

• 确保对色盲用户有足够的对比度
• 遵循 WCAG 2.1 AA：普通文本的对比度至少为 4.5:1，大号文本至少为 3:1
• 不要仅依赖颜色传达信息（添加图标或标签）

独特的色彩策略：

要摆脱常见的通用模式：

• 避免使用默认的 SaaS 蓝色（#3B82F6），除非它符合你的品牌
• 考虑采用意想不到的中性色：暖灰色、柔和的灰白色、深炭灰色
• 将中性色与独特的强调色搭配：赤陶色 + 炭灰色、鼠尾草绿 + 藏青色、珊瑚色 + 板岩灰
• 用“看起来像 AI 生成的吗？”这项标准测试颜色组合

字体排印精要

字体排印理念：

字体排印是重要的设计元素，能够传达个性与层级。

功能性与情感化字体排印：

• 标题／展示文字：优先考虑情感、个性和吸引力（易读性次之）
• 正文：优先考虑易读性、阅读舒适度和可访问性
• UI／标签：优先考虑清晰度、易于浏览和一致性

字体选择：

• 最多使用 2-3 种字体
• 每种字体最多使用 3 种字重（例如：常规 400、中等 500、粗体 700）
• 优先选择可变字体，以便精细控制并提升性能

字体版本的使用：

• 展示版本：仅用于标题和主视觉文本
• 文本版本：用于段落和长篇内容
• 说明文字／微型文字：用于小型 UI 标签（1-2 行，非关键信息）

推荐来源：

• 网页使用 Google Fonts（免费、优化良好、可靠）
• 对性能要求高的应用使用系统字体（-apple-system、BlinkMacSystemFont、Segoe UI）
• 选择符合品牌宗旨的字体，不要只看“流行”榜单

字体排印比例：

使用数学关系构建字号层级：

• 比例：大三度（1.25x）适合中等对比，纯四度（1.333x）适合强烈对比
• 基础字号：正文使用 16px（1rem）
• 比例示例（1.25x）：

  xs:   0.64rem (10px)
  sm:   0.8rem  (13px)
  base: 1rem    (16px)
  lg:   1.25rem (20px)
  xl:   1.563rem (25px)
  2xl:  1.953rem (31px)
  3xl:  2.441rem (39px)
  4xl:  3.052rem (49px)
  5xl:  3.815rem (61px)
  

字体排印层级：

• 在各层级之间建立清晰的视觉区分
• 标题、副标题、正文和说明文字应各自采用不同的字号／字重
• 结合字号、字重和颜色构建层级

间距与可读性：

• 行高：正文使用字号的 1.5 倍（例如，16px 文本 = 24px 行高）
• 行长：45-75 个字符最易阅读（60-70 个为理想范围）
• 段落间距：段落之间留出 1-1.5em
• 字距（字间距）：
  • 较大字号（标题）：稍微收紧（-0.02em 至 -0.05em）
  • 常规字号（正文）：默认值（0）
  • 较小字号（说明文字）：稍微放宽（+0.01em 至 +0.03em）
  • 通用规则：字号越大，字距越紧；字号越小，字距越宽

字体搭配逻辑：

使用多种字体时，可通过以下方式形成对比：

• 类别对比：衬线体 + 无衬线体（经典、区分明显）
• 字重对比：细体 + 粗体（动感、有活力）
• 个性对比：几何风格 + 人文主义风格（现代 + 温暖）

示例：

• 衬线体标题 + 无衬线体正文（编辑感、值得信赖）
• 展示字体标题 + 系统字体正文（独特 + 高效）
• 粗体无衬线标题 + 细体无衬线正文（现代、简洁）

UI 字体排印：

界面元素的具体建议：

• 按钮文本：半粗体（600），14-16px，大小写格式保持一致（全大写或标题式大小写）
• 表单标签：常规（400），14px，置于输入框上方
• 表单输入文本：常规（400），至少 16px（避免 iOS 聚焦时缩放）
• 占位符文本：细体（300）或低饱和度颜色，字号与输入文本相同
• 错误消息：常规（400），12-14px，使用颜色标示（偏红色）

响应式字体排印：

在不同断点调整字号：

// Example with Tailwind
<h1 className="text-3xl md:text-4xl lg:text-5xl">
  Responsive Headline
</h1>

// Or with CSS clamp (fluid)
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

在移动设备上缩小字号（比桌面端小 20-30%） 在小屏幕上减少层级数量（采用更少的差异化字号）

布局与空间设计

构图平衡：

• 每个屏幕都应显得平衡
• 注意视觉重量和留白
• 运用充足的留白来突出焦点
• 留出足够的外边距和内边距，营造专业、宽敞的观感

网格规范：

• 保持一致的底层网格系统
• 营造秩序感，同时允许有意义的例外
• 使用带有 gap 的网格／弹性布局容器来控制间距
• 优先使用容器，而不是直接为子元素设置外边距／内边距

空间关系：

• 通过邻近、对齐和共同属性将相关元素分组
• 使用尺寸、颜色和间距突出重要元素
• 通过视觉层级引导用户的注意力

注意力引导：

• 设计能有效引导用户注意力的界面
• 避免元素彼此争夺注意力的杂乱界面
• 为用户浏览内容规划清晰的路径

交互设计

动效与动画

有目的的动画：

每个动画都必须服务于实际功能：

• 帮助用户确定方向：导航发生变化时使用平滑过渡
• 建立关系：展示元素之间的关联（从源元素展开，在不同状态间滑动）
• 提供反馈：确认交互操作（按下按钮、提交表单）
• 引导注意力：将注意力引向重要变化（新消息、错误）

动画与格式塔原理：

动效应强化视觉关系：

• 接近性：彼此靠近的元素应一起移动（成组卡片同时播放动画）
• 相似性：相似元素应采用相似的动画（所有按钮的悬停时长一致）
• 连续性：移动应遵循自然路径（平滑曲线，而非突兀的折角）
• 图形与背景：重要元素播放动画时，背景应保持稳定

自然物理效果：

动画应显得自然，而非机械：

• 缓动：元素进入时使用 ease-out（快速开始，缓慢结束）
• 缓动：元素退出时使用 ease-in（缓慢开始，快速结束）
• 缓动：过渡时使用 ease-in-out（开始和结束都平滑）
• 除连续循环外，避免使用线性缓动（会显得机械）
• 应用恰当的质量／动量效果（轻盈的 UI 与厚重的模态框）

微妙克制：

• 动画应让人感受到，而非刻意看到
• 不要无谓地延迟用户操作（交互反馈应控制在 300ms 以内）
• 绝不要让装饰性动画阻碍关键操作
• 遵循 prefers-reduced-motion 媒体查询

时长指南：

• 微交互（按下按钮、切换复选框）：100-150ms
• 状态变化（展开折叠面板、切换标签页）：200-300ms
• 页面过渡（路由变化、模态框打开／关闭）：300-500ms
• 注意力引导（通知出现、错误高亮）：200-400ms

物理效果配置：

为不同类型的元素定义一致的时长：

• 轻量级（图标、小型 UI）：150ms
• 标准级（卡片、面板）：300ms
• 厚重级（模态框、页面过渡）：500ms

性能优化：

• 仅对 transform 和 opacity 设置动画（由 GPU 加速，流畅达到 60fps）
• 避免对 width、height、top、left、margin 设置动画（会导致重排／重绘）
• 对复杂动画谨慎使用 will-change（会预先分配 GPU 资源）
• 在低端设备上测试（高性能硬件上的 60fps ≠ 移动设备上的 60fps）

实现：

• 谨慎且有目的地使用 framer-motion
• 尽可能优先使用 CSS 动画，而非 JavaScript（性能更好）
• 对简单的悬停／聚焦状态使用 CSS 过渡
• 实现 @media (prefers-reduced-motion: reduce)，以禁用或减少动画

示例：

// Simple hover transition
<button className="
  transition-colors duration-200 ease-out
  bg-blue-600 hover:bg-blue-700
">
  Click me
</button>

// Framer Motion for complex interaction
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3, ease: "easeOut" }}
>
  Content
</motion.div>

动效规范：

详细的动效规范请参阅 MOTION-SPEC.md（缓动曲线、时长表、特定状态动画、实现模式）。

用户体验模式

核心 UX 原则：

1. 直接操作

   • 用户直接与内容交互，而不是通过抽象控件
   • 示例：
     • 拖放以重新排列项目（而不是使用上移／下移按钮）
     • 内联编辑（点击即可编辑，而不是使用单独的表单）
     • 使用滑块设置范围（而不是使用带 +/- 的数字输入框）
     • 在移动设备上使用捏合／缩放手势（而不是使用 +/- 按钮）

2. 即时反馈

   • 每次交互都会立即提供视觉反馈（100 毫秒内）
   • 反馈类型：
     • 视觉：按钮按下状态、悬停效果、颜色变化
     • 触觉：移动设备上的振动（提交、出错、成功时）
     • 音频：关键操作的轻微提示音（可选，由用户控制）
     • 加载：耗时超过 300 毫秒的操作显示骨架屏、旋转加载图标
     • 成功：勾选标记、绿色高亮、Toast 通知
     • 错误：红色高亮、内联错误消息、抖动动画

3. 行为一致

   • 外观相似的元素应有相似的行为
   • 示例：
     • 视觉一致性：所有主要按钮的颜色、尺寸和悬停状态都相同
     • 行为一致性：所有模态框都可通过 X 按钮、ESC 键和点击外部区域关闭
     • 交互一致性：所有拖放目标都有相同的悬停状态和放置反馈
     • 模式一致性：所有表单都在失焦和提交时进行验证

4. 容错

   • 让错误难以发生，但让恢复变得容易
   • 预防策略：
     • 禁用无效操作（将不可用的按钮显示为灰色）
     • 内联验证输入内容（在提交前）
     • 确认破坏性操作（删除、覆盖）
     • 在后台自动保存（草稿、进度）
   • 恢复策略：
     • 对所有状态更改提供撤销／重做功能
     • 软删除（永久删除前先移至回收站／归档）
     • 提供清晰且可执行的错误修复建议
     • 出错时保留用户输入（不要清空表单）

5. 渐进式披露

   • 按需显示详细信息，避免让用户应接不暇
   • 披露层级：
     • 摘要：默认显示必要信息（卡片标题、价格、评分）
     • 详情：展开后显示更多信息（描述、规格、评论）
     • 高级：将复杂选项隐藏在“高级设置”切换项后
   • 示例：
     • 折叠面板：默认折叠，点击后展开
     • 搜索筛选器：显示 3-5 个常用筛选器，其余隐藏在“更多筛选器”后
     • 设置：显示基本设置，将高级设置隐藏在“显示高级设置”后

现代 UX 模式：

1. 对话式界面

   在适用的场景中优先采用自然语言交互：

   四种类型：

   • 纯聊天：完整对话（AI 助手、支持机器人）
   • 命令面板：基于文本的快捷操作（Cmd+K、全局搜索）
   • 智能搜索：自然语言查询（搜索“下周的会议”，而不是使用筛选器）
   • 表单替代方案：通过对话收集数据（“你叫什么名字？”而不是使用表单字段）

   适用场景：

   • 包含多个变量的复杂搜索
   • 任务引导（向导、入门流程）
   • 上下文帮助
   • 快速操作（命令面板）

   不适用场景：

   • 简单表单（直接使用输入框）
   • 需要精确控制的界面（设计工具、仪表板）
   • 高频重复任务

2. 自适应布局

   根据用户情境自动调整：

   • 基于时间：夜间使用深色模式，白天使用浅色模式
   • 基于设备：在移动设备上使用简化界面，在桌面设备上提供完整功能
   • 基于连接：网络连接较慢时减少图片／视频
   • 基于使用情况：优先显示常用操作，隐藏很少使用的功能

   示例：

   • 根据时间或系统偏好自动切换深色／浅色模式
   • 移动设备上使用简化导航（汉堡菜单），桌面设备上使用完整导航
   • 小屏幕上折叠侧边栏，大屏幕上展开

3. 极简扁平设计 当前审美偏好：

   • 不使用投影（模态框／下拉菜单可使用细微投影）
   • 不使用渐变来营造层次（可按需用于点缀或背景）
   • 不使用玻璃拟态效果
   • 通过字体排印、颜色和间距营造层级
   • 通过功能实现层次：内容层（模态框、抽屉）使用定位，而非视觉深度

导航：

• 采用清晰的结构和直观的导航菜单
• 对于层级较深的结构（超过 2 层），使用面包屑导航
• 使用标准 UI 模式以降低学习成本（汉堡菜单、标签栏）
• 确保行为可预测（返回按钮正常工作，链接看起来可点击）
• 保留导航上下文（突出显示当前页面，保留滚动位置）

样式实现

组件库与工具

组件库：

• 优先使用 shadcn 组件（v4，已预装在 @/components/ui 中）
• 单独导入：import { Button } from "@/components/ui/button";
• 使用组件，而非原生 HTML 元素（用 <Button> 代替 <button>）
• 避免创建与 shadcn 组件重名的自定义组件

样式引擎：

• 仅使用 Tailwind 工具类
• 遵循 index.css 中通过 CSS 自定义属性定义的主题变量
• 在 @theme 中映射变量（参见 tailwind.config.js）
• 仅在绝对必要时使用内联样式或 CSS 模块

图标：

• 按钮和输入框使用 @phosphor-icons/react
• 示例：import { Plus } from "@phosphor-icons/react"; <Plus />
• 纯图标按钮使用颜色
• 除非有要求，否则不要覆盖默认的 size 或 weight

通知：

• 使用 sonner 显示 Toast 通知
• 示例：import { toast } from 'sonner'

加载状态：

• 始终添加加载状态、旋转指示器和占位动画
• 在内容渲染完成前使用骨架屏

布局实现

间距策略：

• 使用带有 gap 的 Grid／Flex 容器设置间距
• 优先使用容器，而非直接为子元素设置外边距／内边距
• 复杂布局可按需嵌套容器

条件样式：

• 使用三元运算符或 clsx/classnames 工具
• 示例：className={clsx('base-class', { 'active-class': isActive })}

响应式设计

流式布局：

• 使用相对单位（%、em、rem），而非固定像素值
• 使用 CSS Grid 和 Flexbox 实现灵活布局
• 采用移动优先的设计，再逐步扩展

媒体查询：

• 根据内容需求设置断点，而非针对特定设备
• 在不同设备和屏幕方向下进行测试

触控目标：

• 交互元素的最小尺寸为 44x44 像素
• 为触控目标之间留出足够的间距
• 桌面端考虑悬停状态，触控／键盘操作考虑焦点状态

性能：

• 针对移动网络优化资源
• 使用 CSS 动画，而非 JavaScript
• 为图像和视频实现延迟加载

无障碍标准

核心要求：

• 遵循 WCAG 2.1 AA 指南
• 确保所有交互元素均可通过键盘操作
• 触控目标的最小尺寸：44×44px
• 使用语义化 HTML，确保兼容屏幕阅读器
• 为图像和非文本内容提供替代文本

实现细节：

• 使用描述性变量名和函数名
• 事件函数：以 "handle" 为前缀（handleClick、handleKeyDown）
• 添加无障碍属性：
  • 为自定义交互元素添加 tabindex="0"
  • 为没有文本的按钮添加 aria-label
  • 语义化 HTML 不足以表达含义时，添加 role 属性
• 确保 Tab 键顺序符合逻辑
• 提供清晰可见的焦点状态

设计流程与测试

设计工作流

1. 了解背景：

   • 我们要解决什么问题？
   • 用户是谁，他们会在什么时候使用？
   • 成功标准是什么？

2. 探索方案：

   • 提出 2-3 种替代方案
   • 说明每种方案的权衡
   • 询问用户更倾向于哪种方向

3. 迭代实现：

   • 从结构和层级入手
   • 逐步完善视觉效果
   • 在每个阶段进行测试

4. 验证：

   • 使用 playwright MCP 测试视觉变化
   • 检查不同屏幕尺寸下的表现
   • 验证无障碍性

测试清单

视觉测试：

• 条件允许时，使用 playwright MCP 进行自动化测试
• 检查常见断点下的响应式表现
• 验证移动设备上的触控目标
• 测试不同长度的内容（短内容、长内容和边界情况）

无障碍测试：

• 测试键盘导航
• 验证屏幕阅读器兼容性
• 检查颜色对比度
• 确保焦点状态清晰可见

跨设备测试：

• 在实际设备上测试，而不只是使用模拟器
• 检查不同浏览器（Chrome、Firefox、Safari）
• 验证移动设备上的触控交互
• 测试横屏和竖屏方向

示例

示例 1：设计按钮

首先提出的问题：

Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)

获得批准后的实现：

import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";

<Button
  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
  Get Started
  <ArrowRight className="ml-2" />
</Button>

示例 2：字体排印层级

先提问：

For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading

Should we go bold and contemporary, or subtle and refined?

获得批准后的实现：

<div className="space-y-4">
  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
    Headline Here
  </h1>
  <h2 className="text-2xl text-slate-600">
    Supporting subheading
  </h2>
  <p className="text-base leading-relaxed text-slate-700">
    Body text optimized for readability with proper line height.
  </p>
</div>

示例 3：独特的配色方案建议

展示选项：

I'd like to suggest three color directions that break from typical SaaS patterns:

1. **Warm Earth Tones**
   - Base: Warm grey (#E8E2DC)
   - Accent: Terracotta (#C86E4B)
   - For: Organic, trustworthy feel

2. **Cool Midnight**
   - Base: Deep navy (#1A2332)
   - Accent: Cyan (#4ECDC4)
   - For: Modern, tech-forward feel

3. **Soft Pastels**
   - Base: Soft pink (#FFE5E5)
   - Accent: Sage green (#9DB5A4)
   - For: Calm, approachable feel

Which direction feels right for your brand?

应避免的常见模式

❌ 不要：

• 不考虑其他方案就使用通用的 SaaS 蓝色（#3B82F6）
• 默认使用阴影和渐变来营造层次感
• 照搬 Apple 的设计语言
• 使用玻璃拟态效果
• 未经询问就做出设计决策
• 未考虑字体版本就应用字体排印方案
• 使用会延迟用户操作的动画
• 创建元素相互争抢注意力的杂乱界面

✅ 应该：

• 在做出设计决策前先询问
• 建议独特且符合上下文的配色组合
• 使用扁平、简约的设计
• 考虑非传统的字体排印选择
• 为交互提供即时反馈
• 留出充足的留白
• 使用真实设备进行测试
• 验证无障碍性

版本历史

• v1.0.0（2025-10-18）：首次发布，提供全面的 UI/UX 设计指导

参考资料

如需了解更多背景信息，请参阅：

• WCAG 2.1 指南：https://www.w3.org/WAI/WCAG21/quickref/
• Google Fonts：https://fonts.google.com/
• Tailwind CSS 文档：https://tailwindcss.com/docs
• Shadcn UI 组件：https://ui.shadcn.com/