网页版式设计的图文魅力网站美工设计基础第四章课件

第七讲第四章网页版式设计的图文魅力 网站美工设计基础 学习目的本章侧重介绍版式设计的基本要素 类型及形式法则 了解网页的界面空间 掌握网页的版式构成与设计 培养学习者对优秀网页版式分析和模仿能力 在完成基础知识教学任务的同时 着重提高学习者对网页版式设计的认识和理解 加强学习者实际动手能力的培养 最终能设计出优秀网页 网站美工设计基础 学习内容版式设计的视觉要素和造型要素版式设计的形式原理网页的版式设计学习要求掌握 网页版式的基本类型 网页内容的编排 理解 版式设计的形式法则 了解 版式设计的基本要素 网页的界面空间 网站美工设计基础 4 1版式设计的视觉要素和造型要素4 1 1版式设计的视觉要素文字 图形 色彩是版式设计中最基本的视觉要素 因此 设计者在处理版面时 必须掌握各要素的特征 以便于更有效 更合理的表现与传达主题思想和设计意图 网站美工设计基础 文字文字是版式设计中的重要信息载体 视觉识别特征的符号系统 是一种高尚的艺术表现形式 具有启迪性和传达性 文字既是版面的核心 也是视觉传达最直接的方式 因此 文字设计是增强视觉传达效果 提高作品的诉求力 赋予版式审美价值的一项重要构成技术 网站美工设计基础 网站美工设计基础 网站美工设计基础 将文字图形化 把记号性的文字作为图形元素来表现 强化了原有的功能 网站美工设计基础 文字与文字间经过叠置后 产生空间感 跳跃感 体现了一种艺术思潮 网站美工设计基础 形象字体 根据文字的意思或内容进行艺术创造的字体 内容与形式达到和谐的统一 网站美工设计基础 意象字体将特定的文字个性化 一目了然地展示文字的内容 产生更多的回味 网站美工设计基础 2 字距与行距字距和行距的变化也会对文本的可读性产生很大影响 行距的常规比例为10 12 即用字10点 则行距12点 适当的行距会形成一条明显的水平空白带 以引导浏览者的目光 而行距过宽会使一行文字失去较好的延续性 网站美工设计基础 图形版式设计中图形元素同样有着十分重要的作用 一方面 图形的应用使版面更加美观 有趣 另一方面 图形本身也是传达信息的重要手段之一 与文字相比 它直观 生动 可以很容易地把那些文字无法表达的信息表达出来 易于浏览者理解和接受 具有视觉效果和导读效果 网站美工设计基础 图形元素的表现形式可分为两大类 一类是以摄影 写实手法为主的称为 图片 网站美工设计基础 网站美工设计基础 网站美工设计基础 网站美工设计基础 另一类是以手绘 电脑绘制为主的称为 图形 网站美工设计基础 网站美工设计基础 网站美工设计基础 3 色彩色彩既有美化又具实用的功能 为版式设计增添了许多魅力 色彩能起到画龙点睛和锦上添花的作用 但运用不当也会破坏版面的整体效果 因此 如何运用好色彩也是版式设计要解决的主要内容之一 对比色色彩组合比同色系色彩组合更容易吸引注意力 网站美工设计基础 网站美工设计基础 不同的色调体现着不同主题的网站 网站美工设计基础 4 1 2版式设计的造型要素点 线 面是一切造型的基础 也是版式构成的主要语言 版式设计就是在版面空间中处理和协调好点 线 面的相互依存相互作用的关系 组合出各种各样的形态 构建成一个个千变万化的全新版面 1 点点相对于线和面来说是一个短而小的形态 在平面设计中能起到吸引注意力的作用 网站美工设计基础 网站美工设计基础 网站美工设计基础 2 线线相对于点和面来说是一个细而长的形态 具有分隔空间的作用 网站美工设计基础 线的自由分隔 起了引导作用 单线构成的图形 与人物图片形成鲜明对比 网站美工设计基础 3 面面有长 宽两度空间 无厚度 也称为 形 是设计中的重要因素 在现实版式设计中 其表现也包容了各种色彩 肌理等方面的变化 同时面的形状和边缘对面的性质也有着很大的影响 在不同的情况下会使面的形象产生极多的变化 在基本视觉要素中 面的视觉影响力最大 在画面上往往起着举足轻重的作用 网站美工设计基础 网站美工设计基础 相对于点 线来说 面能起到稳定版面的作用 网站美工设计基础 4 2版式设计的审美形式原理美是每一个人追求的精神享受 当你接触任何一件有存在价值的事物时 它必定具备合乎逻辑的内容和形式 然而单从形式条件来评价某一事物或某一视觉形象 美或丑的感觉在大多数人中共存着一种源于人们长期生产 生活积累的共识 使我们逐渐发现了形式美的基本法则 网站美工设计基础 一 对称与均衡对称与均衡是图案最基本的两种组织 构成形式 对称体现了静感与稳定性 具有端庄 安定的美 均衡则表现了动感和变化性 具有生动 活泼的美 对称是指图形或物体对某个中心点 中心线 对称面 在形状 大小或排列上具有一一对应的关系 均衡是不对称形态的一种平衡 网站美工设计基础 二 重复与交错 版面设计中反复使用的基本形或线的形状 大小 方向都是相同的称为重复 重复使设计产生安定 整齐 规律的统一 但视觉感受有时容易显的呆板 平淡 缺乏趣味性的变化 因此在版面中可安排一些交错与重叠 使版面变得灵活 网站美工设计基础 网站美工设计基础 交错使版面变得灵活 重复图形构成的版面效果 网站美工设计基础 三 节奏与韵律节奏是规律性的重复 音乐靠节拍体现节奏 绘画通过线条 形状肌理和色彩体现节奏 节奏往往呈现一种秩序美 网站美工设计基础 韵律更多地呈现一种灵活的流动美 它变节奏的等距间隔为几何级数的变化间隔 赋予重复的音节或图形以强弱起伏 抑扬顿挫的规律变化 产生优美的律动感 节奏与韵律往往互相依存 互为因果 网站美工设计基础 采用同一个图形 在大小 颜色上作渐变 达到优美旋律的追求 网站美工设计基础 四 对比与调和对比是差异性的强调 对比的因素存在于相同或相异的性质之间 在版面设计中 缺少对比效果 就缺少活力 网站美工设计基础 版面设计可以从诸多方面运用对比手法 如虚实 聚散 繁简 主次 轻重 大小 方向 长短 粗细 曲直 强弱 黑白 色相 纯度 色调等的对比 网站美工设计基础 调和是指适合 舒适 安定 统一 是近似性的强调 使两者或两者以上的要素相互具有共性 网站美工设计基础 明暗对比 网站美工设计基础 对比中的渐变 网站美工设计基础 五 变异与秩序变异是一种在整体效果中的局部突变 将变异的原理用于版式设计 会使版面更活跃 更丰富 更有情趣 而异质形象往往就是整个版面最具动感 最引人关注的焦点 也是其含义延伸或转折的始端 网站美工设计基础 表现形式有位置 规律的转移 色彩等的变异 也可依据大小 方向 形状的不同来构成特异效果 网站美工设计基础 文字的部分变异 增强了版面的视觉感和意义 网站美工设计基础 形象富有秩序的变异 网站美工设计基础 六 虚实与留白 虚与实 是中国画论对二维平面空间利用的概括 是指占有实际版面的部分是 实 留白的地方为 虚 网站美工设计基础 留白即可以完全是空白 但有时也可以用细弱的文字 图形或淡淡的色彩来做底 这要根据内容而定 在排版设计中 巧妙地留白 是为了更好地衬托主题 造成版面的空间层次 网站美工设计基础 虚实层次使版面主次更加突出 留白使想象更加丰富 4 3网页的版式设计 所谓网页的版式设计 是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合 将理性思维个性化的表现出来 是一种具有个人风格和艺术特色的视听传达方式 网站美工设计基础 网站美工设计基础 它在传达信息的同时 也产生感官上的美感和精神上的享受 同报刊杂志等平面媒体的版式设计有很多共同之处 在网页制作中占有重要的地位 网站美工设计基础 4 3 1网页界面空间网页界面空间是指网页中多媒体元素的设计安排和多媒体元素呈现的信息量的多少 网页的界面设计一般和以下项目有所联系 浏览软件 即网页浏览器 工具栏 地址栏 状态栏 菜单栏 和导航要素 主菜单 子菜单 搜索栏 历史纪录等 及各种内容 标志 图像 文本 著作权标志等 网站美工设计基础 网页的界面 网站美工设计基础 4 3 2网页版式的基本类型网页版式的基本类型主要有 骨格型 满版型 分割型 中轴型 曲线型 倾斜型 对称型 焦点型 三角型 自由型 网站美工设计基础 骨格形网页具有构建的意味 一般情况下都会显示其良好的条理性 骨格型网页版式示意图 网站美工设计基础 骨格型网页版式 骨格型网页版式 网站美工设计基础 满版形网页设计其充实的版面整体性较好 但容易产生压抑和无空间感 然而版面使用率高 反之 如果将版面统筹布局后留有大量的空间 造成视觉上的低版面率 会给人一种品味高雅的格调 满版型网页版式示意图 网站美工设计基础 满版型网页版式 满版型网页版式 网站美工设计基础 网站美工设计基础 视觉上的底版面率设计 网站美工设计基础 分割形的网页条分缕析 板块内容界限分明 具有很强的秩序感和条理性 分割型网页版式示意图 网站美工设计基础 分割型网页版式 分割型网页版式 网站美工设计基础 中轴线形的网页设计会产生一种强烈的亲和力 不管是横轴或者是纵轴 都会产生对称的耦合 中轴型网页版式示意图 网站美工设计基础 纵轴型网页版式 横轴型网页版式 中轴线网页版式 网站美工设计基础 网站美工设计基础 中轴线型网页版式 网站美工设计基础 曲线形的网页设计容易产生流动感 这样的版面会使人产生舒畅 自由 畅达的感觉 曲线型网页版式示意图 网站美工设计基础 网站美工设计基础 曲线型网页版式 曲线型网页版式 网站美工设计基础 网站美工设计基础 倾斜形的网页设计具有强烈的方向感和动势 适当编排会使版面产生强烈的视觉冲击力 倾斜型网页版式示意图 网站美工设计基础 倾斜型网页版式 网站美工设计基础 焦点型的网页设计是通过各种辅助手段 最终将视觉注意力集中到设计者划定的视觉区域之中 从而强化版面的主题 焦点型网页版式示意图 网站美工设计基础 网站美工设计基础 焦点型网页版式 焦点型网页版式 网站美工设计基础 网站美工设计基础 三角形具有最强的稳定感 在网页设计的版面中运用三角形会使整个页面产生构架的稳定性 三角型网页版式示意图 网站美工设计基础 网站美工设计基础 三角型网页版式 三角型网页版式 网站美工设计基础 网站美工设计基础 自由型网页的版式设计版面自然活泼 但使用时要根据特定的主题需要来决定是否选用 若使用不当 会产生文不对题的后果 自由型网页版式示意图 网站美工设计基础 网站美工设计基础 自由型网页版式 自由型网页版式 网站美工设计基础 网站美工设计基础 人类社会越是向前发展 人们的审美趣味就越是丰富和自由 因而 网页设计艺术就必然处于不断的更新变化之中 审美趣味不仅与人类社会某个时期的社会环境有关 更与人的