HTML5移动前端开发-第4章-移动前端实战课件.pptx

1、第4章 移动前端实战本章实战演练如何设计移动端购物系统的常见页面，包括登录、设置、客服、商品详情、购物车、订单页面的设计。购物系统是我们最熟悉的系统，如淘宝、京东等，通过对购物系统的演练学习，可以更容易地理解相关知识。学习目标1熟悉并理解购物系统的常用功能。2通过设计移动端购物系统的常见页面，提高综合运用HTML5进行前端开发的能力。41 登录页面“登录”几乎是所有系统的必备功能，掌握“登录”页面的设计可以说是系统设计的开端。411 登录页面介绍“登录”页面通常需要提供用户名、密码，并进行验证。后台将根据登录信息控制用户权限、记录用户行为，保护操作安全等，本书只针对前端进行设计。412 登录页

2、面演练【演练41】登录页面演练。42 设置页面“设置”也几乎是所有系统的必备功能，掌握“设置”页面的设计可以进一步熟悉项目的开发并增强信心。421 设置页面介绍“设置”页面常见功能布局的实现，包括清除缓存、关于、退出登录。422 设置页面演练【演练42】设置页面演练。43 客服页面在线客服作为一个专业的网页客服工具，是方便用户及时和企业进行即时沟通的一项常见功能。在线客服不仅仅是在线客服，同时还为网站提供访客轨迹跟踪、流量统计分析，客户关系管理等功能。431 客服页面介绍“客服页面”的设计，包括对话双方的头像、聊天内容、内容部分的箭头指向。432 客服页面演练【演练43】客服页面演练。44 商

3、品详情页面商品详情是购物系统的必备功能。作为产品的对外展示，直接影响到产品销售额。商品详情的介绍一定要通过用户的角度去设计文案和画面，而不能通过单方面强调自身产品优势的口径去表达。所有产品都是解决用户需求为前提的，在设计时需要多思考产品优势与用户痛点之间的对应关系。441 商品详情页面介绍“商品详情”页面的设计，包括商品名称、商品描述、原价、售价、优惠活动介绍等。442 商品详情页面演练【演练44】商品详情页面演练。45 购物车页面购物车功能指的是应用于网店的在线购买功能，它类似于超市购物时使用的推车或篮子，可以暂时把挑选商品放入购物车、删除或更改购买数量，并对多个商品进行一次结款，是购物系统的必备功能之一。451 购物车页面介绍“购物车”页面的设计，包括商品图片、商品名称、价格、数量以及增减数量的按钮等。452 购物车页面演练【演练45】购物车页面演练。46 订单页面订单是购物系统的必备功能。订单提交到购物系统后，系统管理员对订单进行确认有效与无效的操作处理。订单确认后将不能再进行修改。461 订单页面介绍“订单”页面的设计，包括收货人、联系电话、收获地址以及订单的相关信息（商品图片、商品名称、价格、数量、规格等）。462 订单页面演练【演练46】订单页面演练。本章思考1.本章实战代码的每一行都仔细阅读理解了吗？2.学会自行设计一个常见页面了吗？比如做一个仿微信主页面。