项目1网页平面成的表达.docVIP

项目1网页平面构成的表达 1 1.1 知识准备 了解网页及其页面 1 1.2 任务2运用点、线、面的相关知识制作网页Banner 19 1.3 任务3 运用点、线、面的相关知识制作简单网页 27 相关操作知识 40 拓展探索 41 小结 42 项目1网页平面构成的表达 平面构成是网页设计的重要理论依据和知识基础，如何运用有限的网页界面，最大限度的锁住浏览者的注意力呢？这其中除了要抓住浏览者的兴趣和实际需求外，视觉效果就显得尤为重要。怎样把图片，文字等众多内容合理又美观的呈现在同一界面内，就是我们本章要探索的问题。 学习本章后，你将能够： 1. 了解网页及其界面； 2. 掌握网页界面设计与平面构成的表现形式； 3. 掌握平面构成的设计原则； 4．学会平面构成在网页界面设计中的应用方法。 1.1 知识准备 了解网页及其页面 1.案例欣赏 下面为北京智奥光明广告设计公司的网站界面截图，如图1-1所示。 图1-1北京智奥光明广告设计公司的网站界面 2. 案例分析： 此网站为北京智奥光明广告设计公关策划责任公司网站界面，该网站浏览人群主要为，有设计需求的商家、设计师同行以及对网站设计有兴趣的爱好者等，为了使网站更醒目，吸引人眼球，设计师从以下几个方面设计了网页界面： （1） 表现形式：用平面构成原理中分割的方式进行页面设计，配以独特的企业Logo，色彩鲜明的图片和整洁大方的字体。 （2）色彩运用：色彩上使用极富华丽色彩感觉的红色和金色作为色彩的主色调，其中穿插强对比的绿色，使网页具有强烈的视觉效果。 （3）栏目设置：依据易用性原则，设置了网站的导航界面及各部分内容的链接。 （4）动态效果设计：当鼠标点击导航条或相关内容时，轻松进入链接，简单，明了，易于操作。 3. 理论概要 （1）网页及其界面 随着科技的发展，网站高效传播信息的功能被越来越多的人所熟识，许多企业或个人为了提高品牌效应，实现某种需求，开始建立具有各自特色的网站。网页是网站中的一页，当浏览者打开一个网站，首先映入眼帘的就是风格各异的网站界面，或简单清新，如图1-2所示；或庄重严肃，如图1-3所示；或色彩艳丽，如图1-4所示。让人赏心悦目的网页界面应该具有合理的排版布局，突出的文字效果，质量清晰的图片等几个要素。 图1-2 简单清新的某食品网页界面 图1-3 庄重严肃的某银行网页界面 图1-4 色彩艳丽的麦当劳网页界面 （2）网页界面设计与平面构成的表现形式 网页界面设计是指，在有限的网页界面空间内将多种元素运用均衡，统一，对比，节奏，留白等方式相结合，根据网站主题制作出具有某种功能并符合审美情趣的一种设计方式。 在网页设计中，我们主要通过视觉传达来表现网站的主题，而点、线、面是构成平面空间内容的基本要素，也是构成网页的基本视觉元素。平面构成就是研究点，线，面等元素的特性、构成规律、审美原理并加以合理运用的一种艺术表现形式。网页设计实际上就是经营好三者关系，不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。点最重要的功能就是表明位置和进行聚集在空间中单一的点有集中醒目的特点以可利用点的这一特性强调将要重点表现的对象线的聚集和闭合几何形态的面 ③节奏与韵律 节奏是指各元素符合一定规律的，有一定差别的反复出现在同一界面内而产生的运动感，它是相同因素有规律的重复。也就是说节奏是由构成页面的点、线、面的分布，通过大小，长短，粗细，曲直，明暗等的反复出现而呈现的。反复是节奏的重要标志，节奏是通过反复来实现的。在网站设计中，针对点、线、面等元素，以集中或分散的排列差异变化将导致视觉及心理上的在节奏中注入美的因素和情感，就有了韵律有韵律的构成具有生气它能增强版面的感染力表现力 ④ 对比与调和 对比又称对照，是指为了使互为相反的两要素为更好的突出各自的特点，同时置放在一起时所产生的现象。对比是通过大小，强弱，粗细，明暗等对立因素来达到的，它的主要作用在于使产生生动活泼效果对比的最基本是显示主从关系和统一变化的效果是，使两者或两者以上的要素相互具有共性。对比与协调在网页设计中发挥着不同的作用：对比产生动感、活泼与鲜明的个性；协调则产生稳定、柔和与优雅的感觉。有一种的美感，成为形式美法则的重要内容。某些特定标准比例与适度，通常具有秩序、明朗的特性 ，人一种清新、自然的新感觉。美的比例是网页设计成功的基础，好页面的首部、菜单、页面和底部的合理安排和选择，首先取决于良好的比例 图1-28运用适当的比例进行页面的分割，构成页面的各要素条理清晰，给人明朗，清新的视觉印象。 虚实与留白 页面中的“实体”是指文字，图形等内容，而页面中未放置任何东西的空间、较为细小的文字、对比较弱的色块都可以看做是“虚体”，也就是“留白”。也就是说，页面中的主题是“实”，陪衬和背景是“虚”，虚体是为了更好的