第三章版面设计的视觉流程

• 1. 文字导向
•
“请按这里”、“点击进入”等文字，是通过语义的
表达产生理念上的导向作用。另外，也可以对文字进行图
形化处理，对浏览者产生自觉的视觉导向作用。
• 2. 手势导向
手势导向比文字导向更容易理解，且更具有一种亲和力。
用卡通人物作手势导向
• 3. 形象导向 同手势导向一样容易理解，较常采用的形象为箭头。
• 弧线形（C形）视觉流程：有扩张感和方向感。
• 弧线形视觉流程，使页面具有很强的扩张性
• 回旋形（S形）视觉流程：两个相反的弧线则产生矛盾回 旋，在平面中增加深度和动感。
• 2.3 重心的视觉流程
其重心的位置因其具体画面而定。在视觉流程上，首先是 从版面重心开始，然后顺沿形象的方向与力度的倾向来发 展视线的进程。
形象导向，简洁明确
• 4. 视线导向
•
• 一组人物、动物面向同一方向，会因共同的视线而一 致起来。不同的物品方向一致，也可以产生统一感。如果 将页面中人物的视线对着物品，就会引导浏览者的视线集 中到物品上。充分利用视线导向，可以使视觉元素之间的 联系加强，结构更加紧凑。
• 2.1线型视觉流程
• 线型视觉流程，分为直线视觉流程和曲线视觉流程两 类。
• 1、直线视觉流程 • 使页面的流动线更为简明，直接地诉求主题内容，有简
洁而强烈的视觉效果。直线视觉流程表现为三种形式：
• 竖向视觉流程：给人坚定、直观的感觉。 明确、简洁的竖向视觉流程
Байду номын сангаас
• 横向视觉流程：有稳定、恬静之感。
二、视觉流程的形式
• 1.视觉流程的筹划 • 视觉流程是版式设计的重要内容，可以说，视觉流程
运用的好坏，是设计者技巧成熟与否的表现。
• 视觉流程的筹划包括几个重要的因素，下面就对它们作具 体的归纳与分析。
• 2 视觉流程类型 视觉流程主要包括以下几种类型：
线型视觉流程 曲线视觉流程 焦点视觉流程 反复视觉流程 导向视觉流程 散点视觉流程
横向的视觉流程，向人们传达出稳重、可信的视觉语言
• 斜向视觉流程：以不稳定的动势引起注意 。
斜向视觉流程，使页面产生动感
• 2.2 曲线视觉流程
• 曲线视觉流程，是由视觉要素随弧线或回旋线运动而形成 的。它不如直线视觉流程直接简明，但更具流畅的美感。 曲线视觉流程的形式微妙而复杂，可概括为两种形式：
版面设计的 视觉流程
• 在视觉心理学家的研究中，视觉运动规律是其成果之一。 • 一条垂直线在页面上，会引导视线作上下的视觉流动； • 水平线会引导视线向左右的视觉流动； • 斜线比垂直线、水平线有更强的视觉诉求力； • 矩形的视线流动是向四方发射的； • 圆形的视线流动是辐射状的； • 三角形则随着顶角之方向使视线产生流动；
经验丰富的设计者都对此非常重视，他们善于运 用这条贯穿页面的主线，设计易于浏览的页面。
从某个角度讲，视觉流程的设计结果就是版式。
• 人们是怎样看图片的？
• 研究者们发现，我们眼睛浏览图片时不是处在一种连续不 断的扫视之中，而是有一系列短暂的停顿和跳跃。这种间 断不完全是任意的。记住这一点，我们应注意下列一些情 况。
• 观看这张图的时候，你先看到了什么，后 看到了什么
• A、眼睛有一种停留在一幅画面左上角的倾 向。
• B、眼睛总是顺时针看一张图片。
• C、眼睛总是首先看图片上的人，然后是注 意诸如云彩、汽车等移动的物体，最后才 注意到固定的物体。
• 既然我们都有一种从左到右、从上到下观
• 一、视线流动规律
• 1、当某一视觉信息具有较强的刺激度时，就容易为视觉 所感知，人的视线就会移动到这里，成为有意识注意，这 是视觉流程的第一阶段。
• • 2、当人们的视觉对信息产生注意后，视觉信息在形态和
构成上具有强烈的个性，形成周围环境的相异性，因而能 进一步引起人们的视觉兴趣，在物象内按一定顺序进行流 动，并接受其信息。 •
• 2.4 反复视觉流程
•
反复视觉流程是指网页中相同或相似的视觉要素，作
规律、秩序、节奏的逐次运动。其产生的视觉效果更富于 韵律美和秩序美。
• 规则排列的小图片具有秩序美 • 书本图 12、13、14
• 2.5 导向视觉流程
• 导向视觉流程，是通过诱导性视觉元素，主动引导读 者视线向一定方向作顺序运动，按照由主及次的顺序，把 页面各构成要素依次串联起来，形成一个有机整体。导向 视觉流程的应用也很多见，可以使网页重点突出、条理清 晰，发挥最大的信息传达功能。视觉导向元素有多种，有 虚有实，表现多样。
• 3、人们的视线总是最先对准刺激力强度最大之处，然后 按照视觉物象各构成要素刺激度由强到弱的流动，形成一 定的顺序。
• 4、视线流动的顺序，还要受到人的生理及心理的影响。 由于眼睛的水平运动比垂直运动快，因而在视察视觉物象 时，容易先注意水平方向的物象，然后才注意垂直方向的 物象。人的眼睛对于画面左上方的观察力优于右上方，对 右下方的观察力又优于左下方，因而，一般广告设计均把 重要的构成要素安排在左上方或右下方。
• 各种图形从大到小渐层排列时，视线会强烈地按照排列方 向流动。
• 视觉流程，是视线在观赏物上的移动过程，是二维或三维 空间中的运动。
• 这种视觉的流动线极为重要，同时又是很容易被设计者忽 视的因素。
• 版面设计的视觉流程是一种“空间的运动”，是视线随各 元素在空间沿一定轨迹运动的过程。
这种视觉在空间的流动线为“虚线”，正因为它虚，所以 设计时容易被忽略。
• 5、由于人们的视觉运动是积极主动的，具有很强的自由 选择性，往往是选择所感兴趣的视觉物象，而忽略其他要 素，从而造成视觉流程的不规划性与不稳定性。
• 6、组合在一起具有相似性的因素，具有引导视线流动的 作用，如形状的相似，大小的相似，色彩的相似，位置的 相似等。
• 可以说视觉流程运用的好坏，是设计师设计技巧是否成熟 的表现。
• 视觉流程可以从理性与感性，方向关系的流程与散构关系 的流程来分析。
• 方向关系的流程强调逻辑，注重版面清晰地脉络，似乎有 一条主线、一股气韵贯穿版面，使整个版面的运动趋势有 “主体旋律”，细节与主体犹如树干和树枝一样和谐。方 向关系流程较散构关系流程更具有理性色彩。
• 前五项流程均为具有方向和理性的流程。