Back to Details

ux-principles

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UX Principles Skill

UX原则技能

When to Use This Skill

何时使用此技能

Apply this skill when you need to:
  • Design User-Centered Interfaces: Create products that prioritize user needs and behaviors
  • Conduct User Research: Plan and execute qualitative and quantitative research studies
  • Evaluate Usability: Assess interfaces using established heuristics and testing methods
  • Ensure Accessibility: Design inclusive experiences that work for users with diverse abilities
  • Optimize User Flows: Improve task completion rates and reduce friction in user journeys
  • Measure UX Performance: Define and track meaningful metrics for user experience quality
  • Apply Design Thinking: Solve complex problems through human-centered design processes
  • Create Information Architecture: Organize content in ways that match user mental models
  • Run Usability Testing: Plan, conduct, and analyze user testing sessions
  • Build Personas and Journey Maps: Document user behaviors, needs, and pain points
在以下场景中应用此技能：
  • 设计以用户为中心的界面：打造优先考虑用户需求与行为的产品
  • 开展用户研究：规划并执行定性与定量研究项目
  • 评估可用性：运用既定的启发法与测试方法评估界面
  • 确保可访问性：设计适配不同能力用户的包容性体验
  • 优化用户流程：提升任务完成率，减少用户旅程中的摩擦
  • 衡量UX性能：定义并追踪用户体验质量的关键指标
  • 应用设计思维：通过以人为本的设计流程解决复杂问题
  • 构建信息架构：以符合用户心智模型的方式组织内容
  • 开展可用性测试：规划、执行并分析用户测试会话
  • 创建用户角色与旅程地图：记录用户行为、需求与痛点

Core Concepts

核心概念

User-Centered Design (UCD)

以用户为中心的设计（UCD）

User-centered design is a framework that places users at the center of the design process through iterative cycles of research, design, testing, and refinement.
Four Fundamental Principles:
  1. Early Focus on Users and Tasks
    • Understand user characteristics, needs, and goals before designing
    • Observe users in their natural environment
    • Identify tasks users need to accomplish
    • Map current workflows and pain points
  2. Empirical Measurement
    • Test designs with real users performing real tasks
    • Collect quantitative and qualitative data
    • Use objective metrics (task completion, time, errors)
    • Gather subjective feedback (satisfaction, preferences)
  3. Iterative Design
    • Design, test, measure, and redesign in cycles
    • Start with low-fidelity prototypes
    • Refine based on user feedback
    • Continuously improve until goals are met
  4. Integrated Design
    • Consider the entire user experience holistically
    • Balance user needs, business goals, and technical constraints
    • Involve multidisciplinary teams
    • Design for consistency across touchpoints
以用户为中心的设计是一个通过研究、设计、测试与迭代循环，将用户置于设计流程核心的框架。
四大基本原则：
  1. 早期聚焦用户与任务
    • 在设计前理解用户特征、需求与目标
    • 在用户的自然环境中观察他们
    • 识别用户需要完成的任务
    • 绘制当前工作流程与痛点
  2. 实证测量
    • 让真实用户执行真实任务来测试设计
    • 收集定量与定性数据
    • 使用客观指标（任务完成率、耗时、错误率）
    • 收集主观反馈（满意度、偏好）
  3. 迭代设计
    • 按循环进行设计、测试、衡量与重新设计
    • 从低保真原型开始
    • 根据用户反馈优化
    • 持续改进直至达成目标
  4. 整合设计
    • 全面考量整个用户体验
    • 平衡用户需求、业务目标与技术约束
    • 跨职能团队协作
    • 确保所有触点的一致性

Design Thinking

设计思维

Design thinking is a human-centered approach to innovation that integrates user needs, technological possibilities, and business viability.
Five-Stage Process:
  1. Empathize: Understand users through research and observation
  2. Define: Synthesize findings into clear problem statements
  3. Ideate: Generate diverse solutions through brainstorming
  4. Prototype: Build tangible representations of ideas
  5. Test: Gather feedback and refine solutions
Key Principles:
  • Focus on human values and needs
  • Show don't tell (use prototypes)
  • Create clarity from complexity
  • Get experimental and take risks
  • Be mindful of process and bias toward action
  • Radical collaboration across disciplines
设计思维是一种以人为本的创新方法，整合了用户需求、技术可能性与商业可行性。
五阶段流程：
  1. 共情：通过研究与观察理解用户
  2. 定义：将研究结果提炼为清晰的问题陈述
  3. 构思：通过头脑风暴生成多样化解决方案
  4. 原型制作：构建想法的有形呈现
  5. 测试：收集反馈并优化解决方案
核心原则：
  • 聚焦人类价值与需求
  • 展示而非讲述（使用原型）
  • 从复杂性中创造清晰性
  • 勇于实验与冒险
  • 关注流程并偏向行动
  • 跨学科深度协作

Usability Heuristics

可用性启发法

Nielsen's 10 Usability Heuristics

尼尔森十大可用性启发法

Jakob Nielsen's heuristics are foundational principles for evaluating interface usability.
雅各布·尼尔森的启发法是评估界面可用性的基础原则。

1. Visibility of System Status

1. 系统状态可见性

Principle: The system should always keep users informed about what is going on through appropriate feedback within reasonable time.
Guidelines:
  • Provide immediate feedback for user actions
  • Use progress indicators for operations taking >1 second
  • Show system state clearly (loading, processing, saved)
  • Display current location in navigation
  • Indicate selected items, active states, and modes
Examples:
  • Loading spinners during data fetches
  • "Saving..." then "Saved" confirmations
  • Progress bars for uploads/downloads
  • Breadcrumb navigation showing current page
  • Highlighted active tab or menu item
原则：系统应始终通过合理时间内的适当反馈，让用户了解当前状态。
指南：
  • 为用户操作提供即时反馈
  • 对耗时超过1秒的操作使用进度指示器
  • 清晰显示系统状态（加载中、处理中、已保存）
  • 显示导航中的当前位置
  • 标记选中项、激活状态与模式
示例：
  • 数据获取时的加载动画
  • "保存中..."随后显示"已保存"的确认提示
  • 上传/下载的进度条
  • 显示当前页面的面包屑导航
  • 高亮显示的活动标签或菜单项

2. Match Between System and Real World

2. 系统与真实世界的匹配

Principle: The system should speak the users' language, using words, phrases, and concepts familiar to them rather than system-oriented terms.
Guidelines:
  • Use terminology from the user's domain
  • Follow real-world conventions
  • Present information in natural, logical order
  • Use metaphors that match user mental models
  • Avoid jargon, acronyms, and technical language
Examples:
  • Shopping cart icon for e-commerce
  • Trash/recycle bin for deleted items
  • Folders for file organization
  • "Inbox" instead of "Message Queue"
  • Date formats matching user's locale
原则：系统应使用用户熟悉的语言、词汇与概念，而非面向系统的术语。
指南：
  • 使用用户领域的术语
  • 遵循现实世界的惯例
  • 以自然、逻辑的顺序呈现信息
  • 使用符合用户心智模型的隐喻
  • 避免行话、缩写与技术术语
示例：
  • 电商中的购物车图标
  • 用于删除项目的回收站图标
  • 用于文件组织的文件夹
  • 使用"收件箱"而非"消息队列"
  • 匹配用户区域设置的日期格式

3. User Control and Freedom

3. 用户控制与自由

Principle: Users often choose system functions by mistake and need a clearly marked "emergency exit" to leave unwanted states without going through an extended dialogue.
Guidelines:
  • Provide undo and redo functionality
  • Allow users to cancel operations
  • Enable easy navigation backward and forward
  • Support escape from modal states
  • Make exit options obvious
Examples:
  • Undo/redo buttons in editors
  • Cancel button on forms
  • Back button in navigation
  • "X" to close modals and overlays
  • Ctrl+Z keyboard shortcut
原则：用户常误选系统功能，需要清晰标记的"紧急出口"，无需冗长对话即可退出不想要的状态。
指南：
  • 提供撤销与重做功能
  • 允许用户取消操作
  • 支持轻松的前后导航
  • 提供从模态状态退出的途径
  • 让退出选项显而易见
示例：
  • 编辑器中的撤销/重做按钮
  • 表单上的取消按钮
  • 导航中的返回按钮
  • 关闭模态框与浮层的"X"按钮
  • Ctrl+Z键盘快捷键

4. Consistency and Standards

4. 一致性与标准

Principle: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Guidelines:
  • Use consistent terminology throughout
  • Maintain visual consistency (colors, fonts, spacing)
  • Follow platform conventions (iOS, Android, Web)
  • Use standard UI patterns and components
  • Create and follow a design system
Examples:
  • Blue underlined text for links
  • Submit buttons on the right, Cancel on the left
  • Search icon as magnifying glass
  • Settings gear/cog icon
  • Consistent button styles and behaviors
原则：用户不应疑惑不同的文字、场景或操作是否具有相同含义。遵循平台与行业惯例。
指南：
  • 全程使用一致的术语
  • 保持视觉一致性（颜色、字体、间距）
  • 遵循平台惯例（iOS、Android、Web）
  • 使用标准UI模式与组件
  • 创建并遵循设计系统
示例：
  • 蓝色下划线文本表示链接
  • 提交按钮在右侧，取消按钮在左侧
  • 放大镜图标表示搜索
  • 齿轮图标表示设置
  • 一致的按钮样式与行为

5. Error Prevention

5. 错误预防

Principle: Even better than good error messages is careful design that prevents problems from occurring in the first place.
Guidelines:
  • Eliminate error-prone conditions
  • Use constraints and validation
  • Provide helpful defaults
  • Ask for confirmation before destructive actions
  • Design for forgiving interactions
Examples:
  • Date pickers instead of text input
  • Disabling invalid options
  • Inline form validation
  • "Are you sure?" confirmations for delete
  • Auto-save functionality
原则：比优秀错误提示更好的是通过精心设计从根源避免问题。
指南：
  • 消除易出错的条件
  • 使用约束与验证
  • 提供有用的默认值
  • 在执行破坏性操作前要求确认
  • 设计容错交互
示例：
  • 日期选择器而非文本输入
  • 禁用无效选项
  • 内联表单验证
  • 删除操作前的"确定要删除吗？"确认
  • 自动保存功能

6. Recognition Rather Than Recall

6. 识别而非回忆

Principle: Minimize the user's memory load by making objects, actions, and options visible. Users should not have to remember information from one part of the dialogue to another.
Guidelines:
  • Make options and actions visible
  • Show recently used items
  • Display context and helpful information
  • Use visual aids and previews
  • Provide tooltips and inline help
Examples:
  • Autocomplete in search boxes
  • Recently opened files list
  • Visible menu items vs. hidden commands
  • Color palette showing available colors
  • Form field placeholders with examples
原则：通过让对象、操作与选项可见，最小化用户的记忆负担。用户无需从对话的一部分回忆信息到另一部分。
指南：
  • 让选项与操作可见
  • 显示最近使用的项目
  • 提供上下文与有用信息
  • 使用视觉辅助与预览
  • 提供工具提示与内联帮助
示例：
  • 搜索框中的自动完成
  • 最近打开的文件列表
  • 可见菜单项而非隐藏命令
  • 显示可用颜色的调色板
  • 带示例的表单字段占位符

7. Flexibility and Efficiency of Use

7. 使用的灵活性与效率

Principle: Accelerators—unseen by novice users—may speed up interaction for expert users, allowing the system to cater to both inexperienced and experienced users.
Guidelines:
  • Provide keyboard shortcuts for power users
  • Allow customization and personalization
  • Support multiple ways to accomplish tasks
  • Offer both simple and advanced features
  • Enable bulk operations and automation
Examples:
  • Keyboard shortcuts (Ctrl+C, Ctrl+V)
  • Quick actions and gestures
  • Advanced search filters
  • Customizable toolbars
  • Templates and saved preferences
原则：新手用户看不到的快捷方式，可加速专家用户的交互，让系统同时满足经验不足与经验丰富的用户。
指南：
  • 为高级用户提供键盘快捷键
  • 允许自定义与个性化
  • 支持多种完成任务的方式
  • 同时提供简单与高级功能
  • 支持批量操作与自动化
示例：
  • 键盘快捷键（Ctrl+C、Ctrl+V）
  • 快速操作与手势
  • 高级搜索筛选器
  • 可自定义的工具栏
  • 模板与保存的偏好设置

8. Aesthetic and Minimalist Design

8. 美学与极简设计

Principle: Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information competes with relevant units and diminishes their visibility.
Guidelines:
  • Keep content focused and relevant
  • Remove unnecessary elements
  • Use white space effectively
  • Prioritize information hierarchy
  • Progressive disclosure for advanced features
Examples:
  • Clean, uncluttered interfaces
  • Collapsible sections for details
  • Focus on primary actions
  • Minimal decoration and ornamentation
  • Clear visual hierarchy
原则：对话不应包含无关或极少使用的信息。每一个额外的信息单元都会与相关单元竞争，降低其可见性。
指南：
  • 保持内容聚焦且相关
  • 移除不必要的元素
  • 有效使用留白
  • 优先考虑信息层级
  • 高级功能采用渐进式披露
示例：
  • 简洁、整洁的界面
  • 可折叠的详情部分
  • 聚焦主要操作
  • 极少的装饰元素
  • 清晰的视觉层级

9. Help Users Recognize, Diagnose, and Recover from Errors

9. 帮助用户识别、诊断并从错误中恢复

Principle: Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.
Guidelines:
  • Write clear, human-readable error messages
  • Explain what went wrong and why
  • Suggest specific solutions
  • Use appropriate visual indicators (color, icons)
  • Avoid technical codes and jargon
Examples:
  • "Email address is required" vs. "Error 422"
  • Highlighting the field with the error
  • Suggestions: "Did you mean gmail.com?"
  • Specific guidance: "Password must be at least 8 characters"
  • Recovery actions: "Try again" or "Reset password"
原则：错误提示应使用通俗易懂的语言，准确指出问题，并建设性地建议解决方案。
指南：
  • 编写清晰、易懂的错误提示
  • 解释问题是什么及原因
  • 建议具体解决方案
  • 使用适当的视觉指示器（颜色、图标）
  • 避免技术代码与行话
示例：
  • "需要填写邮箱地址"而非"错误422"
  • 高亮显示有错误的字段
  • 建议："您是不是想输入gmail.com？"
  • 具体指导："密码至少需要8个字符"
  • 恢复操作："重试"或"重置密码"

10. Help and Documentation

10. 帮助与文档

Principle: Even though it's better if the system can be used without documentation, it may be necessary to provide help. Such information should be easy to search, focused on the user's task, and list concrete steps.
Guidelines:
  • Make help easily accessible
  • Provide context-sensitive help
  • Use clear, concise language
  • Include visual examples
  • Enable searching and browsing
Examples:
  • Question mark icons for contextual help
  • Interactive tutorials and walkthroughs
  • Searchable knowledge base
  • Video demonstrations
  • FAQ sections organized by task
原则：尽管最好无需文档即可使用系统，但必要时需提供帮助信息。这些信息应易于搜索，聚焦用户任务，并列出具体步骤。
指南：
  • 让帮助易于获取
  • 提供上下文相关的帮助
  • 使用清晰、简洁的语言
  • 包含视觉示例
  • 支持搜索与浏览
示例：
  • 用于上下文帮助的问号图标
  • 交互式教程与引导
  • 可搜索的知识库
  • 视频演示
  • 按任务组织的FAQ部分

Gestalt Principles in UI Design

UI设计中的格式塔原则

Gestalt principles describe how humans perceive visual elements as organized patterns rather than separate components.
Key Principles:
  1. Proximity: Elements close together are perceived as related
    • Group related form fields
    • Space navigation items by category
    • Cluster related content blocks
  2. Similarity: Similar elements are perceived as part of a group
    • Use consistent styling for related actions
    • Match colors for similar functionality
    • Apply uniform shapes to category items
  3. Continuity: Elements arranged on a line or curve are perceived as related
    • Align form labels and inputs
    • Create visual flow with layouts
    • Use lines to connect related items
  4. Closure: Humans complete incomplete shapes in their minds
    • Use subtle borders or backgrounds
    • Implied boundaries for cards
    • Negative space to define areas
  5. Figure/Ground: Elements are perceived as either foreground or background
    • Use contrast to emphasize primary content
    • Blur backgrounds for modal focus
    • Layer elements with depth
格式塔原则描述了人类如何将视觉元素感知为有组织的模式，而非单独的组件。
核心原则：
  1. 接近性：靠近的元素会被感知为相关
    • 对相关表单字段进行分组
    • 按类别为导航项设置间距
    • 对相关内容块进行聚类
  2. 相似性：相似的元素会被感知为同一组
    • 对相关操作使用一致的样式
    • 为相似功能匹配颜色
    • 为类别项目应用统一的形状
  3. 连续性：排列在直线或曲线上的元素会被感知为相关
    • 对齐表单标签与输入框
    • 用布局创建视觉流
    • 用线条连接相关项目
  4. 封闭性：人类会在脑海中补全不完整的形状
    • 使用微妙的边框或背景
    • 卡片的隐含边界
    • 用负空间定义区域
  5. 图形/背景：元素会被感知为前景或背景
    • 使用对比强调主要内容
    • 为模态框模糊背景以聚焦
    • 用深度分层元素

User Psychology

用户心理学

Cognitive Load

认知负荷

Cognitive load refers to the amount of mental effort required to use an interface. Reducing cognitive load improves usability and user satisfaction.
Types of Cognitive Load:
  1. Intrinsic Load: Inherent complexity of the task
    • Cannot be eliminated, only managed
    • Break complex tasks into smaller steps
    • Provide scaffolding and support
  2. Extraneous Load: Unnecessary mental effort from poor design
    • Can and should be eliminated
    • Caused by confusing layouts, unclear labels, inconsistency
    • Reduce through good UX practices
  3. Germane Load: Effort required to learn and internalize patterns
    • Beneficial cognitive load
    • Supports skill development and mastery
    • Invest in onboarding and progressive learning
Strategies to Reduce Cognitive Load:
  • Chunking: Group related information (phone numbers: 123-456-7890)
  • Recognition over Recall: Show options instead of requiring memory
  • Progressive Disclosure: Reveal complexity gradually
  • Defaults: Provide sensible pre-selections
  • Visual Hierarchy: Guide attention to important elements
  • Familiar Patterns: Use known conventions and metaphors
  • Clear Labels: Use descriptive, unambiguous text
  • Minimize Choices: Apply Hick's Law (more options = longer decision time)
认知负荷指使用界面所需的脑力劳动量。降低认知负荷可提升可用性与用户满意度。
认知负荷类型：
  1. 内在负荷：任务固有的复杂性
    • 无法消除，只能管理
    • 将复杂任务拆分为更小的步骤
    • 提供支架与支持
  2. 外在负荷：不良设计导致的不必要脑力劳动
    • 可以且应该消除
    • 由混乱的布局、不清晰的标签、不一致性引起
    • 通过良好的UX实践减少
  3. 关联负荷：学习与内化模式所需的努力
    • 有益的认知负荷
    • 支持技能发展与精通
    • 投入到引导与渐进式学习中
降低认知负荷的策略：
  • 分块：将相关信息分组（电话号码：123-456-7890）
  • 识别而非回忆：显示选项而非要求记忆
  • 渐进式披露：逐步揭示复杂性
  • 默认值：提供合理的预选值
  • 视觉层级：引导注意力到重要元素
  • 熟悉的模式：使用已知的惯例与隐喻
  • 清晰的标签：使用描述性、明确的文本
  • 最小化选择：应用希克定律（选项越多，决策时间越长）

Mental Models

心智模型

A mental model is a user's internal representation of how something works. Effective UX design aligns with user mental models.
Understanding Mental Models:
  • Formed through prior experience and learning
  • May not match actual system implementation
  • Vary across different user groups
  • Influence expectations and predictions
  • Drive user behavior and decisions
Designing for Mental Models:
  1. Research User Expectations
    • Conduct user interviews
    • Observe task completion attempts
    • Ask users to predict outcomes
    • Map user workflows
  2. Match or Teach
    • Align design with existing mental models when possible
    • When innovation required, teach new models explicitly
    • Use familiar metaphors as bridges
    • Provide clear conceptual models
  3. Test Assumptions
    • Validate mental model alignment through testing
    • Identify mismatches and confusion points
    • Iterate to improve alignment
    • Document common misconceptions
Common Mental Model Mismatches:
  • File systems vs. search-based organization
  • Hierarchical navigation vs. networked information
  • Linear processes vs. flexible workflows
  • Technical accuracy vs. user understanding
心智模型是用户对事物运作方式的内部表示。有效的UX设计需与用户心智模型对齐。
理解心智模型：
  • 通过先前经验与学习形成
  • 可能与实际系统实现不匹配
  • 在不同用户群体中存在差异
  • 影响期望与预测
  • 驱动用户行为与决策
针对心智模型的设计：
  1. 研究用户期望
    • 开展用户访谈
    • 观察任务完成尝试
    • 询问用户对结果的预测
    • 绘制用户工作流程
  2. 匹配或引导
    • 尽可能让设计与现有心智模型对齐
    • 当需要创新时，明确引导新模型
    • 使用熟悉的隐喻作为桥梁
    • 提供清晰的概念模型
  3. 验证假设
    • 通过测试验证心智模型的对齐情况
    • 识别不匹配与混淆点
    • 迭代以提升对齐度
    • 记录常见误解
常见心智模型不匹配：
  • 文件系统 vs. 基于搜索的组织
  • 层级导航 vs. 网络化信息
  • 线性流程 vs. 灵活工作流
  • 技术准确性 vs. 用户理解

Affordances and Signifiers

可供性与符号

Affordances: Properties of an object that show what actions can be performed with it.
  • Perceived affordances matter more than actual affordances in UI
  • Buttons afford clicking through their appearance
  • Text fields afford typing through cursor changes
  • Sliders afford dragging through visible handles
Signifiers: Cues that communicate where action should take place.
  • Visual indicators of affordances
  • Underlines on links (signify clickability)
  • Pointer cursor change (signify interaction)
  • Button shading and borders (signify pressability)
  • Drag handles (signify movability)
Design Implications:
  • Make interactive elements look interactive
  • Provide visual feedback on hover and focus
  • Use consistent signifiers throughout interface
  • Don't make non-interactive elements look clickable
  • Test with users to validate perceived affordances
可供性：对象的属性，表明可对其执行的操作。
  • 在UI中，感知到的可供性比实际可供性更重要
  • 按钮通过外观暗示可点击
  • 文本框通过光标变化暗示可输入
  • 滑块通过可见的手柄暗示可拖动
符号：提示用户应在何处执行操作的线索。
  • 可供性的视觉指示器
  • 链接上的下划线（表示可点击）
  • 指针光标变化（表示可交互）
  • 按钮的阴影与边框（表示可按压）
  • 拖动手柄（表示可移动）
设计启示：
  • 让交互元素看起来具有交互性
  • 在悬停与聚焦时提供视觉反馈
  • 在整个界面中使用一致的符号
  • 不要让非交互元素看起来可点击
  • 与用户测试以验证感知到的可供性

Fitts's Law

菲茨定律

Principle: The time to acquire a target is a function of the distance to and size of the target.
Formula: T = a + b × log₂(D/W + 1)
  • T = time to move to target
  • D = distance to target
  • W = width of target
  • a, b = empirically determined constants
UI Design Applications:
  1. Large Targets: Make clickable elements bigger
    • Minimum touch target: 44×44 pixels (Apple), 48×48 pixels (Android)
    • Larger buttons for primary actions
    • Expand hover areas beyond visible boundaries
  2. Proximity: Place related items close together
    • Position tooltips near triggers
    • Keep form labels adjacent to inputs
    • Group related actions in toolbars
  3. Edge Cases: Screen edges are easy targets (infinite width)
    • macOS menu bar at top edge
    • Windows start button at bottom corner
    • Mobile navigation at screen bottom
  4. Context Menus: Appear at cursor location
    • Zero distance to travel
    • Faster than menu bar navigation
    • Right-click or long-press patterns
原则：获取目标的时间是目标距离与大小的函数。
公式：T = a + b × log₂(D/W + 1)
  • T = 移动到目标的时间
  • D = 到目标的距离
  • W = 目标的宽度
  • a, b = 经验确定的常数
UI设计应用：
  1. 大目标：让可点击元素更大
    • 最小触摸目标：44×44像素（Apple），48×48像素（Android）
    • 主要操作使用更大的按钮
    • 扩展悬停区域超出可见边界
  2. 接近性：将相关项目放在一起
    • 将工具提示放在触发元素附近
    • 保持表单标签与输入框相邻
    • 在工具栏中分组相关操作
  3. 边缘情况：屏幕边缘是容易命中的目标（宽度无限）
    • macOS顶部的菜单栏
    • Windows底部角落的开始按钮
    • 屏幕底部的移动导航
  4. 上下文菜单：出现在光标位置
    • 无需移动距离
    • 比菜单栏导航更快
    • 右键单击或长按模式

Hick's Law

希克定律

Principle: The time it takes to make a decision increases logarithmically with the number of choices.
Formula: T = b × log₂(n + 1)
  • T = time to make decision
  • n = number of choices
  • b = empirically determined constant
Design Implications:
  1. Reduce Options: Show only necessary choices
    • Progressive disclosure for advanced options
    • Smart defaults to eliminate decisions
    • Remove rarely used features
  2. Categorize: Group options into logical categories
    • Mega menus with organized sections
    • Filters and facets for narrowing
    • Stepped navigation (breadth vs. depth)
  3. Prioritize: Highlight recommended or popular options
    • "Most popular" indicators
    • "Recommended for you" suggestions
    • Default selections for common choices
  4. Context: Show relevant options for current task
    • Contextual menus based on selection
    • Adaptive interfaces based on usage
    • Role-based views and permissions
原则：做出决策的时间会随选择数量的增加而对数增长。
公式：T = b × log₂(n + 1)
  • T = 做出决策的时间
  • n = 选择数量
  • b = 经验确定的常数
设计启示：
  1. 减少选项：仅显示必要的选择
    • 高级选项采用渐进式披露
    • 智能默认值以消除决策
    • 移除极少使用的功能
  2. 分类：将选项分为逻辑类别
    • 带有组织化部分的巨型菜单
    • 用于缩小范围的筛选器与分面
    • 分步导航（广度vs深度）
  3. 优先排序：突出推荐或热门选项
    • "最受欢迎"标识
    • "为您推荐"建议
    • 常见选择的默认选项
  4. 上下文：显示与当前任务相关的选项
    • 基于选择的上下文菜单
    • 基于使用情况的自适应界面
    • 基于角色的视图与权限

Miller's Law

米勒定律

Principle: The average person can hold 7 (±2) items in working memory.
Design Applications:
  1. Chunk Information: Group content into 5-9 items
    • Navigation menu items
    • Dashboard widgets
    • List items before requiring scrolling
  2. Break Down Complex Tasks: Divide into steps
    • Multi-step forms with progress indicators
    • Wizards for complex configurations
    • Onboarding flows with clear stages
  3. Use Visual Aids: Reduce memory requirements
    • Icons alongside text labels
    • Color coding for categories
    • Visual grouping of related items
  4. Provide References: Make information available
    • Tooltips for additional context
    • Inline help and examples
    • Summary views of previous inputs
原则：普通人的工作记忆可容纳7±2个项目。
设计应用：
  1. 分块信息：将内容分为5-9个项目
    • 导航菜单项
    • 仪表板小部件
    • 需要滚动前的列表项
  2. 拆分复杂任务：分为多个步骤
    • 带进度指示器的多步骤表单
    • 用于复杂配置的向导
    • 具有清晰阶段的引导流程
  3. 使用视觉辅助：减少记忆需求
    • 文本标签旁的图标
    • 类别的颜色编码
    • 相关项目的视觉分组
  4. 提供参考：让信息易于获取
    • 用于额外上下文的工具提示
    • 内联帮助与示例
    • 先前输入的摘要视图

User Research

用户研究

Research Methods Overview

研究方法概述

Qualitative Methods: Explore motivations, behaviors, and mental models
  • User interviews
  • Contextual inquiry
  • Focus groups
  • Diary studies
  • Think-aloud protocols
Quantitative Methods: Measure behaviors and validate hypotheses
  • Surveys and questionnaires
  • Analytics and metrics
  • A/B testing
  • Card sorting (with statistical analysis)
  • Tree testing
定性方法：探索动机、行为与心智模型
  • 用户访谈
  • 情境调查
  • 焦点小组
  • 日记研究
  • 出声思考协议
定量方法：衡量行为并验证假设
  • 调查与问卷
  • 分析与指标
  • A/B测试
  • 卡片分类（含统计分析）
  • 树测试

User Interviews

用户访谈

Purpose: Deep understanding of user needs, goals, behaviors, and pain points.
Best Practices:
  1. Preparation
    • Define research questions and objectives
    • Create discussion guide (not rigid script)
    • Recruit representative participants (5-8 per user segment)
    • Choose appropriate setting (user's environment often best)
  2. During Interviews
    • Build rapport and trust
    • Ask open-ended questions
    • Use "5 Whys" technique to dig deeper
    • Observe behavior and environment
    • Avoid leading questions
    • Listen more than talk (80/20 rule)
  3. Question Types
    • Background: "Tell me about your role..."
    • Behavior: "Walk me through how you currently..."
    • Pain points: "What's frustrating about..."
    • Goals: "What are you trying to accomplish..."
    • Workarounds: "How do you handle it when..."
  4. Analysis
    • Transcribe or take detailed notes
    • Identify patterns across participants
    • Extract quotes for personas and presentations
    • Synthesize findings into themes
    • Validate with stakeholders
目的：深入理解用户需求、目标、行为与痛点。
最佳实践：
  1. 准备
    • 定义研究问题与目标
    • 创建讨论指南（非严格脚本）
    • 招募代表性参与者（每个用户群体5-8人）
    • 选择合适的环境（用户的自然环境通常最佳）
  2. 访谈期间
    • 建立融洽与信任
    • 提出开放式问题
    • 使用"5个为什么"技术深入挖掘
    • 观察行为与环境
    • 避免引导性问题
    • 多听少说（80/20法则）
  3. 问题类型
    • 背景："告诉我你的角色..."
    • 行为："带我过一遍你当前如何..."
    • 痛点："...有什么让你感到沮丧的地方？"
    • 目标："你试图完成什么..."
    • 变通方法："当...时你如何处理？"
  4. 分析
    • 转录或做详细笔记
    • 识别参与者之间的模式
    • 提取用于用户角色与演示的引用
    • 将发现提炼为主题
    • 与利益相关者验证

Surveys and Questionnaires

调查与问卷

Purpose: Gather quantitative data from larger samples to measure attitudes, behaviors, and preferences.
Design Principles:
  1. Question Design
    • Use clear, unambiguous language
    • Avoid double-barreled questions
    • Use balanced scales (Likert: 1-5 or 1-7)
    • Include "prefer not to answer" options
    • Randomize answer order to reduce bias
  2. Survey Structure
    • Start with easy, engaging questions
    • Group related questions together
    • Place demographics at the end
    • Keep surveys as short as possible
    • Show progress indicator for longer surveys
  3. Question Types
    • Multiple choice (single select)
    • Checkboxes (multiple select)
    • Rating scales (satisfaction, agreement)
    • Open-ended (for qualitative insights)
    • Ranking (priority ordering)
  4. Sample Size
    • Calculate required sample for statistical significance
    • Account for response rate (often 10-30%)
    • Ensure representative distribution
    • Consider stratified sampling for segments
目的：从大量样本中收集定量数据，衡量态度、行为与偏好。
设计原则：
  1. 问题设计
    • 使用清晰、明确的语言
    • 避免双重问题
    • 使用平衡的量表（李克特量表：1-5或1-7）
    • 包含"不愿回答"选项
    • 随机化答案顺序以减少偏差
  2. 调查结构
    • 从简单、吸引人的问题开始
    • 将相关问题分组
    • 人口统计问题放在最后
    • 尽可能缩短调查
    • 长调查显示进度指示器
  3. 问题类型
    • 多项选择（单选）
    • 复选框（多选）
    • 评分量表（满意度、同意度）
    • 开放式（获取定性见解）
    • 排名（优先级排序）
  4. 样本量
    • 计算统计显著性所需的样本量
    • 考虑响应率（通常10-30%）
    • 确保代表性分布
    • 考虑对细分群体使用分层抽样

Personas

用户角色

Purpose: Create archetypal users based on research to guide design decisions and maintain user focus.
Components:
  1. Demographics
    • Name and photo (make memorable)
    • Age, occupation, education
    • Location and living situation
    • Family status
  2. Psychographics
    • Goals and motivations
    • Behaviors and habits
    • Pain points and frustrations
    • Values and attitudes
    • Technical proficiency
  3. Context
    • Use scenarios and context
    • Devices and platforms used
    • When/where they use product
    • Frequency of use
  4. Quote
    • Memorable statement capturing essence
    • Based on real user research data
    • Humanizes the persona
Best Practices:
  • Base on real research data, not assumptions
  • Create 3-5 primary personas (not too many)
  • Focus on differences that matter for design
  • Update as you learn more about users
  • Share widely with team and stakeholders
  • Use in design critiques and decision-making
目的：基于研究创建典型用户，以指导设计决策并保持用户聚焦。
组成部分：
  1. 人口统计信息
    • 姓名与照片（使其难忘）
    • 年龄、职业、教育程度
    • 位置与居住情况
    • 家庭状况
  2. 心理统计信息
    • 目标与动机
    • 行为与习惯
    • 痛点与挫折
    • 价值观与态度
    • 技术熟练度
  3. 上下文
    • 使用场景与上下文
    • 使用的设备与平台
    • 使用产品的时间/地点
    • 使用频率
  4. 引用语
    • 捕捉核心特征的难忘语句
    • 基于真实用户研究数据
    • 让用户角色更人性化
最佳实践：
  • 基于真实研究数据，而非假设
  • 创建3-5个主要用户角色（不要太多）
  • 聚焦对设计重要的差异
  • 随着对用户的了解更新角色
  • 与团队和利益相关者广泛分享
  • 在设计评审与决策中使用

Journey Mapping

用户旅程地图

Purpose: Visualize the complete user experience across touchpoints, revealing pain points and opportunities.
Components:
  1. Stages: Phases of the user journey
    • Awareness → Consideration → Purchase → Use → Loyalty
    • Or task-specific: Discovery → Comparison → Selection → Checkout
  2. Actions: What users do at each stage
    • Search for information
    • Compare options
    • Make purchase
    • Use product
  3. Touchpoints: Where interactions occur
    • Website, mobile app
    • Email, social media
    • Customer support
    • Physical locations
  4. Thoughts and Feelings: User emotional state
    • Excited, confused, frustrated, satisfied
    • Expectations and concerns
    • Moments of delight or pain
  5. Pain Points: Friction and problems
    • Where users struggle
    • Abandonment points
    • Complaints and workarounds
  6. Opportunities: Areas for improvement
    • How to reduce friction
    • Moments to exceed expectations
    • New features or touchpoints
Creation Process:
  1. Define scope (which journey, which persona)
  2. Gather research data (interviews, analytics, support tickets)
  3. Map stages and actions
  4. Identify touchpoints
  5. Add emotions and pain points
  6. Collaborate with stakeholders to validate
  7. Identify priorities for improvement
  8. Track improvements over time
目的：可视化跨触点的完整用户体验，揭示痛点与机会。
组成部分：
  1. 阶段：用户旅程的各个阶段
    • 认知→考虑→购买→使用→忠诚
    • 或特定任务：发现→比较→选择→结账
  2. 行动：用户在每个阶段的行为
    • 搜索信息
    • 比较选项
    • 购买
    • 使用产品
  3. 触点：交互发生的地方
    • 网站、移动应用
    • 电子邮件、社交媒体
    • 客户支持
    • 物理位置
  4. 想法与感受：用户的情绪状态
    • 兴奋、困惑、沮丧、满意
    • 期望与担忧
    • 愉悦或痛苦的时刻
  5. 痛点：摩擦与问题
    • 用户遇到困难的地方
    • 放弃点
    • 投诉与变通方法
  6. 机会：改进领域
    • 如何减少摩擦
    • 超越期望的时刻
    • 新功能或触点
创建流程：
  1. 定义范围（哪个旅程，哪个用户角色）
  2. 收集研究数据（访谈、分析、支持工单）
  3. 绘制阶段与行动
  4. 识别触点
  5. 添加情绪与痛点
  6. 与利益相关者协作验证
  7. 确定改进优先级
  8. 随时间跟踪改进

Accessibility

可访问性

WCAG Guidelines

WCAG指南

Web Content Accessibility Guidelines (WCAG) provide standards for making web content accessible to people with disabilities.
Four Principles (POUR):
  1. Perceivable: Information must be presentable to users in ways they can perceive
  2. Operable: Interface components must be operable
  3. Understandable: Information and operation must be understandable
  4. Robust: Content must be robust enough to work with assistive technologies
Conformance Levels:
  • Level A: Minimum accessibility (basic)
  • Level AA: Addresses major barriers (recommended target)
  • Level AAA: Highest accessibility (ideal)
Web内容可访问性指南（WCAG）为使Web内容对残疾人可访问提供了标准。
四大原则（POUR）：
  1. 可感知：信息必须以用户可感知的方式呈现
  2. 可操作：界面组件必须可操作
  3. 可理解：信息与操作必须可理解
  4. 健壮：内容必须足够健壮，以与辅助技术配合使用
合规级别：
  • A级：最低可访问性（基础）
  • AA级：解决主要障碍（推荐目标）
  • AAA级：最高可访问性（理想）

Key Accessibility Requirements

关键可访问性要求

1. Text Alternatives (1.1.1, Level A)

1. 文本替代方案（1.1.1，A级）

Requirement: Provide text alternatives for non-text content.
Implementation:
  • Alt text for images: 
    <img alt="Description of image">
  • Empty alt for decorative images: 
    <img alt="">
  • Transcripts for audio
  • Captions for video
  • Labels for form inputs
要求：为非文本内容提供文本替代方案。
实现：
  • 图片的替代文本：
    <img alt="图片描述">
  • 装饰性图片的空替代文本：
    <img alt="">
  • 音频的文字记录
  • 视频的字幕
  • 表单输入的标签

2. Keyboard Access (2.1.1, Level A)

2. 键盘可访问性（2.1.1，A级）

Requirement: All functionality available via keyboard.
Implementation:
  • Ensure logical tab order
  • Visible focus indicators
  • No keyboard traps
  • Skip navigation links
  • Keyboard shortcuts for common actions
要求：所有功能均可通过键盘访问。
实现：
  • 确保合理的Tab键顺序
  • 可见的焦点指示器
  • 无键盘陷阱
  • 跳过导航链接
  • 常用操作的键盘快捷键

3. Color Contrast (1.4.3, Level AA)

3. 颜色对比度（1.4.3，AA级）

Requirement: Minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text.
Implementation:
  • Test with contrast checker tools
  • Ensure sufficient contrast in all states (hover, focus, disabled)
  • Don't rely on color alone to convey information
  • Provide additional indicators (icons, text, patterns)
要求：普通文本的最小对比度为4.5:1，大文本为3:1。
实现：
  • 使用对比度检查工具测试
  • 确保所有状态（悬停、聚焦、禁用）都有足够的对比度
  • 不要仅依赖颜色传达信息
  • 提供额外的指示器（图标、文本、图案）

4. Resize Text (1.4.4, Level AA)

4. 文本缩放（1.4.4，AA级）

Requirement: Text can be resized up to 200% without loss of content or functionality.
Implementation:
  • Use relative units (em, rem) instead of pixels
  • Test at different zoom levels
  • Ensure scrolling works properly
  • Avoid fixed-size containers that truncate content
要求：文本可放大至200%而不丢失内容或功能。
实现：
  • 使用相对单位（em、rem）而非像素
  • 在不同缩放级别测试
  • 确保滚动正常工作
  • 避免固定大小的容器截断内容

5. Headings and Labels (2.4.6, Level AA)

5. 标题与标签（2.4.6，AA级）

Requirement: Headings and labels describe topic or purpose.
Implementation:
  • Use semantic heading hierarchy (h1 → h2 → h3)
  • Descriptive form labels
  • Clear button text
  • Meaningful link text (not "click here")
要求：标题与标签描述主题或目的。
实现：
  • 使用语义化标题层级（h1 → h2 → h3）
  • 描述性表单标签
  • 清晰的按钮文本
  • 有意义的链接文本（而非"点击这里"）

6. Focus Visible (2.4.7, Level AA)

6. 可见焦点（2.4.7，AA级）

Requirement: Keyboard focus indicator is visible.
Implementation:
  • Don't remove outline without replacement
  • Ensure sufficient contrast for focus indicators
  • Make focus indicators consistent
  • Test keyboard navigation flow
要求：键盘焦点指示器可见。
实现：
  • 不要移除轮廓而不替换
  • 确保焦点指示器有足够的对比度
  • 保持焦点指示器一致
  • 测试键盘导航流程

7. ARIA Landmarks (Implicit in 1.3.1)

7. ARIA地标（隐含在1.3.1中）

Requirement: Use ARIA landmarks and roles to define page regions.
Implementation:
html
<header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
要求：使用ARIA地标与角色定义页面区域。
实现：
html
<header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">

Inclusive Design Principles

包容性设计原则

1. Provide Comparable Experience
  • Ensure all users can accomplish tasks
  • May use different approaches for different abilities
  • Example: Captions for deaf users, audio descriptions for blind users
2. Consider Situation
  • Disability is contextual (bright sunlight, noisy environment)
  • Design for temporary and situational limitations
  • Example: Large touch targets benefit users with motor impairments and people on moving vehicles
3. Be Consistent
  • Use familiar conventions
  • Maintain consistency within product
  • Leverage platform standards
  • Reduce cognitive load
4. Give Control
  • Allow users to customize experience
  • Provide options for different needs
  • Enable disabling animations
  • Respect system preferences (dark mode, reduced motion)
5. Offer Choice
  • Multiple ways to accomplish tasks
  • Support different interaction methods
  • Keyboard, mouse, touch, voice
  • Different content formats
6. Prioritize Content
  • Focus on core content and functionality
  • Progressive enhancement
  • Mobile-first thinking
  • Clear hierarchy
7. Add Value
  • Accessibility features benefit everyone
  • Captions useful in noisy environments
  • Keyboard shortcuts for power users
  • Voice control while multitasking
1. 提供可比体验
  • 确保所有用户都能完成任务
  • 对不同能力的用户可使用不同方法
  • 示例：为失聪用户提供字幕，为失明用户提供音频描述
2. 考虑情境
  • 残疾是情境性的（强光、嘈杂环境）
  • 为临时与情境限制设计
  • 示例：大触摸目标既有益于运动障碍用户，也有益于在移动交通工具上的人
3. 保持一致性
  • 使用熟悉的惯例
  • 在产品内保持一致性
  • 利用平台标准
  • 减少认知负荷
4. 给予控制
  • 允许用户自定义体验
  • 为不同需求提供选项
  • 启用禁用动画
  • 尊重系统偏好（深色模式、减少动画）
5. 提供选择
  • 多种完成任务的方式
  • 支持不同的交互方法
  • 键盘、鼠标、触摸、语音
  • 不同的内容格式
6. 优先考虑内容
  • 聚焦核心内容与功能
  • 渐进式增强
  • 移动优先思维
  • 清晰的层级
7. 增加价值
  • 可访问性功能使所有人受益
  • 字幕在嘈杂环境中有用
  • 键盘快捷键对高级用户有用
  • 多任务时的语音控制

Assistive Technologies

辅助技术

Screen Readers: Convert digital text to speech or braille
  • JAWS (Windows)
  • NVDA (Windows, free)
  • VoiceOver (macOS, iOS)
  • TalkBack (Android)
Design Implications:
  • Semantic HTML structure
  • Proper heading hierarchy
  • Descriptive alt text
  • ARIA labels and descriptions
  • Skip links for navigation
  • Form labels and error associations
Screen Magnification: Enlarge portions of screen
  • ZoomText
  • Built-in OS magnifiers
Design Implications:
  • Support text resizing
  • Avoid small touch targets
  • Ensure sufficient contrast
  • Responsive layouts
Voice Control: Navigate and interact via voice
  • Dragon NaturallySpeaking
  • Voice Control (iOS, macOS)
  • Voice Access (Android)
Design Implications:
  • Visible labels matching voice commands
  • Large, distinct click targets
  • Clear focus indicators
  • Avoid hover-only interactions
Switch Access: Single or dual-switch scanning
  • Used by people with severe motor disabilities
Design Implications:
  • Full keyboard access
  • Logical tab order
  • Clear focus indicators
  • Sufficient time for interactions
屏幕阅读器：将数字文本转换为语音或盲文
  • JAWS（Windows）
  • NVDA（Windows，免费）
  • VoiceOver（macOS、iOS）
  • TalkBack（Android）
设计启示：
  • 语义化HTML结构
  • 正确的标题层级
  • 描述性替代文本
  • ARIA标签与描述
  • 导航跳过链接
  • 表单标签与错误关联
屏幕放大：放大屏幕部分区域
  • ZoomText
  • 内置OS放大镜
设计启示：
  • 支持文本缩放
  • 避免小触摸目标
  • 确保足够的对比度
  • 响应式布局
语音控制：通过语音导航与交互
  • Dragon NaturallySpeaking
  • Voice Control（iOS、macOS）
  • Voice Access（Android）
设计启示：
  • 可见标签与语音命令匹配
  • 大而清晰的点击目标
  • 清晰的焦点指示器
  • 避免仅悬停的交互
切换访问：单或双切换扫描
  • 供严重运动障碍用户使用
设计启示：
  • 完整的键盘访问
  • 合理的Tab键顺序
  • 清晰的焦点指示器
  • 足够的交互时间

User Testing

用户测试

Usability Testing

可用性测试

Purpose: Observe real users attempting tasks to identify usability issues.
Types:
  1. Moderated Testing
    • Facilitator guides session
    • Can probe and ask follow-up questions
    • Think-aloud protocol
    • More time-intensive but richer insights
  2. Unmoderated Testing
    • Users complete tasks independently
    • Scalable and cost-effective
    • Less context and follow-up
    • Tools: UserTesting, Maze, Lookback
  3. Remote vs. In-Person
    • Remote: Broader geographic reach, natural environment
    • In-person: Better observation, stronger rapport
Process:
  1. Planning
    • Define objectives and research questions
    • Identify task scenarios
    • Create test script and tasks
    • Recruit participants (5-8 per iteration)
    • Prepare prototype or product
  2. Conducting Sessions
    • Welcome and explain process
    • Obtain consent and permission to record
    • Ask pre-test questions
    • Give tasks one at a time
    • Encourage thinking aloud
    • Observe without interfering
    • Ask follow-up questions
    • Debrief and thank participant
  3. Analysis
    • Review recordings and notes
    • Identify patterns across participants
    • Categorize issues by severity
    • Calculate success rates and time on task
    • Document findings with evidence
    • Prioritize issues for fixing
  4. Reporting
    • Executive summary
    • Methodology
    • Key findings with video clips
    • Severity ratings
    • Recommendations
    • Appendix with raw data
Severity Ratings:
  • Critical: Prevents task completion, affects all users
  • Serious: Causes significant delay or frustration
  • Minor: Cosmetic or affects small percentage
  • Enhancement: Not a problem, but opportunity for improvement
目的：观察真实用户尝试完成任务，以识别可用性问题。
类型：
  1. 有主持测试
    • 主持人引导会话
    • 可深入探究并提出后续问题
    • 出声思考协议
    • 更耗时但见解更丰富
  2. 无主持测试
    • 用户独立完成任务
    • 可扩展且成本效益高
    • 上下文与后续问题较少
    • 工具：UserTesting、Maze、Lookback
  3. 远程 vs. 面对面
    • 远程：更广的地理覆盖，自然环境
    • 面对面：更好的观察，更强的融洽关系
流程：
  1. 规划
    • 定义目标与研究问题
    • 识别任务场景
    • 创建测试脚本与任务
    • 招募参与者（每次迭代5-8人）
    • 准备原型或产品
  2. 执行会话
    • 欢迎并解释流程
    • 获取同意并允许录音
    • 提出测试前问题
    • 一次给出一个任务
    • 鼓励出声思考
    • 观察而不干预
    • 提出后续问题
    • 总结并感谢参与者
  3. 分析
    • 回顾录音与笔记
    • 识别参与者之间的模式
    • 按严重程度对问题分类
    • 计算任务成功率与耗时
    • 用证据记录发现
    • 确定修复问题的优先级
  4. 报告
    • 执行摘要
    • 方法论
    • 含视频片段的关键发现
    • 严重程度评级
    • 建议
    • 含原始数据的附录
严重程度评级：
  • 关键：阻止任务完成，影响所有用户
  • 严重：导致显著延迟或挫折
  • 轻微： cosmetic或影响小部分用户
  • 增强：不是问题，但有改进机会

A/B Testing

A/B测试

Purpose: Compare two versions to determine which performs better based on defined metrics.
Best Practices:
  1. Hypothesis Formation
    • Clear, testable hypothesis
    • Example: "Adding customer reviews will increase conversion by 10%"
    • Based on research or data insights
    • Specific, measurable outcome
  2. Test Design
    • Change one variable at a time
    • Ensure random assignment to variants
    • Determine required sample size
    • Define success metrics upfront
    • Set minimum detectable effect
    • Calculate test duration
  3. Statistical Significance
    • Use p-value < 0.05 as threshold
    • Account for multiple comparisons
    • Consider practical significance vs. statistical
    • Don't stop test early (peeking problem)
  4. Common Metrics
    • Conversion rate
    • Click-through rate
    • Time on task
    • Error rate
    • Revenue per user
    • Engagement metrics
  5. Pitfalls to Avoid
    • Testing too many variants (use multivariate sparingly)
    • Stopping test too early
    • Ignoring external factors (seasonality, marketing campaigns)
    • Not accounting for new vs. returning users
    • Testing based on hunches rather than research
目的：比较两个版本，基于定义的指标确定哪个表现更好。
最佳实践：
  1. 假设形成
    • 清晰、可测试的假设
    • 示例："添加客户评论将使转化率提高10%"
    • 基于研究或数据见解
    • 具体、可衡量的结果
  2. 测试设计
    • 一次更改一个变量
    • 确保随机分配到变体
    • 确定所需样本量
    • 预先定义成功指标
    • 设置最小可检测效果
    • 计算测试持续时间
  3. 统计显著性
    • 使用p值<0.05作为阈值
    • 考虑多重比较
    • 考虑实际显著性 vs. 统计显著性
    • 不要提前停止测试（偷看问题）
  4. 常见指标
    • 转化率
    • 点击率
    • 任务耗时
    • 错误率
    • 每用户收入
    • 参与度指标
  5. 需避免的陷阱
    • 测试太多变体（谨慎使用多变量测试）
    • 过早停止测试
    • 忽略外部因素（季节性、营销活动）
    • 不考虑新用户 vs. 回头用户
    • 基于直觉而非研究进行测试

Analytics and Behavioral Data

分析与行为数据

Purpose: Understand actual user behavior at scale through quantitative data.
Key Metrics:
  1. Engagement Metrics
    • Daily/Monthly Active Users (DAU/MAU)
    • Session duration
    • Pages per session
    • Return frequency
    • Feature adoption rate
  2. Performance Metrics
    • Page load time
    • Time to interactive
    • Core Web Vitals (LCP, FID, CLS)
    • Error rates
  3. Conversion Metrics
    • Conversion rate by funnel stage
    • Drop-off points
    • Cart abandonment rate
    • Goal completion rate
  4. User Flow Analysis
    • Entry pages
    • Navigation paths
    • Exit pages
    • Funnel visualization
Tools:
  • Google Analytics
  • Mixpanel
  • Amplitude
  • Heap
  • Hotjar (heatmaps, session recordings)
Best Practices:
  • Define events and goals aligned with business objectives
  • Segment users for deeper insights
  • Combine with qualitative research to understand "why"
  • Set up alerts for anomalies
  • Regular review and action on insights
  • Privacy-compliant tracking (GDPR, CCPA)
目的：通过定量数据大规模理解实际用户行为。
关键指标：
  1. 参与度指标
    • 日/月活跃用户（DAU/MAU）
    • 会话时长
    • 每次会话页面数
    • 返回频率
    • 功能采用率
  2. 性能指标
    • 页面加载时间
    • 可交互时间
    • 核心Web指标（LCP、FID、CLS）
    • 错误率
  3. 转化指标
    • 漏斗阶段的转化率
    • 流失点
    • 购物车弃购率
    • 目标完成率
  4. 用户流分析
    • 入口页面
    • 导航路径
    • 退出页面
    • 漏斗可视化
工具：
  • Google Analytics
  • Mixpanel
  • Amplitude
  • Heap
  • Hotjar（热图、会话记录）
最佳实践：
  • 定义与业务目标对齐的事件与目标
  • 细分用户以获取更深入的见解
  • 结合定性研究理解"为什么"
  • 为异常设置警报
  • 定期回顾并根据见解采取行动
  • 符合隐私要求的跟踪（GDPR、CCPA）

Information Architecture

信息架构

Card Sorting

卡片分类

Purpose: Understand how users mentally organize and categorize information.
Types:
  1. Open Card Sorting
    • Users create their own categories
    • Discover user mental models
    • Use early in IA development
    • Reveals unexpected groupings
  2. Closed Card Sorting
    • Users sort into predefined categories
    • Validate existing structure
    • Compare alternative organizations
    • More focused insights
  3. Hybrid Card Sorting
    • Predefined categories plus option to create new
    • Balance structure and discovery
Process:
  1. Preparation
    • Create cards representing content items
    • 30-60 cards is typical
    • Use clear, representative labels
    • Recruit 15-30 participants
  2. Execution
    • Online tools: OptimalSort, Miro, UserZoom
    • In-person: Physical cards
    • Allow participants to work individually
    • Encourage thinking aloud
  3. Analysis
    • Similarity matrix (how often items grouped together)
    • Dendrogram (hierarchical clustering)
    • Popular category names
    • Agreement patterns
  4. Application
    • Create site map based on findings
    • Label navigation items
    • Inform content hierarchy
    • Validate with tree testing
目的：理解用户如何在心理上组织与分类信息。
类型：
  1. 开放式卡片分类
    • 用户创建自己的类别
    • 发现用户心智模型
    • 在IA开发早期使用
    • 揭示意外的分组
  2. 封闭式卡片分类
    • 用户将卡片分类到预定义类别中
    • 验证现有结构
    • 比较替代组织方式
    • 更聚焦的见解
  3. 混合式卡片分类
    • 预定义类别加创建新类别的选项
    • 平衡结构与发现
流程：
  1. 准备
    • 创建代表内容项的卡片
    • 通常30-60张卡片
    • 使用清晰、有代表性的标签
    • 招募15-30名参与者
  2. 执行
    • 在线工具：OptimalSort、Miro、UserZoom
    • 面对面：实体卡片
    • 允许参与者独立工作
    • 鼓励出声思考
  3. 分析
    • 相似性矩阵（项目被分组的频率）
    • 树状图（层级聚类）
    • 流行的类别名称
    • 一致模式
  4. 应用
    • 根据发现创建站点地图
    • 为导航项命名
    • 为内容层级提供信息
    • 用树测试验证

Tree Testing

树测试

Purpose: Validate navigation structure by testing if users can find content.
Process:
  1. Setup
    • Create text-based hierarchy (no visual design)
    • Define tasks (e.g., "Where would you find X?")
    • Recruit 20-50 participants
    • Use tools: Treejack, UserZoom
  2. Metrics
    • Success rate (found correct location)
    • Directness (took direct path vs. backtracking)
    • Time to completion
    • First click (where users started)
  3. Analysis
    • Identify problematic paths
    • High failure tasks
    • Destinations that trap users
    • Confusing labels
  4. Iteration
    • Revise structure based on findings
    • Test again until success rates acceptable
    • Typically aim for >70% success rate
目的：通过测试用户是否能找到内容，验证导航结构。
流程：
  1. 设置
    • 创建基于文本的层级（无视觉设计）
    • 定义任务（例如，"你会在哪里找到X？"）
    • 招募20-50名参与者
    • 使用工具：Treejack、UserZoom
  2. 指标
    • 成功率（找到正确位置）
    • 直接性（走直接路径 vs. 回溯）
    • 完成时间
    • 首次点击（用户从哪里开始）
  3. 分析
    • 识别有问题的路径
    • 高失败任务
    • 困住用户的目的地
    • 混淆的标签
  4. 迭代
    • 根据发现修改结构
    • 再次测试直到可接受的成功率
    • 通常目标是>70%的成功率

Navigation Design

导航设计

Types:
  1. Global Navigation: Consistent across entire site
    • Primary menu/header
    • Footer navigation
    • Utility navigation (account, cart, search)
  2. Local Navigation: Context-specific
    • Sidebar menus
    • In-page navigation
    • Related links
  3. Contextual Navigation: Dynamic based on content
    • Related articles
    • Recommended products
    • Next steps
Best Practices:
  • Keep global navigation to 7±2 items
  • Use clear, descriptive labels
  • Indicate current location
  • Breadcrumbs for deep hierarchies
  • Search for complex sites
  • Mobile: hamburger or tab bar patterns
  • Mega menus for wide, shallow hierarchies
  • Persistent navigation for easy access
类型：
  1. 全局导航：在整个站点保持一致
    • 主导航/页眉
    • 页脚导航
    • 实用导航（账户、购物车、搜索）
  2. 局部导航：特定上下文
    • 侧边栏菜单
    • 页内导航
    • 相关链接
  3. 上下文导航：基于内容动态变化
    • 相关文章
    • 推荐产品
    • 下一步操作
最佳实践：
  • 全局导航保持7±2个项目
  • 使用清晰、描述性的标签
  • 指示当前位置
  • 深层层级使用面包屑
  • 复杂站点使用搜索
  • 移动端：汉堡菜单或标签栏模式
  • 宽而浅的层级使用巨型菜单
  • 持久导航以便于访问

UX Metrics

UX指标

Task Success Rate

任务成功率

Definition: Percentage of tasks completed successfully.
Measurement:
  • Binary: Did user complete task? (Yes/No)
  • Partial credit: 0-100% completion scale
  • Track success per task and overall
Benchmarks:
  • 78% considered acceptable
  • 90% excellent
  • <70% indicates serious usability issues
Application:
  • Compare designs or versions
  • Track improvement over time
  • Prioritize issues (low success = high priority)
  • Set improvement targets
定义：成功完成任务的百分比。
测量：
  • 二元：用户是否完成任务？（是/否）
  • 部分学分：0-100%完成度
  • 按任务与整体跟踪成功率
基准：
  • 78%被认为可接受
  • 90%优秀
  • <70%表示严重可用性问题
应用：
  • 比较设计或版本
  • 随时间跟踪改进
  • 确定问题优先级（低成功率=高优先级）
  • 设置改进目标

Time on Task

任务耗时

Definition: How long it takes users to complete a task.
Measurement:
  • Start timer when task begins
  • Stop when user indicates completion or gives up
  • Calculate mean, median, and range
  • Consider outliers
Considerations:
  • Faster isn't always better (e.g., reading content)
  • Compare to baseline or benchmark
  • Look at distribution, not just average
  • Context matters (expert vs. novice users)
Use Cases:
  • Identify inefficient workflows
  • Compare alternative designs
  • Track expert vs. novice performance
  • Calculate cost savings from improvements
定义：用户完成任务所需的时间。
测量：
  • 任务开始时启动计时器
  • 用户表示完成或放弃时停止
  • 计算平均值、中位数与范围
  • 考虑异常值
注意事项：
  • 更快并不总是更好（例如，阅读内容）
  • 与基线或基准比较
  • 查看分布，而不仅仅是平均值
  • 上下文很重要（专家 vs. 新手用户）
用例：
  • 识别低效工作流
  • 比较替代设计
  • 跟踪专家 vs. 新手表现
  • 计算改进带来的成本节约

System Usability Scale (SUS)

系统可用性量表（SUS）

Definition: 10-item questionnaire providing quick usability assessment.
Questions (5-point Likert scale: Strongly Disagree to Strongly Agree):
  1. I think that I would like to use this system frequently.
  2. I found the system unnecessarily complex.
  3. I thought the system was easy to use.
  4. I think that I would need the support of a technical person to use this system.
  5. I found the various functions in this system were well integrated.
  6. I thought there was too much inconsistency in this system.
  7. I would imagine that most people would learn to use this system very quickly.
  8. I found the system very cumbersome to use.
  9. I felt very confident using the system.
  10. I needed to learn a lot of things before I could get going with this system.
Scoring:
  • Odd items: score - 1
  • Even items: 5 - score
  • Sum all scores and multiply by 2.5
  • Result: 0-100 scale
Interpretation:
  • 80: Excellent
  • 68-80: Good
  • 51-68: OK
  • <51: Poor
  • Average SUS score across products: 68
定义：10项问卷，提供快速的可用性评估。
问题（5点李克特量表：强烈不同意到强烈同意）：
  1. 我认为我会经常使用这个系统。
  2. 我发现这个系统不必要地复杂。
  3. 我认为这个系统易于使用。
  4. 我认为我需要技术人员的支持才能使用这个系统。
  5. 我发现系统中的各种功能集成良好。
  6. 我认为系统中有太多不一致之处。
  7. 我认为大多数人会很快学会使用这个系统。
  8. 我发现这个系统非常繁琐。
  9. 我对使用这个系统感到非常自信。
  10. 在开始使用之前，我需要学习很多东西。
评分：
  • 奇数项：得分-1
  • 偶数项：5-得分
  • 总和所有分数并乘以2.5
  • 结果：0-100分
解释：
  • 80：优秀
  • 68-80：良好
  • 51-68：一般
  • <51：差
  • 所有产品的平均SUS分数：68

Net Promoter Score (NPS)

净推荐值（NPS）

Definition: Measures customer loyalty and satisfaction.
Question: "How likely are you to recommend [product] to a friend or colleague?" (0-10 scale)
Calculation:
  • Promoters: 9-10
  • Passives: 7-8
  • Detractors: 0-6
  • NPS = % Promoters - % Detractors
  • Range: -100 to +100
Benchmarks:
  • 50: Excellent
  • 0: Good
  • <0: Needs improvement
Limitations:
  • Doesn't explain why
  • Influenced by factors beyond UX
  • Always include follow-up question: "Why?"
定义：衡量客户忠诚度与满意度。
问题："你向朋友或同事推荐[产品]的可能性有多大？"（0-10分）
计算：
  • 推荐者：9-10分
  • 被动者：7-8分
  • 贬损者：0-6分
  • NPS = %推荐者 - %贬损者
  • 范围：-100到+100
基准：
  • 50：优秀
  • 0：良好
  • <0：需要改进
局限性：
  • 不解释原因
  • 受UX以外因素影响
  • 始终包含后续问题："为什么？"

Customer Satisfaction (CSAT)

客户满意度（CSAT）

Definition: Measures satisfaction with specific experience or interaction.
Question: "How satisfied were you with [experience]?" (1-5 scale)
Calculation:
  • % of respondents who selected 4 or 5
  • Or average score
Timing:
  • Immediately after interaction
  • Post-purchase
  • After support ticket resolution
  • End of onboarding
Use Cases:
  • Compare satisfaction across features
  • Track improvement over time
  • Identify pain points
  • Trigger follow-up for low scores
定义：衡量对特定体验或交互的满意度。
问题："你对[体验]的满意度如何？"（1-5分）
计算：
  • 选择4或5分的受访者百分比
  • 或平均分数
时机：
  • 交互后立即
  • 购买后
  • 支持工单解决后
  • 引导结束后
用例：
  • 比较不同功能的满意度
  • 随时间跟踪改进
  • 识别痛点
  • 对低分触发后续跟进

Error Rate

错误率

Definition: Frequency of user errors during task completion.
Types:
  • Slips: Incorrect actions despite correct intention
  • Mistakes: Incorrect intention leading to wrong action
Measurement:
  • Count errors per task
  • Categorize by type
  • Note if users recovered
  • Track time to recover
Analysis:
  • High error rate = usability problem
  • Repeated errors across users = design issue
  • Recovery time indicates error visibility
  • Prevention > detection > recovery
定义：任务完成期间用户错误的频率。
类型：
  • 失误：意图正确但操作错误
  • 错误：意图错误导致错误操作
测量：
  • 按任务计算错误数
  • 按类型分类
  • 记录用户是否恢复
  • 跟踪恢复时间
分析：
  • 高错误率=可用性问题
  • 用户间重复错误=设计问题
  • 恢复时间表明错误可见性
  • 预防>检测>恢复

Engagement Metrics

参与度指标

Session Duration: Time users spend in product
  • Longer isn't always better
  • Context-dependent (task efficiency vs. content consumption)
Feature Adoption: % of users who use a feature
  • Track adoption over time
  • Identify unused features
  • Measure onboarding effectiveness
Retention Rate: % of users who return
  • Daily, weekly, monthly retention
  • Cohort analysis
  • Churn rate (inverse of retention)
Stickiness: DAU/MAU ratio
  • Measures how often users engage
  • Higher = more habit-forming
  • Target varies by product type
会话时长：用户在产品中花费的时间
  • 更长并不总是更好
  • 上下文相关（任务效率 vs. 内容消费）
功能采用率：使用功能的用户百分比
  • 随时间跟踪采用率
  • 识别未使用的功能
  • 衡量引导效果
留存率：返回用户的百分比
  • 日、周、月留存
  • 群组分析
  • 流失率（留存率的倒数）
粘性：DAU/MAU比率
  • 衡量用户参与频率
  • 越高=越容易形成习惯
  • 目标因产品类型而异

UX Principle Examples

UX原则示例

Example 1: Progressive Disclosure - TurboTax

示例1：渐进式披露 - TurboTax

Principle: Hide complexity until needed; reveal information gradually.
Implementation: TurboTax's interview-style tax filing asks simple questions one at a time, revealing complexity only when relevant to the user's specific situation.
Design Decisions:
  • One question per screen
  • Plain language instead of tax jargon
  • "Does this apply to you?" branching logic
  • Advanced options hidden by default
  • Summary screens at key milestones
Benefits:
  • Reduces cognitive load
  • Prevents overwhelming users
  • Faster completion for simple cases
  • Scales complexity to user needs
  • Lower abandonment rates
Metrics:
  • 30% faster completion for standard returns
  • 45% reduction in help requests
  • Higher completion rates vs. traditional forms
原则：隐藏复杂性直到需要时；逐步揭示信息。
实现： TurboTax的访谈式报税一次只问简单问题，仅在与用户特定情况相关时才揭示复杂性。
设计决策：
  • 每页一个问题
  • 使用通俗易懂的语言而非税务行话
  • "这适用于你吗？"的分支逻辑
  • 高级选项默认隐藏
  • 关键里程碑的摘要页面
好处：
  • 减少认知负荷
  • 避免使用户不知所措
  • 简单案例更快完成
  • 复杂性随用户需求扩展
  • 更低的弃购率
指标：
  • 标准报税完成速度提高30%
  • 帮助请求减少45%
  • 与传统表单相比完成率更高

Example 2: Contextual Help - Slack

示例2：上下文帮助 - Slack

Principle: Provide help where and when users need it.
Implementation: Slack uses inline tips, tooltips, and contextual suggestions to guide users without leaving their workflow.
Features:
  • Slash command autocomplete with examples
  • "You're up to date" message when no new messages
  • Inline markdown preview
  • Channel purpose and description visible
  • Keyboard shortcut hints on hover
  • Search syntax suggestions
Benefits:
  • Reduces need for external documentation
  • Learning happens in context
  • Doesn't interrupt workflow
  • Discovers features through use
  • Lower support burden
Impact:
  • 80% of users discover features without training
  • Reduced onboarding time by 40%
  • Higher feature adoption rates
原则：在用户需要的时间和地点提供帮助。
实现： Slack使用内联提示、工具提示和上下文建议，无需离开工作流即可引导用户。
功能：
  • 带示例的斜杠命令自动完成
  • 无新消息时显示"你已查看全部"消息
  • 内联Markdown预览
  • 可见的频道用途与描述
  • 悬停时显示键盘快捷键提示
  • 搜索语法建议
好处：
  • 减少对外部文档的需求
  • 在上下文中学习
  • 不中断工作流
  • 通过使用发现功能
  • 降低支持负担
影响：
  • 80%的用户无需培训即可发现功能
  • 引导时间减少40%
  • 更高的功能采用率

Example 3: Undo Culture - Gmail

示例3：撤销文化 - Gmail

Principle: Allow users to reverse actions easily, reducing fear of making mistakes.
Implementation: Gmail's undo send, undo archive, and undo most actions with yellow banner notifications.
Design Pattern:
  • Action executes immediately (optimistic UI)
  • Yellow banner appears with "Undo" link
  • 5-30 second window to reverse
  • Gracefully degrades if too late
  • Reduces need for confirmation dialogs
Psychology:
  • Increases user confidence
  • Encourages exploration
  • Reduces anxiety about mistakes
  • Faster workflows (no confirmation dialogs)
Metrics:
  • 20% of sent emails are undone
  • Reduced accidental deletions by 60%
  • Higher user satisfaction scores
原则：允许用户轻松撤销操作，减少犯错的恐惧。
实现： Gmail的撤销发送、撤销归档以及通过黄色横幅通知撤销大多数操作。
设计模式：
  • 操作立即执行（乐观UI）
  • 出现带"撤销"链接的黄色横幅
  • 5-30秒的撤销窗口
  • 超时后优雅降级
  • 减少对确认对话框的需求
心理学：
  • 提高用户信心
  • 鼓励探索
  • 减少对错误的焦虑
  • 更快的工作流（无确认对话框）
指标：
  • 20%的已发送邮件被撤销
  • 意外删除减少60%
  • 更高的用户满意度评分

Example 4: Smart Defaults - iOS Camera

示例4：智能默认值 - iOS相机

Principle: Set defaults that work for 80% of users, reducing decisions.
Implementation: iOS Camera app opens ready to shoot with intelligent defaults.
Smart Features:
  • Auto HDR when needed
  • Night mode activates in low light
  • Portrait mode suggests optimal distance
  • Grid lines off by default (optional in settings)
  • Auto-stabilization
  • Smart framing suggestions
Benefits:
  • Zero configuration for most users
  • Great results without expertise
  • Advanced users can customize
  • Faster to capture moment
  • Higher success rate for casual users
Impact:
  • 95% of users never change settings
  • Higher photo satisfaction ratings
  • Reduced time from open to capture
原则：为80%的用户设置有效的默认值，减少决策。
实现： iOS相机应用打开即可拍摄，带有智能默认设置。
智能功能：
  • 需要时自动HDR
  • 低光环境下激活夜间模式
  • 人像模式建议最佳距离
  • 网格线默认关闭（设置中可选）
  • 自动稳定
  • 智能构图建议
好处：
  • 大多数用户无需配置
  • 无需专业知识即可获得好结果
  • 高级用户可自定义
  • 更快捕捉瞬间
  • 普通用户的成功率更高
影响：
  • 95%的用户从不更改设置
  • 更高的照片满意度评分
  • 从打开到捕捉的时间减少

Example 5: Feedback and Confirmation - Stripe Dashboard

示例5：反馈与确认 - Stripe仪表板

Principle: Provide immediate, clear feedback for user actions.
Implementation: Stripe provides excellent visual feedback for all actions and system states.
Feedback Patterns:
  • Inline validation on form fields
  • Success animations for completed actions
  • Loading states for async operations
  • Error messages with specific solutions
  • Toast notifications for background actions
  • Optimistic UI updates
Design Details:
  • Green checkmarks for success
  • Specific error messages ("Card declined" vs. "Payment failed")
  • Retry buttons when applicable
  • Progress indicators for multi-step processes
  • System status always visible
Business Impact:
  • 35% reduction in support tickets
  • Faster issue resolution
  • Higher successful payment rates
  • Better developer experience
原则：为用户操作提供即时、清晰的反馈。
实现： Stripe为所有操作与系统状态提供出色的视觉反馈。
反馈模式：
  • 表单字段的内联验证
  • 完成操作的成功动画
  • 异步操作的加载状态
  • 带特定解决方案的错误消息
  • 后台操作的Toast通知
  • 乐观UI更新
设计细节：
  • 成功时的绿色对勾
  • 特定错误消息（"卡片被拒绝"而非"支付失败"）
  • 适用时提供重试按钮
  • 多步骤流程的进度指示器
  • 系统状态始终可见
业务影响：
  • 支持工单减少35%
  • 更快的问题解决
  • 更高的成功支付率
  • 更好的开发者体验

Example 6: Constraint-Based Design - Airbnb Date Picker

示例6：基于约束的设计 - Airbnb日期选择器

Principle: Use constraints to prevent errors and guide users to valid choices.
Implementation: Airbnb's date picker disables invalid dates and provides visual feedback.
Constraints:
  • Grays out past dates
  • Disables dates not available
  • Enforces minimum stay requirements
  • Shows pricing for date ranges
  • Highlights weekends visually
  • Suggests popular date ranges
Benefits:
  • Eliminates invalid selections
  • Reduces booking errors
  • Clearer availability understanding
  • Faster decision-making
  • Fewer booking failures
Metrics:
  • 50% reduction in invalid date selections
  • 25% faster booking completion
  • Lower abandonment at date selection
原则：使用约束防止错误并引导用户选择有效选项。
实现： Airbnb的日期选择器禁用无效日期并提供视觉反馈。
约束：
  • 灰色显示过去的日期
  • 禁用不可用的日期
  • 强制执行最短住宿要求
  • 显示日期范围的价格
  • 视觉高亮周末
  • 建议热门日期范围
好处：
  • 消除无效选择
  • 减少预订错误
  • 更清晰的可用性理解
  • 更快的决策
  • 更少的预订失败
指标：
  • 无效日期选择减少50%
  • 预订完成速度提高25%
  • 日期选择时的弃购率降低

Example 7: Recognition Over Recall - Spotify

示例7：识别而非回忆 - Spotify

Principle: Make information visible rather than requiring memory.
Implementation: Spotify shows album art, recently played, and contextual playlists everywhere.
Design Decisions:
  • Large album artwork for recognition
  • "Recently played" on home screen
  • Visual playlist covers
  • Artist images in search
  • Queue shows upcoming songs
  • Lyrics sync with playback
Benefits:
  • Faster navigation to favorite content
  • Discover forgotten music
  • Reduced search friction
  • Better browsing experience
  • Higher engagement
Impact:
  • 70% of plays from visual browsing vs. search
  • Longer session durations
  • Higher playlist engagement
原则：使信息可见而非要求记忆。
实现： Spotify在各处显示专辑封面、最近播放和上下文播放列表。
设计决策：
  • 大专辑封面用于识别
  • 主页上的"最近播放"
  • 视觉播放列表封面
  • 搜索中的艺术家图片
  • 队列显示即将播放的歌曲
  • 歌词与播放同步
好处：
  • 更快导航到喜欢的内容
  • 发现遗忘的音乐
  • 减少搜索摩擦
  • 更好的浏览体验
  • 更高的参与度
影响：
  • 70%的播放来自视觉浏览而非搜索
  • 更长的会话时长
  • 更高的播放列表参与度

Example 8: Consistency - Apple Human Interface Guidelines

示例8：一致性 - Apple人机界面指南

Principle: Maintain consistency across platform for predictability.
Implementation: Apple enforces strict UI consistency across iOS apps.
Consistent Elements:
  • Back button always top-left
  • Share icon always same
  • Tab bar at bottom
  • Navigation bar at top
  • Swipe gestures standardized
  • System colors and typography
Benefits:
  • Zero learning curve for new apps
  • Predictable interactions
  • Muscle memory across apps
  • Professional appearance
  • User confidence
Developer Impact:
  • Design system provides components
  • Faster development with standards
  • Better app store ratings for compliant apps
原则：在平台内保持一致性以提高可预测性。
实现： Apple在iOS应用中强制执行严格的UI一致性。
一致元素：
  • 返回按钮始终在左上角
  • 分享图标始终相同
  • 标签栏在底部
  • 导航栏在顶部
  • 滑动手势标准化
  • 系统颜色与排版
好处：
  • 新应用零学习曲线
  • 可预测的交互
  • 跨应用的肌肉记忆
  • 专业外观
  • 用户信心
开发者影响：
  • 设计系统提供组件
  • 标准使开发更快
  • 合规应用的应用商店评分更高

Example 9: Error Prevention - Grammarly

示例9：错误预防 - Grammarly

Principle: Prevent errors before they happen through real-time assistance.
Implementation: Grammarly provides real-time writing suggestions to prevent errors.
Features:
  • Inline spell check
  • Grammar suggestions
  • Tone detection
  • Clarity improvements
  • Plagiarism detection
  • Context-aware corrections
Prevention Strategies:
  • Underlines potential issues immediately
  • Explains why something is flagged
  • Offers specific corrections
  • Learns from user choices
  • Adapts to writing style
Impact:
  • 95% of errors caught before publishing
  • Improved writing confidence
  • Faster writing process
  • Better communication outcomes
原则：通过实时帮助在错误发生前预防。
实现： Grammarly提供实时写作建议以预防错误。
功能：
  • 内联拼写检查
  • 语法建议
  • 语气检测
  • 清晰度改进
  • 抄袭检测
  • 上下文感知修正
预防策略：
  • 立即下划线标记潜在问题
  • 解释标记原因
  • 提供特定修正
  • 从用户选择中学习
  • 适应写作风格
影响：
  • 95%的错误在发布前被发现
  • 提高写作信心
  • 更快的写作过程
  • 更好的沟通结果

Example 10: Aesthetic and Minimalist - Dropbox

示例10：美学与极简主义 - Dropbox

Principle: Focus on essential content, remove unnecessary elements.
Implementation: Dropbox evolved from cluttered to minimal, focusing on files.
Minimalist Design:
  • Clean file list view
  • Generous white space
  • Limited color palette
  • Icons only when necessary
  • Hidden advanced features
  • Progressive disclosure
Evolution:
  • Removed promotional banners from main view
  • Simplified navigation from 7 to 4 items
  • Cleaner file previews
  • Less visual noise
Results:
  • 30% improvement in task completion
  • 43% faster file finding
  • Higher user satisfaction
  • Better perceived performance
原则：聚焦核心内容，移除不必要元素。
实现： Dropbox从杂乱演变为极简，聚焦文件。
极简设计：
  • 简洁的文件列表视图
  • 充足的留白
  • 有限的调色板
  • 仅在必要时使用图标
  • 隐藏高级功能
  • 渐进式披露
演变：
  • 从主视图中移除促销横幅
  • 导航从7个简化为4个项目
  • 更简洁的文件预览
  • 更少的视觉噪音
结果：
  • 任务完成率提高30%
  • 文件查找速度提高43%
  • 更高的用户满意度
  • 更好的感知性能

Example 11: Accessibility First - BBC

示例11：可访问性优先 - BBC

Principle: Design accessible by default, benefiting all users.
Implementation: BBC builds accessibility into every product from the start.
Features:
  • Keyboard navigation fully supported
  • Captions on all video
  • Transcripts for audio
  • Sufficient color contrast
  • Clear typography
  • Screen reader optimization
  • Responsive for all devices
Universal Benefits:
  • Captions useful in noisy environments
  • Clear typography easier for everyone
  • Keyboard shortcuts for power users
  • Works on any device
  • Better SEO from semantic HTML
Impact:
  • Reaches wider audience
  • Legal compliance
  • Better user experience overall
  • Industry leadership
原则：默认设计为可访问，使所有人受益。
实现： BBC从一开始就将可访问性融入每个产品。
功能：
  • 完全支持键盘导航
  • 所有视频带字幕
  • 音频带文字记录
  • 足够的颜色对比度
  • 清晰的排版
  • 屏幕阅读器优化
  • 适配所有设备
普遍好处：
  • 字幕在嘈杂环境中有用
  • 清晰的排版对所有人都更容易
  • 键盘快捷键对高级用户有用
  • 在任何设备上都能工作
  • 语义化HTML带来更好的SEO
影响：
  • 覆盖更广泛的受众
  • 合规
  • 整体更好的用户体验
  • 行业领导力

Example 12: Affordances - Google Material Design

示例12：可供性 - Google Material Design

Principle: Make interactive elements look interactive through visual cues.
Implementation: Material Design uses elevation, shadows, and motion to signify interactivity.
Design Language:
  • Buttons have elevation (cast shadows)
  • Floating action button prominently raised
  • Cards elevate on hover
  • Ripple effects on touch
  • Distinct states (hover, active, disabled)
  • Consistent interactive elements
Visual Hierarchy:
  • Primary action most prominent
  • Secondary actions less emphasized
  • Disabled states clearly different
  • Focus states highly visible
Benefits:
  • Immediately clear what's clickable
  • Reduced user confusion
  • Faster interaction
  • Consistent expectations
原则：通过视觉线索使交互元素看起来具有交互性。
实现： Material Design使用 elevation、阴影与动效表示可交互性。
设计语言：
  • 按钮有 elevation（投射阴影）
  • 浮动操作按钮突出显示
  • 卡片在悬停时提升
  • 触摸时的涟漪效果
  • 不同的状态（悬停、激活、禁用）
  • 一致的交互元素
视觉层级：
  • 主要操作最突出
  • 次要操作不那么强调
  • 禁用状态明显不同
  • 聚焦状态高度可见
好处：
  • 立即清楚什么可点击
  • 减少用户混淆
  • 更快的交互
  • 一致的期望

Example 13: User Control - YouTube Playback

示例13：用户控制 - YouTube播放

Principle: Give users control over their experience.
Implementation: YouTube provides extensive playback controls and customization.
Controls:
  • Playback speed (0.25x to 2x)
  • Quality selection
  • Caption customization
  • Autoplay toggle
  • Miniplayer mode
  • Theater/fullscreen modes
  • Keyboard shortcuts
  • Picture-in-picture
Benefits:
  • Accommodates different needs
  • Accessibility features
  • Power user efficiency
  • Personal preference
  • Multi-tasking support
Usage:
  • 35% of users adjust playback speed
  • 60% use keyboard shortcuts regularly
  • Higher satisfaction with control
原则：给予用户对体验的控制。
实现： YouTube提供广泛的播放控制与自定义选项。
控制：
  • 播放速度（0.25x到2x）
  • 画质选择
  • 字幕自定义
  • 自动播放切换
  • 迷你播放器模式
  • 影院/全屏模式
  • 键盘快捷键
  • 画中画
好处：
  • 适应不同需求
  • 可访问性功能
  • 高级用户效率
  • 个人偏好
  • 多任务支持
使用情况：
  • 35%的用户调整播放速度
  • 60%的用户定期使用键盘快捷键
  • 对控制的满意度更高

Example 14: Mental Models - Figma Layers

示例14：心智模型 - Figma图层

Principle: Match user mental models from familiar tools.
Implementation: Figma's layers panel mirrors Photoshop/Sketch, reducing learning curve for designers.
Familiar Patterns:
  • Layer hierarchy on left
  • Properties panel on right
  • Keyboard shortcuts from Adobe
  • Group/frame concepts
  • Naming conventions
  • Visibility toggles
Innovation Within Familiarity:
  • Auto-layout (new concept)
  • Components (enhanced from symbols)
  • Multiplayer (novel feature)
Results:
  • 70% of designers productive in first session
  • Minimal training required
  • High adoption from other tools
  • Positive migration feedback
原则：匹配用户来自熟悉工具的心智模型。
实现： Figma的图层面板镜像Photoshop/Sketch，减少设计师的学习曲线。
熟悉的模式：
  • 左侧的图层层级
  • 右侧的属性面板
  • Adobe的键盘快捷键
  • 组/帧概念
  • 命名约定
  • 可见性切换
在熟悉中的创新：
  • 自动布局（新概念）
  • 组件（从符号增强）
  • 多人协作（新颖功能）
结果：
  • 70%的设计师在第一次会话中就可高效工作
  • 无需大量培训
  • 从其他工具的高采用率
  • 积极的迁移反馈

Example 15: Gamification - Duolingo

示例15：游戏化 - Duolingo

Principle: Use game mechanics to motivate and engage users.
Implementation: Duolingo turns language learning into an engaging game.
Game Elements:
  • Streak tracking (daily motivation)
  • XP points for completing lessons
  • Leaderboards with friends
  • Achievement badges
  • Lives system (limited mistakes)
  • Level progression
  • Character mascot (Duo)
Psychological Drivers:
  • Loss aversion (don't break streak)
  • Social comparison (leaderboards)
  • Achievement unlocks
  • Progress visibility
  • Immediate feedback
  • Reward schedules
Impact:
  • 40% daily active user rate
  • Average 34-day streaks
  • Higher lesson completion
  • Better retention than traditional apps
  • 500M+ users
原则：使用游戏机制激励与吸引用户。
实现： Duolingo将语言学习变成一个吸引人的游戏。
游戏元素：
  • 连续学习天数跟踪（每日动力）
  • 完成课程获得XP点数
  • 与朋友的排行榜
  • 成就徽章
  • 生命系统（有限错误）
  • 等级提升
  • 角色吉祥物（Duo）
心理驱动因素：
  • 损失厌恶（不想打破连续天数）
  • 社会比较（排行榜）
  • 成就解锁
  • 进度可见性
  • 即时反馈
  • 奖励机制
影响：
  • 40%的日活跃用户率
  • 平均连续34天学习
  • 更高的课程完成率
  • 比传统应用更好的留存
  • 5亿+用户

Best Practices Summary

最佳实践总结

Research Phase

研究阶段

  • Start with user research, not assumptions
  • Use mixed methods (qualitative + quantitative)
  • Recruit representative participants
  • Document and share findings widely
  • Build empathy through direct user contact
  • 从用户研究开始，而非假设
  • 使用混合方法（定性+定量）
  • 招募代表性参与者
  • 记录并广泛分享发现
  • 通过直接用户接触建立共情

Design Phase

设计阶段

  • Follow established heuristics and principles
  • Design for accessibility from the start
  • Create consistent, predictable experiences
  • Reduce cognitive load at every opportunity
  • Provide clear feedback for all actions
  • Prevent errors when possible
  • Allow easy recovery from errors
  • Match user mental models
  • 遵循既定的启发法与原则
  • 从一开始就为可访问性设计
  • 创建一致、可预测的体验
  • 尽可能减少认知负荷
  • 为所有操作提供清晰反馈
  • 尽可能预防错误
  • 允许从错误中轻松恢复
  • 匹配用户心智模型

Testing Phase

测试阶段

  • Test early and often with real users
  • Use appropriate methods for questions asked
  • Combine observational and analytical data
  • Iterate based on findings
  • Track metrics over time
  • Share results with stakeholders
  • 尽早并经常与真实用户测试
  • 为问题选择合适的方法
  • 结合观察与分析数据
  • 根据发现迭代
  • 随时间跟踪指标
  • 与利益相关者分享结果

Implementation Phase

实施阶段

  • Use semantic HTML for accessibility
  • Follow platform conventions
  • Build design systems for consistency
  • Optimize performance (perceived and actual)
  • Monitor analytics and user feedback
  • Continuously improve based on data
  • 使用语义化HTML以提高可访问性
  • 遵循平台惯例
  • 构建设计系统以保持一致性
  • 优化性能（感知与实际）
  • 监控分析与用户反馈
  • 根据数据持续改进

Continuous Improvement

持续改进

  • Establish baseline metrics
  • Set improvement targets
  • Regular usability testing
  • Monitor support tickets and feedback
  • Stay current with research and best practices
  • Share learnings across organization
  • 建立基线指标
  • 设置改进目标
  • 定期可用性测试
  • 监控支持工单与反馈
  • 紧跟研究与最佳实践
  • 在组织内分享学习成果

Resources and Tools

资源与工具

Research Tools

研究工具

  • User Interviews: UserTesting, Lookback, User Interviews
  • Surveys: Typeform, SurveyMonkey, Google Forms
  • Card Sorting: OptimalSort, Miro, UserZoom
  • Tree Testing: Treejack, UserZoom
  • 用户访谈：UserTesting、Lookback、User Interviews
  • 调查：Typeform、SurveyMonkey、Google Forms
  • 卡片分类：OptimalSort、Miro、UserZoom
  • 树测试：Treejack、UserZoom

Analytics and Testing

分析与测试

  • Analytics: Google Analytics, Mixpanel, Amplitude, Heap
  • A/B Testing: Optimizely, VWO, Google Optimize
  • Heatmaps: Hotjar, Crazy Egg, FullStory
  • Session Recording: FullStory, Hotjar, LogRocket
  • 分析：Google Analytics、Mixpanel、Amplitude、Heap
  • A/B测试：Optimizely、VWO、Google Optimize
  • 热图：Hotjar、Crazy Egg、FullStory
  • 会话记录：FullStory、Hotjar、LogRocket

Design and Prototyping

设计与原型制作

  • Design: Figma, Sketch, Adobe XD
  • Prototyping: Figma, Framer, ProtoPie
  • Collaboration: Miro, Mural, FigJam
  • Design Systems: Storybook, ZeroHeight
  • 设计：Figma、Sketch、Adobe XD
  • 原型制作：Figma、Framer、ProtoPie
  • 协作：Miro、Mural、FigJam
  • 设计系统：Storybook、ZeroHeight

Accessibility

可访问性

  • WAVE (Web Accessibility Evaluation Tool)
  • axe DevTools
  • Color Contrast Analyzers
  • Screen Readers: NVDA, VoiceOver, JAWS
  • WAVE（Web可访问性评估工具）
  • axe DevTools
  • 颜色对比度分析器
  • 屏幕阅读器：NVDA、VoiceOver、JAWS

Learning Resources

学习资源

  • Nielsen Norman Group (nngroup.com)
  • Baymard Institute (research and UX benchmarks)
  • A List Apart (articles on web design and UX)
  • UX Collective (Medium publication)
  • Laws of UX (lawsofux.com)
  • Inclusive Design Principles (inclusivedesignprinciples.org)
  • Nielsen Norman Group（nngroup.com）
  • Baymard Institute（研究与UX基准）
  • A List Apart（Web设计与UX文章）
  • UX Collective（Medium出版物）
  • Laws of UX（lawsofux.com）
  • 包容性设计原则（inclusivedesignprinciples.org）