网页设计 视觉流程及版式类型

网页 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 视觉 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 及版式类型 视觉流程及版式类型(一) 2006-08-07 08:52:53 大中小 在视觉心理学家的研究中，视觉运动规律是其成果之一。一条垂直线在页面上，会引导视线作上下的视觉流动;水平线会引导视线向左右的视觉流动;斜线比垂直线、水平线有更强的视觉诉求力;矩形的视线流动是向四方发射的;圆形的视线流动是辐射状的;三角形则随着顶角之方向使视线产生流动;各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。 视觉流程，是视线在观赏物上的移动过程，是二维或三维空间中的运动。这种视觉的流动线极为重要，同时又是很容易被网页设计者忽视的因素。经验丰富的设计者都对此非常重视，他们善于运用这条贯穿页面的主线，设计易于浏览的页面。从某个角度讲，视觉流程的设计结果就是版式。本章也将对网页设计的版式设计进行总结和阐述。 1.视觉流程的筹划 视觉流程是网页版式设计的重要 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 ，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。视觉流程的筹划包括几个重要的因素，下面就对它们作具体的归纳与 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 。 页面中不同的视域，注目程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、漂浮、积极、高昂之感;下部给人压抑、沉重、限制、稳定的印象;左侧，感觉轻便、自由、舒展，富于活力;右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。 图1 页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner 图2 作为个性化的视觉元素，拼贴剪纸式的文字分别占据了三个点，吸引视线在它们之间流动 人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。 重要的信息应该让浏览者最容易发现，而不是深藏在多层链接之后。 图3 浏览者的眼睛首先看到的是页面的左上角 视觉流程及版式类型(二) 2006-08-09 07:32:30 大中小 2 视觉流程类型 视觉流程主要包括以下几种类型:线型视觉流程、曲线视觉流程、焦点视觉流程、反复视 觉流程、导向视觉流程、散点视觉流程等。 2.1线型视觉流程 线型视觉流程，分为直线视觉流程和曲线视觉流程两类。 图4 视觉流程明确，形成清晰易读的页面设计 图5 自由的视觉流程形成生动活泼的页面设计 1、直线视觉流程 使页面的流动线更为简明，直接地诉求主 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 内容，有简洁而强烈的视觉效果。直线视觉流 程表现为三种形式: 竖向视觉流程:给人坚定、直观的感觉。 图6 明确、简洁的竖向视觉流程 横向视觉流程:有稳定、恬静之感。 图7 横向的视觉流程，向人们传达出稳重、可信的视觉语言 图8 横向的视觉流程，使页面稳重直观 斜向视觉流程:以不稳定的动势引起注意。 图9 斜向视觉流程，使页面产生动感 视觉流程及版式类型(三) 2006-08-10 08:08:40 大中小 2.2 曲线视觉流程 曲线视觉流程，是由视觉要素随弧线或回旋线运动而形成的。它不如直线视觉流程直接简 明，但更具流畅的美感。曲线视觉流程的形式微妙而复杂，可概括为两种形式: 弧线形(C形)视觉流程:有扩张感和方向感。 图10 弧线形视觉流程，使页面具有很强的扩张性 回旋形(S形)视觉流程:两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感。 图11 回旋形视觉流程，使页面产生更多层次，空间感增强 视觉流程及版式类型(四) 2006-08-11 07:57:03 大中小 2.3 焦点视觉流程 焦点，是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点”着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。 在具体的处理上，一般沿着视觉焦点的倾向与力度，来发展视线的进程。通常以鲜明的形象或文字占据页面某个位置，或完全充斥整版，集合浏览者的视线，完成视觉心理上的焦点建造。另外，向心、离心的视觉运动，也是焦点视觉流程的运用形式。 按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。 图12 运用图片大小的对比引起视觉的流动 将文案作整体编排，突出主题形象。 图13 对主题图片的遮挡，引发浏览者一探究竟的兴趣 在主题形象四周增加空白量，使之成为视觉焦点。 图14 留白使页面简约大方，更加突出了主题 图15 通过在主体产品周围留白吸引视线 图16 这是一个典型的运用焦点视觉流程的例子 图17 页面中的方形图无疑首先吸引了浏览者的视线 图18 具有独特个性风格的首页设计,视觉流程清晰 视觉流程及版式类型(五) 2006-08-12 08:46:34 大中小 2.4 反复视觉流程 反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。 图19 规则排列的小图片具有秩序美 图20 反复出现的枝叶形象具有韵律美 视觉流程及版式类型(六) 2006-08-13 09:21:06 大中小 2.5 导向视觉流程 导向视觉流程，是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。导向视觉流程的应用也很多见，可以使网页重点突出、条理清晰，发挥最大的信息传达功能。视觉导向元素有多种，有虚有实，表现多样。 1. 文字导向 “请按这里”、“点击进入”等文字，是通过语义的表达产生理念上的导向作用。另外，也可以对文字进行图形化处理，对浏览者产生自觉的视觉导向作用。 图21 “Enter the site”即为文字导向 2. 手势导向 手势导向比文字导向更容易理解，且更具有一种亲和力。 图22 用卡通人物作手势导向 3. 形象导向 同手势导向一样容易理解，较常采用的形象为箭头。 图23 形象导向，简洁明确 4. 视线导向 一组人物、动物面向同一方向，会因共同的视线而一致起来。不同的物品方向一致，也可以产生统一感。如果将页面中人物的视线对着物品，就会引导浏览者的视线集中到物品上。充分利用视线导向，可以使视觉元素之间的联系加强，结构更加紧凑。 图24 页面中的图像将视线引向画面以外 图25 页面中的人物全部面向浏览者，使浏览者产生受人注目的感觉，增强了网站的亲和力和认同感 图26 运用视线导向 视觉流程及版式类型(七) 2006-08-14 10:07:25 大中小 2.6 散点视觉流程 散点视觉流程，是指在分散处理视觉元素的编排方式。它强调感性、自由性、随机性、偶合性。其视觉流程为:视线随各视觉元素作或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节奏的感受。 图27 自由的视觉元素组合成明确的主题 图28 运用散点和曲线所形成的柔和的视觉主题 视觉流程及版式类型(八) 2006-08-15 08:37:17 大中小 3 版式的基本类型 网页版式的基本类型有多种，主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。 3.1 骨骼型 网页中的骨骼型版式是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。 图29 三栏式中间一栏突出，页面层次分明。页面最上方为一横向通栏。 图30 以竖式结构为主，横式为辅。使页面条理明确。 图31 多栏的分隔方式，图像及导航分别占据了一个竖栏 图32 常见的分栏版式，页首通栏，下面又分为两栏。 图33 内容部分又分为四栏 图34 左右分栏 图35 综合运用多种分栏形式 视觉流程及版式类型(九) 2006-08-16 08:35:40 大中小 3.2 满版型 页面以图像充满整版。主要以图像为诉求点，将少量文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。美中不足的是，限于当前网络宽带对大幅图像的传输速度较慢，这种版式多见于强调艺术性或个性的网页设计中。 图36 大面积的图片配以文字，视觉效果强烈 图37 大面积的图形，使页面的视觉张力很强。主题形象似乎要跃出页面 图38 满版的图片使页面丰富多变 图39 四边出血，向外扩张，适合年轻人的口味 图40 运用具有内敛性的图片，最终使视线停留在文字上 图41 满版的出血大图，给人以强烈的视觉冲击 图42 满版的页面，运用放射性图形突出主题 视觉流程及版式类型(十) 2006-08-17 08:47:44 大中小 3.3 分割型 分割型版式设计，是把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成明显的对比:有图片的部分感性而具活力，文案部分则理性而平静。设计实践中，可以通过调整图片和文案所占的面积，来调节对比的强弱。如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则易造成视觉的不平衡，显得生硬、强烈。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 图43 页面的分隔让画面产生更多的层次。 图44 文字与图形分隔了画面，使页面对立而统一 图45 色块把页面分隔得自然和谐 图46 首先以图片吸引浏览者的注意力，然后将视线引向文字 图47 文字在页面中占据了较小的面积，但由于分割线的运用，使文字同样得到强调 图48 常见的左右分割版式 图49 页面右侧使用斜线分割，打破了呆板的感觉 图50 上半边的大图与文字形成对比，图片的空间得到延展，形象得到强调，可增加浏览者的兴趣 图51 左右分割型版式 视觉流程及版式类型(十一) 2006-08-18 08:14:14 大中小 3.4 中轴型 中轴性版式，是沿页面的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面， 给人稳定、平静、含蓄的感觉。垂直排列的页面，给人以舒畅的感觉。 图52 水平的中轴线营造了静谧的空间 图53 左重右轻，以打破中轴线的平衡 图54 水平的中轴线同时具有分割画面的作用 图55 图库类的网站，在中轴线上排列的图片使自身得到了强调 图56 主体形象安置于中轴线上 图57 栏目导航安排在垂直的中轴线上 图58 中轴线上方安排了产品的标志 图59 不易觉察的中轴版式，导航安排在水平的中轴线上 3.5 曲线型 曲线型版式，是图片或文字在页面上作曲线的编排构成。这种编排方式能产生韵律感与节 奏感。 图60 整个页面大量运用了曲线，主题文字也以曲线排列 图61、图62 运用曲线产生的视觉效果，使画面柔和而时尚 图63 曲线与直线的对比使画面产生了节奏感 图64 以弧线分割画面 图65 导航安排在弧线上，给人以活泼的感觉 视觉流程及版式类型(十三) 2006-08-20 13:10:25 大中小 3.6 倾斜型 倾斜型版式，是页面主题形象或多幅图片、文字作倾斜编排。它能造成页面强烈的动感， 引人注目。 图66 对角线构图，以横排的文字进行分割，求得均衡对比 图67 斜置的纸张与浏览器边框形成对比，印象被加强 图68 以房间的透视线打破水平线的呆板 视觉流程及版式类型(十四) 2006-08-21 12:57:38 大中小 3.7 对称型 对称型的页面版式，给人以稳定、严谨、庄重、理性的感受。 图69 对称的版式设计、多变的色彩组合使页面稳重而不乏时尚感 图70 相对对称的版式，以像素画的手法制作的游戏场景 图71 对称的版式使主体形象得到了强调 图72 相对对称的版式 对称，分为绝对对称和相对对称两种类型。一般采用相对对称的手法，以避免版式呆板。左右对称的页面版式比较常见。 四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控 制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 视觉流程及版式类型(十五) 2006-08-22 19:49:09 大中小 3.8 焦点型 焦点型的网页版式，通过对视线的诱导，使页面具有强烈的视觉效果。 焦点型分三种情况。 1. 中心 以对比强烈的图片或文字置于页面的视觉中心。 图73 中心图形形成的视觉中心点 图74 浏览者的视线很容易被主体形象所吸引 图75首先吸引我们视线的是页面左上方的向日葵图像 图76 色彩所产生的视觉中心点 视觉流程及版式类型(十六) 2006-08-24 20:34:56 大中小 2. 向心 视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 图77 透视线将目光引向画面中的汽车 图78 透视消失点将我们引向远方 3. 离心 视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。 图79 首先是桔红色的沙发成为视觉中心，然后图像的透视线将浏览者目 光引向周边的导航文字。 3.9 三角型 这种版式是网页各视觉元素呈三角形排列。正三角形(金字塔型)最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又 有动感。 图80 整体看为正三角形的构图 3.10 自由型 自由型的页面具有活泼、轻快的风格。