PhotoshopCC移动UI设计案例教程-教学教案

概念、特点、原则、常用软件和学习方法；（2）通过认识App了解App的基本概念、操作平台、设计流程和基本分类。 教学设计 2、 教学手段：（1）通过资料了解移动UI和App的概念；（2）通过实例界面等图片

深入了解移动UI和App。 教学内容 讨论问题：1、移动UI设计的常用软件有哪些？ 2、App的设计流程有哪些步骤？ 内容大纲：具体可结合本项目的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 认识App

1.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系统的设计规范。  掌握iOS及Android系统的设计尺寸。  掌握iOS及Android系统的界面结构。 教学重点  掌握iOS及Android系统的图标规范。  掌握iOS及Android系统的字体规范。 教学难点  掌握iOS及Android系统的基本布局。 1、 教学思路：（1）通过资料及实例图片讲解，掌握iOS系统的设计规范；（2）通

过资料及实例图片讲解，掌握Android系统的设计规范。 教学手段：（1）通过总述了解iOS及Android系统的基本概念；（2）通过分类教学设计 2、 解析深入学习iOS及Android系统的设计尺寸及单位、界面结构、基本布局、图标规范和文字规范。 教学内容 讨论问题：1、iOS系统的界面结构有哪几部分组成？ 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. 2. 3. 4. 5. 了解并掌握iOS及Android系统的设计尺寸及单位。 了解并掌握iOS及Android系统的界面结构。 了解并掌握iOS及Android系统的基本布局。 了解并掌握iOS及Android系统的图标规范。 了解并掌握iOS及Android系统的文字规范。 第3讲 课时内容 iOS系统界面设计 授课时间 360分钟 课时 8  了解栏的概念、分类和设计规范。  了解视图的概念、分类和设计规范。 教学目标  了解控件的概念、分类和设计规范。  熟练掌握iOS系统界面设计的方法和规范。 教学重点 þ 熟练掌握栏的应用和设计规范。 教学难点 þ 掌握按钮的概念和分类。 1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作旅游类APP首页、旅游类APP

相册页、旅游类APP登机牌页、旅游类APP酒店列表页和旅游类APP美食筛选页的方法和技巧；（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 标签栏 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.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预约美食页 使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。 第4讲 课时内容 Android系统界面设

计 授课时间 360分钟 课时 8

 了解栏的概念、分类和设计规范。 教学目标  了解组件的概念、分类和设计规范。  熟练掌握Android系统界面设计的方法和规范。 教学重点 þ 掌握组件的多种分类。 教学难点 þ 熟练掌握栏的设计规范。 1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作医疗类APP闪屏页、医疗

类APP首页、医疗类APP医生列表页、医疗类APP医生介绍页、医疗类APP医生筛选页和医疗类APP预约页的方法；（2）再通过相关的解析掌握栏和组件的概念、分类和设计规范；（3）最后通过课堂练习和课后习题消化所学知识。 教学设计 2、 教学手段：（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 底部导航 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 课堂练习——制作医疗类APP输入信息页 4.4 课后习题——制作医疗类APP帮助支持页 1、 了解并熟练掌握栏和组件的概念。 2、 了解并熟练掌握栏和组件的分类。 3、 了解并熟练掌握栏和组件的设计规范。 4、 熟练掌握Android系统界面设计的方法和规范。 小结 4.3 课堂练习——制作医疗类APP输入信息页 使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。 作业 4.4 课后习题——制作医疗类APP帮助支持页 使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。 第5讲 课时内容 App界面设计实战 授课时间 360分钟 课时 8

 了解闪屏页的概念和分类。  了解引导页的概念和分类。 教学目标  了解首页的概念和分类。  了解个人中心页、详情页和注册登录页的概念。  熟练掌握App界面设计的方法和规范。 教学重点 þ 了解App界面的类型与组成部分。 教学难点 þ 掌握App界面设计的方法和规范。 1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作美食到家App的方法；

（2）再通过相关的解析掌握闪屏页、引导页、首页、个人中心页、详情页和注册登录页的概念和分类；（3）最后通过课堂练习和课后习题消化所学知识。 教学设计 2、 教学手段：（1）通过课堂实训案例熟练掌握App界面设计的方法和规范；（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 课堂案例——制作美食到家App 5.8 课堂练习——制作Delicacy APP 5.9 课后习题——制作美食来了APP

小结 1、 了解闪屏页、引导页、首页、个人中心页、详情页和注册登录页的分类和概念。 2、 熟练掌握App界面设计的规范。 5.8 课堂练习——制作Delicacy App

使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。 作业 5.9 课后习题——制作美食来了App

使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。