|
在视觉心理学家的研究中，视觉运动规律是其成果之一。一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。 视觉流程，是视线在观赏物上的移动过程，是二维或三维空间中的运动。这种视觉的流动线极为重要，同时又是很容易被网页设计者忽视的因素。经验丰富的设计者都对此非常重视，他们善于运用这条贯穿页面的主线，设计易于浏览的页面。从某个角度讲，视觉流程的设计结果就是版式。本章也将对网页设计的版式设计进行总结和阐述。 1.视觉流程的筹划 视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。视觉流程的筹划包括几个重要的因素，下面就对它们作具体的归纳与分析。 页面中不同的视域，注目程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。 图1 页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner 图2 作为个性化的视觉元素，拼贴剪纸式的文字分别占据了三个点，吸引视线在它们之间流动 人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。 重要的信息应该让浏览者最容易发现，而不是深藏在多层链接之后。 图3 浏览者的眼睛首先看到的是页面的左上角 | 2 视觉流程类型
视觉流程主要包括以下几种类型：线型视觉流程、曲线视觉流程、焦点视觉流程、反复视觉流程、导向视觉流程、散点视觉流程等。
2.1线型视觉流程
线型视觉流程，分为直线视觉流程和曲线视觉流程两类。 图4 视觉流程明确，形成清晰易读的页面设计 图5 自由的视觉流程形成生动活泼的页面设计 页面设计是什么1、直线视觉流程
使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。直线视觉流程表现为三种形式：
竖向视觉流程：给人坚定、直观的感觉。 图6 明确、简洁的竖向视觉流程 横向视觉流程：有稳定、恬静之感。 图7 横向的视觉流程，向人们传达出稳重、可信的视觉语言 图8 横向的视觉流程，使页面稳重直观 斜向视觉流程：以不稳定的动势引起注意。 图9 斜向视觉流程，使页面产生动感 | 2.2 曲线视觉流程
曲线视觉流程，是由视觉要素随弧线或回旋线运动而形成的。它不如直线视觉流程直接简明，但更具流畅的美感。曲线视觉流程的形式微妙而复杂，可概括为两种形式：
弧线形（C形）视觉流程：有扩张感和方向感。 图10 弧线形视觉流程，使页面具有很强的扩张性 回旋形（S形）视觉流程：两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感。
图11 回旋形视觉流程，使页面产生更多层次，空间感增强
| |
| | 2.3 焦点视觉流程
焦点，是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。焦点是否突出，和页面版式编排、图文的位置、彩的运用有关，同时也与对“焦点”着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。
在具体的处理上，一般沿着视觉焦点的倾向与力度，来发展视线的进程。通常以鲜明的形象或文字占据页面某个位置，或完全充斥整版，集合浏览者的视线，完成视觉心理上的焦点建造。另外，向心、离心的视觉运动，也是焦点视觉流程的运用形式。
按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。 图12 运用图片大小的对比引起视觉的流动 将文案作整体编排，突出主题形象。 图13 对主题图片的遮挡，引发浏览者一探究竟的兴趣
在主题形象四周增加空白量，使之成为视觉焦点。
图14 留白使页面简约大方，更加突出了主题 图15 通过在主体产品周围留白吸引视线 图16 这是一个典型的运用焦点视觉流程的例子 图17 页面中的方形图无疑首先吸引了浏览者的视线 图18 具有独特个性风格的首页设计,视觉流程清晰 | 2.4 反复视觉流程
反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。
图19 规则排列的小图片具有秩序美 图20 反复出现的枝叶形象具有韵律美 | |
| | 2.5 导向视觉流程
导向视觉流程，是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。导向视觉流程的应用也很多见，可以使网页重点突出、条理清晰，发挥最大的信息传达功能。视觉导向元素有多种，有虚有实，表现多样。
1. 文字导向
“请按这里”、“点击进入”等文字，是通过语义的表达产生理念上的导向作用。另外，也可以对文字进行图形化处理，对浏览者产生自觉的视觉导向作用。 图21 “Enter the site”即为文字导向 2. 手势导向
手势导向比文字导向更容易理解，且更具有一种亲和力。 图22 用卡通人物作手势导向 3. 形象导向
同手势导向一样容易理解，较常采用的形象为箭头。 图23 形象导向，简洁明确 4. 视线导向
一组人物、动物面向同一方向，会因共同的视线而一致起来。不同的物品方向一致，也可以产生统一感。如果将页面中人物的视线对着物品，就会引导浏览者的视线集中到物品上。充分利用视线导向，可以使视觉元素之间的联系加强，结构更加紧凑。 图24 页面中的图像将视线引向画面以外 图25 页面中的人物全部面向浏览者，使浏览者产生受人注目的感觉，增强了网站的亲和力和认同感 图26 运用视线导向 | |
| | 2.6 散点视觉流程
散点视觉流程，是指在分散处理视觉元素的编排方式。它强调感性、自由性、随机性、偶合性。其视觉流程为：视线随各视觉元素作或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节奏的感受。 图27 自由的视觉元素组合成明确的主题 图28 运用散点和曲线所形成的柔和的视觉主题 | |
| | 3 版式的基本类型
网页版式的基本类型有多种，主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
3.1 骨骼型
网页中的骨骼型版式是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。 图29 三栏式中间一栏突出，页面层次分明。页面最上方为一横向通栏。 图30 以竖式结构为主，横式为辅。使页面条理明确。 图31 多栏的分隔方式，图像及导航分别占据了一个竖栏 图32 常见的分栏版式，页首通栏，下面又分为两栏。 图33 内容部分又分为四栏 图34 左右分栏 图35 综合运用多种分栏形式 | |
| | 3.2 满版型
页面以图像充满整版。主要以图像为诉求点，将少量文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。美中不足的是，限于当前网络宽带对大幅图像的传输速度较慢，这种版式多见于强调艺术性或个性的网页设计中。 图36 大面积的图片配以文字，视觉效果强烈 图37 大面积的图形，使页面的视觉张力很强。主题形象似乎要跃出页面 图38 满版的图片使页面丰富多变 图39 四边出血，向外扩张，适合年轻人的口味 图40 运用具有内敛性的图片，最终使视线停留在文字上 图41 满版的出血大图，给人以强烈的视觉冲击 图42 满版的页面，运用放射性图形突出主题 | |
| | 3.3 分割型
分割型版式设计，是把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成明显的对比：有图片的部分感性而具活力，文案部分则理性而平静。设计实践中，可以通过调整图片和文案所占的面积，来调节对比的强弱。如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则易造成视觉的不平衡，显得生硬、强烈。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 图43 页面的分隔让画面产生更多的层次。
图44 文字与图形分隔了画面，使页面对立而统一
图45 块把页面分隔得自然和谐
图46 首先以图片吸引浏览者的注意力，然后将视线引向文字
图47 文字在页面中占据了较小的面积，但由于分割线的运用，使文字同样得到强调
图48 常见的左右分割版式
图49 页面右侧使用斜线分割，打破了呆板的感觉
图50 上半边的大图与文字形成对比，图片的空间得到延展，形象得到强调，可增加浏览者的兴趣
图51 左右分割型版式
| |
| | 3.4 中轴型
中轴性版式，是沿页面的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面，给人稳定、平静、含蓄的感觉。垂直排列的页面，给人以舒畅的感觉。 图52 水平的中轴线营造了静谧的空间
图53 左重右轻，以打破中轴线的平衡
图54 水平的中轴线同时具有分割画面的作用
图55 图库类的网站，在中轴线上排列的图片使自身得到了强调
图56 主体形象安置于中轴线上
图57 栏目导航安排在垂直的中轴线上
图58 中轴线上方安排了产品的标志
图59 不易觉察的中轴版式，导航安排在水平的中轴线上
| |
| |
3.5 曲线型
曲线型版式，是图片或文字在页面上作曲线的编排构成。这种编排方式能产生韵律感与节奏感。
图60 整个页面大量运用了曲线，主题文字也以曲线排列
图61、图62 运用曲线产生的视觉效果，使画面柔和而时尚
图63 曲线与直线的对比使画面产生了节奏感
图64 以弧线分割画面
图65 导航安排在弧线上，给人以活泼的感觉
| 3.6 倾斜型
倾斜型版式，是页面主题形象或多幅图片、文字作倾斜编排。它能造成页面强烈的动感，引人注目。
图66 对角线构图，以横排的文字进行分割，求得均衡对比
图67 斜置的纸张与浏览器边框形成对比，印象被加强
图68 以房间的透视线打破水平线的呆板
| |
| | | 3.7 对称型
对称型的页面版式，给人以稳定、严谨、庄重、理性的感受。
图69 对称的版式设计、多变的彩组合使页面稳重而不乏时尚感
图70 相对对称的版式，以像素画的手法制作的游戏场景
图71 对称的版式使主体形象得到了强调
图72 相对对称的版式
对称，分为绝对对称和相对对称两种类型。一般采用相对对称的手法，以避免版式呆板。左右对称的页面版式比较常见。
四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。
| |
| | | | | 3.8 焦点型
焦点型的网页版式，通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。
1. 中心
以对比强烈的图片或文字置于页面的视觉中心。
图73 中心图形形成的视觉中心点
图74 浏览者的视线很容易被主体形象所吸引
图75首先吸引我们视线的是页面左上方的向日葵图像
图76 彩所产生的视觉中心点
| |
| | | | | | 2. 向心
视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。
图77 透视线将目光引向画面中的汽车
图78 透视消失点将我们引向远方
3. 离心
视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。
图79 首先是桔红的沙发成为视觉中心，然后图像的透视线将浏览者目光引向周边的导航文字。
3.9 三角型
这种版式是网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既又有动感。
图80 整体看为正三角形的构图
3.10 自由型
自由型的页面具有活泼、轻快的风格。
图81 块和图形的自由组合，使画面生动活泼
图82 画面层次感强，图形语言独特
图83 大面积的留白，使版式设计自由明快
图84 对比及创意图形的运用，页面个性十足
| |
| | | | | | | | | | | | |
| |
| |
| |
| |
| |
|
|
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论