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

第1章 网页界面设计的基础理论

用美和技术两方面衡量生活的合理性。网页界面设计是将技术性与艺术性融为一体的创造性活动。

在网页出现的早期，和设计发展的早期阶段一样，网页设计是以功能性为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。以字符组成的界面可以起到基本的信息传达作用，同时技术要求相对较低，易于实现，并且有较好的稳定性，故而这种形式的界面在很长一段时间内是人机交流的主要形式。

我国对网页界面设计这一课题的系统研究还略显薄弱，特别是载艺术设计领域中对网页界面设计的探讨尤显不足。

版式设计对设计人员的综合能力与文化素养要求比较高，往往不如文字编排和图形设计那样容易把握。

从艺术领域来看，色彩本身及其有无，并不意味者艺术作品的艺术性的高低，但在网页界面设计领域，彩色的网页总是要胜于单色的网页。

一般情况下使用256色就可以将图片的色彩基本还原出来。

网络信息的受传者存在着职业、文化、修养、兴趣、生活经验以及消费水平等方面的明显差异，因此在网页界面中出现的视觉形象要适应大多数浏览者的口味，越明确，越通俗，越具体越好。

在这样一个内容丰富、信息繁杂的巨大网络世界里，网页界面设计必须以其强有力的视觉冲击效果来吸引浏览者的注意，进而使特定的信息得以准确迅速地传播。这就要求网页界面设计的形式应力求删繁就简，“以少胜多”，一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应摒弃，使参与形式构成的诸元素均与欲传播的内容直接相关。

“简洁”是各种艺术形式都必须遵循的普遍原则，正所谓“无声胜有声”，网页界面设计尤其要做到这一点。在社会文化高度发达的现代社会，人们因文化素质的提高和价值观念的变化，生活情趣和审美趣味更趋向简洁、单纯。简洁的图形，醒目的文字，大的色块更符合形式美的要求和当今人们的欣赏趣味，给人以悦目、舒适、现代的感觉以及美的享受，令人百看不厌，并能回味无穷，联想丰富。

网页界面可以依据其传达信息内容的特点来进行类型的划分，主要可分为6种形式：

（1）信息查询类：以实用功能为主，注重视觉元素的均衡排布，较少装饰性的元素，如Yahoo!。
（2）大众媒体类：如新浪网新闻中心。
（3）宣传窗口类:从企业特有形象入手，充分表现企业文化特征，如Adidas。
（4）电子商务类:使浏览者在访问时进行愉快的交流是设计的重点，要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意的页面形式，如当当书店。
（5）交流平台类：以方便使用为主要特点，指示性强，易于理解，如BBS。
（6）网络社区类：由于网络社区通常不带有商业性质，因此它的界面设计可以根据社区内容充分发挥创造性，营造一个自由、舒适、愉快的氛围。

第2章 网页界面与视觉传达的设计

视觉传达设计简称视觉设计（Visual Communication Design 或 Graphic Design），有时也被称为信息设计（Information Design），视觉传达设计的过程，是设计者将思想和设计概念转变为视觉符号形式的过程，即概念视觉化的过程，对信息的接收者来说，则是相反的过程，即视觉概念化的过程，贯穿和联结两个过程的是信息。

图形符号具有很强的直观性，但同时在信息传达明确性方面不如文字，有时会出现“误读”的可能。

在界面设计中，要求信息的发送者和接收者之间必须具备部分相同的信息知识背景，否则在两者之间就必须存在一个翻译或解说系统作为中间媒介来进行沟通。例如对于一个没有任何西方文化和语言背景的中国人来说，“Just Do It”的文字符号就不会产生任何“动感，活力，激情”的印象，此时可以通过鲜明的图象和活跃的色彩来辅助传达这个概念。

形式美的创造法则：

（1）秩序产生的美感。它通过对称、比例、连续、渐变、重复、放射、回旋等方式，表现出严谨有序的设计理念，是创造形式美感的最基本的方式。
（2）和谐产生的美感。它是以美学上的整体性观念为基础的。构成界面形式的文字、图形、色彩等因素之间相互作用，相互协调映衬，都为界面的功能美与形式美服务。
（3）变化产生的美感。变化的法则体现了设计存在的终极意义，即不断地推陈出新，不断地创造新的形式。

在艺术问题上没有什么严格的法则，艺术天才不可能是结构的奴隶，他不管怎么干，都不会侵犯艺术原理，而只会创造出新的原理。

精心收集和审慎挑选艺术和设计的古今范例有助于训练设计师的大脑和眼力。

界面的借鉴不仅要从同类设计作品中求得，更重要的是从文化传统中找寻。日本现代设计在不长的时间里发展到较高水平，重要原因之一就是很多日本设计师自觉地将日本的文化传统融入到现代设计理念之中。

第3章 网页界面中的图形图象设计

图形图象的视觉冲击力比文字大85%，故有人说，一图胜千字。

除了圆形以外，点还可以是方形、三角形、星形、自由形等许多形状，在视觉上，只要相对地小，就有点的效果。

图形图象的扩展造型元素，是在点线面这些基本造型元素基础上发展的，它进一步分析了形成图形图象不同视觉效果的影响因素：空间，运动，质感。

图形图象所产生的空间感，一方面可以通过摄影、绘画的技法获得，一幅好的摄影绘画作品使物象有呼之欲出的感觉；另一方面还可以运用不同的手法对点线面等元素进行组合，从而使平面图形图象的三维空间感得以加强。这些手法是疏密、大小、方向、重叠、虚实、色调的变化和光影的利用。

图形图象可以采用三种方法产生动感：

（1）采用叠合的片断形态，最常用的方法是重复和渐变，如将动作分解成一系列片断形态。
（2）表现形态的运动轨迹，正如人们看到流星拖着长长的尾巴因而判断它正在划过夜空。
（3）采用运动过程中形态或不稳定的形态，将物象运动过程中某一时刻的片断形态或处于不稳定状态的形态捕捉下来，并选取动态或动势最大的状态，由于人们平时对重力作用的认识，会不自觉地产生联想：接下去会发生什么？怎样运动？如一个在轮滑过程中飞身跃起的人物形象。

创意就是客观地思索，然后天才地表达。

如果说，图形图象的创意解决了“做什么”的问题，设计就是具体的“怎样做”。

“传统”虽然在时间上代表历史，但在观念上并不代表陈旧。传统的东西可以让历史得以延续，让文化保持差异性，从而让人们内心产生归属感。中国的传统文化源远流长，在绘画、书法、建筑、音乐、戏曲、医药、哲学等很多领域都有自己独特的民族风格。

本书将来源于摄影照片的图称为图象。

图象的退底，是将图片中所选形象的背景沿边沿剪裁掉。退底后的形象，其外轮廓呈自由形状，具有清晰分明的视觉形态，显得灵活自如，当与其他背景搭配时，既容易协调，又容易突出该形象。

图象的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。要想使图象“虚”，一种方法是将图象模糊，再有就是将图象的色彩层次减少，纯度降低，尽量与背景靠近。

局部是相对于整体而言的，相对局部的图象能让视线集中，有一种点到为止，意尤未尽的感觉。

第4章 网页界面中的色彩设计

在人的视觉中所能感受到的色彩范围内，绝大部分是非高纯度的色，即含有一定程度灰的色。

普通24位显示适配器可产生约1670万种颜色，虽然数字很大，但RGB的色彩范围要远远小于可见光谱的范围。

由于CMYK与RGB分别是减色原理和加色原理，因此输出的图像与在显示器上看到的色彩相比要暗一些。

Lab色彩模式以明度、纯度和色相对色彩进行表述，因此其在进行图像处理或在不同平台和系统间交换时，都不会产生色偏或失真的情况。

人由亮处进入暗环境后，最初大约15分钟可以基本适应，达到完全的暗适应大约需要40分钟。

从生理角度讲，眼睛最能适应的光是中等明度的全色光，即中间灰色，当外界光并非中间灰色时，视觉会自动调整这种不平衡现象，因而会出现视觉残像。为了降低视觉残像的影响，应避免使用高纯度的单一色彩，或是在纯色中加入一定量的灰。

明度高的色彩在视网膜上形成的物象边缘会有一圈光包围着，视觉感受好像物象扩大了一些。

不同色光在视网膜上所成影像位置有前差异，因此产生色彩的进退感。日光中波长较长的色光如红橙黄成像在视网膜的较前部位，因而产生色彩靠近的感觉；而波长较短的色光如绿蓝紫成像在视网膜的靠后部位，因而产生色彩后退的感觉。

中国传统年画和西方教学的彩色玻璃艺术大量使用色相对比手法。色相的差别是由可见光波的波长差异造成的，查在色相对比中不能完全依据波长的差别来确定色相的对比程度，红色光与紫色光的波长差异虽然很大，但都处于可见光的两极，都接近不可见光的波长，因而从视觉感受上两者的色相是相近的。

明度是色彩三要素中具有相对独立性的一个要素，它可以摆脱任何有彩色的特征而独立存在。色相和纯度都必须依赖明度而存在。

色彩形状的认识程度主要取决于形的色彩与周围色彩的关系，特别是它们之间明度对比的关系，色相对比也可以造成对形的识别，但其作用远不如明度对比那么重要，例如，红绿对比是最强的色相对比，但因明度差异较小，形的清晰度不高，浅绿与深绿配色，虽然属于同类色相，但明度差别大，因此形就具有较高的清晰度。

为了达到色彩和谐的目的，除改变色彩的三要素外，合理安排各种色彩所占的面积是调整色彩配合效果的有效手段。当两种色彩以相等的面积出现时，色彩的冲突达到最高峰，对比效果最为突出，如将一方面积减小力量削弱，整体色彩对比效果也就相应减弱。

色彩的力量取决于色彩的明度和面积，明度比例如下：黄:橙:红:紫:蓝:绿=9:8:6:3:4:6

由上述比例可推导出各对补色的明度比例关系，并进一步确定各补色之间达到色彩力量平衡的面积比例关系：黄:紫=1:3 橙:蓝=1:2 红:绿=1:1

色彩面积比例关系依据的原理是人视觉生理需求的色量平衡，即调和出视觉乐于接受的中性灰色所需要的色量比例。该平衡理论可以通过色盘的旋转混合的方法得以验证。

从上面的理论看，红绿配色面积比1:1时为和谐，但实际应用中红绿面积相等时会给人以刺激强烈的感受，并不能真正体现出色彩的调和统一，这是由于色彩的纯度在配色中起到相当重要的作用，红色的纯度大约为绿色的两倍，因此在配色时红的面积应缩小至绿色面积的二分之一，这样才能获得调和的色彩效果。

色彩的秩序调和主要依靠色立体来实现，孟赛尔色立体和奥斯特瓦德色立体都是可应用的色彩模型。在色立体中做规则几何线形，线形所经过的色彩就会形成有序的排列。

色彩的轻重感主要取决于色彩的明度，明度高的色感觉轻，明度低的色感觉重，在相等明度条件下，冷色一般比暖色感觉略轻。色彩构图中上轻下重符合人的视觉习惯，轻色通常用于上部，重色用于下部，如果界面上部为重色时，在下部的边缘部位应呼应一块重色范围，可以达到平衡构图的目的。