Ant design系列认知
Ant design系列认知
作者：代富强 撰写日期：2019.5.13
以下是我在Ant design 里学到的知识：亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近、间隙也越小，越像一个视觉单元；反之，则它们的距离就应该越远、间隙越大，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。更加释然。
纵向间距关系
纵向间距示例
在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
增加元素示例
通过增加『分割线』来拉开层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
横向间距关系
组合排布示例
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
复选框内示例
在一个组件内部，元素的横向间距也应该有所不同。
以上是我对亲密性的看法。接下来我要说的是对齐：对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
文案类对齐
推荐示例
标题和正文左对齐，使用了一个视觉起点。
不推荐示例
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点，这样看起来就不会觉得那么散乱，更加和谐美观。
表单类对齐
冒号对齐示例
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率，所以这里很需要注意，千万记住是右对齐，不是左对齐，左对齐会因为每段字数不同、长短不同而显得格外的不美观。
数字类对齐
正确示例
错误示例
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。因为如果对齐运算符号，那么因为每项数据的大小不同，小数点的位置可能会存在偏差，这样可能会因为小数点看错位而统计错误，对齐小数点的话，不经可以很明显得看出来运算符号是什么，这样也方便统计，不会因为小数点这么个很小很细微的东西破坏了整体。细节也是很重要的。
Ant design系列认知相关推荐
- Ant Design 4.0 进行时！
引言 Ant Design 于 17 年 12 月发布 3.0 以来,已经经历了 16 个月的时间.在此期间,我们修复了海量 Bug.以及增加大量新功能(更新日志).提交了 4289 个 commit ...
- 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
- Jeecg-Boot 1.1 发布，基于 SpringBoot+Ant Design 的快速开发平台
Jeecg-Boot 1.1 版本发布,初成长稳定版本 导读 ⊙平台首页UI升级,精美的首页支持多模式 ...
- 苹果正式发布自研 M1 处理器；神州数码回应：未与华为就荣耀出售达成任何协议；Ant Design 4.8.1发布|极客头条
整理 | 郑丽媛 头图 | CSDN 下载自东方 IC 快扫描二维码来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早 ...
- 阿里回应被列为被执行人；Linus Torvalds：我已经不是程序员；Ant Design 4.4.1 发布 | 极客头条
整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极 ...
- 小米回应暴力裁员；报告称安卓手机贬值速度是 iPhone 两倍；Ant Design 4.0.1 发布| 极客头条...
整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
- 朱啸虎回应“美团滴滴合并”；小米成世界第四大手机制造商；Ant Design 3.26.1 发布 | 极客头条...
整理 | 屠敏 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
- 马云谈 5G 危机；腾讯推出车载版微信；Ant Design 3.22.1 发布 | 极客头条
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
- Ant Design Charts绘制中国地图并动态添加标记点
绘制中国地图并动态添加标记点,在这里使用的是antd charts绘制,需要求只显示中国地图,并且跟踪物流信息 使用组件地址: 图表 - Plot | Ant Design Charts 这里的引入方 ...
最新文章
- Tomcat源码分析 | 一文带你整体把握架构及组件
- 零积分下载，2014年辛星mysql教程秋季版第一本已经完工，期待您的支持
- 6.11python 作业
- Xen虚拟机加入Puppet环境如何解决时间同步问题
- jQuery 帮助文档
- java代码上传到私服,maven上传源码到私服(示例代码)
- matlab 发音,MATLAB,MATLAB language,音标,读音,翻译,英文例句,英语词典
- 笔试——字符串算法题——寻找最大回文子串
- hipster_通过Java Hipster升级Spring Security OAuth和JUnit测试
- Linux环境变量PSI指什么,psi是什么单位？
- 如何写好一份数据分析报告？
- @Scheduled同步多线程配置
- 【unknow ssid】两种办法获取WIFI名称99%可解决
- Flutter-RefreshIndicator不能下拉刷新
- linux修改时间写入cmos,解析Linux操作系统修改时间
- golang 字符串转整形 string 转 int ，go string 转 int
- C语言初学者|新手入门
- 现货白银走势图哪里看？
- 哈哈，又找到几个强大的html5+css3的动画效果
- 那些年，我们一起写的设计模式（一）——单例模式（Singleton Pattern）