第二章 网页版式设计及色彩搭配.ppt

第二章 网页版式设计 与色彩搭配 第二章 网页版式设计与色彩搭配 本章主要内容： 网页版式设计 色彩基本理论及色彩的视觉效果 网页色彩及搭配技巧 2.1 案例分析：不同风格网页作品欣赏与解析 1．网页作品欣赏之一：可口可乐公司主页 2．网页作品欣赏之二：某饰品网上商城主页 3．网页作品欣赏之三：某房地产公司售楼主页 4．网页作品欣赏之四：某学院管理与应用外语系主页 2.2 学习任务：网页版式设计 浏览网页时，通常的顺序是：网页版式→网页导航→网页内容。由此可见，网页设计有三个关键因素，依次决定网页的艺术性、技术性和实用性。网页版式是吸引浏览者的重要因素。 2.2.1版式设计概述 所谓网页的版式设计，是指将网页的各种构成要素根据主题需求予以有机组合，进行必要的关系设计，进行一种视觉关联和合理配置。 一个成功的网页版式设计不仅能提高网页的注意力价值，而且有利于该网页主题的信息传达，并能增强浏览者的视觉留存，从而达到良好的预期效果。 2.3 学习任务：色彩的基本理论及其视觉效果 色彩在艺术设计中具有重要的地位。作为艺术设计，不管是数万年前的原始壁画创作，还是现代的产品设计、平面设计、室内装潢都离不开色彩，网页设计也是这样。网页中的背景、文字、LOGO、导航、图片等元素应该采用什么样的色彩，如何进行搭配才能更好的表达出设计的预想对于网页设计者来说尤其重要。 2.2.2 网页版式的尺寸和构成要素 网页标志 网页标题 导航条 图片 多媒体 色彩 字体 2.2.3网页版式设计原则 网页版式设计是网页中的各种页面元素进行有机组合。所谓有机组合，通常指网页版式形式与内容的统一。 采用哪种版式并不是设计者随意决定的，不同的网站主题对网页构成元素编排方式的要求是不同的。 设计网页版式时，应避免只追求花哨的表现形式，或者过于强调独特的设计形式而脱离内容。 2.2.4 网页的版式设计风格 骨骼型 满版型 分割型 中轴型 曲线型 2.3 学习任务：色彩的基本理论及其视觉效果 色彩在艺术设计中具有重要的地位。作为艺术设计，不管是数万年前的原始壁画创作，还是现代的产品设计、平面设计、室内装潢都离不开色彩，网页设计也是这样。网页中的背景、文字、LOGO、导航、图片等元素应该采用什么样的色彩，如何进行搭配才能更好的表达出设计的预想对于网页设计者来说尤其重要。 2.3.1 色彩的基本理论 光谱中的大部分颜色是由三种基本色光按不同的比例混合而成的，这三种基本色光的颜色是红（Red）、绿（Green）、蓝（Blue）三原色光。这三种光以相同的比例混合、且达到一定的强度，就呈现白色（白光）；若三种光的强度均为零，就是黑色，这就是加色法原理。 色彩可分为有彩色和无彩色两大类。 2.3.2 色彩的视觉效果 色彩的心理感觉 色彩的冷暖 色彩的软硬 色彩的进退 色彩的大小 2.4 学习任务：网页中的色彩及配色 在艺术设计中，色彩的视觉冲击效力是最强的，一个网页首先呈现给浏览者的是网页的色彩。正是由于网页色彩的重要性，设计网页时，网页的配色显得尤为重要。 2.4.1 网页色彩 在网页设计中，常用到的色彩模式是RGB模式。是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色。 2.4.2 网页配色原理 网页色彩搭配设计时，首先要考虑网站本身特点，然后结合一定的艺术规律，这样才能设计出特色鲜明的网页。 色彩的适合性 色彩的鲜明性 色彩的独特性 2.4.3 网页配色技巧 彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较黑白页面更加吸引人。通常的做法是：主要内容文字用非彩色(黑色)，边框、背景、图片用彩色。 彩色搭配的技巧 非彩色搭配 2.5 实训——浏览著名网站并归纳版式设计与色彩搭配技巧 1．实训目的 掌握网页风格确定方法 熟悉网站色彩搭配技巧 掌握网页版式设计及网页基本元素搭配技巧 2．实训要求 登陆优秀设计网的酷站欣赏栏目（/coolsite.asp），浏览优秀网站，分析网页的版式设计和色彩搭配技巧，总结在设计网页时应该如何突出网站主题。 谢 谢！ 山东电子职业技术学院 网页设计与制作 该网页版面设计采用四角对称型，主色调采用红色。四角对称的版式设计稳重、权威、大方，符合公司类网站的形象需求； 网站的主要浏览者是年轻人，为此，采用曲线型版式设计，主要内容、图片和导航都依照曲线进行排列，设计简洁，过渡自然，美观大方，符合所销售商品的特点，同时给浏览者美妙的视觉享受。 该网页采用中轴型版式设计。通常销售类网站都采用暖色系或者中性色系，采用极端的黑色背景