UX 设计
适用范围
- 适用于所请求的桌面、移动和Web产品任务体验设计、实现、修改、审查、优化或原则指导。仅涉及后端、数据库或其他没有面向用户交互的工作不在本技能范围内。
- 本技能独立于SDLC工作流,可单独安装。对于同时涉及视觉层级、排版、颜色、布局、控件几何或动效的任务,请使用可用的UI指导(如
sdlc-ui-design)来处理这些决策。 - 当仅请求原则指导时,应在该层面给出简要回答,而不要扩展到具体产品设计、实现或验收测试。
- 对于仅审查的请求,应报告发现的问题和建议,而不创建新设计或更改实现。
- 设计探索、提案、概念比较和原型验证仅创建或修改独立的设计工件。仅当请求包含实现时才更改生产代码。
- 对于混合请求,先交付设计,再继续执行授权范围内的实现。分别交付和评估每个部分;原型验证不能作为实现验收的依据。
- 对于实现,遵循现有项目检查。当当前环境支持复现缺陷时,使用有针对性的复检;根据其他行为变更的风险和范围选择检查项。不要仅为满足本技能而设置额外的验证环境、生成正式的验证报告或重复已有的检查。
- 对于实现结果,报告已执行的检查、观察结果和未验证的范围。区分运行时证据、基于代码的推断和主观判断;模型自我评估不代表用户验收。
按需阅读
- 遵循以下共享原则,并根据实际目标和场景阅读平台参考文档。
- 桌面端:阅读桌面原则。
- 移动端:阅读移动原则。
- Web端:阅读Web原则。
- 对于移动Web:同时阅读移动和Web原则。对于其他组合,根据所选文档的条件加载额外参考。
- 如果未指定平台,首先根据任务和项目上下文推断。对于一般性建议,仅使用共享原则。仅当具体任务仍然缺乏必要的平台决策时才要求澄清。
- 关于改编的上下文或限制,请参阅其在源上下文中的链接条目,必要时还可查阅原始段落。本技能中的英文说明定义了本地化改编;查阅不会引入上游工作流或工具链。
设计交付
本节用于请求的交互探索、提案、概念比较或原型验证,无论变更规模大小。在混合任务中,本节适用于设计部分;实现交付和验收遵循任务和现有项目要求。
- 将UX设计呈现为可交互的单页HTML工件。使主要操作、相关状态更改以及必要的返回或恢复路径在原型中可操作。检查控件和反馈是否展示了预期操作并区分了相关状态。源上下文。
- 默认使用内联CSS和JavaScript,以便HTML可直接打开。使用本地状态和明确标识的示例数据来演示约定的交互范围。
- 对于组合的UI/UX设计,首先使用图像生成本成UI方案,并提供可交互的UX HTML原型。如果图像生成不可用或失败,则使用一个HTML工件同时承载两者。源上下文。
- 在预期的视口中检查渲染后的原型,尽可能使用实际内容,否则使用明确标识的代表性内容。源上下文。
- 使用交互预览和可打开的HTML文件主导交付。伴随的说明文字应保持简短,仅限于打开说明、模拟范围和必要的限制。
共享原则
原则的应用
- 应用与所请求工作、目标平台和场景相关的原则。
- 解释影响建议的条件和权衡。
- 在引用数值要求或建议之前,请验证其来源、单位和对目标平台的适用性。
设计原则
- 任务与成果:根据用户目标和操作顺序组织UI。优先提供当前任务所需的信息和操作。根据用户在每个界面需要完成的任务来评估每个界面。源上下文。
- 入口与控件:使主要入口点可被发现,每个控件的预期操作清晰。使用标识操作及其对象的按钮标签;为含义模糊的图标添加标签。源上下文。
- 图标语义:根据图标的当前用途确定其语义。对可见文本旁边的冗余装饰性图标,应将其从无障碍树中隐藏。为有意义的独立图标提供文本替代方案。公开图标控件的可访问名称和适用状态。源上下文。
- 任务优先级:在面向任务的屏幕上,让用户首先需要回答的问题决定视觉强调和阅读顺序。源上下文。
- 呈现结构:让演示页面的主张及其证据决定它需要哪些部分及其顺序。源上下文。
- 事实性与示例性内容:关于真实产品、客户或业务活动的主张和证据应基于现有事实。明确标识示例性内容。源上下文。
- 数据一致性:在相同的报告范围内,使同一事实在其出现的所有地方保持一致,并使派生数据与其底层数据保持一致。明确说明范围、时间周期或计算基础的差异。源上下文。
- 认知负荷:呈现决策所需的选项和上下文,减少记忆和重复输入,并允许用户检查和更改默认值。在相关时才展示复杂选项。让决策所需的信息在决策点可用,包括在减少步骤时。源上下文。
- 学习:减少界面引入的不必要脑力负担。支持有助于用户理解和掌握其任务的学习。源上下文。
- 简化:通过移除用户任务中的障碍来判断简化是否成功。保留必要的功能、决策相关信息和无障碍性。源上下文。
- 一致性:遵循平台交互惯例和一致的控件行为。
- 状态与等待反馈:显示用户在任务或导航中的当前位置、处理状态和结果。区分加载、空数据和失败。对操作及时响应。对于耗时操作,提供可靠的状态,并在可测量时显示实际进度。根据重要性调整反馈规模,避免频繁中断。将每个状态的呈现和可用操作与其含义对应;区分只读、禁用和进行中状态。源上下文。
- 用户控制:提供可发现的退出、取消和返回操作。在适当情况下支持撤销和重做,并明确说明它们影响哪些更改。在不可逆操作前解释后果。视觉过渡不得阻止支持的返回、切换或取消操作。区分中断动画和取消后台操作。源上下文。
- 模态:将模态交互保留给需要中断当前工作或保护焦点的任务。源上下文。
- 错误预防与恢复:在约束条件适用的地方提前说明输入和操作约束。当后果严重时要求确认。在适当时间验证,而不中断未完成的输入。失败时,保留有效输入,识别问题及其位置,解释已知原因而不将猜测当作事实,并提供恢复路径。
- 连接与恢复:对于依赖网络的任务,说明在有限连接下可用的能力。提供产品实际支持的回退或恢复操作。源上下文。
- 界面语言:使用目标受众能够理解的语言。当熟悉的领域术语能够准确传达预期含义时,保留这些术语。源上下文。
- 无障碍操作:支持目标环境中的键盘和辅助技术,控件名称、状态和焦点可识别。为精确输入或复杂手势提供等效操作。根据实际可用的输入能力选择交互行为。使主要操作无需悬停即可使用。源上下文。