设计B端项目，我们需要思考的是如何运用组件化的思维去维护后续的迭代和优化，以及如何进行团队的协作。而团队化的组件规范，是良好协作的基础。antdesign作为一种B端设计语言，是目前开源化组件非常好的。所以，在KCL项目中，我们积极推动引入antdesign的设计规范，并结合我们自己的项目特色和本身的一些设计进行了融合。在本篇中，主要简单阐述，我们在学习和运用antdesign过程中的一些做法和经验，或者说一些简单的思考和大家分享。如有不合适的地方，欢迎大家留言交流。
一、目录
1、字体
2、颜色
3、排版
4、间距
5、布局
6、导航
一、字体
字体是体系化界面设计中最基本的构成之一。我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。我们选取的字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的（备注：动态秩序-一种面向未来的极简化哲学，其意义在于为全人类提供一种基础性的社会发展共识。此处应当理解为在字体选取时，保证字体极简化的前提下，寻求一种排版上的秩序性。）
我们选取字体的原则，一是针对B端项目特点，以非衬线体为主；二是尽量避免版权字体侵权，选择开源字体；三是如上述第一段提倡的动态秩序原则，字体之间避免无规律性以及差异过大。
1、字体家族
优秀的字体系统首先是要选择合适的字体家族。系统项目的字体家族中优先使用系统默认的界面字体，我们同时准备了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。如下所示：
font-family:ChineseQuote,-apple-system,BlinkMacSystemFont,SourceHanSans,PingFangSC,HiraginoSansGB,MicrosoftYaHei,HelveticaNeue,Helvetica,Arial,sans-serif,AppleColorEmoji,SegoeUIEmoji,SegoeUISymbol;
上述是antdesign的推荐字体家族，但是在考虑到我们项目的特点和团队资源情况，我们只考虑了比较常用的：苹方简体、思源黑以及英文的helvetica和helveticaneue、arial字体。其他推荐字体，暂没有采用。因为一个项目中常用的，除了banner或者推广位，不会超过三款字体。字体种类应用过多，也会显得系统不严谨。
其中微软雅黑字体，我们仅在PC端项目界面中常规叙述或内容中，会作为备用字体使用。其他用途，例如推广、banner时，如需采用，恐需要授权。请谨慎采用哈。
1.1、中文
苹方黑体简-优先字体
思源黑体简-备用字体
冬青黑体简-备用字体
1.2、英文
HelveticaNeue-优先字体
Helvetica-备用字体
arial-备用字体
2、主字号
基于电脑显示器阅读距离（50cm）以及最佳阅读角度（30度），保证在多数常用显示器上的用户阅读效率最佳效果，确定正文的标准字号14px。我们初期并非采用antdesign推荐的14px，而是之前传统经验中的12px，可是后续发现在12px字号情况下时，对于大段文字内容时，易读性较差。特别是我们一些商户反馈，总是看错。同时，在mac系统下和pc端系统下同一内容界面上内容，易读性和可读性的确存在差异。所以，最终我们还是采用了antdesign的推荐正文标准字号14px。
3、字阶（字号）与行高
字阶（字号）和行高决定着一套字体系统的动态与秩序之美。字阶（字号）是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。行高此处我们定义为一般排版梯度字号的1.5倍。同时建议在一个系统设计中（展示型页面除外），字阶（字号）的选择尽量控制在3-5种之间，保持克制的原则。多字号时，会显得整个页面比较凌乱。
但是具体是将行高的排版梯度定义为字号的1.5倍，还是2倍。需要具体看项目的实际展示效果。不能一概而论。正如antdesign也说了，其一些标准只是推荐而非规定标准，是方向而不是限制。
4、字体颜色
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了WCAG的标准，将正文文本、标题和背景色之间保持在了7:1以上的AAA级对比度。（备注：标准文字与背景对比色，色值可以按下表，也可灵活选取）
其实说真的，关于antdesign推荐的这个标准，你如果严格按这个来，自然也可以。不按这个，依靠体验设计师的经验判断，应该也是没有没问题的。我们是两个进行了一定的结合，因为对于字体的颜色，不同设计师对于其灰色的感知受限于经验，同样也受限于设备。所以，我们团队在处理项目中字体颜色的时候，主要是通过这个网站来判断大家对于颜色的把控的：