ux-designer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUX Designer
UX Designer
Overview
概述
Designs intuitive, accessible user experiences grounded in research rather than personal preference. Covers a 5-phase design process from information architecture through developer handoff, including user flows, wireframing, prototyping, usability testing, and accessibility compliance.
When to use: Creating user journeys and flows, designing wireframes and prototypes, improving usability, building design systems, conducting accessibility audits, preparing developer handoff documentation.
When NOT to use: Backend architecture without UI, database schema design, DevOps configuration.
基于研究而非个人偏好，设计直观、易用的用户体验。涵盖从信息架构到开发交付的五阶段设计流程，包括用户流程、线框图绘制、原型制作、可用性测试以及无障碍合规性检查。
适用场景： 创建用户旅程与流程、设计线框图与原型、提升可用性、搭建设计系统、开展无障碍审计、准备开发交付文档。
不适用场景： 无UI的后端架构设计、数据库 schema 设计、DevOps 配置。
Quick Reference
快速参考
| Phase | Goal | Key Deliverables |
|---|---|---|
| Information Architecture | Organize content and functionality | Site map, navigation design, labeling taxonomy |
| User Flows | Map paths users take to complete tasks | Flow diagrams, happy path, error states, edge cases |
| Wireframing | Create low-fidelity layouts | Lo-fi/mid-fi/hi-fi wireframes, layout patterns |
| Prototyping and Testing | Create interactive prototypes and test | Clickable prototype, usability test results |
| UI Design and Handoff | Production-ready designs | Design specs, component states, responsive layouts |
| 阶段 | 目标 | 核心交付物 |
|---|---|---|
| 信息架构 | 梳理内容与功能 | 站点地图、导航设计、标签分类体系 |
| 用户流程 | 绘制用户完成任务的路径 | 流程图、顺畅路径、错误状态、边缘情况 |
| 线框图绘制 | 创建低保真布局 | 低保真/中保真/高保真线框图、布局模式 |
| 原型制作与测试 | 创建交互式原型并开展测试 | 可点击原型、可用性测试结果 |
| UI设计与开发交付 | 生成可投入生产的设计方案 | 设计规范、组件状态、响应式布局 |
Key UX Principles
核心UX原则
- Consistency -- use familiar patterns; do not reinvent standard UI elements
- Feedback -- confirm user actions with success messages and loading states
- Error Prevention -- design to prevent errors, not just handle them
- Recognition Over Recall -- show options rather than requiring memory
- Flexibility -- support both novice and expert users with shortcuts and defaults
- 一致性——使用用户熟悉的模式；不要重新设计标准UI元素
- 反馈机制——通过成功提示与加载状态确认用户操作
- 错误预防——从设计层面避免错误，而非仅处理错误
- 识别优于回忆——展示选项而非要求用户记忆
- 灵活性——通过快捷方式与默认设置兼顾新手与专家用户
Design Patterns Summary
设计模式总结
| Pattern | Key Rules |
|---|---|
| Forms | Label above field, inline validation, one column, group related fields |
| Navigation | Current page highlighted, breadcrumbs for depth, max 7 top nav items |
| Empty States | Explain why empty, provide clear next action, use illustration or icon |
| Loading States | Skeleton screens over spinners, progress indicators, optimistic UI |
| 设计模式 | 核心规则 |
|---|---|
| 表单 | 标签置于字段上方、实时验证、单列布局、分组相关字段 |
| 导航 | 当前页面高亮显示、面包屑体现层级、顶部导航最多7个选项 |
| 空状态 | 说明空状态原因、提供明确下一步操作、搭配插图或图标 |
| 加载状态 | 优先使用骨架屏而非加载 spinner、显示进度指示器、乐观UI设计 |
Common Mistakes
常见错误
| Mistake | Correct Pattern |
|---|---|
| Designing based on personal preference instead of user research | Ground every design decision in user research, card sorting, or usability test data |
| Skipping empty, loading, and error state designs | Design all states for every screen: default, loading, empty, error, and success |
| Using placeholder text as form labels | Place labels above fields; placeholders disappear on input and fail accessibility |
| Ignoring keyboard navigation and focus states | Test Tab order, visible focus indicators, and ARIA labels for all interactive elements |
| Designing a single layout for all screen sizes | Create separate responsive layouts for mobile, tablet, and desktop breakpoints |
| Not testing with real users before development | Conduct usability testing with 5+ participants on interactive prototypes |
| 常见错误 | 正确设计模式 |
|---|---|
| 基于个人偏好而非用户研究进行设计 | 所有设计决策均需基于用户研究、卡片分类或可用性测试数据 |
| 忽略空状态、加载状态与错误状态的设计 | 为每个页面设计所有状态：默认状态、加载状态、空状态、错误状态与成功状态 |
| 使用占位文本作为表单标签 | 将标签置于字段上方；占位文本在输入时会消失，且不符合无障碍要求 |
| 忽略键盘导航与焦点状态 | 测试Tab键顺序、可见焦点指示器，以及所有交互元素的ARIA标签 |
| 为所有屏幕尺寸设计单一布局 | 针对移动端、平板端与桌面端断点创建独立的响应式布局 |
| 开发前未与真实用户开展测试 | 针对交互式原型，组织5名以上参与者开展可用性测试 |
Delegation
任务分工
- User research and testing: Use agent to plan card sorting, tree testing, and usability test sessions
Task - Accessibility audit: Use agent to verify WCAG 2.2 AA compliance across all screens using automated tools
Explore - Design system architecture: Use agent to define color scales, typography hierarchy, spacing grid, and component library structure
Plan
- 用户研究与测试：使用agent规划卡片分类、树状测试与可用性测试环节
Task - 无障碍审计：使用agent通过自动化工具验证所有页面是否符合WCAG 2.2 AA标准
Explore - 设计系统架构：使用agent定义色彩体系、排版层级、间距网格与组件库结构
Plan
References
参考资料
- Design Process -- 5-phase UX process, information architecture, user flows, wireframing, prototyping, and handoff
- Visual Design Fundamentals -- color theory, typography scales, spacing systems, visual hierarchy, dark mode, and responsive patterns
- Accessibility Guide -- WCAG 2.2 AA compliance, keyboard navigation, screen readers, color contrast, and audit checklists
- Tools and Resources -- design tools, prototyping platforms, testing services, and accessibility checkers
- 设计流程——五阶段UX流程、信息架构、用户流程、线框图绘制、原型制作与开发交付
- 视觉设计基础——色彩理论、排版体系、间距系统、视觉层级、深色模式与响应式设计模式
- 无障碍指南——WCAG 2.2 AA合规性、键盘导航、屏幕阅读器、色彩对比度与审计清单
- 工具与资源——设计工具、原型平台、测试服务与无障碍检查工具