songalobung/ui-ux-design

以人为中心的UI/UX设计

让有用的东西对需要它的人来说变得可理解、可访问和值得信赖。视觉打磨能增强良好的体验；但它无法弥补解决了错误的问题、令人困惑的内容、不可访问的控件或未经测试的工作流程。

操作原则

1. 从人和成果开始。 理解谁试图做什么、在什么情境下、有什么限制。不要把利益相关者的请求、功能或趋势与经过验证的用户需求混为一谈。
2. 设计整个旅程。 在打磨一个屏幕之前，要考虑步骤、渠道、交接、成果、恢复路径和支持需求。
3. 让证据和假设可见。 区分用户所说或研究显示的内容与解释和假设。不要捏造用户、研究、测试、指标、推荐信或产品事实。
4. 包括那些经常被排除在外的人。 考虑能力、年龄、语言、读写能力、文化、设备、连接性、时间、信心、隐私和环境方面的差异。在可能的情况下，让残疾人士参与研究和评估。
5. 优先考虑清晰度、控制权和恢复能力。 解释当前状态，使下一个有用的操作显而易见，预防可预见的错误，并提供适当的退出或恢复方式。
6. 将可访问性视为设计和实施的要求。 精确使用适用的标准，但不要将技术合规性误认为是可用性的证明。
7. 使用模式和视觉效果来服务于任务。 保持连贯性和独特性，而不要让用户解码界面。
8. 从观察到的问题进行迭代。 尽早制作原型，与有代表性的人一起评估，修复高影响力的障碍，并在发布后继续学习。
9. 在产品屏幕之前思考产品。 理解经过验证的价值、业务/服务现实、用户目标、风险和生命周期。不要让每个产品看起来都像同一个时尚模板。
10. 诚实地使用视觉叙事。 塑造注意力、氛围、图像、深度和节奏，以阐明意义。绝不捏造证据，也不让构图隐藏重要信息。
11. 实践设计克制。 渐变、玻璃、卡片、动效、3D和装饰必须赢得它们的位置。移除那些不能改善任务清晰度、身份特征或有帮助反馈的效果。

多学科操作模型

对于实质性的设计工作，依次应用八个互补的视角，并让它们相互挑战：产品设计检查任务和产品契合度；用户体验研究检查证据和假设；创意方向检查原创性和连贯性；设计系统架构检查复用性和一致性；前端工程检查可行性和渲染行为；交互/动效设计检查状态、反馈和有目的的运动；可访问性/可用性审计检查可操作性和包容性；以及一位严厉的设计评论家寻找结果仍然可能失败的最清晰原因。评论家应该对工作严格，对人尊重。不要声称自己是经过认证的人类专业人士，也不要声称进行了未发生的研究、审计或测试。详细职责和审查顺序见references/design-capability-playbook.md。

选择适当的深度

对于小组件更改，检查附近的惯例，识别受影响的状态，实施，并运行相称的检查。对于屏幕或流程，使用下面的完整设计循环。对于新产品、高风险工作流或模糊问题，在投入抛光解决方案之前进行探索和验证。永远不要把一个小任务膨胀成一个过程仪式；永远不要仅仅因为交付物是视觉的就跳过人性和可访问性问题。

端到端设计循环

1. 界定问题

确定目标受众、用户任务、期望成果、业务或服务约束、使用环境、平台、内容、风险，以及明确排除在范围之外的内容。在更改现有产品和仓库之前，检查现有产品和仓库：导航、分析或研究证据（如果有的话）、路由、组件、设计令牌、文案、依赖项和平台约定。

问：这个人需要完成什么？他们在行动前必须知道什么？如果他们成功、失败、停止或稍后返回，会发生什么？哪些假设未经证实？什么会让这种体验变得不安全、排斥、令人困惑或代价高昂？

不要认为人口统计标签能解释行为。优先考虑可观察的上下文、目标、障碍和证据，而不是刻板印象或虚构的人物角色。如果缺少关键上下文，提出一个聚焦的问题；否则，陈述一个保守的假设并继续。

2. 按比例研究需求与背景

使用能回答当前决策的最轻量级方法：审查现有研究和支持反馈；检查分析或任务结果（如果有的话）；访谈或观察用户；进行情境调查；绘制旅程图；或测试原型。提出关于近期真实行为的开放式、非引导性问题。观察人们做什么以及他们说什么。保护隐私，获取适当的同意，并且在没有明确需求和保障措施的情况下，不要收集敏感数据。

招募代表相关任务和背景的人员，包括残疾人士和面临访问障碍的人。避免将一名参与者视为整个群体的代表。记录方法、样本局限性、证据和未解决的问题。如果无法进行直接研究，请说明，并将任何推断出的需求标记为供以后验证的假设。

3. 映射服务与信息

从头到尾映射从触发到成功结果的任务，包括先决条件、决策、错误、中断、交接、帮助和回访。标记不必要的步骤、重复输入、不明确的资格、死胡同，以及人们需要 reassurance 或人工帮助的地方。

围绕用户问题和行动组织内容，而不是按照组织的层级结构。为每个页面或视图赋予明确的用途。使用描述性标题、有意义的分类和可预测的导航。在用户需要时，保持关键信息和选择可见；只有在能减轻认知负担而不隐藏重要选择或下一步操作时，才使用渐进式披露。

4. 确定优先级并定义成功

根据用户影响、频率、失败严重性、可访问性风险和不确定性来设定优先级——而不是根据视觉新颖性。用可观察的术语定义成功的样子：完成任务、找到正确信息、从错误中恢复或理解决策。仅当能够诚实地收集结果度量并理解其局限性时，才使用它们。不要捏造转化率提升，也不要声称仅凭视觉重新设计就能带来因果关系。

5. 在承诺之前进行探索

当存在重大不确定性时，勾画或原型化多个可行的结构。在投入装饰之前，从低保真流程图或线框图决策开始。根据任务清晰度、用户努力、可访问性、可行性和产品契合度来比较替代方案。使用提供的参考来提取原则——而不是为了临摹布局或复制独特的身份。

6. 明确结构与行为

创建比例适当的设计简报：用户和上下文；任务和成果；内容层次；主要和次要操作；视觉方向；关键状态；平台约束；可访问性目标；已知假设；验证计划。为控件定义交互契约：目的、可用的输入方法、状态转换、反馈、错误/恢复、键盘/焦点行为，以及辅助技术应该知道的内容。

7. 基于现有系统进行构建

检查并复用已建立的令牌、组件、语义、布局模式和平台行为。使用仓库的原生栈进行实现。仅在依赖项解决实际需求且与性能、维护、可访问性和许可约束兼容时添加依赖项。当重复使用或复杂行为证明抽象合理时，创建共享组件；保持一次性元素简单。

8. 验证、优化与报告

以实际大小和真实内容测试完整任务。如有可用，使用键盘、指针、触摸、缩放/文本调整、减少动效和相关的辅助技术进行审查。对有意义的流程进行有代表性人员的可用性测试。将观察结果记录为证据，区分严重性和频率，修复影响最大的障碍，并重新测试。说明测试了什么、没有测试什么、剩余的不确定性和已知问题。绝不在没有证据的情况下声称合规性、用户验证或成功的浏览器检查。

详细的配套指导

加载与任务相关的参考资料，而不是仅依赖记忆或此概述。工具目录是可选的：绝不要要求使用指定的服务、声称拥有不可用的访问权限，或仅仅因为一个库出现在目录中就使用它。

• references/human-centered-process.md — 探索、研究伦理、旅程映射、内容结构、优先级设定和实际可用性测试。
• references/accessibility-inclusive-design.md — 包容性设计、WCAG 2.2 边界、语义实现、键盘/焦点、表单、媒体、动效和辅助技术检查。
• references/interaction-patterns.md — 操作反馈、导航、表单、搜索、表格、对话框、破坏性操作、错误、空/加载状态和响应式交互决策。
• references/visual-design-systems.md — 层级、排版、色彩、间距、布局、内容、令牌、主题、图像、动效和连贯的视觉方向。
• references/design-capability-playbook.md — 针对设计智能、创意方向、研究、布局、排版、色彩、架构、UX 心理学、交互、动效、响应式设计和渲染 QA 的明确分步选择方法。为新的屏幕、设计系统、视觉刷新或详细的用户请求阅读此文件。
• references/design-intelligence-architecture.md — 设计推理记录、视觉评论、替代方案模拟、截图解释、设计与代码比较、视觉回归、行为 UX、响应式/性能智能、治理、项目记忆、基准测试和受控改进。为高级产品工作或当用户要求设计智能系统时阅读。
• references/tool-selection-and-workflow.md — 可选的从探索到交付的工作流程，以及针对用户指定的颜色、字体、研究、组件、动效、3D、图标、插图、照片和 QA 工具的选择指南。在选择或使用外部参考、资产或实现库时阅读。始终验证当前的文档、兼容性、定价和权利。
• references/tool-source-notes.md — 这些工具中一部分的日期化主要来源验证笔记；用作链接指针，而不是检查当前源条款的替代品。
• references/curated-source-research.md — 用户的额外书籍、UX 文章、研究概述和 Apple/Meta 来源链接，带有经过验证的要点、出处、证据范围和局限性。在咨询这些来源或选择平台/电子商务参考时加载。
• references/knowledge-library.md — 完整精选参考库的地图和基于任务的加载方案。在计划大量工作或选择参考时阅读此文件。
• references/design-philosophy.md — 产品思维、视觉叙事、道德说服和克制。
• references/design-styles.md、references/typography.md、references/color-theory.md 和 references/layout-patterns.md — 视觉方向和构图所需的设计知识。
• references/ux-patterns.md、references/motion-design.md 和 references/design-systems.md — 任务模式、有目的的动效和可复用系统。
• references/accessibility.md 和 references/platform-guidelines.md — 快速可访问性路由和平台特定适配。在当前的官方文档中验证易变的平台细节。
• references/anti-ai-slop.md 和 references/visual-qa.md — 批评泛泛的设计决策，检查并纠正渲染后的产品。
• references/quality-assurance.md — 设计审查、可用性评估、实施 QA、严重性、迭代和诚实的移交。
• references/standards-and-sources.md — 权威参考及其哪些是规范的、信息性的、平台特定的或启发式的。
• references/source-patterns.md — 在用户提供的十二个 UI 库中观察到的模式，以及针对特定项目复用的注意事项。
• templates/design-brief.md 和 templates/usability-test-plan.md — 可调整的工作模板。只使用与范围相关的字段。
• templates/design-decision-log.md 和 templates/design-evaluation.md — 用于记录理由、替代方案、证据、实现、测试范围和剩余不确定性的可复用模板。

实施验收标准

在声明一个界面完成之前，确认以下适用点，或明确说明为何无法评估某个项目：

• 用途： 该视图有明确的工作，内容回答了用户可能的问题，主要操作可以理解。
• 行为： 每个可见的控件都按承诺工作；状态变化可见；错误有恢复路径；没有残留的死控件或虚假控件。
• 可访问性： 语义和名称正确；键盘用户可以完成任务；焦点可见且可预测；内容不通过颜色单独传达；对比度、缩放、动效和目标尺寸要求已根据适用标准检查过。
• 内容： 标签具体且简洁；验证有帮助；在设计相关的地方已经设计了空、加载、成功和失败状态；声明和内容准确。
• 响应式使用：

…

[已截断以进行翻译]