大家好，我是Echa。

好消息，2023年4月3号 蚂蚁金服（Alipay）前端 Ant Design 官方团队宣布 Ant Design 5.4.0 正式发布。距离上次Ant Design 5.3.2 正式发布发布时间（2023-03-20），短短14天，中途还更新了一个 Ant Design 5.3.3 版本。这迭代更新的内容版本，让小编怀疑Ant Design 官方研发团队不要睡觉的吗？太给力了。也是小编见过很哇塞的一套前端UI设计框架之一。

小编查看Ant Design 官方更新日志中明确发布周期：

• 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
• 次版本号：每月发布一个带有新特性的向下兼容的版本。
• 主版本号：含有破坏性更新和新特性，不在发布周期内。

如果Ant Design 官方没有硬核的团队实力，是不敢这么明确发布版本周期的。为前端开发者带来了很多方便，让用户体验更上一个台阶。Ant Design研发团队也是下了苦功夫，小编长期关注他们的动向，能够完全感受他们的良苦用心。下面小编详细讲解这次更新的哪些内容。为了考虑到，还没了解Ant Design 到底是做什么的新粉丝，先做个Ant Design 简单介绍。

全文大纲

1. Ant Design 介绍
2. Ant Design 支持哪些前端框架系列
3. Ant Design 设计模式
4. Ant Design 快速上手
5. Ant Design 定制主题
6. Ant Design 样式兼容
7. Ant Design 如何国际化
8. Ant Design 可视化
9. Ant Design 如何实现动效
10. Ant Design 如何实现图形化
11. Ant Design 5.4.0 正式发布更新内容

Ant Design 介绍

官网：https://ant.design/

Github：https://github.com/ant-design/ant-design

蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

设计资源

官方提供完善的设计指引、最佳实践、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。

• 设计价值观
• 设计模式
• 可视化
• 插画
• 设计资源
• Sketch 工具集
• 文章

如下图：

Ant Design 支持哪些前端框架系列

• Ant Design of React（官方实现）

官网：https://ant.design/docs/react/introduce-cn

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 开发，提供完整的类型定义文件。
• ?? 全链路开发和设计工具体系。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

兼容环境

• 现代浏览器
• 支持服务端渲染。
• Electron

• NG-ZORRO - Ant Design of Angular（社区实现）

官网：http://ng.ant.design/

ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。

特性#

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Angular 组件库，与 Angular 保持同步升级。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 支持 OnPush 模式，性能卓越。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

支持环境#

• 现代浏览器，浏览器支持
• 支持服务端渲染
• Electron

• NG-ZORRO-MOBILE - Ant Design Mobile of Angular（社区实现）

官网：http://ng.ant.design/

这里是 Ant Design 移动规范的 Angular 实现，服务于阿里巴巴集团数据无线业务。

特性#

• 开箱即用的高质量 Angular 无线端组件
• UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
• 使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
• 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发
• 支持在 Ionic 中运行[指南]

• Ant Design of Vue（社区实现）

官网：https://antdv.com/

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

特性#

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 共享Ant Design of React设计工具体系。

支持环境#

• 现代浏览器, 如果需要支持 IE9，你可以选择使用 1.x 版本。
• 支持服务端渲染。
• Electron

• Ant Design Blazor（社区实现）

官网：https://antblazor.com/

这里是 Ant Design 的 Blazor 实现，开发和服务于企业级后台产品。

? 特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Blazor 组件，可在多种托管方式共享。
• 支持基于 WebAssembly 的前端和基于 SignalR 的服务端 UI 即时交互。
• 支持渐进式 Web 应用（PWA）
• 使用 C# 构建，多范式静态语言带来高效的开发体验。
• ?? 支持 .NET Core 3.1 以上所有版本，可直接引用丰富的 .NET 类库。
• 数十个国际化语言支持。
• 基于 MIT 开源协议，.NET 基金会项目，商业应用免费。

支持环境

• 兼容 .NET Core 3.1 / .NET 5 / .NET 6 / .NET 7 。
• 支持 WebAssembly 静态文件部署。
• 支持服务端双向绑定。
• 支持 WebAssembly 静态文件部署。
• 主流 4 款现代浏览器，以及 Internet Explorer 11+ （使用 Blazor Server）。
• 可直接运行在 .NET MAUI、WPF、Windows Forms 等 Blazor 混合客户端环境中。
• 可直接运行在 Electron 等基于 Web 标准的环境上

• San UI Toolkit for Ant Design（社区实现）

官网：https://ecomfe.github.io/santd

这里是 Ant Design 的 San 实现，开发和服务于企业级后台产品。

特性#

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 San 组件。
• 共享Ant Design of React设计工具体系。

支持环境#

• 现代浏览器和 IE9 及以上（需要 polyfills）。
• 支持服务端渲染。

• antizer (ClojureScript)（社区实现）

官网：https://github.com/priornix/antizer

Antizer是一个为Reagent和Rum实现Ant Design React组件的ClojureScript库。

Ant Design是一种企业级UI设计语言和基于React的实现，具有以下功能：

• 用于web应用程序的企业级UI设计语言。
• 一套开箱即用的高质量React组件。
• 丰富的API文档和示例。

谁在使用

• 蚂蚁集团
• 阿里巴巴
• 腾讯
• 百度
• 口碑
• 美团
• 滴滴
• 饿了么
• 其他用户

Ant Design 设计模式

在企业级业务中使用设计模式，可以显着增加研发团队的确定性，节省不必要的设计，保持系统一致性，让设计师专注于创意最需要的地方。

设计模式遵循 Ant Design 设计价值观，并为企业产品中反复出现的设计问题提供通用解决方案。设计者可以直接使用设计模式来完成界面设计，也可以以设计模式为出发点，衍生出更加针对业务的解决方案，以满足个性化的设计需求。

完整的设计模式将包括模板、组件 (ETC) 和通用概念的示例：

• 功能示例：由多个模板组成，以启发用户如何使用和构建一个通用功能。
• 模板：一个页面级示例，启发用户如何在系统中构建典型页面，例如详细信息页面。
• 组件基本组件：系统的最基本元素，例如按钮和分页器。业务组件/模块：块级示例，通常由多个组件组成，例如 PageHeader 通用标题。
• 一般概念：保证 ETC 系统化的一些约定，例如排版、字体和文案。

Ant Design 快速上手

Ant Design React 致力于提供给程序员愉悦的开发体验。

在开始之前，推荐先学习 React 和 ES2015，并正确安装和配置了 Node.js v8 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。

import React from "react";
import { createRoot } from "react-dom/client";
import { Button, DatePicker, Space, version } from "antd";
import 'antd/dist/reset.css';
import "./index.css";

const App = () => {
  return (
    <div className="App">
      <h1>antd version: {version}</h1>
      <Space>
        <DatePicker />
        <Button type="primary">Primary Button</Button>
      </Space>
    </div>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(<App />);

Ant Design 定制主题

Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。

在 5.0 版本的 Ant Design 中，我们提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强，包括但不限于：

1. 支持动态切换主题；
2. 支持同时存在多个主题；
3. 支持针对某个/某些组件修改主题变量；
4. ...

在 ConfigProvider 中配置主题

在 5.0 版本中我们把影响主题的最小元素称为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者组件。

修改主题变量

通过在 ConfigProvider 中传入 theme，可以配置主题。在升级 v5 后，将默认使用 v5 的主题，以下是将配置主题示例：

import { Button, ConfigProvider } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <Button />
  </ConfigProvider>
);

export default App;

这将会得到一个以 #00b96b 为主色的主题，以 Button 组件为例可以看到相应的变化：

如下图：

Ant Design 样式兼容

Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧版浏览器，请根据实际需求进行降级处理：

:where选择器

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

import React from 'react';
import { StyleProvider } from '@ant-design/cssinjs';

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
export default () => (
  <StyleProvider hashPriority="high">
    <MyApp />
  </StyleProvider>
);

切换后，样式将从 :where 切换为类选择器：

--  :where(.css-bAMboO).ant-btn {
++  .css-bAMboO.ant-btn {
      color: #fff;
    }

CSS 逻辑属性

为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 margin-left 使用 margin-inline-start 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 @ant-design/cssinjs 的 StyleProvider 配置 transformers 将其转换：

import React from 'react';
import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';

// `transformers` 提供预处理功能将样式进行转换
export default () => (
  <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
    <MyApp />
  </StyleProvider>
);

切换后，样式将降级 CSS 逻辑属性：

.ant-modal-root {
-- inset: 0;
++ top: 0;
++ right: 0;
++ bottom: 0;
++ left: 0;
}

Ant Design 如何国际化

antd 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。

ConfigProvider

antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。

import zhCN from 'antd/locale/zh_CN';

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

Ant Design 可视化

可视化语言是基于 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，以帮助『设计者』孵化出更具业务特性的数据可视化解决方案，屏蔽不必要的设计差异和实现成本，从而解放『设计者』和前端的生产力，实现数据图表的研发效能全面提高。

如何设计

了解用户

用户是谁？他们要从可视化作品上获取什么信息？在企业级产品中，用户可能是公司高层、BI 分析师、运营、数据开发等不同角色，不一样的角色在使用可视化作品时，其目的以及使用路径会有所不同。建议在设计开始前对使用者进行充分剖析，以便完整地讲述你的数据故事，准确呈现你的数据见解。

设计原则

• 准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息；
• 有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息；
• 清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最短的时间内获取更多的信息；
• 美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。

Ant Design 如何实现动效

Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套 React 框架动效解决方案，可以帮助开发者，更容易在项目中使用动效。我们提供了单项，组合动画，以及整套解决方案。

界面动效能加强用户认知且增加活力。

动效价值

• 增加体验舒适度： 让用户认知过程更为自然。
• 增加界面活力： 第一时间吸引注意力，突出重点。
• 描述层级关系： 体现元素之间的层级与空间关系。
• 提供反馈、明确意向： 助力交互体验。

衡量动效意义

衡量一个动效是否有意义，我们可以通过以下几个标准来考核：

• 一个动效的存在是否合理： 是否带有明确的目的性，助力交互体验，没有多余的动效。
• 动效与性能： 不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的，并且不影响产品的性能。

自然

自然的动效背后体现的是自然运动规律。这就要求动效在转换时保证视觉上的连贯性，让用户感知到这个动作是成立的，是能够引起共鸣的。

以 button 的动效设计为例，设计师将其想像成一片树叶飘浮在水面之上，当你去触碰它时，叶子会下浮再反弹，然后出现涟漪效果。

高效

企业级应用追求的是高效的用户体验，与之对应的动效设计也应如此，尽量节省过渡的时间，快速完成过渡的动画效果。

举个例子，在出场与进场的动效里，出场不用大张旗鼓的去吸引用户的注意力，而是做到简单清晰即可。所以我们的出场时间采用了更快的速度,同时也不设置队列依次出场的形式，只需要整块直接消失即可。

克制

尽量避免夸张的动效，做有意义的事，不去做太多的修饰而干扰用户。

如我们的 Menu，在展开时，更注重的是菜单的内容，而右侧的图标切换并不是主要的元素，不需要过度强调去分散用户的注意。只需在不经意间切换，明确指示变化即可。

Ant Design 如何实现图形化

项目背景

图形化是品牌识别度的关键核心元素，在互联网产品，线下物料中使用中无处不在。与单纯的文案信息不同，图形化在直观描述固有信息的同时塑造情感背景，使用户更具沉浸感和共情性。提升产品用户体验的同时来完成商业目标。图形化的风格缤纷复杂，插画师的个人风格明显，不同的设计师在图形化的工作协同中，风格很难复现，而单纯由一名插画师去完成整体业务的图形化也存在一定风险。所以图形化体系在保持品牌一致性和提升工作效率，规避风险上显得尤为重要。

设计原则

从最底层的设计价值观到最上层的设计方法，HiTu 沿袭了 Ant Design 的 ETCG 的设计思路，将图形化资产组件化，分可形成模板，合则可拼搭成案例。为设计值提供强大的灵活性和定制性。

HiTu 金字塔模型

基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。

颜色

海兔色板

海兔的色彩配色体系是基于 Ant Design 色板的场景应用，与 UI 色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自 Ant Design 的色彩体系，和其他 UI 资产完美兼容。

海兔默认资产颜色

通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。

基于 Adobe Color 的三元取色工具，和 3D 立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们默认版本的基础色板。

设计资产

人物组件

基于自然的人物头身比例

基于自然的设计原则，我们不推荐使用 Q 版卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。

同时，我们结合情感化设计，将 9 种常见的职业角色进行人物设计。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。

Ant Design 5.4.0 正式发布更新内容

咱们先回顾2023-03-28 Ant Design 5.3.3 版本更新内容：

• Menu 修复 Menu items 没有使用传入的 key 的问题。
• 修复 Menu 使用 getPopupContainer 选择主菜单时子菜单主题被覆盖。
• 修复 Table 过滤器未保持状态当筛选下拉框展示时。
• 修复 Modal 使用 useModal 未透传并优先选择用户设定。
• Form 修复 Form 验证状态不按照顺序改变的问题。
• 修复 Form 组件 layout="inline" 时组件标题与表单项布局异常换行问题。
• 修复 ConfigProvider nonce 对 CSS-in-JS 样式不生效的问题。
• 修复 Pagination size=small 时，分页按钮 active、上一页下一页按钮 hover 和 active 样式丢失。
• 修复 Tabs 组件下边框与其他边框叠加的样式问题。
• 修复 Dropdown.Button down 图标尺寸问题。
• TypeScript 修复 Breadcrumb.Item menu 类型定义不正确的问题。
• 优化 Grid Col 类型提示。#41453 @vaakian 优化 Table resetPagination 类型提示。
• 优化 TreeSelect InternalTreeSelect 类型提示。
• 国际化 完善 DatePicker fa_IR 翻译。
• 完善 sv_SE 语言缺失内容。

Ant Design 5.4.0 正式发布更新内容：

• 移除 antd/es/locale-provider antd/lib/locale-provider 目录，LocaleProvider 已在 4.x 版本移除，使用 ConfigProvider 作为替代。
• DatePicker 等时间类组件可以定制 luxon 作为日期库。
• 新增 Form.Item.useStatus 以支持获取错误状态信息。
• Input 和 Input.TextArea 组件支持 classNames 和 styles 属性，用于更细粒度的样式自定义。
• Tag 新增无边框模式。
• FloatButton 支持用 badge 属性开启角标功能。
• Select 支持 title 属性以便覆盖一些自带的 title 提示。
• Image 组件支持设置 preview.rootClassName。
• Modal 组件支持 afterOpenChange 属性。
• Form.useWatch 新增 preserve 参数，支持在 Form.Item 未注册的情况下 setFieldValue 时触发监听。
• 使用 useMemo 重构部分组件代码。
• 使用 React hooks 重构 Checkbox，并优化了 TS 定义。
• 重构 Input.TextArea 文字计数实现方式，移至 affixWrapper 元素中。
• DatePicker/Calendar 组件新增 cellRender 用于自定义日期单元格，同时在 DatePicker 中废弃 dateRender 和 monthRender 等属性，在 Calendar 中废弃 dateCellRender、monthCellRender、dateFullCellRender、monthFullCellRender 等属性。
• 修复 Tour 出现两个箭头的问题。
• 修复 Checkbox 配置 controlHeight token 时勾选框与文字不对齐的问题。
• 修复 Form.Item 存在 help 值时在 Modal 中没有正确渲染元素。
• 修复 Form 使用 hasFeedback 时表单状态不对的问题。
• 修复 Slider 组件显示 Warning: [antd: Tooltip] forcePopupAlign is align to forceAlign instead 警告信息的问题。
• 修复可选择 Table 的勾选框在边缘点击的时候无法触发勾选的问题。
• 国际化 更新 TimePicker 德语本地化文案。
• 修复越南语本地化文案。
• 添加缅甸语本地化文案。

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。