网页设计 视觉流程及版式类型

视觉流程及版式类型(一)
2006-08-0708:52:53
大中小
在视觉心理学家的研究中，视觉运动规律是其成果之一。

一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。

视觉流程，是视线在观赏物上的移动过程，是二维或三维空间中的运动。

这种视觉的流动线极为重要，同时又是很容易被网页设计者忽视的因素。

经验丰富的设计者都对此非常重视，他们善于运用这条贯穿页面的主线，设计易于浏览的页面。

从某个角度讲，视觉流程的设计结果就是版式。

本章也将对网页设计的版式设计进行总结和阐述。

1.视觉流程的筹划
视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。

视觉流程的筹划包括几个重要的因素，下面就对它们作具体的归纳与分析。

页面中不同的视域，注目程度不同，给人心理上的感受也不同。

一般而言，上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。

网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。

图1 页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner
图 2 作为个性化的视觉元素，拼贴剪纸式的文字分别占据了三个点，吸引视线在它们之间流动
人们阅读材料时习惯按照从左到右，从上到下的顺序进行。

浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。

根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。

重要的信息应该让浏览者最容易发现，而不是深藏在多层链接之后。

图3浏览者的眼睛首先看到的是页面的左上角
视觉流程及版式类型(二)
2006-08-0907:32:30
大中小
2 视觉流程类型
视觉流程主要包括以下几种类型：线型视觉流程、曲线视觉流程、焦点视觉流程、反复视觉流程、导向视觉流程、散点视觉流程等。

2.1线型视觉流程
线型视觉流程，分为直线视觉流程和曲线视觉流程两类。

图4 视觉流程明确，形成清晰易读的页面设计
图5 自由的视觉流程形成生动活泼的页面设计
1、直线视觉流程
使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。

直线视觉流程表现为三种形式：
竖向视觉流程：给人坚定、直观的感觉。

图6 明确、简洁的竖向视觉流程横向视觉流程：有稳定、恬静之感。

图7 横向的视觉流程，向人们传达出稳重、可信的视觉语言
图8 横向的视觉流程，使页面稳重直观斜向视觉流程：以不稳定的动势引起注意。

图9 斜向视觉流程，使页面产生动感
视觉流程及版式类型(三)
2006-08-1008:08:40
大中小
2.2 曲线视觉流程
曲线视觉流程，是由视觉要素随弧线或回旋线运动而形成的。

它不如直线视觉流程直接简明，但更具流畅的美感。

曲线视觉流程的形式微妙而复杂，可概括为两种形式：
弧线形（C形）视觉流程：有扩张感和方向感。

图10 弧线形视觉流程，使页面具有很强的扩张性
回旋形（S形）视觉流程：两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感。

图11 回旋形视觉流程，使页面产生更多层次，空间感增强
视觉流程及版式类型(四)
2006-08-1107:57:03
大中小
2.3 焦点视觉流程
焦点，是指视觉心理的焦点。

每个页面中都有一个视觉焦点，这是需要重点处理的对象。

焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点”着力描写有关。

在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。

在具体的处理上，一般沿着视觉焦点的倾向与力度，来发展视线的进程。

通常以鲜明的形象或文字占据页面某个位置，或完全充斥整版，集合浏览者的视线，完成视觉心理上的焦点建造。

另外，向心、离心的视觉运动，也是焦点视觉流程的运用形式。

按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。

图12 运用图片大小的对比引起视觉的流动将文案作整体编排，突出主题形象。

图13 对主题图片的遮挡，引发浏览者一探究竟的兴趣在主题形象四周增加空白量，使之成为视觉焦点。

图14 留白使页面简约大方，更加突出了主题
图15 通过在主体产品周围留白吸引视线
图16 这是一个典型的运用焦点视觉流程的例子
图17 页面中的方形图无疑首先吸引了浏览者的视线
图18 具有独特个性风格的首页设计,视觉流程清晰
视觉流程及版式类型(五)
2006-08-1208:46:34
大中小
2.4 反复视觉流程
反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。

其产生的视觉效果更富于韵律美和秩序美。

图19 规则排列的小图片具有秩序美
图20 反复出现的枝叶形象具有韵律美
视觉流程及版式类型(六)
2006-08-1309:21:06
大中小
2.5 导向视觉流程
导向视觉流程，是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。

导向视觉流程的应用也很多见，可以使网页重点突出、条理清晰，发挥最大的信息传达功能。

视觉导向元素有多种，有虚有实，表现多样。

1. 文字导向
“请按这里”、“点击进入”等文字，是通过语义的表达产生理念上的导向作用。

另外，也可以对文字进行图形化处理，对浏览者产生自觉的视觉导向作用。

图21 “Enter the site”即为文字导向
2. 手势导向
手势导向比文字导向更容易理解，且更具有一种亲和力。

图22 用卡通人物作手势导向
3. 形象导向
同手势导向一样容易理解，较常采用的形象为箭头。

图23 形象导向，简洁明确
4. 视线导向
一组人物、动物面向同一方向，会因共同的视线而一致起来。

不同的物品方向一致，也可以产生统一感。

如果将页面中人物的视线对着物品，就会引导浏览者的视线集中到物品上。

充分利用视线导向，可以使视觉元素之间的联系加强，结构更加紧凑。

图24 页面中的图像将视线引向画面以外
图25 页面中的人物全部面向浏览者，使浏览者产生受人注目的感觉，增强了网站的亲和力和认同感
图26 运用视线导向
视觉流程及版式类型(七)
2006-08-1410:07:25
大中小
2.6 散点视觉流程
散点视觉流程，是指在分散处理视觉元素的编排方式。

它强调感性、自由性、随机性、偶合性。

其视觉流程为：视线随各视觉元素作或上或下、或左或右的自由移动。

这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节奏的感受。

图27 自由的视觉元素组合成明确的主题
图28 运用散点和曲线所形成的柔和的视觉主题
视觉流程及版式类型(八)
2006-08-1508:37:17
大中小
3 版式的基本类型
网页版式的基本类型有多种，主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。

3.1 骨骼型
网页中的骨骼型版式是一种规范的、理性的设计形式，类似于报刊的版式。

常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。

一般以竖向分栏为多。

这种版式给人以和谐、理性的美。

几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。

图29 三栏式中间一栏突出，页面层次分明。

页面最上方为一横向通栏。

图30 以竖式结构为主，横式为辅。

使页面条理明确。

图31 多栏的分隔方式，图像及导航分别占据了一个竖栏
图32 常见的分栏版式，页首通栏，下面又分为两栏。

图33 内容部分又分为四栏
图34 左右分栏
图35 综合运用多种分栏形式
视觉流程及版式类型(九)
2006-08-1608:35:40
大中小
3.2 满版型
页面以图像充满整版。

主要以图像为诉求点，将少量文字压置于图像之上。

视觉传达效果直观而强烈。

满版型给人以舒展、大方的感觉。

美中不足的是，限于当前网络宽带对大幅图像的传输速度较慢，这种版式多见于强调艺术性或个性的网页设计中。

图36 大面积的图片配以文字，视觉效果强烈
图37 大面积的图形，使页面的视觉张力很强。

主题形象似乎要跃出页面
图38 满版的图片使页面丰富多变
图39 四边出血，向外扩张，适合年轻人的口味
图40 运用具有内敛性的图片，最终使视线停留在文字上
图41 满版的出血大图，给人以强烈的视觉冲击
图42 满版的页面，运用放射性图形突出主题
视觉流程及版式类型(十)
2006-08-1708:47:44
大中小
3.3 分割型
分割型版式设计，是把整个页面分成上下或左右两部分，分别安排图片和文案。

两个部分形成明显的对比：有图片的部分感性而具活力，文案部分则理性而平静。

设计实践中，可以通过调整图片和文案所占的面积，来调节对比的强弱。

如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则易造成视觉的不平衡，显得生硬、强烈。

倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

图43 页面的分隔让画面产生更多的层次。

图44 文字与图形分隔了画面，使页面对立而统一
图45 色块把页面分隔得自然和谐
图46 首先以图片吸引浏览者的注意力，然后将视线引向文字
图47 文字在页面中占据了较小的面积，但由于分割线的运用，使文字同样得到强调
图48 常见的左右分割版式
图49 页面右侧使用斜线分割，打破了呆板的感觉
图50 上半边的大图与文字形成对比，图片的空间得到延展，形象得到强调，可增加浏览者的兴趣
图51 左右分割型版式
视觉流程及版式类型(十一)
2006-08-1808:14:14
大中小
3.4 中轴型
中轴性版式，是沿页面的中轴将图片或文字作水平或垂直方向的排列。

水平排列的页面，给人稳定、平静、含蓄的感觉。

垂直排列的页面，给人以舒畅的感觉。

图52 水平的中轴线营造了静谧的空间
图53 左重右轻，以打破中轴线的平衡。