资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,主讲：顾群业,/视觉流程，是视线在页面上的移动过程，是二维空间中的运动/视觉流程的设计结果就是版式。,一.视觉流程的筹划,二.视觉流程类型,三.版式的基本类型,一.视觉流程的筹划,经过视觉心理学家的研究，发现了一些视觉运动的规律。,我们要利用人们的视觉运动规律来筹划视觉流程。,在视觉心理学上，有个词叫做“张力，表示物象形式的矛盾差异相比照所产生的对抗振奋感和精神刺激力，差异越大，视觉张力也就越强。,人们在完整地接收平面元素信息时，视线会形成一个习惯性的流动顺序：视点先落入视觉焦点，后随各元素间的强弱变化而作有序流动，最后完成对全局部元素信息的吸收。,一视,/,觉,/,流,/,程,/,的,/,筹,/,划,页面中不同的视域，注目程度不同，给人心理上的感受也不同。,上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；,网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最正确视域。,浏览者的眼睛首先看到的是屏幕的中间偏上的区域,根据视觉心理学的研究，人的视线对于版面的视觉诉求力大体是上部比下部强，左半部比右半部强。,最正确视域,一视,/,觉,/,流,/,程,/,的,/,筹,/,划,这个设计轻松而具均衡的形式感，把最正确视域留给了横贯页面的大Banner。,这三个拼贴剪纸式的文字，作为个性化的视觉元素，分别占据了三个点，吸引视线在它们之间流动。,二.视觉流程类型,1.线型视觉流程,2.曲线视觉流程,3.焦点视觉流程,4.反复视觉流程,5.导向视觉流程,6.散点视觉流程,二视,/,觉,/,流,/,程,/,类,/,型,1.线型视觉流程,线型视觉流程，分为,直线视觉流程,和,曲线视觉流程,两类,二视,/,觉,/,流,/,程,/,类,/,型,直线视觉流程,使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。,A.竖向视觉流程,B.横向视觉流程,C.斜向视觉流程,竖向视觉流程-给人坚决、直观的感觉,A,.,横向视觉流程-有稳定、恬静之感,B,.,斜向视觉流程-以不稳定的动势引起注意,C,.,2.曲线视觉流程,由视觉要素随弧线或盘旋线运动而形成。,A.弧线形C形视觉流程,B.盘旋形S形视觉流程,二视,/,觉,/,流,/,程,/,类,/,型,弧线形C形视觉流程-有扩张感和方向感,A,.,盘旋形S形视觉流程-两个相反的弧线那么产生矛盾盘旋，在平面中增加深度和动感,B,.,3.焦点视觉流程,焦点，是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。,二视,/,觉,/,流,/,程,/,类,/,型,按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。,A,.,将文案作整体编排，突出主题形象。,B,.,在主题形象四周增加空白量，使之成为视觉焦点。,C,.,4.反复视觉流程,反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。,二视,/,觉,/,流,/,程,/,类,/,型,二视,/,觉,/,流,/,程,/,类,/,型,5.导向视觉流程,导向视觉流程，是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。,A.文字导向,B.手势导向,C.形象导向,D.视线导向,文字导向,A,.,手势导向,B,.,形象导向,C,.,视线导向,D,.,二视,/,觉,/,流,/,程,/,类,/,型,6.散点视觉流程,散点视觉流程，是指在分散处理视觉元素的编排方式。它强调感性、自由性、随机性、偶合性。其视觉流程为：视线随各视觉元素作或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节奏的感受。,三.版式的根本类型,1.骨骼型,2.满版型,3.分割型,4.中轴型,5.曲线型,6.倾斜型,7.对称型,8.焦点型,9.三角型,10.自由型,三版,/,式,/,的,/,基,/,本,/,类,/,型,1.骨骼型,网页中的骨骼型版式是一种标准的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。,三版,/,式,/,的,/,基,/,本,/,类,/,型,三栏式中间一栏突出，页面层次清楚。页面最上方为一横向通栏。,A,.,以竖式结构为主，横式为辅。使页面条理明确。,B,.,多栏的分隔方式，图像及导航分别占据了一个竖栏。,C,.,常见的分栏版式，页首通栏，下面又分为两栏。,D,.,左右分栏,E,.,综合运用多种分栏形式,F,.,画面层次感强，图形语言独特,B,.,
展开阅读全文