第05章 网页版式设计

5.2 网页版式设计的视觉因素
为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从 而影响人们的思想和行为，我们必须按照人的视觉生理和心理特征，去设 计我们的网页版式，以达到最佳的设计诉求。我们先来看一下人的视线移 动规律： 人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。 视线的变化习惯于从左到右，从上到下和顺时针方向运动。 当视线沿既不水平，也不垂直的斜线方向移动时，在水平方向上下约45o 的范围视线为从左到右移动，在垂直方向左右约45o的范围内，视线为从上 到下移动。
5.1.4 对比与调和
调和是指适合、舒适、安 定、统一，最近似性的强调， 使两者或两者以上的要素相互 具有共性。对比与调和是相辅 相成的。一般来讲对比强调差 异，而调和强调统一，适当减 弱形、线、色等图案要素间的 差距，如同类色配合与邻近色 配合具有和谐宁静的效果，给 人以协调感。在版面构成中， 优秀的页面常表现为既对比又 调和。一般整体版面宜调和， 局部版面宜对比。
5.2.4 合理视觉流程
1.方向关系视觉流程
方向关系的视觉流程强调 逻辑，注重版面的清晰脉络， 似乎有一条线，一股气贯穿期 间，使整个版面的运动趋势有 “主旋律”，细节与主体和谐 自然。 （1）单向 竖向视觉流程：具有直观、 坚定、沉稳的感觉。 横向视觉流程：具有令人恬 静、稳定、安详的感觉。 斜向视觉流程：具有不稳定、 活泼感、能引起人的注意力的 感觉。
5.2.3 注重主从关系
1．大小对比
主要诉求对象应扩大 它的面积，将其突出，并 使次要角色缩小到从属地 位，会使页面主题一目了 然。人们的视线首先注意 到大的形象，然后再看到 较小的形象，这种由大到 小的引导，使视线在页面 上流动，造成一种动势， 页面更为活跃，主角更为 突出，但仍保持页面的均 衡。
（2）曲线
曲线视觉流程是各构成 要素随弧线或扭曲线运动变 化形成的，曲线流程具有节 奏感、扩张感、饱满感、韵 律感和曲线美，较为含蓄、 微妙和复杂。常见的曲线形 式有“S”型、“C”型。
（3）回旋
4．重复
主体形象在页面中反复出 现，强化与视线的接触频率， 这种强化方式尤其适合于以产 品为主体形象的网页。产品以 不同的视角、不同的使用方式 重复出现，不仅被强调，而且 有助于全面展示它的造型与功 能。重复形象使网页整体更为 和谐、统一，同时打破了单一 形象给人的单调感。
5．斜线和曲线
网页的版面中水平 或垂直的形态居多，在 这种情况下，斜线和曲 线的视觉敏感度要高些， 如果主体形象运用适当 的斜线和曲线，就会从 水平、垂直线构成的环 境中突显出来，成为版 式中较为特异的部分。
5.2.1 符合视觉规律
1．文字横向编排
由于人眼的视线横向 移动比竖向移动快而且不 易疲劳，因此将文字尽量 横向排布，除非一些有特 殊设计要求的版式或书法 字体的版式。同时，页面 尽量保持横向尺寸固定， 竖向尺寸不固定，目的是 使人们能连续不间断地浏 览页面。需要注意的是， 应避免页面左右、上下都 能滚动，这会给浏览者带 来极大的不便。
5.1.6 变异与秩序
变异是规律的突破，是一种在整体 效果中的局部突变。这一突变之异，往 往就是整个版面最具动感、最引人关注 的焦点，也是其含义延伸或转折的始端。 变异的形式有规律的转移、规律的变异， 可依据大小、方向、形状的不同来构成 特异效果。强调变异的原理，是塑造版 面吸引力的要诀。 秩序是指页面中各视觉元素有组 织有规律的形式表现。秩序美是构成版 面的灵魂。构成秩序美的原理有对称、 均衡、比例、韵律、多样统一等。在秩 序美中溶入变异之构成，可使版面获得 一种活泼动情的效果。秩序产生的美感 具有简洁、直观地特点。
5.1.4 对比与调和
对比是将相异的视觉元素 作强弱对照编排所运用的形式 手法，是差异性的强调。对比 的因素存在于相同或相异的性 质之间。对比的最基本要素是 显示主从关系的效果。对比有 大小、明暗、黑白、强弱、粗 细、疏密、高低、远近、硬软、 直曲、浓淡、动静、锐钝、轻 重等几种形式。对比使人感受 到鲜明、强烈的效果。在网页 中，文字与文字、图形与图形、 实体与空白间处处都存在对比 关系。
5.2.2 避免视觉疲劳
1．限制网页长度 尽可能将网页限制在1屏以内，即满屏，浏览者不需要拖动滚动条就可以看到 下面的导航信息。页面不宜过长，一般控制在1—3屏，尽量不超过5屏。 2．文字大小适中、行距合理 在网页设计时应提供浏览者定制字体大小的功能。 3．位置的一致 减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的 麻烦。 4．适量安排多媒体元素 网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排 多媒体元素，并注意主次关系。 5．合理配色 如果将大篇幅极亮的文字设计在极暗的背景上，容易因视觉长时间过分紧张而 产生疲劳。因此应注意网页的配色，使其适合浏览者长期浏览。
5.1.7 虚实与留白
虚实：中国传统美学 中有“计白守黑”这一说 法。就是指编排的内容是 “黑”，也就是实体，虚 的地方、空白的地方是实 的“白”，也可为细弱的 文字、图形成色彩。这要 根据内容而定。
5.1.8 力场与结构
力场是一种在人们心 理的感应下虚拟的空间。 在版面的范围内，点状、 线状和块面状的分割和限 定，都显示其特定的力感 与力度。在其周围形成一 个具有充满空灵的、流动 的、有生命力的“场”。
5.1.3 对称与均衡
对称是指形态以某一点 为中心，其左右或者上下因 同等、同量、同形而形成的 平衡。对称是同等同量的平 衡。对称的形式有以中轴线 为轴心的左右对称；以水平 线为基准的上下对称和以对 称点为源的放射对称；还有 以对称面出发的反转形式。 其特点是稳定、庄严、整齐、 秩序、安宁、沉静。两个同 一形的并列与均齐，实际上 就是最简单的对称形式。相 对对称与均衡是比较常见的 版式。
5.1.2 节奏与韵律
韵律是在节奏中注入美的因素和 情感——个性化因素。韵律就好比音 乐中的旋律，不但有节奏更有情调， 它能增强版面的感染力，开阔艺术的 表现力。韵律是一种规律性的变化， 它是比节奏更高一级的律动，如音乐、 诗歌、舞蹈。在网页设计时，网页界 面中的图形图像、文字、色彩等视觉 要素，在组合上符合某种规律时，浏 览者在视觉和心理上便会产生韵律感。 版面的韵律建立在构成形象的点线、 字体或图形图像的组合等的关系之中， 运用比例、轻重、缓急、反复、渐变 等规律形式来体现。
统一是强调物质和形式中 种种因素的一致性方面，最能 使版面达到统一的方法是保持 版面的简洁。统一的手法可借 助均衡、调和、秩序等形式法 则。就网页设计而言，统一包 括版式的统一、字体的统一、 设计风格与均衡方式的统一以 及明暗色调的统一等。网页界 面中内容的主次与轻重，结构 的虚实、繁简、形体的大小、 形体视觉效果的强弱，色彩的 明暗、冷暖，各种关系的变化 统一，形成动静相宜、多样统 一的美感效果。
2．重要信息置于“最佳视觉区域”
在进行网页版式设计时，要考虑将最重要的信息或视觉流程的停留上安排在 注目价值高的位置，这就是“最佳视觉区域”。由于人们习惯于将视线从左到右、 从上到下移动，因而视区中的不同位置注目程度不同。 版面中的不同区域会产生不同的注目程度，给人的心理感受也不同。它们给 人的心理感受也是不同的；上部有轻快、上升、积极、愉悦之感；下部有沉重、 稳定、压抑、消沉之感；左侧感觉轻松、舒展、自由、主动；右侧感觉庄重、局 限、拘谨、被动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程 的停留点安排在页面的“最佳视域”内。
5.1.8 力场与结构
一个平面有四条边、四个角， 人的视线顺其周边运动，会在 角上停留片刻，然后继续顺周 边运行，并自然的感受到中心 点，这就形成了一个潜在的结 构图，当我们将一个点放在水 平中轴和垂直中轴以及其它结 构线上时，会给人稳定、舒服 的感觉，当点被放在偏离结构 线的位置，则会产生新颖、别 致的效果，从这点引出水平线 和垂直线，与周边相交后形成 的四个长方形，它们之间的形 状、面积差异越大，版面越生 动，反之则呆板。
5.1.5 比例与适度
比例是形的整体与部分、部分与部分 之间数量的一种比率关系。比例又是一种 用几何语言和数比词汇表现现代生活和现 代科学技术的抽象艺术形式。成功的版面 构成，首先取决于良好的比例。比例常常 表现出一定的数例、黄金比等。黄金比能 求得最大限度的和谐，使版面被分割的不 同部分产生相互联系。 适度是版面的整体与局部、与人的生 理或习性的某些特定标准之间的大小关系， 也就是版面构成要从视觉上适合读者的视 觉心理。比例关系、对比关系、统一关系 等，通常具有秩序、明朗的特性，予人一 种清新、自然的新感觉。
5.1.9 变化与统一
变化与统一是形式 美的总法则，是对立统 一规律在版面构成上的 应用。两者完美结合， 是版面构成最根本的要 求，也是艺术表现力的 因素之一。变化是一种 智慧、想象的表现，是 强调种种因素中的差异 性方面，造成视觉上的 跳跃。变化主要借助对 比的形式法则。
5.1.9 变化与统一
5.1.2 节奏与韵律
节奏是按照一定的条理、秩 序、重复连续地排列，形成一种 律动的形式。它有等距离的连续， 也有渐变、大小、长短、明暗、 形状、高低等的排列构成。节奏 在网页设计中所产生的美感是其 他形式所无法表现的。形状、线 条、色调、质感、文字元素的重 复出现，在任何构图中都可以用 来构成强烈的节奏。我们可以将 这些元素进行适度地反复、移位、 重叠等, 产生所需要的节奏和美感。
5.1.1 重复与交错
重复是相同或相似的形态连 续而有规律的反复出现。重复的 特点是以单纯的手法求得整体形 象的秩序和统一，具有节奏美， 使人产生清晰、连续、平和、安 定、无限之感。在版面构成中， 不断重复使用相同的基本形或线， 它们的形状、大小、方向都是相 同的，重复可分为单纯重复和变 化重复两种形式。 为了避免重复构成后的视觉 感受有时容易显得呆板、平淡、 缺乏趣味性的变化。故此我们在 版面中可安排一些交错与重叠， 打破版面呆板、平淡的格局。