网页界面中文字的编排设计Word文档格式.docx

1、文字与具体文字内容以及界面主题相适应。根据主题内容、欲传达的信息含义和文字所处环境来确定文字的字体、色彩、形态和表现形式是保证适合性的必要条件，如图5-2所示2明确性文字的主要功能在于传达外姓特征以便浏览者识别，保证信息的准确传递。文字的点划、横竖、圆弧等结构要素造成文字本身的不可变异，因而在选择时须格外注意，在特别强调信息严格准确的情况下应优先选取易于识别的文字，在进行字体创作时也应保证形态的明确性，如图5-3所示3易读性文字的形态及编排设计能够提高截面的易读程度。一般情况下，人的视觉对于过粗、过细的文字形态需花费更多的时间去识别，不易顺畅浏览。在版式布局中，合理的文字排列与分布会使浏览变得

2、极为愉快，对视觉适宜的文字色彩配置也能够加强界面的易读性，如图5-4所示。4美观性文字可以通过自身形象的个性与风格给人以美的感受，使界面更加美观。文字形态的变化与统一、文字编排的节奏与韵律、文字体量的对比与和谐，都是达成美观性的表现手法，如图5-5所示。5创新性文字与截面信息主题需求相配合并进行形态变化，将文字进行创意发挥，产生创造的美感，进而加强界面整体设计效果的创新性，给浏览者耳目一新的感受，如图5-6所示。总之，文字既具有传达信息的功能，使浏览者易与阅读和接受，又可以通过文字形态的节奏与韵律带给人美感，并通过穿早形成自身鲜明、独特的个性，从而使界面内容与形式达成高度的统一，在实现良好信息

3、传达效果的基础上适应人们的审美需求。5.2 字体及字体编排5.2.1字体字体，又称文字的“体式。文字作为视觉形式的信息传达符号，同一文字体系中包含有多种不同的字体。在达成利于阅读和传递特定信息的功能第一性的同时，文字可以通过不同字体所特有的艺术风格特征来传达更多的信息，并形成各具特色的视觉效果。网页截面中使用的字体，分为中文字体和外问字体两大类，在设计中常常要交替使用。中文和外问字体都是在标准印刷字体，即中文的宋体、黑体以及拉丁字的新罗马体与无饰线体的基础上不断演化、发展而来的。以常用的字库来看，仅中文字库就有汉仪、汉鼎、文鼎、方正、金山、华文等多种，每一种又包含有宋体、黑体、楷体、隶书体、行

4、书体、圆体、新艺体、综艺体、广告体、魏碑体、舒同体、勘亭流体、古印体、手写体，从几十种到上百种不一而足，英文字体的种类则更加繁复。字体中最常用的还可以依据其各行、其笔划的粗细细分为细、中、粗、特、超特等，而新的字体仍在不断开发中。设计师在字体上的选择范围是非常广阔的，并且这个范围还在不断扩大。当然，大多数从事网页界面设计的人员不可能过大涉足字体开发这一专业领域，特别是汉字体系的庞大，造成设计、开发一套完整的新字体颇为耗时费力。字体的开发设计通常是由专业的商业公司来进行。界面设计师的工作是选择和应用已有的各种字体进行综合性的创造，因而要求设计师对现有字体的风格特点有较为深刻的认识和了解，这也是网

5、页界面设计人员应当具备的基本素养。5.2.1.1 中文字体网页界面中使用的中文字体主要是汉字字体。蒙古文、藏文等少数民族文字虽然也属于中文范畴，但因在网页界面中极少见到，故不在本书讨论范围之内。汉字是世界上使用人群最为广泛的文字。 我国十几亿人口中绝大多数是以汉字作为书面表达的工具，日本、韩国、新加坡以及许多国家的华人聚居区也在不同程度和范围内使用汉字。汉字也是世界上最古老的文字体系之一，从原始社会使用至今已有数千年的历史。汉字的产生经理了造字和用字的漫长历史进程，汉字的字体也经历了多次重大的演变，发展到今天，主要保留了隶、草、楷、行等几种主要字体。我国又是世界上采用印刷术最早的国家，雕版印刷

6、术在公元七八世纪（即唐代）就已经发明，毕升的活字印刷更是闻名世界的中国古代四大发明之一。印刷术的出现有力的推动了文化的传播，同时也对字体作出了新的规范。以宋体为代表的印刷字体成为应用最为广泛的文字形态，并为大众所接受。目前网页界面中使用的中文字体，主要是由印刷字体发展而来的宋、黑、楷、仿宋等字体，手写体、书法体以及注重艺术趣味的中文字体也缴为常见。设计作品中经常使用的汉字字体已有数百种之多。日本迄今也已开发、创造了多种汉字字体，进一步吩咐了设计师的创作表现手段。 汉字的形态、风格是字体的特有属性，不同的字体会给浏览者造成不同的心理印象。在选用时要注意不同字体的不同用途，充分理解与掌握，恰当运用

7、。也就是说，字体的选择要以文字信息的内涵和设计意图为依据，使字体的形态、心理效应与在设计中要传达的主题信息相一致，即文字的内容与形式达到高度统一。下面就几种常用字体做简要的说明和分析：1. 宋体宋体是印刷用的基本字体，也是网页界面中应用最广泛的字体。字体起源与北宋，定型与明代，因而日本所创的相应汉字称为“明朝体”。宋体的形态特征为字型方正归整，笔画横细竖粗，横笔画的收笔处及横竖笔画转折处都有与竖笔画等宽的顿角，撇、捺、点、提、钩等笔画均保留有中国传统书法艺术的痕迹。宋体字型结构方中有圆，刚柔相济，既典雅庄重，又不失韵味灵气。从视觉角度来说，宋体阅读最省目力，不易造成视觉疲劳，具有很好的易读性和

8、识别性。依据字型的粗黑程度，宋体可以分为特粗宋、大标宋、小标宋和XX、报宋等，应用时略有分别。例如，粗宋体缴适宜用作标题和较短的文字段落，细宋体适合用语较长的正文及说明性文字。图5-7 ab 所示为各种宋体字形态。2楷体自印刷术发明以来，楷体应用一直较为广泛，因其具有的类似书法中楷书的良好间架结构及艺术气质而得到大众的青睐。楷书字型柔和悦目，肩胛结构舒张有度，可读性和识别性均较好，使用于较长的文本段落，也可用于标题。图5-8所示为各种楷体字形态。3仿宋体仿宋体是模仿宋代刻本字样设计的字体，是最常见和最使用的老宋体变体字。字型可以根据需要定为方形、长方形或扁方形，各具韵味。笔画粗细均匀，秀丽挺拔

9、，有轻快、易读的特点。适用于文本段落，因其字形娟秀，力度感差，故不适宜用作标题。图5-9所示为各种仿宋体字形态。4黑体黑体是受西方无饰线字体的影响，于20世纪初在日本产生的字体，壁画起止均为方形，也称“方头体”。黑体字型与宋体相近，笔画粗细均匀，没有装饰性壁画。黑体虽然不如宋体字型显得俊秀而有变化，但它极易吸引人的视线，具有极强的注目性，并显示出浑厚有力、朴素大方的独特风格。黑体字不仅庄重醒目，而且极富现代感，是网页界面中最常使用的字体。黑体字分为特粗黑、大黑、中黑等多种，细黑通称为等线体。黑体使用于标题、导语、展示或广告性文字，因其形体粗壮，在较小字体级数时宜采用等线体，否则不易识别。图5-

10、10 ab 所示为各种黑体子形态。5圆体圆体是在黑体的基础上加工变化衍生而来的字体。圆体与黑体相比较，笔画较细，其止均为圆头，空白匀称，字型丰满。圆体视觉冲击力不如黑体，但在视觉心理上给人以明亮清新、轻松愉快的感觉。圆体也可因字型粗细分为特粗圆、粗圆、中圆、细圆等多种，但识别性不如上述几种字体，故只适宜用作标题性文字。图5-11所示为各种圆体字形态。6手写体手写体分为两种类型。一类来源于传统书法艺术，演化而成目前常用的字体，如隶书体、魏碑体、古印体、行书体以及日本的勘亭流体等。另一类是根据不断变化的设计需求而穿早的具有现代分割的自由手写体，如广告体、海报体、POP体等。手写体具有形态自由、表现

11、力强的特点，但识别度较差。手写体通常只使用与标题和广告性文字，长篇文本段落和小字体级数时不宜使用。在使用手写体时应当注意，应尽量避免在同一页面中使用两种不同的手写字体，因为手写体形态特征鲜明显著，很难形成统一的风格，不同手写体易造成界面杂乱的视觉印象。手写体与黑体、宋体等规范的字体相配合，则会产生动静相宜，相得益彰的效果。图5-12 ac所示为各种手写体字形态。7美术体美术体是在宋体、黑体等规范字体基础上变化而成的各种字体的通称。常用的美术体主要有综艺体、新艺体、琥珀体、彩云体、姚体、美黑体等。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用与字体级数较大的标题，发挥引人注目、活

12、跃界面气愤的字体效用。图5-13 ab所示为各种美术体字形态。从视觉注目程度来看，黑体、部分美术体和手写体都具有较好的注目性，而笔画较细的字体如仿宋体注目度较差。从易读性来看，宋体、楷体以及仿宋都具有较好的易读性，黑体、美术体和手写体易读性均较差。设计师在创作时应根据实际需要并结合字体特征来进行选取。为了使界面中的文字如标题、文本段落、导航、注释、分类目录等加强或减弱，可以采取不同的字体组合以示区别，使体例层次清楚。字体的组合要注意到对比与协调两个因素，处理好这一对矛盾辨证关系。5.2.1.2 外文字体网页界面中使用的外文字体主要指由拉丁字母构成的文字体系。拉丁字母是世界上使用地域最为广泛的文

13、字，全世界约有60多个国家以拉丁字母作为表意交流的传媒符号，英文就是最具代表性的由拉丁字母构成的语言文字系统。拉丁字母虽然只有26个，但拉丁字母字体却有数百种之多。计算机的普及应用更是为新字体诞生创造了有利的条件。 字体造型不仅表现出时代的文化形式，更能显示出设计者不同的审美口味和趣向。从字型结构来看，拉丁字母包含矩形、圆形和三角形3种基本形，并通过基本形进行组合变化，字高相对统一，而字符宽度则因字而异，这与中文的方形字型具有较大的差异。拉丁字母在历史演变的过程中形成了多种多样、各具特色的字体。在早期使用中，字母的唯一功能就是阅读性的传达功能。从19世纪以来，由于商业和工业的发展，社会要求更加

14、迅速和有效的信息传播，拉丁字母便有了新的作用和功能，即以有个性、特征、强烈而有力的形式，起到宣传的作用。字母不单是组成单词的一个结构部分，它们本身也被要求具有商业象征性。这种要求发展到今天的网络时代，可以说是有增无减，因而造成了拉丁字母字体的不断涌现，形成了字体空前繁荣的状况。拉丁字母依据其3基本结构可以归纳为3种类型：1. 饰线体（Sreif）此类字体在笔画末端带有装饰性部分（Sreif），横画水平，笔画粗细对比明显，与中文的宋体具有近似形态特征。饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落的字体。常用的新罗马体（Times New Roman）是饰线体的典型代表字体。图5-14

15、ab所示为各种饰线体文字形态。2无饰线体 （Sans Serif）此类字体笔画的粗洗对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。由于其笔画粗洗均匀，故在远距离易于辨认，具有很好的识别性，在界面中多用作于标题和指示性文字。无饰线体具有简洁归整的形态特征，符合现代的审美标准，在欧美设计界得到普遍青睐和广泛应用，也是网页界面中最常见的拉丁字母字体。赫尔维梯卡体（Helvetica）是无饰线体的典型代表字体。图5-15 ab所示为各种无饰线体文字形态。3装饰体（Decorative,也称display）此类字体即通常所称的“花体”字，其字型较为生动、自由，装饰性强，多用于设计花巧的

16、作品，往往能达到与众不同及独具趣味的视觉效果。但由于此类字体偏重于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。草体（Script）是装饰体的典型代表字体。图5-16 ab 所示为各种装饰体文字形态。拉丁字母有大小写之分，应当根据文法习惯按需要使用。一般来说，大写字母形态庄重严谨，界面中常用之作为标题、导语及分栏题目等，偶尔也可见于小段的文本，但因其易读性低与小写字母，故不宜用于大段的文本段落。20世纪20年代，包豪斯 （Bauhaus） 的拜尔（Herbert Bayer） 曾提出废除大写字母的主张，但从功能性角度来看，全部使用小写字母也会降

17、低文本的易读程度。在某些特殊场合，如广告或展示性的短语全部使用小写字母， 能够造成一种平易近人的亲切感，如图5-17所示。界面中使用大小写字母的原则是保证文字信息传达的高效和准确，在特定场所可以根据实际需要做相应的变化，但仍然要充分考虑文字的易读性。每种字体都包含大写和小写字母，使用时应充分认识各自的形态特征和艺术特点。一种字体在不改变其结构特征和风格特点的前提下，可以在以下3个方面进行字体变化：字幅有正体（Standard）、长体（Condensed）和扁体（Expanded）之分，黑度则分为细（Linght）、中（Medium）、半粗（Demi Bold）、粗（Bold）和特粗（Extra

18、 Bold），另外字体还有直体（Roman）和斜体（Italic）之分。拉丁字母字体大都包含以上变化，因而由一种基本自行可以变化出多种具有相似特征的同族字体，这些字体统称为“字族”。字族中各种变体能够满足不同的设计要求，从而大大提高了字体的可利用率。在计算机常用字库中，有关字幅、黑度和直斜的表示大多使用缩略语，如Cn（Condensed）、Ex（Expanded）、Lt（Light）、Med（Medium、Dembol）或Dm（Demi Bold）、Bd（Bold）、XBd（Extra Bold）、It（Italic）等。在传统平面设计观念中，界面中所用字体应尽量统一，在同一字族中选用，不可同

19、时排列其他字族的字体。这一创作观念在网页界面设计中仍然有它存在的价值，同一字族的字体能够保证界面具有明确、统一的风格特征。在特定的情况下，界面中也可以采用多种字体混杂使用，可以达到活跃界面气愤的效果，同时还能产生不受拘束的现代感。但要注意的是，活跃不等于杂乱，所选字体的编排在整体上依然要做到有序变化，在对比中寻求统一的共性，如图5-18所示。5.2.2字体编排5.2.2.1字号级数在界面中文字主要分为两种类型：一种是具有提示和引导功能的文字，如页面中的标题、广告和栏目名称等；另一种是篇幅较长的阅读性材料和说明性文字，如网络文章的正文、主题内容的详细说明等。从文字功能来看，前者的主要功能在于诱发

20、视觉的关注，而后者则对易读性有较高的要求。现有的字库为网页界面设计师提供了丰富的字体选择空间，在处理标题性文字和说明性文字时可以不同类型的字体加以区分。除了字体以外，字号级数在界面中也具有不可忽视的作用，它同样可以达到区分文字功能的目的。适当的字号级数是保证文字的识别性和依读性的重要条件。通常，人在计算机前眼睛距离屏幕为5080公分，这就要求界面中所用的字符规格应该限制在一定的范围之内，过小或过大的字号级数都不便浏览。计算机对字符的级数作了详细的划分并通过软件可以达到字符级数的无极缩放功能（如在Corel DRAW中拖动字符可随意改变大小）。Point,即常说的“磅”数，是字符规格的基本单位，

21、常用的规格有6P、7P、8P、9P、10P、12P、14P、18P、20P、24P、30P、36P、42P、48P、60P、72P、等。一般来说，屏幕上1014P的字符适用于说明性文字，18P以上的字符适用于标题性文字，小于9P的文字在屏幕上不易阅读。标题文字通常大于正文文字，这是平面设计中的一般规律。但这一点并非绝对的规定，应根据具体情况灵活掌握。有时将这一规律反转应用，反而能够获得新颖独特的界面效果。不同字号级数配合上相同的字体，会给人造成不同的心理印象，相同字号级数的不同字体也会产生不同的心理效果，在设计中需要依靠设计师的经验去加以把握，如图5-19所示。5.2.2.2字符间距中国书法艺

22、术讲布白、求行气，字里行间形成的黑白对比关系是体现书法艺术美感的重要表现因素。界面设计中文字依靠行距字间的宽窄程度处理，可以产生空间指引作用并达到类似于书法艺术中文字布局的艺术美感。字符的字距和行距是决定文字易读性的重要因素，通常所说的读窜了行，就是由于行距过窄或文字过密造成的。界面中正文的字距通常采用“密距”，即设定字符间隔为0，而标题和指示性文字的间距可以根据需要自行设定，没有统一的标准。从阅读习惯来看，界面中中文正文的字符数每行为2035个较为适宜，西文则约4070个字符最容易阅读。每行少于次数会造成浏览者视线频繁银行，多于次数则会使人目光作长距离水平移动而感到疲倦，因此较宽的文字幅面可

23、考虑采用分栏的排布方式。中文正文的行距一般在半个字高（半方）和一个字高（全方）之间。计算方式为从上一行文字顶端到下一行文字顶端。所以设定时行距通常定为字高的150%到200%，除非特殊需要，一般最大不超过200%。西文的行距通常小于中文行距。标题和篇幅较短的文本可以采取较为自由的形式。不同的字符间距在视觉上给人以不同的心理印象，设计时要加以注意，针对不同需求而设定松或紧的差异性效果，同时应当避免因过度拥挤而影响浏览者的阅读兴趣，如图5-20 ab所示。5.3文字的编排设计以文字表现为中心的编排设计，是网页界面达成视觉信息传达功能的重要手段。文字编排设计以传播效率为首要目的，要求做到易看易懂，一

24、目了然地传达信息是设计的根本原则。文字编排设计除了传达功能外， 还可以像一般艺术穿凿那样具有表现情感的能力。在现代绘画中，勃拉克和毕加索最早把文字作为艺术材料应用于绘画作品中， 他们认为：“词句和文章不应仅仅用于阅读，只要顺便地反射到观众的眼睛里， 一瞥而过就行了。”文字的实体字群于留白虚空间的对比，以及文字在界面上产生的灰色值，能够给人心理上和情感上造成愉快或压抑的不同反映。这种反映如果与文字内容所传播的信息相一致，会起到增强作品感染力的作用。以文字为穿凿元素的平面设计作品十分常见，图5-21 ab所示即为几幅设计名家的作品。优秀的网页界面设计作品，都十分重视文字的编排设计。通过巧妙的编排在

25、变化中产生视觉美感，进而达到完美的艺术效果，增强浏览者的阅读兴趣和效率。5.3.1文字编排的规律文字编排应当注重界面上下、左右空间和面积的经营，易于浏览并穿早形式美感。通常应根据设计的目的选择适当的字体，运用对比、协调、节奏、韵律、比例、平衡、对称等形式创造法则，构造特定的表现形式，以达到更具感染力的传播信息的目的。5.3.1.1对比界面的空间排布美感是在对比中产生的。通过对比可以突出主要成分，使界面主要信息一母了然。主要的手法有以下几种：1. 大小对比大小对比是文字组合的基础。 大字给人以强有力的视觉感觉，但缺乏纤细和精致感；小字精巧柔和，但力量感不足。大小文字配合使用， 可以相互缓解其缺点

26、，并产生生动活泼的对比关系。大小文字的对比幅度大，可以更加突出各自的特征，大字愈显有力，小字愈显精巧；对比幅度小，则会给人以舒畅、稳定、平和的感觉，整体形式显得紧凑，对文字编排有较好的协调作用。图5-22 ab所示为应用大小对比手法的界面作品。2. 粗细对比粗细对比是刚与柔的对比，也有人称之为男性性格与女性性格的对比。字体粗象征强壮、刚劲、沉默，字体细则感觉柔弱、纤细、活泼。在同一行文字中使用粗细对比效果最为强烈。一般来说，粗字体用于表现主要的、核心的内容。粗字少细字多易取得平衡，给人以明快新颖的感觉。细字少粗字多，则不易平衡，但往往会产生具有幽默感的独特效果。图5-23 ab所示为应用粗细对

27、比手法的界面作品。3. 明暗对比明暗对比也称黑白对比，在色彩构图中也表现为明度高的文字和明度低的文字之间的对比。明与暗的文字造型出现在同一界面中，可以使主题更加醒目和突出，使人感到有距离远近、时间差别的空间效果。明暗对比的表现首先要安排好明暗面积在界面中的比例关系， 文字主题与背景及其他字群间应保持得当的比例，避免千篇一律的单调形式，使截面显出活跃、生动的气氛。图5-24 ab所示为以明暗对比为表现手法的界面设计作品。4. 疏密对比疏密对比指文字群体之间， 以及文字与整体截面之间的对比关系。疏密对比往往也同时具有大小对比、明暗对比的效果，但从疏密对比的观点来看更容易理解设计师意图。从界面版式构

28、成来看，文字的紧凑也可以和整体的大面积留白形成疏密对比。疏密对比是多样式统一的形式法则的重要表现途径，界面的形式美感往往可以籍由疏密对比来实现。图5-25 ab所示为应用疏密对比手法的截面设计作品。5. 主从对比主从对比指文字中主要信息与次要信息以及标题性文字与说明性文字之间的对比。主从分明会给人以安定感，突出主要信息，主从关系便会一目了然，便于信息的传达。界面中文字的主从关系十分重要，若二者关系模糊不清，界面将会失去重点；反之，如主要信息过多或过强，也会造成界面失去动势，平淡无奇而令浏览者感到乏味。图5-26 ab所示为以主从对比手法穿凿的界面设计作品。6. 综合对比常见的对比手法还有自由随意与规整严谨、整齐与杂乱、曲线与直线、水平与垂直、尖锐和圆滑等。前述几种对比手法往往也会结合使用。在界面中巧妙安排各种对比关系，可以产生繁多而复杂的变化，从而诞生新颖的文字编排形式。图5-27所示为多种对比手法混合使用而创造的界面设计作品。5.3.1.2统一与协调在网页界面设计中，统一与协调也是创造形式美感