AntDesign5。4。0正式发布

　　大家好，我是Echa。
　　好消息，2023年4月3号蚂蚁金服（Alipay）前端AntDesign官方团队宣布AntDesign5。4。0正式发布。距离上次AntDesign5。3。2正式发布发布时间（20230320），短短14天，中途还更新了一个AntDesign5。3。3版本。这迭代更新的内容版本，让小编怀疑AntDesign官方研发团队不要睡觉的吗？太给力了。也是小编见过很哇塞的一套前端UI设计框架之一。
　　小编查看AntDesign官方更新日志中明确发布周期：修订版本号：每周末会进行日常bugfix更新。（如果有紧急的bugfix，则任何时候都可发布）次版本号：每月发布一个带有新特性的向下兼容的版本。主版本号：含有破坏性更新和新特性，不在发布周期内。
　　如果AntDesign官方没有硬核的团队实力，是不敢这么明确发布版本周期的。为前端开发者带来了很多方便，让用户体验更上一个台阶。AntDesign研发团队也是下了苦功夫，小编长期关注他们的动向，能够完全感受他们的良苦用心。下面小编详细讲解这次更新的哪些内容。为了考虑到，还没了解AntDesign到底是做什么的新粉丝，先做个AntDesign简单介绍。全文大纲AntDesign介绍AntDesign支持哪些前端框架系列AntDesign设计模式AntDesign快速上手AntDesign定制主题AntDesign样式兼容AntDesign如何国际化AntDesign可视化AntDesign如何实现动效AntDesign如何实现图形化AntDesign5。4。0正式发布更新内容AntDesign介绍
　　官网：https：ant。design
　　Github：https：github。comantdesignantdesign
　　蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
　　随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系AntDesign。基于自然、确定性、意义感、生长性四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
　　设计资源
　　官方提供完善的设计指引、最佳实践、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。设计价值观设计模式可视化插画设计资源Sketch工具集文章
　　如下图：
　　AntDesign官网
　　AntDesign支持哪些前端框架系列
　　AntDesignofReact（官方实现）
　　官网：https：ant。designdocsreactintroducecn
　　antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。
　　特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量React组件。使用TypeScript开发，提供完整的类型定义文件。全链路开发和设计工具体系。数十个国际化语言支持。深入每个细节的主题定制能力。
　　兼容环境现代浏览器支持服务端渲染。Electron
　　NGZORROAntDesignofAngular（社区实现）
　　官网：http：ng。ant。design
　　ngzorroantd是遵循AntDesign设计规范的AngularUI组件库，主要用于研发企业级中后台产品。全部代码开源并遵循MIT协议，任何企业、组织及个人均可免费使用。
　　特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量Angular组件库，与Angular保持同步升级。使用TypeScript构建，提供完整的类型定义文件。支持OnPush模式，性能卓越。数十个国际化语言支持。深入每个细节的主题定制能力。支持环境现代浏览器，浏览器支持支持服务端渲染Electron
　　NGZORROMOBILEAntDesignMobileofAngular（社区实现）
　　官网：http：ng。ant。design
　　这里是AntDesign移动规范的Angular实现，服务于阿里巴巴集团数据无线业务。
　　特性开箱即用的高质量Angular无线端组件UI样式高度可配置，拓展性更强，轻松适应各类产品风格使用TypeScript开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发提供组件按需加载Web页面高清显示SVGIcon等优化方案，一体式开发支持在Ionic中运行〔指南〕
　　AntDesignofVue（社区实现）
　　官网：https：antdv。com
　　这里是AntDesign的Vue实现，开发和服务于企业级后台产品。
　　特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量Vue组件。共享AntDesignofReact设计工具体系。
　　支持环境现代浏览器，如果需要支持IE9，你可以选择使用1。x版本。支持服务端渲染。Electron
　　AntDesignBlazor（社区实现）
　　官网：https：antblazor。com
　　这里是AntDesign的Blazor实现，开发和服务于企业级后台产品。
　　特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量Blazor组件，可在多种托管方式共享。支持基于WebAssembly的前端和基于SignalR的服务端UI即时交互。支持渐进式Web应用（PWA）使用C构建，多范式静态语言带来高效的开发体验。支持。NETCore3。1以上所有版本，可直接引用丰富的。NET类库。数十个国际化语言支持。基于MIT开源协议，。NET基金会项目，商业应用免费。
　　支持环境兼容。NETCore3。1。NET5。NET6。NET7。支持WebAssembly静态文件部署。支持服务端双向绑定。支持WebAssembly静态文件部署。主流4款现代浏览器，以及InternetExplorer11（使用BlazorServer）。可直接运行在。NETMAUI、WPF、WindowsForms等Blazor混合客户端环境中。可直接运行在Electron等基于Web标准的环境上
　　SanUIToolkitforAntDesign（社区实现）
　　官网：https：ecomfe。github。iosantd
　　这里是AntDesign的San实现，开发和服务于企业级后台产品。
　　特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量San组件。共享AntDesignofReact设计工具体系。
　　支持环境现代浏览器和IE9及以上（需要polyfills）。支持服务端渲染。
　　antizer（ClojureScript）（社区实现）
　　官网：https：github。compriornixantizer
　　Antizer是一个为Reagent和Rum实现AntDesignReact组件的ClojureScript库。
　　AntDesign是一种企业级UI设计语言和基于React的实现，具有以下功能：用于web应用程序的企业级UI设计语言。一套开箱即用的高质量React组件。丰富的API文档和示例。
　　谁在使用蚂蚁集团阿里巴巴腾讯百度口碑美团滴滴饿了么其他用户AntDesign设计模式
　　在企业级业务中使用设计模式，可以显着增加研发团队的确定性，节省不必要的设计，保持系统一致性，让设计师专注于创意最需要的地方。
　　设计模式遵循AntDesign设计价值观，并为企业产品中反复出现的设计问题提供通用解决方案。设计者可以直接使用设计模式来完成界面设计，也可以以设计模式为出发点，衍生出更加针对业务的解决方案，以满足个性化的设计需求。
　　完整的设计模式将包括模板、组件（ETC）和通用概念的示例：功能示例：由多个模板组成，以启发用户如何使用和构建一个通用功能。模板：一个页面级示例，启发用户如何在系统中构建典型页面，例如详细信息页面。组件基本组件：系统的最基本元素，例如按钮和分页器。业务组件模块：块级示例，通常由多个组件组成，例如PageHeader通用标题。一般概念：保证ETC系统化的一些约定，例如排版、字体和文案。AntDesign快速上手
　　AntDesignReact致力于提供给程序员愉悦的开发体验。
　　在开始之前，推荐先学习React和ES2015，并正确安装和配置了Node。jsv8或以上。官方指南假设你已了解关于HTML、CSS和JavaScript的中级知识，并且已经完全掌握了React全家桶的正确开发方式。如果你刚开始学习前端或者React，将UI框架作为你的第一步可能不是最好的主意。importReactfromreact；import｛createRoot｝fromreactdomclient；import｛Button，DatePicker，Space，version｝fromantd；importantddistreset。css；import。index。css；constApp（）｛return（h1antdversion：｛version｝h1SpaceDatePickerButtontypeprimaryPrimaryButtonButtonSpace）；｝；constrootcreateRoot（document。getElementById（root））；root。render（）；
　　AntDesign定制主题
　　AntDesign设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。
　　在5。0版本的AntDesign中，我们提供了一套全新的定制主题方案。不同于4。x版本的less和CSS变量，有了CSSinJS的加持后，动态主题的能力也得到了加强，包括但不限于：支持动态切换主题；支持同时存在多个主题；支持针对某个某些组件修改主题变量；。。。
　　在ConfigProvider中配置主题
　　在5。0版本中我们把影响主题的最小元素称为DesignToken。通过修改DesignToken，我们可以呈现出各种各样的主题或者组件。
　　修改主题变量
　　通过在ConfigProvider中传入theme，可以配置主题。在升级v5后，将默认使用v5的主题，以下是将配置主题示例：import｛Button，ConfigProvider｝fromantd；importReactfromreact；constApp：React。FC（）（ConfigProvidertheme｛｛token：｛colorPrimary：00b96b，｝，｝｝ButtonConfigProvider）；exportdefaultApp；
　　这将会得到一个以00b96b为主色的主题，以Button组件为例可以看到相应的变化：
　　如下图：
　　AntDesign样式兼容
　　AntDesign支持最近2个版本的现代浏览器。如果你需要兼容旧版浏览器，请根据实际需求进行降级处理：
　　：where选择器
　　AntDesign的CSSinJS默认通过：where选择器降低CSSSelector优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如TailwindCSS优先级冲突），你可以使用antdesigncssinjs取消默认的降权操作（请注意版本保持与antd一致）：importReactfromreact；import｛StyleProvider｝fromantdesigncssinjs；hashPriority默认为low，配置为high后，会移除：where选择器封装exportdefault（）（StyleProviderhashPriorityhighMyAppStyleProvider）；
　　切换后，样式将从：where切换为类选择器：：where（。cssbAMboO）。antbtn｛。cssbAMboO。antbtn｛color：fff；｝
　　CSS逻辑属性
　　为了统一LTR和RTL样式，AntDesign使用了CSS逻辑属性。例如原marginleft使用margininlinestart代替，使其在LTR和RTL下都为起始位置间距。如果你需要兼容旧版浏览器（如360浏览器、QQ浏览器等等），可以通过antdesigncssinjs的StyleProvider配置transformers将其转换：importReactfromreact；import｛StyleProvider，legacyLogicalPropertiesTransformer｝fromantdesigncssinjs；transformers提供预处理功能将样式进行转换exportdefault（）（StyleProvidertransformers｛〔legacyLogicalPropertiesTransformer〕｝MyAppStyleProvider）；
　　切换后，样式将降级CSS逻辑属性：。antmodalroot｛inset：0；top：0；right：0；bottom：0；left：0；｝AntDesign如何国际化
　　antd目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。
　　ConfigProvider
　　antd提供了一个React组件ConfigProvider用于全局配置国际化文案。importzhCNfromantdlocalezhCN；return（ConfigProviderlocale｛zhCN｝ConfigProvider）；AntDesign可视化
　　可视化语言是基于AntDesign衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，以帮助设计者孵化出更具业务特性的数据可视化解决方案，屏蔽不必要的设计差异和实现成本，从而解放设计者和前端的生产力，实现数据图表的研发效能全面提高。
　　如何设计
　　了解用户
　　用户是谁？他们要从可视化作品上获取什么信息？在企业级产品中，用户可能是公司高层、BI分析师、运营、数据开发等不同角色，不一样的角色在使用可视化作品时，其目的以及使用路径会有所不同。建议在设计开始前对使用者进行充分剖析，以便完整地讲述你的数据故事，准确呈现你的数据见解。
　　设计原则准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息；有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据油墨比（DatainkRatio）表达对用户最有用的信息；清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最短的时间内获取更多的信息；美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。
　　AntDesign如何实现动效
　　AntMotion是AntDesign中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套React框架动效解决方案，可以帮助开发者，更容易在项目中使用动效。我们提供了单项，组合动画，以及整套解决方案。
　　界面动效能加强用户认知且增加活力。
　　动效价值增加体验舒适度：让用户认知过程更为自然。增加界面活力：第一时间吸引注意力，突出重点。描述层级关系：体现元素之间的层级与空间关系。提供反馈、明确意向：助力交互体验。
　　衡量动效意义
　　衡量一个动效是否有意义，我们可以通过以下几个标准来考核：一个动效的存在是否合理：是否带有明确的目的性，助力交互体验，没有多余的动效。动效与性能：不能出现大幅度波动丢帧或者卡顿现象，动效的体验须是流畅的，并且不影响产品的性能。
　　自然
　　自然的动效背后体现的是自然运动规律。这就要求动效在转换时保证视觉上的连贯性，让用户感知到这个动作是成立的，是能够引起共鸣的。
　　以button的动效设计为例，设计师将其想像成一片树叶飘浮在水面之上，当你去触碰它时，叶子会下浮再反弹，然后出现涟漪效果。
　　高效
　　企业级应用追求的是高效的用户体验，与之对应的动效设计也应如此，尽量节省过渡的时间，快速完成过渡的动画效果。
　　举个例子，在出场与进场的动效里，出场不用大张旗鼓的去吸引用户的注意力，而是做到简单清晰即可。所以我们的出场时间采用了更快的速度，同时也不设置队列依次出场的形式，只需要整块直接消失即可。
　　克制
　　尽量避免夸张的动效，做有意义的事，不去做太多的修饰而干扰用户。
　　如我们的Menu，在展开时，更注重的是菜单的内容，而右侧的图标切换并不是主要的元素，不需要过度强调去分散用户的注意。只需在不经意间切换，明确指示变化即可。
　　AntDesign如何实现图形化
　　项目背景
　　图形化是品牌识别度的关键核心元素，在互联网产品，线下物料中使用中无处不在。与单纯的文案信息不同，图形化在直观描述固有信息的同时塑造情感背景，使用户更具沉浸感和共情性。提升产品用户体验的同时来完成商业目标。图形化的风格缤纷复杂，插画师的个人风格明显，不同的设计师在图形化的工作协同中，风格很难复现，而单纯由一名插画师去完成整体业务的图形化也存在一定风险。所以图形化体系在保持品牌一致性和提升工作效率，规避风险上显得尤为重要。
　　设计原则
　　从最底层的设计价值观到最上层的设计方法，HiTu沿袭了AntDesign的ETCG的设计思路，将图形化资产组件化，分可形成模板，合则可拼搭成案例。为设计值提供强大的灵活性和定制性。
　　HiTu金字塔模型
　　基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。
　　颜色
　　海兔色板
　　海兔的色彩配色体系是基于AntDesign色板的场景应用，与UI色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于AntDesign的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自AntDesign的色彩体系，和其他UI资产完美兼容。
　　海兔默认资产颜色
　　通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。
　　基于AdobeColor的三元取色工具，和3D立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们默认版本的基础色板。
　　设计资产
　　人物组件
　　基于自然的人物头身比例
　　基于自然的设计原则，我们不推荐使用Q版卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。
　　同时，我们结合情感化设计，将9种常见的职业角色进行人物设计。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。
　　AntDesign5。4。0正式发布更新内容
　　咱们先回顾20230328AntDesign5。3。3版本更新内容：Menu修复Menuitems没有使用传入的key的问题。修复Menu使用getPopupContainer选择主菜单时子菜单主题被覆盖。修复Table过滤器未保持状态当筛选下拉框展示时。修复Modal使用useModal未透传并优先选择用户设定。Form修复Form验证状态不按照顺序改变的问题。修复Form组件layoutinline时组件标题与表单项布局异常换行问题。修复ConfigProvidernonce对CSSinJS样式不生效的问题。修复Paginationsizesmall时，分页按钮active、上一页下一页按钮hover和active样式丢失。修复Tabs组件下边框与其他边框叠加的样式问题。修复Dropdown。Buttondown图标尺寸问题。TypeScript修复Breadcrumb。Itemmenu类型定义不正确的问题。优化GridCol类型提示。41453vaakian优化TableresetPagination类型提示。优化TreeSelectInternalTreeSelect类型提示。国际化完善DatePickerfaIR翻译。完善svSE语言缺失内容。
　　AntDesign5。4。0正式发布更新内容：移除antdeslocaleproviderantdliblocaleprovider目录，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重构部分组件代码。使用Reacthooks重构Checkbox，并优化了TS定义。重构Input。TextArea文字计数实现方式，移至affixWrapper元素中。DatePickerCalendar组件新增cellRender用于自定义日期单元格，同时在DatePicker中废弃dateRender和monthRender等属性，在Calendar中废弃dateCellRender、monthCellRender、dateFullCellRender、monthFullCellRender等属性。修复Tour出现两个箭头的问题。修复Checkbox配置controlHeighttoken时勾选框与文字不对齐的问题。修复Form。Item存在help值时在Modal中没有正确渲染元素。修复Form使用hasFeedback时表单状态不对的问题。修复Slider组件显示Warning：〔antd：Tooltip〕forcePopupAlignisaligntoforceAligninstead警告信息的问题。修复可选择Table的勾选框在边缘点击的时候无法触发勾选的问题。国际化更新TimePicker德语本地化文案。修复越南语本地化文案。添加缅甸语本地化文案。最后
　　一台电脑，一个键盘，尽情挥洒智慧的人生；几行数字，几个字母，认真编写生活的美好；
　　一个灵感，一段程序，推动科技进步，促进社会发展。
　　创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。