UI界面设计与制作（全彩慕课版）—— 教案全套.docx

《UI界面设计与制作（全彩慕课版）—— 教案全套.docx》由会员分享，可在线阅读，更多相关《UI界面设计与制作（全彩慕课版）—— 教案全套.docx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、UI界面设计(全彩慕课版)配套教学教案第1讲课时内容初识UI设计授课时间18()分钟 课时4教学目标0 掌握UI设计的基本概念。H掌握UI设计的常用软件。0 了解UI设计的行业发展。0 了解学习UI的正确知识。0 掌握UI设计的制作流程。教学重点0熟练掌握UI设计的基本概念。0 了解并掌握UI设计的常用软件。0 掌握UI设计的行业发展。教学难点了解学习UI的正确知识。教学设计1、教学思路：通过认识UI设计了解UI设计的相关概念、特点、原则、常用软件和学 习方法。2、教学手段：通过软件功能解析深入学习软件功能特点。3、教学资料及要求：根据相关的工具和命令进行简单的练习和操作。教学内容讨论问题：1

2、、UI设计的常用软件有哪些？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1 UI设计的基本概念1.2 UI设计的常用软件1.3 UI设计的发展趋势1.4 UI设计的学习方法1.4.1 整体学习1.4.2 作品收集1.4.3 项目临摹1.4.4 项目实战1.5 UI设计的项目流程1.6 UI设计规范与规则1.6.1 单位介绍1.6.2 设计尺寸1.6.3 适配方案1.6.4 设计结构1.6.5 间距规范1.6.6 文字规范1.6.7 图标尺寸1.6.8 图片比例4.7 课堂练习-制作电商类App标签栏在Illustrator软件中,使用多种形状工具绘制图标。在Photoshop软件中

3、,使用矩 形工具和属性面板确定参考线位置，使用置入嵌入对象命令置入图标，使用横排文字 工具输入文字。作业口 QA首页分类发现购物车我的课后习题-制作餐饮类App标签栏在Illustrator软件中，使用多种形状工具绘制图标。在Photoshop软件中，使用 矩形工具和属性面板确定参考线位置，使用置入嵌入对象命令置入图标，使用横排文 字工具输入文字。金CPa首页发现订单我的课时内容UI中的页面设计授课时间360分钟课时8教学目标0掌握App的闪屏页制作。0掌握App的引导页制作。0掌握App的首页制作。0 掌握App的个人中心页制作。0 掌握App的详情页制作。0 掌握App的注册登录页制作。教

4、学重点0 了解App的闪屏页制作。0 掌握App的引导页制作方法和技巧。EI掌握App的首页制作方法。教学难点App的个人中心页制作方法和应用技巧。教学设计1、教学思路：（1）通过对课堂案例的讲解掌握制作旅游类App闪屏页、制作旅游类 App引导页、制作旅游类App首页、制作旅游类App个人中心页、制作旅游类App 酒店详情页、制作旅游类App登录页的方法和应用技巧；（2）再通过软件相关功 能的解析深入学习软件功能和制作特色；（3）再通过课堂练习巩固软件功能及页面 设计的方法；（4）最后通过课后习题消化所学软件知识，提高页面设计的设计能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件

5、功能；（2）通过软件功能解 析深入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应 用能力。3、教学资料及要求：在网上或现实生活中找一些页面进行设计，来加深学员对知识点 的理解，拓展实际应用能力。教学内容讨论问题：1、页面设计的特点是什么？2、首页的类型有哪几种？内容大纲：具体可结合本项目的PPT课件进行配合讲解。5.1 闪屏页5.1.1 闪屏页的概念5.1.2 闪屏页的类型5.1.3 课堂案例-制作旅游类App闪屏页5.2 线面图标的基础设计5.2.1 引导页的概念5.2.2 引导页的类型5.2.3 课堂案例-制作旅游类App引导页5.3 首页53.1 首页的概念53.2

6、 首页的类型53.3 课堂案例制作旅游类App首页5.4 个人中心页5.4.1 个人中心页的概念5.4.2 课堂案例-制作旅游类App个人中心页5.5 详情页1.1.1 详情页的概念1.1.2 课堂案例-制作旅游类App酒店详情页5.6 注册登录页5.6.1 注册登录页的概念5.6.2 课堂案例-制作旅游类App登录页5.7 课堂练习-制作电商类App页面5.8 课后习题-制作餐饮类App页面小结1、掌握App的闪屏页制作。2、掌握App的引导页制作。3、掌握App的首页制作。4、掌握App的个人中心页制作。5、掌握App的详情页制作。6、掌握App的注册登录页制作。5.7课堂练习-制作电商类

7、App页面使用圆角矩形工具、矩形工具椭圆工具和直线工具绘制形状，使用置入嵌入对象 命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作 弥散投影，使用横排文字工具输入文字。作业48.9.1MJl” WB京,一本0卫变线20B/H无0satw. BVB *MMea mr. ”公”Vtvs9，小n晶SOV?: *B5.8课后习题-制作餐饮类App页面使用圆角矩形工具、矩形工具椭圆工具和直线工具绘制形状，使用置入嵌入对象 命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作 弥散投影，使用横排文字工具输入文字。优选新鲜食材欢迎登录188*8888多种餐点任

8、您挑选*多厅为电物供m费0务,父间免费配送即刻享用无怆您星电珞修定&用络ftf将为W免给国岸 算三Qw aaasucVIP RiiHBftnacaIt的岛产 tlfiX ft& nnrjH69528 A-Opn.“rA-Opn._o 冲.kod。九 a109aiJMn.9ft *ogiRjBtn.9n ioqffjnn9nIo9o_dplkgiXOJock.bJcoa.UWf卬Jg.qM io/njcsad k9o*.d3229O O x| x |logUJccR.oKfc togkJcc*.K*Awjc.ci&wd人 2tQ2aN课后习题-标注餐饮类App登录页并切图命名使用PxCook软件

9、标注页面，使用Cutterman进行切图，按照UI页面命名规范对切 图效果进行命名。9：41M ,欢迎登录.MB188*8888KClOIxpoggO2*（xx）X芟用。0M2刃 WWOIxpogogin,bn.che_gj8.3P 加UtXptogin_kon.ech x.dHau2 Mp1、掌握UI设计的基本概念。2、掌握UI设计的常用软件。小结3、了解UI设计的行业发展。4、了解学习UI的正确知识。5、掌握UI设计的制作流程。1、掌握线性图标的制作。小结2、掌握面性图标的制作。3、掌握线面图标的制作。2.4 课堂练习-制作电商类App线性图标使用“X”、“丫”、“宽”和“高”工具进行调整

10、使图标符合设计规范，扩展外观变 成真实图像。而非Q 2P区首页分类发现购物车我的作业2.5 课后习题-制作餐饮类App面性图标课时 内容UI中的控件设计授课时间360分钟课时8教学 目标 了解控件的基础知识。0掌握按钮控件的制作。 掌握选择控件的制作。0掌握加减控件的制作。 掌握分段控件的制作。 掌握页面控件的制作。0掌握反馈控件的制作。 掌握文本框控件的制作。教学 重占0掌握控件的基础知识。0掌握按钮控件的制作。教学 难点了解并掌握选择控件的制作。教学 设计1、教学思路：（1）通过对课堂案例的讲解掌握制作旅游类App按钮控件、制作旅游类App 选择控件、制作旅游类App加减控件、制作旅游类A

11、pp分段控件、制作旅游类App页面 控件、制作旅游类App反馈控件、制作旅游类App文本框控件的方法和技巧：（2）再通 过软件相关功能的解析深入学习软件功能和制作特色；（3）再通过课堂练习巩固软件功 能及制作控件设计的应用技巧；（4）最后通过课后习题消化所学软件知识，提高制作控 件设计的能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件功能；（2）通过软件功能解析深 入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上或现实生活中找一些控件进行制作，来加深学员对知识点的理 解，拓展实际应用能力。教学内容讨论问题：1、控件设计有哪几种

12、分类？2、控件设计的特点是什么？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1 控件的初始3.1.1 控件的概念3.1.2 控件的获取3.2 线性图标的基础设计3.2.1 按钮控件的概念3.2.2 按钮控件的类型3.2.3 按钮控件的规则3.2.4 课堂案例-制作旅游类App按钮控件3.3 选择控件的设计331选择控件的概念33.2选择控件的类型333选择控件的规则课堂案例-制作旅游类App选择控件3.4 加减控件的设计3.4.1 加减控件的概念3.4.2 加减控件的类型3.4.3 加减控件的规则3.4.4 课堂案例-制作旅游类App加减控件3.5 分段控件的设计3.5.1 分段控

13、件的概念3.5.2 分段控件的类型3.5.3 分段控件的规则3.5.4 课堂案例-制作旅游类App分段控件3.6 页面控件的设计3.6.1 页面控件的概念3.6.2 页面控件的类型3.6.3 页面控件的规则3.6.4 课堂案例-制作旅游类App页面控件3.7 反馈控件的设计3.7.1 反馈控件的概念3.7.2 反馈控件的类型3.7.3 反馈控件的规则3.7.4 课堂案例制作旅游类App反馈控件3.8 文本框控件的设计3.8.1 文本框控件的概念3.8.2 文本框控件的类型3.8.3 文本框控件的规则3.8.4 课堂案例制作旅游类App文本框控件3.9 课堂练习制作电商类App文本框控件3.10

14、 课后习题-制作餐饮类App按钮控件小结1、了解控件的基础知识。2、掌握按钮控件的制作。3、掌握选择控件的制作。4、掌握加减控件的制作。5、掌握分段控件的制作。6、掌握页面控件的制作。7、掌握反馈控件的制作。8、掌握文本框控件的制作。课时内容UI中的组件设计授课时间180分钟课时4教学目标0 了解组件的基础知识。0掌握导航栏的设计。0掌握标签栏的设计。0掌握金刚区的设计。0掌握瓷片区的设计。教学重点0掌握组件的基础知识。0 了解导航栏的设计。0 了解并掌握标签栏的设计。教学难点了解并掌握金刚区的设计。教学设计1、教学思路：（1）通过对课堂案例的讲解掌握制作制作旅游类App导航栏、制作旅 游类A

15、pp标签栏、制作旅游类App金刚区、制作旅游类App瓷片区的方法和技巧；（2）再通过软件相关功能的解析深入学习软件功能和制作特色；（3）再通过课堂 练习巩固软件功能及组件设计的应用技巧；（4）最后通过课后习题消化所学软件知 识，提高面性组件设计的能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件功能；（2）通过软件功能解 析深入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应 用能力。3、教学资料及要求：在网上或现实生活中找一些组件进行设计，来加深学员时知识点 的理解，拓展实际应用能力。教学内容讨论问题：1、组件设计由哪些组成部分？2、瓷片区有哪些规范？内容大纲：

16、具体可结合本项目的PPT课件进行配合讲解。4.1 组件的初识4.1.1 组件的概念4.1.2 组件的获取4.2 导航栏的设计4.2.1 导航栏的概念4.2.2 导航栏的类型4.2.3 导航栏的规则4.2.4 课堂案例-制作旅游类App导航栏4.3 标签栏的设计4.3.1 标签栏的概念4.3.2 标签栏的类型4.3.3 标签栏的规则4.3.4 课堂案例-制作旅游类App标签栏4.4 金刚区的设计4.4.1 金刚区的概念4.4.2 金刚区的类型4.4.3 金刚区的规则课堂案例-制作旅游类App金刚区4.5元片区的设计4.5.1 瓷片区的概念4.5.2 瓷片区的类型4.5.3 瓷片区的规则4.5.4 课堂案例制作旅游类App在片区4.7 课堂练习-制作电商类App标签栏4.8 课后习题制作餐饮类App标签栏小结1、了解组件的基础知识。2、掌握导航栏的设计。3、掌握标签栏的设计。4、掌握金刚区的设计。5、掌握瓷片区的设计。