UI前端设计
袁安翠

1
2
3
4
5
6
7
8

手机APP界面的绘制

发布时间:2019-07-15 09:17   发布人:袁安翠   浏览次数:609

 任务2:手机APP界面的绘制 】

        

一款设计合理的界面应该是能够使用户轻松的完成各种操作,如果一款手机界面中的功能安排不合理,给用户带来畏惧感,那么它就是失败的。

手机设计的人性化已不仅仅局限于手机硬件的外观,手机界面设计的要求也在日渐增长,要求也是越来越高,界面设计的规范性显得尤为重要。

    本节课的内容主要针对APP界面当中的导航栏、Tab栏、轮播图、金刚区、瓷片区、文档流的绘制进行讲解,按照标准的尺寸规范绘制出常见界面中的各部分内容。


【 一分钟导学视频 】



能力目标

知识目标

素质目标

1、能够了解IOS尺寸规范。

2、能够进行APP界面中导航栏、Tab栏的尺寸规范及绘制。

3、能进行APP界面中的轮播图、金刚区、瓷片区、文档流等尺寸规范了解及绘制。

1、掌握IOS尺寸规范。

2、掌握APP界面中导航栏、Tab栏的尺寸规范及绘制方法。

3掌握APP界面中的轮播图、金刚区、瓷片区、文档流等尺寸规范及绘制方法。


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

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

3. 培养团队合作能力。




学习任务

重点、难点

突破方法

1. IOS尺寸规范。

2. 导航栏的制作

3. Tab栏的制作。

4. Banner图的制作。

5. 金刚区图标的制作。

6. 瓷片区的制作。

7.文档流的制作。

8.PS切图。

1. IOS尺寸规范。

2. 导航栏的制作

3. Tab栏的制作。

4. Banner图的制作。

5. 金刚区图标的制作。

6. 瓷片区的制作。

7.文档流的制作。

8. 教学难点: 各部分尺寸规范

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






【 视频讲解】

课前知识储备视频

案例讲解视频

1、IOS设计规范

2、金刚区图标尺寸规范

3、金刚区图标配色1

4、金刚区图标配色2

5、瓷片区的构图规范

6、瓷片区的构图版式介绍

7、轮播点与选项卡的制作

8、切图1

9、切图2

10、切图3

1、导航栏的制作1

2、导航栏的制作2

3、导航栏的制作3

4、Tab栏的制作

5、Banner图的制作1

6、Banner图的制作2

7、Banner图的制作3

8、金刚区图标的实现

9、瓷片区构图实现1

10、瓷片区构图实现2

11、瓷片区构图实现3

12、瓷片区构图实现4

13、轮播点的绘制

14、轮播条的绘制

15、选项卡的绘制1

16、选项卡的绘制2

17、文档流的制作

【 资料下载 】

单元设计

word.jpg手机APP界面绘制

课程教案

word.jpg手机APP界面绘制

演示文稿

ppt.jpg手机APP界面绘制

任务工单

word.jpg手机APP界面绘制

素材下载

APP界面素材.zip

促销字体.zip

复古字体.zip

刚劲字体.zip

可爱字体.zip

女性字体.zip

书法字体.zip

平稳字体.zip

冬青黑体.zip

课内同步项目

绘制游戏中心界面

qvod.jpg案例讲解

5-2绘制IOS8游戏中心界面.zip

课外拓展项目

制作音乐APP界面

qvod.jpg案例讲解1

qvod.jpg案例讲解2

qvod.jpg案例讲解3

5-2制作音乐APP界面.zip

试题解答

练习

疑难问题解答

1、UI设计中的配色怎么考虑?voice.jpg

2、界面设计中规范的重要性。voice.jpg

3、间距和留白的原则有哪些?voice.jpg