Ant Design 设计价值观 #

设计价值观概述 #

Ant Design 的设计价值观是整个设计系统的基石，它指导着每一个组件的设计和开发。理解这些价值观，有助于我们更好地使用 Ant Design 构建优秀的产品。

text

┌─────────────────────────────────────────┐
│         Ant Design 设计价值观            │
├─────────────────────────────────────────┤
│                                         │
│    ┌───────┐  ┌───────┐                │
│    │ 自然  │  │确定性 │                │
│    └───────┘  └───────┘                │
│                                         │
│    ┌───────┐  ┌───────┐                │
│    │意义感 │  │生长性 │                │
│    └───────┘  └───────┘                │
│                                         │
└─────────────────────────────────────────┘

自然 #

概念 #

自然的设计源于对自然的观察和理解。好的设计应该像自然一样，让用户感到舒适、流畅，不需要额外的学习成本。

设计原则 #

原则	说明	示例
直观	界面元素的含义应该不言自明	按钮看起来可点击
流畅	交互过程应该顺滑自然	页面切换动画
一致	相同功能使用相同的交互方式	所有表单验证方式一致

实践案例 #

1. 自然的动画 #

tsx

import { Button, Modal } from 'antd';

<Button type="primary" onClick={() => setVisible(true)}>
  打开对话框
</Button>

<Modal
  open={visible}
  onCancel={() => setVisible(false)}
  transitionName=""  // 自然过渡动画
>
  内容
</Modal>

2. 自然的反馈 #

tsx

import { Button, message } from 'antd';

const handleClick = () => {
  message.success('操作成功');
};

设计要点 #

避免突兀：变化应该有过渡
符合预期：结果应该符合用户预期
减少干扰：不必要的信息应该隐藏

确定性 #

概念 #

确定性意味着用户能够预测操作的结果。好的设计应该让用户清楚地知道：

当前在哪里
可以做什么
做了会有什么结果

设计原则 #

原则	说明	示例
清晰	信息层级清晰，重点突出	标题使用大字号
明确	操作结果可预测	删除前确认提示
可控	用户可以撤销操作	支持撤销的删除

实践案例 #

1. 明确的状态反馈 #

tsx

import { Button, Popconfirm } from 'antd';

<Popconfirm
  title="确定要删除吗？"
  description="此操作不可恢复"
  onConfirm={handleDelete}
  okText="确定"
  cancelText="取消"
>
  <Button danger>删除</Button>
</Popconfirm>

2. 清晰的进度指示 #

tsx

import { Steps, Progress } from 'antd';

<Steps current={1} items={[
  { title: '第一步', description: '填写信息' },
  { title: '第二步', description: '确认信息' },
  { title: '第三步', description: '完成' },
]} />

<Progress percent={60} />

设计要点 #

明确状态：让用户知道当前状态
预测结果：操作前告知可能的结果
提供反馈：操作后给予明确反馈

意义感 #

概念 #

意义感是指设计应该帮助用户理解为什么要这样做，以及这样做的价值。好的设计应该：

解释为什么需要这个信息
说明这个操作的意义
展示结果的价值

设计原则 #

原则	说明	示例
引导	帮助用户理解目的	表单字段说明
价值	展示操作的价值	数据统计展示
成就	让用户有成就感	完成任务的奖励

实践案例 #

1. 有意义的表单说明 #

tsx

import { Form, Input, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

<Form.Item
  label={
    <span>
      用户名&nbsp;
      <Tooltip title="用户名将用于登录和展示">
        <QuestionCircleOutlined />
      </Tooltip>
    </span>
  }
  name="username"
>
  <Input placeholder="请输入用户名" />
</Form.Item>

2. 展示数据价值 #

tsx

import { Statistic, Card } from 'antd';

<Card>
  <Statistic
    title="本月销售额"
    value={112893}
    precision={2}
    valueStyle={{ color: '#3f8600' }}
    suffix="元"
  />
</Card>

设计要点 #

解释原因：告诉用户为什么需要这个信息
展示价值：让用户看到操作的意义
提供帮助：在需要时提供帮助信息

生长性 #

概念 #

生长性是指设计应该能够适应变化，支持功能的扩展和演进。好的设计应该：

容易添加新功能
支持不同规模的使用
能够持续优化

设计原则 #

原则	说明	示例
可扩展	容易添加新功能	模块化组件
可配置	支持灵活配置	主题定制
可演进	能够持续优化	版本升级

实践案例 #

1. 可扩展的组件 #

tsx

import { Table } from 'antd';

const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
];

const expandedRowRender = (record) => {
  return <p>详细信息: {record.description}</p>;
};

<Table
  columns={columns}
  dataSource={data}
  expandable={{ expandedRowRender }}
/>

2. 可配置的主题 #

tsx

import { ConfigProvider, Button } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1677ff',
      borderRadius: 6,
    },
    components: {
      Button: {
        colorPrimary: '#00b96b',
      },
    },
  }}
>
  <Button type="primary">自定义主题按钮</Button>
</ConfigProvider>

设计要点 #

模块化：组件应该独立可复用
可配置：支持灵活的配置选项
向前兼容：升级时保持兼容性

设计原则 #

基于四大价值观，Ant Design 提出了具体的设计原则：

1. 亲密性 #

2. 对齐 #

界面元素应该对齐：

tsx

import { Form, Input, Button } from 'antd';

<Form layout="horizontal">
  <Form.Item label="姓名">
    <Input />
  </Form.Item>
  <Form.Item label="邮箱">
    <Input />
  </Form.Item>
  <Form.Item>
    <Button type="primary">提交</Button>
  </Form.Item>
</Form>

3. 对比 #

通过对比突出重要信息：

tsx

import { Typography } from 'antd';

const { Title, Text } = Typography;

<Title level={1}>重要标题</Title>
<Text type="secondary">次要说明文字</Text>

4. 重复 #

保持设计的一致性：

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary">确定</Button>
  <Button>取消</Button>
</Space>

5. 直截了当 #

简化操作流程：

tsx

import { Steps, Button } from 'antd';

<Steps current={0} items={[
  { title: '选择' },
  { title: '确认' },
  { title: '完成' },
]} />

设计规范 #

色彩规范 #

text

Ant Design 色彩系统
├── 品牌色
│   └── #1677ff (蓝色)
├── 功能色
│   ├── 成功 #52c41a
│   ├── 警告 #faad14
│   ├── 错误 #ff4d4f
│   └── 信息 #1677ff
└── 中性色
    ├── 标题 #000000d9
    ├── 正文 #00000073
    └── 边框 #d9d9d9

字体规范 #

类型	字号	字重	行高
标题1	38px	600	1.4
标题2	30px	600	1.4
标题3	24px	600	1.4
正文	14px	400	1.6
辅助文字	12px	400	1.6

间距规范 #

使用 8px 网格系统：

tsx

import { Space } from 'antd';

<Space size="small">   // 8px
<Space size="middle">  // 16px
<Space size="large">   // 24px

实践建议 #

理解价值观：深入理解四大价值观的含义
遵循原则：在设计时遵循设计原则
保持一致：整个产品保持设计一致性
持续优化：根据反馈持续改进设计

下一步 #

现在你已经了解了 Ant Design 的设计价值观，接下来学习 Button 按钮组件！