网页版式设计的图文魅力_网站美工设计基础第四章.ppt

第七讲第四章 网页版式设计的图文魅力 学习目的 本章侧重介绍版式设计的基本要素、类型及形式法则；了解网页的界面空间；掌握网页的版式构成与设计；培养学习者对优秀网页版式分析和模仿能力。在完成基础知识教学任务的同时，着重提高学习者对网页版式设计的认识和理解，加强学习者实际动手能力的培养，最终能设计出优秀网页。 网站美工设计基础 学习内容 版式设计的视觉要素和造型要素 版式设计的形式原理 网页的版式设计 学习要求 掌握：网页版式的基本类型、网页内容的编排。 理解：版式设计的形式法则。 了解：版式设计的基本要素、网页的界面空间。 网站美工设计基础 4．1 版式设计的视觉要素和造型要素 4．1．1版式设计的视觉要素 文字、图形、色彩是版式设计中最基本的视觉要素。因此，设计者在处理版面时，必须掌握各要素的特征，以便于更有效、更合理的表现与传达主题思想和设计意图。 网站美工设计基础 文字 文字是版式设计中的重要信息载体，视觉识别特征的符号系统，是一种高尚的艺术表现形式，具有启迪性和传达性。 文字既是版面的核心，也是视觉传达最直接的方式。因此，文字设计是增强视觉传达效果，提高作品的诉求力，赋予版式审美价值的一项重要构成技术。 网站美工设计基础 （1）字体和字号 字体是文字最基本的元素，字体的设计、选用是版式构成的基础。在版式设计中，字体首先作为造型元素而出现，在运用中不同字体造型具有不同的独立品格，给予人不同的视觉感受和比较直接的视觉诉求力。中文常用的字体主要有宋体、仿宋体、黑体、楷书等。 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 （2）字距与行距 字距和行距的变化也会对文本的可读性产生很大影响，行距的常规比例为10:12，即用字10点，则行距12点。适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。  网站美工设计基础 图形 版式设计中图形元素同样有着十分重要的作用。一方面，图形的应用使版面更加美观、有趣；另一方面，图形本身也是传达信息的重要手段之一。与文字相比，它直观、生动，可以很容易地把那些文字无法表达的信息表达出来，易于浏览者理解和接受，具有视觉效果和导读效果。 网站美工设计基础 图形元素的表现形式可分为两大类，一类是以摄影、写实手法为主的称为“图片”。 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 另一类是以手绘、电脑绘制为主的称为“图形”。 网站美工设计基础 网站美工设计基础 网站美工设计基础 3．色彩 色彩既有美化又具实用的功能，为版式设计增添了许多魅力。色彩能起到画龙点睛和锦上添花的作用，但运用不当也会破坏版面的整体效果。因此，如何运用好色彩也是版式设计要解决的主要内容之一。 对比色色彩组合比同色系色彩组合更容易吸引注意力 网站美工设计基础 网站美工设计基础 4．1．2版式设计的造型要素 点、线、面是一切造型的基础，也是版式构成的主要语言。版式设计就是在版面空间中处理和协调好点、线、面的相互依存相互作用的关系，组合出各种各样的形态，构建成一个个千变万化的全新版面。 1 .点 点相对于线和面来说是一个短而小的形态，在平面设计中能起到吸引注意力的作用。 网站美工设计基础 网站美工设计基础 2 .线 线相对于点和面来说是一个细而长的形态，具有分隔空间的作用。 网站美工设计基础 网站美工设计基础 3.面 面有长、宽两度空间，无厚度，也称为“形”，是设计中的重要因素。在现实版式设计中，其表现也包容了各种色彩、肌理等方面的变化，同时面的形状和边缘对面的性质也有着很大的影响，在不同的情况下会使面的形象产生极多的变化。在基本视觉要素中，面的视觉影响力最大，在画面上往往起着举足轻重的作用。 网站美工设计基础 网站美工设计基础 网站美工设计基础 4．2 版式设计的审美形式原理 美是每一个人追求的精神享受。当你接触任何一件有存在价值的事物时，它必定具备合乎逻辑的内容和形式。然而单从形式条件来评价某一事物或某一视觉形象，美或丑的感觉在大多数人中共存着一种源于人们长期生产、生活积累的共识，使我们逐渐发现了形式美的基本法则。 网站美工设计基础