1、第第5章章 网页界面中网页界面中文字的编排设计文字的编排设计 课堂学习目标：课堂学习目标： 了解字体在网页界面设计中的作用了解字体在网页界面设计中的作用 熟悉常用字体的特征熟悉常用字体的特征 掌握文字编排设计的规律和手法掌握文字编排设计的规律和手法 掌握文字群体的编排掌握文字群体的编排 在网页界面设计领域，文字既是信息在网页界面设计领域，文字既是信息传达的重要媒介，也是具有直观诉求力的传达的重要媒介，也是具有直观诉求力的视觉传达要素。视觉传达要素。 文字在界面中的组织、安排及其艺术文字在界面中的组织、安排及其艺术处理也越来越多地得到设计师们的重视。处理也越来越多地得到设计师们的重视。文字的编排
2、设计文字的编排设计5.45.4文字在网页界面设计中的作用文字在网页界面设计中的作用5.15.1关于字体关于字体5.25.2字体编排字体编排5.35.3案例案例MODELS AGENCYMODELS AGENCY首页界面设计首页界面设计5.55.5课后思考与练习课后思考与练习5.65.65.1 5.1 文字在网页界面设计中的作用文字在网页界面设计中的作用 在平面设计的构成要素中有两大基本在平面设计的构成要素中有两大基本元素，一个是图形，另一个就是文字。元素，一个是图形，另一个就是文字。 只通过图形来传递信息常常不能达到只通过图形来传递信息常常不能达到最佳的传达效果，须借助文字才能进行最最佳的传达
3、效果，须借助文字才能进行最有效的说明。有效的说明。 在网页界面中也是如此。在网页界面中也是如此。 众多构成要素中文字具有最佳的直观众多构成要素中文字具有最佳的直观传达作用以及最高的明确性。传达作用以及最高的明确性。 图形图像、色彩、版式、动画等要素图形图像、色彩、版式、动画等要素都可以传达信息，但有时会产生信息传递都可以传达信息，但有时会产生信息传递不明确甚至引发歧义的现象，而通过文字不明确甚至引发歧义的现象，而通过文字的传达则可以在很大程度上避免这种情况，的传达则可以在很大程度上避免这种情况，从而使浏览者能够顺利、方便、愉快地接从而使浏览者能够顺利、方便、愉快地接受信息，不致因信息不明确而失
4、去主题的受信息，不致因信息不明确而失去主题的传达目的。传达目的。 文字作为图形符号，在处理文字造型文字作为图形符号，在处理文字造型时也适用图形设计的基本原理，这些原理时也适用图形设计的基本原理，这些原理在文字的形态构成、空间分布、色彩配置在文字的形态构成、空间分布、色彩配置等多方面都具有指导性的作用。等多方面都具有指导性的作用。 通过设计与编排，文字的存在价值在通过设计与编排，文字的存在价值在界面中应体现为提高信息的明确程度与可界面中应体现为提高信息的明确程度与可读性，加强界面的艺术性与视觉感染力，读性，加强界面的艺术性与视觉感染力，从而获得良好的视觉传达效果。从而获得良好的视觉传达效果。 具
5、体来说，文字在网页界面中的作用具体来说，文字在网页界面中的作用可以通过以下几点在优秀设计作品中体现可以通过以下几点在优秀设计作品中体现出的文字的特性来体现。出的文字的特性来体现。 1适合性适合性 文字与具体文字内容以及界面主题相文字与具体文字内容以及界面主题相适应。适应。 根据主题内容、欲传达的信息含义和根据主题内容、欲传达的信息含义和文字所处环境来确定文字的字体、色彩、文字所处环境来确定文字的字体、色彩、形态和表现形式是保证适合性的必要条件，形态和表现形式是保证适合性的必要条件，如图如图5-2所示。所示。 2明确性明确性 文字的主要功能在于传达外形特征以文字的主要功能在于传达外形特征以便浏览
6、者识别，保证信息的准确传递。便浏览者识别，保证信息的准确传递。 文字的点划、横竖、圆弧等结构要素文字的点划、横竖、圆弧等结构要素造成文字本身的不可变异，因而在选择时造成文字本身的不可变异，因而在选择时须格外注意，在特别强调信息严格准确的须格外注意，在特别强调信息严格准确的情况下应优先选取易于识别的文字，在进情况下应优先选取易于识别的文字，在进行字体创作时也应保证形态的明确性，如行字体创作时也应保证形态的明确性，如图图5-3所示。所示。 3易读性易读性 文字的形态及编排设计能够提高界面文字的形态及编排设计能够提高界面的易读程度。的易读程度。 一般情况下，人的视觉对于过粗、过一般情况下，人的视觉对
7、于过粗、过细的文字形态需花费更多的时间去识别，细的文字形态需花费更多的时间去识别，不易顺畅浏览。不易顺畅浏览。 在版式布局中，合理的文字排列与分在版式布局中，合理的文字排列与分布会使浏览变得极为愉快，对视觉适宜的布会使浏览变得极为愉快，对视觉适宜的文字色彩配置也能够加强界面的易读性，文字色彩配置也能够加强界面的易读性，如图如图5-4所示。所示。 4美观性美观性 文字可以通过自身形象的个性与风格文字可以通过自身形象的个性与风格给人以美的感受，使界面更加美观。给人以美的感受，使界面更加美观。 文字形态的变化与统一、文字编排的文字形态的变化与统一、文字编排的节奏与韵律、文字体量的对比与和谐，都节奏与
8、韵律、文字体量的对比与和谐，都是达成美观性的表现手法，如图是达成美观性的表现手法，如图5-5所示。所示。 5创新性创新性 文字与界面信息主题需求相配合并进文字与界面信息主题需求相配合并进行形态变化，将文字进行创意发挥，产生行形态变化，将文字进行创意发挥，产生创造的美感，进而加强界面整体设计效果创造的美感，进而加强界面整体设计效果的创新性，给浏览者耳目一新的感受，如的创新性，给浏览者耳目一新的感受，如图图5-6所示。所示。 5.2 5.2 关于字体关于字体 字体，又称文字的字体，又称文字的“体式体式”。 文字作为视觉形式的信息传达符号，同文字作为视觉形式的信息传达符号，同一文字体系中包含有多种不
9、同的字体。一文字体系中包含有多种不同的字体。 在达成利于阅读和传递特定信息的功能在达成利于阅读和传递特定信息的功能第一性的同时，文字可以通过不同字体所特第一性的同时，文字可以通过不同字体所特有的艺术风格特征来传达更多的信息，并形有的艺术风格特征来传达更多的信息，并形成各具特色的视觉效果。成各具特色的视觉效果。 网页界面中使用的字体，分为中文字体和网页界面中使用的字体，分为中文字体和外文字体两大类，在设计中常常要交替使用。外文字体两大类，在设计中常常要交替使用。 中文和外文字体都是在标准印刷字体，即中文和外文字体都是在标准印刷字体，即中文的宋体、黑体以及拉丁字的新罗马体与无中文的宋体、黑体以及拉
10、丁字的新罗马体与无饰线体的基础上不断演化、发展而来的。饰线体的基础上不断演化、发展而来的。 以常用的字库来看，仅中文字库就有以常用的字库来看，仅中文字库就有汉仪、汉鼎、文鼎、方正、金山、华文等汉仪、汉鼎、文鼎、方正、金山、华文等多种，每一种字库又包含有宋体、黑体、多种，每一种字库又包含有宋体、黑体、楷体、隶书体、行书体、圆体、新艺体、楷体、隶书体、行书体、圆体、新艺体、综艺体、广告体、魏碑体、舒同体、勘亭综艺体、广告体、魏碑体、舒同体、勘亭流体、古印体、手写体流体、古印体、手写体，从几十种到，从几十种到上百种不一而足，英文字体的种类则更加上百种不一而足，英文字体的种类则更加繁复。繁复。 字体中
11、最常用的还可以依据其各行、字体中最常用的还可以依据其各行、其笔划的粗细细分为细、中、粗、特、特其笔划的粗细细分为细、中、粗、特、特超等，而新的字体仍在不断开发中。超等，而新的字体仍在不断开发中。 设计师在字体上的选择范围是非常广设计师在字体上的选择范围是非常广阔的，并且这个范围还在不断扩大。阔的，并且这个范围还在不断扩大。 5.2.1 中文字体中文字体 网页界面中使用的中文字体主要是汉网页界面中使用的中文字体主要是汉字字体。字字体。 蒙古文、藏文等少数民族文字虽然也蒙古文、藏文等少数民族文字虽然也属于中文范畴，但因在网页界面中极少见属于中文范畴，但因在网页界面中极少见到，故不在本书讨论范围之内
12、。到，故不在本书讨论范围之内。 汉字的形态、风格是字体的特有属性，汉字的形态、风格是字体的特有属性，不同的字体会给浏览者造成不同的心理印象。不同的字体会给浏览者造成不同的心理印象。 在选用时要注意不同字体的不同用途，在选用时要注意不同字体的不同用途，充分理解与掌握，恰当运用。充分理解与掌握，恰当运用。 也就是说，字体的选择要以文字信息也就是说，字体的选择要以文字信息的内涵和设计意图为依据，使字体的形态、的内涵和设计意图为依据，使字体的形态、心理效应与在设计中要传达的主题信息相心理效应与在设计中要传达的主题信息相一致，即文字的内容与形式达到高度统一。一致，即文字的内容与形式达到高度统一。 下面就
13、几种常用字体做简要的说明和下面就几种常用字体做简要的说明和分析：分析： （1）宋体）宋体 （2）楷体）楷体 （3）仿宋体）仿宋体 （4）黑体）黑体 （5）圆体）圆体 （6）手写体）手写体 （7）美术体）美术体 5.2.2 外文字体外文字体 网页界面中使用的外文字体主要指由拉网页界面中使用的外文字体主要指由拉丁字母构成的文字体系。丁字母构成的文字体系。 拉丁字母是世界上使用地域最为广泛的拉丁字母是世界上使用地域最为广泛的文字，全世界约有文字，全世界约有60多个国家以拉丁字母作多个国家以拉丁字母作为表意交流的传媒符号，英文就是最具代表为表意交流的传媒符号，英文就是最具代表性的由拉丁字母构成的语言文
14、字系统。性的由拉丁字母构成的语言文字系统。 拉丁字母虽然只有拉丁字母虽然只有26个，但拉丁字母个，但拉丁字母字体却有数百种之多。字体却有数百种之多。 计算机的普及应用更是为新字体诞生计算机的普及应用更是为新字体诞生创造了有利的条件。创造了有利的条件。 字体造型不仅表现出时代的文化形式，字体造型不仅表现出时代的文化形式，更能显示出设计者不同的审美口味和趣向。更能显示出设计者不同的审美口味和趣向。 从字型结构来看，拉丁字母包含矩形、从字型结构来看，拉丁字母包含矩形、圆形和三角形圆形和三角形3种基本形，并通过基本形进种基本形，并通过基本形进行组合变化，字高相对统一，而字符宽度行组合变化，字高相对统一
15、，而字符宽度则因字而异，这与中文的方形字型具有较则因字而异，这与中文的方形字型具有较大的差异。大的差异。 拉丁字母依据其基本结构可以归纳为拉丁字母依据其基本结构可以归纳为3种类型：种类型： （1）饰线体（）饰线体（Serif） （2）无饰线体（）无饰线体（Sans Serif） （3）装饰体（）装饰体（Decorative，也称，也称disp1ay）5.3 5.3 字体编排字体编排 5.3.1 字号级数字号级数 在界面中文字主要分为两种类型：一在界面中文字主要分为两种类型：一种是具有提示和引导功能的文字，如页面种是具有提示和引导功能的文字，如页面中的标题、广告和栏目名称等；另一种是中的标题、广
16、告和栏目名称等；另一种是篇幅较长的阅读性材料和说明性文字，如篇幅较长的阅读性材料和说明性文字，如网络文章的正文、主题内容的详细说明等。网络文章的正文、主题内容的详细说明等。 从文字功能来看，前者的主要功能在从文字功能来看，前者的主要功能在于诱发视觉的关注，而后者则对易读性有于诱发视觉的关注，而后者则对易读性有较高的要求。较高的要求。 现有的字库为网页界面设计师提供了现有的字库为网页界面设计师提供了丰富的字体选择空间，在处理标题性文字丰富的字体选择空间，在处理标题性文字和说明性文字时可以不同类型的字体加以和说明性文字时可以不同类型的字体加以区分。区分。 除了字体之外，字号级数在界面中也除了字体之
17、外，字号级数在界面中也具有不可忽视的作用，它同样可以达到区具有不可忽视的作用，它同样可以达到区分文字功能的目的。分文字功能的目的。 适当的字号级数是保证文字的识别性适当的字号级数是保证文字的识别性和易读性的重要条件。和易读性的重要条件。 通常，人在计算机前眼睛距离屏幕为通常，人在计算机前眼睛距离屏幕为5080公分，这就要求界面中所用的字符规公分，这就要求界面中所用的字符规格应该限制在一定范围之内，过小或过大的格应该限制在一定范围之内，过小或过大的字号级数都不便浏览。字号级数都不便浏览。 计算机对字符的级数作了详细的划分，计算机对字符的级数作了详细的划分，并通过软件可以达到字符级数的无极缩放功并
18、通过软件可以达到字符级数的无极缩放功能（如在能（如在CorelDRAW中拖动字符可随意改中拖动字符可随意改变大小）。变大小）。 Point，即常说的，即常说的“磅磅”数，是字符规数，是字符规格的基本单位，常用的规格有格的基本单位，常用的规格有6P、7P、8P、9P、 10P、12P、 14P、 18P、 20P、 24P、 30P、 36P、 42P、 48P、 60P、 72P等。等。 般来说，般来说， 屏幕上屏幕上10P14P的字符的字符适用于说明性文字，适用于说明性文字，18P以上的字符适用以上的字符适用于标题性文字，小于于标题性文字，小于9P的文字在屏幕上不的文字在屏幕上不易阅读。易阅
19、读。 标题文字通常大于正文文字，这是平标题文字通常大于正文文字，这是平面设计中的一般规律。面设计中的一般规律。 但这一点并非绝对的规定，应根据具但这一点并非绝对的规定，应根据具体情况灵活掌握。体情况灵活掌握。 有时将这一规律反转应用，反而能够有时将这一规律反转应用，反而能够获得新颖独特的界面效果。获得新颖独特的界面效果。 不同字号级数配合上相同的字体，会不同字号级数配合上相同的字体，会给人造成不同的心理印象，相同字号级数给人造成不同的心理印象，相同字号级数的不同字体也会产生不同的心理效果，在的不同字体也会产生不同的心理效果，在设计中需要依靠设计师的经验去加以把握，设计中需要依靠设计师的经验去加
20、以把握，如图如图5-19所示。所示。 5.3.2 字符间距字符间距 中国书法艺术讲布白、求行气，字里中国书法艺术讲布白、求行气，字里行间形成的黑白对比关系是体现书法艺术行间形成的黑白对比关系是体现书法艺术美感的重要表现因素。美感的重要表现因素。 界面设计中文字依靠行距字间的宽窄界面设计中文字依靠行距字间的宽窄程度处理，可以产生空间指引作用并达到程度处理，可以产生空间指引作用并达到类似于书法艺术中文字布局的艺术美感。类似于书法艺术中文字布局的艺术美感。 字符的字距和行距是决定文字易读性字符的字距和行距是决定文字易读性的重要因素，通常所说的读窜了行，就是的重要因素，通常所说的读窜了行，就是由于行距
21、过窄或文字过密造成的。由于行距过窄或文字过密造成的。 界面中正文的字距通常采用界面中正文的字距通常采用“密距密距”，即设定字符间隔为即设定字符间隔为0，而标题和指示性文字，而标题和指示性文字的间距可以根据需要自行设定，没有统一的间距可以根据需要自行设定，没有统一的标准。的标准。 从阅读习惯来看，界面中中文正文的从阅读习惯来看，界面中中文正文的字符数每行为字符数每行为2035个较为适宜，西文则个较为适宜，西文则约约4070个字符最容易阅读。个字符最容易阅读。 每行少于此数会造成浏览者视线频繁每行少于此数会造成浏览者视线频繁移行，多于此数则会使人目光作长距离水移行，多于此数则会使人目光作长距离水平
22、移动而感到疲倦，因此较宽的文字幅面平移动而感到疲倦，因此较宽的文字幅面可考虑采用分栏的排布方式。可考虑采用分栏的排布方式。 中文正文的行距一般在半个字高（半中文正文的行距一般在半个字高（半方）和一个字高（全方）之间。方）和一个字高（全方）之间。 计算方式为从上一行文字顶端到下一计算方式为从上一行文字顶端到下一行文字顶端。行文字顶端。 所以设定时行距通常定为字高的所以设定时行距通常定为字高的150%200%，除非特殊需要，一般最大，除非特殊需要，一般最大不超过不超过200%。 西文的行距通常小于中文行距。西文的行距通常小于中文行距。 标题和篇幅较短的文本可以采取较为标题和篇幅较短的文本可以采取较
23、为自由的形式。自由的形式。 不同的字符间距在视觉上给人以不同不同的字符间距在视觉上给人以不同的心理印象，设计时要加以注意，针对不的心理印象，设计时要加以注意，针对不同需求而设定或松或紧的差异性效果，同同需求而设定或松或紧的差异性效果，同时应当避免因过度拥挤而影响浏览者的阅时应当避免因过度拥挤而影响浏览者的阅读兴趣，如图读兴趣，如图5-20所示。所示。5.4 5.4 文字的编排设计文字的编排设计 以文字表现为中心的编排设计，是网以文字表现为中心的编排设计，是网页界面达成视觉信息传达功能的重要手段。页界面达成视觉信息传达功能的重要手段。 文字编排设计以传播效率为首要目的，文字编排设计以传播效率为首
24、要目的，要求做到易看易懂，一目了然地传达信息要求做到易看易懂，一目了然地传达信息是设计的根本原则。是设计的根本原则。 文字编排设计除了传达功能外，还可文字编排设计除了传达功能外，还可以像一般艺术创作那样具有表现情感的能以像一般艺术创作那样具有表现情感的能力。力。 在现代绘画中，勃拉克和毕加索最早在现代绘画中，勃拉克和毕加索最早把文字作为艺术材料应用于绘画作品中，把文字作为艺术材料应用于绘画作品中，他们认为：他们认为：“词句和文章不应仅仅用于阅词句和文章不应仅仅用于阅读，只要顺便地反射到观众的眼睛里，一读，只要顺便地反射到观众的眼睛里，一瞥而过就行了。瞥而过就行了。” 文字的实体字群与留白虚空间
25、的对比，文字的实体字群与留白虚空间的对比，以及文字在界面上产生的灰色值，能够给人以及文字在界面上产生的灰色值，能够给人心理上和情感上造成愉快或压抑的不同反应。心理上和情感上造成愉快或压抑的不同反应。 这种反应如果与文字内容所传播的信这种反应如果与文字内容所传播的信息相一致，会起到增强作品感染力的作用。息相一致，会起到增强作品感染力的作用。 以文字为创作元素的平面设计作品十以文字为创作元素的平面设计作品十分常见，图分常见，图5-21所示即为几幅设计名家的所示即为几幅设计名家的作品。作品。5.4.1 文字编排的规律文字编排的规律 文字编排应当注重界面上下、左右空间和文字编排应当注重界面上下、左右空
26、间和面积的经营，易于浏览并创造形式美感。面积的经营，易于浏览并创造形式美感。 通常应根据设计的目的选择适当的字体，通常应根据设计的目的选择适当的字体，运用对比、协调、节奏、韵律、比例、平衡、运用对比、协调、节奏、韵律、比例、平衡、对称等形式创造法则，构造特定的表现形式，对称等形式创造法则，构造特定的表现形式，以达到更具感染力的传播信息的目的。以达到更具感染力的传播信息的目的。 1对比对比 界面的空间排布美感是在对比中产生的。界面的空间排布美感是在对比中产生的。 通过对比可以突出主要成分，使界面主通过对比可以突出主要成分，使界面主要信息一目了然。要信息一目了然。 主要的手法有以下几种：主要的手法
27、有以下几种： （1）大小对比）大小对比 （2）粗细对比）粗细对比 （3）明暗对比）明暗对比 （4）疏密对比）疏密对比 （5）主从对比）主从对比 （6）综合对比）综合对比 2统一与协调统一与协调 在网页界面设计中，统一与协调也是在网页界面设计中，统一与协调也是创造形式美感的重要法则。创造形式美感的重要法则。 优秀设计作品中的文字编排，都给人优秀设计作品中的文字编排，都给人以完整协调的视觉印象。以完整协调的视觉印象。 尤其是在使用对比手法时，过分强调尤其是在使用对比手法时，过分强调对比关系、空间对比过大或各种对比元素对比关系、空间对比过大或各种对比元素混用，会导致界面的混乱。混用，会导致界面的混乱
28、。 为了使界面中各种元素协调起来，通为了使界面中各种元素协调起来，通常采用的手法是选取同类的造型因素。常采用的手法是选取同类的造型因素。 有相同形态特征的造型因素在界面中有相同形态特征的造型因素在界面中反复出现，就会形成统一的调子，使整个反复出现，就会形成统一的调子，使整个界面具有整体感，从而达到协调的目的。界面具有整体感，从而达到协调的目的。 如字体选用同一字族的不同字体，以如字体选用同一字族的不同字体，以相同的字距和行距，选用近似色彩和字号相同的字距和行距，选用近似色彩和字号级数，控制近似面积等都是实现界面统一级数，控制近似面积等都是实现界面统一和协调的常用方法。和协调的常用方法。 如果造
29、型因素本身带有动感，可以将如果造型因素本身带有动感，可以将各因素的运动方向设定为相同方向，或添各因素的运动方向设定为相同方向，或添加辅助元素来形成统一的视觉印象。加辅助元素来形成统一的视觉印象。 图图5-28所示的界面设计作品为对比中所示的界面设计作品为对比中求得统一的具有协调和整体感的设计实例。求得统一的具有协调和整体感的设计实例。 3平衡平衡 平衡指在界面中合理地安排各个文字平衡指在界面中合理地安排各个文字群及视觉现象，使浏览者产生稳定可靠的群及视觉现象，使浏览者产生稳定可靠的感觉。感觉。 界面中文字编排要求视觉上产生类似界面中文字编排要求视觉上产生类似于天平平衡的印象。于天平平衡的印象。
30、 失去平衡的文字编排设计，将得不到失去平衡的文字编排设计，将得不到浏览者的信赖，并给人以粗劣的印象。浏览者的信赖，并给人以粗劣的印象。 对称的文字编排形式是获得平衡最基本对称的文字编排形式是获得平衡最基本的手段，但对称的形式显得平淡乏味，没有的手段，但对称的形式显得平淡乏味，没有生命力和趣味感，通常不宜采用。生命力和趣味感，通常不宜采用。 界面中的平衡是要求动势中的平衡，利界面中的平衡是要求动势中的平衡，利用巧妙的手法加强布局中较弱的一方，是界用巧妙的手法加强布局中较弱的一方，是界面中求取平衡的最佳手法。面中求取平衡的最佳手法。 图图5-29所示为变化中获得平衡的设计实例。所示为变化中获得平衡
31、的设计实例。4节奏与韵律节奏与韵律 节奏与韵律由于具有活跃的运动感，节奏与韵律由于具有活跃的运动感，是形成轻松活泼的形式美感的重要方法。是形成轻松活泼的形式美感的重要方法。 界面中反复出现有特征的文字造型并界面中反复出现有特征的文字造型并按照一定的规律排列，就会产生强烈的节按照一定的规律排列，就会产生强烈的节奏和韵律。奏和韵律。 节奏和韵律也是界面条理性的表现，节奏和韵律也是界面条理性的表现，强调文字的节奏感与韵律感，有利于界面强调文字的节奏感与韵律感，有利于界面形式的协调统一。形式的协调统一。 同一特征的文字造型多次连接排列，同一特征的文字造型多次连接排列，或相同造型由大到小、由密而疏有秩序
32、地或相同造型由大到小、由密而疏有秩序地出现，都会形成节奏与韵律。出现，都会形成节奏与韵律。 即使不同的造型因素，只要按一定规即使不同的造型因素，只要按一定规律来排布，甚至特征明显的文字造型仅仅律来排布，甚至特征明显的文字造型仅仅出现两次，都可以产生节奏与韵律。出现两次，都可以产生节奏与韵律。 图图5-30所示为富有节奏与韵律感的网所示为富有节奏与韵律感的网页界面设计作品。页界面设计作品。 5视觉诱导视觉诱导 在界面的文字编排中，必须遵循视觉在界面的文字编排中，必须遵循视觉运动的法则，使一部分文字首先接触浏览运动的法则，使一部分文字首先接触浏览者的视线，然后诱导视线依照设计师安排者的视线，然后诱
33、导视线依照设计师安排好的结构形式顺序浏览，从而达到顺畅传好的结构形式顺序浏览，从而达到顺畅传递信息的目的。递信息的目的。 视觉诱导主要可以通过以下几种方式视觉诱导主要可以通过以下几种方式实现：实现： （1）线的引导）线的引导 （2）图形的引导）图形的引导 5.4.2 文字编排设计的手法文字编排设计的手法 对于网页界面整体而言，文字编排有若对于网页界面整体而言，文字编排有若干相对规律性的设计手法。干相对规律性的设计手法。 不同面积、不同份量的文字群体在界面不同面积、不同份量的文字群体在界面中合理配置，形成字与留白、字与字、群与中合理配置，形成字与留白、字与字、群与群以及字与背景和图形的相互映衬，
34、从而构群以及字与背景和图形的相互映衬，从而构成稳定、完整而具有活力的界面形式。成稳定、完整而具有活力的界面形式。 常用的手法有以下几种：常用的手法有以下几种： 1控制界面四角与对角线控制界面四角与对角线 界面的四角具有潜在的重要性。界面的四角具有潜在的重要性。 四角是表示界面边界的四个点。四角是表示界面边界的四个点。 在四角配置文字或符号，界面的势力在四角配置文字或符号，界面的势力范围就明确地确定下来，界面中即使存在范围就明确地确定下来，界面中即使存在让人感觉动荡不定的元素也会因此而稳定让人感觉动荡不定的元素也会因此而稳定下来。下来。 把界面四角连接起来的是对角线，对把界面四角连接起来的是对角
35、线，对角线的交叉点是界面的中心点，这个中心角线的交叉点是界面的中心点，这个中心点是潜在于界面之中的基本点和视觉中心。点是潜在于界面之中的基本点和视觉中心。 以控制界面的四角和对角线作为界面以控制界面的四角和对角线作为界面文字编排的基本手法，会使浏览者产生一文字编排的基本手法，会使浏览者产生一种稳定、可靠的视觉感受。种稳定、可靠的视觉感受。 2将文字以线或面的形式加以构成将文字以线或面的形式加以构成 界面中的文字往往不是以单个字符的形界面中的文字往往不是以单个字符的形式出现，而是以字群方式存在。式出现，而是以字群方式存在。 把若干文字排列起来，就形成了线或面，把若干文字排列起来，就形成了线或面，
36、可以按照平面构成的方式进行编排处理。可以按照平面构成的方式进行编排处理。 按事先设定的几何图形的轮廓来编排按事先设定的几何图形的轮廓来编排文字的构成，可以使界面形式显得新颖活文字的构成，可以使界面形式显得新颖活泼，如图泼，如图5-34所示。所示。 3文字造型参差错落文字造型参差错落 为使界面产生活泼、有趣味的微妙效为使界面产生活泼、有趣味的微妙效果，可以在完整的文字编排形式中安排部果，可以在完整的文字编排形式中安排部分非规律性造型以形成错落变化。分非规律性造型以形成错落变化。 使用这一手法时应当注意，错落的程使用这一手法时应当注意，错落的程度或在界面中所占面积如果过大反而会减度或在界面中所占面
37、积如果过大反而会减弱效果，使造型显得混乱，因而必须谨慎弱效果，使造型显得混乱，因而必须谨慎选择错落出现的位置和幅度。选择错落出现的位置和幅度。 一般而言，错落应出现在周围有较充一般而言，错落应出现在周围有较充分的留白空间的场所，效果较为显著，如分的留白空间的场所，效果较为显著，如在界面中央或正上方表现效果较好。在界面中央或正上方表现效果较好。 标题性文字往往多用此手法处理，在标题性文字往往多用此手法处理，在框线中加入文字以及文字位置错落均较为框线中加入文字以及文字位置错落均较为常见，如图常见，如图5-35所示。所示。 4文字中加入杂音文字中加入杂音 所谓文字中加入杂音，即指将文字符所谓文字中加
38、入杂音，即指将文字符号与其他构成元素叠加使用，往往会产生号与其他构成元素叠加使用，往往会产生意料之外的趣味感，使界面达到令人耳目意料之外的趣味感，使界面达到令人耳目一新的视觉效果。一新的视觉效果。 加入杂音的手法有下列几种：加入杂音的手法有下列几种： （1）图形与文字的叠加）图形与文字的叠加 （2）文字与文字的叠加）文字与文字的叠加 （3）文字边缘的处理）文字边缘的处理 （4）文字的缺损与破裂）文字的缺损与破裂 5分离排列分离排列 将属于一个文字群体的字符独立出来将属于一个文字群体的字符独立出来加以排列，也是一种引人注目的编排方法，加以排列，也是一种引人注目的编排方法，可以使界面活泼而富有情趣
39、。可以使界面活泼而富有情趣。 分离排列出现于分离排列出现于70年代的后半期，在年代的后半期，在平面设计作品中较为常见，是具有现代装平面设计作品中较为常见，是具有现代装饰美感的文字编排手法，如图饰美感的文字编排手法，如图5-37所示。所示。 5.4.3 文字群体的编排文字群体的编排 文字群体的主体是说明性文字，也就文字群体的主体是说明性文字，也就是常说的正文。是常说的正文。 网页界面中信息的传达主要是依靠正网页界面中信息的传达主要是依靠正文，特别是网站中除首页之外的其他页面，文，特别是网站中除首页之外的其他页面，必须以正文为基础进行文字编排设计。必须以正文为基础进行文字编排设计。 但由于大篇幅的
40、文字群体形态简洁朴但由于大篇幅的文字群体形态简洁朴素，视觉冲击力和吸引力较弱，其主体性素，视觉冲击力和吸引力较弱，其主体性往往被忽略。往往被忽略。 部分设计人员热衷于艺术性较强的标部分设计人员热衷于艺术性较强的标题性文字设计，而忽视文字群体的编排，题性文字设计，而忽视文字群体的编排，往往造成一个网站首页形式独特新颖，后往往造成一个网站首页形式独特新颖，后续页面却平淡无奇的现象。续页面却平淡无奇的现象。 文字群体是网页中信息最为集中的部文字群体是网页中信息最为集中的部分，它的主要价值就体现在它的功能性方分，它的主要价值就体现在它的功能性方面，形式美感是附属于功能性的次要因素。面，形式美感是附属于
41、功能性的次要因素。 在编排设计时，应首先考虑要将信息在编排设计时，应首先考虑要将信息准确、快速地传达出去。准确、快速地传达出去。 在此基础上，设计师应通晓文字群体在此基础上，设计师应通晓文字群体的类型和表现手法，设计出符合人们视觉的类型和表现手法，设计出符合人们视觉习惯并具有一定形式特征的界面作品。习惯并具有一定形式特征的界面作品。 1文字群体的类型文字群体的类型 文字群体的类型指界面构成中以文字群体的类型指界面构成中以“面面”的形式出现的文字，根据其排列方式的不的形式出现的文字，根据其排列方式的不同而形成各具特色的形态。同而形成各具特色的形态。 常见的文字群体类型有以下几种：常见的文字群体类
42、型有以下几种： （1）左右取齐式）左右取齐式 （2）行首取齐式）行首取齐式 （3）中间取齐式）中间取齐式 （4）行尾取齐式）行尾取齐式 （5）加入楔子式）加入楔子式 2文字群体在界面中的排布文字群体在界面中的排布 文字群体在界面中的分布通常有以下文字群体在界面中的分布通常有以下两种方式：两种方式： （1）分栏式结构）分栏式结构 （2）区块分布）区块分布5.5 5.5 案例案例MODELS AGENCYMODELS AGENCY首页首页界面设计界面设计 MODELS AGENCY公司是一家专业公司是一家专业模特公司，专门从事模特的招摸、培训、模特公司，专门从事模特的招摸、培训、商业演出等活动。商业演出等活动。 为了提高公司的知名度，扩展新的业为了提高公司的知名度，扩展新的业务，创建了公司的网站，首页界面如图务，创建了公司的网站，首页界面如图5-46所示。所示。 5.5.1 设计网页背景设计网页背景 5.5.2 设计网页标题设计网页标题 5.5.3 设计网页导航设计网页导航 5.5.4 设计网页主体内容设计网页主体内容5.6 5.6 课后思考与练习课后思考与练习
