UI设计-教学教案

1、Photoshop CC 移动UI设计案例教程（全彩慕课版）配套教学教案第1讲课时内容初识移动UI设计授课时间180分钟课时4教学目标 认识移动UI设计。 认识App。教学重点 认识移动UI设计。教学难点 了解App的设计流程。教学设计1、 教学思路：（1）通过认识移动UI设计了解UI设计的相关概念、移动UI设计的概念、特点、原则、常用软件和学习方法；（2）通过认识App了解App的基本概念、操作平台、设计流程和基本分类。2、 教学手段：（1）通过资料了解移动UI和App的概念；（2）通过实例界面等图片深入了解移动UI和App。教学内容讨论问题：1、移动UI设计的常用软件有哪些？ 2、App的

2、设计流程有哪些步骤？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1 认识移动UI设计1.1.1 UI设计的相关概念1.1.2 移动UI设计的概念1.1.3 移动UI设计的特点1.1.4 移动UI设计的原则1.1.5 移动UI设计的常用软件1.1.6 移动UI设计学习方法1.2 认识App1.2.1 App的基本概念1.2.2 App的操作平台1.2.3 App的设计流程1.2.4 App的基本分类小结1、 了解移动UI设计。2、 了解App。第2讲课时内容移动UI设计规范授课时间180分钟课时4教学目标 熟练掌握iOS系统的设计规范。 熟练掌握Android系统的设计规范。教学重点

3、 掌握iOS及Android系统的设计尺寸。 掌握iOS及Android系统的界面结构。 掌握iOS及Android系统的图标规范。 掌握iOS及Android系统的字体规范。教学难点 掌握iOS及Android系统的基本布局。教学设计1、 教学思路：（1）通过资料及实例图片讲解，掌握iOS系统的设计规范；（2）通过资料及实例图片讲解，掌握Android系统的设计规范。2、 教学手段：（1）通过总述了解iOS及Android系统的基本概念；（2）通过分类解析深入学习iOS及Android系统的设计尺寸及单位、界面结构、基本布局、图标规范和文字规范。教学内容讨论问题：1、iOS系统的界面结构有哪

4、几部分组成？ 2、iOS及Android系统的图标包括哪几种分类？内容大纲：具体可结合本项目的PPT课件进行配合讲解。2.1 iOS系统设计规范2.1.1 iOS设计尺寸及单位2.1.2 iOS界面结构2.1.3 iOS基本布局2.1.4 iOS图标规范2.1.5 iOS文字规范2.2 Android系统设计规范2.2.1 Android设计尺寸及单位2.2.2 Android界面结构2.2.3 Android基本布局2.2.4 Android图标规范2.2.5 Android文字规范小结1. 了解并掌握iOS及Android系统的设计尺寸及单位。2. 了解并掌握iOS及Android系统的界

5、面结构。3. 了解并掌握iOS及Android系统的基本布局。4. 了解并掌握iOS及Android系统的图标规范。5. 了解并掌握iOS及Android系统的文字规范。第3讲课时内容iOS系统界面设计授课时间360分钟课时8教学目标 了解栏的概念、分类和设计规范。 了解视图的概念、分类和设计规范。 了解控件的概念、分类和设计规范。 熟练掌握iOS系统界面设计的方法和规范。教学重点 熟练掌握栏的应用和设计规范。教学难点 掌握按钮的概念和分类。教学设计1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作旅游类APP首页、旅游类APP相册页、旅游类APP登机牌页、旅游类APP酒店列表页和旅游类A

6、PP美食筛选页的方法和技巧；（2）再通过相关的解析掌握栏、视图和控件的概念、分类和设计规范；（3）最后通过课堂练习和课后习题消化所学知识。2、 教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、 教学资料及要求：在网上找一些简单的iOS系统界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、视图有哪几种分类？2、按钮的概念是什么？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1 栏3.1.1 课堂案例制作旅游类APP首页3.1.2 状态栏3.1.3 导航栏3.1.4 搜索栏3.1.5 标签栏

7、3.1.6 工具栏3.2 视图3.2.1 课堂案例制作旅游类APP相册页3.2.2 操作列表3.2.3 活动视图3.2.4 警告窗3.2.5 集合视图3.2.6 图像视图3.2.7 地图视图3.2.8 页面浏览控制器3.2.9 课堂案例制作旅游类APP登机牌页3.2.10 弹出框3.2.11 滚动视图3.2.12 分屏视图3.2.13 表单视图3.2.14 文字视图3.2.15 网络视图3.3 控件3.3.1 课堂案例制作旅游类APP酒店列表页3.3.2 按钮3.3.3 编辑菜单3.3.4 标签3.3.5 页面控件3.3.6 选择器3.3.7 进度指示器3.3.8 刷新3.3.9 分段控件3.

8、3.10 课堂案例制作旅游类APP美食筛选页3.3.11 滑块3.3.12 步进器3.3.13 开关3.3.14 文本框3.4 课堂练习制作旅游类APP酒店详情页3.5 课后习题制作旅游类APP预约美食页小结1、 了解并熟练掌握栏、视图和控件的概念。2、 了解并熟练掌握栏、视图和控件的分类。3、 了解并熟练掌握栏、视图和控件的设计规范。4、 熟练掌握iOS系统界面设计的方法和规范。作业3.4 课堂练习制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。3.5 课后习题制作旅游类APP预约美食页使用移动工具移动素材，使用横排文字

9、工具输入文字，矩形工具、直线工具绘制基本形状。第4讲课时内容Android系统界面设计授课时间360分钟课时8教学目标 了解栏的概念、分类和设计规范。 了解组件的概念、分类和设计规范。 熟练掌握Android系统界面设计的方法和规范。教学重点 掌握组件的多种分类。教学难点 熟练掌握栏的设计规范。教学设计1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作医疗类APP闪屏页、医疗类APP首页、医疗类APP医生列表页、医疗类APP医生介绍页、医疗类APP医生筛选页和医疗类APP预约页的方法；（2）再通过相关的解析掌握栏和组件的概念、分类和设计规范；（3）最后通过课堂练习和课后习题消化所学知识。2

10、、 教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、 教学资料及要求：在网上找一些简单的Android系统界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、底部应用栏有哪些组成部分？ 2、悬浮按钮的尺寸有哪些规范？内容大纲：具体可结合本项目的PPT课件进行配合讲解。4.1 栏4.1.1 课堂案例制作医疗类APP闪屏页4.1.2 状态栏4.1.3 系统导航栏4.2 组件4.2.1 课堂案例制作医疗类APP首页4.2.2 底部应用栏4.2.3 顶部应用栏4.2.4 背板4.2.5 横幅4.2.6 底部

11、导航4.2.7 课堂案例制作医疗类APP医生列表页4.2.8 按钮4.2.9 悬浮动作按钮4.2.10 卡片4.2.11 纸片4.2.12 数据表4.2.13 课堂案例制作医疗类APP医生介绍页4.2.14 对话框4.2.15 分割线4.2.16 图片组4.2.17 列表4.2.18 菜单4.2.19 抽屉式导航4.2.20 状态指引4.2.21 课堂案例制作医疗类APP医生筛选页4.2.22 选择控件4.2.23 底部面板4.2.24 侧面板4.2.25 滑块4.2.26 底部提示栏4.2.27 课堂案例制作医疗类APP预约页4.2.28 选项卡4.2.29 文字框4.2.30 提示4.3

12、课堂练习制作医疗类APP输入信息页4.4 课后习题制作医疗类APP帮助支持页小结1、 了解并熟练掌握栏和组件的概念。2、 了解并熟练掌握栏和组件的分类。3、 了解并熟练掌握栏和组件的设计规范。4、 熟练掌握Android系统界面设计的方法和规范。作业4.3 课堂练习制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。4.4 课后习题制作医疗类APP帮助支持页使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排

13、文字工具输入文字。 第5讲课时内容App界面设计实战授课时间360分钟课时8教学目标 了解闪屏页的概念和分类。 了解引导页的概念和分类。 了解首页的概念和分类。 了解个人中心页、详情页和注册登录页的概念。 熟练掌握App界面设计的方法和规范。教学重点 了解App界面的类型与组成部分。教学难点 掌握App界面设计的方法和规范。教学设计1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作美食到家App的方法；（2）再通过相关的解析掌握闪屏页、引导页、首页、个人中心页、详情页和注册登录页的概念和分类；（3）最后通过课堂练习和课后习题消化所学知识。2、 教学手段：（1）通过课堂实训案例熟练掌握App

14、界面设计的方法和规范；（2）通过相关的解析深入学习App界面的分类和概念。3、 教学资料及要求：在网上找一些不同类型的App界面进行临摹，来加深学员对知识点的理解并提高实际应用能力。教学内容讨论问题：1、品牌推广型闪屏页的概念是什么？ 2、综合型首页由哪几部分组成？内容大纲：具体可结合本项目的PPT课件进行配合讲解。5.1 闪屏页5.1.1 品牌推广型5.1.2 活动广告型5.1.3 节日关怀型5.2 引导页5.2.1 功能说明型5.2.2 产品推广型5.2.3 搞笑卖萌型5.3 首页5.3.1 列表型5.3.2 网格型5.3.3 卡片型5.3.4 综合型5.4 个人中心页5.5 详情页5.6 注册登录页5.7 课堂案例制作美食到家App5.8 课堂练习制作Delicacy APP5.9 课后习题制作美食来了APP小结1、 了解闪屏页、引导页、首页、个人中心页、详情页和注册登录页的分类和概念。2、 熟练掌握App界