项目一-电子商务网站页面赏析

1、项目一 电子商务网站页面赏析主要内容项目引导项目任务书项目任务实施1233项目任务分析4自学与拓展35项目引导要去规划电子商务网站，如何去规划？通过分析同类型的优秀电子商务网站页面，有助于迅速提高网页设计水平和激发学习兴趣。通过对优秀电子商务网站页面的分析，可以形象化理解网页的版面设计、色彩搭配、网页元素、导航设计等。通过确定网站的主题来规划网站、搜集素材，使单个页面构成风格统一的网站。网页赏析，赏析什么？实质还是网站设计与制作，关键还是设计。如何设计: 哪些元素应用，怎么放置，哪些模块功能项目任务书能力目标学习完本项目后，学生应当能够对优秀商务网站培养基本的赏析能力及设计能力，包括：1）分析

2、网站的配色方案2）分析网站的版式结构3）编写网站赏析报告4）模仿同类网站进行规划设计任务一 制造业类企业网站赏析 本任务目标是通过浏览“鸿雁电器”、“天马轴承”、“名城房产”、“海亮集团”等制造业类企业的电子商务商务网站，来分析其页面布局、导航条目设计、色彩搭配等，以便为同类型企业规划设计网站。 项目任务实施任务一制造业类企业网站赏析 1.分析“鸿雁电器”网站“鸿雁电器”是浙江杭州一家专业的建筑电器连接和建筑电气控制系统的集成供应商。网址为。项目任务实施任务一制造业类企业网站赏析 网站主页布局采用了“左拐角”的页面布局设计，在顶部为企业的logo、导航条和banner。整体颜色风格为蓝色和浅灰

3、绿，以及橘黄色，色调风格清新与企业logo的颜色相一致，同时与banner条广告中的绿竹部分相呼应，体现了现在在建筑建材领域追求绿色环保、适合人居的主题。导航条类目设计主要由指示主页的“首页”，介绍企业的“了解我们”，展示新闻的“新闻中心”，展示产品的“产品中心”，体现服务的“服务与支持”、“下载中心”、“鸿雁之家”和人力资源的“加入我们”组成。 另外在和公司logo栏目右侧醒目位置展示了公司客户热线，也体现了公司服务客户的理念。 Banner条中显示的动画主要由产品图像以及修饰衬托产品的绿竹、家居和体现公司文化的宣传口号“品质、生活、态度”，让家的感觉更美好构成。 在顶部下面的左拐角部分是新

4、闻列表等类目列表，右侧大部分用于展示企业推荐的产品。 在底部为联系方式和版权信息。项目任务实施任务一制造业类企业网站赏析 2. 分析“天马轴承”网站“天马轴承”是国内轴承行业最具竞争力的企业也是一家上市企业。网址为“”。项目任务实施任务一制造业类企业网站赏析 网站主页布局采用了“同字型”的页面布局设计，在顶部为企业的logo、导航条和banner。整体颜色风格为蓝色，常用于企业网站。 导航条类目设计主要由指示主页的“首页”，介绍企业的“公司简介”，展示新闻的“信息发布”，展示产品的“产品展示”，体现服务的“营销网络”、“服务中心以及上市公司必须的“投资者关系”、人力资源的“在线招聘”和体现联系

5、方式的“联系我们”组成。 Banner条中显示的动画主要由体现公司形象的“天马奔腾”、体现公司资质的“品牌图标”以及公司文化的宣传口号“持之以恒、天马轴承”构成。 在主体部分为三列，左右为主要栏目信息，中间为主体新闻展示等。 在底部为联系方式、版权信息和友情链接。项目任务实施任务一制造业类企业网站赏析 二级页面选了“信息发布”中的“天马新闻”，如图所示。 二级页面布局采用了“同字型”的页面布局设计，在顶部依旧为企业的logo、导航条和banner。整体颜色风格同为蓝色，和首页风格统一。 在顶部中，其余内容保持不变，不同就是在banner的动画不同，里面修饰图片为公司一些新闻图像来修饰。 在主体

6、部分，左侧为新闻分类等类目列表，右侧大部分用于具体新闻。 在底部基本和主页一致。项目任务实施任务一制造业类企业网站赏析 3.分析“名城房产”网站“名城房产”是浙江省一家民营房地产开发企业。网址为“http:/www.”。项目任务实施任务一制造业类企业网站赏析 网站主页布局采用了“同字型”的页面布局设计，在顶部为企业的logo、导航条和banner。整体颜色风格为浅灰色调，主要表现建筑以及开发商的风格，自然干净。 导航条类目设计主要由介绍企业的“走进名城”、“名城文化”，展示新闻的“新闻中心”，展示产品的“名城产品”，体现服务的“民城刊物”、人力资源的“名城招牌”和体现联系方式的“联系我们”组成

7、。 Banner条中显示的动画主要由体现公司形象的产品楼盘图片和公司文化的宣传口号“永远热爱生活”构成。 在主体部分，左、中、右等分，分别为“公司概况”、“楼盘展示”和“新闻中心”三个栏目。 在底部为简要的版权信息。二级页面选了“名城产品”为例，如图所示。 二级页面布局采用了“左拐角型”的页面布局设计，在顶部依旧为企业的logo、导航条和banner。整体颜色风格同为浅灰色，和首页风格统一。 在左侧拐角部分为，该导航条项目中具体各产品的列表。右侧的主体部分，为具体产品楼盘的展示。 在底部基本和主页一致。项目任务实施任务一制造业类企业网站赏析 项目任务实施任务一制造业类企业网站赏析 4.分析“海

8、亮集团”网站 “海亮集团”是浙江一家以铜加工、房地产、金属贸易、矿产资源、教育、商业百货等为主体的民营综合集团公司。网址“”。项目任务实施任务一制造业类企业网站赏析 网站主页布局采用了和“同字型”近似的页面布局设计，在顶部为企业的logo、导航条和banner。整体颜色风格为浅蓝色调为主，也是企业logo的 主要颜色。除了浅蓝色调，还搭配了浅灰，在加上留白的设计，也是企业网站常见色调搭配，显得大气自然。 导航条类目设计主要由介绍企业的“关于海亮”，展示产业结构的“海亮产业”，体现服务的“海亮与社会”，展示新闻的“新闻中心”和人力资源的“海亮人才”组成。 Banner条中显示的动画主要由体现公司

9、形象的各主营产业的实体图像、该产业的说明文字和该产业资质宣传的文字描述构成。 在主体部分均分为四列，分别为“新闻信息”、“企业文化”、“社会责任”和“诚聘人才”四个栏目的具体内容信息。 在底部为海亮集团的简要联系方式和网站版权信息。项目任务实施任务一制造业类企业网站赏析 二级页面选了“海亮与社会”为例，如图所示。 二级页面布局也采用了“左拐角型”的页面布局设计，在顶部依旧为企业的logo、导航条。Banner条则为体现企业文化、价值观的文字内容。整体颜色风格同为浅蓝和浅灰色，和首页风格统一。 在左侧拐角部分为，该导航条项目 “海亮与社会”中具体实施的三级子菜单。右侧的主体部分，为这些三级菜单对

10、应的具体内容和辅助栏目列表。 在底部基本和主页一致。项目任务实施任务一制造业类企业网站赏析 5. 网站分析总结 该类型网站包含贸易类公司也是电子商务网站设计中经常遇到的。现阶段的该类网站布局常见用于“同字型”和“拐角型”。整体网站风格颜色多采用公司的标准色、logo的颜色以及和企业主题相联系的颜色，或者是蓝、灰等体现商务风格简约的色调。 网站导航条的设计也基本决定了该网站的二级页面栏目分类，该类型企业网站常见公有栏目有：指示主页的“首页”，介绍企业的“关于公司”，展示新闻的“新闻中心”，展示产品的“产品中心”，体现服务的“营销网络”、“售后服务”，人力资源的“加入我们”和体现联系方式的“联系我

11、们”组成。 Banner条现在逐渐变成首页中的主要修饰作用的模块，主要由动态动画或静态图像组成，大小也在逐渐变大，更为醒目。该修饰图像主要可由图像素材和文字组成。一般图像素材常见修饰企业产品、企业建筑、企业人员、企业工程项目、和主题有关的修饰图像、说明资质的图标等。文字主要由企业文化、宣传口号、产品描述等构成。 主体部分主要是各栏目具体信息。底部常见是版权信息、友情链接、企业联系方式、说明性信息等。 二级页面为了保持整个网站的风格，往往只在主体部分保持不同。当然也有一些例外如服装、汽车等制造业企业网站，则更注重网站的展示功能，以大量的修饰动画、图片素材修饰为主。项目任务分析任务一制造业类企业网

12、站赏析 WWW WWW是World Wide Web的缩写，也可以简称为Web，中文名字为“万维网”。 WWW的核心是由三个标准构成的：WWW的工作原理网页和网站 网页是构成网站的基本元素，是承载各种网站应用的平台。网站就是由一系列围绕同一主题统一风格的网页组成的。网站具体的内容就是网页，访问网站就是通过网页浏览器来获取该网站的资源信息或者网络服务。主页，也称为“Home Page” 一个特殊的网页。网站中的网页一般包括静态网页和动态网页两种形式。构成网页的基本元素 一般构成网页的基本元素包括Logo、Banner、导航条、文字、图像、多媒体、动态特效、表格、框架、超链接、表单等。项目任务分析

13、任务一制造业类企业网站赏析 自学与拓展任务一制造业类企业网站赏析 1.网站设计与制作的三个阶段 第一阶段，网站规划。主要包含确定网站主题、搜集网站材料和规划网站架构。 第二阶段，网站制作。主要包含网站制作过程、测试评估以及将网站正式上传。 第三阶段，后期维护。主要包含网站的推广和营销，以及对网站的维护和内容的更新。2.贸易公司网站的分析 对“浙江物产国际贸易有限公司”的网站进行分析，网址为“”，主页效果如图1-X所示。同时分别指出所用的网页基本元素。 自学与拓展任务一制造业类企业网站赏析 项目任务引导任务二 服务业类企业网站赏析 本任务目标是通过浏览“外婆家”、“杭州大厦”、“恒生电子”等服务

14、业类企业的电子商务商务网站，来分析其页面布局、导航条目设计、色彩搭配等，以便为同类型企业规划设计网站。项目任务实施任务二 服务业类企业网站赏析1. 分析“外婆家”网站 “外婆家”是浙江杭州一家知名中式餐饮连锁企业。公司网址为“” 。和上一任务中风格的不同？项目任务实施任务二 服务业类企业网站赏析 网站主页布局采用了“左拐角”的页面布局设计，在顶部为企业的logo、导航条和banner。整体颜色风格为深色调为主，深绿为主主要 和各实体店的装修风格搭配。由于是服务业行业，所以客户服务是放在很重要的位置，可以在顶部banner条上看到“在线投诉”栏目、投诉电话，同时又体现餐饮的特殊性，将订座电话也放

15、在醒目的banner条上。 导航条类目设计上，有和制造业类企业类似的“首页”、“公司简介”、体现产品中心的“名菜名点”、体现经营网络的“门店介绍”以及反映新闻的“活动新闻”。但这些类似的栏目中又有其特点，新闻中心对于餐饮企业网站的访问者，更关注的是该企业的最新活动促销信息，所以命名为“活动新闻”。同样餐饮企业网站展示了自己后，肯定是需要告之访问者店在哪里，因此“门店介绍”也是必不可少的。另外餐饮企业最能体现其特色的就是“名菜名店”。 在主体部分，“左拐角”是具体新闻列表。右侧的主体部分是最能体现餐饮企业的门店装修实景和特色菜品。这两部分也是最能通过图像来展示其风格特点的。 在底部是友情链接和版

16、权信息。项目任务实施任务二 服务业类企业网站赏析2.分析“杭州大厦”网站 “杭州大厦”是浙江杭州一家集购物、娱乐、休闲一体，汇集国际国内一线品牌的高端商贸综合体。网址为。项目任务实施任务二 服务业类企业网站赏析 该网站在输入网址后，首先会有一个以大幅动画图片展示杭州大厦环境的封面性页面作为首页，进行选择“杭州大厦”后可进入真正的主页。该主页也是采用类似了“左拐角”的页面布局设计。服务类企业网站往往在页面布局上较传统制造类企业更为突破，运用更多图像、动画。网站 主色调为香槟色，可以很好体现该网站的风格，与“杭州大厦”位于杭州商场高端的地位相吻合。 在左上角依然为logo，在导航条类目设计中，比餐

17、饮企业更注重促销活动的信息展示。以及商场也往往非常注重会员卡的运用，因此会员卡专区也是“杭州大厦”网站在栏目设计中的主要规划内容。还有“走进购物城”的“楼层指南”栏目也是商场主题网站的常见项目。在主体部分，也是通过位于醒目位置的图像来展示最新的品牌活动信息和促销海报。 在底部和其他网站一样是版权信息。3.分析“恒生电子”网站“恒生电子”是一家国内领先的提供金融软件服务和网络服务的高新技术企业。网址为。项目任务实施任务二 服务业类企业网站赏析 网站主页布局采用了“同字型”的页面布局设计，在顶部为企业的logo、banner和导航条。整体颜色风格为蓝色为主基调，也是企业网站中经常使用的颜色搭配，给

18、人年轻活力、稳步成长的感觉。 导航条类目设计也和前面所说的企业类似，指示首页的“首页”，企业介绍的“关于恒生”，产品展示的“行业领域”，上市公司所需要的“投资者关系”，展示新闻的“公司新闻”，和如何联系的“联系我们”。而将人才招聘的“诚聘英才”、服务内容的“恒生世界”和“恒生E社区”放到了主体部分的右侧列表。 在banner条的构成主要有文字部分主要阐述企业的文化、领导寄语和领先成果，也就是体现资质，图像部分主要为修饰衬托文字。 在主体部分的左侧列表为一些最新公告信息，中间部分是具体的公司新闻信息，右侧列表为前面所说部分导航类目。 在底部的内容构成是版权信息和企业联系方式。 项目任务实施任务二

19、 服务业类企业网站赏析4. 网站分析总结 该类型企业的网站的整体版面设计、栏目构成和前一任务的传统制造业企业网站基本还是类似的。只是在一些具体为人们生活提供服务的餐饮、娱乐、购物、休闲等网站时，在页面的布局上更为开放，图像、动画、色彩运用的更多，为了能更好的吸引普通访问者访问，在栏目设计上也会有自身行业的一些特色。项目任务实施任务二 服务业类企业网站赏析网页制作基本原则： 主要包含三个方面：内容、速度和页面美感。根据不同的网络环境和服务对象，这三个方面次序不同。 网页设计也同样需要遵循设计的3C原则：指简洁、一致性、好的对比度。 网页版面布局类型 网页版面布局大致可分为“同字型”、“拐角型”、

20、“标题正文型”、“封面型”、“框架型”、“Flash型”等。 项目任务分析任务二 服务业类企业网站赏析1.电子政务类网站分析 除了企业网站外，随着电子政务的大力推广，政府网站也是电子商务网站的一类。分析“杭州财税局”网站，网址为“”，主页效果如图所示。分析该网站的特点，以及面向访问群体是哪些。由面向群体确定了网站主题后，在网站设计上是怎么来围绕该主题实现的。自学与拓展任务二 服务业类企业网站赏析2.为“浙江内利信息技术公司”规划网站 浙江内利信息技术有限公司成立于2008年，是一家专业从事现代电子服务业的高科技企业，公司主营线上线下的多元化产品及服务，打造实体商户加盟的内利商城，自主创新研发支

21、持线下电子支付的终端POS机，发行集支付、储值、积分、打折优惠于一体的内利卡，实现落地电子商务的新模式。 公司文化是：内容万象，利行德广。“内”指“内利商城”，“容万象指”通过内利商城的平台，让加盟商、用户，及上游生产商等各类人群都可以从内利商城中得到各类综合服务，“利”指“盈利模式”，“行德广”指通过内利商城的盈利模式推广加盟商，为客户、上游生产商带来实实在在的好处，恩泽广众。 规划设计出该企业主页的版面布局，色调风格和栏目构成。自学与拓展任务二 服务业类企业网站赏析项目任务引导任务三电子商务平台类网站赏析 除了具体企业网站外，电子商务平台类网站也是电子商务的重要构成部分，主要包含电子商务网

22、上商城和行业类电子商务网站。本任务目标是通过浏览“京东商城”、“杭州大厦”、“恒生电子”等电子商务平台类网站，进行分析，以便了解该类型网站的特点。1.分析“京东商城”“京东商城”是国内最大最专业的从事数码、家电、电脑、百货类网上购物商城之一。网址是“”。项目任务实践任务三电子商务平台类网站赏析 网上购物商城的版面布局大致是按照“同字型”或者“左拐角”的。色调为喜庆的红色为主。“京东商城”的顶端部分由网站的logo和导航条组成。网上购物商城的导航条一般不同于前面任务中企业网站的导航条。网上购物商城的导航条的主要类目是由主营业务大的分类构成的，“京东商城”的导航条中就是“家用电器”、“手机数码”、

23、“电脑产品”和“日用百货”这四个主营分类。除此外，还有一些特色类目构成如“京东商城”的“积分兑换”。项目任务实践任务三电子商务平台类网站赏析 网上购物商城最主要的特色是在主页会有很大篇幅显示分类列表，一般位于主体部分的左侧边栏，有些商城类目非常丰富，如淘宝，分类列表则占用主体部分的主要位置。分类列表作用如传统商场中的导购牌，将购物商场中的商品分门别类好,这样可以方便访问者找到需要的商品。 在导航条下方，页面中间有搜索栏，方便访问者搜索相关信息。在主体部分中间部分，上面则是商品促销信息区，由自动轮换的促销活动图像或者动画组成。 下面是橱窗展示区，就像实体店铺中橱窗的作用。电子商务网站主页的内容有

24、限，为了尽可能多的有效展示商品，一般橱窗展示区中每个商品采用小的缩略图加上简要标题文字和价格说明。在主体部分右边列表，则可以列一些相关的畅销排行榜、特卖活动信息等来帮助访问者挑选商品。 在底部，网上购物商城除了常见的版权信息、联系我们等，往往会有“购物指南”、“配送方式”、“支付方式”、“售后服务”等解决访问者购物疑问的栏目信息。项目任务实践任务三电子商务平台类网站赏析2.分析“中国纺织网” “中国纺织网”是国内最大最专业的纺织行业性电子商务网站，主要是一个为纺织企业提供网上资讯、网上贸易等综合服务的行业性电子商务平台。网址是“” 。项目任务实践任务三电子商务平台类网站赏析 该类型网站布局结构

25、和网上商城类似。主要特色是属于行业性门户网站，主页上资讯非常丰富，由于访问对象主要是行业内企业为主，因此资讯的及时全面准确就成为网站的首要，美观等因素则放在次要。同时广告收入也是该类型网站的重要收入来源，因此该类型网站会在页面上大量放置小图标式的企业广告。 该类型网站导航条类目设计也是以企业的需求为特色来构成的。在主体部分，行业内的产品规格分类列表也非常重要是方便访问者寻找资讯重要渠道。网站规划设计中须注意的问题： 可用笔画先打网站框架的草稿 慎用特殊字体 页面中避免长文本 网页内容要易读 图像的运用 注重留白、对比、连贯 不要忽视错别字项目任务分析任务三电子商务平台类网站赏析项目任务分析任务三电子商务平台类网站赏析电子商务网店结构 自学与拓展任务三电子商务平台类网站赏析1.网站规划书包含哪些主要内容？ 一个网站设计的是否成功与建站前的规划有着极为重要的关系。网站规划是指在网站建设前对目标市场进行分析、确定网站的主题和功能，并根据需要对网站建设中的布局、技术、内容、费用、测试、维护等做出规划。2.简写杭州康翠电子商务有限公司关于建立浙江民特优农产品交易网站的策划书。Thank You !