模块三网页美工技术 单元2：美工基础·网页版面设计 一、认识网页版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息 传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成协调、美观、有 特点的页面。 版式设计的三个重要因素：元素造型、版式形式、版式构成。 二、网页元素造型 网页元素造型即文字、图形、图像等在画面中的大小、方向、排列组合，也就是说对 点、线、面及留白的处理。 点的作用：点有集中醒目的特点，给人明确、坚定、充实的感觉，可强调重点表现的 对象。如图0302-1（左）所示。 线与面的作用：线与面不仅能作为造型元素，同时还是划分空间的有力武器。由线和 面形成的对空间的分割与遮挡使空间的层次得以延伸，形成距离美感。 一张普通的图片经线、面分割后，形成了色调、面积等方面的对比关系，使画面的层次分 明，突出了中心内容。如图0302-1（中）所示。 留白：所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。“留白”与 其它元素一样具有大小、形状等特征，它与其它元素的关系就是“图与“地的关系，是相互 依存、相互衬托的。 在网页设计中，“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白 空间有时给人的视觉冲击会高于其它的元素所带来的效果。如图0302-1（右）所示。 SPA
模块三 网页美工技术 单元 2： 美工基础·网页版面设计 一、认识网页版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息 传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成协调、美观、有 特点的页面。 版式设计的三个重要因素：元素造型、版式形式、版式构成。 二、网页元素造型 网页元素造型即文字、图形、图像等在画面中的大小、方向、排列组合，也就是说对 点、线、面及留白的处理。 点的作用：点有集中醒目的特点，给人明确、坚定、充实的感觉， 可强调重点表现的 对象。如图 0302-1（左）所示。 线与面的作用：线与面不仅能作为造型元素，同时还是划分空间的有力武器。由线和 面形成的对空间的分割与遮挡使空间的层次得以延伸，形成距离美感。 一张普通的图片经线、面分割后，形成了色调、面积等方面的对比关系，使画面的层次分 明，突出了中心内容。如图 0302-1（中）所示。 留白：所谓“留白”，就是除文字、图片、图案等信息要素以外的空白空间。“留白”与 其它元素一样具有大小、形状等特征，它与其它元素的关系就是“图”与“地”的关系，是相互 依存、相互衬托的。 在网页设计中，“无意”的留白应与“有意”的造型同样引起足够的重视，因为“无意”的留白 空间有时给人的视觉冲击会高于其它的元素所带来的效果。如图 0302-1（右）所示
图0302-1 点线面之间的关系：根据大小、方向等因素，文字与图片在一个页面中既可以是点， 也可以是线，也可以是面。孤立的、小的文字与图片，在页面中往往被视为页面中的点。按 一定方向、秩序排列的字与图片会形成视觉上的线，它的存在在界面中一般起到引导和分割 的作用。面多数是由文字或图片、图形形成的，有时也会是由小字块构成，起到突出主题和 衬托的作用。 三、网站版式形式 其构成形式主要有：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变 化等。 1.分割与比例 空间分割是设计中最常用的造型方法之一，它所解决的就是如何把文字、图形、图像 巧妙的配置在限定的版面空间的问题，同时还要确保有主有次，相互关联。如图0302-2（左） 所示。 图0302-2 2.重复与渐变 重复是指相同或相似的形态规律性的连续出现。其实重复是构成中的最常见的一种形 式，一定的秩序的重复能够给人统一、节奏、连续、平稳等感觉，重复又分单纯重复和渐变 两种。单纯重复就是单一个体的反复出现，大的形状、大小、方向、颜色都不作改变，这种 重复多被采用作背景图案或底纹。渐变是在重复的基础上连续性的又有一些变化，有时是形 状上的变化，有时是方向上的变化，或者是色彩的变化，这种变化与重复给人感觉整齐而多 样。如图0302-2（中右）所示。 3.对称与均衡
图 0302-1 点线面之间的关系：根据大小、方向等因素，文字与图片在一个页面中既可以是点， 也可以是线，也可以是面。孤立的、小的文字与图片，在页面中往往被视为页面中的点。按 一定方向、秩序排列的字与图片会形成视觉上的线，它的存在在界面中一般起到引导和分割 的作用。面多数是由文字或图片、图形形成的，有时也会是由小字块构成，起到突出主题和 衬托的作用。 三、网站版式形式 其构成形式主要有：分割与比例、重复与渐变、对称与均衡、节奏与韵律、统一与变 化等。 1．分割与比例 空间分割是设计中最常用的造型方法之一，它所解决的就是如何把文字、图形、图像 巧妙的配置在限定的版面空间的问题，同时还要确保有主有次，相互关联。如图 0302-2（左） 所示。 图 0302-2 2．重复与渐变 重复是指相同或相似的形态规律性的连续出现。其实重复是构成中的最常见的一种形 式，一定的秩序的重复能够给人统一、节奏、连续、平稳等感觉，重复又分单纯重复和渐变 两种。单纯重复就是单一个体的反复出现，大的形状、大小、方向、颜色都不作改变，这种 重复多被采用作背景图案或底纹。渐变是在重复的基础上连续性的又有一些变化，有时是形 状上的变化，有时是方向上的变化，或者是色彩的变化，这种变化与重复给人感觉整齐而多 样。如图 0302-2（中右）所示。 3．对称与均衡
对称分为绝对对称和相对对称。绝对对称是指以中心线或中心点为轴，作上下、左右、 旋转等同等、同量的对称，这种形式能展现出严正、庄重、肃穆、沉静的特征：相对对称是 在对称的格局中存在部分形状或色彩等方面的微小变化，这种对称形式具有对称的稳定性， 同时又富于变化。相对对称的表现形式较多，如形状置换、方向颠倒、体量变化、位置交 叠、动势变化等。如图0302-3所示。 Cacaa Select your region Narth Amenca Latn Americ Europe Eurasia Afnca Asia Pacfic em日 y号 新产u单华不酸赛 tirw Zenind 0edon1电售又 图0302-3 4.节奏与韵律 节奏的概念比较抽象，构图关系、颜色变化、形状对比都能产生节奏。在一个网页中， 节奏可能是缓慢的，也可能是铿锵有力的，这都要靠对比来实现，可以说没有对比就没有节 奏。如图0302-4（左）所示，颜色上没有对比，面积基本相等，排列均匀。我们说它缺乏 节奏。如果说我们将它改造成如图03024（中）的样子，页面明显有了变化，图形的面积、 排列都有区别，我们说它存在对比，具有了节奏。而曲线通常是表现韵律，传达浪漫、抒 情等感觉。如图0302-4（右）所示
对称分为绝对对称和相对对称。绝对对称是指以中心线或中心点为轴，作上下、左右、 旋转等同等、同量的对称，这种形式能展现出严正、庄重、肃穆、沉静的特征；相对对称是 在对称的格局中存在部分形状或色彩等方面的微小变化，这种对称形式具有对称的稳定性， 同时又富于变化。相对对称的表现形式较多， 如形状置换、方向颠倒、体量变化、位置交 叠、动势变化等。如图 0302-3 所示。 图 0302-3 4．节奏与韵律 节奏的概念比较抽象，构图关系、颜色变化、形状对比都能产生节奏。 在一个网页中， 节奏可能是缓慢的，也可能是铿锵有力的，这都要靠对比来实现，可以说没有对比就没有节 奏。如图 0302-4（左）所示，颜色上没有对比，面积基本相等，排列均匀。我们说它缺乏 节奏。如果说我们将它改造成如图 0302-4（中）的样子，页面明显有了变化，图形的面积、 排列都有区别，我们说它存在对比，具有了节奏。 而曲线通常是表现韵律，传达浪漫、抒 情等感觉。如图 0302-4（右）所示
吧：大党送材东感品景桃发 平大学民材东税色含影1 里-无女说林季焦名 图0302-4 四、网页版式构图 水平式构图：也叫做横板构图，就是把画面水平地分成几部分，分别放入图片或文字 内容。这种构图给人的感觉比较稳重、开阔、舒展、自由，适合各种不同类型的网站设计， 如图0302-5（左）所示。分割后的画面应体现主次关系，并尽量突出主题，注意不要使分 割显得过于生硬呆板，图形要生动活泼、具有动感。有时可以通过一些图形或文字的跨越打 破界限，也可以协调各区域色彩而使之调和，或处理分割区域的边缘以达到融合的目的。如 图0302-5（右）所示 TruPlaces ○ -a。 图0302-5 垂直式构图：纯粹的垂直式分割构图在网页中出现不多。这种版式的网页设计往往 对比感强，结构清晰，但变化较少，有时也不够灵活。如图0302-6（左）所示。 交叉式构图：垂直水平分割同时出现在同一个页面中，集中了垂直与水平的特点和 优势，网页浏览更为方便、快捷，适合不同浏览习惯的人群。如图0302-6（中）所示。 倾斜式构图：制作、浏览均不便故是出现不多。能给人强大的视觉冲击力，适用于运 动、时尚、娱乐等表现速度、前卫的网站。如图0302-6（右)所示
图 0302-4 四、网页版式构图 水平式构图：也叫做横板构图，就是把画面水平地分成几部分，分别放入图片或文字 内容。这种构图给人的感觉比较稳重、开阔、舒展、自由，适合各种不同类型的网站设计， 如图 0302-5（左）所示。 分割后的画面应体现主次关系，并尽量突出主题，注意不要使分 割显得过于生硬呆板，图形要生动活泼、具有动感。有时可以通过一些图形或文字的跨越打 破界限，也可以协调各区域色彩而使之调和，或处理分割区域的边缘以达到融合的目的。如 图 0302-5（右）所示 图 0302-5 垂直式构图： 纯粹的垂直式分割构图在网页中出现不多。 这种版式的网页设计往往 对比感强，结构清晰，但变化较少，有时也不够灵活。如图 0302-6（左）所示。 交叉式构图： 垂直水平分割同时出现在同一个页面中， 集中了垂直与水平的特点和 优势，网页浏览更为方便、快捷，适合不同浏览习惯的人群。如图 0302-6（中）所示。 倾斜式构图： 制作、浏览均不便故是出现不多。能给人强大的视觉冲击力，适用于运 动、时尚、娱乐等表现速度、前卫的网站。如图 0302-6（右）所示
量 图0302-6 圆弧式构图：会使画面产生自然流畅、丰富多彩的视觉效果。如图0302-7（左)所示。 背景式构图：以一张图片作为网页背景，其他网页元素都放在上面。优点：给人以非 常整体自然的感觉，创作也十分自由，一些视觉效果和无须变化的元素都可制作在背景里： 注意事项：背景图色调要柔和并留有变化页面内容的余地，不可过于繁乱、细碎，喧宾夺主， 尤其注意文字部分的背景能突出文字，不影响内容的可读性。如图0302-7（中）所示。 中心式构图：主体置于页面中心，吸引用户视线以突出主体，页面背景和其他部分简 洁、单一。如图0302-7（右）所示。 图0302-7 棋盘式构图：通过水平和垂直分割，把画面分成多个大小相近的区域，像棋盘的格子， 分别放置图片和文字内容。优点：形式活泼、随意而不失规范：页面感觉内容丰富、饱满， 具有趣味：缺点：容易分散人的注意力，不易表现比较严肃的主题，也不适合文字内容多的 页面。如图0302-8（左）所示。 散点式构图：与棋盘式相似，但更随意，无规律。讲究形散而神不散，看似零散，实 际上需精密构思。页面上的所有元素都不应是可有可无的，而是为同一个目的的服务，更深 刻地表现网站主题。如图0302-8（右）所示
图 0302-6 圆弧式构图：会使画面产生自然流畅、丰富多彩的视觉效果。如图 0302-7（左）所示。 背景式构图：以一张图片作为网页背景，其他网页元素都放在上面。 优点：给人以非 常整体自然的感觉，创作也十分自由，一些视觉效果和无须变化的元素都可制作在背景里； 注意事项：背景图色调要柔和并留有变化页面内容的余地，不可过于繁乱、细碎，喧宾夺主， 尤其注意文字部分的背景能突出文字，不影响内容的可读性。如图 0302-7（中）所示。 中心式构图：主体置于页面中心，吸引用户视线以突出主体，页面背景和其他部分简 洁、单一。如图 0302-7（右）所示。 图 0302-7 棋盘式构图：通过水平和垂直分割，把画面分成多个大小相近的区域，像棋盘的格子， 分别放置图片和文字内容。优点：形式活泼、随意而不失规范；页面感觉内容丰富、饱满， 具有趣味；缺点：容易分散人的注意力，不易表现比较严肃的主题，也不适合文字内容多的 页面。如图 0302-8（左）所示。 散点式构图：与棋盘式相似，但更随意，无规律。讲究形散而神不散，看似零散，实 际上需精密构思。页面上的所有元素都不应是可有可无的，而是为同一个目的的服务，更深 刻地表现网站主题。如图 0302-8（右）所示
2 图0302-8 并置式构图：两个以上的元素在页面上不分主次地并列放置，形成适度节奏感。排列 形式不同，画面或整齐严谨或轻松有变化，给人的感觉清新严谨，有规律性，整体感较强。 如图0302-9（左）所示 发射式构图：在空间中以一个点或几个点为中心，其它元素作向心或离心状排列。优 点：具有明显的节奏感和空间感。发射中心自然称为画面焦点及浏览者的视觉中心：缺点： 制作复杂也不易与内容结合。如图0302-9（右）所示 38°名2赳 鲜 图0302-9 五、突破 所有的规则都是入门级的，是给初学者看的，等到积累了一定的经验，好的设计师就 应从规则中找到突破口。做到不拘一格
图 0302-8 并置式构图：两个以上的元素在页面上不分主次地并列放置，形成适度节奏感。排列 形式不同，画面或整齐严谨或轻松有变化，给人的感觉清新严谨，有规律性，整体感较强。 如图 0302-9（左）所示 发射式构图：在空间中以一个点或几个点为中心，其它元素作向心或离心状排列。优 点：具有明显的节奏感和空间感。发射中心自然称为画面焦点及浏览者的视觉中心；缺点： 制作复杂也不易与内容结合。如图 0302-9（右）所示 图 0302-9 五、突破 所有的规则都是入门级的，是给初学者看的，等到积累了一定的经验，好的设计师就 应从规则中找到突破口。做到不拘一格
IDEA HMTE 0 图0302-9 【课后小结】 本讲通过案例分析讲解了网页造型元素及造型元素之间的关系、网页版面形式及版式构成
图 0302-9 【课后小结】 本讲通过案例分析讲解了网页造型元素及造型元素之间的关系、网页版面形式及版式构成