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

1、SAMPLE1.1知识链接项目一：赏析和规划电子商务网站了解电子商务网站网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉营销3电子商务网站的开发流程4知识链接5电子商务网站的分类1 网页的构成元素ABOUT ME 网页中常见的构成元素有文本、图像、超链接、动画、声音、视频、动画、表单、程序等，如图所示Logo作为公司或网站的标志，起着非常重要的作用。一个制作精美的Logo不仅可以很好地树立公司形象，还可以传达丰富的产品信息。LOGO网站作为一种全新的、已经为大众所熟悉和接受的媒体，正在逐步显示出其特有的、蕴藏深厚的广告价值空间。广告条导航是网站设计中不可缺少的基础元素之一，它是网站

2、信息结构的基础分类，也是浏览者进行信息浏览的路标。导航菜单文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是必不可少的，它们是向浏览者传达信息最直接、最有效的方式。文本和图像随着互联网的迅速发展，网络速度的提高，在网页中出现了越来越多的多媒体元素，包括动画、声音、视频等。动画表单是功能型网站中经常使用的元素，是网站交互中最重要的组成部分。在网页中，小到搜索框与搜索按钮，大到用户注册表单及用户控制面板，都要使用到表单及其表单元素。表单2 电子商务网站的概念和特点商品展示页面信息量大、图片多网站注册登录简单化通过相关产品的交叉销售提高销售额安全与快捷的多种支付方式 电子商务网站是指一个企

3、业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。 具备信息检索与筛选功能具备订单信息确认及取消功能概念：功能：3 电子商务网站的分类信息服务类广告类管理类综合类 电子商务网站的种类有很多种,按照其功能的不同可以分为五类：交易类4 电子商务网站的视觉营销 主题突出原则 整体设计原则 内容与形式统一原则准确表达与良好体验原则5 电子商务网站的开发流程任务描述分析电子商务网站首页1技术引进分析页面结构与色彩2新手试炼赏析电子商务页面341.2 任务一赏析电子商务网站任务实施提高用户体验的要素1 任务描述分析电子商务网站首页ABOUT ME 从

4、网站的功能栏目、色彩和页面布局进行分析，帮助读者快速了解电子商务网站与普通网站在页面上的不同。2 技术引进分析页面结构与色彩ABOUT ME 网页页面结构种类很多，常见的有满版型、分割型、骨骼型、曲线型、中轴型、对称型、倾斜型、焦点型、自由型和三角型等。页面结构ABOUT ME 页面顶部和左右两侧布局页面导航。导航的任务就是清楚地告诉用户将前往信息架构中的什么地方。最初可以只是指定链接，随着进一步设计导航，最终会把用户所做的一切都展示在狭小的屏幕空间里。导航设置结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的

5、内容。1)结构导航关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息。2)关联导航可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息和搜索等功能。3)可用性导航ABOUT ME 网页色彩是树立网站形象的关键之一，很多网页都以其完美的色彩搭配起到令人过目不忘的效果，由此可见， 颜色的使用在网页的制作中是非常重要和关键的。色彩分析3 任务实施提高用户体验的要素ABOUT ME 网页尺寸的设定和书本不同，书本的开本基本是固定的，作者和读者看到的尺寸都是一样的。而网页的尺寸受限于两个因

6、素：显示器的尺寸和浏览器软件。用户在不同的显示器上或使用不同的浏览器都会产生不同的体验。1.确定网页的尺寸ABOUT ME 用户在浏览网页的时候，总是希望可以快速找到自己需要的内容，否则用户通常会选择马上离开。合理的页面布局可以使用户快速发现网站的核心内容和服务。2.合理的页面布局从上到下，从左到右，按照内容重要性的优先级有序放置重要的内容一定要放在页面显眼的位置同级页面布局要统一合理的应用嵌套建立清晰的视觉层次感合理地体现视觉关联2.合理的页面布局4 新手试炼赏析电子商务页面Lorem ipsum dolor sit amet, consectetuer adipiscing elit. M

7、aecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.ADD YOUR POINT HERELorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,

8、 purus lectus malesuada libero, sit ametADD YOUR POINT HERELorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit ametADD YOUR POINT HERE 此页面首页采用扁平化设计风格，采用通栏的布局方式。主色采用Logo的颜色红紫色。辅色为主色的

9、补色黄绿色。整个页面对比强烈，主题明确。 通过前面的任务实施，读者应该学会如何赏析一个电子商务网页了。接下来通过一个小案例巩固一下所学内容。 此页面商品列表页布局紧凑。使用红色文字和红色按钮将页面中重点信息突显出来，便于浏览者查看。 此页面产品详情页采用左右结构，明亮的红色和黄色将整个页面分割成几部分，内容清晰，对比明确。SAMPLE项目一：赏析和规划电子商务网站了解电子商务网站任务描述分析电子商务网站结构1技术引进完成电子商务网站线框图2新手试炼电子商务网站会员页面设计341.3 规划“学设计吧”电子商务网站任务实施设计电子商务网站1 任务描述分析电子商务网站结构ABOUT ME 该项目为视

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

11、OUT ME 该页面主要以图片和文字的形式向用户展示设计相关知识。同样也对相关内容进行了分类，用户可以以行业和软件进行查找。图文教程2 技术引进完成电子商务网站线框图 在开始设计制作页面前，通常会先绘制网站原型的线框图，帮助设计师平衡保真度和速度。绘制的时候不用在意细节，一定要表达出设计思想，不要漏掉任何重要的部分。 首页面内容较多，包含大量的图片和文字。为了保证各功能的独立性，还要便于用户浏览，页面采用了中轴线的布局方式，将图形、文字以水平或垂直的方式排列，给人稳定、平静、含蓄的感觉。3 任务实施设计电子商务网站ABOUT ME 该页面是一个培训类网站，故可以选择代表科技的蓝色和代表教育的绿

12、色作为主色，但考虑网站中的视频教程多为互联网类的教材，所以排除了绿色，选择了蓝色作为主色。但蓝色颜色过于深沉，与设计行业多姿多彩的寓意相违背，所以提高蓝色的明度，选择较为活泼清新的青色作为网站的主色，确定主色ABOUT ME 主色确定后，接下来确定辅色。通常情况可以选择同色搭配、临色搭配和补色搭配三种方式。 同色搭配可以实现风格整体风格一致的效果，但对比不强烈。临色搭配可以实现丰富的层次感，但对于需要突出的内容表现不足。确定辅色ABOUT ME 页面中的文本，通常都是要黑色或者白色。标题文字或重点突出文字使用辅色。纯黑的文字过于生硬，故页面中使用深灰色作为文本的颜色。文本颜色完成设计主页设计稿二级页设计稿完成设计项目页设计稿详情页设计稿4 新手试炼电子商务网站会员页面设计ABOUT ME 会员系统页面与整个页面风格保持一致。会员系统是网站中最重要的功能，也是网站正常运营的保障。一般设计的较为简洁，主题明确，避免受到其他内容影响。接下来读者根据前面所学内容设计会员页面。PPT模板下载：/moban/ 行业PPT模板：/hangye/ 节日PPT模板：/jieri/ PPT素材下载：/sucai