第3章版式设计与颜色搭配复习课程.pptVIP

第3章网站版式设计与颜色搭配; 教学目标： 本章重点介绍“网站建设流程”中的“具体设计”阶段中所使用到的相关知识，为读者实际动手建站打好基础。了解网页的基本元素，根据视觉流程原理，依据构成原理来进行网页版式设计（网页中放什么？怎么放？）。 重点和难点： 1．了解视觉流程原理 2．学习构成原理在网页中的应用 3．认识网页的基本元素 4．学习网页版式设计 5．网站的颜色搭配;3.1 视觉流程原理 3.2 构成设计在网页中的应用 3.3 网页版式设计 3.4 网站布局 3.5网站色彩搭配 3.6版式与色彩的综合案例;3.1 视觉流程原理;(1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。所以注意价值最大的上部、左侧、左上与中上又被称为最佳视域。;(2)视觉心理学研究表明人在看一个平面内的信息时，上半部分让人轻松，下半部让人稳定，左侧让人自在而右侧让人压抑。这些心理特点都影响着人类的阅读习惯。;(3)加入一些线段可以引导视觉流程(P35图) 一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐变排列时，视线会强烈地按照排列方向流动。;3、结论： 根据视觉流程的理论，设计师在设计网页时： （1）把信息有一定目的顺着视觉运动规律安排在页面中。 （2）重要的信息一般来说应该让浏览者最容易发现，而不是深藏在多层链接之后，按重要性依次放置其他内容。重要信息有：LOGO、重要广告、最新新闻、导航条、搜索框等，如公司的标志往往放在页面的左上角，最新消息也时常位于页面的上部等等 。;3.2 构成设计在网页中的应用;1．点的构成;举例：以图形构成的按钮即可视为点。;举例：点具有凝聚视觉注意力的作用，在平面上只有一个点时，我们的视线就会集中在这个点上。;当有两个等大的点或多个等大的点相距一定的距离时，我们的视觉焦点就会在这几个点之间往返，在心理上产生了一种“线”的感觉，引导视觉流程。;点是构成网页的最基本元素，具有装饰和活跃画面气氛的作用。同时定位画面的视觉流程，使网页更加统一。;2．线的构成;网页中直线的应用非常广泛，使用直线可以非常清晰明了地划分页面的布局结构。;曲线划分页面的布局结构，自由、随意、运动的感觉;线的方向不同，也能激发起不同的心理感受。例如，水平线给人的感觉均衡、安定、平衡和静止。;垂直线则给人强有力的支柱、公正和信任的感觉。;斜线给人的感觉是生动、活泼、不稳定，适合用来体现运动和速度的感觉。;3．面的构成; 曲线形面也分为几何曲线形和自由曲线形两种。富于变化和动感。它所表现出来的流动性和弹性给人以无限想象，使人感到有种生命活力。它具有同曲线一样的女性特征。;偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、无序的形态，有着丰富的象征意义。;4．构成的形式; （2）近似构成形式; （3）渐变构成形式;（4）特异构成形式;（5）对比构成形式; （6）密集构成形式;（7）发射构成形式;（8）肌理构成形式;3.3 网页版式设计 ;; 2．垂直分割 ;3．水平垂直分割 ; 4．变化分割;注意事项;3.4 网站布局;3.4 网站布局;;2．网页布局的步骤;（2）手绘布局 在实际设计网页之前，最好要在纸上绘制出页面版式草图，以供设计时参考。手绘设计网页布局更加自由，根据客户的要求，按照掌握的设计方法和一些构图规律来进行设计。这个草图不会给客户看，尽量绘制得简单、明了。在设计时准备工具。准备白纸若干，几支铅笔和一块橡皮，以免在设计时由于缺少工具打断设计思路。 解决在什么位置放什么内容的问题;步骤1：尺寸比例设定，目前一般1024×768的分辨率为的浏览屏幕大小，在电脑刚刚普及配置不高时800×600的分辨率。根据屏幕比例先在白纸上画出象征浏览器窗口的矩形，这个矩形是布局的范围。 步骤2：选择合适的版式设计，安排网页布局。 步骤3：确定大的版式后增加细节网站标志、网页导航、网页的主体内容、网页页眉、网页页脚和多媒体等。;（3）软件布局 ;Word布局示意图 ;Photoshop布局示意图 ;CorelDRAW布局示意图 ;3.5 网站色彩搭配;（2）原色、间色、复色;比较简单的原色和间色的色环。 ;（3）色彩的三要素;2．网页色彩构成的基本方法;（1）以色彩对比为主的构成方法; ① 明度对比;其次，确定与其构成对比关