Ant Design(UI设计软件)

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

软件功能

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

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

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

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

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

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

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

软件特色

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

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

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

　　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），以使图标看起来更加僵化和合理（与技术感相对应），但又不会太尖锐（随温度变化） 。

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

　　给设计师的一些建议

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

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

　　合并图形以方便导出。

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

　　整洁的图层管理。