视觉流程及版式类型.docx

视觉流程及版式类型.docx

《视觉流程及版式类型.docx》由会员分享，可在线阅读，更多相关《视觉流程及版式类型.docx（10页珍藏版）》请在冰豆网上搜索。

视觉流程及版式类型

（一）

在视觉心理学家的研究中，视觉运动规律是其成果之一。

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

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

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

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

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

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

1.视觉流程的筹划

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

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

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

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

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

图1页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大banner

图2作为个性化的视觉元素，拼贴剪纸式的文字分别占据了三个点，吸引视线在它们之间流动

人们阅读材料时习惯按照从左到右，从上到下的顺序进行。

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

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

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

图3浏览者的眼睛首先看到的是页面的左上角

（二）

2视觉流程类型

视觉流程主要包括以下几种类型：

线型视觉流程、曲线视觉流程、焦点视觉流程、反复视觉流程、导向视觉流程、散点视觉流程等。

2.1线型视觉流程

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

图4视觉流程明确，形成清晰易读的页面设计

图5自由的视觉流程形成生动活泼的页面设计

1、直线视觉流程

使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。

直线视觉流程表现为三种形式：

竖向视觉流程：

给人坚定、直观的感觉。

图6明确、简洁的竖向视觉流程

横向视觉流程：

有稳定、恬静之感。

图7横向的视觉流程，向人们传达出稳重、可信的视觉

图8横向的视觉流程，使页面稳重直观

斜向视觉流程：

以不稳定的动势引起注意。

三）

2.2曲线视觉流程

曲线视觉流程，是由视觉要素随弧线或回旋线运动而形成的。

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

曲线视觉流程的形式微妙而复杂，可概括为两种形式：

弧线形（c形）视觉流程：

有扩张感和方向感。

图10弧线形视觉流程，使页面具有很强的扩张性

回旋形（s形）视觉流程：

两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感。

图11回旋形视觉流程，使页面产生更多层次，空间感

（四）

2.3焦点视觉流程

焦点，是指视觉心理的焦点。

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

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

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

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

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

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

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

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

图13对主题图片的遮挡，引发浏览者一探究竟的兴趣

在主题形象四周增加空白量，使之成为视觉焦点。

图14留白使页面简约大方，更加突出了主题

图15通过在主体产品周围留白吸引视

图16这是一个典型的运用焦点视觉流程的例子

图17页面中的方形图无疑首先吸引了浏览者的视线

图18具有独特个性风格的首页设计,视觉流程清晰

盛年不重来，一日难再晨。

及时宜自勉，岁月不待人。