《UI设计-教学教案(共11页).doc》由会员分享，可在线阅读，更多相关《UI设计-教学教案(共11页).doc（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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、软件有哪些？ 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 认识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系统的设计规范。 熟练掌握Androi
3、d系统的设计规范。教学重点 掌握iOS及Android系统的设计尺寸。 掌握iOS及Android系统的界面结构。 掌握iOS及Android系统的图标规范。 掌握iOS及Android系统的字体规范。教学难点 掌握iOS及Android系统的基本布局。教学设计1、 教学思路：（1）通过资料及实例图片讲解，掌握iOS系统的设计规范；（2）通过资料及实例图片讲解，掌握Android系统的设计规范。2、 教学手段：（1）通过总述了解iOS及Android系统的基本概念；（2）通过分类解析深入学习iOS及Android系统的设计尺寸及单位、界面结构、基本布局、图标规范和文字规范。教学内容讨论问题：1
4、、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. 了解并掌握iOS及Android系统的设计尺寸及单位。2. 了解并掌握iO
5、S及Android系统的界面结构。3. 了解并掌握iOS及Android系统的基本布局。4. 了解并掌握iOS及Android系统的图标规范。5. 了解并掌握iOS及Android系统的文字规范。第3讲课时内容iOS系统界面设计授课时间360分钟课时8教学目标 了解栏的概念、分类和设计规范。 了解视图的概念、分类和设计规范。 了解控件的概念、分类和设计规范。 熟练掌握iOS系统界面设计的方法和规范。教学重点 熟练掌握栏的应用和设计规范。教学难点 掌握按钮的概念和分类。教学设计1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作旅游类APP首页、旅游类APP相册页、旅游类APP登机牌页、旅游类
6、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
7、 搜索栏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 刷
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预约美食页使用移动
9、工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。第4讲课时内容Android系统界面设计授课时间360分钟课时8教学目标 了解栏的概念、分类和设计规范。 了解组件的概念、分类和设计规范。 熟练掌握Android系统界面设计的方法和规范。教学重点 掌握组件的多种分类。教学难点 熟练掌握栏的设计规范。教学设计1、 教学思路：（1）通过对课堂实训案例的讲解掌握制作医疗类APP闪屏页、医疗类APP首页、医疗类APP医生列表页、医疗类APP医生介绍页、医疗类APP医生筛选页和医疗类APP预约页的方法；（2）再通过相关的解析掌握栏和组件的概念、分类和设计规范；（3）最后通过课堂练习
10、和课后习题消化所学知识。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
11、.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 文字框
12、4.2.30 提示4.3 课堂练习制作医疗类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）通过
14、课堂实训案例熟练掌握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 个人
15、中心页5.5 详情页5.6 注册登录页5.7 课堂案例制作美食到家App5.8 课堂练习制作Delicacy APP5.9 课后习题制作美食来了APP小结1、 了解闪屏页、引导页、首页、个人中心页、详情页和注册登录页的分类和概念。2、 熟练掌握App界面设计的规范。作业5.8 课堂练习制作Delicacy App使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。 5.9 课后习题制作美食来了App使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。 专心-专注-专业