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

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

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

3、箭头指向。4.3.2 客服页面演练客服页面演练。演练4.3商品详情是购物系统的必备功能。作为产品的对外展示，直接影响到产品销售额。商品详情的介绍一定要通过用户的角度去设计文案和画面，而不能通过单方面强调自身产品优势的口径去表达。所有产品都是解决用户需求为前提的，在设计时需要多思考产品优势与用户痛点之间的对应关系。4.4 商品详情页面4.4.1 商品详情页面介绍“商品详情”页面的设计，包括商品名称、商品描述、原价、售价、优惠活动介绍等。4.4.2 商品详情页面演练5G商品详情页面演练。演练4.4购物车功能指的是应用于网店的在线购买功能，它类似于超市购物时使用的推车或篮子，可以暂时把挑选商品放入购

4、物车、删除或更改购买数量，并对多个商品进行一次结款，是购物系统的必备功能之一。4.5 购物车页面4.5.1 购物车页面介绍“购物车”页面的设计，包括商品图片、商品名称、价格、数量以及增减数量的按钮等。4.5.2 购物车页面演练购物车页面演练。演练4.5订单是购物系统的必备功能。订单提交到购物系统后，系统管理员对订单进行确认有效与无效的操作处理。订单确认后将不能再进行修改。4.6 订单页面4.6.1 订单页面介绍“订单”页面的设计，包括收货人、联系电话、收获地址以及订单的相关信息（商品图片、商品名称、价格、数量、规格等）。4.6.2 订单页面演练订单页面演练。演练3.21本章思考本章实战代码的每一行都仔细阅读理解了吗？学会自行设计一个常见页面了吗？比如做一个仿微信主页面。12学 习 进 步！HTML5移动前端开发基础与实战（微课版）