《网站版式设计与颜色搭配.ppt》由会员分享，可在线阅读，更多相关《网站版式设计与颜色搭配.ppt（73页珍藏版）》请在三一办公上搜索。
1、第3章网站版式设计与颜色搭配,教学目标：本章重点介绍“网站建设流程”中的“具体设计”阶段中所使用到的相关知识，为读者实际动手建站打好基础。了解网页的基本元素，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中放什么？怎么放？）。重点和难点：1了解视觉流程原理 2学习构成原理在网页中的应用 3认识网页的基本元素 4学习网页版式设计 5网站的颜色搭配,3.1 视觉流程原理3.2 构成设计在网页中的应用3.3 网页版式设计 3.4 网站布局3.5网站色彩搭配3.6版式与色彩的综合案例,3.1 视觉流程原理,1、视觉流程的概念人类的视觉流程习惯是由人类的眼晶体结构的生理构造决定的，人眼只能产生一
2、个焦点，不能同时将视线集中在一处以上，所以人在阅读信息的时候总有流动的习惯，先看这些再看那些。视觉流程是人的视线在被观察物上的运动过程。设计中合理的运用视觉流程对于信息的有效传达极为重要，但同时又是很容易被网页设计者忽视的因素。,(1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大的上部、左侧、左上与中上又被称为最佳视域。,最佳视域,2、视觉流程原理,(2)视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。,(3)加入
3、一些线段可以引导视觉流程(P35图)一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐变排列时，视线会强烈地按照排列方向流动。,3、结论：根据视觉流程的理论，设计师在设计网页时：（1）把信息有一定目的顺着视觉运动规律安排在页面中。（2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、搜索框等，如公司的标志往往放在页面的
4、左上角，最新消息也时常位于页面的上部等等。,3.2 构成设计在网页中的应用,点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何处理好三者之间的关系，因为任何视觉形象或者版式构成，归根结底，都可以归纳为点、线、面。网页设计师应当将平面构成理论作为网页设计视觉形象表现的指导思想，在具体设计过程中大胆运用多种视觉元素形态变化和表现手法。它们是创造形式美的基本要素，使网页具有不同的审美倾向。,1点的构成,概念：在网页中，一个单独而细小的形象可以称之为点。它没有指向性和具体的尺度，是相对周围环境所定义的一个相对概念。如一个按钮、一个标志等。功能：(1)点具有集中视线
5、特征，可以凝聚注意力。(2)点具有很强的调节和修饰作用。(3)多个点的使用有时还可以引导视觉流程。,举例：以图形构成的按钮即可视为点。,举例：点具有凝聚视觉注意力的作用，在平面上只有一个点时，我们的视线就会集中在这个点上。,当有两个等大的点或多个等大的点相距一定的距离时，我们的视觉焦点就会在这几个点之间往返，在心理上产生了一种“线”的感觉，引导视觉流程。,点是构成网页的最基本元素，具有装饰和活跃画面气氛的作用。同时定位画面的视觉流程，使网页更加统一。,2线的构成,线有长度属性，而无粗细的限制。线起分隔和修饰的作用。线比点具有更强的心理感受。不同的线给人不同的感觉。网页中的线的类型有：（1）直线
6、（横直线、竖直线、斜直线）（2）曲线（几何曲线、自由曲线）,网页中直线的应用非常广泛，使用直线可以非常清晰明了地划分页面的布局结构。,曲线划分页面的布局结构，自由、随意、运动的感觉,线的方向不同，也能激发起不同的心理感受。例如，水平线给人的感觉均衡、安定、平衡和静止。,垂直线则给人强有力的支柱、公正和信任的感觉。,斜线给人的感觉是生动、活泼、不稳定，适合用来体现运动和速度的感觉。,3面的构成,（1）直线形面,具有简洁明快、有序和理性的特征，容易被人理解和记忆。在网页中，一幅图像可以被看做面，一段文字也可以看成是面。,曲线形面也分为几何曲线形和自由曲线形两种。富于变化和动感。它所表现出来的流动性
7、和弹性给人以无限想象，使人感到有种生命活力。它具有同曲线一样的女性特征。,（2）曲线形面,偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、无序的形态，有着丰富的象征意义。,（3）偶然形面,4构成的形式,（1）重复构成形式 重复构成是指用同一形态或同组形态有序地反复出现，形成某种规律的构图形式。重复构成具有强化记忆的功能，反复地出现会不断地加强视觉冲击，加深形象认识。,（2）近似构成形式,在重复构成中保持原有规律性的基础上，把重复元素的基本形(大小、方向、色彩等)进行微小变化，就演变成了
8、近似构成形式。近似构成形式中既有形式变化，又有整体的统一。,（3）渐变构成形式,渐变是一种常见的视觉效果，也是设计中常常使用的技巧。渐变是指构图基本形(形状、大小、方向、颜色等)逐渐而有规律地变化。它能够表现出空间感和时间感。,（4）特异构成形式,在重复、近似、渐变构成中，为了改变规律性的单调感，有意识地出现不合规律的个别基本形，由此产生强烈的对比效果，这种构成形式就称之为变异。变异的形式有大小变异、形状变异、方向变异、肌理变异、色彩变异等。,（5）对比构成形式,在两种或者两种以上的对象之间，有着明显的差别，我们就称之为对比。对比是一种较为自由的构成表现形式。对比又可以划分为形的对比(大与小、
9、方与圆、长与短、粗与细、曲与直等)、质的对比(刚与柔、轻与重、强与弱等)、势的对比(动与静、聚与散、快与慢等)、颜色的对比（色相、明度、纯度等）。,（6）密集构成形式,把基本形态按密集与疏散、虚与实、向心与扩展等方式进行构成的形式称为密集构成形式。它具有方向性和目的性的运动特征。在这种形式的构图中，元素最密集的地方和最稀疏的地方均为视觉的焦点。,（7）发射构成形式,以一点或多点为中心，呈向周围发射、扩散等视觉效果，具有较强的动感及节奏感。格线和基本形呈发射状的构成形式，称为发射构成。此种类的构成，是骨格线和基本形用离心式、向心式、同心式以及几种发射形式相叠而组成的。,（8）肌理构成形式,肌理是
10、物质表面的形态，通常是指物体表面的纹理感觉。它具有粗糙、细腻、柔软、生硬、干燥、湿润等特性，既有自然形态的肌理(如水波纹、木纹、树叶纹等)，也有人为形态的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可作为网页的背景出现在页面设计中，使用适当的肌理作为背景图案，将起到很好的视觉调节作用。,3.3 网页版式设计,1水平分割,水平分割强调的是层次感和精确感，并有助于不同信息的分类，通常上方为导航栏，或者是企业动态形象（Flash），下方是内容。水平分割应当考虑到分割面积。水平不均匀分割，如果上半部分放置标题或导航，则面积较小，上半部分放置主体内容，则面积应适当加大。,2垂直分割,垂直分割和水平
11、分割有很多相似点，把水平分割的页面旋转90度，即为垂直分割效果。Nikon体育用品网站就应用了这种构图，这种构图结构清晰，给人工整、坚定和直爽的感觉，能够树立独立的企业形象。,3水平垂直分割,水平垂直分割是上面两种分割形式的综合运用，整个页面中既有水平分割的部分，又有垂直分割的部分，互相交织构成一种网状结构。荷兰壳牌石油公司的网站主页，页面给人一种非常稳定的感觉，主要用于大型企业或者门户网站这样的信息量巨大的网站主页。,4变化分割,变化分割是在水平分割和垂直分割的基础上，添加斜线和曲线的效果，这样的页面版式结构给人自由、运动和时尚的感觉。,注意事项,形式要和主题相吻合网站设计强调整体风格的统一
12、,3.4 网站布局,网页布局的标准 美观、适用1、网页中的基本元素(1)网站标志LOGOLOGO的大小：88*31、120*60、120*90(2)网站导航(一组超链接，帮助访问者快速准确地浏览网站)原则：简洁，容易操作位置：顶部或左侧常用的方式：悬停式(3)网页的主体内容注意视觉流程原理、文图结合、动静结合、松紧适当。,3.4 网站布局,(4)页眉：对网站起宣传的作用或用于广告。富有特色的页眉也是网站的一个重要标志。一般放网站的口号、广告语等信息。(5)页脚：名称、地址、版权、联系方式等信息(6)站内搜索(7)广告举例（见下页）,2网页布局的步骤,（1）制作网页的目的及内容：确定网页中需要放
13、什么内容，并收集资料 应该明确制作网页的目的，制作网页要完成什么任务，要达到什么样的要求。在这一阶段，搜集制作网页的有关材料，这些材料应该是真实、正确、详细的。为了以后制作网页的方便，应该将这些内容写成书面材料，以免制作时漏掉某些项目,（2）手绘布局在实际设计网页之前，最好要在纸上绘制出页面版式草图，以供设计时参考。手绘设计网页布局更加自由，根据客户的要求，按照掌握的设计方法和一些构图规律来进行设计。这个草图不会给客户看，尽量绘制得简单、明了。在设计时准备工具。准备白纸若干，几支铅笔和一块橡皮，以免在设计时由于缺少工具打断设计思路。解决在什么位置放什么内容的问题,步骤1：尺寸比例设定，目前一般
14、1024768的分辨率为的浏览屏幕大小，在电脑刚刚普及配置不高时800600的分辨率。根据屏幕比例先在白纸上画出象征浏览器窗口的矩形，这个矩形是布局的范围。步骤2：选择合适的版式设计，安排网页布局。步骤3：确定大的版式后增加细节网站标志、网页导航、网页的主体内容、网页页眉、网页页脚和多媒体等。,（3）软件布局,可以使用Firework的图像编辑功能来设计网页版式布局，也可以用Word、Photoshop或者是CorelDRAW。Word进行简单的排版比较便捷；Photoshop所具有的对图像的编辑功能在设计网页布局的图像设计上较为方便，利用Photoshop可以方便地使用颜色，使用图形，并且可
15、以利用层的功能设计出用纸张无法表现的布局意念；CorelDRAW进行简单的排版和颜色配置有着更大的优势。一般来讲使用Firework或CorelDRAW进行排版的设计师多一些。,Word布局示意图,Photoshop布局示意图,CorelDRAW布局示意图,3.5 网站色彩搭配,1色彩的基本概念(1)现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。,（2）原色、间色、复色,原色，又称为基色，即用以调配其他色彩的基本色。原色的色纯度最高，最纯净、最鲜艳。可以调配出绝大多数色彩，而其他颜色不能调配出三原色(红、黄、蓝)。间色，又叫“二次色”，是由2种原色调配出
16、来的颜色。红与黄调配出橙色，黄与蓝调配出绿色，红与蓝调配出紫色。橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。复色：除了原色和间色以外的其它色。,比较简单的原色和间色的色环。,（3）色彩的三要素,任何一种彩色具备三个要素：色相、明度和纯度。其中非彩色只有明度属性。色相，指的是色彩的相貌、名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低
17、，颜色越暗。主要用于一些游戏类网站，充满神秘感。不同色彩明度不同（例如白色比黑色明度高），相同色彩在不同强弱的光线下也有不同的明度。纯度，指色彩的纯净度，指含杂色的成份多少。纯度高的色彩纯，鲜亮；纯度低的色彩暗淡，含灰色比较多。,2网页色彩构成的基本方法,网页的色彩构成是在网页设计中根据不同的目的，以一定的量化手段将两种或两种以上的颜色按照一定的原则组合或搭配起来。两种或两种以上的颜色组合或搭配在一起就有了对比效果，这种对比效果有的看上去很舒服，这是一种色彩的调和。有的看上去却很不舒服，这是由于色彩的不调和所造成的。因此色彩的对比与调和是一对矛盾，要解决好这个矛盾需要学习一些色彩构成基本的方法
18、。网页的色彩构成主要从对比、调和两个方面来介绍，但在学习中一定要注意综合考虑问题。在对比中体会调和，在调和中兼顾对比。,（1）以色彩对比为主的构成方法,颜色通过对比才能产生好的效果。是获得丰富视觉效果的最好方法，色彩有对比，画面就避免了单调感。对比要适度，否则会形成杂乱的感觉。对于初学者，我们可以设定一些限制条件：首先以画面面积的70确定主导色。这样一方面使画面不会过于单调，不致过分纷乱，同时也比较符合人们的视觉习惯。其次，每个独立画面的用色限制在4到5个。另外，对色环的渐变关系要熟练地掌握。,明度对比,特点：充分地表现出画面的立体感、空间感与层次关系。首先确定主导色：a)低明度色调。主导色为
19、低明度颜色并在面积上占绝对优势，即占画面面积的70左右。b)中明度色调。主导色为中明度颜色并在面积上占绝对优势，即占画面面积的70左右。c)高明度色调。主导色为高明度颜色并在面积上占绝对优势，即占画面面积的70左右。,其次，确定与其构成对比关系的对比色。按照色彩构成的量化关系，以画面面积的l8作为对比色的面积。a)强对比。以画面面积的l8作为对比色，对比色与主导色之间明度差7到8个色阶的画面为长调。b)中对比。以画面面积的18作为对比色，对比色与主导色之间明度差3到5个色阶的画面为中调。c)弱对比。以画面面积的18作为对比色，对比色与主导色之间明度差l到2个色阶的画面为短调。,纯度对比,为了说
20、明问题，可将单色的纯度分为12个纯度色阶。按纯度衰减的不同分为高、中、低三个区域。,首先，确定主导色。a)鲜调：高纯度颜色占画面面积的70左右。b)中调：中纯度颜色占画面面积的70左右。c)灰调：低纯度颜色占画面面积的70左右。其次，确定对比色。a)强对比：以画面面积的l8作为对比色，对比色与主导色彩的纯度差为8到10。b)中对比：以画面面积的l8作为对比色，对比色与主导色彩的纯度差为6到7。c)弱对比：以画面面积的18作为对比色，对比色与主导色彩的纯度差为2到3。,同一色对比，色相之间在色相环上的距离角度在15度以内的为同一色相。同一色相对比是最弱的色相对比，仅能构成明度及纯度的对比。因此要
21、获得视觉上的满足感就要加强在明度及纯度上的对比关系。如深绿和浅绿，深红和浅红等。类似色对比，色相之间在色相环上的距离角度在45度左右的为类似色相。在色相对比上属中对比，其明度及纯度上的对比关系已经体现在其中，比同一色相对比明显、丰富、活泼。因此即显得统一、和谐、雅致又略有变化。如果适度改变类似色相的明度、纯度可构成很多优美、统一和谐的色彩关系。,色相对比,对比色对比，色相之间在色相环上的距离角度在100度左右的为对比色相。在色相对比上属强对比，与类似色对比相比显得鲜明、饱满、强烈。但处理不好容易杂乱，如与明度、纯度相配合，可构成很多审美价值很高的以色相对比为主的色调。补色对比，色相之间在色相环
22、上的距离角度在180度左右的为互补色相。在色相对比上是最强对比，具有更刺激、更强烈的对比效果。能满足视觉全色相的要求。但如果运用不当，特别是高纯度的互补色相，会产生生硬的感觉。色环中相对的两种色彩。如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。补色在网站设计中用得也极为普遍。,冷暖色调对比,综合人们的经验与感受，在众多色相中可以以橙色作为暖极、以蓝色作为冷极。按照这样的逻辑定义，色相环就将分成暖极、暖色、中性微暖色、中性微冷色、冷色、冷极等几个区域。暖色，如黄色，橙色，红色，紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电
23、子商务网站，儿童类网站等等。用总体感觉活泼、温馨、喜庆、热烈等。冷色，如绿色，蓝色，蓝紫色等等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重、清爽等效果。,（2）以色彩调和为主的构成方法,当网页中色彩对比得太强烈，视觉上产生了不舒适超出了我们的预期，我们就要设法来调和。色彩调和的目的是将两个以上具有强视觉刺激的色彩组合调整成为和谐而统一的整体，使其对比的力量减弱。,同一调和构成,颜色之间的同一性越强，则调和性就越强。具体方法是：各自加入同一颜色、降低明度差等。让一种颜色占主导地位，减少其它颜色的面积。在各种颜色周围加非彩色边框
24、。,秩序调和构成,秩序调和是一种颜色渐变或重复的组织形式。它是把不同明度、色相、纯度的色彩组织起来，形成渐变的或有节奏、有韵律的色彩效果。使杂乱无章的色彩有条理、有次序、和谐排列起来的方法就成为秩序调和。在秩序调和构成中，可以从三个方面来考虑问题：以明度为主的秩序构成。主要是体现出立体感和空间感。以纯度为主的秩序构成。以一对互补色互混形成色彩序列，使强烈的对比关系有所缓和。以色相为主的秩序构成。按色相秩序排列构成火暴、绚丽、活泼的画面效果。,3色彩联想,人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的，而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物，这种因
25、某种色彩而出现的感受，我们就称之为色彩的联想。色彩的联想是通过过去的经验，记忆或知识而取得的。(见书)不同的色彩具有了其特定的意义。色彩的象征意义多数情况下也是一种文化认同。不同的人群会对相同的色彩做出不同的理解。所以设计师应该考虑面向人群的特点。4、各类网站的参考色（P50）,3.6 版式与色彩的综合案例,网站的风格形成主要依赖于版式设计和页面的色调处理，以及图片和文字的组合形式等，解决以上问题需要网站的设计者具有一定的美术修养，通过剖析不同网站页面的版式和色彩搭配，来体会不同网页的设计风格。,（1）沙宣宣传网站,版式为不规则形，富有动感，主色调为黑色，搭配艳丽的红色，衬出时尚高雅和神秘的感
26、觉。,沙宣网站设计 http:/,（2）可口可乐宣传网站,版式为水平分割强调的是层次感和精确感，并有助于不同信息的分类，上方为是企业标志和导航栏，中间是宣传企业形象的flash，在网站的下方应用了曲线来分割画面，使稳重的构富有动感。网站的主要色彩为浅灰色，强调产品的品质，而大部分的红的增加了画面的活力，不同颜色的小的可乐瓶突出了产品的丰富，而众多颜色能够和谐的基础，一是色彩的明度纯度接近，二是大面积的灰色和动画的黑色起到了调和的作用。,可口可乐宣传网站/,（3）众泰汽车宣传网站,企业网站版式为水平分割，看起来稳重，给人一种信任感。画面的背景颜色为深灰色渐变，充满科技味道且稳定大方。网页的上半部（版面视觉中心点）作为网页的主要内容放置汽车的动态形象广告，红色汽车在灰色的背景的映衬下，更加醒目，起到了宣传新品的作用。,众泰汽车宣传网站 http:/,（4）安利中国宣传网站,网站构图结构清晰，给人工整、坚定和直爽的感觉，树立了独立的企业形象。整个画面以蓝色为主色调，突出科技和食品安全。,安利中国网站 http:/,两点建议：(1)多看、多感悟(2)选修一些艺术类的公选课,本章作业书面作业：P53简述题，“举例说明”请写出URL。,
