4月13日电子商务网站规划课件

电子商务网站规划2014级电子商务班闫立娜电子商务网站规划课题：电子商务网站的规划（3）课型：新授课课时：2授课时间：2015年4月13日授课班级：2014级电子商务授课目标：1、掌握网站风格设计重点难点：电子商务网站的规划流程教学方法：讲授法、讨论法课题：电子商务网站的规划（3）2开篇案例：可口可乐和百事可乐公司网站的风格设计开篇案例：可口可乐和百事可乐公司网站的风格设计3主要内容什么是网站总体风格导航栏页面布局主要内容什么是网站总体风格4网站整体风格的概念网站整体风格是指站点的整体形象给浏览者的综合感受，这种感受是抽象的。网站整体风格的概念网站整体风格是指站点的整体形象给浏览者的综5整体形象所包含的因素站点的CI（标志、色彩、字体、标语）版面布局浏览方式文字语气内容价值。。。确定风格是建立在有价值的内容之上的：质量、价值其实风格就是一句话：与众不同

整体形象所包含的因素6如何建立有独特风格的网站风格应该建立在丰富的有价值的内容基础之上必须搞清楚自己给人的印象是什么，对象是谁，确定印象后，努力实现和加强这种印象Logo出现在每个页面上对一个网站来说，要突出色彩如何建立有独特风格的网站风格应该建立在丰富的有价值的内容基础7确定网站的CICI：corporateidentity(企业识别),是通过视觉统一企业的形象确定网站的CICI：corporateidentity(企84月13日电子商务网站规划课件9logo中的BF设为百度红蓝色，代表一男一女。字体及位置的设计，则包含“众里寻他千百度”中不期而遇的美丽寓意。logo中的BF设为百度红蓝色，代表一男一女。104月13日电子商务网站规划课件11色彩传递的信息色彩在食品偏好中起着重要作用.一次调查:被调查的家庭主妇分别品尝了放在棕、蓝、红、黄四种容器中的咖啡（所有咖啡都是一样的，并对被调查者隐瞒了品牌）结果：75%的妇女认为放在棕色容器中的咖啡味道过苦；85%的人认为红色容器中的咖啡最浓；几乎所有人感觉蓝色容器中的咖啡味道较淡；而黄色容器中的咖啡几乎没味.雅格布、柯恩、沃西和吉恩曾做过有关部门跨文化的颜色比较的深入研究。他们对中国、韩国、日本以及美国消费者进行调查，发现亚洲人往往把灰色和廉价联系在一起，这恰恰与美国人相反，美国人认为灰色贵重且有高品质。亚洲人认为紫色为富贵之色，美国人却认为紫色有廉价感。不过，蓝色、红色、黄色与黑色倒是不约而同地分别与高品质、爱、幸福及力量联系在一起。一般地都认为绿色象征着纯洁和值得信赖。色彩传递的信息色彩在食品偏好中起着重要作用.12可口可乐的瓶子在不经意间传递了许多信息：瓶子颈部凸起的花纹使人感到握在手中不会脱落；瓶子外观别致、造型优雅，似乎透射着饮料能带给你一份轻松；里面所装的液体，看起来比标注的份量多，有了一种实在感；coca-cola的斯宾塞体字形，与白色字体形成强烈对比的红色标准色，流动的水线等，无不在传递着青春、活力、轻松与自在。可口可乐的瓶子在不经意间传递了许多信息：瓶子颈部凸起的花纹使13怎样树立网站的风格色调：是活泼还是庄重，是素还是艳。

怎样树立网站的风格色调：是活泼还是庄重，是素还是艳。14请为你的网站进行CI设计，包括logo、标准色彩、标准字体、宣传标语等，并说明如何突出网站的风格试用图片设计工具设计logo，选图片的格式GIF请为你的网站进行CI设计，包括logo、标准色彩、标准字体、15有风格的网站与普通网站的区别在于：普通网站上你看到只是堆砌在一起的信息，总之。只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。创意：如网络与电话结合，产生IP电话有风格的网站与普通网站的区别在于：普通网站上你看到只是堆砌在16如何确立自己的风格确信风格是建立在有价值内容之上的。一个网站有风格没有内容，就好比绣花枕头一包草，所以首先必须保证内容的质量和价值性搞清网站给人的印像如果用一句话来描述你的站点，应该是（）有创意、有实力、有美感、有冲击力想到你的站点，可以想到的颜色是（）热情的红色、幻想的天蓝色想到你的站点，可以联想的画面是（）杂货店、书店、如果网站是一个人，他拥有的个性是（）活泼可爱的儿童、思想成熟的中年人作为站长，你希望给人的印象是（）敬业、认真负责、有深度、直爽用一种动物做比喻，你的站点是（）兔子（聪明敏感）、狮子（自信威武）浏览者觉得你和其他网站不同（）可以信赖、信息最快、交流方便如何确立自己的风格17导航系统网站中的导航系统就是网页上各种导航条的总称，用户通过导航系统中的各种导航元素，可以快速查询到自己所需要的信息。导航系统用来建立网页信息内容之间的上下文关系，为用户在新环境下快速定位提供语境，从而使用户明确下面三个问题：我在哪？我曾经去过哪？我可以去哪。导航系统网站中的导航系统就是网页上各种导航条的总称，用户通过18全局导航全局导航（PersistentNavigation）又称主导航，它是出现在网站的每一个页面上一组通用的导航元素，以一致的外观出现在网站的每一页，扮演着对用户最基本的访问方向性指引。全局导航全局导航（PersistentNavigation194月13日电子商务网站规划课件204月13日电子商务网站规划课件214月13日电子商务网站规划课件22局部导航局部导航是子页面相同页面组的内部导航，使用户在一个内容领域里按层次浏览局部导航局部导航是子页面相同页面组的内部导航，使用户在一个内23局部导航（副导航）：全局导航的延伸，设计灵活、变化频繁、指向同级或下级页面。

使用要点：

局部导航的过渡应平滑、一致，不应将用户带出网站，或是跳转到其它类别。局部导航可以是主导航项目的下级分类、同级分类、某一特定类别等等。

局部导航和全局导航的组合举例：

局部导航（副导航）：全局导航的延伸，设计灵活、变化频繁、指向244月13日电子商务网站规划课件25网页版面布局与制作布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。“最适合”是一个不确定的形容词。布局的重要性：挖掘客户的需求，将用户需要的内容充分展示出来，为客户提供舒适、友好、简单的访问体验，进而留住客户，还能结合SEO，提升网站的搜索引擎排名。如同盖房子有草图一样，网站设计也同样有草图。网页版面布局与制作布局就是指以最适合用户浏览的方式将图片和文264月13日电子商务网站规划课件274月13日电子商务网站规划课件28网站外形尺寸：网页黄金分割网站外形尺寸：网页黄金分割29在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视304月13日电子商务网站规划课件314月13日电子商务网站规划课件32那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我33我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是34常见的布局形式“T”结构布局：页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

常见的布局形式“T”结构布局：页面顶部为横条网站标志+广告条35同字型布局特点：页面顶部为水平放置的主导航栏，其下体大致分为左，中，右3栏同字型布局364月13日电子商务网站规划课件37“口”型布局这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

“口”型布局这是一个象形的说法，就是页面一般上下各有一个38Flash型

Flash型39什么样的布局是最好的？如果内容非常多，就要考虑用“国字型”；如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。什么样的布局是最好的？如果内容非常多，就要考虑用“国字型”40关于第一屏第一屏是指我们到达一个网站在不拖动滚动条时能够看到的部分。关于第一屏第一屏是指我们到达一个网站在不拖动滚动条时能够41有关导航栏的位置导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，基于不同浏览者显示器的大小考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。有关导航栏的位置导航栏能让我们在浏览时容易的到达不同的页面42首页设计首页是指一个网站的主索引页，是令访客了解网站概貌并引导其阅读重点内容的向导。Logo,栏目标题设计，色彩设计和页面布局，（产品搜索，用户登录）对与商务网站，客户最关心的是网站的商品，所以在首页及其所有的栏目页面都放置一个搜索条，客户可以随时搜索。首页设计首页是指一个网站的主索引页，是令访客了解网站概貌并引43首页的功能模块：首页上要实现的主要内容和功能，主页上必须清晰列出：机构名称、提供的产品或服务及主页内容首页的功能模块：首页上要实现的主要内容和功能，主页上必须清晰444月13日电子商务网站规划课件45首页设计要注意的问题首页明确尽可能缩短下载时间首页设计要注意的问题首页明确464月13日电子商务网站规划课件474月13日电子商务网站规划课件48合理设计你网站结构，并为你的网站添加进去相应的导航栏合理设计你网站结构，并为你的网站添加进去相应的导航栏49课堂小结风格导航页面布局课堂小结风格50教后记通过对各种网站的展示，吸引了学生的学习兴趣，课堂气氛与以往相比有了明显的提升。将电子商务与网页设计课程相结合，让学生学会融会贯通，有利于其他科目的教学。教后记通过对各种网站的展示，吸引了学生的学习兴趣，课堂气氛与51电子商务网站规划2014级电子商务班闫立娜电子商务网站规划课题：电子商务网站的规划（3）课型：新授课课时：2授课时间：2015年4月13日授课班级：2014级电子商务授课目标：1、掌握网站风格设计重点难点：电子商务网站的规划流程教学方法：讲授法、讨论法课题：电子商务网站的规划（3）53开篇案例：可口可乐和百事可乐公司网站的风格设计开篇案例：可口可乐和百事可乐公司网站的风格设计54主要内容什么是网站总体风格导航栏页面布局主要内容什么是网站总体风格55网站整体风格的概念网站整体风格是指站点的整体形象给浏览者的综合感受，这种感受是抽象的。网站整体风格的概念网站整体风格是指站点的整体形象给浏览者的综56整体形象所包含的因素站点的CI（标志、色彩、字体、标语）版面布局浏览方式文字语气内容价值。。。确定风格是建立在有价值的内容之上的：质量、价值其实风格就是一句话：与众不同

整体形象所包含的因素57如何建立有独特风格的网站风格应该建立在丰富的有价值的内容基础之上必须搞清楚自己给人的印象是什么，对象是谁，确定印象后，努力实现和加强这种印象Logo出现在每个页面上对一个网站来说，要突出色彩如何建立有独特风格的网站风格应该建立在丰富的有价值的内容基础58确定网站的CICI：corporateidentity(企业识别),是通过视觉统一企业的形象确定网站的CICI：corporateidentity(企594月13日电子商务网站规划课件60logo中的BF设为百度红蓝色，代表一男一女。字体及位置的设计，则包含“众里寻他千百度”中不期而遇的美丽寓意。logo中的BF设为百度红蓝色，代表一男一女。614月13日电子商务网站规划课件62色彩传递的信息色彩在食品偏好中起着重要作用.一次调查:被调查的家庭主妇分别品尝了放在棕、蓝、红、黄四种容器中的咖啡（所有咖啡都是一样的，并对被调查者隐瞒了品牌）结果：75%的妇女认为放在棕色容器中的咖啡味道过苦；85%的人认为红色容器中的咖啡最浓；几乎所有人感觉蓝色容器中的咖啡味道较淡；而黄色容器中的咖啡几乎没味.雅格布、柯恩、沃西和吉恩曾做过有关部门跨文化的颜色比较的深入研究。他们对中国、韩国、日本以及美国消费者进行调查，发现亚洲人往往把灰色和廉价联系在一起，这恰恰与美国人相反，美国人认为灰色贵重且有高品质。亚洲人认为紫色为富贵之色，美国人却认为紫色有廉价感。不过，蓝色、红色、黄色与黑色倒是不约而同地分别与高品质、爱、幸福及力量联系在一起。一般地都认为绿色象征着纯洁和值得信赖。色彩传递的信息色彩在食品偏好中起着重要作用.63可口可乐的瓶子在不经意间传递了许多信息：瓶子颈部凸起的花纹使人感到握在手中不会脱落；瓶子外观别致、造型优雅，似乎透射着饮料能带给你一份轻松；里面所装的液体，看起来比标注的份量多，有了一种实在感；coca-cola的斯宾塞体字形，与白色字体形成强烈对比的红色标准色，流动的水线等，无不在传递着青春、活力、轻松与自在。可口可乐的瓶子在不经意间传递了许多信息：瓶子颈部凸起的花纹使64怎样树立网站的风格色调：是活泼还是庄重，是素还是艳。

怎样树立网站的风格色调：是活泼还是庄重，是素还是艳。65请为你的网站进行CI设计，包括logo、标准色彩、标准字体、宣传标语等，并说明如何突出网站的风格试用图片设计工具设计logo，选图片的格式GIF请为你的网站进行CI设计，包括logo、标准色彩、标准字体、66有风格的网站与普通网站的区别在于：普通网站上你看到只是堆砌在一起的信息，总之。只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。创意：如网络与电话结合，产生IP电话有风格的网站与普通网站的区别在于：普通网站上你看到只是堆砌在67如何确立自己的风格确信风格是建立在有价值内容之上的。一个网站有风格没有内容，就好比绣花枕头一包草，所以首先必须保证内容的质量和价值性搞清网站给人的印像如果用一句话来描述你的站点，应该是（）有创意、有实力、有美感、有冲击力想到你的站点，可以想到的颜色是（）热情的红色、幻想的天蓝色想到你的站点，可以联想的画面是（）杂货店、书店、如果网站是一个人，他拥有的个性是（）活泼可爱的儿童、思想成熟的中年人作为站长，你希望给人的印象是（）敬业、认真负责、有深度、直爽用一种动物做比喻，你的站点是（）兔子（聪明敏感）、狮子（自信威武）浏览者觉得你和其他网站不同（）可以信赖、信息最快、交流方便如何确立自己的风格68导航系统网站中的导航系统就是网页上各种导航条的总称，用户通过导航系统中的各种导航元素，可以快速查询到自己所需要的信息。导航系统用来建立网页信息内容之间的上下文关系，为用户在新环境下快速定位提供语境，从而使用户明确下面三个问题：我在哪？我曾经去过哪？我可以去哪。导航系统网站中的导航系统就是网页上各种导航条的总称，用户通过69全局导航全局导航（PersistentNavigation）又称主导航，它是出现在网站的每一个页面上一组通用的导航元素，以一致的外观出现在网站的每一页，扮演着对用户最基本的访问方向性指引。全局导航全局导航（PersistentNavigation704月13日电子商务网站规划课件714月13日电子商务网站规划课件724月13日电子商务网站规划课件73局部导航局部导航是子页面相同页面组的内部导航，使用户在一个内容领域里按层次浏览局部导航局部导航是子页面相同页面组的内部导航，使用户在一个内74局部导航（副导航）：全局导航的延伸，设计灵活、变化频繁、指向同级或下级页面。

使用要点：

局部导航的过渡应平滑、一致，不应将用户带出网站，或是跳转到其它类别。局部导航可以是主导航项目的下级分类、同级分类、某一特定类别等等。

局部导航和全局导航的组合举例：

局部导航（副导航）：全局导航的延伸，设计灵活、变化频繁、指向754月13日电子商务网站规划课件76网页版面布局与制作布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。“最适合”是一个不确定的形容词。布局的重要性：挖掘客户的需求，将用户需要的内容充分展示出来，为客户提供舒适、友好、简单的访问体验，进而留住客户，还能结合SEO，提升网站的搜索引擎排名。如同盖房子有草图一样，网站设计也同样有草图。网页版面布局与制作布局就是指以最适合用户浏览的方式将图片和文774月13日电子商务网站规划课件784月13日电子商务网站规划课件79网站外形尺寸：网页黄金分割网站外形尺寸：网页黄金分割80在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视814月13日电子商务网站规划课件824月13日电子商务网站规划课件83那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我84我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是85常见的布局形式“T”结构布局：页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

常见的布局形式“T”结构布局：页面顶部为横条网站标志+广告条86同字型布局特点：页面顶部为水平放置的主导航栏，其下体大致分为左，中，右3栏同字型布局874月13日电子商务网站规划课件88“口”型布局这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

“口”型布局这是一个象形的说法，就是页面一般上下各有一个89Flash型