《网页界面设计艺术教程》摘录2

第5章 网页界面中文字的编排设计

以语言进行信息传达时，语气、语调以及面部表情、姿态手势是语言的辅助和补充，而在界面设计中，文字的字体、规格及其编排形式，就相当于文字的辅助信息传达手段。

宋体字型结构方中有圆，刚柔相济，既典雅庄重，又不失韵昧灵气，从视觉角度来说，宋体阅读最省目力，不易造成视觉疲劳，具有很好的易读性和识别性。

楷体字型柔和悦目，间架结构舒张有度，可读性和识别性均较好，适用于较长的文本段落，也可用于标题。

仿宋体笔画粗细均匀，秀丽挺拔，有轻快、易读的特点，适用于文本段落。因其字型娟秀，力度感差，故不宜用作标题。

黑体不仅庄重醒目，而且极富现代感，因其形体粗壮，在较小字体级数时宜彩等线体（即细黑），否则不易识别。

圆体视觉冲击力不如黑体，但在视觉心理上给人以明亮清新、轻松愉快的感觉，但其识别性弱，故只适宜作标题性文字。

手写体分为两种，一种来源于传统书法，如隶书体，行书体，另一种是以现代风格创造的自由手写体，如广告体，POP体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体，因为手写体形态特征鲜明显著，很难形成统一风格，不同手写体易造成界面杂乱的视觉形象，手写体与黑体宋体等规范的字体相配合，则会产生动静相宜，相得宜彰的效果。

美术体是在宋体、黑体等规范字体基础上变化而成的各种字体，如综艺体、琥珀体。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发挥引人注目，活跃界面气氛的作用。

拉丁字母依据其基本结构可以分为三种类型：

（1）饰线体（Serif）：此类字体在笔画末端带有装饰性部分，笔画精细对比明显，与中文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体（Times New Roman）。
（2）无饰线体（Sans Serif）：笔画的粗细对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。由于其笔画粗细均匀，故在远距离易于辨认，具有很好的识别性，多用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是赫尔维梯卡体（Helvetica）。
（3）装饰体（Decorative，也称Display）：即通常所说的“花”体，由于此类字体信笺于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体（Script）。

在某些特殊场合，如广告或展示性的短语中，拉丁字母全部使用小写字母，能够造成一种平易近人的亲切感。

拉丁字母字体大都包含字幅（正、长、扁）、黑度（细、粗、超粗）、直斜的变化，因而由一种基本字型可以变化出多种具有相似特征的同族字体，这些字体统称为“字族”。

同一页面中字体应尽量在同一字族中选用，以保证界面具有明确、统一的风格特征。

在计算机字库中，有关字体特征的表示大多彩缩略语，如Cn(Condensed，长体)，Ex(Expanded，扁体)，Lt(Light，细)，Med(Medium，中粗)，DemBol或Dm(Demi Bold，半粗)，Bd(Bold，粗)，XBd(Extra Bold，特粗)，It(Italic，斜体)等。

中文正文的字符数每行以20-35个为宜，西文则约40-70个字符最易阅读，因此较宽的文字幅面应考虑采用分栏的排布方式。

通常设定行距为字高的150-200%，西文的行距通常小于中文行距。

粗细对比是刚与柔的对比，也有人称之为男性性格与女性性格的对比。在同一行文字中使用粗细对比的效果最为强烈。粗字少细字多易取得平衡，给人以明快新颖的感觉，细字少粗字多，则不易平衡，但往往会产生具有幽默感的特殊效果。

界面中文字编排要求视觉上产生类似于天平平衡的印象，失去平衡的文字编排设计，将得不到浏览者的信赖，并给人以粗劣的印象。

可能通过左右延伸的水平线，上下延伸的垂直线，动感的弧线和斜线，穿插的图形来诱导视线依照设计师安排好的结构形式顺序浏览。

在界面的四角配置文字或符号，界面的势力范围就明确地确定下来，界面中即使存在让人感觉动荡不定的元素也会因此而稳定下来。在四角中，左上和右下具有特殊的吸引力，是处理的重点，处理得好，可以使界面左右均衡，同时还会形成从左上到右下沿对角线流动的视觉过程，给人以自然稳定的感觉。

非规律性造型形式的错落变化，应出现在周围有较充分的留白空间的场所，效果较为显著。如在界面中央或正上方表现效果较好，标题性文字往往使用此手法处理。

分栏式结构中，文字群体通常只出现在一栏中，每行的字符数相对较少，易于浏览。分栏中如果都排布文字群体，界面会显得十分拥挤，故不宜采用。其他栏中可设置目录、标题、导航等简洁的文字信息，整体形式繁简对比，疏密得当。国内使用较多的是三分栏，国外四分栏式结构则较为普遍。

第6章 网页界面中版式的构成与设计

网页界面中除了点、线面这些实体造型元素，其余的空间就是“空白”，空白不一定是“白”，它可以是与背景色相同的表示“虚”的空间范围。空白能使实体在视觉上产生动态，获得张力。在中国传统绘画中，空白的表现力丰富，同时又使笔墨生支灵妙，无怪乎古人所说“形得之于形外”，“计白守黑”。页面中巧妙地留白，讲究空白之美，有助于更好地烘托主题，渲染气氛，集中视线，加强空间层次，使版面疏密有序，布局清晰。

黄金之比所以有如此神圣和不可思议的力量，乃是因为黄金比是含有无理数 的数字，用公式表示为Φ=（1+ ）/2约=1.618。黄金矩形去掉短边为边长的正方形时，剩下的矩形仍为黄金矩形。

以正方形的对角线为长边，所得矩形为 矩形，再以 矩形的对角线为长边，所得矩形为 矩形，以此类推，可以得到任意自然数的 矩形。 矩形对折成半时，面积虽然只剩一半，但形状不变，仍是 矩形。

网页界面的版式设计中，其比例关系一般体现在：页面所限定空间的长宽比，实体内容与虚空间（空白）的面积比，页面被分割的比例，图文的关系比以及各造型元素内部的比例等形式上的数量关系。

对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静，如同中国古代宫殿一样庄重、严肃，体现了一种古典主义的风格。为避免对称产生的单调和呆板，要在对称中略带变化。

视觉艺术中的节奏和韵律来自音乐的概念，节奏较多地强调“节拍”，韵律较多地强调“变化”，如果说韵律感不够，是指缺少变化，过于呆板；如果说节奏感不强，是指变化缺乏条理规则。

对比是指因多种元素相异的特点相比较而更加鲜明强烈的紧张感。对比有形的对比（大小、方圆、长短、曲直、宽窄），色的对比（色相、明度、纯度、冷暖），质的对比（刚柔、粗细、强弱、干湿、轻重、软硬、虚实），势的对比（疾缓、疏密、动静、抑扬、进退）等。对比关系越清晰，视觉效果就越强烈，在一个页面中，通常是多种对比关系同时并存，以产生多姿多彩的表现效果。

人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。视线的变化习惯于从左到右，从上到下和顺时针方向运动。

调查显示，视区内上部比下部注目程度高，左侧比右侧更引人注意。

欲使网页在传递视觉信息时顺畅高效，页面须具备清晰的条理性和组织性，产生一定的主从关系。常采取的方式有：

（1）加强主从对象的大小对比。
（2）加大主体形象周围的空白。
（3）加强主从对象之间的色彩对比。
（4）将主体形象在页面反复出现，强化与视线的接触频率，这种强化方式尤其适合于以产品为主体形象的网页界面。
（5）加强主从对象在形态上“势”的对比。一般来说，网页的版面中水平或垂直的形态居多，如果主体形象运用适当的斜线和曲线，就会从水平、垂直线构成的环境中突显出来。

通过视觉流程，设计师运用视觉移动规律，将多种视觉信息进行有序组织，诱导浏者的视线依设计师的意图进行流动，从而使浏览者清晰、流畅、快捷地接受最佳信息。视觉流程的几种表现方式：

（1）单向视觉流程：横向，竖向，斜向。
（2）曲线视觉流程。
（3）导向视觉流程：借助诱导因素来实现。
　　　①线形导向：以线、文字等线形元素来引导观者的视线。
　　　②形象导向：以图片中人或物的朝向来引导观者的视线，如人物的目光方向，一个座椅的朝向等。
　　　③指示导向：通过指示性的箭头、手指或具有透视感的线条来引导视线。
（4）重心视觉流程：视觉会沿着形象方向与力度的伸展来变换、运动，如表现向心力或重力的视线运动。
（5）反复视觉流程：其运动虽不如单向、曲线、重心视觉流程运动感强烈，但更富于节奏和秩序美。
（6）散点视觉流程：没有固定的视觉流动线，强调一种感性、自由性、随意性、偶然性。

对于栏目设置比较复杂的网站，如果显示所有与该页相关的导航，页面势必变得相当庞大，影响了版面的整体布局。最好的办法是将此页面做成弹出窗口，不影响原有页面的导航信息，同时只设置与该页关系最近的导航链接和首页链接。

在视觉习惯上，页面的垂直均匀分割，当左右两部分形成强烈对比时，会造成视觉心理的不平衡。这时，可将分割线作部分或全部的弱化处理，或在分割处加入其他元素，使左右部分的过渡自然而和谐。

第7章 网页界面中的动画设计

周期、关键帧和行为被称为动画的三个属性。

使用简单的GIF动画生成的广告图形，点击率会上升10%-25%，而动画广告的面积平均比静态广告小5%-25%。

动画由于在信息的方向性诱导方面的优势，除了能够加强视线在视觉传达领域的注意外，在引导视线方面能够发挥更大的能动性，引导视线完全按照设计师的意图去浏览，以最快捷的途径，最有效的感知方式获取视觉信息，使设计师能够更有效地影响浏览者的视线运动轨迹。

当人们面对平面上一些静止的物体时，会在它们之间平分其注意力，如果其中一个物体突然动起来，所有的注意力在1/5秒后都将转向它。

人的正常视觉容量约为每秒25比特，即大约每秒4个汉字，每分钟约250个字左右。

动画表达追求的是信息的准确传达，意念的清晰易懂。而做到这一点取决于两个方面：一是动画本身有好的表现手法和设计，使每一个画面或主要变化以最清楚和最有效的方式呈现出来；二是好的时间掌握。画面转换的时间要恰到好处，太慢则感觉节奏缓慢，在里面寻找不到兴奋点，视觉心理就会感觉空洞、单调，使注意力分散；太快则浏览者还没看清要传达的信息，动作已经结束，创意没有意义，设计也就失败了。

一般一个页面有1-2个动画区域是比较适度的。如果在页面上必须出现不止一个动画，也应给予较大的区别，如采用面积的大小对比，或使动画的演示有时间差别等。

常见的动画设计效果：

（1）色彩循环动画
（2）元素沿直线或曲线的滚动
（3）元素的跳动与闪动。在跳动后保持5-10秒的静止，这样跳动吸引浏览者的视线，静止则使浏览者能看清图像。
（4）元素的淡入与淡出。
（5）元素飞入画面。
（6）元素的缓慢旋转，通常旋转几周后就停顿一会儿。
（7）元素的爆炸与组合。
（8）闪烁和灯光效果。
（9）元素之间的过渡与变形。将一幅图象的部分或整体毫无痕迹地融入另一幅图象中。