网站的版面设计.ppt

电子商务网站建设与管理,福州网站建设,Contents,当人们浏览网页时，第一眼看到的就是网页的构图。因此，构图是否美观、和谐直接影响到视觉效果。构图不仅要注意到形式，还要考虑到实用性，是否便于人们阅读和观看。方形的分割是网页设计中常用的方法。在矩形的构图中，一定要注意应用黄金分割线的比例（大约在3/4处）、构图基本结构的形成规律，如图2-1所示。一定要有疏密的节奏，要意识到格子的主次关系，上面的往往比下面的更受人关注，左面的往往比右面的更受关注，这是人们的基本视觉规律。,一、网页设计中的构图规律,在网页中的应用效果如图2-2所示。要学会这种基本的构图分割法，从最大体的框架开始，注意审美规律和黄金分割线的比例。,一、网页设计中的构图规律,矩形的分割给人的感觉是稳定、平和，适于一般性的商业网站。,螺旋曲线是最有韵律和生命力的线条，如图2-3所示。螺旋形的构图也是最具生命力和动感的构图。,一、网页设计中的构图规律,在网页中的应用效果如图2-4所示。适用于艺术、音乐以及内容充满动感和活力的网站。,一、网页设计中的构图规律,网页设计中形式法则的运用不仅可以创造出富有个性的网页形象、表现网页内容、传达网页信息，而且可以起到方便读者阅读的作用。我们这里提到的形式法则有以下几种。,二、网页设计中的形式法则,1对称对称是网页设计中较为忌讳的一种手段，这种形式法则的运用很容易造成页面过于平均。对称一般分为左右对称、上下对称、中心点对称。但合理地运用对称的方法，也可达到很好的效果，如图2-7所示。这是一个简易的网页构图，它以一条中轴线为中心，分成左右相同的两部分。可以看到，这个网页虽然构图上并不难看，但缺乏新意，最终结果如图2-8所示。,二、网页设计中的形式法则,2均衡均衡和对称的区别在于对称是绝对的，而均衡是相对而言的。也就是说它是对称的，但却不是绝对的对称，如图2-9所示。页面上左面的三个小的方形色块在视觉上与右边大的色块是相等的，并没有造成构图左右的不平衡，所以，虽然它不是绝对的平衡，但画面却是均衡的。完成画面如图2-10所示。,二、网页设计中的形式法则,3对比对比的应用可以在形式上分清主从关系，便于浏览。对比的概念比较抽象，比如方形和圆形可以是形状上的对比；大的图形与小的图形可以是面积上的对比；红色与黄色可以是颜色上的对比；简单的图形与复杂的图形又可以是造型上的对比。由于对比的形式多样，所以可以利用这种形式法则创造出多种个性鲜明的设计。,二、网页设计中的形式法则,3对比如图2-11所示，整个网页非常简洁，惟有一处较为复杂，那就是上半部分的图形。这样的设计构成了繁与简的对比，使网页非常时尚、新颖。,二、网页设计中的形式法则,4节奏这里所提的节奏与音乐中所说的节奏是有一定的区别的。节奏是一个比较抽象的概念，构图的关系、颜色的变化、形状的对比都能产生节奏。在一个网页中，节奏可能是缓慢的，也可能是铿锵有力的，这都要靠对比来实现。换言之，没有对比就没有节奏。,二、网页设计中的形式法则,4节奏如图2-12、图213所示，第一张图的矩形在颜色上没有对比，而且面积基本相等，排列也是均匀的，这样缺少对比也就是节奏性太弱。,二、网页设计中的形式法则,4节奏再看第二张，这张图的矩形对于第一张而言明显有了变化，图形的面积、颜色、图形排列都有区别，也就是说存在对比。因此，这样的画面才是有节奏的。,二、网页设计中的形式法则,在本节中，最重要的是网页中文字的版式设计，网页中文字设计应注意以下几个原则。1易阅读网页文字的主要功能是传达网站的意图和信息，所以必须考虑文字的整体版式设计，设计中的文字应避免繁杂零乱，使人易认、易懂，尤其是在内容严肃的网页中。,三、网页中文字排列的设计,字的行距应大于字间距，否则观众的视线无法按一定的方向和顺序进行阅读。不同类别文字的空间要作适当的集中，并利用空白加以区分，从而形成字块的感觉，如图2-15所示。,三、网页中文字排列的设计,2文字的个性设计网页中文字的设计要符合网站的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能发生冲突，否则就会破坏文字的诉求效果。如图2-16所示，网页的设计风格非常明确，手绘的插图文字让人感觉非常清新自然，给人留下深刻的印象。,三、网页中文字排列的设计,3形式法则的美感在视觉传达的过程中，文字作为画面的形象要素之一，具有传达感情的功能，因此它必须具有视觉上的美感，能够给人以美的感受，如图2-17所示。字型巧妙的设计与组合，能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众产生厌烦心理，这样无法传达出作者的意图和构想。,三、网页中文字排列的设计,3形式法则的美感不同灰色与白色的搭配，产生了强烈的透视效果。,三、网页中文字排列的设计,4设计上要富于创造性根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的字体，给人以别开生面的视觉感受，有利于表现作者的设计意图。设计时，应从字的形态特征与组合上着手，不断修改，反复琢磨，才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。,三、网页中文字排列的设计,如图2-18所示，黑色的底色充满着神秘色彩，整个篇幅大部分被图片所占据，文字融入到图形中，更加突出图形的表现力。,三、网页中文字排列的设计,图形的组织和文字的特效完美结合，文字已经成为图形的一部分，整体自然和谐，如图2-19所示。,三、网页中文字排列的设计,网站中的网页主要是由图像和文字构成，网页主要是靠文字和图像来传达信息的，因此它们在网页中的位置就显得十分重要了。图文的排版风格、形式是由网站的内容和属性来决定的，比如：公司企业的宣传网站图文排版应该稳重、严谨一些，更多地传达信息，树立公司企业严谨、积极、科学、向上的形象。而一些个人网站个人因素多一些，风格根据自己的喜好、艺术修养决定。商业网站形式应该活泼一些，吸引更多的浏览者，以传达更多的信息。下面举例来说明图文混排在网页设计中的风格、形式。,四、图文混排的基本要求,1公司企业网站的图文混排风格、形式新建一个文档，用色块填充，要求颜色协调、构图稳重，如图2-22所示，加入的文字排版也应该与原来的形式相协调，体现出公司严谨的作风，如图2-23所示。,四、图文混排的基本要求,1公司企业网站的图文混排风格、形式插入图片，加入文字，最终效果如图2-24所示。,四、图文混排的基本要求,1公司企业网站的图文混排风格、形式新建一个文档，用色块填充，颜色协调，构图应该遵循稳重、统一原则，统一中有变化，如图2-25所示。再推敲一下文字的版式，以及插入图片的版式，如图2-26所示。,四、图文混排的基本要求,1公司企业网站的图文混排风格、形式插入图片，加入文字，效果如图2-27所示。,四、图文混排的基本要求,2商业网站的图文混排风格、形式商业网站的图文混排形式应该活泼一些，图片放在页面中间自由活泼，文字随意放在四周，页面感觉轻松、自由、时尚，效果如图2-28所示。,四、图文混排的基本要求,2商业网站的图文混排风格、形式下面也是一个商业性质的网站，一张具有飘逸秀发的美女图片占据了页面的大部分空间，构图大胆，更具亲和力，文字的排版也随着标题栏显得生动、有趣，效果如图2-29所示。,四、图文混排的基本要求,3个人网站的图文混排风格、形式个人网站，应显得与众不同，排版形式更应该自由一些，可以按照自己的喜好来决定排版，简练的图形，几行细小精致的文字，使网页感觉个性强烈，如图2-30所示。页面绝大部分被抽象的图案占去了，而文字只在左侧出现，这种大胆的图文排列方式更具个性。,四、图文混排的基本要求,网页中画面的构成和分割是传达网页情绪的重要因素。版式的布局、颜色的分布以及字体的排列都是制作优秀网页不可忽视的重要因素。人们往往能够通过画面垂直和水平的布局、点线面的分布体会到网页所要传达的主题。,五、画面构成方式对情绪的影响,1富有动感的水平式布局方向感通常是传达运动、速度等主题的构成方式，它通常分为水平、垂直和斜向三种情况，而且经常被应用到网页中。(1)设定三种基本颜色（R:99、G:126、B:153；R:188、G:199、B:203和R:56、G:79、B:112）。,五、画面构成方式对情绪的影响,1富有动感的水平式布局(2)设定布局和分割方式。按照它们在网页中的比例关系，避免面积相同，注意节奏感，如图2-31所示。设定一种颜色作为主要色彩，其余色彩水平分布，并在下方设定两块小色块，活跃画面气氛，使画面富于动感，如图2-32所示。,五、画面构成方式对情绪的影响,1富有动感的水平式布局(3)在画面下方设定一排网格因素，并在右方设定一圆形，使画面更加丰富，如图2-33所示。,五、画面构成方式对情绪的影响,1富有动感的水平式布局(4)基本布局设定完成后，插入相关图片，效果如图2-34所示。,五、画面构成方式对情绪的影响,1富有动感的水平式布局同类方式布局如图2-35、图2-36所示。,五、画面构成方式对情绪的影响,1富有动感的水平式布局同类方式布局如图2-35、图2-36所示。,五、画面构成方式对情绪的影响,2表现韵律的曲线布局曲线通常是表现韵律、节奏的构成方式，它一般传达出浪漫、抒情等感觉，也经常出现在网页中。(1)设定三种颜色（R:100、G:151、B:0；R:153、G:192、B:77和R:192、G:220、B:137）。,五、画面构成方式对情绪的影响,2表现韵律的曲线布局(2)设定布局和分割方式。以几条曲线作为画面的主要分割，体现出自由和韵律，注意布局的疏密关系，如图2-37所示。,五、画面构成方式对情绪的影响,2表现韵律的曲线布局(3)设定文字的布局和构成。文字以水平排列为主，和主体的曲线构图形成对比，如图2-38所示。,五、画面构成方式对情绪的影响,2表