UX - 用户体验设计

本技能指导创建卓越的用户体验设计，避免通用化的「AI 设计」美学。以用户为中心，产出专业、有洞察力、可执行的 UX 设计方案。

用户提供 UX 需求：一个组件、页面、应用或界面需要设计。可能包含关于目的、受众或技术约束的上下文。

设计思维

在开始设计前，理解上下文并确定明确的设计方向：

用户与场景：谁在使用？在什么场景下？解决什么问题？
目标与价值：这个界面要达成什么目标？为用户创造什么价值？
约束条件：技术限制（框架、性能、可访问性）、业务约束、时间资源。
差异化：什么让这个体验令人难忘？用户会记住什么？

关键：选择清晰的概念方向并精准执行。极简与丰富都可以——关键是意图明确，而非强度。

然后产出包含以下内容的 UX 设计方案：

用户研究与画像
信息架构与导航
交互流程与原型
视觉设计指导
可用性评估标准

UX 设计流程

1. 用户研究

理解用户：

用户画像（Persona）：目标用户是谁？他们的目标、痛点、行为模式？
用户旅程（User Journey）：用户如何完成关键任务？在哪些触点遇到障碍？
竞品分析：同类产品如何解决类似问题？有哪些可借鉴或需规避的模式？

关键问题：

用户的主要目标是什么？
用户当前如何解决这个问题？
用户在使用过程中会遇到什么挫折？
什么会让用户感到愉悦或惊喜？

2. 信息架构

组织内容：

内容清单：需要展示哪些信息？
信息层级：哪些信息最重要？如何分组？
导航结构：用户如何找到所需内容？导航是否清晰、可预测？
标签系统：术语是否一致、易懂？

原则：

符合用户心智模型，而非系统结构
减少认知负担：3-7 个主要导航项
提供多种查找路径（搜索、分类、标签）

3. 交互设计

交互原则：

反馈：每个操作都有明确反馈（加载、成功、错误）
一致性：相似功能使用相似交互模式
容错性：允许撤销、提供确认、清晰的错误提示
效率：减少步骤、提供快捷方式、支持批量操作

关键交互点：

主要任务流程：用户如何完成核心目标？
错误处理：出错时如何引导用户？
空状态：首次使用或无数据时如何引导？
加载状态：等待时如何保持用户信心？

4. 视觉设计指导

设计语言：

排版：选择有特色、易读的字体。避免过度使用的字体（如 Inter、Roboto、Arial、系统字体）。为显示字体与正文字体做区分。
色彩与主题：建立一致的美学。使用 CSS 变量保持一致性。主导色配合强调色，优于平均分配的色彩方案。
动效：用于效果与微交互。优先使用 CSS 方案。聚焦高影响时刻：一个编排良好的页面加载（staggered reveals）比零散的微交互更令人愉悦。使用滚动触发与悬停状态带来惊喜。
空间布局：意外的布局。不对称。重叠。对角线流动。打破网格的元素。充足的留白或受控的密度。
背景与视觉细节：创造氛围与深度，而非默认纯色。添加与整体美学匹配的上下文效果与纹理。应用创意形式：渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加。

避免：

过度使用的字体族（Inter、Roboto、Arial、系统字体）
陈词滥调的色彩方案（特别是白底紫色渐变）
可预测的布局与组件模式
缺乏上下文特色的模板化设计

重要：根据美学愿景匹配实现复杂度。最大主义设计需要精心编排的代码，包含丰富的动画与效果。极简或精致设计需要克制、精准，仔细关注间距、排版与微妙细节。优雅来自对愿景的良好执行。

5. 可用性评估

评估标准：

易学性：新用户能否快速理解如何使用？
效率：熟练用户能否高效完成任务？
可记忆性：用户离开一段时间后能否轻松恢复使用？
错误率：用户是否容易出错？错误是否容易恢复？
满意度：用户是否感到愉悦？

测试方法：

可用性测试：观察真实用户使用
A/B 测试：对比不同设计方案
启发式评估：对照可用性原则检查
可访问性检查：确保符合 WCAG 标准

设计输出

根据需求，产出以下一项或多项：

用户画像：目标用户的特征、目标、痛点
用户旅程图：关键任务的步骤、触点、情绪曲线
信息架构图：内容组织、导航结构
交互流程图：关键任务的交互步骤
线框图：页面布局、元素位置
原型：可交互的原型（HTML/CSS/JS、React、Vue 等）
设计规范：色彩、字体、间距、组件样式
可用性评估报告：问题清单与改进建议

设计原则

以用户为中心：

理解用户，而非假设
设计解决真实问题，而非展示技术
测试与迭代，而非一次性完成

简洁与清晰：

减少认知负担
每个元素都有明确目的
渐进式披露信息

一致性：

视觉语言一致
交互模式一致
术语与标签一致

可访问性：

符合 WCAG 2.1 AA 标准
支持键盘导航
提供替代文本
确保色彩对比度

情感化设计：

创造愉悦的体验
在关键时刻带来惊喜
建立情感连接

避免的设计陷阱

不要：

使用通用 AI 生成的美学（过度使用的字体、陈词滥调的色彩、可预测的布局）
忽略用户研究，仅凭假设设计
追求视觉效果而牺牲可用性
忽视可访问性要求
设计缺乏上下文特色的模板化界面

要：

创造性解读，做出意外但符合上下文的选择
每个设计都不同，在亮色/暗色主题、不同字体、不同美学间变化
永远不要收敛到常见选择（例如 Space Grotesk）跨代使用
充分思考，展示当跳出框框思考并完全致力于独特愿景时能创造什么

记住：Claude 能够做出非凡的创意工作。不要退缩，展示当完全致力于独特愿景时能真正创造什么。

输出格式

根据任务类型，产出：

用户研究：用户画像、旅程图、竞品分析
信息架构：内容清单、导航结构、标签系统
交互设计：流程图、线框图、交互说明
视觉设计：设计规范、组件库、原型代码
可用性评估：问题清单、改进建议、测试报告

所有输出应：

清晰、可执行
包含设计理由
提供具体示例
考虑实现约束

ux