文字规范
文字排版是我们最常见的,特别是多文本,也设计师最容易忽视的排版细节。在这里,我整理了一些,希望能够对大家有所帮助。
字不过三
文字和配色一样,字体类型数量最好不超过3种。无论PC端还是移动端,产品界面出现过多的字风格统一性差,容易造成视觉干扰。一般为两种,不同的字体,信息更加突出。

字体大小
随着手机屏幕越来越大,界面信息承载量以及文字在界面尺寸中的大小都有所调整,大标题成为近年的通用,通过字体大小去凸显内容、区分层级是一种设计趋势。而且pc端和手机端人的视觉距离不同,字体大小规范也会不同。文字之间要注意大小阶梯比例(Material Design对字体标题和内容文字的大小刚好是1.6倍,接近黄金比例)。在制定文字规范时一定要注意自己界面留白、间距以及图片尺寸界面整体的协调性,不要盲目的套用其他产品的设计规范,适合自己的才是最好的。字体字号大小在一个产品规范中最好不要太多,好的设计语言越优化越简化,减轻用户记忆负担,加强用户体验。

字重
除了字号大小,字重的选择也一样要考虑重复原则统一性。常用的字体都有不同的字重选择,切忌使用PS自带的加粗样式,会破坏字体本身原有的美感。文字颜色也不要使用图层样式,以便技术获取。

文字间距
多文本字体间距的处理好坏会直接影响可读性,特别是文章类详情界面。行间距过高导致视线分散,容易游离;行间距过小则容易影响视线的移动,无法区分文本信息。正文行间距一般为字号的1.5~1.8倍之间。(字号不同字体内边距也不同,会影响技术人对设计稿的还原,特别是安卓适配。这里给大家推荐两个sketch插件,自动修复行高,完美还原。 iOS Text Line Height 和Android Text Line Height)


统一对齐
统一的对齐会让文字排版整洁有序,阅读更舒服。对齐有三种:左对齐、居中对齐、右对齐。在一个界面上最好只有1~2种对齐方式,多个会导致界面信息散乱。正文要尽量保持两端对齐,居中对齐要考虑段落阶梯,以及一行的可读长度。(多行文本最好使用栅格系统)
对比度
相同的文字色值在不同背景上,会有不同视觉表现。信息的优先级不同,文字对比度的强烈和弱都不同,这取决于设计师对信息的梳理和理解。一般的可读性文本是要控制在视觉阅读的舒适范围,Material Design中推荐的文本对比度为7:1,最小值为4.5:1。文字对比度过强或过弱都会影响阅读体验。
总结
看似简单不起眼的文字,却能直接影响设计质量。我们看一个作品不舒服,却说不出来问题在哪,往往可能是某个细节的忽略。文字最常见也是最传统的存在,文字也能给人带来想象力,如今短视频流行的年代,让一个人读一两段话容易,坚持读一篇文章确实不容易,所以设计师应该懂得如何优化阅读体验。(瞬间觉得好神圣,哈哈哈)
推荐书籍
本次推荐书籍是《平面设计中的网格系统》约瑟夫·米勒-布罗克曼/著,这本书虽然讲的是平面,但是设计都是相通的。与大家共勉







































