商业网页版式构成设计.ppt

商业网页版式构成设计 ---商业网页艺术设计--- .主要内容:1.版式构成设计的概念 2.版式构成的分类和特点 3.版式构成的排版工具和方法 .学习重点:1.各类版式构成的特点 2.排版工具的选用 .学习难点:区域式布局、排版工具的操作 版式构成设计的概念 　 网页界面的版式构成设计，是将文字、图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。这一过程实际上是创造性、艺术性地传达信息的过程。 版式构成的分类和特点 　　　商业网页的版式构成大致可分为 分列式布局结构 区域式布局结构 自由式布局结构 1）分列式布局结构的特点 　　　分列式布局结构是运用最为广泛的商业网页布局结构，英特网上的门户网站和综合类网站绝大部分是这一结构。分列式布局结构一般版面呈长方形，显示效果横窄竖宽，有上下滚动条。 　　　分列式布局结构可分为：整列式、二列式、三列式、四列式、五列式、混合列式。 整列式(通列) 　　　其格式从上到下一通到底。这种版式构成通常用于商业网页的内页，显示信息内容、注册信息等页面的布局。 二列式 是最常见的分列式版式构成。二列式版式构成一般是左窄右宽，也有时是右窄左宽，但非主流。 　三列式 　　　给人的感觉开放、大气，适用于门户类和流量大的网站。常规内容设置是：导航横排在页面上部，左右两列为功能区和附加信息区，中列为主要信息显示区和重要资料显示区。 四列式 　　　会使得页面相对很拥挤，给人一种网站的信息量很大的感觉，信息储备少的站点采用这种布局结构，可以在视觉感观上调整信息量少的不足。 五列式 　　分列式布局的极限，多用于内页布局。 混合列式 2）区域式布局结构的特点 　　　区域式布局结构在商业网页布局中运用也很广，它通常利用颜色、线条、文字的断口或插图的变换等手段把网页平面划分为几个规则的或不规则的区域。区域式布局结构版面接近方形，一般没有滚动条或滚动条很短。 　　　区域式布局结构灵活多变，划分出来的区域大小、形式都可以自行定义，格局则变化莫测。此类版式构成比较适用于企业站点和产品单一的电子商务类站点，以及对页面要求较高、信息流通量小的专业性信息站点，不适用于门户开放式站点和信息交错紧密的站点。 3）自由式布局结构的特点 　　　自由式布局结构有静态和动态两种形式。 静态布局通常把网页当作平面出版物创意设计，将信息与背景画面融为一体，没有清晰的界限区分，设计好的网页图片通常采取分割整张图片生成网页的形式去制作。此类页面设计通常精美华丽，视觉效果较好，个性化强，但不适用于信息量大的站点。 　　　动态布局通常采用流行的Flash动画作为表现形式。由于Flash强大的功能，很多国际大公司都采用了布局结构。这种排版形式变化多样，视觉冲击力强，整体效果好。Flash动画使页面体现出极强的互动感、时代感和科技感。 　各类版式构成设计的开发工具 商业网页的页面元素设计 logo设计 Banner设计 导航设计 网页文字设计 图形图像设计 网页动画设计 一个网站是由多个网页组成，一张网页又是由多个页面元素构成。网页界面包含了更多的构成要素。除了文字和图形以外，还有动画、声音和视频等多媒体元素，以及各种特殊效果及交互功能．正是由于这些区别于传统媒体的元素，使网页界面的设计要考虑更多的因素。通过本单元使学生熟悉网页界面的基础页面元素，掌握页面元素的设计要点，能综合运用各种元素设计出风格各异的网页。 1．logo设计 　1）Logo的含义和形式 　　　网页Logo是指网站的标志、标识。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准视觉符号。它以单纯、显著、易识别的物象、图形或文字符号为直观语言，具有表达意义、情感和指令行动等作用。Logo设计将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来，使人们在看到Logo标志的同时，自然的产生联想，从而对企业产生认同。 　　　网页中的Logo可分为图案Logo、文字Logo、图文Logo。 　（1）图案Logo通过隐寓、联想、概括、?抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，容易区分、记忆，如图所示。但图案Logo往往与被标识体关联?性不够直接，浏览者容易记忆图案本身，对被标识体的关系的认知需要相对较曲折的?过程。可一旦建立联系，印象较深刻，对被标识体记忆则相对持久。所以对持久