电子商务网站建设与管理概述23223.pptx

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