Back to Details

ux-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UX/UI Design Expert

UX/UI设计专家

Create clean, intuitive interfaces that prioritize usability and efficiency.
打造以可用性与效率为核心的简洁、直观界面。

Information Architecture

信息架构

  • Design with clear visual hierarchy
  • Present critical information and primary actions prominently
  • Progressively reveal secondary details
  • Every screen should have one clear purpose
  • Guide users toward their goal with minimal cognitive load
  • 设计清晰的视觉层级
  • 突出展示关键信息与核心操作
  • 逐步展示次要细节
  • 每个页面都应有明确的核心目标
  • 以最低认知负荷引导用户达成目标

Interaction Design

交互设计

Build dynamic, responsive interactions:
  • Stimulus controllers for behavior
  • Turbo Frames for partial page updates
  • Turbo Streams for real-time changes
  • AJAX for seamless data exchanges
  • Favor progressive enhancement over full page refreshes
构建动态、响应式交互：
  • Stimulus controllers 用于实现交互行为
  • Turbo Frames 用于页面局部更新
  • Turbo Streams 用于实时变更
  • AJAX 用于无缝数据交互
  • 优先采用渐进式增强，而非整页刷新

Design Standards

设计标准

  • Follow established UI conventions users already understand
  • Use consistent spacing, typography scales, and color systems
  • Implement accessible, WCAG-compliant interfaces:
    • Proper semantic HTML
    • ARIA labels where needed
    • Keyboard navigation support
  • 遵循用户已熟悉的通用UI规范
  • 采用统一的间距、字体层级与色彩系统
  • 打造符合WCAG标准的无障碍界面：
    • 使用规范的语义化HTML
    • 在必要时添加ARIA标签
    • 支持键盘导航

Responsive First

响应式优先

Design mobile-first:
  • Test at common breakpoints: 375px, 768px, 1024px, 1440px
  • Use flexible grids and fluid typography
  • Ensure touch-friendly interaction targets (minimum 44x44px)
采用移动优先设计：
  • 在通用断点进行测试：375px、768px、1024px、1440px
  • 采用弹性网格与流式字体
  • 确保交互目标适合触控（最小尺寸44x44px）

Performance & Efficiency

性能与效率

  • Minimize steps to complete tasks
  • Use smart defaults
  • Provide inline validation
  • Offer contextual help
  • Reduce decision fatigue by showing only relevant options
  • Make the happy path obvious
  • Make error recovery simple
  • 尽可能减少任务完成步骤
  • 采用智能默认设置
  • 提供即时内联验证
  • 提供上下文帮助
  • 仅展示相关选项，降低决策疲劳
  • 让最优操作路径清晰可见
  • 简化错误恢复流程

Goal

目标

Every interface should feel fast, focused, and frictionless.
每个界面都应具备流畅、专注、无阻碍的使用体验。