移动UI设计 课程标准（教学大纲）及教案 （人邮微课版）.docx

《移动UI设计 课程标准（教学大纲）及教案 （人邮微课版）.docx》由会员分享，可在线阅读，更多相关《移动UI设计 课程标准（教学大纲）及教案 （人邮微课版）.docx（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、移动UI设计（微课版）课程标准XXXX学校二。二二年 月课时内容移动UI筹划与原型设 ；+授课时间分钟课时教学目标0 了解移动UI目标用户；0 了解移动UI筹划书；0 了解思维导图；0 了解思维导图的常用软件；0掌握绘制移动UI思维导图；0掌握绘制移动UI草图；0 了解原型设计；0 了解绘制原型的常用软件；0掌握绘制移动UI原型图。教学重点0掌握绘制移动UI思维导图。教学难点0掌握绘制移动UI草图；0掌握绘制移动UI原型图。教学设计1、教学思路：通过对移动UI筹划与原型设计相关内容的讲解，使学员能够掌握移动 UI筹划与原型设计的方法及形式。2、教学手段：采用操作案例分析与理论知识相结合的方式进

2、行讲解。3、教学资料及要求：制作简单易懂的操作案例，通过由浅入深的方式，来加深学员 对相关理论知识的理解。教学内容讨论问题：1.思维导图有哪些特点？2 .草图功能的表达有哪些？3 .用户的体验方式和用户的体验要素有哪些？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。2. 1确定移动UI目标用户分析移动UI工程背景2. 2.2掌握用户画像分析法2.2 完成移动UI筹划书2.3 了解思维导图2. 3. 1思维导图的设计依据2. 3.2思维导图的特点2. 3.3思维导图的作用2.4绘制思维导图的常用软件2. 4. 1 MindMeister2. 4. 2 MindManager2.4.3 XM

3、ind2. 4. 4操作案例一下载并安装XMind2.5绘制移动UI思维导图2. 5.1思维导图的操作流程2. 5.2思维导图的基本类型2. 5. 3操作案例一绘制美妆App的首页思维导图2.6 绘制移动UI草图2. 6. 1 了解草图的概念3. 6.2认识草图的特点4. 6.3草图功能的表达5. 6.4常见的草图形式2.7 了解原型设计2. 7. 1原型设计的概念2. 7.2原型设计的参与者2.8绘制原型的常用软件2. 8. 1 Axure RP2. 8. 2 Adobe XD2. 8.3 操作案例一安装Axure RP 102.9绘制移动UI原型图1.1.1 9. 1原型的表现手法1.1.

4、2 原型的重要性1.1.3 操作案例一绘制美妆App分类界面原型小结1 . 了解移动UI工程背景；2 .掌握用户画像分析法；3 . 了解移动UI筹划书；4 . 了解思维导图；5 . 了解思维导图的常用软件；6 .掌握下载并安装XMind ；7 .掌握绘制美妆App的首页思维导图；8 .掌握绘制移动UI草图；9 . 了解原型设计；10 .掌握安装 Axure RP 10 ；11 .掌握绘制美妆App首页草图；12 .掌握绘制App分类界面原型。课时内容优秀的移动UI色彩搭配授课时间分钟课时教学目标0认识色彩；0掌握和谐统一的色彩搭配方法；0掌握突出比照的配色方法；0掌握构建移动UI颜色系统；0掌

5、握移动UI色彩搭配的本卷须知。教学重点0掌握和谐统一的色彩搭配方法； 0掌握突出比照的配色方法。教学难点0掌握构建移动UI颜色系统；0掌握移动UI色彩搭配的本卷须知。教学设计1、教学思路：通过对移动U色彩搭配相关知识的讲解，使学员能够理解并掌握移动UI 色彩搭配的方法及和技巧。2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。3、教学资料及要求：可以准备一些经典色彩搭配的海报，分析案例的制作方法，通过观 看海报色彩与分析案例的操作方法，来加深学员对相关理论知识的理解。教学内容讨论问题：1.色彩三属性都有哪些？2 .构建移动II颜色系统的基本流程有哪些？3 .移动UI色彩搭配的本卷须

6、知有哪些？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。3. 1认识色彩3. 1. 1色彩基础3. 1.2色彩三属性3.2和谐、统一的色彩搭配方法3. 2. 1同色系配色方法3. 2.2邻近色配色方法类似色配色方法3. 2.4同色调配色方法3. 2.5类似色配色方法3.3突出、比照的配色方法3. 3. 1中差色配色方法比照色配色方法互补色配色方法3. 3.4比照色调配色方法3. 4构建移动UI颜色系统3.1.1 确定风格3.1.2 确定主色3.1.3 4. 3 确定辅色3.1.4 操作案例一构建美妆App颜色系统3.1.5 调整配色3.5移动UI色彩搭配的本卷须知1.1.1 5.1切记将

7、精致、美观放在第一位1.1.2 5.2配色方案要符合用户的心理印象1.1.3 操作案例一美妆App首页界面配色设计1.1.4 App界面内容必须便于阅读1.1.5 保守地使用色彩1.1.6 规避杂乱的配色方案1.1.7 5.7操作案例一美妆App分类界面配色设计1 .认识色彩；2 .掌握同色系配色方法；3 .掌握邻近色配色方法；4 .掌握类似色配色方法；5 .掌握同色调配色方法；6 .掌握类似色调配色方法；7 .掌握中差色配色方法；小结8 .掌握比照色配色方法；9 .掌握互补色配色方法；10 .掌握比照色调配色方法；11 .掌握构建移动Ll颜色系统的基本流程；12 .掌握构建美妆App颜色系统

8、；13 .掌握移动UI色彩搭配的本卷须知； M.掌握美妆App首页界面配色设计；15 .掌握美妆App分类界面配色设计。课时内容出色的移动图标设计授课时间分钟课时教学目标0 了解App图标的概念和重要性；0 了解图标设计常用软件；0 了解图标栅格系统；0理解图标设计形式；0理解App图标的分类；0掌握图标尺寸；0掌握图标组设计规范。教学重点0理解图标设计形式；0理解App图标的分类。教学难点0掌握图标尺寸；0掌握图标组设计规范。教学设计1、教学思路：通过对移动图标设计相关知识的讲解，使学员能够理解并掌握设计与 绘制移动图标的方法和技巧。2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲

9、解。3、教学资料及要求：收集不同类型的移动图标，通过观看并分析不同移动图标以及 操作案例，来加深学员对相关理论知识的理解。教学内容讨论问题：1.移动UI图标的设计形式有哪些？2. App图标的分类有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。4. 1初始App图标4. 1. 1 App图标的概念5. 1.2 App图标的重要性5.2 图标设计的常用软件5.2.1 Adobe Illustrator5.2.2 Adobe Photoshop5.2.3 CorelDRAW5.3 熟悉图标栅格系统3. 1系统图标栅格图标栅格规范5.4 图标设计形式1.1.1 4. 1中文风格1.1.2

10、英文风格1.1.3 图形风格1.1.4 4.4数字风格1.1.5 特殊符号风格4.5 App图标的分类4.5.1 1工具图标4.5.2 操作案例一设计与制作磨砂质感工具图标4.5.3 装饰风格4.5.4 启动图标4.6 图标尺寸4.6.1 6. 1 Android系统的图标设计尺寸4.6.2 操作案例一设计与制作水果装饰图标4.6.3 iOS的图标设计尺寸4.6.4 操作案例一设计与制作时钟启动图标4.7 图标组设计规范4.7. 1创立制作清单设计草图数字化呈现确定最终效果命名与导出1. 了解App图标的概念和重要性；2. 了解图标设计常用软件；3. 了解图标栅格系统；4.理解图标设计形式；5

11、.理解App图标的分类；6.掌握设计与制作磨砂质感工具图标；7.掌握图标尺寸；8.掌握设计与制作水果装饰图标；9.掌握设计与制作时钟启动图标；10.掌握图标组设计规范。课时内容移动App的UI设计授课时间分钟课时教学目标0 了解移动UI的基本元素；0 了解常见的UI设计软件；0掌握移动UI的设计基础；0掌握移动UI的字体规范；0 了解移动UI图片尺寸规范；0掌握移动App内容布局。教学重点0掌握移动UI的设计基础；0掌握移动UI的字体规范。教学难点团掌握移动App内容布局。教学设计1、教学思路：介绍移动UI的基本元素、设计软件、设计基础、字体规范、图片尺 寸规范和App内容布局等相关内容，使学

12、员能够理解并掌握移动App的UI设计 的方法和技巧。2、教学手段：通过案例操作的方式，使学生可以循序渐进地领会如何完成一套移动 App的UI设计。3、教学资料及要求：准备一些视频和图片素材，以便在讲解过程中使用。教学内容讨论问题：1.移动UI的基本元素有哪些？2.移动App界面的布局方式有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。5. 1移动App的基本元素5.2常见的UI设计软件5. 2. 1 Adobe Photoshop5. 2. 2 Sketch5. 2. 3 Adobe XD5. 3移动UI的设计基础5. 3. 1 iOS的开发单位5.3.2 iOS的界面尺寸规范5.

13、3. 3操作案例一设计与制作iOS App启动界面5. 3. 4 Android系统的开发单位5. 3. 5 Android系统的界面尺寸规范5. 3. 6操作案例一设计与制作Android系统App界面5. 4移动UI的字体规范5. 4. 1 iOS字体规范5. 4. 2操作案例一设计与制作iOS App登录界面5.4.3 Android系统字体规范5. 4. 4操作案例一设计与制作Android系统App分类界面5. 5移动UI图片尺寸规范5.6移动App内容布局5. 6. 1 了解App界面中的全局边距5. 6. 2操作案例一设计与制作iOS App首页界面5. 6.3设置App界面中的

14、内容间距5. 6.4操作案例一设计与制作iOS App侧面菜单界面多动App界面的布局方式小结1. 了解移动UI的基本元素；2. 了解常见的UI设计软件；3. 掌握移动UI的设计基础；4.掌握设计与制作iOS App启动界面；5.掌握设计与制作Android系统App界面；6.掌握移动UI的字体规范；7.掌握设计与制作iOS App登录界面；8.掌握设计与制作Android系统App分类界面；9. 了解移动UI图片尺寸规范；10.掌握移动App内容布局；11.掌握设计与制作iOS App首页界面；12.掌握设计与制作iOS App侧面菜单界面。课时内容移动App交互设计授课时间分钟课时教学目标

15、0 了解交互动效的概念；0 了解常见的交互设计软件；0 了解交互设计的基本流程；0掌握移动UI交互的类型；0掌握动效在UI中的作用；0 了解交互设计需要遵循的习惯。教学重点0掌握移动UI交互的类型。教学难点0掌握移动UI中的作用。教学设计1、教学思路：介绍交互动效的概念、交互设计软件、交互设计的基本流程、移动UI 交互的类型、动效在UI中的作用和交互设计需要遵循的习惯等相关内容，使学员 能够理解并掌握移动App交互设计的相关知识。2、教学手段：通过讲解操作案例的方式，使学员熟知移动App交互类型，并了解制 作移动App交互的绘制软件和表现手法。3、教学资料及要求：准备一些视频和案例素材，以便在

16、讲解过程中使用。教学内容讨论问题：1.移动UI交互的类型有哪些？2.动效在UI中作用有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1 了解UI交互设计6.1 . 1交互动效的概念6.2 .2基础动效类型6.2 常见的交互设计软件6. 2. 1 Adobe Affter Effects7. 2. 2 Adobe XD6.3 交互设计的基本流程6 . 3.1提出交互设计创意想法7 .3.2实现创意想法6.4 移动UI交互的类型6 . 4. 1转场过渡7 .4.2操作案例一设计与制作App转场交互6. 4.3层级展示6. 4.4空间扩展关注焦点内容呈现1.1.1 4.7操作案例一设计

17、与制作相册App内容呈现交互1.1.8 操作反响1.1.9 操作案例一设计与制作相册App点赞反响交互6.5 动效在UI中的作用6. 5. 1吸引用户注意力7. 5.2为用户提供操作反响8. 5.3加强指向性9. 5.4操作案例一设计与制作App后台交互10. 5.5传递信息深度6.6 交互设计需要遵循的习惯小结1. 了解UI交互设计；2. 了解交互设计软件；3. 掌握交互设计的基本流程；4.掌握移动UI交互的类型；5.掌握设计与制作App转场交互；6.掌握设计与制作相册App内容呈现交互；7.掌握设计与制作App点赞反响交互；8.掌握动效在UI中的作用；9.掌握设计与制作App后台交互；10

18、. 了解交互设计需要遵循的习惯。【课程名称】【适用专业】【开课时间】【课程类型】一.课程基本信息移动UI设计（微课版）数字媒体与艺术设计专业第X学期专业基础课/专业核心课/专业拓展课等二.课程性质与任务课程性质：移动UI设计（微课版）是数字媒体与艺术设计专业的一门核 心专业课程，依据职业能力的要求，主要对移动UI设计、iOS和Android系统 移动设备界面的结构及设计规范等相关知识进行梳理和讲解，主要介绍了移动 UI设计基础知识、移动UI的筹划与原型设计方法、移动UI的色彩搭配方法、 移动图标的设计方法、移动App的UI设计方法、移动App的交互设计、适配与 输出移动UI设计的方法和设计与制

19、作移动App工程的相关知识等八局部内容。随着科技的开展，手机与人们生活的联系日益密切。手机中的软件系统是 用户直接操作的对象，它以精美的视觉效果和便捷的操作为用户所青睐，进而 促进了移动UI设计行业的兴盛。本课程使学生进一步了解移动UI设计的相关知识，在工程的实践过程中激 发学生的创新意识，促使学生加深掌握移动UT设计的基本知识，使学生实现从 学校到社会的平滑过渡。课程任务：通过学习移动UI设计等相关理论知识，不仅促使学生具备移动 UI设计相关的理论知识和行业素养，同时也有助于培养学生发现问题、分析问 题、解决问题的能力，使学生能够具有相对良好的沟通、交流和协调能力，培 养良好的职业道德和行为

20、素养，为后续的课程学习和职业开展打下坚实的基础。三、职业岗位标准1 .典型职业活动移动UI设计师等。2 .典型职业岗位标准（或工作内容、职责）、技术等级标准职业功能移动UI设计师工作内容1 .负责软件界面的美术设计、创意工作和制作工作；2 .根据各种相关软件的用户群，提出构思新颖、有高度吸课时内容适配与输出移动UI设计授课时间分钟课时教学目标0 了解标注的重要性；0 了解常见的标注软件；0掌握标注移动UI ；0 了解移动UI标注规范；0掌握输出与适配iOS UI设计；0掌握输出与适配Android系统UI设计。教学重点0掌握标注移动Ulo教学难点0掌握输出与适配iOS UI设计；0掌握输出与适

21、配Android系统UI设计；教学设计1、教学思路：介绍标注的重要性、常见的标注软件、标注移动UI、移动UI标注规 范、输出与适配iOS UI设计和输出与适配Android系统UI设计，使学员能够了解 并掌握适配与输出移动UI设计的使用方法和技巧。2、教学手段：通过边操作边讲解的方式，使学员快速掌握适配与输出移动UI设计的 操作方法3、教学资皆及要求：准备一些视频和案例素材，以便在讲解过程中使用。教学内容讨论问题：移动UI标注规范有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。7. 1标注的重要性7.2常见的标注软件7. 2. 1 PxCook7. 2. 2 Assistor PS7

22、.3标注移动UI7. 3. 1移动App标注的内容7. 3. 2操作案例一标注iOS App界面7. 3.3标注的声明文档7. 3.4操作案例一标注Android系统App界面7.4 移动UI标注规范7.4.1 4. 1位置与尺寸的标注规范7.4.2 色彩和文字的标注规范7.4.3 切图资源的尺寸必须是偶数7.5 输出与适配iOS UI设计7. 5. 1向上适配与向下适配7. 5.2适配切片命名规范7. 5. 3操作案例一导出iOS App界面切图资源7. 6输出与适配Android系统UI设计7. 6. 1 Android系统中的“点9”切图7. 6.2输出与适配的一稿两用7. 6. 3操作

23、案例一导出Android系统App切图资源小结1 . 了解标注的重要性；2 . 了解常用的标注软件；3 .掌握移动App标注的内容；4 .掌握标注iOS App界面；5 , 了解标注的声明文档；6 .掌握标注Android系统App界面；7.掌握移动UI标注规范；8.掌握输出与适配QSUI设计；9.掌握导出iOS App界面切图资源；10.掌握输出与适配Android系统UI设计；11.掌握导出Android系统App切图资源0课时内容设计与制作移动App项授课时间分钟课时日教学目标0分析美妆电商App的工程背景；0掌握制作美妆电商App界面的草图原型；0掌握构建美妆电商App的颜色系统；0掌

24、握设计与制作美妆电商App的图标组；0掌握美妆电商App的UI设计；0掌握美妆电商App的交互设计；0掌握美妆电商App的界面标注；0掌握美妆电商App的切图资源；0分析美食外卖App的工程背景；0掌握制作美食外卖App的草图原型；0掌握创立美食外卖App的颜色系统；0掌握设计与制作美食外卖App的图标组；0掌握美食外卖App的UI设计；0掌握美食外卖App的交互设计；0掌握美食外卖App的界面标注；0掌握美食外卖App的切图资源。教学重点0掌握美妆电商App的UI设计；0掌握美食外卖App的UI设计。教学难点0掌握美妆电商App的交互设计；0掌握美食外卖App的UI交互设计教学设计1、教学思

25、路：通过之前所学到的内容，重点在于使学员能够掌握移动App的设计与 制作。2、教学手段：（1）通过案例边操作边讲解的方式，使学员快速掌握移动App的设计 与制作。教学内容讨论问题：L美妆电商App的工程背景有哪些？2.美食外卖App的工程背景有哪些？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。8. 1设计与制作美妆电商App工程分析美妆电商App的工程背景8.1. 2制作美妆电商App界面的草图原型8. 1.3构建美妆电商App的颜色系统8.1. 4设计与制作美妆电商App的图标组8. 1. 5完成美妆电商App的UI设计1.1.1 6完成美妆电商App的交互设计8.1.7 完成美妆电

26、商App的界面标注8.1.8 导出美妆电商App的切图资源8.2设计与制作美食外卖App工程1. 2.1分析美食外卖App的工程背第8. 2. 2制作美食外卖App界面的草图原型9. 2. 3创立美食外卖App的颜色系统10. 2.4设计与制作美食外卖App的图标组11. 2. 5完成美食外卖App的UI设计12. .6完成美食外卖App的交互设计13. 2.7完成美食外卖App的界面标注14. 2.8导出美食外卖App的切图资源1 .分析美妆电商App的工程背景；.掌握制作美妆电商App界面的草图原型；2 .掌握构建美妆电商App的颜色系统；.掌握设计与制作美妆电商App的图标组；3 .掌握

27、美妆电商App的UI设计；.掌握美妆电商App的交互设计；4 .掌握美妆电商App的界面标注；小结5 .掌握美妆电商App的切图资源；6 .分析美食外卖App的工程背景；.掌握制作美食外卖App的草图原型；7 .掌握创立美食外卖App的颜色系统；.掌握设计与制作美食外卖App的图标组；8 .掌握美食外卖App的UI设计；.掌握美食外卖App的交互设计；9 .掌握美食外卖App的界面标注；.掌握美食外卖App的切图资源。引力的创意设计；3 .对页面进行优化，使用户操作更趋于人性化；4 .维护现有的应用产品。相关知识1 .艺术设计，多媒体设计，动画设计，工业设计等相关设 计艺术专业；2 .可以独立

28、设计手机界面里的所有画面元素，能够原创图 标及制作动画效果；3 .熟练Photoshop, ai, Flash,或者其他设计软件；4 .有扎实的美术功底和审美能力，富有创新精神，有良好 的平面设计和造型设计能力；5 .有较强的学习能力，能不断的跟踪学习，新的设计理念 和流行趋势；6 .对移动互联网及移动终端手机UI软件行业开展有深刻的 理解。3.主要职业能力1）培养学生严谨认真的工作态度和终身学习的习惯；2）培养学生在实际工作中遵守相关规范和要求；3）丰富学生的知识结构，提升专业技能；4）培养良好的人际沟通能力和团队互助的精神；5）培养学生自我学习、勇于创新、积极承担不同角色的能力。四、课程教

29、学目标1 .课程总体目标本课程根据数字媒体与艺术设计专业学生将来工作过程中所必须具备的综 合职业能力出发，应用先进教学方法和教学理论，优化和整合教学内容，将基 于移动UI设计与操作案例相结合，构建一种创新型的移动UI设计教学。 本课程对移动UI设计、iOS和Android系统移动设备界面的结构及设计规范等 相关知识进行了梳理和讲解，主要通过案例操作的形式，希望通过分析案例操 作的过程，使学生能够逐步培养自我思考、自我分析的能力，同时提升专业技 能。从而促进学生的综合能力的全面提升，充分满足社会对于适应型人才的需 求。2 .职业能力目标：掌握移动UT设计、移动UI的系统分类、移动UI设计流程、移

30、动UT 设计原那么和移动UI设计流程的职位划分。 掌握移动UI目标用户、移动IH筹划书、思维导图、绘制思维导图的 常用软件、绘制移动UI思维导图、绘制UI草图、绘制原型的常用软 件和绘制移动UI原型图。 掌握色彩搭配方法与配色方法、构建移动UI颜色系统和移动UI色彩 搭配的本卷须知。 掌握图标设计常用软件、图标栅格系统、图标设计形式、App图标的分 类、图标尺寸和图标组设计规范。 掌握移动UI的基本元素、常见的UI设计软件、移动UI的设计基础、 移动LI的字体规范、移动UI图片尺寸规范和移动App内容布局。 掌握常见的交互设计软件、交互设计的基本流程、移动UI交互的类型、 动效在UI中的作用和

31、交互设计需要遵循的习惯。 掌握标注的重要性、常见的标注软件、标注移动U1、移动UI标注规范、 输出与适配iOS UI设计和输出与适配Android系统UI设计。 掌握美妆电商App工程和美食外卖App工程的制作。五、课程内容根据移动UI设计相关工作内容，总结出适应学生特点的，并与数字媒体与 艺术设计工作相关的基于移动UI设计的知识，通过学习、分析操作案例。本书 围绕移动UI设计，向读者介绍了相关的基本知识和操作案例，构建成体系的 运营过程，为实际操作打下坚实的基础。本课程的学习内容分解如下：课程内容与教学要求序号名称主要内容教学要求建议 学时第1章关于移动UI设计 了解移动UI设计 移动UI的

32、系统分类 移动UI设计流程 移动UI设计原那么 移动UI设计流程的职位划分讲解移动UI设 计中的基础知 识，帮助学生快 速了解移动UI 设计的基础知识第2章移动UI策 划与原型设 计 确定移动UI目标用户 完成移动UI筹划书 了解思维导图 绘制思维导图的常用软件 绘制移动UI思维导图 绘制移动UI草图 了解原型设计 绘制原型的常用软件 绘制移动U1原型图讲解如何将客户 提出的抽象化描 述转化为具象化 的移动UT筹划 和原型设计，转 化过程中使用的 方法及常用软 件，帮助学生更 好地完成每一款 移动UI产品的 筹划与原型设计第3章优秀的移动 UI色彩搭 配认识色彩 和谐、统一的色彩搭配方法 突出

33、、比照的配色方法 构建移动U颜色系统 移动UI色彩搭配的本卷须知讲解如何为一款 移动App工程构 建符合设计主题 的颜色系统，帮 助学生掌握如何 让移动UI的外 观变得更加出 彩，从而可以吸 引更多的用户第4章出色的移动 图标设计 初始App图标 图标设计常用软件 熟悉图标栅格系统 图标设计形式 App图标的分类 图标尺寸 图标组设计规范讲解图标相关的 概念、设计形式 和设计尺寸及设 计制作方法，是 学生进入UI设 计行业的必备条 件第5章移动App的 UI设计 移动UI的基本元素 常见的UI设计软件 移动UI的设计基础 移动UI的字体规范 移动UI图片尺寸规范 移动App内容布局讲解有关Ap

34、p界 面的设计规范和 设计技巧，使学 生掌握App界面 的设计规范和 App界面的设计 方法第6章移动App交 互设计 了解UI交互设计 常见的交互设计软件 交互设计的基本流程 移动UI交互的类型 动效在UI中的作用 交互设计需要遵循的习惯讲解有关移动 App交互设计的 相关基础知识， 使学生掌握移动 App交互类型， 并了解制作移动 App交互的绘制 软件和表现方法第7章适配与输出 移动UI设 计 标注的重要性 常见的标注软件 标注移动UI 移动UI标注规范 输出与适配iOS UI设计 输出与适配Android系统UI设计讲解标注的重要 性、常见的标注 软件、标注移动 UT和移动UT标 注规

35、范及输出 UI切片资源等 内容，使学生能 够理解标注移动 UT和输出切片 资源的作用与条 件，从而完成标 注和导出移动 App UI的操作第8章设计与制作 移动App项目设计与制作美妆电商App工程设计与制作美食外卖App工程讲解设计与制作 两个移动UI项 日，帮助学生巩 固前面所学的知 识，同时加深学 生对移动UI设 计规范的理解学时合计：学时六、教学实施建议1 .教学建议：采用“理论+案例”的教学法，通过案例分析加强知识理解，将所学知识与 操作案例相结合，帮助学生准确理解与使用移动UI设计的相关知识，并领会 移动UI设计的内在实质。充分利用挂图、投影和多媒体等教学手段。2 .教学评价建议：

36、在本课程实施过程中，突出评价的教育功能，注重过程评价与结果评价并 重、定性评价与定量评价相结合，形成教师和学生共同参与的多元评价主体， 构建评价体系。3 .教材编写与选用建议：教材编写要表达课程的特色与设计思想，教材内容表达先进性、实用性， 操作案例的选取要科学，采用全流程设计的方式，由浅入深地讲解初学者需要 掌握的基础知识和操作技巧，全面解析各种元素的具体绘制方法，并在知识点 后衔接相关案例，使学生能够轻松理解知识点。教材力求文字标准规范、正确、 科学，配备适量的直观图片和视频影像资料。4 .实验实训设备配置建议：充分利用挂图、投影和多媒体等教学手段，采用理论知识与操作案例分析 相结合的教学

37、模式，帮助学生准确理解相关知识。5 .课程资源开发与利用建议：开发相关辅导用书、教师指导用书、网络资源，要注重仿真软件的应用及 开发。移动UI设计（微课版）配套教学教案课时内容关于移动UI设计授课时间分钟课时教学目标0 了解移动UI设计；0移动UI的系统分类；0移动UI设计流程；0移动UI设计原那么；0移动UI设计流程的职位划分。教学重点0掌握移动UI设计原那么；0掌握移动UI设计流程的职位划分。教学难点0掌握移动UI设计流程。教学设计1、教学思路：通过对移动UI设计相关基础知识的讲解了解移动UI设计；2、教学手段：针对移动UI与PC端UI的区别、移动UI的系统分类、移动UI设计流 程、移动U

38、I设计原那么和移动UI设计流程的职位划分进行讲解。教学内容讨论问题：1、移动UI的系统分类有哪些？2、移动UI设计原那么有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解“1.1 了解移动口设计1. 1. 1初始移动UI设计2. 1.2移动UI设计的概念3. 1.3 移动UI与PC端UI4. 1.4将PC端UI重置为移动UI1.2 移动UI的系统分类1 . 2. 1 iOS2 . 2. 2 Android 系统3 .2.3 HarmonyOS4 .2.4 Wear OS 和 watchOS1.3移动UI设计流程1.3.1 需求分析1.3.2 原型设计1.3.3 UI 设计1.4移动UI设计原那么1.1.1 1风格一致性原那么1.1.2 元素准确性原那么1.1.3 界面布局合理化原那么1.1.4 系统响应时间原那么1.5移动UI设计流程的职位划分1.5. 1产品经理1.5.2 工程经理1.5.3 UI设计时1.5.4 开发工程师1. 6本章小结小结1. 了解移动UI设计的概念；2. 了解移动UI与PC端UI的不同点；3. 了解移动UI的系统分类以及各类型的特点；4. 理解移动UI设计流程；5. 了解需求分析阶段的主要步骤；6. 理解移动UI设计原那么以及各原那么的特点；7. 理解移动UI设计流程的职位划分。