网页设计中的版式视觉流程

摘　要：在网页版面设计中，我们强调图文的一致性与和谐性，即版式的视觉流程。包括：单向视觉流程、曲线视觉流程、重心视觉流程、反复视觉流程、导向视觉流程、散点视觉流程。运用最佳视域原理做好网页中的界面设计。

关键词：高校；信息化建设；
　　引言
在浏览网页的时候经常可以看到这样的网页，上面排满了内容，没有考虑它的空间框架，它的编排秩序，在页面占着均衡的地位，让人看了无法知晓哪些内容才是最具发言权的，没有流畅的视觉流程，这是典型的没有注意到编排的清晰度、可读性。
　　一、视觉流程
　　在网页版面设计中，我们强调图文的一致性与和谐性，即版式的视觉流程。版式设计的视觉流程是一种“空间的运动”，是视线随个元素在空间沿一定的轨迹运动的过程，这种视觉在空间的流动线为“虚线”。正因为它虚，所以设计时容易被忽略。而有经验的设计师却非常重视并善于运用这条贯穿版面的主线。可以说，视觉流程运用的好坏。是设计师技巧是否成熟的表现。视觉流程可以从理性与感性、方向关系的流程与散点流程来分析。
在网页编排的过程中，我们首先要将凌乱页面的组织过程、混杂的内容依整体布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，找到最适合他们的位置，或主或从，各自在页面中找到自己的“舞台”，在混乱无序的状态中创造新秩序使其成为丰富多样而又简洁明确的统一整体，在对比中达到和谐统一。
方向关系的流程强调逻辑，注重版面的清晰脉络，似乎有一条线、一股气贯穿其内，是整个版面的运动趋势有“主题旋律”，细节与主体犹如树干与树枝一样和谐。方向关系流程较散点关系流程更具理性色彩。方向关系表现为以下几种形式。
　　（一）单向视觉流程
　　单向视觉流程使页面的流动更为简明，直接地表达主体内容，有简洁而强烈的视觉效果。其表现为三种方向关系：
竖向视觉流程——坚定、直观的感觉
横向视觉流程——给人稳定、恬静之感
斜向视觉流程——以不稳定的动态引起注意
　　（二）曲线视觉流程
　　各视觉要素随弧线或回旋线而运动变化我们称为曲线视觉流程。曲线视觉流程不如单向视觉流程直接简明，但更具韵味、节奏和曲线美。曲线流程的形式微妙而复杂，可概括为弧线形“C”和回旋型“S”。弧线形具有饱满、扩张和一定的方向感：回旋形两个相反的弧线则产生矛盾回旋。在平面中增加深度和动感。
　　（三）重心视觉流程
　　重心是视觉心理的重心，可理解为：其一，以强烈的形象或文字独据页面某个部位或完全充斥整版，其重心的位置因具体画面而定。在视觉流程上，首先是从页面重心开始，然后顺沿形象的方向与力度的倾向来发展视线的进程。其二，向心、离心的视觉运动，也是重心视觉流程的表现。重心的诱导流程使主题更为鲜明突出而强烈。
　　（四）反复视觉流程
　　反复视觉流程指相同的或相似的视觉要素做规律、秩序、节奏的逐次运动。其运动流程不如单向、曲线和重心流程运动强烈，但更富于韵律和秩序美。
　　（五）导向视觉流程
　　通过诱导元素，主动引导读者视线沿一定方向顺序运动，由主及次，把画面各构成要素依序串联起来，形成一个有机整体，使重点突出，条理清晰，发挥最大的信息传达功能。编排中的导线有虚有实，表现多样，如文字导向、手势导向、形象导向以及视线导向等。
　　（六）散点视觉流程
　　散点视觉流程指页面图与图、图与文字间呈自由分散状态的编排。散状排列强调感性、自由随机性、偶合性，强调空间和动感，追求新奇、刺激的心态，常表现为一种较为随意的编排形式。这种编排方式在国外网页设计十分流行，而国内还偏重于相对规则、理性的编排方式。我们读画的过程为视觉流程，所阅读的画中，有严谨规律的、流程明朗的、也有流程疏散甚至完全自由散点的。面对自由散点的页面，我们仍然有阅读的过程，即：视线随页面图像、文字或上或下或左或右地自由移动阅读的过程。这种阅读过程不如直线、弧线等流程快捷，但更为生动有趣。也许这正是页面刻意追求的轻松随意与慢节奏。
　　二、最佳视域
　　在进行网页的版面设计时。设计师应考虑到将重要信息或视觉流程的停留点安排在注目率高的位置，这就是优选最佳视域。
　　页面中，不同的视域，注目程度不同，心理上感受也不同。上部给人轻快、漂浮、积极高昂之感；下部给人压抑、沉重、消沉、限制、低矮和稳定之印象：左侧：感觉轻便、自由、舒展，富于活力；右侧：感觉紧促、局限却又庄重。
　　三、总结
　　以上前五项流程，均为方向和具有理性的流程。在编排方向性视觉流程关系时，要注意个信息要素间间隙大小的节奏感。若间隙大，节奏感慢，显得视觉流程舒展；而过分增大，则失去联系，彼此不能呼应，视觉流程显弱。若间隙小，节奏强而有力，信息可视度高，布局显得紧凑；但间隙过小，会显得紧张而拥挤，造成视觉疲累，无法清晰快捷地传达主题。而第六项散点视觉流程似乎与前五项相矛盾，其实不然，散点视觉流程是在前五项的基础上的一种突破与创新，它更多地体现了设计师的个人风格与编排技巧，这种创新更具现代设计的气息。
　　参考文献：
　　[1] 网站美工高级培训教程.张帆，清华大学出版社 2002.:10:50
　　[2] 高职院校《界面美工设计》课程的项目化教学探讨.电脑编程技巧与维护. 2009.(24):172. 本文链接：http://www.qk112.com/lwfw/jsjlw/jisuanjiyingyong/242095.html