%D%A%A《优秀网页设计速查与赏析》摘录%A%A%A一个不懂得欣赏优秀网页作品的设计师可能永远都无法懂得鉴戒的真谛；一个无法将优秀作品的精华融进到现有需求中的设计师可能永远都无法找到真正的灵感。%A%A即便是那些看似独创的设计，其灵感也往往来自设计师在长期鉴戒过程中的不断积累%A%A设计源于灵感，灵感源于鉴戒――这是每个网页设计师都应该牢记的“成功法则”。%A%A%A下面这些网页设计指南摘自《优秀网页设计速查与赏析》一书。%A%A%A用“原型法”细化网站设计需求%A%A%A每个网页设计师都有过被含混、多变的客户需求折磨得痛苦不堪的经历。在需求分析阶段，使用“原型法”可能是细化并确认需求的最好方式。%A%A%A当客户根本不清楚自己的需求是什么的时候，网页设计师不妨根据同类网站的构思和实现方式，用最便捷的工具（比如Dreamweaver）在最短的时间内搭出一个可以浏览、跳转但不一定支持所有功能的网站原型，然后与客户一起体验并评估这个网站原型的架构、流程、布局、配色、文字等不同层面――这样的评估结束后，客户心中隐躲许久的那份“设计需求”也许就已经浮出水面了。%A%A网页链接的深度、广度和泛耦合程度%A%A%A超级链接是网页设计中最重要的信息组织方式，也是整个Web世界的精华所在。但糟糕的链接设计――比如过于泛滥和随意的超级链接――很可能会让冲浪者迷失在充斥着信息碎片的海洋里。%A%A%A假如将网站首页视为链接层次中的第一级，那么，由首页中的超级链接得到的，在信息内容上具有从属关系的站内页面就是网页链接层次中的第二级；从每个第二级页面又可以继续得出第三级网页；依此类推，我们多半可以得到一个完整的树形链接结构。在这个树形链接结构中，整棵树的层数可以被称为（站内）网页链接的深度，页面最多的一层中包含的页面总数可以被称为（站内）网页链接的广度。一般说来，一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网站不利于冲浪者快速获取相关信息，广度过大的网站则轻易让冲浪者在无数并列的超级链接眼前不知所措。%A%A%A当网页中的某个链接既没有指向下一级网页，也没有指向上一级网页时，它必然构成了由当前页面向跨层级网页或站外URL的“跳转”，这种跳转的出现频率可以被称为网页链接的泛耦合程度。泛耦合程度过低的网站无法有效发挥Web冲浪的价值，由此得到的网站过于死板；另一方面，泛耦合程度较高的网站又有可能造成信息内容的支离破碎，影响冲浪者的正常阅读。因此，网页链接的泛耦合程度应该与网站的设计需求相适应――儿童或动漫类的网站应鼓励那些代表跳跃式思维的泛耦合链接，而一个学术类的网站则应该对泛耦合链接持相对谨慎的态度。%A%A导航栏的同一和变化%A%A%A几乎每个网页都有导航栏。对同一个网站内的所有网页来说，导航栏必须在设计风格上力求同一。否则，冲浪者就需要分别适应每个页面的导航界面风格，这不但会浪费不少时间，也会严重影响整个网站的使用美感。%A%A但这里所说的同一并不是要求我们为每个网页设计出一模一样的导航栏。完全相同的导航栏会让冲浪者在浏览过程中由疲惫而麻痹、由麻痹而丧失对网站的浏览爱好。也就是说，我们应该在同一的整体风格下，在每一个或每一组网页的导航栏中寻求细节上的变化。%A%A%A比方说，我们可以在确保所有导航栏外形、布局、字体一致性的基础上，变换不同导航栏的背景颜色；或者，我们可以在同一了色彩、外形、字体的情况下，变换不同导航栏的相对位置；再或者，我们还可以变换不同页面中导航栏的背景图片――当然，所有背景图片应当从属于某种同一的风格――同时保持其他设计元素不变。%A%A%A“在同一的基础上寻求变化”――除了导航栏以外，网页设计师在处理同一页面或同一网站内的其他设计题目时，这句话也同样有效。%A%A网页基本布局%A%A%A要寻找网页布局方面的灵感并不难。我建议大家没事儿时多做些折纸练习：随手拿起一张A4复印纸，然后根据自己的心情好坏，或平行、或斜向、或选择任意角度将纸片折叠几次，再把纸平摊在眼前，纸上呈现出来的折痕没准儿就是一种相当不错的网页布局呢！%A%A%A当然，网页设计师还是要尽量熟悉那些典型网页的基本布局方式，以根据客户的需要选择使用。比如，门户类网页为了尽可能多地展现信息内容，通常都会设计成三栏甚至四栏的纵向布局；公司首页为了展现强大的企业实力，往往会选择“视野”更宽广的横向布局；个人主页为了展示网站主人的个性，其网页布局方式也会千差万别，像轴向布局、网格布局、斜角布局、放射布局、多中心布局、离散布局、对比布局等等都是常见的个人主页布局方式。%A网页空间中的视觉导向%A%A%A每个网页都是一个神奇的视觉空间。像我们熟悉的四维时空一样，网页空间也有深度、广度和时间流逝的感觉，甚至还会在设计元素引发的“力”的作用下产生运动或扭曲。%A%A%A每当我们打开一个新的网页后，我们的视线首先会聚焦在网页中最引人留意的那一点上――我们通常称其为视觉焦点。随后，我们的思路会受到视觉焦点周边设计元素的外形和分布方式的影响，并在不知不觉中把视线转移到另一个值得停留的地方（例如，一段醒目的线条，一种色彩到其近似色的渐变，它们都会让我们的视线按照设计师预先安排的轨迹移动）。如此继续下往，视线经过的所有关注点可以连接成一条完整的视觉路径。%A%A%A使用视觉路径引导冲浪者按某种内在的逻辑顺序浏览网页信息的过程可以被称为网页空间中的视觉导向。是否能自发、自觉地使用视觉导向的设计方法并根据视觉路径的走向排列关键信息，这是区别专业网页设计师和业余网页设计师的一个重要依据。%A%A网页空间的秩序及运动趋势%A%A%A网页空间的秩序是网页中所有视觉元素相互作用的结果。分析某个特定网页空间的秩序时，最好把视觉元素抽象为“点”、“线”、“面”三大类，然后分别考察每一类元素之间以及不同类型元素之间的相互作用。%A%A%A在设计师眼中，每一个视觉元素都可以被看成是“力”的源泉。不同视觉元素开释出来的“力”的方向和大小不同。一个向右倾斜的三角形可以同时开释出类似“重力”的垂直作用力和向右的水平作用力。视觉元素和视觉元素通过“力”相互作用，共同影响着整个网页的空间秩序。%A%A%A当网页空间中所有作用力处于平衡状态时，空间秩序最为稳定，整个网页看起来比较和谐、均衡；反之，当所有作用力可以在某个方向上形成协力时，空间秩序就会处于不稳定的状态，整个网页看起来则会布满动感和活力。%A%A网页中的留白%A%A%A网页中的留白就像情感小说中的心理描写或是动作电影中的抒怀段落一样，可以让网页的视觉效果更加自由、流畅。很遗憾，很多网页设计师都不懂得这个浅显的道理，他们或是在客户需求的压力下，或是在不良设计习惯的驱使下，将整个页面塞满了图片、文字、链接或是广告，以至于所有视觉元素都不得不在拥挤的空间内苟延残喘、痛苦挣扎。%A%A留白并不特指网页中的白色区域。事实上，网页中凡是没有远景元素干扰的视觉区域都可以被称为留白。横向通栏的留白可以让网页拥有一种水平的活动感；纵向的留白可以平衡文字、导航栏等视觉元素在水平方向的作用力；标题区域的大面积留白可以突出公司名称或网页标题信息；正文区域内的大面积留白既可以丰富页面布局的内涵，也可以缓解冲浪者在阅读时可能产生的视觉疲惫。%A%A文字信息的设计和编排%A%A%A编排网页上的文字信息时需要考虑字体、字号、字符间距和行间距、段落版式、段间距等很多要素。从美学观点看，既保证网页整体视觉效果的和谐、同一，又保证所有文字信息的醒目和易于识别，这是评价此类工作的最高标准。从技术方面来说，今天的网页设计师大多使用CSS样式来控制和编排文字信息，但在使用某种客户端未必安装的特殊字体时，设计师通常会将文字信息保存为图片或Flash对象，以确保所有设计元素在客户端浏览器中的正确展现。%A%A“对比”是另一个设计和编排文字信息时必须考虑的题目。不同的字体、不同的字号、不同的文字颜色、不同的字符间距在视觉效果上都可以形成强烈的对比。精心设计的文字对比可以为网页空间增添活力，而过于泛滥的对比因素也会让整个网页混乱不堪。%A%A图片和动画%A%A%A在网页中使用图片时，同样需要考虑美学和技术两方面的题目。首先，图片的色彩、外形、风格等一定要与网页的整体风格相适应，图片所要传达的理念或信息内容应当尽可能清楚、正确――这是美学方面的考量。其次，网页设计师必须知道二值、灰度、256色及真彩×××片之间的差异，懂得矢量图片和点阵图片各自的优缺点，并尽量优化图片的比特大小以减少网页的传输时间――这是技术方面的考量。只有在美学和技术两方面都让人满足的图片才有资格出现在网页的整体设计中。%A%A%A动画元素通常可以很自然地成为网页上最吸引人的视觉焦点，由于运动的东西总是比静止的东西更轻易捉住人们的眼球。也正是基于这样的原因，我们需要用更为慎重的态度来决定在何时或何地使用动画元素。我见过太多被动画元素搞“砸”的网页，那些网页的设计师无一例外地犯了滥用动画的错误。实在，要判定一个动画元素是否有存在的必要，大家可以使用下面这个简单的法则：假如某个动画元素只具有装饰网页的作用，而无法让信息的展示更清楚或更生动，那么，你应该尽不犹豫地删掉它。%A%A网页空间中的运动趋势线%A%A%A很多网页的视觉空间中都隐躲了一条富有活力的运动趋势线。当你观察某个页面时，假如你的直觉不断告诉你，页面中的某些设计元素（比如某些连接在一起的色块，某些相互影响的图片，特别是某些具有强烈暗示作用的线条）构成了一个隐约可见的、朝某个方向运动的元素集合，那么，你不妨直接用画笔勾出一条能够反映该元素集合运动趋势的线条，就像画家在做人体写生时通常要先画出一条反映人体运动趋势的线条一样――我们可以把这条线叫做网页空间中的运动趋势线。%A%A%A从运动趋势线的方向和外形出发，我们可以很轻易地找出每一个视觉元素与整体视觉空间的交互关系。一旦我们发现，某个视觉元素并没有为运动趋势线做出任何贡献，反而有可能阻碍运动趋势线的流畅延伸，那么，这个视觉元素多半就没有任何存在的必要。%A%A%A此外，在开始一个新的网页设计前，假如设计师能根据灵感的暗示，在纸上首先画出一条运动趋势线，然后根据运动趋势线的延伸规律设计所有视觉元素的外形、色彩和位置，如此得到的网页设计就更有可能表现出非同一般的视觉效果来。%A%A使用Web标准设计网页%A%A%A很多网页设计师只考虑网页的视觉效果，却从不关心网页的具体实现技术。结果，现在的Web世界里有太多太多足够漂亮但却不符合技术标准的网页，它们要么无法支持Firefox、Safari等非IE浏览器，要么不能在用户改变缺省字体大小时保持原貌。更可怕的是，这些不符合技术标准的网页内部多半是一堆充斥着TABLE、FONT标签的“意大利面条”，没有哪个浏览器会喜欢这些下载和显示效率都异常低下的代码，也没有哪个程序员会愿意维护这些毫无头绪可言的数字垃圾。%A%A%A目前被业界普遍认可的客户端网页技术标准是XHTML＋CSS＋JavaScript。但即便是使用了这些标准的技术，我们也不能保证自己的设计一定会符合最好的设计习惯。有关利用Web标准进行设计，以及培养良好设计习惯的题目，建议大家参考电子产业出版社2004年5月出版的《网站重构――应用Web标准进行设计》一书。%A%A另一方面，Web标准总是处于发展和更新之中。每个网页设计师都应该定期关注W3C网站上的相关内容（尽管W3C的网站在视觉效果上糟糕得一塌糊涂）。%A%AFlash和RIA技术%A%A%AFlash的大名四海皆知，似乎没有在这里刻意夸大的必要。有关Flash我只想说两点：其一，Flash动画是手段而不是目的，假如单纯为了炫耀而在网页中不加限制地使用Flash动画，以至于冲浪者一进网站就头晕眼花，那可就得不偿失了；其二，有很多网页动画效果既可以用CSS+JavaScript实现，也可以用Flash实现，二者各有利弊――网页设计师在选择时应多考虑效率、标准、易用性等与冲浪者关系最为密切的题目。%A%A除了纯客户真个Flash应用之外，网页设计师们也该对客户端与服务端结合的RIA（Rich%AInternet%AApplications）技术给予足够的关注。在Macromedia倡导的RIA架构中，网页设计师可以和程序员一起利用Macromedia%AFlex编写运行在Web服务器上、可以动态产生Flash应用的服务端代码。与以往那些输出HTML或XHTML的服务端代码相比，RIA可以让交互式的Web页面（比如购物类网页）像Flash动画一样动感、靓丽。%A%ABlog和Wiki的启示%A%A%ABlog和Wiki是这几年才流行开来的Web应用模式（千万不要告诉我你不知道Blog和Wiki是什么）。尽管今天大多数Blog和Wiki站点在设计方面都没有任何亮点可言，网页设计师还是应该花些时间研究一下Blog和Wiki的应用理念。%A%A%A我的意思是说，Blog和Wiki为网友们提供了两种全新的展示自我价值、实现“人”、“网”互动的平台。这两种全新的信息发布与传播模式实在也为新一代的网页设计提出了严重的挑战。例如，设计师该如何组织一个可能有多人参与、可能随时有信息变更的页面，才能保证该页面中每个视觉元素都完美、和谐？设计师该如何处理一个可以由用户自行定义的页面，才能保证该页面的设计风格总是与站点的整体风格协调一致？更进一步地说，在一个赋予用户最大自由的网页中，设计师的职责是增加了还是减少了？像Blog和Wiki这样的站点，它们一定无法在视觉效果上达到完美吗？%A%A选择最适合自己的软件工具%A%A%A每个网页设计师都有自己最得心应手的软件工具。在选择软件工具这个方面，人云亦云的盲从态度是最不可取的。%A%A我自己在设计网页时用得最多的工具实在是UltraEdit（Windows环境）和BBEdit（Mac OS%AX环境），但我尽不会因此而否定FrontPage或Dreamweaver在可视化领域的巨大上风；我最喜欢的图形图像工具是Photoshop、Painter与Illustrator的组合，但我从不以为使用Windows画板来描绘点阵图或使用PowerPoint来勾画矢量图就是水平低下的表现；在制作动画时，Flash对我而言只是一个最后的合成工具，此前还会有Illustrator、Swift%A3D等很多软件发挥它们各自的价值――大家一定猜不到，我还经常在微软的OneNote软件中绘制Flash动画的分镜头草稿呢；此外，懂得编程的网页设计师还可以在开发工具和脚本语言的帮助下，让设计过程更加轻松――不知道大家是否尝试过，用JavaScript或AppleScript来操控Photoshop，就可以根据某个数据库中预先存储的数据批量天生网站中的所有按钮图片，这可是一种十分舒服的使用体验啊！%A%A熟悉和使用色环%A%A%A色环就是将常用色彩按照某种规律排列成圆环之后的结果。千万不要以为色环只有一种。例如，以计算机显示器使用的红、绿、蓝三原色为基础，经两两混合得到间色，再进一步得到下一级间色，终极得到的12色、24色或更多颜色的色环通常被称为RGB色环或光源×××环；而从美术颜料中的红、黄、蓝三原色出发得到的色环也被称为美术色环；还有一些设计师会根据自己的需要，仅仅用某个色调区域的色彩组合成专用的色环。%A%A%A经常观察和分析色环中隐躲的色彩规律是网页设计师的必修课之一。在RGB色环中，我们可以很轻易找到那些最适于在显示器中表现的色彩。但RGB色环隐躲了较多热色系的细节，我们最好用美术色环来探索颜色与颜色之间的相互关系。%A%A%A在美术色环中，相距180°的两种颜色是反差最强烈的补色，间距在60°以内的色彩是关系最为协调的近似色，两两相距60°的三种颜色则可以构成一个视觉效果非常强烈的色彩组合……假如我们自己创建出了一个由不同深浅的蓝色组成的色环，那么，只要简单地将色环中心区域填充为某种色彩，就能很快找到与该颜色最为相配的蓝色了。%A色彩的心理效应%A%A%A每种色彩都会引起人们特定的心理感觉。我们常说的冷色和热色就是心理感觉的体现。一些设计师喜欢为自己熟悉的每种色彩配上两三个特定的形容词，比如为深紫色配上“忧郁－沉醉－哀婉”，然后根据这些形容词，将不同的色彩分门别类，以便在需要时选用。韩国I.R.I色彩研究所用类似的方法将标有形容词的常用色彩及色彩组合置于“生硬－柔和/动态－静态”的坐标系（印象空间）中，这样，设计师只要在坐标系中圈出与网站主题吻合的印象区域，就可以很轻易地找到自己需要的色彩组合了（参见电子产业出版社2002年9月出版的《Web%AColor Design――设计师谈网页配色》一书）。%A%A%A色彩的心理效应不是固定不变的。特定色彩在与其他不同色彩搭配时，往往会表现出不同的心理效应。比如，当我们把紫色放在蓝色和绿色中间时，紫色看起来是典型的热色，而当我们把同样的紫色放在红色和橙色之间时，它看起来就是典型的冷色了。再比如，单独看起来明亮、纯净的×××一旦被置于浅棕色的背景中，似乎一下子就变得模糊和晦涩了。%A%A不同的色彩模型%A%A%A在电脑中，网页设计师可以使用不同的色彩模型来表示特定的色彩。打开Photoshop软件的调色板，我们可以看到最常用的四种色彩模型――RGB、CMYK、HSB和Lab。%A%A%ARGB是设计师在网页中指定色彩的基本模型。作为一名网页设计师，我们应当对RGB色彩模型有足够的了解，至少，我们应能快速说出大多数典型色彩的RGB近似值，或是在看到某一组RGB值后马上知道那大致是一种什么样的色彩。%A%ACMYK是打印机等印刷设备使用的色彩模型。大多数网页设计师无须考虑CMYK模型。但在设计那些专用于打印的彩色网页时，我们就必须解决某种色彩转换到CMYK模型后可能存在的失真题目，由于很多明亮的RGB色彩都无法正确映射到CMYK空间。使用Photoshop提供的“Proof%AColors”功能可以看到色彩在打印输出时的实际效果――假如某种色彩失真较大，那么最好提前换掉它。%A%A%AHSB色彩模型可以反应出某种色彩的色调（Hue，也译作“色相”，但中文Windows和Mac OS%AX系统的调色板均使用“色调”的译法）、饱和度、亮度这三个基本属性。HSB模型最接近人们对色彩的感知方式，因此，在选择特定色彩或色彩组合的时候，我们可以先从HSB模型出发定位色彩，然后再将其转换为网页中使用的RGB值。%A%ALab模型是一种非常出色的技术模型，非常适于精确地表达、存储、压缩或转换色彩信息。尽管也可以用较直观的方式理解Lab模型，但目前使用Lab模型寻找或定位特定色彩的设计师还寥寥无几。%A%A色调变化%A%A在色调（Hue，也译作“色相”）的基础上寻求变化是最常用的色彩搭配方式之一。%A%A%A从RGB色环或美术色环出发，我们可以很轻易地找到相距180°左右的补色组合以及相距60°以内的近似色组合。使用补色可以在网页中制造出强烈的视觉对比效果，这适于表达那些鲜明、突出的主题；使用近似色则可以让网页的整体视觉效果更加和谐，这适于表现那些蕴藉、内敛的主题。%A%A%A还有一种值得留意的色调组合方式：选出一种特定色彩后，在色环上找到其补色所在的位置，然后从补色两边同时选出两种或多种补色的近似色，并将它们与原色彩搭配起来。这样的色彩组合一方面包含视觉上的对比因素，另一方面也包含同一、和谐的效果。假如变换每种色彩在网页上的分布位置和分布面积，还可以得到很多意想不到的结果。%A%A饱和度变化%A%A%A饱和度是反应色彩纯净或灰浊程度的指标。将饱和度相近的色彩搭配在一起，可以在同一的视觉效果中引进节奏上的变化；将饱和度差异较大的色彩搭配在一起，可以让饱和度高的色彩更加突出，也可以让网页中的视觉冲突更加明显。%A%A饱和度为0时，色彩就变成了白色、灰色或玄色。因此，有些设计师也把特定色彩与白色、灰色、玄色的搭配回进到饱和度对比的范畴中。从这个意义上说，白色、灰色、玄色等中性色在突出其他色彩的“彩色属性”方面有着非常重要的价值。%A%A亮度变化%A%A%A保持色调和饱和度一定的情况下，单纯改变某种色彩的亮度，也可以得到很多漂亮的色彩组合。%A%A%A在很多现代企业的网页中，亮度不同的蓝色既可以让整个网页保持同一的商务风格，也可以让不同的网页区域形成一定的对比和变化关系。有时候，远景信息和背景信息分别使用亮度不同的色彩（比如暗绿色背景上的浅绿色文字）也会收到奇效――这些网页看上往似乎沉醉在某种独特而强烈的感情色彩中；同时，远景颜色和背景颜色既保持了一定的相似性，又存在较明显的对比关系，不会妨碍我们阅读文字信息。%A%AWeb安全色和其他调色板%A%A选择颜色时，可以直接利用一些现成的调色版。%A%A%A网页设计师比较熟悉的216种网页安全颜色在前几年一度成了配色领域里的首选调色板。据说这216种安全颜色在所有操纵系统和所有显示设备上的显示效果都完全一致――这种说法当然不够正确，这216种色彩只是相对而言不那么轻易受到设备影响罢了。今天，在尽大多数显卡和显示器都已经使用24位真彩色的情况下，216种安全颜色的重要程度已经大不如前。但是，假如设计师希看网页能在PC以外的设备（如PDA和手机）上保持足够出色的显示品质，我们还是应该坚持从这216种颜色组成的调色板中寻找配色方案。%A%A%A在Photoshop或Illustrator软件的“Swatches”窗格中，我们还可以载进很多经典的调色板。比如，PANTONE系列的调色板就非常受设计师们的欢迎。直接从这些经典的调色板中选取颜色可以省往寻找或尝试色彩组合时的很多麻烦。%A%A使用配色工具%A%A%A网页设计师应善于利用软件工具帮助自己选择色彩和色彩组合。比如，我自己就经常在Illustrator中用矩形拼凑出基本的网页布局，然后不断改变每个矩形的填充色，以寻找最佳的配色方案。%A%A%A有一些非常专业的配色软件可以帮我们解决很多题目，比如ColorImpact软件可以让我们在RGB色环或美术色环中自由选取特定的色彩，可以根据我们选择的主色调和配色思路（比如以补色为主或以近似色为主）自动给出示例网页的显示效果，还可以让我们在屏幕范围内自由点选颜色并完成RGB、HSB等色彩模型间的转换。另一种名为ColorWheel%APro的小软件在网页配色模拟方面的功能比ColorImpact还要强大一些。%A%A网页设计中的人机界面题目%A%A%A很多网页设计师只注重布局、文字、色彩等基本设计要素，而从不考虑自己设计的网页是否能给用户带来最舒适的使用体验。结果，有很多看上往绚丽无比的页面使用起来却极为繁琐：为了填写一个简单的表格，用户可能要用鼠标点上好几十次；为了通过一个最基本的身份认证，用户可能要在两三个页面之间跳来跳往；为了进进最有价值的下载页面，用户可能要坐等屏幕上的Flash短片叽叽喳喳地唱上好几分钟……%A%A这些题目实在都与人机界面的设计相关。%A%A%A人机界面设计是一门相当深奥的学问。限于篇幅，我在这里不可能展开讨论视觉隐喻、最短交互路径、信息传递效率、典型操纵模式等细节题目。我只是想提醒大家，一名合格的网页设计师同时也应该是一名合格的人机界面设计师，由于无论从哪个意义上来说，Web页面都是一种最典型也最流行的人机交互平台，而网页设计在本质上就是一种以Web为载体的人机界面设计。%A%A%A