Back to Details

ui-design-iteration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design Iteration

UI设计迭代

Transform functional-but-flat interfaces into scannable, actionable, accessible designs.
将功能完善但缺乏质感的界面转化为具备可扫描性、可操作性和可访问性的设计。

Core Principles

核心原则

1. Align labels with user intent

1. 标签与用户意图对齐

  • Page titles and nav labels should reflect the user's job, not internal terminology
  • Group navigation by intent (Create, Review, Analyze, Manage)
  • Ensure naming consistency across title, nav, tabs, and empty states
  • 页面标题和导航标签应反映用户的工作场景，而非内部术语
  • 按用户意图对导航进行分组（Create、Review、Analyze、Manage）
  • 确保标题、导航、标签页和空状态的命名保持一致

2. Make primary actions unmistakable

2. 让核心操作清晰可辨

  • One primary CTA per screen with consistent placement
  • Provide contextual "next step" affordances near where attention already is
  • Secondary actions visible but subordinate; tertiary actions in overflow menus
  • 每个屏幕仅保留一个核心CTA，且位置保持一致
  • 在用户注意力集中的区域附近，提供上下文相关的“下一步”操作提示
  • 次要操作可见但处于从属地位；三级操作放入溢出菜单

3. Improve scannability through hierarchy

3. 通过层级结构提升可扫描性

  • Strengthen typographic hierarchy: title → section headers → row primary → metadata
  • Consistent row heights, spacing, and alignment
  • Use whitespace and dividers to encode structure, not decoration
  • 强化排版层级：标题 → 章节标题 → 行核心内容 → 元数据
  • 统一行高、间距和对齐方式
  • 利用留白和分隔符构建结构，而非仅作为装饰

4. Make state explicit everywhere

4. 让状态处处清晰可见

  • Represent modes with tabs/segmented controls
  • Selection needs multiple cues: indicator + weight + background (not color alone)
  • Summarize active automation/filters where relevant
  • 用标签页/分段控件展示不同模式
  • 选中状态需提供多重提示：指示器 + 字体粗细 + 背景色（不能仅依赖颜色）
  • 在相关区域汇总当前激活的自动化规则/筛选条件

5. Systematize the visual design

5. 视觉设计系统化

  • Standardize spacing, typography, and color via tokens
  • Use accent color for priority and state, not decoration
  • Build reusable components rather than one-off styles
  • 通过设计令牌统一间距、排版和颜色规范
  • 强调色用于标识优先级和状态，而非装饰
  • 构建可复用组件，而非一次性样式

Iteration Playbook

迭代指南

A. Reframe the page

A. 重新定义页面定位

Define the job statement: "User comes here to ____."
  • Update page title and nav selection to reflect that job
  • Remove ambiguous or overlapping labels
明确用户目标：“用户访问此页面是为了____。”
  • 更新页面标题和导航选项，匹配用户目标
  • 删除模糊或重复的标签

B. Establish action hierarchy

B. 建立操作层级

Identify primary (most common), secondary (common but not main path), and tertiary (rare, collapse to overflow) actions.
  • Only one primary button style per screen
  • Place contextual next-step affordance near the data surface
区分核心操作（最常用）、次要操作（常用但非主路径）和三级操作（罕见，折叠至溢出菜单）。
  • 每个屏幕仅使用一种核心按钮样式
  • 将上下文相关的下一步操作提示放置在数据区域附近

C. Chunk dense controls

C. 拆分密集控件

Replace walls of toggles/fields with:
  • Group headers + short descriptions
  • Progressive disclosure for advanced settings
  • Aligned labels and descriptions for quick scanning
用以下方式替代大量开关/字段：
  • 分组标题 + 简短描述
  • 高级设置采用渐进式展示
  • 标签和描述对齐，便于快速扫描

D. Increase scan speed for data surfaces

D. 提升数据区域的扫描效率

  • Consistent columns and alignment
  • Primary value bold, metadata muted
  • Row actions right-aligned with overflow
  • Truncation that preserves meaning (with tooltip/detail access)
  • 统一列布局和对齐方式
  • 核心内容加粗，元数据弱化显示
  • 行操作右对齐并放入溢出菜单
  • 截断内容时保留核心含义（提供tooltip/详情查看入口）

E. Clarify modes and location

E. 明确模式与范围

  • Top-level modes via tabs/segmented control
  • Active filters shown as chips with clear remove affordance
  • Context line under headers showing scope when needed
  • 顶层模式通过标签页/分段控件展示
  • 激活的筛选条件以标签形式展示，并提供清晰的移除按钮
  • 必要时在标题下方添加上下文说明，展示当前范围

Quick References

快速参考

Accessibility requirements: See CHECKLIST.md Reusable component patterns: See COMPONENTS.md
可访问性要求：请查看 CHECKLIST.md 可复用组件模式：请查看 COMPONENTS.md

Output Format

输出格式

When completing an iteration, produce:
  1. Design intent — 1-2 sentences on what job is supported and what changed
  2. Key UX changes — Bulleted, mapped to the principles above
  3. Component updates — What was created or standardized
  4. A11y verification — Contrast, focus, labels, targets, truncation
  5. Known risks — Only if materially impacting usability
完成迭代后，需输出以下内容：
  1. 设计意图 — 1-2句话说明支持的用户目标以及做出的改动
  2. 核心UX改动 — 以项目符号列出，并对应上述原则
  3. 组件更新 — 说明新增或标准化的内容
  4. 可访问性验证 — 检查对比度、焦点、标签、交互目标、内容截断等
  5. 已知风险 — 仅列出对可用性有实质性影响的风险