返回

长沙博为峰教育

网页设计中文字排版设计的技巧有哪些

网页设计学习网更新时间:2023-01-10 浏览:163

网页设计中文字排版设计的技巧有哪些

行长

我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。这是因为如果每行文字过长,读者会不停的转动脖子,感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首,也很容易串行,影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的,我们更要注意划分阅读区域。文本宽度控制在450-700px为宜,此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。

行宽

我们可以想象一下:如果一行文字过长,视线移动距离长,很难让人注意到段落起点和终点,阅读比较困难;如果一行文字过短,眼睛要不停来回扫视,破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数,来提高易读性。传统图书排版每行字符数是55—75,实际在网页上每行字符75—85更流行。中文在14号字体时,建议35—45个文字。

间距

通过设置间距,我们就可以控制文字的密度。网页设计中,如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不够连贯。间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。

关于段距,我们要考虑一下具体实际情况。比如文章篇幅较短,就不需要很宽的段距;二文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。如(图)所示,1.5-1.8em的行距的确是非常适于阅读的文字密度。

另外,行高/段落之间的空白=0.754。行间距正好是段落间距的75是非常常见的。比如简书16号字体,行间距27px/段间距36px=75。文字字号本身比较大,所以行间距也不需要严格按照1—1.5倍的比例设置,不过行间距和段间距的比例符合75,看起来很不错,这样的视觉效果让人在阅读时保持一种节奏感,这就是在实际情况中将规范的灵活应用。

行对齐

排版中很重要的一个规范就是把应该对其的地方对齐,比如每个段落行的位置对齐。

不论哪种视觉效果,精美的、正式的、有趣的还是严肃的,一般都可以应用一种明确的对齐来达到目的。

通常情况下,建议在页面上只是用一种文本对齐,尽量避免两端对齐。

文字留白

在排版文字时,在版面需要留出空余空间,留白面积从小到大应该遵循的顺序是:字间距、行间距、段间距。此外,在排版内容区之前,需要根据页面实际情况给页面四周留出余白。

对齐

在网页设计中,元素在页面上不能随意摆放,每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分,它可以帮助设计师做出吸引人的设计,是优秀网页设计的潜在要求。

亲密性

位置的接近意味着存在关联,亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手:适当留白、以视觉重点突出层次感。比如以下案例中图文搭配,这是多个元素在一起的组合排版。

相关资讯

什么是网页制作中alt
2020-12-18 499
网页制作中的alt是一种参数属性,alt的作用就是当HTML元素本身的物件无法被渲染时,就可以显示alt文字作为一种补救措施;alt属性...
美工和设计都有哪些区别
2021-11-10 498
针对很多人而言,没法无别美工设计与UI设计师,在绝大部分人印像中,二者是一样的。美工设计和UI设计他们有一个相同点便是他们用的手机软件通常是一样的如Photoshop,CorelDRAW ,AI等手机软件,但实际上彼此之间差别非常大...
网页设计如何设计字体颜色
2023-02-14 437
网页设计如何设计字体颜色1、html页面中设置color 字色这是我的段落2、style应用3、CSS中定义html样式在这里定义:p{color:blue}...
网页制作中hr是什么代码
2021-07-15 435
网页制作中hr是什么代码?下面小编给大家介绍一下。在HTML中,hr有“水平线”的意思,是用于在页面中创建一条水平线的一种标签。...
如何用dw制作网页
2023-02-14 386
如何用dw制作网页1、点击软件主界面中间的“新建”按钮,启动DW。2、在弹出的“新建文档”窗口中,选择“HTML文档”,点击“创建...
dw怎么制作网页框架
2020-12-17 376
dw怎么制作网页框架?下面小编给大家介绍一下。DW设置框架结构的教程:设置好站点,建立新文件,类型为HTML,选择“新建”下的“...
网页制作中bottom是什么
2021-06-22 366
网页制作中bottom是什么:bottom是css定位属性中的一种属性。属性定义:对于肯定定位元素,bottom属性设置单位高于/低于包含它的...
DW网页如何插入单选按钮
2020-12-17 331
DW网页如何插入单选按钮1、打开网页编辑软件并新建html编辑页面,通过在菜单栏中点击插入表单单选按钮。2、弹出输入标签辅助功能...

相关课程

栏目导航