第 4 章 网页趣味性研究在设计中的具体体现
4.1 网页版式
网页整体的视觉呈现是有无数的视觉符号构建而来。根据数据调查，感官正常的人 80%以上外部世界信息的感知都是通过视觉来获得。目前网站索要传递信息的大部分手段也是通过视觉语言符号的形式传递给用户，即使现在的多媒体所提供的表现形式更加多元化，也无法撼动网页的地位。
视觉语言和符号的多样性也直接影响到页面呈现的多样性和多元化。但无论这些视觉语言或是符号如何变化，不变的是由这些视觉语言组合出的页面版式布局设计，起作用仍是为了传递网站所要表述的主题思想。文中曾提及了网页设计隶属于视觉传达的领域，所以视觉传达领域的版式设计的一些方式和方法依旧可以应用网页设计之中。换而言之，即使在复杂的页面构成也离不开最简单的点、线、面的整体构成。这三个基本因素作为最基本的视觉信息构成了整个网站的页面，并通过其表述形式影响用户接收信息、加工信息、以及各种接收信息后的心理反应。学习构成时可知，在平面构成里，点、线、面是视觉构成的最基本的视觉元素。
以点为首。点给人的印象比较活泼，聚集起来的时候有集中、醒目的作用；分散时又不存在着不确定性。因此，点元素多样化表达在整个布局中有着不可替代的地位。点的有秩序和无秩序之分，其实来源于具体的对比而言。点可以在设计形式上表示视觉位置，但在具体的视觉空间里，点不但有了方向也有了属性。
它不光是一种视觉点缀，也是一种视觉导向。但无论点存在着多少种表现方式，但在使用上一定要遵循一定的形式法则。尤其在网页端，要尤为注重点元素在细节部分的表达，不明晰的使用点元素可能会导致页面信息更为紊乱，反而起到适得其反的效果。点元素表达上的多样性，允许设计师通过点元素来控制网页的节奏感和韵律感，还可以通过其所表现出的连续性和方向性等特点来表现网站所传递出的页面逻辑和层级关系。网页设计师通过将具体所要传递的信息，通过点元素的布局，使点元素富有一定的主次和秩序，在保证页面活泼度的同时，将相应的信息表达出去。
点元素的应用在相关的游戏页面中有着非常普遍的体现。例如如图 4.1 的一款游戏页面中。由于游戏网页存在着许多的功能需求入口，所以设计师往往在这样的页面布局采用如图所示的点阵式排列进行页面构成。既能满足网站本来的页面所要传递的本来需求，也可以配合页面本身增强游戏页面本身的表现力和趣味感。
不仅如此，点在页面中的构成还可以构成引导视觉页视觉，凸显页面逻辑的作用，如图 4.2在图 4.3 所呈现的网页中，通过点画元素大小的对比，可以清晰明辨出页面提示奖品的主次关系。在图例所示的网页中，点元素的作用性都有着非常明显的体现。从这些分析中可以得知，点元素的合理使用可以为页面带来许多意想不到的效果。
其次，由点在空间位置上的移动产生线。由点构成的线是页面中最为常见的元素之一。线的形状不同所呈现的视觉体现和感受也不同。直线的页面构成比较刚硬、力度十足所体现出的正像是现代主义所宣扬的理性和稳定。因此，对于表现金属材质的高科技产品以及运动性极强的产品有着非常得天独厚的优势。如图4.4 所示。
相反，曲线所给人带来的是一种相对柔和的体验感。更有一种韵味和别致的优雅蕴含其中。在曲线的使用上，更贴近一些女性和幼儿方面的页面设计。曲线的柔和感更容易被这样一部分人群接受。如图 4.5 所示的女性化妆品产品，就在页面的布局中采用了大量的曲线元素。这样使得页面在整体的刚绝上更为柔和，具有女性化的柔美特点。除此之外，曲线有效的控制了页面的节奏，为页面增添了一定的韵律感。
由此我们可以看出合理的运用线的形式，甚至将整个版面中的图形元素和字体元素通过线性的方式串联起来可以清晰的表达页面逻辑和展现页面布局。同时利用线在空间上的表示位置以及方向性的特点，丰富页面的视觉呈现，利用线的串联可以分出信息的有限等级。使得用户在观看页面时可以有效的进行认知判断，所形成的记忆时间更为直接和准确。就直线本身来说，线性页面比较直接和有序性，容易被用户接受和理解。
最后，面是线的集合。它是点与线的合集。与点和面相比，面的范围更广。所显示的位置也比较大。面的元素由于所占空间较大，展示范围广所以更容易形成视觉化的区域，并且吸引用户的注意。除此之外，面具有鲜明的视觉特性和情感表达。面的形状多样，所能形成的页面形式也非常多样。矩形、圆形、多边形以及给予它们所产生的变形图形，都可以为页面增添许多不一样的表现因素，从而使的页面呈现富有情感。此外，页面可以通过一些有机或者无机的分割使得页面在呈现形式上更加灵活和随意，不被原本的面的形式所拘谨。
耐克（NIKE）官网的一款球鞋页面的呈现方式，页面通过矩形的分割，将页面分割称有秩序的板块，并通过各个板块所划分的比例不同，用以强调产品的中的主次关系。通过对用户认知需求的把握，对页面的板块做重新的，来展示该款鞋子的性能特点。
面的定向分割有时候也可以起到一种为页面增添层次感的视觉体验效果。如图 4.7.网页通过将页面的定向分割，利用不同颜色的方形和图片的搭配形式使得页面看上去更加的富有层次感，也通过一些留白使得用户在浏览过程里，体验到一种信息的有序性。
面在整个网页设计中位置举足轻重。整个页面也是面的一种表达方式。通过对于面的掌控，不仅可以掌握页面的设计大局，也可以有效的把控细节。
4.2 网页配色
色彩在网页中担当着不可获取的地位。可以说人的所有的视觉反应和刺激90%都是通过色彩来完成。视觉和大脑的共同作用，构成了人们对于色彩的感知觉。我们的眼睛通过对于色彩的接收，通过神经反应到脑中，并且引发大脑对于色彩的反应和情感。并因此引发一系列的联想反应。包括与色彩相关的人物，事件。色彩理论研究把其称作为色彩联想。色彩亮相并非凭空而生，它是通过整个认知过程中的反应，经由人的记忆，意识，经验等所共同作用而成。
因此善用色彩的各种联想性和倾向性，不仅可以帮助我们丰富页面的整体布局和陈列，也可以通过控制用户的认知过程，掌握一些认知过程中可以控制的因素，通过色彩将页面的主题和情感更好的表达出来。同时通过色彩控制和掌握浏览者的情绪，以色彩丰富人机交互的形式，也有利于网页更为人性化，趣味性的传播.网页设计中的色彩使用手法多样但是依旧有规律可循。最为根本的无异于色彩构成的最基本的三个要素：明度、色相、饱和度。针对这三个基本的要素，所构成的网页和表达的情感也是截然不同的。
从明度而言，色彩的明亮程度最直观的就可以体现出网站的特性。如图所示一个名叫 bloom 的国外花卉查询网站，这整个页面的构成上，页面采用偏无色系的颜色作为背景，使得整个页面给人的印象颇为清新淡雅。同时作为最为重要的主题呈现，花卉的颜色却又鲜艳明亮，让用户可以一眼辨识到主题。
其次，不同的色相可以构成不同的页面呈现和情绪效果。诸如我们已经对色彩的了解，红色将造成本能的生理反应，如增加心跳以及呼吸速度，因此当人们遇到红色时会诱发紧张、刺激、兴奋等情绪。所以在构成页面时，红色常用于表达节日气氛，已以及某些大型的活动场景。配合着暖色系本身的色系，可以作为一些食物网站的主题色彩。如图 4.9 所示，两款页面虽然表现的食物内容不同，但是两款网站却同时采用了红色作为网站的主题色调。红色所营造出的辛辣感和食欲不言而喻。无论是来自西方的快餐，还是东方的面食，都给人一种强烈的感官刺激。用户从简单的色相上，就可以判断出页面的表述内容，以及联想到相关产品。从这点上说，这些色彩选择和使用无疑是成功的。
最后，关于色彩的饱和度上，设计师应该有一定的把控程度。不同的颜色的组合越多，会使得页面的整体色彩的纯度越低。如图所示的一款国外有关网页安全的页面设计。在页面选用了多种色彩来搭建页面色调。并选用相应中性的紫色作为背景色，所以在颜色的搭配上网页选择将其他组合颜色的饱和度降低，反而使得页面有一种老旧的复古色彩。如此页面的整体呈现上就不至于过于鲜艳而无法区分主次。对于对比色橙色的降调使用也使得页面的整体呈现效果不过分的艳俗，但也不至于过分的沉闷和单调。
此外在色彩的使用上还应该注意不同语境意义下的影响。诚如诺曼在反思层次中提到的，不同的国家，不同文化背景下所要表达的含义和语境是不同的。对于如今更为依赖色彩来刺激和丰富感官的互联网时代，更应该注重对于色彩对于页面的整体影响以及使用规范。
