一个前端的UI设计学习之路 -- 文本

419 阅读3分钟

前言

文字作为信息传递的最重要途径,其排版和设计是非常重要的。言简意赅的总结下文本的排版设计思路。

字体

文字排版首先要思考的就是字体,对字体的基础了解是有必要的。

汉字

西文有基线、上升部、下降部的概念,而汉字是方块字: 图片

因此,对于汉字,有字面框和字身框的概念:

图片

汉字的字面率 = 字面框 / 字身框。

观察不同的字体,首先会体现在其字面率是不一样的,这是他们的区别之一。

除了字面率的区别,笔画的粗细内部结构的占比(如“玉”在“国”字的比例等),也是形成不同字体风格的重要元素。

了解这些,有助于更好的帮助你去选择想要的字体。

可以去这里实践下。

字体家族

同一字体的不同家族适用于不同的场景,不同的字号等。

比如新闻等场景适合严肃、庄重的;活动页要搭配主题风格的。

参考方正字体的介绍页,可以看到这款字体的介绍、背景、适用场景: 图片

比如这个实践案例: 图片

(方正兰亭黑字体的中宫放松,字面较大,笔画两端去除了黑体的喇叭口,布白均匀,适合用于网页的标题和正文)

一些细节

对于常规的正文排版:

  1. 字重:粗体时,字面率变大,字体内部应该调整间距,不要显得臃肿。以此来挑选字体。反之亦然。
  2. 字号:字号大时,应减小字体间距,因为即使变小了也依然看的清楚。同时,应适当增加字重,增加厚重感。反之亦然。
  3. 斜体起源于西文,中文排版中很少用到。

标点符号

  1. 一般说分为半角、全角。

  2. 中英文搭配时,应该用哪种标点,取决于当前的语境。

  3. 更细致的讲,假如把一个汉字所占的空间的称作“一格”,那么一个标点所占的空间不只有“半格”和“一格”两种选择,可能是25%,或者75%。

    图片

    (当两个全角标点挨着时,共同占据”1.5格“具有更好的视觉效果)。

文字排版

除了遵循上述的排版原则外,纯文字排版时,为了避免内容单调,可以把文字特殊化

遵循视觉动线设计,把部分文字图形化放大切割重叠等方法即可让画面更有层次感。

举个栗子:

图片

(加线条,体现“速度”)

图片

(文字组合,体现主题)

图片

(加元素,体现主题)

这些素材网上有很多,有的放矢的去找,并且将它们放在合适的地方,就能满足大部分需求了。

题外话

字体是有版权的。比如微软雅黑是方正字库的,而思源黑体则是开源的。

如果页面需要引入字体文件,一定要做好优化:压缩、兼容、预加载,避免性能问题,否则容易得不偿失。