Loading...
Loading...
Compare original and translation side by side
EVENTS "Users are abandoning checkout"
↓
PATTERNS "This happens more on mobile, especially step 3"
↓
STRUCTURES "Step 3 requires address entry; mobile keyboard covers fields"
↓
MENTAL MODELS "We assumed users would complete this in one session"EVENTS "用户正在放弃结账流程"
↓
PATTERNS "这种情况在移动端出现更多，尤其是第3步"
↓
STRUCTURES "第3步需要填写地址，移动端键盘会遮挡输入框"
↓
MENTAL MODELS "我们默认用户会在单次会话中完成整个流程"| Domain | Characteristics | Approach |
|---|---|---|
| Clear | Obvious cause-effect | Apply best practices |
| Complicated | Multiple valid solutions | Analyse, then design |
| Complex | Cause-effect unclear | Probe with experiments |
| Chaotic | No discernible patterns | Stabilise first |
| 领域 | 特点 | 解决方法 |
|---|---|---|
| 清晰型 | 因果关系明确 | 应用最佳实践 |
| 复杂型 | 存在多个有效解决方案 | 先分析再设计 |
| 混沌型 | 因果关系不明确 | 通过小范围实验探索 |
| 混乱型 | 没有可识别的规律 | 先稳定局势再处理 |
| Dimension | Example (Password Manager) |
|---|---|
| Functional | Store and autofill passwords securely |
| Emotional | Feel confident I won't be hacked |
| Social | Look competent to IT department |
When [situation], I want to [motivation], so I can [expected outcome].
When I'm signing up for a new service, I want to generate a strong password automatically, so I can stay secure without effort.
| 维度 | 示例（密码管理器） |
|---|---|
| 功能维度 | 安全存储并自动填充密码 |
| 情感维度 | 不用担心被黑客攻击，有安全感 |
| 社会维度 | 在IT部门面前显得专业靠谱 |
当[场景]时，我想要[动机]，这样我就能[预期结果]。
当我注册新服务时，我想要自动生成强密码，这样我不用费力就能保证账号安全。
"What do I need to understand or communicate?"
│
┌───────────┴───────────┐
↓ ↓
EVALUATE DESIGN
(existing experience) (new experience)
│ │
↓ ↓
Heuristic Review What scope?
│
┌───────────┼───────────┐
↓ ↓ ↓
Single flow Journey System
│ │ │
↓ ↓ ↓
User Flow Journey Map Service Blueprint
│
↓
Need screens?
│
┌───────────┴───────────┐
↓ ↓
Yes No
↓ ↓
Wireframe Keep it conceptual"我需要理解或传递什么信息？"
│
┌───────────┴───────────┐
↓ ↓
评估现有体验 设计新体验
(existing experience) (new experience)
│ │
↓ ↓
启发式评估 设计范围是什么？
│
┌───────────┼───────────┐
↓ ↓ ↓
单一流程 用户旅程 系统层面
│ │ │
↓ ↓ ↓
用户流程图 用户旅程地图 服务蓝图
│
↓
需要输出界面吗？
│
┌───────────┴───────────┐
↓ ↓
是 否
↓ ↓
线框图 保留概念层面输出undefinedundefined
Use **Nielsen's 10 Heuristics** (see references/heuristics.md).
使用**尼尔森十大可用性原则**（参考 references/heuristics.md）。[Start]
│
↓
[Landing Page]─────→[Sign Up?]
│ │
│ (logged in) ↓
↓ [Registration]
[Dashboard] │
│ │
↓ │
[Search]←───────────────┘
│
↓
[Results]
│
├──→[Filter]──┐
│ │
↓ │
[Detail]←─────────┘
│
↓
[Add to Cart]
│
↓
[Checkout]
│
↓
[Confirmation]graph TD
A[Landing] --> B{Logged in?}
B -->|Yes| C[Dashboard]
B -->|No| D[Sign Up]
D --> C
C --> E[Search]
E --> F[Results]
F --> G[Detail]
G --> H[Add to Cart]
H --> I[Checkout]
I --> J[Confirmation][开始]
│
↓
[落地页]─────→[需要注册吗？]
│ │
│ (已登录) ↓
↓ [注册流程]
[控制面板] │
│ │
↓ │
[搜索]←───────────────┘
│
↓
[搜索结果]
│
├──→[筛选]──┐
│ │
↓ │
[详情页]←─────────┘
│
↓
[加入购物车]
│
↓
[结账]
│
↓
[确认页]graph TD
A[落地页] --> B{是否已登录？}
B -->|是| C[控制面板]
B -->|否| D[注册]
D --> C
C --> E[搜索]
E --> F[搜索结果]
F --> G[详情页]
G --> H[加入购物车]
H --> I[结账]
I --> J[确认页]undefinedundefined| Phase | Awareness | Consideration | Purchase | Onboarding | Use |
|---|---|---|---|---|---|
| Doing | Sees ad | Compares options | Enters payment | Creates account | Uses daily |
| Thinking | "What's this?" | "Is it worth it?" | "Will this work?" | "How do I start?" | "This saves time" |
| Feeling | Curious | Anxious | Hopeful | Overwhelmed | Satisfied |
| Touchpoints | Social ad | Website, reviews | Checkout | Email, app | App |
| Opportunities | Clearer value prop | Trust signals | Simpler checkout | Better onboarding | Feature discovery |
undefined| 阶段 | 认知期 | 考虑期 | 购买期 | 新手引导期 | 使用期 |
|---|---|---|---|---|---|
| 行为 | 看到广告 | 对比选项 | 输入支付信息 | 创建账号 | 日常使用 |
| 想法 | "这是什么？" | "它值这个价吗？" | "这个能用吗？" | "我该怎么开始？" | "这个太省时间了" |
| 感受 | 好奇 | 焦虑 | 期待 | 不知所措 | 满意 |
| 接触点 | 社交广告 | 官网、评价 | 结账流程 | 邮件、App | App |
| 优化机会 | 更清晰的价值主张 | 信任信号建设 | 简化结账流程 | 更好的新手引导 | 功能发现引导 |
undefinedundefinedundefined| Stage 1 | Stage 2 | Stage 3 |
|---|---|---|
| Website | Confirmation email | Physical product |
| 阶段1 | 阶段2 | 阶段3 |
|---|---|---|
| 官网 | 确认邮件 | 实物产品 |
undefinedundefined┌─────────────────────────────────────────────────┐
│ [Logo] [Nav 1] [Nav 2] [Nav 3] │
├─────────────────────────────────────────────────┤
│ │
│ Headline Text Here │
│ Supporting copy that explains │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Card 1 │ │ Card 2 │ │ Card 3 │ │
│ │ ------ │ │ ------ │ │ ------ │ │
│ │ text │ │ text │ │ text │ │
│ │ [CTA] │ │ [CTA] │ │ [CTA] │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ [ Primary Action ] │
│ │
├─────────────────────────────────────────────────┤
│ Footer | Links | Here │
└─────────────────────────────────────────────────┘
Annotations:
- Logo: Links to homepage
- Primary Action: 44px height, full contrast
- Cards: Equal height, responsive (1 col mobile, 3 col desktop)┌─────────────────────────────────────────────────┐
│ [Logo] [导航1] [导航2] [导航3] │
├─────────────────────────────────────────────────┤
│ │
│ 标题文字放在这里 │
│ 说明性辅助文字 │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 卡片1 │ │ 卡片2 │ │ 卡片3 │ │
│ │ ------ │ │ ------ │ │ ------ │ │
│ │ 文字内容 │ │ 文字内容 │ │ 文字内容 │ │
│ │ [行动按钮] │ │ [行动按钮] │ │ [行动按钮] │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ [ 主操作按钮 ] │
│ │
├─────────────────────────────────────────────────┤
│ 页脚 | 链接 | 这里 │
└─────────────────────────────────────────────────┘
注释:
- Logo: 跳转至首页
- 主操作按钮: 44px高, 全对比度
- 卡片: 等高, 响应式（移动端1列, 桌面端3列）python ~/.agents/skills/holistic-ux/scripts/contrast-check.py #333333 #ffffffreferences/mental-models.mdreferences/design-psychology.mdreferences/service-design.mdreferences/accessibility.mdreferences/patterns.mdreferences/heuristics.mdpython ~/.agents/skills/holistic-ux/scripts/contrast-check.py #333333 #ffffffreferences/mental-models.mdreferences/design-psychology.mdreferences/service-design.mdreferences/accessibility.mdreferences/patterns.mdreferences/heuristics.md