网页设计论文视觉流程论文：网页版式设计的视觉流程分析.doc

网页设计论文视觉流程论文：网页版式设计的视觉流程分析内容摘要：网页设计是一门新兴的交叉学科，版式设计是网页设计的重要组成部分，网页版式设计中的视觉流程是科学地进行网页版式设计的原则和依据。文章主要探讨了网页版式设计中的视觉流程原则及视觉流程表现，分析了网页设计中视觉流程的变化性特点，指出合理地设计和利用网页版面中的视觉流程对网页视觉信息传达具有重要意义。关键词：网页设计 版式设计 视觉流程网页是网络传达信息的主要载体，网页设计作为人机界面的一个重要对象，其视觉形式直接影响网络最终的传播效果。网页版面设计的视觉流程是人在观看网页时候的视觉线路走向。根据人的生理特点和心理特点，人们在观看网页时通常是从第一感觉印象到具体信息传达、最后产生整体印象的过程。下面，笔者分析一下网页版式视觉流程的设计原则和表现形式，以及网页视觉流程中的变化性特点。一、网页版面视觉流程的设计原则网页版式设计是网页设计的重要组成部分，它遵循一定的认知心理学和审美原则。通过设计创意和设计原理构成网页页面，能更好地实现信息传达和视觉效果传达。承载网页设计的媒介终端的数字化特点，决定了网页版式的视觉流程在具体设计中要遵循以下原则：1.科学性。网页版式设计的视觉流程以人眼的生理结构和视觉心理认知特征为依据，因此网页版式的视觉流程是符合一般视觉原理和大众认知基础的1。根据视觉流程的特点，网页版式在设计上遵照从左到右、从上到下的原则，因此设计中要选择最佳的视觉区域，设计符合科学理性的视觉流程方法。如图1所示视线流动的一般规律，在网页版面中，1区即左上区域，一般为观者视觉进入版面的区域，因此一般放置比较醒目、鲜明、简洁的视觉元素，如标志等。这些元素一般以图形或是文字设计的形式出现，让观者在第一时间了解到网页的代表符号，对网页产生深刻印象，并能同其他网页区别开来。区域2即页面的右上角，虽然不是视觉进入版面的区域，但同样处于页面上方，因此也可放置一些重要信息，在具体设计中，banner、导航条常布置在1、2两个区域。网页的中间部分，如图3区左中和4区右中为放置主要内容的区域，这部分一般放置内容性文字或者图形，属于元素集中区域，是观者阅读和获取信息的主要区域；而3区由于位于页面左侧，处在视觉进入区域一侧，因此在设计中也常常将导航内容放置在3区左侧，便于操控。5、6两个区域靠近屏幕下方，6区一般是视觉线路的终点，因此这两个区域一般放置非重要的信息。2.识别性。在网页版式视觉流程设计的过程中，最终目的是保障网页内容被更准确、快捷地识别。识别性在视觉流程的设计中关系重大，设计行为都应该围绕着识别性这个主题而展开。根据设计内容的需要，对视觉元素进行处理，如区分主次关系进行设计、通过色彩区别元素、加强设计的整体性等，都是加强页面识别性的设计手法。视觉传达设计的内涵与形式也不是一成不变的，无论采用哪种视觉表达形式，终端受众都必须借助视觉感知来接受信息。23.合理性。合理性是指在网页版式视觉流程的设计中依照设计的原理合理地展开视觉流程的引导。网页的浏览过程是动态的、互动的，观者获取信息的过程不尽相同，有时浏览者可能会从其他网页链接跳过主页直接进入网站子页面中；同时网页的互动性也容易吸引受众。因此，合理地处理每个网页的视觉流程，让各级页面都拥有设计清晰、可操作性强的导航，便于受众在各种情况下进行浏览。二、网页版面视觉流程样式视觉流程在运动的过程中受各种外部因素和主观因素的影响，会产生各种运动形式。结合网页版面设计的特点，主要有如下几个方面：1.线性视觉流程。线性视觉流程是最常见、最基本的视觉流程样式。文本阅读的方式就是以线性视觉流程的形式呈现的。主要的线性视觉流程有直线、斜线、曲线3种形式。直线视觉流程在版面中引导人的视线做直线的视觉流动，具有直观、确定、一目了然的特点。斜线视觉流程动态性很强，具有较强的个性特征，常用在表现突出动态或个性化的设计中；斜线视觉流程稳定性相对较差，要注意画面的整体均衡。曲线视觉流程是颇具韵律感的视觉流程形式，曲线在版面中的融会贯通让版面舒畅、自然、饱满且充满张力，如“s”曲线形态的视觉流程使页面元素上下左右运动，能在有限的空间中穿插回旋，具有一定的张力。2.导向视觉流程。在网页设计中使用能诱导观者视线的诱导性元素，令观者的视线能通过诱导按照设计者的布局进行一定顺序的运动，将所有元素从主到次、从大到小构成一个有机整体，形成一个重点突出、流程动感的视觉组合。诱导性的元素有很多种，常见的有文字导向，利用文字的排列组合后的线、面特点来引导视觉走向；肢体导向，利用人体的肢体语言或是手部动作的方向性，来引导视觉走向；指示导向，利用符号箭头的方向性特点，将视线引向主体；形象导向，利用众多的事物形象特征来引导视线，如人或者动物的视线、钟表的指针等。3.反复视觉流程。反复视觉流程是指由于相同或者相似元素的规律出现，而产生的一种有秩序和节奏的运动。反复视觉流程构成的版面动感性差，通过元素的处理方式能产生很强的节奏和秩序的美感，吸引视线。由于网页技术特点决定了这种反复视觉流程是比较常见的视觉流程表现手法，在网页的导航设计、图片排列、文本信息等设计中常见这种排列手法。4.散点视觉流程。散点视觉流程使用了后现代的视觉表现中的一些特点，自由、随意、新颖。散点视觉流程指版面中的视觉元素，包括图形、文字等视觉元素及其各元素之间的组成关系不拘泥于规则、严谨的理性编排方式，而是强调感性、自由、随意、分散的排列组合状态。散点视觉流程在初始感官上给我们以散乱的感受，信息获取过程不如其他视觉流程顺畅，但是只要稍加观察我们就会发现散点的视觉流程通常是“形散而神凝”。在对待元素的处理方式、版面的整体协调、主次的关系处理、色彩的利用等方面，都更加刻意精心地遵循着一定的规则，这就使散点视觉流程的表现在灵活、感性、生动之余，不乏理性的雕刻。5.复向视觉流程。复向视觉流程是从页面的中心点开始，产生向心或离心等形式的视觉运动，画面中心突出、主题明确，视觉冲击力比较强，常用在对某一事物进行强调的页面设计中。三、网页版面视觉流程中的变化性网页版式设计同传统媒介版面设计虽然都是在一定的空间中进行视觉元素的组织，但由于二者在最终显示方式上存在差别，因此网页版面在具体的视觉流程表现中必然会受媒介变化的影响。1.网页版面中的变化性。网页版面设计同传统的版面设计有着一定的联系，但也有着很大的不同，这就是它的动态变化性。对于同一个网页版面而言，观者所见的第一感觉印象未必是最终的感觉印象。由于网页版面互动性的特点，在观者和网页版面的不断接触过程中还会出现各种动态的图标或悬浮导航条等，这些都是带来变化的元素，都会对初始页面视觉流程产生一定的影响。变化会打破最初视觉状态下的相对稳定，在视觉流程的设计中都应该整体考虑。变化的视觉流程可以使网页页面更加生动、多样化，但这也为设计增加了很大的难度，这种变化的视觉流程多用于一些娱乐性的或追求与众不同的个性化网页设计。2.页面之间跳转的变化性。除了同一网页版面内部的变化性以外，在不同网页页面之间的非线性跳转也是网页设计不同于传统媒介的特征之一，超链接改变了网页内容空间的前后关系。由于网页具有超链接功能和多维性的特点，使得不同站点以及同一站点的不同页面之间跳转成为网页变化性的又一表现。通常来讲，一个站点是由多个页面构成的，观者的浏览顺序是不固定的，可能从主页开始，也可能从二、三级页面开始，因此保持整体的视觉流程至关重要。这就要求设计者尽可能在一个网站的整体设计以及页面的跳转过程中保持视觉元素设计的连贯性，保持视觉流程特征的连贯性，保持整体设计风格的连贯性，来更好地适应页面跳转过程中的变化。3.视觉元素的动静变化性。网页既包含了传统媒体的形式，其本身又是新的媒体，它具有极大的兼容性和互动性。网页设计中既包含传统的静态设计，又存在具有互动性的游戏、动画、影像和线性播放的影像、广告等元素，这就构成了页面中的动静对比。对网页浏览者而言，视觉流程的变化还受页面元素动静变化的影响。通常来讲，事物要引起人注意应具备两方面的特点，一是有刺激物出现。在这里网页上的动态元素，如视频、动画、广告等外界刺激具备引起人无意注意的行为，即浏览者事先没有目的也不需要做意志努力就能注意到的，这类变化节奏越快越能吸引人的视线。这是一种动态的吸引，可以改变人的视觉流程，能较先吸引人的视线。因此，在一些页面上，常将一些重点信息进行动态化处理以吸引人的第一注意力。二是视觉主体的意向性。浏览者作为视觉主体，更容易受动态元素的吸引。动态元素的视觉形象力更加明显，受人注意的程度要多于静态元素。因此，我们可以看到，新的媒介赋予了设计以更丰富的内容，网页版式的视觉流程同传统设计相比较增加了动态效果对其的影响，网页上的动态元素可以吸引观者的视线，使观者能按照设计者给出的特定视觉线路进行视觉移动，而页面上的静态元素较之动态元素，其视觉吸引力相对较弱。结语视觉是一种主动性很强的感觉形式，新技术在很大程度上要依靠人类的视觉感官去获取、传达和交流，技术的进步让我们开始更加关注网页信息传达的品质。3网页视觉流程的设计直接关系着网页版式构成并影响到网页信息传达的效果；在网页设计中组织视觉元素进行视觉表现，使设计形式的组织达到对浏览者视觉线路的引导，能更好地发挥设计元素的功能。总之，加强网页设计的视觉文化基础，利用视觉表现达到提升网页信息传达的目的，对于