第二章网页布局和色彩搭配

第二章网页布局和色彩搭配主讲人：XXX电话：XXXXXX邮箱：XXXXXX学习目标本节教学目标：本章重点介绍“网站建设流程”中的“具体设计”阶段中所使用到的相关知识，为实际动手建站打好基础。了解网页的基本元素，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中放什么？怎么放？）本节重点和难点：了解视觉流程原理学习构成原理在网页中的应用认识网页的基本元素学习网页版式设计网站的颜色搭配视觉流程原理视觉流程的概念人类的视觉流程习惯是由人类的眼晶体结构的生理构造决定的，人眼只能产生一个焦点，不能同时将视线集中在一处以上，所以人在阅读信息的时候总有流动的习惯，先看这些再看那些。视觉流程是人的视线在被观察物上的运动过程设计中合理的运用视觉流程对于信息的有效传达极为重要，但同时又是很容易被网页设计者忽视的因素。视觉流程原理阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大的上部、左侧、左上与中上又被称为最佳视域。最佳视域视觉流程原理视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。结论根据视觉流程的理论，设计师在设计网页时：（1）把信息有一定目的顺着视觉运动规律安排在页面中。（2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、搜索框等，如公司的标志往往放在页面的左上角，最新消息也时常位于页面的上部等等。构成设计在网页中的应用点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何处理好三者之间的关系，因为任何视觉形象或者版式构成，归根结底，都可以归纳为点、线、面网页设计师应当将平面构成理论作为网页设计视觉形象表现的指导思想，在具体设计过程中大胆运用多种视觉元素形态变化和表现手法。它们是创造形式美的基本要素，使网页具有不同的审美倾向点的构成概念：在网页中，一个单独而细小的形象可以称之为点。它没有指向性和具体的尺度，是相对周围环境所定义的一个相对概念。如一个按钮、一个标志等功能：(1)点具有集中视线特征，可以凝聚注意力。(2)点具有很强的调节和修饰作用。(3)多个点的使用有时还可以引导视觉流程。例1举例：以图形构成的按钮即可视为点。例2举例：点具有凝聚视觉注意力的作用，在平面上只有一个点时，我们的视线就会集中在这个点上点的构成当有两个等大的点或多个等大的点相距一定的距离时，我们的视觉焦点就会在这几个点之间往返，在心理上产生了一种“线”的感觉，引导视觉流程点是构成网页的最基本元素，具有装饰和活跃画面气氛的作用。同时定位画面的视觉流程，使网页更加统一线的构成线有长度属性，而无粗细的限制。线起分隔和修饰的作用。线比点具有更强的心理感受。不同的线给人不同的感觉。网页中的线的类型有：（1）直线（横直线、竖直线、斜直线）（2）曲线（几何曲线、自由曲线）线的构成网页中直线的应用非常广泛，使用直线可以非常清晰明了地划分页面的布局结构曲线划分页面的布局结构，自由、随意、运动的感觉线的方向不同，也能激发起不同的心理感受。例如，水平线给人的感觉均衡、安定、平衡和静止垂直线则给人强有力的支柱、公正和信任的感觉斜线给人的感觉是生动、活泼、不稳定，适合用来体现运动和速度的感觉面的构成直线形面具有简洁明快、有序和理性的特征，容易被人理解和记忆。在网页中，一幅图像可以被看做面，一段文字也可以看成是面曲线形面曲线形面也分为几何曲线形和自由曲线形两种。富于变化和动感。它所表现出来的流动性和弹性给人以无限想象，使人感到有种生命活力。它具有同曲线一样的女性特征。偶然形面偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、无序的形态，有着丰富的象征意义构成的形式（1）重复构成形式重复构成是指用同一形态或同组形态有序地反复出现，形成某种规律的构图形式。重复构成具有强化记忆的功能，反复地出现会不断地加强视觉冲击，加深形象认识近似构成形式在重复构成中保持原有规律性的基础上，把重复元素的基本形(大小、方向、色彩等)进行微小变化，就演变成了近似构成形式。近似构成形式中既有形式变化，又有整体的统一渐变构成形式渐变是一种常见的视觉效果，也是设计中常常使用的技巧。渐变是指构图基本形(形状、大小、方向、颜色等)逐渐而有规律地变化。它能够表现出空间感和时间感特异构成形式在重复、近似、渐变构成中，为了改变规律性的单调感，有意识地出现不合规律的个别基本形，由此产生强烈的对比效果，这种构成形式就称之为变异。变异的形式有大小变异、形状变异、方向变异、肌理变异、色彩变异等对比构成形式在两种或者两种以上的对象之间，有着明显的差别，我们就称之为对比。对比是一种较为自由的构成表现形式。对比又可以划分为形的对比(大与小、方与圆、长与短、粗与细、曲与直等)、质的对比(刚与柔、轻与重、强与弱等)、势的对比(动与静、聚与散、快与慢等)、颜色的对比（色相、明度、纯度等）密集构成形式把基本形态按密集与疏散、虚与实、向心与扩展等方式进行构成的形式称为密集构成形式。它具有方向性和目的性的运动特征。在这种形式的构图中，元素最密集的地方和最稀疏的地方均为视觉的焦点发射构成形式以一点或多点为中心，呈向周围发射、扩散等视觉效果，具有较强的动感及节奏感。格线和基本形呈发射状的构成形式，称为发射构成。此种类的构成，是骨格线和基本形用离心式、向心式、同心式以及几种发射形式相叠而组成的肌理构成形式肌理是物质表面的形态，通常是指物体表面的纹理感觉。它具有粗糙、细腻、柔软、生硬、干燥、湿润等特性，既有自然形态的肌理(如水波纹、木纹、树叶纹等)，也有人为形态的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可作为网页的背景出现在页面设计中，使用适当的肌理作为背景图案，将起到很好的视觉调节作用网页版式设计水平分割水平分割强调的是层次感和精确感，并有助于不同信息的分类，通常上方为导航栏，或者是企业动态形象（Flash），下方是内容。水平分割应当考虑到分割面积。水平不均匀分割，如果上半部分放置标题或导航，则面积较小，上半部分放置主体内容，则面积应适当加大垂直分割垂直分割和水平分割有很多相似点，把水平分割的页面旋转90度，即为垂直分割效果。Nikon体育用品网站就应用了这种构图，这种构图结构清晰，给人工整、坚定和直爽的感觉，能够树立独立的企业形象水平垂直分割水平垂直分割是上面两种分割形式的综合运用，整个页面中既有水平分割的部分，又有垂直分割的部分，互相交织构成一种网状结构。荷兰壳牌石油公司的网站主页，页面给人一种非常稳定的感觉，主要用于大型企业或者门户网站这样的信息量巨大的网站主页变化分割变化分割是在水平分割和垂直分割的基础上，添加斜线和曲线的效果，这样的页面版式结构给人自由、运动和时尚的感觉网站布局网页布局的标准美观、适用1、网页中的基本元素(1)网站标志LOGOLOGO的大小：88*31、120*60、120*90(2)网站导航(一组超链接，帮助访问者快速准确地浏览网站)原则：简洁，容易操作位置：顶部或左侧常用的方式：悬停式(3)网页的主体内容注意视觉流程原理、文图结合、动静结合、松紧适当网站布局(4)页眉：对网站起宣传的作用或用于广告。富有特色的页眉也是网站的一个重要标志。一般放网站的口号、广告语等信息。(5)页脚：名称、地址、版权、联系方式等信息(6)站内搜索(7)广告网页布局的步骤制作网页的目的及内容：确定网页中需要放什么内容，并收集资料应该明确制作网页的目的，制作网页要完成什么任务，要达到什么样的要求。在这一阶段，搜集制作网页的有关材料，这些材料应该是真实、正确、详细的。为了以后制作网页的方便，应该将这些内容写成书面材料，以免制作时漏掉某些项目手绘布局在实际设计网页之前，最好要在纸上绘制出页面版式草图，以供设计时参考。手绘设计网页布局更加自由，根据客户的要求，按照掌握的设计方法和一些构图规律来进行设计。这个草图不会给客户看，尽量绘制得简单、明了。在设计时准备工具。准备白纸若干，几支铅笔和一块橡皮，以免在设计时由于缺少工具打断设计思路。解决在什么位置放什么内容的问题手绘布局步骤1：尺寸比例设定，目前一般1024×768的分辨率为的浏览屏幕大小，在电脑刚刚普及配置不高时800×600的分辨率。根据屏幕比例先在白纸上画出象征浏览器窗口的矩形，这个矩形是布局的范围。步骤2：选择合适的版式设计，安排网页布局。步骤3：确定大的版式后增加细节网站标志、网页导航、网页的主体内容、网页页眉、网页页脚和多媒体等软件布局可以使用Firework的图像编辑功能来设计网页版式布局，也可以用Word、Photoshop或者是CorelDRAW。Word进行简单的排版比较便捷；Photoshop所具有的对图像的编辑功能在设计网页布局的图像设计上较为方便，利用Photoshop可以方便地使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法表现的布局意念；CorelDRAW进行简单的排版和颜色配置有着更大的优势。一般来讲使用Firework或CorelDRAW进行排版的设计师多一些Photoshop布局示意图CorelDRAW布局示意图色彩的基本理论大自然为何是五颜六色的？因为光照射到物体的表面发生折射产生了色彩。人的眼睛是根据所看见的光的波长来识别颜色的。如霓虹灯，它所发出的光本身带有颜色，能直接刺激人的视觉神经而让人感觉到色彩。可见光谱中的大部分颜色可以由三种基本色光按不同的比例混合而成，这三种基本色光的颜色就是红（Red）、绿（Green）、蓝（Blue）三原色光。这三种光以相同的比例混合、且达到一定的强度，就呈现白色（白光）；若三种光的强度均为零，就是黑色（黑暗）。这就是加色法原理，加色法原理被广泛应用于电视机、监视器等主动发光的产品中。在网页设计中，也是运用了加色法原理。提示：根据减色法原理，颜料的三原色有青（Cyan）、品红（Magenta）和黄（Yellow），多用在在印刷、油漆、绘画等场合。颜料的三原色及其理论不作为本书讨论内容色彩的基本理论色彩，可分为无彩色和有彩色两大类。前者如黑、白。灰，后者如红、黄．蓝等七彩。有彩色就是具备光谱上的某种或某些色相，统称为彩调。与此相反，无彩色就没有彩调。无彩色有明有暗，表现为白、黑，也称色调。有彩色表现很复杂，但可以用三组特征值来确定。其一是彩调，也就是色相；其二是明暗，也就是明度；其三是饱和度，也就是纯度、彩度。色相、明度、饱和度称为色彩的三属性。明度和色相合并为二线的色状态，称为色调。色相（Hue）简写H，表示色的特质，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。明度（Value）简写V，表示色彩的亮度，也即是色彩的明暗度。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。饱和度（Chroma）简写C，表示色的纯度，亦即是色的饱和度。具体来说，是表明一种颜色中是否含有白或黑的成份。假如某色不含有白或黑的成份，便是纯色，彩度最高；如含有越多白或黑的成份，它的彩度亦会逐步下降。色彩的视觉效果研究表明，色彩能给人的心理带来刺激，能影响人的情绪。例如，在红色环境中，人的脉搏会加快，血压有所升高，情绪兴奋冲动。正是由于色彩对人类心理的情绪化作用，色彩在艺术设计中才具有如此重要的作用色彩的心理感觉不同的颜色给人带来不同的心理感受。红色红色是所有色彩中对视觉感觉最强烈和最有生气的色彩，它炽烈似火，壮丽似日，热情奔放如血，是生命崇高的象征。刺激效果，能使人产生冲动，愤怒