1、第3章 网页文字设计,网页设计教程美工与技术,第3章 网页文字设计,在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。本章介绍动态网页文字设计创意与编排方法。,动态网页设计教程美工与技术,第3章 网页文字设计,网页设计教程美工与技术,3.1 网页字体与字体编排,1,3.2 网页文字编排的创意,2,3.3 网页文字设计的技术,3,3.4 网页文字设计技巧,4,3.1 网页字体与字体编排,在网页设计中，文字既是信息传达的重要媒介，是传递信息最直接、最通用、最容易沟通的方式，也是具有直观诉求
2、力的重要的视觉传达要素，是网页美工设计中重要组成部分之一。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,在网页设计中准确选择字体，是每个网页设计师首先要考虑的问题。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,1.中文字体 （1）规范字体 如宋体、仿宋体、黑体、楷体。它们通过粗细变化可以变成粗宋体、中宋体、细宋体、粗黑体、中黑体、细黑体，如根据饰角变化又可变成综艺体、圆线体等。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,1.中文字体 （2）手写体（书法体） 手写体分为两种，一种来源于传统书法，如隶书体，行书体，另一种是以现代风格创造的自由手写体，如广告体，
3、POP体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体，因为手写体形态特征鲜明显著，很难形成统一风格，不同手写体易造成界面杂乱的视觉形象，手写体与黑体宋体等规范的字体相配合，则会产生动静相宜，相得益彰的效果。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,1.中文字体 （3）美术体（装饰字体） 美术体是在宋体、黑体等规范字体基础上变化而成的各种字体，如综艺体、琥珀体。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发挥引人注目，活跃界面气氛的作用。国内电脑字体根据字库文件不同稍有区别
4、，如常用的方正字库、文鼎字库、华康字库等，,动态网页设计教程美工与技术,3.1.1 网页字体的使用,2.西文字体-拉丁字母组成,动态网页设计教程美工与技术,3.1.1 网页字体的使用,2.西文字体 （1）饰线体 此类字体在笔画末端带有装饰性部分，笔画精细对比明显，与中文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体（Times New Roman）。,动态网页设计教程美工与技术,Hello Everyone,3.1.1 网页字体的使用,2.西文字体 （2）无饰线体 笔画的粗细对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。由于
5、其笔画粗细均匀，故在远距离易于辨认，具有很好的识别性，多用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是赫尔维梯卡体（Helvetica）。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,2.西文字体 （3）装饰体 即通常所说的“花”体，由于此类字体偏重于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体（Script）。,动态网页设计教程美工与技术,3.1.1 网页字体的使用,无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在网页文字设计中，选择两至三种字体的视觉效果较好，这样会
6、显得整体而又不觉得凌乱。具体应用时可以拉长、压扁、倾斜、加粗、变细，这样同样能产生丰富多彩的视觉效果。同一页面中字体应尽量在同一字族中选用，以保证界面具有明确、统一的风格特征。,动态网页设计教程美工与技术,3.1.2 网页文字的编排,1. 文字的大小 文字大小决定网页形象，文字标题的大小控制了网页的形象。放大标题会给人有力量、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之，越稳重。 文字大小可以用不同的方式来计算，例如磅(point)或像素(pixel)。因为网页文字是通过显示器显示，所以建议采
7、用像素为单位。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。一般情况下，网页正文可以使用12-16像素大小的文字。,动态网页设计教程美工与技术,3.1.2 网页文字的编排,2.文字的粗细 网页设计者可以用字体更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，界面雅致，有稳定感；字体种类多，则界面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
8、,动态网页设计教程美工与技术,3.1.2 网页文字的编排,字体细显优美，粗显有力。将标题文字变细，就会显得十分优美。宋体也好、黑体也罢，哪一种字体变细都会产生优美的意味。 将文字变粗，效果增强，粗字则传递了强而有力的印象。,动态网页设计教程美工与技术,3.1.2 网页文字的编排,粗字宜用做标题 正文不宜粗细变化,动态网页设计教程美工与技术,3.1.2 网页文字的编排,3.字距与行距 行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10：12，即用字10点，则行距12点。适当的行距会形成一条明显的水平空白条，以引导浏览者的目光，而行距过宽
9、会使一行文字失去较好的延续性。 除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强界面的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣，但要注意行距一般不超过字高的200%。加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强界面的空间层次与弹性，表现出独到的匠心。,动态网页设计教程美工与技术,3.2 网页文字编排的创意形式,网页中文字的设计主要在于一些网页广告、图片和标志中，文字创意设计的方法总结起来有以下几种：,动态网页设计教程美工与技术,3.2.1 鲜明对比,主要通过笔画大小、笔画的形态、笔画色彩等
10、的强烈对比使各自的特征更加鲜明。,动态网页设计教程美工与技术,3.2.1 鲜明对比,动态网页设计教程美工与技术,3.2.2 笔画共用,动态网页设计教程美工与技术,笔画的共用主要通过相关、相似、相近的笔画间的共用来组成文字间的关系。,3.2.2 笔画共用,动态网页设计教程美工与技术,3.2.3 笔画突变,动态网页设计教程美工与技术,笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和特征。,3.2.3 笔画突变,动态网页设计教程美工与技术,3.2.4形象添加,动态网页设计教程美工与技术,添加形象主要是通过在汉字局部笔画上添加与汉字表义相关的图像或图形来增加汉字的表意
11、功能。,3.2.4形象添加,动态网页设计教程美工与技术,3.2.5 笔画相连,动态网页设计教程美工与技术,笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。,3.2.5 笔画相连,动态网页设计教程美工与技术,3.2.6 会意象形,动态网页设计教程美工与技术,会意象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达文字的信息。,3.2.6 会意象形,动态网页设计教程美工与技术,3.2.7 表面装饰,动态网页设计教程美工与技术,字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。,3.2.7 表面装饰,动态网页设计教
12、程美工与技术,3.2.8 线条中分,动态网页设计教程美工与技术,通过在文字或字母的笔画中间贯通白线，形成统一的视觉效果。,3.2.8 线条中分,动态网页设计教程美工与技术,3.2.9 点圈变化,动态网页设计教程美工与技术,将一些文字或字母的点进行变化，如字母i的变化。,3.2.9 点圈变化,动态网页设计教程美工与技术,3.2.10 边框背景,动态网页设计教程美工与技术,将文字放在圆框或方框中也是一种比较简单的设计字体方法。,3.2.10 边框背景,动态网页设计教程美工与技术,3.2.10 边框背景,动态网页设计教程美工与技术,好丽友好多鱼、蘑古力的设计中采用背景与边框的方式，效果活泼，显得特别
13、突出。,3.2.10 边框背景,动态网页设计教程美工与技术,3.2.11 质感纹理,动态网页设计教程美工与技术,结合主题，将文字添加质感或纹理，以突出其品质、性能等主题。,3.2.11 质感纹理,动态网页设计教程美工与技术,3.2.12 空间立体,动态网页设计教程美工与技术,通过立体的文字，形成空间感，应用于主题，可以实现很强的冲击力。,3.3 网页文字设计的技术,在网页设计中准确的选择字体，是每个设计师首先要考虑的问题。字体的最大特点就是每种字体给人带来不同的情感和风格属性。字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。网页里的正文部分是由许多单个文字经过编排组成的群体，我们
14、要充分发挥这个群体形状在界面整体布局中的作用。理解不同编排形式有助于我们进行网页文字的灵活编排。,动态网页设计教程美工与技术,3.3.1 文字字体与大小,1.字体的选择从加强平台无关性的角度来考虑，正文内容最好采用默认字体。因为浏览器是用本地机器上的字库显示页面内容。网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而我们指定的其他字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。正文建议用宋体另外从平台无关性方面考虑，应该提供文字大小的设置，要对浏览器文字大小的设置进行考虑，一般情况为了实现不同用户设置下文字大小的一致性，一般采用CSS样式进行网
15、页字体编排，同时提供字号更改的选择。,动态网页设计教程美工与技术,3.3.1 文字字体与大小,1.字体的选择,动态网页设计教程美工与技术,3.3.1 文字字体与大小,2.特殊字体应用 一些网站设计者喜欢使用特殊的字体，虽然可以在网页中使用特殊的字体，但是如果浏览者计算机上没有安装相应的字体，则显示效果无法预料，显示的网页可能非常糟糕。为了避免你所选择的字体在访问者的计算机上不能显示，通常的方法是在的确有必要使用特殊字体的地方，如导航、栏目、标题等地方将文字设计成图像，然后插入页面中。,动态网页设计教程美工与技术,3.3.1 文字字体与大小,2.特殊字体应用,动态网页设计教程美工与技术,3.3.
16、1 文字字体与大小,3.文字图形化 在一定的条件下，确实不能用电脑中提供的字体，必须要自己创造。这也是汉字魅力所在的地方。所谓“文字图形化”是为了实现文字的字体效果，将文字笔画做合理的变形搭配，使之产生类似有机或无机图形的趣味，强调字体本身的结构美和笔画美，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体实行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。,动态网页设计教程美工与技术,3.3.1 文字字体与大小,3.文字图形化,动态网页设计教程美工与技术,3.3.1 文字字体与大小,4.文字与图形的叠置
17、在图形上叠加文字，图形就成了背景。文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。文字置于图形上，会产生视觉的杂音，影响文字的可读性，但能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的平面设计，在网页设计中也被广泛采用。,动态网页设计教程美工与技术,3.3.1 文字字体与大小,4.文字与图形的叠置,动态网页设计教程美工与技术,3.3.2 文字排版的样式,1.两端对齐,动态网页设计教程美工与技术,3.3.2 文字排版的样式,2.一端对齐,动态网
18、页设计教程美工与技术,3.3.2 文字排版的样式,3.居中排列,动态网页设计教程美工与技术,3.3.2 文字排版的样式,4.文字绕图编排,动态网页设计教程美工与技术,3.3.2 文字排版的样式,5.自由编排,动态网页设计教程美工与技术,3.3.2 文字排版的样式,6.标题与正文的编排,动态网页设计教程美工与技术,3.3.3 网页文字的强调,1.强调字首,动态网页设计教程美工与技术,3.3.3 网页文字的强调,2.引文的强调,动态网页设计教程美工与技术,3.3.3 网页文字的强调,3.关键词的强调,动态网页设计教程美工与技术,3.3.3 网页文字的强调,4.链接文字的强调,动态网页设计教程美工与
19、技术,3.4 网页文字设计技巧,网页文字版面的设计同时也是网页创意的过程，创意是网页设计师的思维水准的体现，是评价一件网页设计作品好坏的重要标准。在网页设计中，文字的设计、安排、变化是随着设计师的灵感而千变万化的。但对于设计者而言，在发挥其创造力的同时，仍应以理性的态度和思想去遵循一定的设计法则。,动态网页设计教程美工与技术,3.4.1 巧用对比，提高文字可读性,进行网页文字设计时，要能将文字巧妙地镶合到整体设计中，既要能发挥其存在的基本价值、说明、解释，又要能成为设计中一个设计因子，与图形、符号不同形却同意，形成一个完美的整体，这样的结合才能将文字的功用发挥至最佳状态。这中间，要注意避免为设
20、计而设计，忽视文字的本身的价值，忽视文字存在其中的合理性和必要性，只从美观、装饰的角度出发，使其成为花哨的饰品，要达到文字在网页设计中向浏览者传达作者的意图和各种信息的目的，必须考虑文字的整体诉求效果，给人以清晰的视觉印象。需要让你想表达的内容清晰、醒目，让浏览者一开始就可以明白你的意思。,动态网页设计教程美工与技术,3.4.1 巧用对比，提高文字可读性,动态网页设计教程美工与技术,3.4.1 巧用对比，提高文字可读性,动态网页设计教程美工与技术,3.4.1 巧用对比，提高文字可读性,动态网页设计教程美工与技术,3.4.1 巧用对比，提高文字可读性,动态网页设计教程美工与技术,3.4.2 精于
21、版式，营造视觉美感,文字在网页中的安排要考虑到全局的因素，不能有视觉上的冲突。否则在网页上主次不分，很容易引起视觉顺序的混乱。而且网页作品的整个含义和气氛都可能会被破坏，这是一个很微妙的问题，需要去体会。,动态网页设计教程美工与技术,3.4.2 精于版式，营造视觉美感,动态网页设计教程美工与技术,3.4.2 精于版式，营造视觉美感,动态网页设计教程美工与技术,3.4.3 深挖含义，体现创意魅力,进行网页文字设计时，应从文字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。加入感受在字体里面，对文字的大小、间距、透明度
22、做些调整，就会是完全不同的效果了。差别就在这里，也许只是一点小改动，但是需要思考的却更多。有时候对文字的笔画做特殊的加工处理往往会产生一些意想不到的效果。而这样的处理是带有创造性的，同时人性化的味道也会更浓一些。这是电脑字体所无法替代的效果，带给观看者的感受自然会要强烈的多。,动态网页设计教程美工与技术,3.4.3 深挖含义，体现创意魅力,动态网页设计教程美工与技术,3.4.3 深挖含义，体现创意魅力,汉字的魅力还不仅在于字体的丰富，对字中的笔划、结构亦可巧加利用，为设计服务添彩。字之点、横、竖、撇、捺、折等笔划、各种偏旁、部首及组合，都可以独立地体现出形象的魅力。相对于完整的字而言，这也可理
23、解为一种局部之美。平面设计师应能在中西字体的笔划、结构特征、中国书法艺术、中外美术字设计等方面有所研究，这样才能在设计中合理地利用文字自身的特点，与设计创意找到最佳契合点。当然，有一点也要注意，在充分利用丰富的文字个性资源时，还要注意文字的可读性和使用环境，过分变形或不合设计内涵的文字会令人失去欣赏的兴趣，令原本充满魅力的文字变成累人的东西。另外，设计师的设计作品只有立足于本土文化，才能更好地诠释出要表达的意境和内涵，才能被更多的人所理解，才能达到与观众有更多更好沟通的目的，也才能在国际上占据一席之地。从设计审美的角度看，适当添加一些英文或拼音也未尝不可，但切忌一味崇洋而失去了本土的特色。,动
24、态网页设计教程美工与技术,3.4.4 图文并茂，文字图形化处理,将文字放到图像中，文字显示效果受背景图像的影响相应的出现了杂音，可以采用相应的方法进行突出，将文字图形化，采用描边、阴影、立体化显示、变色、发光、渐变叠加等方式，通过明暗对比、色相对比等方式。,动态网页设计教程美工与技术,3.4.4 图文并茂，文字图形化处理,动态网页设计教程美工与技术,3.4.4 图文并茂，文字图形化处理,动态网页设计教程美工与技术,3.4.4 图文并茂，文字图形化处理,文字作为设计中的一份子，并不是附着于图形设计的一个附属品。在创意过程中，切勿将文字只简单地视为创意之外的一个次要的、只为阅读字的内容而存在的东西，而要将文字作为设计的一个基本元素对待，考虑其在整个设计中作用、地位、位置、形状，既要考虑整篇的效果和形象，也要考虑行、列、单字等的不同排列与安置。它要在设计时与图形设计同时、同等地加以考虑，而不可只顾图形创意而冷落文字。,动态网页设计教程美工与技术,
