UI 设计的 10 个基本原则

好的设计是隐形的

优秀的设计不会让用户思考。它应该是直觉的、自然的，让用户专注于内容而非界面。

设计大师 Dieter Rahm 曾说过："好的设计是尽可能少的设计。" 这句话道出了设计的本质——简约而不简单。

1. 一致性

保持设计的一致性是最重要的原则之一：

视觉一致性 - 颜色、字体、间距保持统一
功能一致性 - 相似的操作产生相似的结果
外部一致性 - 遵循平台设计规范

/* 一致的颜色系统 */
:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --secondary: #6b7280;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}

/* 一致的间距系统 */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

2. 层次结构

通过视觉层次引导用户注意力：

/* 标题层次 */
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }
h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.5; }

层次结构帮助用户快速理解内容的组织方式，知道什么是重要的，什么是次要的。

3. 留白

留白不是浪费空间，而是给设计呼吸的空间：

增加元素间距，提高可读性
使用留白分组相关内容
让重要内容脱颖而出

/* 合理的留白 */
.section {
  padding: 4rem 2rem;
}

.card {
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

4. 对比

使用对比创建视觉焦点：

大小对比 - 突出重要元素
颜色对比 - 强调关键信息
粗细对比 - 区分标题和正文

/* 对比示例 */
.primary-button {
  background: #3b82f6;
  color: white;
  font-weight: 600;
}

.secondary-button {
  background: transparent;
  color: #3b82f6;
  border: 1px solid #3b82f6;
  font-weight: 400;
}

5. 对齐

对齐创造秩序感：

使用网格系统组织内容
保持元素的视觉连接
避免随意放置元素

/* 网格对齐 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1flex);
  gap: 2rem;
  align-items: start;
}

/* 文本对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

6. 反馈

让用户知道系统状态：

按钮点击状态
加载进度指示
错误和成功提示

// 反馈示例
function Button({ children, loading, success }: {
  children: React.ReactNode;
  loading?: boolean;
  success?: boolean;
}) {
  return (
    <button
      className={`
        px-4 py-2 rounded
        ${loading ? 'bg-gray-400 cursor-not-allowed' : ''}
        ${success ? 'bg-green-500' : 'bg-blue-500'}
      `}
      disabled={loading}
    >
      {loading ? '加载中...' : success ? '✓ 成功' : children}
    </button>
  );
}

7. 可访问性

设计应该对所有人可用：

足够的颜色对比度
可读的字体大小
键盘导航支持
屏幕阅读器支持

/* 可访问的颜色对比 */
.text-primary {
  color: #1e40af; /* 深蓝色，对比度足够 */
}

/* 焦点状态 */
.button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

8. 简化

少即是多：

移除不必要的元素
简化用户流程
专注于核心功能

"完美不是添加更多东西，而是无法再减少任何东西。"

9. 容错

允许用户犯错并轻松恢复：

确认删除操作
提供撤销功能
清晰的错误提示

// 容错示例
function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const [confirming, setConfirming] = useState(false);

  if (confirming) {
    return (
      <div>
        <p>确定要删除吗？</p>
        <button onClick={() => { onDelete(); setConfirming(false); }}>
          确定
        </button>
        <button onClick={() => setConfirming(false)}>
          取消
        </button>
      </div>
    );
  }

  return (
    <button onClick={() => setConfirming(true)}>
      删除
    </button>
  );
}

10. 用户控制

让用户感到掌控：

提供自定义选项
允许撤销操作
清晰的导航路径
可预测的行为

实践建议

设计原则是指导，不是规则。在实际项目中：

了解你的用户 - 用户研究是设计的基础
测试你的设计 - 用户测试能发现你忽略的问题
迭代改进 - 设计是一个持续改进的过程
保持学习 - 设计趋势和技术在不断变化