天津开放大学文本第3章辅导_网页版面及编排艺术.doc_大学文库

第3章网页的文字编排设计一、要点解析 1.字体类型字体分为拉丁字母、汉字两种。拉丁字母依据其基本结构可以分为三种类型：饰线体、无饰线体，装物体。汉字字体常用的有宋体、里体、楷体、仿宋、圆体、手写体、美术体。 2.拉丁字母饰线体：此类字体在笔面末端带有装饰性部分，笔西精细对比明显：饰线体在间读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体(Times New Roman). 无饰线体：笔西的相细对比不明显，笔画末瑞没有装饰性部分。由于其笔西朝细均匀，故在运距离号于辨认，具有很好的识别性，多用于标题和指示性文字，无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是蚌尔维梯卡体（小c》: 装饰体：通常所说的花体。由于此类字体信笺于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体。 3.汉字字体 )宋体宋体是传统的、平衡性强的字体，字型结构方中有圆，刚柔相济，既具雅庄重，又不失韵味和灵气。从视觉角度米说，宋体阅读最省目力，不易造成视觉玻劳，具有很好的易读性和识别性。 (②累倦黑体横竖线条粗细一致。结构合理，具有缓和冷漠、经硬的感觉。因其形体粗壮，在较小学体领数时宜采用等线体（即细黑），否则不号识别。黑体庄重有力，引人注目，常用于标题、广告等醒目的位置，有强烈的视觉效果。 (固带得替体字型柔和悦目，间架结构舒张有度，可读性和识别性均较好，适用于较长的文本段落，也可用于标题。槛体作为一种非常经典的字体，具有很强的文化气质，因此在做具有文化感和传统性的设计中可以使用。 ()伪宋仿宋体笔画相细均匀，刚柔结合，精致细腻，有轻快、易读的特点，适用于文本段落。因其字型解秀，力度感差，故不宜用作标题。 (固圆体圆体视觉冲击力不知黑体，在视觉心理上给人以明亮清新、轻松输快的感凳，但其识别性写，战只适宜作标题性文字，铜手写体手写体分为两种。，一种来源于传统书法，如隶书体和行书体，另一种是以现代风格创造的自由

1 第 3 章网页的文字编排设计一、要点解析 1．字体类型字体分为拉丁字母、汉字两种。拉丁字母依据其基本结构可以分为三种类型：饰线体、无饰线体、装饰体。汉字字体常用的有宋体、黑体、楷体、仿宋、圆体、手写体、美术体。 2．拉丁字母饰线体：此类字体在笔画末端带有装饰性部分，笔画精细对比明显；饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体（Times New Roman）。无饰线体：笔画的粗细对比不明显，笔画末端没有装饰性部分。由于其笔画粗细均匀，故在远距离易于辨认，具有很好的识别性，多用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是赫尔维梯卡体（Helvetica）。装饰体：通常所说的“花”体，由于此类字体信笺于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体。 3．汉字字体 ⑴ 宋体宋体是传统的、平衡性强的字体，字型结构方中有圆，刚柔相济，既典雅庄重，又不失韵味和灵气。从视觉角度来说，宋体阅读最省目力，不易造成视觉疲劳，具有很好的易读性和识别性。 ⑵ 黑体黑体横竖线条粗细一致，结构合理，具有缓和冷漠、坚硬的感觉。因其形体粗壮，在较小字体级数时宜采用等线体（即细黑），否则不易识别。黑体庄重有力，引人注目，常用于标题、广告等醒目的位置，有强烈的视觉效果。 ⑶ 楷体楷体字型柔和悦目，间架结构舒张有度，可读性和识别性均较好，适用于较长的文本段落，也可用于标题。楷体作为一种非常经典的字体，具有很强的文化气质，因此在做具有文化感和传统性的设计中可以使用。 ⑷ 仿宋仿宋体笔画粗细均匀，刚柔结合，精致细腻，有轻快、易读的特点，适用于文本段落。因其字型娟秀，力度感差，故不宜用作标题。 ⑸ 圆体圆体视觉冲击力不如黑体，在视觉心理上给人以明亮清新、轻松愉快的感觉，但其识别性弱，故只适宜作标题性文字。 ⑹ 手写体手写体分为两种，一种来源于传统书法，如隶书体和行书体，另一种是以现代风格创造的自由

手写体，如广告体和OP体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体： (团美术体美术体是在宋体，黑体等线范字体基础上变化面成的各种字体，如综艺体、彩云体、玻珀体等。美术体具有鲜明的风格特征。不适于文本段落，也不宜混杂使用。多用于字体级数较大的标题，发挥引人注目、酒跃界面气氛的作用， 4。字体的选择原则《1)清晰导读是文字编推的重点所在，可读性是字体透释的重要原则。 (2)当文字与图片进行重叠组合时，尽量选择与图片意境相符的字体， (3)适当选用书法字体和手写字体是对字体过于需月的一种好的解决方法，某些特别的版而上，使用这种很自我的字体能让板面产生灵气和个性， (4)根据内容遗择字体：粗体字强壮有力，有男性特点。适合机械、建筑业等内容：细体字高雅细致。有女性特点。更适合服装、化妆品、食品等行业的内容。 (5)正文内容最好采用缺省字体。测览器是用本地机器上的字库显示页面内容的，网页设计者采用的特殊字体在测览者的机器里不一定能钱到。给网页设计带来很大的局限。《6)同一页面中字体应尽量在同一字族中选用，以保证界而具有明确、统一的风格特征。 5,字号的特征 (1)大粗字体易适成强思的祝觉冲击， (2)细小文字构成的版而，精密度高，整体性强，给人一种纤细雅致的感觉，但可读性较差。 6。字号大小的确定的依据《1)各个层级元素之间的对比美须，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。 (2)版面整体比例关系。既突出又不突兀，清所易读。 (3)整体视觉效果， (4)字体不同字号的祝觉效果也不同。 7.字何距一般，字闻距的确定是由字体结构和字号来决定，因为每种字体对字符的占用空间是不一样的。 8。行更汉字的行距设定应比字间距大。行距最小应该在字高的0%以上才会看起米舒适。才逢让行的感凭出米。行距的变化也会对文木的可读性产生根大影响。一最情况下，接近学体尺寸的行距设置比较适合正文。行距的常规比例为0：2。 9.。文字编样段计的原则 ()注意文字的易读性②注意文字的基调和个性围在设计上要富于创造性 10。文字的整体编排 ()文字的图形化 2

2 手写体，如广告体和 POP 体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体。 ⑺ 美术体美术体是在宋体、黑体等规范字体基础上变化而成的各种字体，如综艺体、彩云体、琥珀体等。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发挥引人注目、活跃界面气氛的作用。 4．字体的选择原则（1）清晰易读是文字编排的重点所在，可读性是字体选择的重要原则。（2）当文字与图片进行重叠组合时，尽量选择与图片意境相符的字体。（3）适当选用书法字体和手写字体是对字体过于雷同的一种好的解决方法，某些特别的版面上，使用这种很自我的字体能让版面产生灵气和个性。（4）根据内容选择字体：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。（5）正文内容最好采用缺省字体。浏览器是用本地机器上的字库显示页面内容的，网页设计者采用的特殊字体在浏览者的机器里不一定能找到，给网页设计带来很大的局限。（6）同一页面中字体应尽量在同一字族中选用，以保证界面具有明确、统一的风格特征。 5．字号的特征（1）大粗字体易造成强烈的视觉冲击。（2）细小文字构成的版面，精密度高，整体性强，给人一种纤细雅致的感觉，但可读性较差。 6．字号大小的确定的依据（1）各个层级元素之间的对比关系，a 应该比 b 大多少，c 应该比 b 小多少，应该要把各个层级之间的轻重关系体现出来。（2）版面整体比例关系，既突出又不突兀，清晰易读。（3）整体视觉效果。（4）字体不同字号的视觉效果也不同。 7．字间距一般，字间距的确定是由字体结构和字号来决定，因为每种字体对字符的占用空间是不一样的。 8．行距汉字的行距设定应比字间距大，行距最小应该在字高的 50%以上才会看起来舒适，才能让“行” 的感觉出来。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为 10：12。 9．文字编排设计的原则 ⑴ 注意文字的易读性 ⑵ 注意文字的基调和个性 ⑶ 在设计上要富于创造性 10．文字的整体编排 ⑴ 文字的图形化

强调文字的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。将文字图形化，意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心： (色文字的叠置文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、桑音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性。但是能迹成页而鞋特的视凭效果，体现了一种艺术思灌。 (固标题标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上，可作居中、横向、竖向成边置等编排处理，基至可以直接插入字群中，以新颗的版式来打破旧有的规律。 (0分栏分栏的方式有两种：一种就是把整个算幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏，也就是每一段分为一栏。一般来说。1525个字的栏宽祝凳效果比较适舒，超长成超短都会引起阅读的不方便。分栏通常有双分栏，三分栏成四分栏等多种方式，一般以双分栏店多， (固空间分配每个文本元素都一定要有相对独立的空间，使其布局恰到好处。如果有插图配合的话，应该月时考忠插图和文本的空间占用，文本的容量和插图的容量一定要同时考感，在有必要的时候一定要对插图的空间进行调整，整体效果水远都要比具部的效果重要。间空意（空白）在文字组合上，要注意除字体本身所占用的画面空间之外的空白，“外围留空“就是文本块或篇章本身之外的周围需要一定缓冲空何，以利于阅读轻松输悦。 (仞文本块的题味性文字的编排太严谨就会呆板，要考感文本块的提味性，比如首字下沉、文本阴影、文本绕图、任意彩状的文本框等这些效果，能让桔馒的文本块产生很好的相味性。 11,文字对齐的基本形式两端均齐、居中排列、左对齐或右对齐。饶图排列。 12.文字的强调 ()行首的强调将正文的第一个字或字母成大并作禁饰性处理，嵌入段落的开头，这在传统规体版式设计中称之r下沉式”。 (出引文的强调在进行网页文字编排时，常会碰到提钢擊领性的文字，即引文（也称为眉头》。引文贤括一个段落、一个章节或全文大意。因此在编排上应给予特殊的页面位置和空间米强调。 ③个别文字的强调

3 强调文字的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。 ⑵ 文字的叠置文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果，体现了一种艺术思潮。 ⑶ 标题标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。 ⑷ 分栏分栏的方式有两种：一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏，也就是每一段分为一栏。一般来说，15-25 个字的栏宽视觉效果比较适舒，超长或超短都会引起阅读的不方便。分栏通常有双分栏、三分栏或四分栏等多种方式，一般以双分栏居多。 ⑸ 空间分配每个文本元素都一定要有相对独立的空间，使其布局恰到好处。如果有插图配合的话，应该同时考虑插图和文本的空间占用，文本的容量和插图的容量一定要同时考虑，在有必要的时候一定要对插图的空间进行调整，整体效果永远都要比局部的效果重要。 ⑹ 空隙（空白）在文字组合上，要注意除字体本身所占用的画面空间之外的空白。“外围留空”就是文本块或篇章本身之外的周围需要一定缓冲空间，以利于阅读轻松愉悦。 ⑺ 文本块的趣味性文字的编排太严谨就会呆板，要考虑文本块的趣味性，比如首字下沉、文本阴影、文本绕图、任意形状的文本框等这些效果，能让枯燥的文本块产生很好的趣味性。 11．文字对齐的基本形式两端均齐、居中排列、左对齐或右对齐、绕图排列。 12．文字的强调 ⑴ 行首的强调将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下沉式”。 ⑵ 引文的强调在进行网页文字编排时，常会碰到提纲挈领性的文字，即引文（也称为眉头）。引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强调。 ⑶ 个别文字的强调

天津开放大学 文本 第3章辅导_网页版面及编排艺术

天津开放大学文本第3章辅导_网页版面及编排艺术