Ant Desian

作者：巧仔
时间：2019年5月16日

Ant Desian的企业级产品是一个庞大且复杂的体系。它里面说到的原则有：亲密性、对齐、对比、重复、直截了当、足不出户、化简交互、提供邀请、巧用过渡、及时反应等。
视觉有：色彩、布局、字体、图标等。
模式有：概览、文案、导航、数据录入、数据展示、反馈等。
还有可视化和动效等。

下面说一下原则里面的亲密性。

亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距关系

纵向间距示例
在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。

增加元素示例
通过增加『分割线』来拉开层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是『基础间距』。

横向间距关系

组合排布示例
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。

复选框内示例
在一个组件内部，元素的横向间距也应该有所不同。

下面是视觉里面的色彩。
色彩
Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
设计师专属
安装，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板。
色彩模型
计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
系统级色彩体系
然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
产品级色彩体系
品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

功能色
接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：

中性色
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：

作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。

Ant Desian相关推荐

jenkins+ant+jmeter接口测试
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl=" ...
对 Jenkins+ANT+Jmeter 接口测试的实践
转载地址:https://testerhome.com/topics/5262 1.前言最近感觉大家都在讲Jenkins+jmeter+ant或maven的使用,但没有说到具体怎么投入到项目使用,只 ...
linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道，打包生成apk文件...
原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html 之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...
编译工具之 ant
一.概述需要设置的环境变量: JAVA_HOME="D:\JDK", ANT_HOME="D:\ant", P ...
linux java 构建工具有哪些,Linux ant --强大的Java开发构建工具
用途说明 ant严格说来,ant其实并非原生的Linux命令,但它是一个使用广泛.功能强大的跨平台构建工具程序,尤其是进行Java开发时,许多开源的Java项目都使用ant作为构建工具.ant命令一般 ...
Ant Design of React从入门到开发教程
Ant Design Pro 是一个企业级中后台前端/设计解决方案. 目录: 一:开发前的准备二:创建页面三:创建组件并引用四:封装网络请求和网络请求走向五:登录流程以及路由权限设置六:父组 ...
Ant Design Pro 登录流程以及路由权限设置
登录流程: 1.ant 框架最外层套了 SecurityLayout 布局 SecurityLayout 中判断用户是否登录,做自动跳转路由处理. 里面的 currentUser 和 currentU ...
ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ...
Ant Design Pro 网络请求流程
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ...

Ant Desian

Ant Desian相关推荐

最新文章

热门文章