UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

电商APP首页的设计

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


电商APP首页设计 】

           

       今天我们首先来讲解手机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. 培养团队合作能力。

课程思政——团队合作

                 

效果图

                                                     

image.png


【 视频讲解】

知识储备


    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、常见的分类页有哪几种版式