今天我们首先来讲解手机APP首页界面的设计，通过本任务的讲解，首先要求同学们掌握APP首页界面的设计流程，了解Banner图、金刚区、瓷片区、图片流的基本设计方法，其次首页设计工作量比较大，要求同学们能不断完善APP首页的设计，具有吃苦耐劳精益求精的劳动精神。

【 任务引入 】

【 项目思维导图 】

学习任务

重点、难点

突破方法

1. 电商APP首页导航栏、Tab栏设计；

2.电商APP banner图设计；

3.电商APP金刚区设计；

4.电商APP瓷片区设计；

5.电商APP图片流设计

重点：1. 电商APP banner图设计；

          2.电商APP金刚区设计；

          3.电商APP瓷片区设计；

难点：1.电商APP banner图设计；

          2.电商APP金刚区设计。

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

知识目标

能力目标

素质目标

1.掌握APP界面区块的参数指标。

2.掌握合成类Banner图设计的方法。

3.了解APP各区块设计的常见参数指标。

1.能够了解常见APP界面设计的参数指标。

2.能进行电商类APP界面各区块的设计。

1. 养成积极主动学习意识；

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

3. 培养团队合作能力。

课程思政——团队合作

效果图

【 视频讲解】

知识储备

    1、首页任务分析

    2、首页各区块的划分操作

任务实现

    1、导航栏任务分析

    2、导航栏图标绘制

    3、导航栏搜索框绘制

    4、Tab栏任务分析

    5、Tab栏绘制

    6、Banner任务分析

    7、Banner图绘制

    8、金刚区图标任务分析

    9、金刚区图标绘制1

    10、金刚区图标绘制2

    11、瓷片区任务分析

    12、瓷片区绘制1

    13、瓷片区绘制2

    14、选项卡任务分析

    15、选项卡的绘制

    16、图片流任务分析

    17、图片流的绘制

拓展任务实现

    1、分类页绘制2栏1

    2、分类页绘制2栏2

    3、分类页绘制3栏

    4、分类页绘制通栏

【 资料下载 】

活页教材

          电商APP首页设计

课程教案

          电商APP首页设计

演示文稿

        4、电商APP首页设计.pdf

任务工单

          电商APP首页设计

素材下载

     baobao.png

         xiezi.png

         标志.png

         瓷片区2.png

         瓷片区3.png

         口红1.jpg

         消息 图标.png

         口红3.jpg

         项链.png

        素材.rar

        商品分类页素材.rar

课后同步项目

          分类页绘制

练习题

       1、练习1

疑难问题解答

     1、常见的分类页有哪几种版式？