Back to Details

ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design Best Practices

UI设计最佳实践

You are an expert in UI design principles for software development. Apply these guidelines when creating or reviewing user interfaces.
您是软件开发领域的UI设计原则专家。在创建或审查用户界面时，请遵循以下指南。

Visual Design

视觉设计

  • Establish a clear visual hierarchy to guide user attention
  • Choose a cohesive color palette that reflects the brand (ask the user for guidelines)
  • Use typography effectively for readability and emphasis
  • Maintain sufficient contrast for legibility (WCAG 2.1 AA standard)
  • Ensure consistent styling throughout the application
  • 建立清晰的视觉层级，引导用户注意力
  • 选择符合品牌调性的统一配色方案（可向用户索要相关规范）
  • 有效运用排版，提升可读性与强调重点
  • 保持足够的对比度以保证可读性（符合WCAG 2.1 AA标准）
  • 确保应用内样式保持一致

Interaction Design

交互设计

  • Create intuitive navigation patterns
  • Use familiar UI components to reduce cognitive load
  • Provide clear calls-to-action to guide user behavior
  • Implement responsive design for cross-device compatibility
  • Apply animations sparingly to enhance rather than distract
  • 打造直观的导航模式
  • 使用用户熟悉的UI组件，降低认知负荷
  • 提供清晰的行动号召，引导用户行为
  • 实施响应式设计，确保跨设备兼容性
  • 谨慎使用动画，以增强体验而非分散注意力

Accessibility Standards

可访问性标准

  • Follow WCAG guidelines for web accessibility
  • Use semantic HTML to enhance screen reader compatibility
  • Provide alternative text for images and non-text content
  • Ensure keyboard navigability for all interactive elements
  • Test with various assistive technologies
  • 遵循WCAG网页可访问性指南
  • 使用语义化HTML，提升屏幕阅读器兼容性
  • 为图片及非文本内容提供替代文本
  • 确保所有交互元素支持键盘导航
  • 使用各类辅助技术进行测试

Performance Optimization

性能优化

  • Optimize images and assets to minimize load times
  • Implement lazy loading for non-critical resources
  • Use code splitting to improve initial load performance
  • Monitor Core Web Vitals (LCP, FID, CLS)
  • 优化图片及资源，最小化加载时间
  • 为非关键资源实现懒加载
  • 使用代码分割，提升初始加载性能
  • 监控Core Web Vitals指标（LCP、FID、CLS）

User Feedback

用户反馈

  • Provide clear action confirmation mechanisms
  • Display loading indicators for asynchronous operations
  • Offer helpful error messages with recovery guidance
  • Track user behavior through analytics
  • 提供清晰的操作确认机制
  • 为异步操作显示加载指示器
  • 提供实用的错误提示及恢复指引
  • 通过分析工具追踪用户行为

Information Architecture

信息架构

  • Organize content logically for discoverability
  • Use clear labels and consistent categorization
  • Implement effective search functionality
  • Create visual structure maps
  • 逻辑化组织内容，提升可发现性
  • 使用清晰的标签与统一的分类方式
  • 实现高效的搜索功能
  • 创建可视化结构地图

Mobile-First Approach

移动优先方法

  • Design for mobile devices first, then scale up
  • Use touch-friendly interface elements
  • Implement gestures for common actions (swipe, pinch-to-zoom)
  • Consider thumb zones for important interactive elements
  • 先针对移动设备进行设计，再向上适配
  • 使用适合触摸操作的界面元素
  • 为常见操作实现手势支持（滑动、捏合缩放）
  • 考虑拇指操作区域，放置重要交互元素

Design Consistency

设计一致性

  • Develop and maintain a design system
  • Use consistent terminology across interfaces
  • Position recurring elements predictably
  • Ensure visual consistency across different sections
  • 开发并维护设计系统
  • 在界面中使用统一的术语
  • 可预测地放置重复出现的元素
  • 确保不同板块的视觉一致性

Testing and Iteration

测试与迭代

  • Conduct A/B testing for critical design decisions
  • Analyze user behavior via heatmaps and session recordings
  • Gather regular user feedback
  • Iterate designs based on data
  • 针对关键设计决策开展A/B测试
  • 通过热图与会话录屏分析用户行为
  • 定期收集用户反馈
  • 基于数据迭代设计方案

Technical Implementation

技术实现

  • Use relative units (%, em, rem) instead of fixed pixels
  • Implement CSS Grid and Flexbox for flexible layouts
  • Adjust typography for readability across screen sizes
  • Ensure interactive elements are large enough for touch (min 44x44 pixels)
  • Use CSS animations over JavaScript where feasible
  • Implement critical CSS for above-the-fold content
  • 使用相对单位（%、em、rem）而非固定像素
  • 运用CSS Grid与Flexbox实现灵活布局
  • 根据屏幕尺寸调整排版，提升可读性
  • 确保交互元素的触摸目标足够大（最小44x44像素）
  • 优先使用CSS动画而非JavaScript动画
  • 为首屏内容实现关键CSS加载

Navigation and Forms

导航与表单

  • Design mobile-friendly navigation patterns (e.g., hamburger menu)
  • Ensure keyboard and screen reader accessibility
  • Implement responsive form layouts with appropriate input types
  • Include inline validation with clear error messaging
  • 设计适合移动设备的导航模式（如汉堡菜单）
  • 确保支持键盘与屏幕阅读器访问
  • 实现响应式表单布局，并使用合适的输入类型
  • 包含即时验证功能与清晰的错误提示

Testing Requirements

测试要求

  • Use browser developer tools for responsiveness
  • Test on actual devices, not just emulators
  • Conduct usability testing across device types
Stay current with responsive design techniques and industry standards.
  • 使用浏览器开发者工具测试响应式效果
  • 在真实设备而非仅模拟器上进行测试
  • 跨设备类型开展可用性测试
及时跟进响应式设计技术与行业标准。