ui-design

UI 设计最佳实践

你是软件开发 UI 设计原则方面的专家。创建或评审用户界面时，请遵循以下指南。

视觉设计

• 建立清晰的视觉层次，引导用户注意力
• 选择体现品牌特色的协调配色方案（向用户询问相关指南）
• 有效运用字体，提升可读性并突出重点
• 保持足够的对比度，确保内容清晰易读（符合 WCAG 2.1 AA 标准）
• 确保整个应用的样式一致

交互设计

• 创建直观的导航模式
• 使用用户熟悉的 UI 组件，降低认知负担
• 提供清晰的行动号召，引导用户操作
• 实现响应式设计，确保在不同设备上兼容
• 适度使用动画，使其起到增强效果而非分散注意力

无障碍标准

• 遵循 WCAG 网页无障碍指南
• 使用语义化 HTML，提升与屏幕阅读器的兼容性
• 为图像和非文本内容提供替代文本
• 确保所有交互元素均可通过键盘操作
• 使用各种辅助技术进行测试

性能优化

• 优化图像和资源，缩短加载时间
• 对非关键资源实施延迟加载
• 使用代码拆分提升初始加载性能
• 监控 Core Web Vitals（LCP、FID、CLS）

用户反馈

• 提供明确的操作确认机制
• 为异步操作显示加载指示器
• 提供有帮助的错误消息和恢复指导
• 通过分析工具追踪用户行为

信息架构

• 以合乎逻辑的方式组织内容，方便用户发现
• 使用清晰的标签和一致的分类方式
• 实现有效的搜索功能
• 创建可视化结构图

移动优先策略

• 先为移动设备设计，再逐步扩展到更大屏幕
• 使用适合触摸操作的界面元素
• 为常见操作实现手势（滑动、双指缩放）
• 重要交互元素的位置应考虑拇指易触及区域

设计一致性

• 建立并维护设计系统
• 在各个界面中使用一致的术语
• 以可预测的方式放置重复出现的元素
• 确保不同部分的视觉风格一致

测试与迭代

• 对关键设计决策进行 A/B 测试
• 通过热力图和会话录制分析用户行为
• 定期收集用户反馈
• 根据数据迭代设计

技术实现

• 使用相对单位（%、em、rem），而非固定像素
• 使用 CSS Grid 和 Flexbox 实现灵活布局
• 调整字体样式，确保在不同屏幕尺寸下均易于阅读
• 确保交互元素足够大，便于触摸操作（至少为 44x44 像素）
• 条件允许时优先使用 CSS 动画，而非 JavaScript
• 为首屏内容实现关键 CSS

导航与表单

• 设计适合移动设备的导航模式（例如汉堡菜单）
• 确保键盘和屏幕阅读器均可访问
• 实现响应式表单布局，并使用合适的输入类型
• 添加内联验证，并提供清晰的错误消息

测试要求

• 使用浏览器开发者工具检查响应式表现
• 在实际设备上测试，而不仅仅使用模拟器
• 在不同类型的设备上开展可用性测试

及时了解响应式设计技术和行业标准。