电子商务网页设计-项目一-赏析和规划电子商务网站-了解电子商务网站课件

SAMPLE1.1知识链接项目一：赏析和规划电子商务网站—了解电子商务网站SAMPLE1.1知识链接项目一：赏析和规划电子商务网站—了1网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉营销3电子商务网站的开发流程4知识链接5电子商务网站的分类网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉21网页的构成元素1网页的构成元素3ABOUTME

网页中常见的构成元素有文本、图像、超链接、动画、声音、视频、动画、表单、程序等，如图所示ABOUTME网页中常见的构成元素有文本、图4Logo作为公司或网站的标志，起着非常重要的作用。一个制作精美的Logo不仅可以很好地树立公司形象，还可以传达丰富的产品信息。LOGO网站作为一种全新的、已经为大众所熟悉和接受的媒体，正在逐步显示出其特有的、蕴藏深厚的广告价值空间。广告条导航是网站设计中不可缺少的基础元素之一，它是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。导航菜单Logo作为公司或网站的标志，起着非常重要的作用。一个制作精5文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是必不可少的，它们是向浏览者传达信息最直接、最有效的方式。文本和图像随着互联网的迅速发展，网络速度的提高，在网页中出现了越来越多的多媒体元素，包括动画、声音、视频等。动画表单是功能型网站中经常使用的元素，是网站交互中最重要的组成部分。在网页中，小到搜索框与搜索按钮，大到用户注册表单及用户控制面板，都要使用到表单及其表单元素。表单文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是62电子商务网站的概念和特点2电子商务网站的概念和特点7商品展示页面信息量大、图片多①网站注册登录简单化②通过相关产品的交叉销售提高销售额③安全与快捷的多种支付方式④

电子商务网站是指一个企业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。

⑤具备信息检索与筛选功能⑥具备订单信息确认及取消功能概念：功能：商品展示页面信息量大、图片多①网站注册登录简单化②通过相关产83电子商务网站的分类3电子商务网站的分类9信息服务类①广告类②管理类③综合类④电子商务网站的种类有很多种,按照其功能的不同可以分为五类：⑤交易类信息服务类①广告类②管理类③综合类④电子商务网104电子商务网站的视觉营销4电子商务网站的视觉营销11

主题突出原则主题突出原则12

整体设计原则整体设计原则13

内容与形式统一原则内容与形式统一原则14准确表达与良好体验原则准确表达与良好体验原则155电子商务网站的开发流程5电子商务网站的开发流程16电子商务网页设计-项目一-赏析和规划电子商务网站-了解电子商务网站课件17任务描述——分析电子商务网站首页1技术引进——分析页面结构与色彩2新手试炼——赏析电子商务页面341.2任务一赏析电子商务网站任务实施——提高用户体验的要素任务描述——分析电子商务网站首页1技术引进——分析页面结构与181任务描述——分析电子商务网站首页1任务描述——分析电子商务网站首页19ABOUTME

从网站的功能栏目、色彩和页面布局进行分析，帮助读者快速了解电子商务网站与普通网站在页面上的不同。ABOUTME从网站的功能栏目、色彩和页面布202技术引进——分析页面结构与色彩2技术引进——分析页面结构与色彩21ABOUTME

网页页面结构种类很多，常见的有满版型、分割型、骨骼型、曲线型、中轴型、对称型、倾斜型、焦点型、自由型和三角型等。页面结构ABOUTME网页页面结构种类很多，常见的有22ABOUTME

页面顶部和左右两侧布局页面导航。导航的任务就是清楚地告诉用户将前往信息架构中的什么地方。最初可以只是指定链接，随着进一步设计导航，最终会把用户所做的一切都展示在狭小的屏幕空间里。导航设置ABOUTME页面顶部和左右两侧布局页面导航23结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。1)结构导航关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息。2)关联导航可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息和搜索等功能。3)可用性导航结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形24ABOUTME

网页色彩是树立网站形象的关键之一，很多网页都以其完美的色彩搭配起到令人过目不忘的效果，由此可见，颜色的使用在网页的制作中是非常重要和关键的。色彩分析ABOUTME网页色彩是树立网站形象的关键之253任务实施——提高用户体验的要素3任务实施——提高用户体验的要素26ABOUTME

网页尺寸的设定和书本不同，书本的开本基本是固定的，作者和读者看到的尺寸都是一样的。而网页的尺寸受限于两个因素：显示器的尺寸和浏览器软件。用户在不同的显示器上或使用不同的浏览器都会产生不同的体验。1.确定网页的尺寸ABOUTME网页尺寸的设定和书本不同，书本27ABOUTME

用户在浏览网页的时候，总是希望可以快速找到自己需要的内容，否则用户通常会选择马上离开。合理的页面布局可以使用户快速发现网站的核心内容和服务。2.合理的页面布局ABOUTME用户在浏览网页的时候，总是希望28从上到下，从左到右，按照内容重要性的优先级有序放置①重要的内容一定要放在页面显眼的位置②同级页面布局要统一③合理的应用嵌套④⑤建立清晰的视觉层次感⑥合理地体现视觉关联2.合理的页面布局从上到下，从左到右，按照内容重要性①重要的内容一定要放在页面294新手试炼——赏析电子商务页面4新手试炼——赏析电子商务页面30Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametcommodomagnaerosquisurna.ADDYOURPOINTHERELoremipsumdolorsitamet,co31Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,co32

此页面首页采用扁平化设计风格，采用通栏的布局方式。主色采用Logo的颜色红紫色。辅色为主色的补色黄绿色。整个页面对比强烈，主题明确。

通过前面的任务实施，读者应该学会如何赏析一个电子商务网页了。接下来通过一个小案例巩固一下所学内容。此页面首页采用扁平化设计风格，采用通栏的布局方33

此页面商品列表页布局紧凑。使用红色文字和红色按钮将页面中重点信息突显出来，便于浏览者查看。

此页面商品列表页布局紧凑。使用红色文字和红色按34

此页面产品详情页采用左右结构，明亮的红色和黄色将整个页面分割成几部分，内容清晰，对比明确。此页面产品详情页采用左右结构，明亮的红色和黄色35SAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站SAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站36任务描述——分析电子商务网站结构1技术引进——完成电子商务网站线框图2新手试炼——电子商务网站会员页面设计341.3规划“学设计吧”电子商务网站任务实施——设计电子商务网站任务描述——分析电子商务网站结构1技术引进——完成电子商务网371任务描述——分析电子商务网站结构1任务描述——分析电子商务网站结构38ABOUTME

该项目为视频教程网站，用户注册为会员后，通过付费的方式购买单节课程或成为网站VIP观看全部视频。按照网站内容，将网站分为首页、在线课程、书籍光盘和图文教程4个栏目，ABOUTME该项目为视频教程网站，用户注册39ABOUTME首页中主要用来显示最新发布或指定的视频、书籍和教程。让浏览者第一时间看到网站最新更新和最想推广的内容。同时用户可以通过首页中的各种链接，快速到达想要了解的内容。首页ABOUTME首页中主要用来显示最新发布或指40ABOUTME该页面中采用罗列的方式，展示网站中的各类在线课程。通过建立分类链接，便于用户查找想要观看的课程视频。在线课程ABOUTME该页面中采用罗列的方式，展示网41ABOUTME该页面与在线课程表现形式一致，采用罗列的方式将图书展示给用户。为了便于查找，将书籍按照行业和软件进行了分类。书籍光盘ABOUTME该页面与在线课程表现形式一致，42ABOUTME

该页面主要以图片和文字的形式向用户展示设计相关知识。同样也对相关内容进行了分类，用户可以以行业和软件进行查找。图文教程ABOUTME该页面主要以图片和文字的形式向用432技术引进——完成电子商务网站线框图2技术引进——完成电子商务网站线框图44

在开始设计制作页面前，通常会先绘制网站原型的线框图，帮助设计师平衡保真度和速度。绘制的时候不用在意细节，一定要表达出设计思想，不要漏掉任何重要的部分。在开始设计制作页面前，通常会先绘制网站原型的线45

首页面内容较多，包含大量的图片和文字。为了保证各功能的独立性，还要便于用户浏览，页面采用了中轴线的布局方式，将图形、文字以水平或垂直的方式排列，给人稳定、平静、含蓄的感觉。首页面内容较多，包含大量的图片和文字。为了保证463任务实施——设计电子商务网站3任务实施——设计电子商务网站47ABOUTME该页面是一个培训类网站，故可以选择代表科技的蓝色和代表教育的绿色作为主色，但考虑网站中的视频教程多为互联网类的教材，所以排除了绿色，选择了蓝色作为主色。但蓝色颜色过于深沉，与设计行业多姿多彩的寓意相违背，所以提高蓝色的明度，选择较为活泼清新的青色作为网站的主色，确定主色ABOUTME该页面是一个培训类网站，故可以48ABOUTME主色确定后，接下来确定辅色。通常情况可以选择同色搭配、临色搭配和补色搭配三种方式。同色搭配可以实现风格整体风格一致的效果，但对比不强烈。临色搭配可以实现丰富的层次感，但对于需要突出的内容表现不足。确定辅色ABOUTME主色确定后，接下来确定辅色。通49ABOUTME页面中的文本，通常都是要黑色或者白色。标题文字或重点突出文字使用辅色。纯黑的文字过于生硬，故页面中使用深灰色作为文本的颜色。文本颜色ABOUTME页面中的文本，通常都是要黑色或50完成设计主页设计稿二级页设计稿完成设计主页设计稿二级页设计稿51完成设计项目页设计稿详情页设计稿完成设计项目页设计稿详情页设计稿524新手试炼——电子商务网站会员页面设计4新手试炼——电子商务网站会员页面设计53ABOUTME

会员系统页面与整个页面风格保持一致。会员系统是网站中最重要的功能，也是网站正常运营的保障。一般设计的较为简洁，主题明确，避免受到其他内容影响。接下来读者根据前面所学内容设计会员页面。ABOUTME会员系统页面与整个页面风格保持54PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/资料下载：/ziliao/PPT课件下载：/kejian/范文下载：/fanwen/试卷下载：/shiti/教案下载：/jiaoan/字体下载：/ziti/

SAMPLETHANKSPPT模板下载：/moban/55SAMPLE1.1知识链接项目一：赏析和规划电子商务网站—了解电子商务网站SAMPLE1.1知识链接项目一：赏析和规划电子商务网站—了56网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉营销3电子商务网站的开发流程4知识链接5电子商务网站的分类网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉571网页的构成元素1网页的构成元素58ABOUTME

网页中常见的构成元素有文本、图像、超链接、动画、声音、视频、动画、表单、程序等，如图所示ABOUTME网页中常见的构成元素有文本、图59Logo作为公司或网站的标志，起着非常重要的作用。一个制作精美的Logo不仅可以很好地树立公司形象，还可以传达丰富的产品信息。LOGO网站作为一种全新的、已经为大众所熟悉和接受的媒体，正在逐步显示出其特有的、蕴藏深厚的广告价值空间。广告条导航是网站设计中不可缺少的基础元素之一，它是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。导航菜单Logo作为公司或网站的标志，起着非常重要的作用。一个制作精60文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是必不可少的，它们是向浏览者传达信息最直接、最有效的方式。文本和图像随着互联网的迅速发展，网络速度的提高，在网页中出现了越来越多的多媒体元素，包括动画、声音、视频等。动画表单是功能型网站中经常使用的元素，是网站交互中最重要的组成部分。在网页中，小到搜索框与搜索按钮，大到用户注册表单及用户控制面板，都要使用到表单及其表单元素。表单文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是612电子商务网站的概念和特点2电子商务网站的概念和特点62商品展示页面信息量大、图片多①网站注册登录简单化②通过相关产品的交叉销售提高销售额③安全与快捷的多种支付方式④

电子商务网站是指一个企业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。

⑤具备信息检索与筛选功能⑥具备订单信息确认及取消功能概念：功能：商品展示页面信息量大、图片多①网站注册登录简单化②通过相关产633电子商务网站的分类3电子商务网站的分类64信息服务类①广告类②管理类③综合类④电子商务网站的种类有很多种,按照其功能的不同可以分为五类：⑤交易类信息服务类①广告类②管理类③综合类④电子商务网654电子商务网站的视觉营销4电子商务网站的视觉营销66

主题突出原则主题突出原则67

整体设计原则整体设计原则68

内容与形式统一原则内容与形式统一原则69准确表达与良好体验原则准确表达与良好体验原则705电子商务网站的开发流程5电子商务网站的开发流程71电子商务网页设计-项目一-赏析和规划电子商务网站-了解电子商务网站课件72任务描述——分析电子商务网站首页1技术引进——分析页面结构与色彩2新手试炼——赏析电子商务页面341.2任务一赏析电子商务网站任务实施——提高用户体验的要素任务描述——分析电子商务网站首页1技术引进——分析页面结构与731任务描述——分析电子商务网站首页1任务描述——分析电子商务网站首页74ABOUTME

从网站的功能栏目、色彩和页面布局进行分析，帮助读者快速了解电子商务网站与普通网站在页面上的不同。ABOUTME从网站的功能栏目、色彩和页面布752技术引进——分析页面结构与色彩2技术引进——分析页面结构与色彩76ABOUTME

网页页面结构种类很多，常见的有满版型、分割型、骨骼型、曲线型、中轴型、对称型、倾斜型、焦点型、自由型和三角型等。页面结构ABOUTME网页页面结构种类很多，常见的有77ABOUTME

页面顶部和左右两侧布局页面导航。导航的任务就是清楚地告诉用户将前往信息架构中的什么地方。最初可以只是指定链接，随着进一步设计导航，最终会把用户所做的一切都展示在狭小的屏幕空间里。导航设置ABOUTME页面顶部和左右两侧布局页面导航78结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。1)结构导航关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息。2)关联导航可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息和搜索等功能。3)可用性导航结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形79ABOUTME

网页色彩是树立网站形象的关键之一，很多网页都以其完美的色彩搭配起到令人过目不忘的效果，由此可见，颜色的使用在网页的制作中是非常重要和关键的。色彩分析ABOUTME网页色彩是树立网站形象的关键之803任务实施——提高用户体验的要素3任务实施——提高用户体验的要素81ABOUTME

网页尺寸的设定和书本不同，书本的开本基本是固定的，作者和读者看到的尺寸都是一样的。而网页的尺寸受限于两个因素：显示器的尺寸和浏览器软件。用户在不同的显示器上或使用不同的浏览器都会产生不同的体验。1.确定网页的尺寸ABOUTME网页尺寸的设定和书本不同，书本82ABOUTME

用户在浏览网页的时候，总是希望可以快速找到自己需要的内容，否则用户通常会选择马上离开。合理的页面布局可以使用户快速发现网站的核心内容和服务。2.合理的页面布局ABOUTME用户在浏览网页的时候，总是希望83从上到下，从左到右，按照内容重要性的优先级有序放置①重要的内容一定要放在页面显眼的位置②同级页面布局要统一③合理的应用嵌套④⑤建立清晰的视觉层次感⑥合理地体现视觉关联2.合理的页面布局从上到下，从左到右，按照内容重要性①重要的内容一定要放在页面844新手试炼——赏析电子商务页面4新手试炼——赏析电子商务页面85Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametcommodomagnaerosquisurna.ADDYOURPOINTHERELoremipsumdolorsitamet,co86Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,co87

此页面首页采用扁平化设计风格，采用通栏的布局方式。主色采用Logo的颜色红紫色。辅色为主色的补色黄绿色。整个页面对比强烈，主题明确。

通过前面的任务实施，读者应该学会如何赏析一个电子商务网页了。接下来通过一个小案例巩固一下所学内容。此页面首页采用扁平化设计风格，采用通栏的布局方88

此页面商品列表页布局紧凑。使用红色文字和红色按钮将页面中重点信息突显出来，便于浏览者查看。

此页面商品列表页布局紧凑。使用红色文字和红色按89

此页面产品详情页采用左右结构，明亮的红色和黄色将整个页面分割成几部分，内容清晰，对比明确。此页面产品详情页采用左右结构，明亮的红色和黄色90SAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站SAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站91任务描述——分析电子商务网站结构1技术引进——完成电子商务网站线框图2新手试炼——电子商务网站会员页面设计341.3规划“学设计吧”电子商务网站任务实施——设计电子商务网站任务描述——分析电子商务网站结构1技术引进——完成电子商务网921任务描述——分析电子商务网站结构1任务描述——分析电子商务网站结构93ABOUTME

该项目为视频教程网站，用户注册为会员后，通过付费的方式购买单节课程或成为网站VIP观看全部视频。按照网站内容，将网站分为首页、在线课程、书籍光盘和图文教程4个栏目，ABOUTME该项目为视频教程网站，用户注册94ABOUTME首页中主要用来显示最新发布或指定的视频、书籍和教程。让浏览者第一时间看到网站最新更新和最想推广的内容。同时用户可以通过首页中的各种链接，快速到达想要了解的内容。首页ABOUTME首页中主要用来显示最新发布或指95ABOUTME该页面中采用罗列的方式，展示网站中的各类在线课程。通过建立分类链接，便于用户查找想要观看的课程视频。在线课程ABOUTME该页面中采用罗列的方式，展示网96ABOUTME该页面与在线课程表现形式一致，采用罗列的方式将图书展示给用户。为了便于查找，将书籍按照行业和软件进行了分类。书籍光盘ABOUTME该页面与在线课程表现形式一致，97ABOUTME

该页面主要以图片和文字的形式向用户展示设计相关知识。同样也对相关内容进行了分类，用户可以以行业和软件进行查找。图文教程ABOUTME该页面主要以图片和文字的形式向用982技术引进——完成电子商务网站线框图2技术引进——完成电子商务网站线框图99

在开始设计制作页面前，通常会先绘制网站原型的线框图，帮助设计师平衡保真度和速度。绘制的时候不用在意细节，一定要表达出设计思想，不要漏掉任何重要的部分。在开始设计制作页面前，通常会先绘制网站原型的线100

首页面内容较多，包含大量的图片和文字。为了保证各功能的独立性，还要便于用户浏览，页面采用了中轴线的布局方式，将图形、文字以水平或垂直的方式排列，给人稳定、平静、含蓄的感觉。