AntDesign5。4。0正式发布
大家好,我是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 简单介绍。全文大纲Ant Design 介绍Ant Design 支持哪些前端框架系列Ant Design 设计模式Ant Design 快速上手Ant Design 定制主题Ant Design 样式兼容Ant Design 如何国际化Ant Design 可视化Ant Design 如何实现动效Ant Design 如何实现图形化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 支持哪些前端框架系列
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 ( antd version: {version}
); }; const root = createRoot(document.getElementById("root")); root.render();
Ant Design 定制主题
Ant Design 设计规范和技术上支持灵活的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于全局样式(主色、圆角、边框)和指定组件的视觉定制。
在 5.0 版本的 Ant Design 中,我们提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量,有了 CSS-in-JS 的加持后,动态主题的能力也得到了加强,包括但不限于: 支持动态切换主题; 支持同时存在多个主题; 支持针对某个/某些组件修改主题变量; ...
在 ConfigProvider 中配置主题
在 5.0 版本中我们把影响主题的最小元素称为 Design Token 。通过修改 Design Token,我们可以呈现出各种各样的主题或者组件。
修改主题变量
通过在 ConfigProvider 中传入 theme,可以配置主题。在升级 v5 后,将默认使用 v5 的主题,以下是将配置主题示例: import { Button, ConfigProvider } from "antd"; import React from "react"; const App: React.FC = () => ( ); 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 () => ( );
切换后,样式将从 :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 () => ( );
切换后,样式将降级 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 ( );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 德语本地化文案。 修复越南语本地化文案。 添加缅甸语本地化文案。 最后
一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会不定期更新干货和技术相关的资讯,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。
京东物流CEO余睿担任德邦董事长,京东系加速整合德邦10月17日,德邦股份公告,公司董事会同意选举余睿为公司董事长,唐伟为公司副董事长。这也意味着德邦正式告别创始人崔维星时代,京东系正在加速整合德邦物流。根据公告,京东卓风取得德邦7
订造5艘大船?这家新船东致力打造阿里快船在首艘新造集装箱船致远长滩轮交付运营之后,致远航运(TransfarShipping)的首份新船订单也将落地。据贸易风消息,致远航运正计划在一家中国船厂下单订造多达5艘8000TE
高配低价!12G512G旗舰手机仅2255元文万怡飘责编吕东兴总编唐迪拥有骁龙888PLUS和1亿像素亮眼配置,摩托罗拉motoedgeS3012256GB大内存仅需1999元,魅影黑和冰川蓝两款配色也是颜值配色出众,对比同
专家热议千余处儒家文化遗产如何保护利用中国青年报客户端曲阜9月26日电(中青报中青网记者邢婷)据不完全统计,全国已被列入各级文物保护单位的文庙书院等儒家文化遗产1000余处,这些遗产如何得到有效保护和利用,成为今天举行
钱塘江秋景如画进入秋季以来,钱塘江随着气候变化,潮水瞬息万变,涌潮种类丰富,极具观赏性。2022年9月25日拍摄的钱塘江浙江省海宁市黄湾镇闸口村至丁桥镇新仓村段江面。(无人机照片)CICPHOT
进入惠阳A级景区须提供72小时核酸阴性证明近日,惠阳区文广旅体局发布提醒,按照疫情防控最新要求,即日起至2022年10月31日,进入惠阳区A级旅游景区的游客须出示健康码绿码和72小时内核酸检测阴性证明,近7天内有疫情所在县
凉山州交通出行提示(9月26日)机场方面9月26日西昌出港航班18班(其中武汉长沙北京泸州广州浦东郑州重庆宁波南京达州成都7)1所有离昌旅客乘机时需提供48小时核酸检测阴性证明(时限为出具核酸检测报告结果时间起至
烟台那么鲜我对生活的向往都在这里丰收的仓廪开了,阳光与秋发出邀请,于是我们在仙境收获鲜美音符缥缈微醺,以及仙阁上的浪漫与城堡畔的夕照。一眼就心动的人间仙境,我对生活的向往都在这里。新浪山东在烟台那么鲜海报上这样写
温室影像采集与环境监测机器人系统设计与实现本文节选自智慧农业(中英文)2020年第2卷第3期,吴华瑞研究员团队的设施温室影像采集与环境监测机器人系统设计及应用,其引用格式如下,欢迎大家阅读引用。郭威,吴华瑞,朱华吉。设施温
广州人说河南,可不是指河南省,你知道广州的河南是哪里吗?这里是刘小顺的旅行和生活研究所。去年年底,我从上海搬来了广州,对广州这座城市还不太了解的我,一直都会在广州产生了一些有趣的误会。比如,有一次,一个广州的朋友跟我说,小时候他是住在河
美力值up计划第三季完美落幕,夏日变美逆袭思路快来学Hi美少女们大家好呀之前给大家分享了美力值UP计划第一二季,毛戈平学校侨治发型街拍滚叔三方强强联合,全方位改造升级素人形象。有很多姐妹在后台给我们留言说想要报名参加,体验人生的高光