Ant design系列认知

Ant design系列认知

作者：代富强 撰写日期：2019.5.13
以下是我在Ant design 里学到的知识：亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近、间隙也越小，越像一个视觉单元；反之，则它们的距离就应该越远、间隙越大，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。更加释然。
纵向间距关系

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

增加元素示例
通过增加『分割线』来拉开层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
横向间距关系

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

复选框内示例
在一个组件内部，元素的横向间距也应该有所不同。
以上是我对亲密性的看法。接下来我要说的是对齐：对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
文案类对齐

推荐示例
标题和正文左对齐，使用了一个视觉起点。

不推荐示例
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点，这样看起来就不会觉得那么散乱，更加和谐美观。
表单类对齐

冒号对齐示例
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率，所以这里很需要注意，千万记住是右对齐，不是左对齐，左对齐会因为每段字数不同、长短不同而显得格外的不美观。
数字类对齐

正确示例

错误示例
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。因为如果对齐运算符号，那么因为每项数据的大小不同，小数点的位置可能会存在偏差，这样可能会因为小数点看错位而统计错误，对齐小数点的话，不经可以很明显得看出来运算符号是什么，这样也方便统计，不会因为小数点这么个很小很细微的东西破坏了整体。细节也是很重要的。