教学课件电子商务网页设计与制作1.2任务一 赏析电子商务网站.pptx

教材配套资源页完整PPT课件教学课件电子商务网页设计与制作1.2任务一 赏析电子商务网站1SAMPLE项目一：赏析和规划电子商务网站了解电子商务网站2任务描述分析电子商务网站首页1技术引进分析页面结构与色彩2新手试炼赏析电子商务页面341.2 任务一赏析电子商务网站任务实施提高用户体验的要素31 任务描述分析电子商务网站首页4ABOUT ME 从网站的功能栏目、从网站的功能栏目、色彩和页面布局进行分析，色彩和页面布局进行分析，帮助读者快速了解电子商帮助读者快速了解电子商务网站与普通网站在页面务网站与普通网站在页面上的不同上的不同。52 技术引进分析页面结构与色彩6ABOUT ME 网页页面结构种类很网页页面结构种类很多，常见的有满版型、分多，常见的有满版型、分割型、骨骼型、曲线型、割型、骨骼型、曲线型、中轴型、对称型、倾斜型、中轴型、对称型、倾斜型、焦点型、自由型和三角型焦点型、自由型和三角型等。等。页面结构页面结构7ABOUT ME 页面顶部和左右两侧页面顶部和左右两侧布局页面导航。导航的任布局页面导航。导航的任务就是清楚地告诉用户将务就是清楚地告诉用户将前往信息架构中的什么地前往信息架构中的什么地方。最初可以只是指定链方。最初可以只是指定链接，随着进一步设计导航，接，随着进一步设计导航，最终会把用户所做的一切最终会把用户所做的一切都展示在狭小的屏幕空间都展示在狭小的屏幕空间里。里。导航设置导航设置8结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。1)结构导航关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息。2)关联导航可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息和搜索等功能。3)可用性导航9ABOUT ME 网页色彩是树立网站网页色彩是树立网站形象的关键之一，很多网形象的关键之一，很多网页都以其完美的色彩搭配页都以其完美的色彩搭配起到令人过目不忘的效果，起到令人过目不忘的效果，由此可见，由此可见， 颜色的使用在颜色的使用在网页的制作中是非常重要网页的制作中是非常重要和关键的。和关键的。色彩分析色彩分析103 任务实施提高用户体验的要素11ABOUT ME 网页尺寸的设定和书网页尺寸的设定和书本不同，书本的开本基本本不同，书本的开本基本是固定的，作者和读者看是固定的，作者和读者看到的尺寸都是一样的。而到的尺寸都是一样的。而网页的尺寸受限于两个因网页的尺寸受限于两个因素：显示器的尺寸和浏览素：显示器的尺寸和浏览器软件。用户在不同的显器软件。用户在不同的显示器上或使用不同的浏览示器上或使用不同的浏览器都会产生不同的体验。器都会产生不同的体验。1. 1.确定网页的尺寸确定网页的尺寸12ABOUT ME 用户在浏览网页的时用户在浏览网页的时候，总是希望可以快速找候，总是希望可以快速找到自己需要的内容，否则到自己需要的内容，否则用户通常会选择马上离开。用户通常会选择马上离开。合理的页面布局可以使用合理的页面布局可以使用户快速发现网站的核心内户快速发现网站的核心内容和服务容和服务。2. 2.合理的页面布局合理的页面布局13从上到下，从左到右，按照内容重要性从上到下，从左到右，按照内容重要性的优先级有序放置的优先级有序放置重要的内容一定要放在页面显眼的位置重要的内容一定要放在页面显眼的位置同级页面布局要统一同级页面布局要统一合理的应用嵌套合理的应用嵌套建立清晰的视觉层次感建立清晰的视觉层次感合理地体现视觉关联合理地体现视觉关联2. 2.合理的页面布局合理的页面布局144 新手试炼赏析电子商务页面15Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.ADD YOUR POINT HERE16Lorem 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 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 HERE17 此页面首页采用扁平化设计风格，采用通栏的布局方式。主色采用Logo的颜色红紫色。辅色为主色的补色黄绿色。整个页面对比强烈，主题明确。 通过前面的任务实施，读者应该学会如何赏析一个电子商务网页了。接下来通过一个小案例巩固一下所学内容。18 此页面商品列表页布局紧凑。使用红色文字和红色按钮将页面中重点信息突显出来，便于浏览者查看。 19 此页面产品详情页采用左右结构，明亮的红色和黄色将整个页面分割成几部分，内容清晰，对比明确。20PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： 字体下载： SAMPLEDesigner：1PPT.COMTHANKS2017 PowerPoint Template Designed By 1PPT.COM21本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 22