前端的UI设计路 -- 文本
前言
文字作为信息传递的最重要途径,其排版和设计是非常重要的。言简意赅的总结下文本的排版设计思路。
字体
文字排版首先要思考的就是字体,对字体的基础了解是有必要的。
汉字
西文有基线、上升部、下降部的概念,而汉字是方块字:
因此,对于汉字,有字面框和字身框的概念:
汉字的字面率 = 字面框 / 字身框。
观察不同的字体,首先会体现在其字面率是不一样的,这是他们的区别之一。
除了字面率的区别,笔画的粗细、内部结构的占比(如“玉”在“国”字的比例等),也是形成不同字体风格的重要元素。
了解这些,有助于更好的帮助你去选择想要的字体。
字体家族
同一字体的不同家族适用于不同的场景,不同的字号等。
比如新闻等场景适合严肃、庄重的;活动页要搭配主题风格的。
参考方正字体的介绍页,可以看到这款字体的介绍、背景、适用场景:
比如这个实践案例:
(方正兰亭黑字体的中宫放松,字面较大,笔画两端去除了黑体的喇叭口,布白均匀,适合用于网页的标题和正文)
一些细节
对于常规的正文排版:
- 字重:粗体时,字面率变大,字体内部应该调整间距,不要显得臃肿。以此来挑选字体。反之亦然。
- 字号:字号大时,应减小字体间距,因为即使变小了也依然看的清楚。同时,应适当增加字重,增加厚重感。反之亦然。
- 斜体起源于西文,中文排版中很少用到。
标点符号
-
一般说分为半角、全角。
-
中英文搭配时,应该用哪种标点,取决于当前的语境。
-
更细致的讲,假如把一个汉字所占的空间的称作“一格”,那么一个标点所占的空间不只有“半格”和“一格”两种选择,可能是25%,或者75%。
(当两个全角标点挨着时,共同占据”1.5格“具有更好的视觉效果)。
文字排版
除了遵循上述的排版原则外,纯文字排版时,为了避免内容单调,可以把文字特殊化。
遵循视觉动线设计,把部分文字图形化、放大、切割、重叠等方法即可让画面更有层次感。
举个栗子:
(加线条,体现“速度”)
(文字组合,体现主题)
(加元素,体现主题)
这些素材网上有很多,有的放矢的去找,并且将它们放在合适的地方,就能满足大部分需求了。
题外话
字体是有版权的。比如微软雅黑是方正字库的,而思源黑体则是开源的。
如果页面需要引入字体文件,一定要做好优化:压缩、兼容、预加载,避免性能问题,否则容易得不偿失。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfeegcf
-
RedisTemplet ophotoshopForValue方法使用说明
-
用maven去clean项目的时候报Process terminated错误
-
Effective Objective-C 52个有效方法个人笔记
-
tf.keras.datasets.mnist报错AttributeError: module ‘tensorflow.python.util.dispatch‘ has no a ...等解决方法
-
LLDB六常用命令举例
-
iOS高级资深工程师面试篇②、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识》 Objective-C语言特性部分2/2 通知-KVC-KVO-属性关键字
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24