飞特网顶部通栏AD位

UI设计教程——设计语言(行高)

心蓝发布于:2019-7-30 09:41 |原作者: 罗耀_UI
简介: 在文字编排中如何准确设置行高

版权申明:本文出自“罗耀_UI”原创,感谢“罗耀_UI”的原创文章分享!

文字编排一共两篇,这是篇文章上篇,主要讲如何设置行高、行高与行间距的差别。那下一篇主要讲行长,在页面中如何约束行长使它更合理,阅读更舒适。另外我也希望我的文章的内容由你们来定,我可以把你们想学习的知识穿插到系列文章中,来尽量满足大家的需求。

目录

1.字号的设置

2.根据需求随意组合 

3.英文的行高

4.英文的行间距

5.中文的行高

6.中文的行间距

7.行高的禁忌

8.标题行高

9.正文行高

10.混合编排

11.字体选择

1.字号的设置

字号就是字体的大小,文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的,最好采用偶数。像14号字的正文和13号字的注释,这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号,只要视觉上美观大方并具有关联性,采用哪种规则去约束它都可以。

UI设计教程——设计语言(行高) 飞特网 设计理论

另外所有的字体都要调试出深色和浅色两种配色,并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

2.根据需求随意组合

当我们定义好字号,标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系,字号差异越大它们的层级关系就越明显,但它们之间的差异又不能太大,差异过大会影响整体的视觉平衡性,给人一种不和谐不自然的感觉。

UI设计教程——设计语言(行高) 飞特网 设计理论

例如:标题字号20px搭配正文字号12px;标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。

3.英文的行高

在设置文本行高的之前,需要理解一下"行高"与"行间距"的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以"行高"来进行定义的。在CSS-Style line-height属性是行高,值分别以百分比、数值和像素来表示。例如:h1.test {line-height:112px},那标题h1的行高就是112像素了;绘图软件中控制行上下距离的也是行高。好的言归正传,中文的行高与英文行高会有一些差异,英文的行高指的是一行英文的基线与下一行英文的基线之间的距离,如下图所示。

UI设计教程——设计语言(行高) 飞特网 设计理论

基线是英文字体结构中的概念,先简单了解一下它吧,以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时,改变的就是上图所示的这段距离。

4.英文的行间距

英文的行间距就没有行高那么复杂,也不用画基线。英文的行间距跟中文相同,指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为"行与行之间的距离"并称之为行间距。另外英文底部和顶部都有对应的专有名词的,在英文字体结构中最顶部/最底部隐性的两条线称为"上沿线/上限线"和"下沿线/下限线"。这块的知识先了解一下就行,以后在字体结构中会讲到。

UI设计教程——设计语言(行高) 飞特网 设计理论

123下一页
3

好评

差评

刚表态过的朋友 (3 人)

心蓝
上海市 徐汇区 设计爱好者
+ 关注 私信
  • 远离侵权深“坑”,规范字体应用
  • 2020动态设计师联合趋势报告
  • 颜色应用--蓝色篇
发表评论

最新评论(1)

回 复 1楼
Oscar发布于:2020-3-31 23:42
比心

查看全部评论(1)

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 移动版| 飞特网