设计外观统一、人人都好用的网页界面（UI）

## 让最重要的信息和下一步操作一眼就能看出 先利用视觉权重明确体现重要性，再完善装饰。页面应帮助人们在数秒内识别其用途、理解主要价值并看出下一步操作。 - 每个屏幕或区块只传达一个主要信息。 - 核心层级保持为页面标题、区块标题和正文；仅在必要时添加更深层级。 - 通过尺寸、对比度、位置和周围留白来强化更重要的内容。 - 需要快速浏览时，将结论置于支持性细节之前。 - 将最强的视觉处理留给主要操作或决策。 - 避免让每个元素都变得很大、加粗、色彩鲜艳或具有高对比度。 - 进行5秒测试：新访客能否说明页面内容及其预期的下一步操作？ ## 用统一的网格和间距排列页面元素 间距能够传达关系。使用统一的尺度和网格，使相关项目显得相互关联、不同分组保持清晰区分，并让布局在变化时不会失去节奏。 - 从8像素间距尺度开始；需要更精细的控制时，可采用4像素的细分尺度。 - 使用简单的响应式网格，例如手机采用1列、平板采用2列、宽屏最多采用12列。 - 组内间距应小于组间间距。 - 将重复组件与共同的列、边缘和基线对齐。 - 可先将正文行高设为约1.6，将段落间距设为约1.5至2倍行高。 - 对间距值使用令牌，不要创建数值接近但重复的度量。 - 在每一种受支持的宽度下，检查各区块和组件之间的垂直节奏。 ## 从手机到宽屏，都保持清楚的阅读顺序 按照人们所需的顺序安排内容，再让视觉布局强化这一顺序。响应式设计必须保留含义，而不能只是让内容适应更小的屏幕。 - 首先为移动端设计内容顺序，再为更宽的屏幕增强布局。 - 在可行的情况下，将日文正文每行控制在约35至45个字符，将拉丁文字控制在约45至75个字符。 - 网页段落之间使用间距分隔，不要依赖首行缩进。 - 每个区块先给出要点，再提供证据，并将相关操作放在证据之后。 - 确保仅阅读标题而不看正文时，标题顺序仍然易于理解。 - 当多列折叠或元素移动时，保留符合逻辑的源代码顺序。 - 测试缩放、文本放大、窄屏宽度、长标签、日期、价格和混合文字系统。 ## 设定易读的字号和行高 排版能够建立层级、可读性和信任。使用有限的字号尺度和充足的行高，使文本在小屏幕上保持舒适，并在内容变化时保持稳定。 - 可先将H1设为约28至36像素，H2设为22至28像素，H3设为18至20像素，正文设为16至18像素。 - 正文行高采用约1.6，标题行高采用约1.25至1.4。 - 在移动端，不要依赖13至14像素或更小的正文字号。 - 限制字体系列和字重的数量；先通过层级形成区分，再增加更多字体。 - 日文使用常规字距；仅在必要时对拉丁展示文字使用细微的字距调整。 - 仅对真正有助于快速浏览的少数短语使用粗体强调。 - 测试数字、符号、多语言字符串、用户生成的文本和缺失字形。 ## 少用颜色，保证文字有足够的对比度 颜色应传达优先级、状态和身份，但不能成为传达含义的唯一方式。克制的配色方案能让主要操作和重要的状态变化更容易识别。 - 使用一种主导背景色、一组辅助文字色或表面色，以及少量强调色。 - 可先采用约3种功能色，再加上中性色和1种主要强调色。 - 一致地为成功、警告、危险和信息状态分配颜色。 - 普通文本的对比度至少以4.5:1为目标，大号文本至少以3:1为目标。 - 通过颜色、形状、标签和位置的独特组合来呈现主要操作。 - 对以颜色编码的状态，同时使用文字、图标、图案或其他非颜色提示。 - 检查每一种前景与背景组合，包括禁用、悬停、焦点和图像叠加状态。 ## 把重复使用的按钮等整理成共用组件 一致性可以降低用户的学习成本和团队的维护成本。将反复出现的视觉决策转化为共享令牌和组件，而不是逐页修正。 - 为颜色、间距、排版、圆角、边框、阴影和动效定义令牌。 - 构建可复用的按钮、卡片、导航、表单、对话框、徽章和反馈元素。 - 在适用处定义默认、悬停、激活、禁用、加载、错误和焦点状态。 - 根据用途或角色命名变体，不要根据暂时的外观命名。 - 让相同角色在整个产品中保持视觉和行为的一致性。 - 记录允许使用的变体、内容规则、无障碍要求和响应式行为。 - 模式发生变化时应修改共享组件，避免出现页面特有的偏差。 ## 让图片和图标用于说明，而不只是装饰 图像、图标和图示应发挥解释、引导或增强信任的作用。标准化素材处理既能提升感知质量，也能防止装饰掩盖信息。 - 为主视觉和卡片等反复出现的素材角色指定一致的宽高比。 - 将图像调整为其显示尺寸，并优先采用高效的现代格式。 - 提供响应式图像源；在不会隐藏关键内容的前提下，延迟加载屏幕外的图像。 - 编写能够传达图像用途的替代文本，而不只是描述其外观。 - 在同一图标集中保持描边、圆角、填充和视觉尺寸一致。 - 将图示组织为解释、视觉模型和简明结论，并提供清晰的图例。 - 验证图像上文字的对比度，并在必要时提供稳定的背景处理。 ## 点击或输入时，迅速给出简洁的反馈 交互设计应表明哪些内容可用、确认输入、显示进度并确认结果。动效必须阐明状态变化，不能延误工作或引起不适。 - 在可行的情况下，对主要输入在约100毫秒内提供可见响应。 - 悬停和过渡持续时间应较短，通常约为120至200毫秒。 - 为相关控件定义按下、加载、成功、错误、禁用和焦点反馈。 - 当操作无法立即完成时，使用进度指示器或骨架屏。 - 使用方向和缓动来解释空间或图层变化，而不是仅作装饰。 - 避免使用与内容争夺注意力、使注意力被困住或阻止输入的动画。 - 尊重减少动态效果的偏好，不要自动播放会分散注意力的背景媒体。 ## 让键盘和屏幕阅读器用户也能完成操作 无障碍是核心交互要求，而不是最后才进行的视觉审查。人们必须能够通过不同的输入和输出方式感知状态、理解控件、进行导航、从错误中恢复并完成主要流程。 - 保留可见的焦点指示器和符合逻辑的键盘导航顺序。 - 在可行的情况下，使交互目标至少达到44×44像素。 - 为图像提供有意义的替代内容，为控件提供无障碍名称，并为表单字段提供明确标签。 - 确保错误信息指出相应字段、解释问题并说明修正方法。 - 为有实质内容的音频和视频提供字幕或文字稿。 - 仅使用键盘并结合屏幕阅读器输出，验证完整的关键流程。 - 测试对比度、缩放、文本大小调整、减少动态效果以及常见的色觉差异。 ## 发布前检查加载速度和搜索基本设置 性能、可发现性和可维护性都是设计体验的一部分。定义可量化的发布检查并保留决策，使改进能够经受日常内容和组件变更。 - 使用响应式压缩图像，并仅在需要时加载非关键素材。 - 对字体进行子集化，允许回退渲染，尽量减少阻塞样式，并延迟加载非必要脚本。 - 每个页面使用一个有意义的H1，并提供各不相同的标题、描述和社交分享预览。 - 将LCP低于2.5秒、CLS低于0.1作为初始目标，然后采用当前的性能标准。 - 在最重要的注册、购买或请求流程中测试速度和放弃率。 - 发布前审查层级、间距、排版、颜色、状态、素材、无障碍和性能。 - 记录设计决策，并通过共享组件和令牌实施变更。 - 监测真实用户结果，并在证据表明存在更优标准时调整阈值。