Ant Design Pro是款专业的UI设计工具和React组件库。它可以为用户提供专业的组件模型，非常适合UI设计人员实用。为大家提供全方面的前端UI设计辅助功能，同时还具备大量的UI设计方案，可以很好的激发用户的设计灵感，非常不错。

　　Ant Design Pro软件中内置的功能组件以及设计模板十分丰富，软件会经常进行更新改动，及时更新最新的前端设计技术和组件；用户通过抽象化软件中内置的一些相似组件和页面，可以轻松设计出一些既稳定，复用性又高的内容；随着全球商业化的发展，不少企业对于产品的设计要求也逐渐提升，为了让用户能够有一个非常优质的产品体验，企业就必须在UI设计上有所突破；蚂蚁集团通过大量的项目实践，经过不断的打磨和优化终于推出了这款符合企业UI设计需求的设计软件，需要的朋友欢迎下载。

【软件特色】

　　1、更加专注内容：试想一下，我们在电影院看电影时，为什么要全场关灯？甚至有些 APP，在影片的下方也会有一个模拟关灯效果的操作，来让整个手机屏幕变黑，只剩下视频画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下。

　　2、在暗光环境下更加适用：如今社会我们身处黑夜使用手机、电脑、ipad等设备的次数越来越多，环境光与屏幕亮度的明暗差距在夜间会被放大 ，亮度对比带来视觉刺激也更加明显，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，同时也可以为设备的续航带来积极影响，可以保证使用者在暗光环境下使用 OLED 设备的舒适度

　　3、大众喜爱：黑色一直以来就可以给人以高级、神秘的语义象征，相比于浅色模式，暗色模式藏着更多可能性

【软件功能】

　　1、从企业级背景产品中提取的交互语言和视觉组件。

　　2、高质量的开箱即用组件。

　　3、使用打字稿开发，提供完整的打字稿定义文件。

　　4、完整的链接开发和设计工具系统。

　　5、数十种国际语言支持。

　　6、针对每个细节的深入主题定制功能。

　　7、Ant Design Pro为Web应用程序提供了丰富的基本UI组件。

【软件亮点】

　　1、对自然的感知：Ant Design Pro在某些情况下，添加其他感知渠道（如听觉和触觉）可以创建更自然的产品体验。

　　2、自然行为：辅以行为分析，人工智能，帮助用户做出决策等，使人机交互更加自然。

　　3、模块化设计：Ant Design Pro使用现有的组件/模板可以节省用户的时间，并使“设计者”将自己的创造力集中在最需要的地方。

　　4、价值连接：让产品价值被发现，并帮助用户建立更有效和高效的工作方式。

　　5、人机共生：产品功能与用户需求之间的更多联系，使人机交互更加紧密，用户与系统之间的共生。

【使用方法】

　　布局

　　空间布局是系统视觉设计的起点。与传统的图形设计不同，UI界面的布局空间应从“动态，系统”的角度进行开发。受建筑大师柯布西耶（Corbusier）的模块化思想的启发，基于“顺序美”的原理，我们探索UI设计中的动态空间顺序，并形成了蚂蚁设计的界面布局模式，这为设计者利用其构建布局空间创造了条件。理性的美丽。

　　为了在背景视觉系统中定义布局系统，我们建议从五个方面入手：

　　1、统一绘图板尺寸

　　2、适应方案

　　3、网格单位

　　4、栅格

　　5、常用模度

　　统一画板

　　为了尽可能减少沟通和理解的成本，有必要在组织内部统一设计电路板尺寸。蚂蚁中级设计团队的统一画板大小为1440。

　　适配

　　在设计过程中，设计人员还需要建立适应性概念，判断系统是否需要根据特定情况进行适应性调整，以及哪些块需要考虑动态布局。据统计，使用中端系统的用户主流分辨率为1920、1440和1366，某些系统中有1280个显示设备。

　　蚂蚁设计有两种典型的适应方案

　　1、左右布局的适应方案

　　它通常用于左右布局的设计中。常见的方法是将导航栏固定在左侧，并动态缩放右侧的工作区。

　　2、上下布局的适应方案

　　它通常用于上下布局的设计方案中。该方法是在两侧定义空白区域的最小值，然后在空白区域达到极限值之后动态缩放中间的主要内容区域。

　　这里仅提及两个非常简单的适应性想法。实际设计中的完美适应方案要求设计人员具有前端角度，平面组成角度和交互角度。

　　网格单位

　　蚂蚁设计通过网格系统实现视觉系统的顺序。网格的基数为8，不仅符合偶数的概念，而且可以匹配大多数主流显示设备。通过建立网格的思维方式，可以帮助设计人员快速实现布局空间的设计决策，并且可以简化从设计到开发的通信损耗。

　　关于栅格

　　蚂蚁设计采用24格系统。对于上面的24，如下图所示划分网格结构。我们为页面中网格的装订线设置一个固定值，即，如果浏览器在某个范围内扩展或缩小，则网格的列宽将扩展或缩小，但是装订线的宽度值是固定的。

　　对于开发人员而言，网格是实现动态布局的一种手段，而设计师对网格的理解来自于图形设计中的网格。在特定的着陆点上，不同的观点很容易导致偏差，最终影响还原程度，进而增加沟通成本。

　　Ant Design的设计师通过四个方面与工程师沟通：

　　明确定义动态布局范围

　　尽量保持思考

　　交付关键数据（装订线，列）

　　块的定义以column开头，以column结束

　　常用模度

　　蚂蚁背景涵盖了大量不同类型和大小的产品。为了帮助具有不同设计能力的设计人员在界面布局中具有一致的节奏感，使设计与布局语言的发展统一起来，并减少减少的损失，ant设计提出了UI模块的概念。在大量实践中，我们提取了一组可用于UI布局空间决策的数组。它们都保持8次运动的原理，并具有动态的节奏感。经过验证，可以在一定程度上帮助我们更快更好地发展。

　　图标

　　图标是UI设计中必不可少的组件。通常我们了解图标设计的含义，就是将一个概念转换为清晰易读的图形，从而减少用户的理解成本，提高界面的美观度。在我们的企业应用程序设计范围内，图标通常仅在界面设计的许多元素中占很小的比例，并且在被调用时，它们的大小将比设计草案小很多倍。此外，今天，当图形资料非常丰富且易于获取时，通常不会在产品设计系统中实施一套漂亮，一致，易于使用，易于扩展的图标系统。请小心忽略它。蚂蚁设计认为，一套完整的高质量图标对设计质量有很大影响，它测试了设计师在图形建模方面的协作能力和系统思考，也反映了团队对细节的追求。

　　蚂蚁设计在“确定性”和“自然”设计值的影响下，一套完整的基本系统图标已被转换。现在，您可以直接在我们的网站上查看和使用图标的新版本。同时，我们将在这里与您分享我们的系统想法。我们希望更多的设计师能够参与这个孤独的微世界，并一起设计图形来做好工作。

　　设计师专属

　　安装Kitchen sketch插件，您可以一键拖放Ant Design和iconfont的大图标，还可以关联自己的项目。

　　设计原则

　　Ant Design的图标设计原则源自“确定性”和“自然”，并在图标设计领域中实现。共有四项原则，即：

　　准确性：以准确的造型设计图标（保留偶数原则，去掉小数点）；选择具有正确含义的图标，不会对用户的认知造成麻烦。

　　简单：在清晰准确的表达基础上，尽量使图形简洁，不要做多余的装饰。

　　节奏：发掘顺序中的美。

　　愉悦：给予适度的情绪。

　　设计规格

　　画板：蚂蚁设计的系统图标全部根据1024 x 1024的画板制作

　　出血位置：在图标的设计过程中保留出血空间的做法可以防止在某些形状的图标的特定应用中出现切掉边缘的风险；同时，在设计过程中，还为设计师留出了把握图标之间平衡的空间。在新的设计规范中，图形外围保留了64px的出血空间。对于设计中的大多数图标，我们建议不要超出此范围。

　　分层

　　蚂蚁设计的图标设计对设计稿的分层也有一定要求。其目的不仅是使设计人员能够实现有序的文档管理，而且还便于团队之间的文档传输。统一的设计框架就像一个看不见的共识，可以进一步增进彼此之间的理解。

　　大纲和模板＃

　　我们优化设计模板，根据出血位置的大小调整轮廓线的宽度和高度，并同时添加两个等边三角形和一个圆。这些是图标设计中最常用的基本形式，设计人员可以在此基础上快速调用和变形。

　　图标设计准则

　　根据“确定性”和“自然”的价值观，当构图的含义明确时，图标设计所追求的就是秩序之美。 Ant Design的图标主要通过形式，节奏，平衡和识别四个方面来实现“秩序的美”。

　　1.形式

　　形式是图形的初始结构。 Ant Design的整个基本图标集基本上是从圆形，正方形和三角形演变而来的。顺序美感的第一步是追求图形初始结构的合理性，而不是直观的设计。

　　2.韵律

　　蚂蚁设计图标的节奏感体现在两个方面：元素的节奏和构图的节奏。系统图标中最常见的元素可以概括为：点，线，圆角，三角形。

　　2-1、元素节奏＃

　　点：点是出现在许多图形中的元素。蚂蚁设计将在一组图标中挖掘相同元素的规则，并加以克制。在选择点大小时，我们将保留16的倍数原则。例如，在选择点时，最常用的图标新版本是四种大小的点，分别是80、96、112和128。如果有特殊的大小要求，它将扩展为16的倍数。

　　线条：线条也是最常见的元素之一。新版本图标的线条之间的关系采用8倍的原理，并按照8的规则从小到大增加。有四种常见规格，即56、64、72和80。

　　圆角：圆角的规格采用8倍的原则。最常用的是8、16和32。它们之间有两次。图标内部空间的圆角以直角处理。

　　三角形：新图标的角度受美国战斗机F-14雄猫的启发，常用角度设置为约76度。在日常设计中，大多数系统图标可以从76度开始，可以根据实际情况灵活应用。

　　除了定义角度，我们还对新图标中实心箭头的规格进行了收敛。在保持顶角约76度的基础上，最常用的是四个。它们的宽度是8倍，间隔是24:00

　　下表总结了基本元素的规格，建议设计师在设计图标集时要保持克制的态度。

　　2-2、构图的韵律

　　在图标系统中，除了重复元素的管理外，我们还建议考虑整体设计节奏。

　　在构造中保持相似图标的一致性也是建立图标系统节奏的一种方法。

　　此外，在单个图标的设计过程中，还建议适当，合理地处理元素之间的比例关系，而不要直观地绘制。

　　3.平衡

　　在很多工作上要使整个图标保持平衡并不容易。图标的形状，线条的放置角度甚至空白区域都是影响视觉平衡的因素。因此，设计人员有必要通过微调基本元素规格来实现图标的平衡。

　　弯曲的线条看起来比垂直的线条细，因此，我们将通过4PX调整72px的大小。

　　斜线看起来也比垂直线细。因此，倾斜的线也将被微调4像素。

　　图形的空白也是值得思考的主题。当某些图形的空白空间不足时，可以通过调整线条的粗细来实现视觉重量的平衡。

　　4.辨识

　　区分性是一组图标的可感知特征，通常与系统本身的品牌基因有关。这次，除了遵循“确定性”和“自然”的值，蚂蚁设计的系统图标还在识别方面做了两次小尝试。

　　让技术具有温度：通过定义圆角，将圆角（72）调整为（32），以使图标看起来更加僵化和合理（与技术感相对应），但又不会太尖锐（随温度变化） 。

　　让图形栩栩如生：在某些图标设计中，拟人化元素将被适度注入以使图标具有生命力。

　　给设计师的一些建议

　　完成图标设计后，保持图形的清洁和层结构的清晰也是构建图标系统的重要部分。蚂蚁设计对设计师的建议如下：

　　卸下冗余节点并保持图形清洁。

　　合并图形以方便导出。

　　进行最后的遍历并校正到小数点和奇数。

　　整洁的图层管理。

【常见问题】

　　问：软件会提供 Sass/Stylus 等格式的样式文件吗？

　　答：不会提供。但你可以使用工具将 Less 转换成 Sass/Stylus 等。

　　问：使用时点击“Select Dropdown DatePicker TimePicker Popover Popconfirm”内的另一个 popup 组件时它会消失，如何解决？

　　答：该问题在3.11.0后续版本中已经得到解决。但如果您使用的仍然是旧版本，可以通过在 Popover 中渲染组件，或者使用其他的 getXxxxContainer 参数进行解决。

　　问：如果只想使用 Menu/Button 等，是不是必须 import 整个 antd 和它的样式文件？

　　答：可以试试 babel-plugin-import，或者（ES6 支持的 tree shaking 方式）：

【新功能】

　　新增 tableLayout 属性，支持设置表格的 table-layout 布局，并在固定表头/列下默认开启 tableLayout="fixed"，解决因为表格自动根据内容排版造成的列对齐问题。

　　新增 column.ellipsis 支持单元格内容自动省略。

　　新增 scroll.scrollToFirstRowOnChange 属性，用于设置在翻页后是否滚动到表格顶部。

　　filterDropdown 新增 visible 参数，用于获取下拉框的显示状态。

　　title 方法新增 sortColumn 参数，用于获取当前排序的列。

　　排序时 onChange 的 sorter 参数将始终包含 column 信息。

　　修复过滤下拉菜单的间距问题。

　　Anchor 新增 onChange 属性，用于监听锚点链接的改变。

　　新增 showDownloadIcon 属性，用于展示下载图标。

　　支持 onRemove 对上传中断的控制。

　　Input.Search 新增 loading 属性，用于展示加载中的状态。

　　Grid 的 gutter 属性新增垂直间距的支持，现在你可以给 gutter 设置一个数组，数组的第二个值就表示垂直间距。

　　message 新增支持通过唯一的 key 来更新内容。

　　Layout 新增 zeroWidthTriggerStyle 属性以控制当 collapsedWidth 为 0 时，出现的特殊 trigger 的样式。

　　Drawer 新增 drawerStyle 和 headerStyle 属性。

　　新增 ghost 属性，用于设置是否需要白底背景。

　　新增 pageHeader 用于全局控制 PageHeader 的样式。

　　修复 moment 不能被 tree shaking 的问题。

　　修复 TreeSelect 的 removeIcon 和 clearIcon 属性不生效的问题。

　　修复 Tree 设置 showLine 后 switcherIcon 不生效的问题。

　　修复 Slider 组件设置 handle 大小后定位错误的问题。

　　修复在 IE 11 下的图标样式。

　　修复 expandIcon 的 className 会被覆盖的问题。

　　修复 Tree.DirectoryTree 组件传入 treeData 时 defaultExpandAll 不生效的问题。

　　修复 Dropdown 下部分 Menu 样式错乱的问题。

　　修复 Cascader 的 placeholder 国际化错误。

　　新增 less 变量 @typography-title-margin-top 和 @typography-title-margin-bottom。

　　提示：废弃 Input.TextArea 的 autosize 属性，请使用 autoSize 代替。