2021年视觉流程及版式类型.doc

（一）
在视觉心理学家研究中，视觉运动规律是其结果之一。一条垂直线在页面上，会引导视线作上下视觉流动；水平线会引导视线向左右视觉流动；斜线比垂直线、水平线有更强视觉诉求力；矩形视线流动是向四方发射；圆形视线流动是辐射状；三角形则伴随顶角之方向使视线产生流动；多种图形从大到小渐层排列时，视线会强烈地根据排列方向流动。
视觉步骤，是视线在观赏物上移动过程，是二维或三维空间中运动。这种视觉流动线极为关键，同时又是很轻易被网页设计者忽略原因。经验丰富设计者全部对此很重视，她们善于利用这条贯穿页面根本，设计易于浏览页面。从某个角度讲，视觉步骤设计结果就是版式。本章也将对网页设计版式设计进行总结和叙述。

视觉步骤是网页版式设计关键内容，能够说，视觉步骤利用好坏，是设计者技巧成熟是否表现。视觉步骤计划包含多个关键原因，下面就对它们作具体归纳和分析。
页面中不一样视域，注目程度不一样，给人心理上感受也不一样。通常而言，上部给人轻快、漂浮、主动、高昂之感；下部给人压抑、沉重、限制、稳定印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。网页中最关键信息，应安排在注目率最高页面位置，这个位置便是页面最好视域。
图1 页面设计轻松而具均衡形式感，把最好视域留给了横贯页面大banner
图2 作为个性化视觉元素，拼贴剪纸式文字分别占据了三个点，吸引视线在它们之间流动
大家阅读材料时****惯根据从左到右，从上到下次序进行。浏览者眼睛首先看到是页面左上角，然后逐步往下看。依据这一****惯，设计时能够把关键信息放在页面左上角或页面顶部，如企业标志、最新消息等，然后按关键性依次放置其它内容。
关键信息应该让浏览者最轻易发觉，而不是深藏在多层链接以后。
图3 浏览者眼睛首先看到是页面左上角
（二）
2 视觉步骤类型
视觉步骤关键包含以下多个类型：线型视觉步骤、曲线视觉步骤、焦点视觉步骤、反复视觉步骤、导向视觉步骤、散点视觉步骤等。

线型视觉步骤，分为直线视觉步骤和曲线视觉步骤两类。
图4 视觉步骤明确，形成清楚易读页面设计
图5 自由视觉步骤形成生动活泼页面设计
1、直线视觉步骤
使页面流动线更为简明，直接地诉求专题内容，有简练而强烈视觉效果。直线视觉步骤表现为三种形式：
竖向视觉步骤：给人坚定、直观感觉。
图6 明确、简练竖向视觉步骤
横向视觉步骤：有稳定、恬静之感。
图7 横向视觉步骤，向大家传达出稳重、可信视觉
图8 横向视觉步骤，使页面稳重直观
斜向视觉步骤：以不稳定动势引发注意。
三）
曲线视觉步骤
曲线视觉步骤，是由视觉要素随弧线或回旋线运动而形成。它不如直线视觉步骤直接简明，但更具流畅美感。曲线视觉步骤形式微妙而复杂，可概括为两种形式：
弧线形（c形）视觉步骤：有扩张感和方向感。
图10 弧线形视觉步骤，使页面含有很强扩张性
回旋形（s形）视觉步骤：两个相反弧线则产生矛盾回旋，在平面中增加深度和动感。
图11 回旋形视觉步骤，使页面产生更多层次，空间感
（四）
焦点视觉步骤
焦点，是指视觉心理焦点。每个页面中全部有一个视觉焦点，这是需要关键处理对象。焦点是否突出，和页面版式编排、图文位置、色彩利用相关，同时也和对“焦点”着力描写相关。在视觉心理作用下，焦点视觉步骤利用使专题更为鲜明、强烈。
在具体处理上，通常沿着视觉焦点倾向和力度，来发展视线进程。通常以鲜明形象或文字占据页面某个位置，或完全充斥整版，集合浏览者视线，完成视觉心理上焦点建造。另外，向心、离心视觉运动，也是焦点视觉步骤利用形式。
根据主从关系次序，使放大专题形象成为视觉焦点，以此来表示专题思想。
图12 利用图片大小对比引发视觉流动 将文案作整体编排，突出专题形象。

图13 对专题图片遮挡，引发浏览者一探到底爱好
在专题形象四面增加空白量，使之成为视觉焦点。
图14 留白使页面简约大方，愈加突出了专题
图15 经过在主体产品周围留白吸引视
图16 这是一个经典利用焦点视觉步骤例子