UI设计
适用范围
- 适用于桌面、移动和Web的视觉界面设计、实现、修改、审查、优化或原则指导请求。纯后端、纯数据库以及其他不涉及视觉界面的任务不在本技能范围内。
- 本技能独立于SDLC工作流，可单独安装。对于同时涉及信息组织、交互行为或恢复的任务，请使用可用的UX指导（如
sdlc-ux-design）来进行相关决策。 - 当仅请求原则指导时，应仅在该层面给出简要回答，不要扩展到产品特定的设计、实现或验收测试。
- 对于纯审查请求，应报告发现和推荐建议，而不创建新设计或更改实现。
- 设计探索、提案、概念比较和原型验证仅创建或修改独立的设计工件。仅当请求包含实现时，才可更改生产代码。
- 对于混合请求，先交付设计，再继续执行授权的实现。分别交付和评估；原型验证不构成实现验收。
- 对于实现，遵循现有项目检查。当当前环境支持复现缺陷时，应重点对该缺陷进行复检；对其他行为变化的检查，根据其风险和范围进行选择。不得为了满足本技能而设置额外的验证环境、生成正式的验证报告或重复现有的检查。
- 对于实现结果，应报告已执行的检查、观察结果以及未验证的范围。区分运行时证据、基于代码的推断和主观判断；模型自我评估不等于用户验收。
按需阅读
- 遵循以下共享原则，并根据实际目标和场景阅读平台参考。
- 桌面：阅读桌面原则。
- 移动端：阅读移动端原则。
- Web：阅读Web原则。
- 对于移动Web，同时阅读移动端和Web原则。对于其他组合，根据所选文档的条件加载额外参考。
- 如果平台未指定，首先从任务和项目上下文中推断。对于一般建议，仅使用共享原则。仅当具体任务仍然缺乏必要的平台决策时，才要求澄清。
- 关于适配的上下文或限制，请查阅源上下文中的链接条目，必要时查阅原始段落。本技能中的英文说明定义了本地适配；查阅不会引入上游工作流或工具链。
设计交付
本节适用于所请求的视觉探索、提案、概念比较或原型验证，无论变更大小。在混合任务中，它适用于设计部分；实现交付和验收遵循任务和现有项目要求。
- 首先通过图像生成提交UI设计提案。现有的界面截图可作为参考。如果图像生成不可用或失败，则以单页HTML工件的形式提交提案。源上下文.
- 对于UI/UX组合设计，提供UI设计图像和交互式UX HTML原型。当UI使用HTML回退时，将两者合并到一个HTML工件中。
- 对于HTML工件，默认使用内联CSS和JavaScript，以便直接打开。使用本地状态和清晰标识的示例数据来展示约定的交互范围。
- 在预期的视口下检查渲染的设计，尽可能使用实际内容；否则使用清晰标识的代表性内容。源上下文.
- 交付时以图像、预览和可打开文件为主。附带说明应简短，仅限于打开说明、模拟范围和必要的限制。
共享原则
原则的应用
- 应用与所请求工作、目标平台和场景相关的原则。
- 解释影响建议的条件和权衡。不要普遍规定特定的视觉风格。
- 在引用数值要求或建议之前，验证其来源、单位以及是否适用于目标平台。
设计原则
- 入口点和控件：使主要入口点在视觉上可识别。通过控件的外观、标签和位置来传达如何使用它及其操作的含义。源上下文.
- 一致性和风格：使图标、组件和装饰与产品目的和现有设计惯例保持一致。添加装饰时，保持内容可读性和操作可用性。选择适合产品类型、目标受众、使用环境和明确视觉偏好的视觉风格。源上下文.
- 视觉设计系统：默认使用产品级别的视觉设计规则，明确按页面划分的异常规则在这些页面上优先。按语义角色组织可重用的设计值和模式，当重复需求得到确认时提取共享定义。在决定重用内容时，保留意图上的区别。源上下文.
- 美学方向：当用户的明确美学选择与本技能的风格偏好冲突时，遵循用户的选择。源上下文.
- 展示概念：将展示页面的视觉概念建立在其主题特有的特征之上。源上下文.
- 内容适配：选择能够容纳实际内容形式、长度和数量的布局。当结构无法容纳所需内容时，调整结构，同时保留事实和必要信息。源上下文.
- 可用媒体：当视觉方法依赖于媒体时，应基于已存在或可实际获取的资源。当所需资源不可用时，选择可行的构成。源上下文.
- 排版：根据阅读条件选择字体、大小和行距。通过字号和字重建立层次。保持正文和支持文本的可读性，包括放大时，不裁剪或隐藏必要的内容或控件。
- 目标语言：针对产品支持的语言和书写系统，在排版和布局中适应文本扩展、阅读方向和特定脚本的造型。源上下文.
- 布局和间距：使用位置和分组来表达重要性和关系。一致地应用对齐和间距。使密度与阅读、比较和操作需求相匹配。避免竞争性的强调。根据界面或容器可用的空间选择布局结构。当空间变化时，根据需要重新组织内容，保持主要内容和操作的可访问性。源上下文.
- 颜色、状态和焦点：定义主色、辅助色和状态色并一致使用。确保文本、控件和状态有足够的对比度。当颜色传达信息时，辅以文本或形状。使控件状态和焦点在视觉上可识别。对于产品支持的每种外观，验证文本和控件的可读性以及状态区分。如果目标平台暴露了高对比度偏好，在渲染的界面中遵循它。源上下文.
- 交互目标：根据鼠标、触摸或其他输入方式设置目标的大小和间距，使其易于选择而不会意外触发相邻控件。
- 数据编码：当以图形方式呈现数据时，选择适合用户需要理解的关系的视觉编码。明确适用的单位和比例。源上下文.
- 动效目的：在面向任务和阅读的界面上，使用动效来提供反馈、指示状态变化或增强连续性。当动效解释变化时，使其因果关系易于理解。在说服性或体验性界面上，动效本身可能具有明确的表达目的。当用户启用目标环境支持的减少动效偏好时，遵循它。当减少或替换动效时，保持内容可读性和必要的状态变化可理解。非必要的动效不得阻塞输入。当交互支持切换或取消时，使其动画可中断并过渡到最新的交互状态；中断动画本身不会取消后台操作。源上下文.