第四章-网页文字编排设计课件.ppt

1、第四章 网页文字编排设计网页网页文字文字编排设计编排设计网页设计艺术主要内容4.1 网页字体与字体编排网页字体与字体编排14.2 文字编排的基本形式文字编排的基本形式24.3 网页文字设计方法网页文字设计方法3 在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。4.1 网页字体与字体编排1.标志 文字型标志是以含有象征意义的文字造型作基点，对其变形或抽象地改造，使之图案化。使用文字作为网站标志，可以使用中文或外文及数字组合来表现，意义简单明确。4.1.1 网页文字的形式概述 2.标题

2、除了文章的标题采用文字形式外，一些信息的栏目、网络广告的标题等也是通过文字形式体现的。标题不一定是一个完整的句子，可以使用短语或口号。文字标题要尽量简单明了、引人注目，这样才能得到浏览者的青睐。标题应安排在醒目的位置，使用较大的字体，在版面中作点或线的编排。为了保证标题的显示效果，大部分设计者都将其设置为图形格式。3.超级链接 文字链接是网页中最常见的超链接形式，能直观地呈现链接的相关主题信息，使浏览者对所包含信息一目了然。文字链接可方便浏览者对信息的检索。文字链接可应用于网页中导航栏链接、侧焦点链接栏的链接、中部分类信息主题链接以及文章中关键词的链接等。4.文字信息 文字信息是网页内容的具体

3、表现，是传达信息的主体部分。其主体作用是动画、图形和影音等其他任何元素所不能取代的。文字信息是标题的详细内容，浏览者在阅读标题之后，还要在文字信息中得到进一步的解答。在进行网页设计时，文字信息虽然简单，但内容一定要适合标题。同时对文字的字体、字形、大小、颜色和编排要进行精心的设置，以达到更好的浏览效果。字体的最大特点就是每种字体给人带来不同的情感和风格属性。字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。从加强平台无关性的角度来考虑，正文内容最好采用默认字体。因为浏览器是用本地机器上的字库显示页面内容。在网页设计中准确选择字体，是每个网页设计师首先要考虑的问题。4.1.2 字体的

4、使用1.中文字体（1）规范字体u宋体字型结构方中有圆，刚柔相济，既典雅庄重，又不失韵昧灵气，从视觉角度来说，宋体阅读最省目力，不易造成视觉疲劳，具有很好的易读性和识别性。标题使用宋体给人稳健、传统的印象，宋体由书法体发展而来，最便于阅读。u楷体字型柔和悦目，间架结构舒张有度，可读性和识别性均较好，适用于较长的文本段落，也可用于标题。u仿宋体笔画粗细均匀，秀丽挺拔，有轻快、易读的特点，适用于文本段落。因其字型娟秀，力度感差，故不宜用作标题。u黑体它的横竖线条粗细相同，结构非常合理。黑体不仅庄重醒目，而且极富现代感，因其形体粗壮，在较小字体级数时宜采用等线体（即细黑），否则不易识别。标题使用黑体给

5、人以合理、理智的印象。u圆体视觉冲击力不如黑体，但在视觉心理上给人以明亮清新、轻松愉快的感觉，但其识别性弱，故只适宜作标题性文字。1.中文字体（2）手写体（书法体）手写体分为两种，一种来源于传统书法，如隶书体，行书体，另一种是以现代风格创造的自由手写体，如广告体，POP体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体，因为手写体形态特征鲜明显著，很难形成统一风格，不同手写体易造成界面杂乱的视觉形象，手写体与黑体宋体等规范的字体相配合，则会产生动静相宜，相得益彰的效果。1.中文字体（3）美术体（装饰字体）美术体是在宋体、黑体等规范

6、字体基础上变化而成的各种字体，如综艺体、琥珀体。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发挥引人注目，活跃界面气氛的作用。国内电脑字体根据字库文件不同稍有区别，如常用的方正字库、文鼎字库、华康字库等。2.拉丁字母（1）饰线体 此类字体在笔画末端带有装饰性部分，笔画精细对比明显，与中文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体（Times New Roman）。（2）无饰线体 笔画的粗细对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。由于其笔画粗细均匀，故在远距离易于辨认，具有很好

7、的识别性，多用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是赫尔维梯卡体（Helvetica）。（3）装饰体 即通常所说的“花”体，由于此类字体偏重于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体（Script）。1、文字的大小决定形象 标题的大小控制了画面的形象。放大标题会给人有力量、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之，越稳重。字号大小可以用不同的方式来计算，例如磅(point)或像

8、素(pixel)。因为网页文字是通过显示器显示，所以建议采用像素为单位。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。4.1.3 文字的大小 2.粗细印象优先 将标题的文字变大，粗细效果会加倍。例如，大而粗的文字最有精神，大而细的文字都市性印象最强。另一方面，将文字变小，粗细效果会减弱。虽然细而小的文字有优美的感觉，但如果使用细而大的文字，效果会更加明显。总之，文字越大，越能强化粗细的印象。4.1.3 文字的大小 网页设计者可以用字体更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。粗体字强

9、壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，界面雅致，有稳定感；字体种类多，则界面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。4.1.4 字体的粗细1.字体粗细特征 字体细显优美，粗显有力。将标题文字变细，就会显得十分优美。宋体也好、黑体也罢，哪一种字体变细都会产生优美的意味。将文字变粗，效果增强，粗字则传递了强而有力的印象。2细字不适合做新闻标题 字体网页新闻的大标题要用粗字来表示，如果用细字，看起来就像无聊的、没有什么价值的新闻。粗字热情而细字冷静，因此，热门的新闻与细字不相称。粗字给人

10、有精神、有力量的印象，最适合于强调戏剧性信息与富有活力感的网页。3 正文不要应用粗细变化 粗细效果对于正文中的小字是一样的。但是如果极端运用粗细变化，就会造成可读性的降低。调整字体粗细要把握好度。特别应注意的是，主页的设计未必能够同制作者所指定的设计完全相同，考虑到这个差距的存在性，还是使用标准式样比较稳妥。字距与行距的处理能直接体现设计作品的风格与品味，也能够影响读者的视觉和心理感受。现代网页设计较流行把标题文字字距拉开或变窄的排列方式，来体现轻松、舒展、娱乐或抒情的版面，也常通过压扁文字或加宽行距来体现。此外，运用字距与行距的宽窄同时综合变化，这样能够令作品版式增加空间层次和弹性。字距与行

11、距变化不是绝对的，关键是要根据设计的主题内容和设计情况需要进行灵活处理。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10：12，即用字10点，则行距12点。适当的行距会形成一条明显的水平空白条，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强界面的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣，但要注意行距一般不超过字高的200%。加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强

12、界面的空间层次与弹性，表现出独到的匠心。4.1.5 字距与行距 网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而我们指定的其他字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。1.特殊字体应用 一些网站设计者喜欢使用特殊的字体，虽然可以在网页中使用特殊的字体，但是如果浏览者计算机上没有安装相应的字体，则显示效果无法预料，显示的网页可能非常糟糕。为了避免你所选择的字体在访问者的计算机上不能显示，有两种解决问题的办法：层叠样式表CSS有助于解决这些问题，而通常的方法是在的确有必要使用特殊字体的地方，将文字设计成图像，然后插入页面中。4.1.6 特殊

13、字体2文字图形化 字体在一定的条件下，确实不能用电脑中提供的字体，必须要自己创造。这也是汉字魅力所在的地方。所谓“文字图形化”是为了实现文字的字体效果，将文字笔画做合理的变形搭配，使之产生类似有机或无机图形的趣味，强调字体本身的结构美和笔画美，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。3文字与图形的叠置 在图形上叠加文字，图形就成了背景。文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。文字置于图形上，会产生视觉的杂音，影响文字的可读性，但能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”

14、的表现手法，体现了一种艺术思潮。网页里的正文部分是由许多单个文字经过编排组成的群体，我们要充分发挥这个群体形状在界面整体布局中的作用。4.2 文字编排的基本形式1.两端对齐 文字编排可以横排也可竖排，只要左右或上下的长度对齐，这样的字群组合就显得整齐、端正、严谨、大方、美观。但要注意避免平淡，可选取不同形式的字体穿插使用，这种方式容易与图片混排。4.2.1 文字编排方式 2.一端对齐 一端对齐能产生视觉节奏与韵律的形式美感。通过左对齐或右对齐的方式使行首或行尾自然形成一条清晰的垂直线。另一端任其长短不同，能产生虚实变化，又富有节奏感。左对齐符合人们的阅读时的习惯，有亲切感。右对齐可改变人们的阅

15、读习惯，会显得有新意，有一定的格调。3.居中排列 以中心轴为准，文字居中排列，左右两端字距相等。这种编排形式可令视线集中，中心突出显得优雅、庄重、有个性。不足之处是阅读起来不太方便，此形式适宜文字不多的版面编排。将文字居中排列，用于网络广告中，有利于主题信息的传达。4.文字绕图编排 文字围绕图形边缘排列，这样穿插形式的应用非常广泛，能给人以亲切、自然、生动和融洽的感觉。海尔公司简介的网页中，将文字绕图排列，极具亲和力。5.自由编排 在综合甚至打破上述几种方式的基础上，使版式更加活泼、更加新颖，具有较强烈的动感。但要注意保持版面的完整性，还要注重有一定的编排规律。倾斜的文字适合版面活泼动感的特点

16、，突出视觉焦点。6.标题与正文的编排 标题的字体、位置、大小、排列方向能够直接影响编排版式的艺术风格。标题完全可以打破一般视觉的常规导向，可横排、竖排、居中或边置等排列。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的界面来打破旧有的规律。一般情况下，正文不做分栏处理，因为分栏将使浏览者将面临反复拖动滚动条的麻烦。如果想打破一栏的单调，可采用图文混排的形式。运用对比的法则，将强调的文字作适当的处理，使被强调的文字在字体、规格、颜色、方位等方面与正文相区别而产生变化以满足实现文字的语义功能和美学效应。但是，应该注

17、意尽可能少地运用强调，如果什么都想强调，其实是什么也没有强调。况且，在一个页面上运用过多的特殊设置会影响浏览者阅读页面内容，除非你有特殊的设计目的。4.2.2 文字的强调1.强调字首 有意识地将正文的第一个字或字母放大或配上不同颜色并作装饰性处理，形成注目焦点。由于它有吸引视线、装饰和活跃界面的作用，所以被应用于网页的文字编排中。至于放大多少，则依据所处网页环境而定。这种形式的编排显得很时尚。2.引文的强调 引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的平面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相

18、区别而产生变化。2.关键词的强调 如果将个别关键词作为页面的要点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在网页整体中显得出众而夺目。3.链接文字的强调 在网页设计中，为文字链接、己访问链接和当前活动链接选用各种颜色和样式（如加粗、倾斜、下划线）。例如，如果你使用Dreamweaver编辑器，默认的设置是正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目。如果要改变链接文字颜色，不要使用和背景相似的色相、相似的饱和度和相似的亮度的颜色作为链接的颜色。5.线框、符号的强调 用符

19、号、线框或导向线有意加强文字元素的视觉效果，具有特别突出“宾与主”的对比关系 网页文字版面的设计同时也是网页创意的过程，创意是网页设计师的思维水准的体现，是评价一件网页设计作品好坏的重要标准。在网页设计领域，一切制作的程序由电脑代劳，使人类的劳动仅限于思维上，这是好事，可以省去了许多不必要的工序，为创作提供了更好的条件。但在某些必要的阶段上，我们应该记住：人，毕竟才是设计的主体。根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现。4.3 网页文字设计方法1.提高可读性（1）让你想表达的内容清晰、醒目，让浏览者一开始就可以

20、明白你的意思。（2）避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦。（3）注意恰当的选择你所需要的字体，适当采用虚实对比、大小对比。（4）注意文字编排方向，注意安排阅览者的视线，适当运用直线与曲线编排。（5）根据视觉流程的原理，通常将重点放在右边。4.3.1 网页文字设计技巧 2.精于位置 （1）注意文字的对齐、适当拉来间距、适当安排行距。（2）注意图文交错，既不要影响图形的观看，也不能影响文字的阅览。（3）文字不要顶天立地，也不要支持边角。3.营造视觉美感 文字作为网页形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，组合巧妙的文字能使人感

21、到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。注意改变文字的位置和大小，适当调节字间距。对于段落文字的处理应注意，字体加大后，段落之间的距离也应该随之调整。小字体同样应用这一规则，不过是相反的。4.富于创造性 设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。加入感受在字体里面，对文字的大小、间距、透明度做些调整，就会是完全不同的效果了。差别就在这里，也许只是一点小改动，但是需要你思考的却

22、更多。有时候对文字的笔画做特殊的加工处理往往会产生一些意想不到的效果。而这样的处理是带有创造性的，同时人性化的味道也会更浓一些。这是电脑字体所无法替代的效果，带给观看者的感受自然会要强烈的多。1.对比主要通过笔画大小、笔画的形态、笔画色彩等的强烈对比使各自的特征更加鲜明。4.3.2 网页文字设计方法2.笔画互用笔画的互用主要通过相关、相似、相近的笔画间的互相借用来组成文字间的关系。4.3.2 网页文字设计方法3.笔画突变 笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和特征。4.3.2 网页文字设计方法4.添加形象 添加形象主要是通过在汉字局部笔画上添加与汉字

23、表义相关的图像或图形来增加汉字的表意功能。将某个笔画换成有意义或有趣地图形，会使整个视觉活跃起来，海尔网页中“火”字的设计。4.3.2 网页文字设计方法5.笔画连接 笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。4.3.2 网页文字设计方法6.会意及象形 会意及象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达文字的信息。4.3.2 网页文字设计方法7.表面装饰 字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。4.3.2 网页文字设计方法4.3.2 网页文字设计方法8.白线中分 通过在文字或字母的笔画中间贯通白线，形成统一的视觉效果。9.让点变化 将一些文字或字母的点进行变化，如字母i的变化。4.3.2 网页文字设计方法10.让O变化 将字母“O”或数字“0”做图形变化。4.3.2 网页文字设计方法11.添加圆框或方框 将文字放在圆框或方框中也是一种比较简单的设计字体方法。4.3.2 网页文字设计方法