UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

电商APP购物车页设计

发布时间:2022-03-05 00:44   发布人:袁安翠   浏览次数:1332

 电商APP购物车页设计 】

           

        购物车页面是电商APP中必不可少的页面,此页面有多个子页面,设计时进行考虑个页面之间的逻辑关系,为用户提供良好的购物体验,实现产品的最终转化。

        涉及多个页面,工作量上会有所增加,我们要具有精益求精的工匠精神,要力求作品的完整性和可用性。

 

【 任务引入 】

 

 

【 项目思维导图 】


学习任务

重点、难点

突破方法

1. 购物车页面绘制

2.购物车编辑页面绘制;

3.购物车支付页面绘制;

4.购物车地址编辑页面绘制;

5.购物车支付成功页面绘制。

重点:1. 购物车页面绘制;

          2.购物车支付页面;

          3.购物车地址编辑页面;

难点:1. 购物车页面绘制;

          2.购物车支付页面绘制。

采用翻转课堂、项目导入的教学模式,采用分组讨论、案例教学、演示动画等教学方法,运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握购物车页面逻辑关系。

2.掌握购物车页面的绘制。

3.了解购物流程逻辑。

1.能够了解购物车页面编辑的逻辑关系;

2.能进行购物车各页面的绘制。

1. 精益求精的工匠精神;

2. 养成勤于动手的习惯;

3. 培养团队合作能力。

课程思政——工匠精神

                 

效果图


                 购物车.png

                                                               

【 视频讲解】

知识储备


    1购物车页面任务分析


任务实现


    1、购物车页面绘制1

    2购物车页面绘制2

    3支付页面绘制1

    4、支付页面绘制2

    5、支付页面地址修改

    6、优惠券、添加地址、修改地址页面

    7、支付页面

    8、购物车支付成功页面


拓展任务实现


    1购物车页面编辑1

    2、购物车页面编辑2


【 资料下载 】

活页教材

          电商APP购物车页设计

课程教案

           电商APP购物车页设计

演示文稿

       

        5、电商APP购物车页设计.pdf


任务工单

           电商APP购物车页设计

素材下载

     口红2.jpg

         口红1.jpg

         化妆品.jpg

         口红3.jpg

         微信.png

         消息 图标.png

         支付宝.png

         支付页面.jpg

         素材.rar

        1、购物车页面3(原型图).jpg

        1、购物车页面3.jpg

        5、购物车页面(支付成功页面2)(原型图).jpg

        5、购物车页面(支付成功页面2).jpg


课后同步项目

         购物车页面编辑

练习题

      1、练习1

疑难问题解答

     1、理清购物车页面的逻辑关系