AntDesign的笔记

字体

字体样式选择: 优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库．

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';

另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。

proportional & tabular figures的区别

字号行高: Ant Design的主字体大小是14号,行高是22. 建议在一个系统中字阶(一系列有规律的不同尺寸的字体)选择在3-5种.

字号及行高

字重的选择: 多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。

字体颜色选择:

字体颜色

图标

系统图标的尺寸都是在1024*1024的尺寸上进行,左右出血各64px,即设计的区域是896*896px.

keyline

antdesign讲究元素的韵律.

点保持16的倍数,常用尺寸80、96、112、128;

线采用8的倍数,常用尺寸56、64、72、80;

圆角采用8的倍数,常用圆角8，16、32;

三角的角度受76°启发,从这个数值演变;

特别走心,图标的设计在视觉平衡方面也被提到.

因为弯曲的线条会比竖直的线条看起来细,因此圆形的外边框会在72px的基础上微调4px;

因为倾斜的线条会比竖直的线条看起来细,因此圆形的外边框会在72px的基础上微调4px;

图形的留白空间,当留白不足,通过线条的粗细达到视觉上的平衡.

线条粗细与视觉上的平衡