网页的版式.pptx

2024/4/19 2024/4/19 周五周五北大出版社北大出版社1 16.1 6.1 版式设计概述版式设计概述 本节主要讲述有关网页版式设计的理论知识以及版式设本节主要讲述有关网页版式设计的理论知识以及版式设计的创新思路。包括版式设计原理及意义、页面内容的组织计的创新思路。包括版式设计原理及意义、页面内容的组织原则、网页布局类型及特点、版式设计的创新思路。原则、网页布局类型及特点、版式设计的创新思路。2024/4/19 2024/4/19 周五周五北大出版社北大出版社2 2 6.1.1 6.1.1 版式综述版式综述 1.网站与版式设计 2.版式设计原理 网页版式设计的内容主要包括网页中的文本设计和图像设计。网页的版式设计是基于网页内容的，而且还要注重图像的处理和编排。3）比例与适度 1）重复与错位 2）对称与对位 4）变异与秩序 5)虚实与留白 6）变化与统一 2024/4/19 2024/4/19 周五周五北大出版社北大出版社3 33.页面内容的组织 1）主次分明，突出中心 2）大小分配，相互呼应 3）图文并茂，相得益彰2024/4/19 2024/4/19 周五周五北大出版社北大出版社4 4 6.1.2 网页布局 网页有一个好的布局，会令网站访问者耳目一新，同样可以使访客容易在网站内找到所需要的信息。分析现有网络上所呈现的网页结构，页面布局类型可分为：分栏型、区域划分型、综合型。1.分栏型 2.区域划分型 3.综合型 6.1.3 6.1.3 创新思维 版面设计是从模仿、借鉴到创新的必由之路。如果只停留在以往的一些版面结构，只是持续的仿效或简单的复制，设计者就很难有所提升、突破，终将被所淘汰。设计者应该尽快朝着“创新”的方向努力，独辟蹊径，设计出独特的风格，特别对于游戏类、时尚类网站的版式设计更需要有创新思维、独特的设计风格。2024/4/19 2024/4/19 周五周五北大出版社北大出版社5 5 1.冲破传统 网页的版面设计，要打破传统思路，首先要从网页版式的基本要素文字与图形上着手改变。2.融合创新 现代版式设计要体现时代气息，就其结构形式“只有更好，没有最好”；就其结构效果可有“完全手册”，没有“终结模式”。3.时尚 时尚总是从一个极端跳向另一个极端，永无止境地寻求标新立异。2024/4/19 2024/4/19 周五周五北大出版社北大出版社6 6 6.1.4 6.1.4 本章案例简介本章案例简介 本章中将通过三栏版式三栏版式结构布局和综和型综和型版式结构布局2个案例，来讲解网页的版式设计的方法及技巧，通过文字和图像的合理编排，利用版式设计原理来制定网页的布局。6.2 6.2 实训十三实训十三实训十三实训十三:版式设计版式设计版式设计版式设计-网站的布局网站的布局网站的布局网站的布局 案例说明：案例说明：本节为三分栏布局和综合型布局的版式设计案例，三分栏布局网站以产品为主，页面结构清晰，浏览者可以很容易地找到自己所需要的信息。综合型结构网站不受任何拘束，完全根据信息的需求情况而制定的，打破了框架的束缚，页面设计很自由，空间感强。2024/4/19 2024/4/19 周五周五北大出版社北大出版社7 7效果图如下效果图如下:三栏版式三栏版式 综合型综合型2024/4/19 2024/4/19 周五周五北大出版社北大出版社8 8 提示：网页版式的制作工具可以用firework、photoshop等图形图像处理软件。知识拓展:（1）骨骼型（2）满版型（3）分割型（4）中轴型（5）曲线型（6）倾斜型（7）对称型（8）中心型（9）三角形（10）自由型2024/4/19 2024/4/19 周五周五北大出版社北大出版社9 9本节知识点:1、采用直线的视觉直线的视觉设计，使页面产生简洁而清晰易读的视觉效果，能直接传达主题内容。2、采用曲线为主线曲线为主线的视觉设计，页面具有流畅的美感，跳跃性、层次性及空间感增强，页面信息编排更加灵活。3、以一个焦点为基准焦点为基准，页面往四面散开或者聚拢，而这个焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关。4、采用无规则为主线无规则为主线的视觉设计，页面跳跃性强，页面内容随机点击率高；页面信息编排自由、灵活，加上FLASH动画效果，设计风格更具独特。不同的视觉设计形成了不同的网页布局风格。2024/4/19 2024/4/19 周五周五北大出版社北大出版社10106.3 本本 章章 小小 结结 本章主要介绍网页版式的设计，包括版式设计的原理，网页版式的页面信息组织，网页布局类型和版式设计的创新思维。版式设计的原理主要介绍重复与错位、对称与对位、比例与适度、变异与秩序、虚实与留白、变化与统一的版式结构，页面内容的组织主要介绍页面内容要主次分明、大小分配合理以及图文并茂，网页布局类型主要介绍分栏型、区域划分型、综合型，版式设计的创新思维主要介绍版式设计要突破传统、要有创新意识、还要能够跟上时尚流行。举了两个典型的案例。读者通过多次练习，结合所学的，灵活应用于不同类型的网站，设计出有特点的版式风格。2024/4/19 2024/4/19 周五周五北大出版社北大出版社11116.4 习习 题题1.1.选择：选择：（1 1）网页的版式设计主要是要把有效的什么传达给受众（网页的版式设计主要是要把有效的什么传达给受众（）A.A.色彩色彩 B.B.图形图形 C.C.点线面点线面 D.D.信息信息 （2 2）使用点、线、面这三个形态的基本要素，可以使页面产生使用点、线、面这三个形态的基本要素，可以使页面产生安定、整齐、规律的统一，是属于怎样的版式设计安定、整齐、规律的统一，是属于怎样的版式设计 （）A.A.错位错位 B.B.重复重复 C.C.虚实虚实 D.D.变异变异 （3 3）下面选项不属于对称形式的特点的是下面选项不属于对称形式的特点的是 （）A.A.稳定稳定 B.B.庄严庄严 C.C.错位错位 D.D.秩序秩序 （4 4）下面哪一种美是版式设计的灵魂，能体现页面的科学性和下面哪一种美是版式设计的灵魂，能体现页面的科学性和条理性条理性 （）A.A.变异美变异美 B.B.秩序美秩序美 C.C.留白美留白美 D.D.重复美重复美 2024/4/19 2024/4/19 周五周五北大出版社北大出版社1212（5 5）版面设计中哪一种的表现手法可以使受众对页面产生联）版面设计中哪一种的表现手法可以使受众对页面产生联想空间想空间 （）A.A.虚实虚实 B.B.错位错位 C.C.变异变异 D.D.重复重复 （6 6）版面设计中页面的内容组织原则有）版面设计中页面的内容组织原则有 （）A.A.主次分明主次分明 B.B.大小分配均衡大小分配均衡 C.C.图文并茂图文并茂 D.D.三种都是三种都是 （7 7）下列哪一种页面布局是适合信息量大的网站）下列哪一种页面布局是适合信息量大的网站 （）A.A.分栏型分栏型 B.B.区域划分型区域划分型 C.C.综合型综合型 D.D.无规则型无规则型 （8 8）下面哪一种设计效果不能产生新颖独特的个性（）下面哪一种设计效果不能产生新颖独特的个性（）A.A.无规则无规则 B.B.神秘的色彩神秘的色彩 C.C.秩序规律秩序规律 D.D.变化的空间变化的空间 2024/4/19 2024/4/19 周五周五北大出版社北大出版社13132.2.填空填空（1 1）版式设计不仅是一种技能，更实现了版式设计不仅是一种技能，更实现了_与与_的的高度统一。高度统一。（2 2）网页版式设计的内容主要包括网页中的网页版式设计的内容主要包括网页中的_和和_。（3 3）从人的视觉感官来分析，从人的视觉感官来分析，_能求得最大限度的和谐，能求得最大限度的和谐，使版面被分割的不同部分产生相互联系。使版面被分割的不同部分产生相互联系。（4 4）_与与_是形式美的总法则。是形式美的总法则。（5 5）页面布局类型可分为：页面布局类型可分为：_、_、_。（6 6）页面的内容组织主要是指页面中页面的内容组织主要是指页面中_和和_等对象等对象的合理组合。的合理组合。（7 7）突破传统的版面设计思路突破传统的版面设计思路,要防止要防止_、_、_等不良倾向。等不良倾向。（8 8）版面设计是从版面设计是从_、_到到_的必由之路。的必由之路。2024/4/19 2024/4/19 周五周五北大出版社北大出版社14143.3.实践题实践题 （1 1）运用对称的手法编排饮料的网站版面。运用对称的手法编排饮料的网站版面。（2 2）留白在版式设计中起到衬托主题的作用和给人一种轻松留白在版式设计中起到衬托主题的作用和给人一种轻松的感觉，产品为主的网页比较适用。运用留白的手法设计笔的感觉，产品为主的网页比较适用。运用留白的手法设计笔记本电脑的网站版面。记本电脑的网站版面。（3 3）倾斜型的版面布局具有不稳定感或强烈的动感，引人入倾斜型的版面布局具有不稳定感或强烈的动感，引人入目，运用倾斜型的版面布局设计时尚类网站界面目，运用倾斜型的版面布局设计时尚类网站界面（4 4）图片、文字按照曲线的形态在页面上进行排列，使页面图片、文字按照曲线的形态在页面上进行排列，使页面整体的结构呈曲线状态，产生节奏和韵律，这就是曲线型的整体的结构呈曲线状态，产生节奏和韵律，这就是曲线型的版面特点。运用曲线型的版面效果设计化妆品的网站页面。版面特点。运用曲线型的版面效果设计化妆品的网站页面。（5 5）满板型主要是以图像为主，充满整个版面，并加以图像满板型主要是以图像为主，充满整个版面，并加以图像上文字的配置，视觉传达直观而强烈。运用满板型的版面效上文字的配置，视觉传达直观而强烈。运用满板型的版面效果设计一个宣传手机产品的网站页面。果设计一个宣传手机产品的网站页面。2024/4/19 2024/4/19 周五周五北大出版社北大出版社1515（6 6）中轴型的版面布局是通过图片或文案的排列效果，版面中轴型的版面布局是通过图片或文案的排列效果，版面按水平或垂直排列，水平排列的版面给人稳定、安静、和平按水平或垂直排列，水平排列的版面给人稳定、安静、和平与含蓄之感，垂直排列的版面给人强烈的动感。设计一个垂与含蓄之感，垂直排列的版面给人强烈的动感。设计一个垂直为中轴的汽车网站版面。直为中轴的汽车网站版面。（7 7）焦点为主的布局焦点为主的布局,按照主从关系的顺序，使放大的主题形按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。运用焦点的优势设象成为视觉焦点，以此来表达主题思想。运用焦点的优势设计手表的网站版面。计手表的网站版面。（8 8）利用利用FLASHFLASH动画软件制作一个无规则为主线的个人主页，动画软件制作一个无规则为主线的个人主页，设计出一个属于自己独特的版面。设计出一个属于自己独特的版面。