Ant Design蚂蚁设计理念

                                                Ant Design蚂蚁设计理念空间布局是体系视觉设计的起点，和传统法人平面设计的不同之处在于，UI界面空间要基于【动态、体系化】的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于【秩序之美】的原则，探索UI设计中的动态空间秩序，形成了Ant Design的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。在中后台视觉体系中定义布局系统，我们建议从5个方面出发：1、统一的画板尺度  2、适配方案  3、网络单位  4、栅格

5、常用模度。
统一的画板尺度
无论是做任何的网页或是后台网站画板的尺度是必须要统一的，这样会避免出现一系列的问题所以统一的画板尺度很重要。
适配方案
在常用的布局当中左右布局和上下布局是最为常用的，左右布局最常布局的做法就是在左边输入一些内容文字右，右边可能就会放一些图标或是图片作为装饰。

上图就是一张左右分割布局的一个板式图，这张板式图是呈左右强弱的排版进行布局的，这样看起来就会比较不平衡这只是个人视觉上不同的感触而已，但比较上下布局版块来说左右布局的视觉感官不如上下布局的视觉流畅自然。
网络单位
Ant Design 通过网络体系来实现视觉体系的秩序。网络的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网络的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。
栅格
Ant Design采用24栅格体系。以上下布局的结构为例，对内容区域进行24栅格的设置，对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本，Ant Design的设计师通过4点来实现设计过程中和工程师的沟通：
1、清晰的定义动态 2、尽量保持偶数思维 3、关键数据的交付（Gutter、CoIumn） 4、区块的定义要从couIumn开始到coIumn结束。
常用模度
蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一的设计到开发的布局语音，减少还原损耗，Ant Design提出了UI模度的概念。在大量的实践中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了8倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。

如上方内容所示一样这张后台网站都是统一的画板尺度减少了不必要的出现的某一些问题，适配方案是根据上下左右的布局进行的一个搭配没有出现左右强弱的视觉问题看起来也没有什么视觉上的不流畅和不自然的视觉感官，常用的模度具备上方所述内容的动态的韵律感其实布局对于设计师来说只是一个思路上的一个方案而已，不一样的网页有不一样的布局风格，有的严谨有的松弛也有些是青纯可爱的，布局方式不一样里面排版的内容也不一样有的只适配与左右布局的方式不适用于上下布局的方式（就比如登录页面和注册页面这两种页面就只适用于上下布局的板式）就像这张登录页面他

的布局板式就是一个上下布局的一个板式设计，

Ant Design蚂蚁设计理念相关推荐

蚂蚁Ant Design组件库的免费在线资源
Ant Design(蚂蚁组件)是蚂蚁集团体验技术部经过大量项目实践和总结,逐步打磨出的一个设计系统,内含带有 React 的 UI 库.它是为企业级产品设计而创建的.Ant Design 提供了高质 ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...
【拓展】深度解析蚂蚁Ant Design的设计原则
作者:菜菜不甜 https://www.zcool.com.cn/article/ZMTI1OTI1Mg==.html 本文讲述了Ant Design设计原则的相关内容,希望可以给到各位帮助. 『 A ...
深度解析蚂蚁Ant Design的设计原则
『 Ant Design是什么』众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合.同时这类产品中有存在很多类似的页面以及组 ...
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
蚂蚁金服 ant design 中下载axure 菜单组件库
下载地址为:https://library.ant.design/
Ant Design 被删代码已恢复，现登顶 GitHub Trending Top 2
[CSDN 编者按]前几天沸沸扬扬的 Ant Design 代码被删事件有了新进展.经多方努力,目前被删代码已恢复,到底是删库跑路还是年终没给够目前尚无明确定论,事件起因仍在调查中-- 作者 | 李磊 ...
Ant Design离线使用Icon图标资源
使用环境:开发环境内网 node + React + antd 第一种方法:[推荐] 第一种方法[原创]: 想在网上找到的第二种方法,试验一下可以.但是我不想失去按需加在css的功能,所以自己 ...

Ant Design蚂蚁设计理念

Ant Design蚂蚁设计理念相关推荐

最新文章

热门文章