Interface Design

界面设计

Design Principles

设计原则

1. Clarity

1. 清晰性

Make the interface obvious. Users shouldn't have to guess.

让界面一目了然。用户无需猜测操作方式。

2. Consistency

2. 一致性

Same actions, same results. Maintain patterns throughout.

相同操作产生相同结果。全程保持模式统一。

3. Feedback

3. 反馈性

Respond to every action. Show progress, confirm success, explain errors.

对每一项操作做出响应。显示进度、确认成功、解释错误。

4. Efficiency

4. 高效性

Minimize steps. Optimize common workflows.

减少操作步骤。优化常用工作流程。

5. Forgiveness

5. 容错性

Allow undo. Confirm destructive actions. Recover gracefully.

支持撤销操作。对破坏性操作进行确认。提供优雅的恢复机制。

UI Patterns

UI模式

Navigation

Forms

表单

Label above input
Clear validation messages
Inline validation where helpful
Logical field grouping
Clear call-to-action

标签置于输入框上方
清晰的验证提示信息
在合适场景使用内联验证
合理的字段分组
清晰的行动召唤按钮

Feedback

反馈组件

Loading states
Success confirmations
Error messages
Empty states
Progress indicators

加载状态
成功确认提示
错误提示信息
空状态提示
进度指示器

Actions

操作项

Primary action prominent
Secondary actions subtle
Destructive actions require confirmation
Disabled states clear

主操作突出显示
次要操作弱化显示
破坏性操作需确认
禁用状态清晰可辨

Layout Principles

布局原则

Visual Hierarchy

视觉层级

Size indicates importance
Color draws attention
Spacing groups elements
Alignment creates order

尺寸体现重要性
颜色吸引注意力
间距实现元素分组
对齐营造秩序感

Grid System

网格系统

css

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

css

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Responsive Design

响应式设计

Mobile-first approach
Breakpoints: 640px, 768px, 1024px, 1280px
Fluid typography
Flexible images

移动端优先的设计思路
断点：640px、768px、1024px、1280px
流式排版
自适应图片

Design Specification

设计规范

When handing off to development:

Color values (hex/RGB)
Typography (font, size, weight, line-height)
Spacing (margins, padding)
Component states (default, hover, active, disabled)
Responsive behavior
Animations/transitions

交付给开发团队时需包含：

颜色值（hex/RGB格式）
排版规范（字体、字号、字重、行高）
间距规范（外边距、内边距）
组件状态（默认、悬停、激活、禁用）
响应式表现
动画/过渡效果

interface-design

Original

Translation