UI前端设计
袁安翠

1
2
3
4
5
6
7
8

绘制手机界面中的图标

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

 任务1:绘制手机界面中的图标 】

        

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

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

经过前面的学习,李老师对小明的工作非常满意,逐步让小明接触手机界面设计的部分内容。让小明自己查阅手机图标及界面设计的相关尺寸规范。


【 一分钟导学视频 】



能力目标

知识目标

素质目标

1、能够使用动作、批处理、动画。

2、能够进行扁平化图标的制作。

3、能进行手机应用商店图标的制作。

1、掌握手机界面设计的概念、分类、及设计原则。

2、掌握PS中,动作使用,批处理的使用进行手机图标的绘制。

3、掌握利用PS工具,进行手机图标的设计。

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

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

3. 培养团队合作能力。




学习任务

重点、难点

突破方法

1. 手机图标创意介绍。

2. 动作、批处理与动画

3. 扁平化图标绘制。

4. 应用商店图标绘制。

1. 图标创意与尺寸规范

2. 动作与批处理

3. 扁平化图标绘制

3. 教学难点: 应用商店图标绘制

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

【 视频讲解】

课前知识储备视频

案例讲解视频

1、手机图标创意介绍

2、动作与批处理

3、PS动画制作

4、折纸效果的实现1

5、折纸效果的实现2

1、图标底盘的制作1

2、图标底盘的制作2

3、扁平化图标的绘制

4、应用商店图标的绘制1

5、应用商店图标的绘制2

【 资料下载 】

单元设计

word.jpg手机图标的绘制

课程教案

word.jpg手机图标的绘制

演示文稿

ppt.jpg手机图标的绘制

任务工单

word.jpg手机图标的绘制

素材下载

1、动作与批处理素材tupian.jpg

2、动画素材tupian.jpg

3、折纸效果素材tupian.jpg

4、图标底盘网格线tupian.jpg

5、扁平化图标素材tupian.jpg

6、应用商店图标素材tupian.jpg

1、动作.zip

1、GIF动画.zip

课内同步项目

绘制IOS拨号图标

qvod.jpg案例讲解

课外拓展项目

绘制扁平化图标

qvod.jpg案例讲解

试题解答

练习

疑难问题解答

1、如何做好图标的辨识度?voice.jpg

2、IOS机械网格参考线的位置。voice.jpg