目录
概述
字体原则
字体
字号
字重
颜色
行间距
段间距
概述
文字是信息传达的工具,字体是的外在形式特征。我们对字体进行统一的规范,力求在各个系统下都有最佳的展示效果。体现友好、稳定、专业的特性。
衬线字体:在笔画开始、结束的地方有额外的装饰,而且笔画竖线比横线粗。衬线体在传统印刷中能带来更佳的可读性。
无衬线体:没有这些额外的装饰,而且笔画的粗细差不多。无衬线体给人一种轻松的感觉,看起来更干净,更符合扁平化的设计。比较适合屏幕端的显示。
原则
对比:使强的更大、弱的更弱。使用字号、字重、颜色等方式使信息层级更加清晰、对比更加明显。
克制:使用统一的字体。最多两种字重。以避免层级过于微妙和繁多。
字体
优先使用系统默认的字体。苹果系统的中文字体默认使用苹方,Windows系统中默认使用Microsft YaHei,英文和数字可以使用Arial。如果使用特殊字体需要和前端沟通,看电脑和浏览器是否能够兼容、是否购买字体商用权。
字号
采用14号字体为主字号,使文字更加清晰、易读,在繁多的信息里阅读起来更加轻松,增加文字的可读性,减少用户阅读时的疲惫感。
参考AntDesgin的研究“我们基于电脑显示器阅读距离(50 cm)以及最佳阅读角度(0.3)对 Ant Design 的主字体进行了一次升级,从原先的 12 上升至 14,以保证在多数常用显示器上的用户阅读效率最佳”
字重
苹方提供了6种字重。微软雅黑有3种字重。基于对比、克制的原则,采用 regular 、Blod 的两种字体重量,
颜色
共有三种颜色:主文字颜色、辅助颜色、不可点击/提示框文字。
我们在文字的黑色里添了一下品牌色的蓝色,使颜色有了倾向,也更耐看。参考了 WCAG的标准。我们的主文字和背景的对比度是14:1 (AAA级)
行间距
上下行文字的基线间的距离,即图中两条红线间的距离。 而并非文字高度+上下间隔的高度。虽然这两种定义并不影响最终结果,但还是区分一下比较好。
西文的基本行高通常是字号的1.2倍左右,而中文因为字符密实且高度一致,所以行高设定为文字的1.5倍。
段间距
亲密性的原则,段落之间的间距应该大于段内文字之间的距离,通常空一行文字。
段间距>行间距>字高
下篇更新【设计原则篇】~~