移动UI设计(微课版) 教案全套
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案一、教学目标1. 掌握Photoshop CC的基本操作和功能。
2. 学习移动UI设计的基本原则和技巧。
3. 能够运用Photoshop CC设计出符合用户需求的移动UI界面。
二、教学内容1. Photoshop CC的基本功能介绍图像处理基础选择工具和修饰工具图层和蒙版色彩和色调调整2. 移动UI设计原则设计规范和标准界面布局和结构色彩搭配和视觉效果字体和图标设计三、教学方法1. 讲授法：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
2. 演示法：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
3. 实践法：让学生通过实际操作练习，提高设计能力。
四、教学准备1. 计算机和投影仪2. Photoshop CC软件3. 移动UI设计素材和案例五、教学过程1. 导入：介绍教案主题，激发学生的学习兴趣。
2. 讲解：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
3. 演示：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
4. 练习：让学生通过实际操作练习，提高设计能力。
6. 作业布置：布置相关的练习题目，巩固所学知识。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 练习作品：评估学生在实践环节的设计作品，包括创意、技巧和符合设计原则的程度。
3. 作业完成情况：检查学生完成作业的情况，包括及时性和质量。
七、教学反思1. 教学方法：反思所采用的教学方法是否适合学生的学习需求，是否能够有效地促进学生的理解和掌握。
2. 教学内容：反思教学内容是否全面，是否能够满足学生的学习目标。
3. 教学效果：评估学生的学习成果，反思教学目标和教学方法的实现程度。
八、教学拓展1. 移动UI设计趋势：介绍当前移动UI设计的趋势，如扁平化设计、materialdesign等。
photoshop cc 移动ui设计教学课件汇总完整版电子教案
1.1.2 移动UI设计的概念
移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交 互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计 因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机 系统限制。
从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动 端网页界面设计、微信小程序设计及H5设计等。
App界面展示
1.1.1 UI设计的相关概念
2.UI与WUI和GUI 在设计领域，UI现在被广泛分为WUI和GUI。WUI全称Web User Interface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计 的工作。GUI全称Graphical User Interface，即图形用户界面。因为移 动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动 端App的设计工作。
丰富的交互方式
1.1.3 移动UI设计的特点
3.设计适配 由于现在市场中智能手机、平板电脑型号的碎片化及多样化， 设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面 布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用 的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸 屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图 输出，然后再交由技术端进行适配。
Photoshop工作区界面截图
1.1.5 移动UI设计的常用软件
·Sketch Sketch是基于苹果电脑系统的一款收费型专业制作UI的工具。 相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅对UI 设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合 作的问题。
Sketch工作区界面截图
《移动终端UI设计》教学教案07移动端界面设计
******学校教师教案（学年第学期）课程名称：移动终端UI设计授课专业：任课教师：所在系部：2019年7月第7章移动端界面设计任务名称7.1 常见的移动端界面教学目的熟悉常见的移动终端UI界面设计的常见类型及特点教学方法讲授法、案例法教学手段多媒体教学、手机客户端重点难点重点：熟悉常见的移动终端UI界面设计的常见类型难点：熟悉常见的移动终端UI界面设计的特点教学内容设计授课内容：7.1.1 常见移动端界面类型1. 启动界面2.入门教程界面3.引导界面4.首页5.菜单页6.登录界面7.个人资料页8.状态界面9.日历界面10.产品卡片界面11.音乐界面7.1.2 UI界面设计风格1.扁平化、极简主义2.字体变大、留白更多3.页面icon设计趋势4.卡片+投影5.渐变色6.3D效果7.插画风格8.交互动效9.动态视频10.响应式设计11.VR/AR/VUI总结课程内容，重申重点、难点课后作业课下同学们自拟一个APP，之后确定为其设计和制作启动界面。
任务名称7.2 打造一款炫酷风格界面教学目的学习UI设计中打造一款炫酷风格界面的方法教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端重点难点重点：学习炫酷风格界面的设计和制作方法难点：掌握炫酷风格界面的设计策略教学内容设计授课内容：7.2.1 绘制基础图形7.2.2 制作炫色7.2.3 添加文字和图标7.2.4 处理细节总结课程内容，重申重点、难点课后作业请同学们设计一组插画网络的APP界面，并完成设计与制作。
任务名称7.3 制作一款渐变风格界面教学目的掌握渐变风格界面的设计思想与方法教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端重点难点重点：掌握渐变风格界面的设计方法难点：掌握渐变风格界面的设计标准与规范教学内容设计授课内容：整体效果图7.3.1 规范布局7.3.2 制作渐变插画7.3.3 制作天气信息7.3.4 制作状态栏总结课程内容，重申重点、难点课后作业每位学生课后找一组具有渐变风格的界面，并完成设计和制作。
移动UI设计(微课版) 教案
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计与UX设计的区别1.3 移动UI设计的原则与流程1.4 移动UI设计的趋势与挑战第二章：移动UI设计的基本元素2.1 图标设计2.2 文字设计2.3 色彩运用2.4 布局与排版2.5 交互设计第三章：移动UI设计的风格与主题3.1 设计风格的选择与应用3.2 主题色的搭配与调整3.3 typography的应用3.4 个性化与定制化设计3.5 设计规范与系统风格第四章：移动UI设计的交互与动画4.1 交互设计的基本原理4.2 手势与滑动操作4.3 动画的类型与效果4.4 动效的实现与优化4.5 交互与动画的设计原则第五章：移动UI设计的实战案例解析5.1 案例一：单页面应用UI设计5.2 案例二：社交平台UI设计5.3 案例三：电子商务UI设计5.4 案例四：音乐APP UI设计5.5 案例五：新闻阅读器UI设计第六章：设计工具与技能6.1 Sketch vs. Figma：选择最佳设计工具6.2 使用Sketch进行UI设计的基本操作6.3 Figma的协作功能与界面布局6.4 矢量图设计工具Adobe XD的基本操作6.5 原型设计与交互：Axure RP的使用第七章：用户画像与需求分析7.1 用户研究的意义与方法7.2 创建用户画像：年龄、性别、兴趣等7.3 需求分析：用户访谈、问卷调查等7.4 竞品分析：分析竞争对手的UI设计7.5 用户故事与场景分析第八章：原型设计与框架构建8.1 原型设计的基本概念与工具8.2 低保真原型与高保真原型的区别8.3 使用线框图、低保真原型工具进行设计8.4 高保真原型设计与制作8.5 框架构建：设计系统的概念与实践第九章：移动UI设计的视觉元素9.1 视觉元素在移动UI设计中的作用9.2 图片与图标的设计规范9.3 色彩搭配与视觉层次9.4 栅格系统与响应式设计9.5 设计规范：Material Design与Apple's Human Interface Guidelines第十章：设计稿的评审与迭代10.1 设计稿评审的标准与方法10.2 获取反馈：用户测试与设计师评审10.3 设计修改与迭代流程10.4 设计规范文档的编写与应用10.5 准备上线：的调整与优化第十一章：交互设计与动画效果11.1 交互设计的基本概念11.2 交互设计的实现方法11.3 动画效果的类型与实现11.4 动效在UI设计中的作用11.5 交互设计与动画效果的最佳实践第十二章：响应式移动UI设计12.1 响应式设计的概念与重要性12.2 响应式设计的实现方法12.3 移动端与Web端的差异12.4 设计工具的选择与应用12.5 响应式设计的实战案例分析第十三章：品牌与个性化的移动UI设计13.1 品牌在移动UI设计中的重要性13.2 品牌元素的应用与设计13.3 个性化设计的概念与实现13.4 设计风格的一致性与变化性13.5 品牌与个性化设计的实战案例分析第十四章：移动UI设计的趋势与创新14.1 移动UI设计的最新趋势14.2 创新设计的方法与技巧14.3 设计创新的实现与评价14.4 设计创新案例分析14.5 面对未来：移动UI设计的挑战与机遇第十五章：移动UI设计的项目管理与团队协作15.1 项目管理在移动UI设计中的作用15.2 项目计划的制定与执行15.3 团队协作的工具与方法15.4 沟通与协调的重要性15.5 移动UI设计项目的实战案例分析重点和难点解析重点：1. 移动UI设计的基本概念与重要性2. 设计工具的使用：Sketch, Figma, Adobe XD, Axure RP等3. 用户研究的方法：用户画像、需求分析、竞品分析、用户故事与场景分析4. 原型设计与框架构建：线框图、低保真原型、高保真原型5. 视觉元素的设计：图片、图标、色彩、栅格系统、响应式设计6. 交互设计与动画效果的实现7. 响应式移动UI设计的原则与实践8. 品牌与个性化的移动UI设计策略9. 移动UI设计的最新趋势与创新方法10. 项目管理与团队协作的工具与方法难点：1. 用户研究的深度与准确性，包括用户访谈、问卷调查等方法的运用2. 原型设计与框架构建的技术细节，如交互、动画效果的实现3. 视觉元素设计的审美与规范，包括色彩搭配、排版等4. 交互设计与动画效果的创意实现，以及动效的优化5. 响应式移动UI设计在不同设备上的实现与调整6. 品牌与个性化的移动UI设计在保持一致性下的创新7. 面对设计趋势与创新时的判断与选择8. 项目管理与团队协作中沟通与协调的能力培养。
移动UI设计 课程标准(教学大纲)及 教案 (人邮微课版)
移动UI设计课程标准（教学大纲）及教案全套（人邮微课版）第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计与UX设计的区别1.3 移动UI设计的发展趋势1.4 移动UI设计的原则与要素第二章：移动UI设计的基本界面布局2.1 界面布局的分类与特点2.2 界面布局的基本原则2.3 常用的界面布局方式2.4 界面布局的实践案例第三章：移动UI设计的色彩与字体3.1 色彩在移动UI设计中的应用3.2 色彩搭配的原则与技巧3.3 字体在移动UI设计中的应用3.4 字体搭配的原则与技巧第四章：移动UI设计的图标与插画4.1 图标在移动UI设计中的应用4.2 图标的分类与设计原则4.3 插画在移动UI设计中的应用4.4 插画的设计技巧与实践案例第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的作用5.2 交互设计的原则与技巧5.3 动画在移动UI设计中的应用5.4 动画设计的原则与技巧第六章：移动UI设计的导航与菜单6.1 导航在移动UI设计中的重要性6.2 移动UI导航的类型与设计原则6.3 菜单设计的方法与技巧6.4 导航与菜单设计的实践案例第七章：移动UI设计的按钮与操作反馈7.1 按钮在移动UI设计中的应用7.2 按钮设计的注意事项7.3 操作反馈的设计原则与方法7.4 按钮与操作反馈设计的实践案例第八章：移动UI设计的表格与列表8.1 表格在移动UI设计中的应用8.2 表格设计的原则与技巧8.3 列表在移动UI设计中的应用8.4 列表设计的原则与技巧第九章：移动UI设计的数据输入与展示9.1 数据输入界面设计的原则与方法9.2 数据展示界面设计的原则与方法9.3 输入与展示界面的实践案例9.4 输入与展示界面的优化技巧第十章：移动UI设计的项目实践10.1 项目实践的意义与目的10.2 项目实践的流程与步骤10.3 项目实践的评估与反馈10.4 项目实践的案例分析与总结第十一章：移动UI设计的适配与响应式布局11.1 移动设备屏幕尺寸与分辨率11.2 适配方法与技巧11.3 响应式布局的原则与实践11.4 适配与响应式布局的案例分析第十二章：移动UI设计的动效与过渡12.1 动效在移动UI设计中的作用12.2 动效设计的原则与技巧12.3 过渡效果的设计与实现12.4 动效与过渡设计的实践案例第十三章：移动UI设计的兼容性与优化13.1 移动浏览器兼容性问题13.2 兼容性设计的方法与技巧13.3 移动UI性能优化策略13.4 兼容性与优化实践案例第十四章：移动UI设计的国际化与本地化14.1 国际化设计的重要性14.2 语言、文字及符号的适配14.3 文化差异与设计调整14.4 国际化与本地化实践案例第十五章：移动UI设计的趋势与创新15.1 移动UI设计的最新趋势15.2 创新设计的方法与技巧15.3 跨界合作与设计启发15.4 趋势与创新实践案例重点和难点解析本文教案主要涵盖了移动UI设计的基本概念、设计原则、实践案例以及最新趋势等方面。
移动UI设计(微课版) 教案
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 课程目标让学生了解移动UI设计的基本概念让学生掌握移动UI设计的基本原则和流程1.2 教学内容移动UI设计的定义和重要性移动UI设计与UX设计的区别移动UI设计的基本原则移动UI设计的流程1.3 教学方法讲授法：讲解移动UI设计的概念和原则案例分析法：分析优秀的移动UI设计案例1.4 教学资源微课视频：讲解移动UI设计的基本概念和原则案例素材：提供优秀的移动UI设计案例供学生分析1.5 教学评估课堂讨论：学生分享对优秀移动UI设计案例的分析课后作业：让学生完成一个简单的移动UI设计项目第二章：移动UI设计的基本元素2.1 课程目标让学生了解移动UI设计的基本元素让学生掌握如何使用基本元素进行有效的移动UI设计2.2 教学内容移动UI设计的基本元素：图标、按钮、文本、图像等基本元素的使用原则和技巧基本元素的布局和排列方法2.3 教学方法讲授法：讲解基本元素的概念和作用实践操作法：学生动手实践，使用基本元素进行UI设计2.4 教学资源微课视频：讲解基本元素的使用原则和技巧设计工具：提供适合移动UI设计的设计软件供学生实践2.5 教学评估课堂练习：学生动手实践，完成一个简单的UI设计任务作品展示：学生展示自己的UI设计作品，进行互相评价第三章：移动UI设计的色彩与字体3.1 课程目标让学生了解移动UI设计中色彩和字体的运用让学生掌握如何通过色彩和字体提升UI设计的视觉效果3.2 教学内容色彩的基础知识：色相、饱和度、明度等字体的基本类型和特点色彩和字体的搭配原则色彩和字体在移动UI设计中的应用技巧3.3 教学方法讲授法：讲解色彩和字体的相关知识案例分析法：分析优秀的移动UI设计案例，探讨其色彩和字体的运用3.4 教学资源微课视频：讲解色彩和字体的相关知识及应用技巧色彩和字体搭配示例：提供色彩和字体的搭配示例供学生参考3.5 教学评估课堂练习：学生动手实践，为某个移动应用设计色彩和字体作品展示：学生展示自己的设计作品，进行互相评价第四章：移动UI设计的交互与动画4.1 课程目标让学生了解移动UI设计中交互和动画的重要性让学生掌握如何通过交互和动画提升用户体验4.2 教学内容交互设计的基本原则和技巧动画的基本类型和效果交互和动画在移动UI设计中的应用案例4.3 教学方法讲授法：讲解交互和动画的基本概念和应用技巧实践操作法：学生动手实践，创作交互和动画4.4 教学资源微课视频：讲解交互和动画的基本概念和应用技巧设计工具：提供适合移动UI设计的交互和动画制作工具供学生实践4.5 教学评估课堂练习：学生动手实践，为某个移动应用创作交互和动画作品展示：学生展示自己的设计作品，进行互相评价第五章：移动UI设计的实战项目5.1 课程目标让学生了解移动UI设计的实战项目流程让学生掌握如何完成一个完整的移动UI设计项目5.2 教学内容实战项目的需求分析和规划设计草图和线框图的制作设计元素的布局和排列设计色彩和字体的搭配5.3 教学方法讲授法：讲解实战项目的流程和关键环节实践操作法：学生动手实践，完成一个完整的移动UI设计项目5.4 教学资源微课视频：讲解实战项目的流程和关键环节设计工具：提供适合移动UI设计的实战项目案例供学生参考5.5 教学评估项目评审：学生展示自己的实战项目，进行互相评价-第六章：移动UI设计的用户测试与反馈6.1 课程目标让学生了解移动UI设计中用户测试和反馈的重要性让学生掌握如何进行用户测试和收集反馈的方法6.2 教学内容用户测试的基本方法和流程用户反馈的收集和分析技巧用户测试和反馈在移动UI设计中的应用案例6.3 教学方法讲授法：讲解用户测试和反馈的基本概念和方法案例分析法：分析优秀的移动UI设计案例，探讨其用户测试和反馈的运用6.4 教学资源微课视频：讲解用户测试和反馈的基本概念和方法用户测试工具：提供适合移动UI设计的用户测试工具供学生实践6.5 教学评估课堂练习：学生动手实践，进行简单的用户测试和反馈收集作品展示：学生展示自己的用户测试和反馈结果，进行互相评价第七章：移动UI设计的趋势与创新7.1 课程目标让学生了解移动UI设计的最新趋势和发展方向让学生掌握如何将创新元素应用到移动UI设计中7.2 教学内容移动UI设计的最新趋势：如扁平化设计、Material Design 等创新元素的应用：如AR、VR、等在移动UI设计中的应用创新设计思维和方法7.3 教学方法讲授法：讲解最新趋势和创新元素的基本概念和应用案例分析法：分析具有创新元素的移动UI设计案例7.4 教学资源微课视频：讲解最新趋势和创新元素的基本概念和应用创新设计工具：提供适合移动UI设计的创新设计工具供学生实践7.5 教学评估课堂讨论：学生分享对最新趋势和创新元素的理解和应用想法作品展示：学生展示自己的创新UI设计作品，进行互相评价第八章：移动UI设计的案例分析与解析8.1 课程目标让学生了解各种类型的移动UI设计案例让学生掌握如何分析和解构优秀的移动UI设计案例8.2 教学内容各种类型的移动UI设计案例：如社交、电商、教育等类型的移动应用分析和解构优秀移动UI设计案例的方法和技巧从案例中吸取经验和启示8.3 教学方法讲授法：讲解不同类型移动UI设计案例的特点和共性案例分析法：分析优秀的移动UI设计案例，探讨其成功的原因8.4 教学资源微课视频：讲解不同类型移动UI设计案例的特点和共性案例素材：提供丰富的优秀移动UI设计案例供学生分析8.5 教学评估课堂讨论：学生分享对优秀移动UI设计案例的分析和解构过程作品展示：学生展示自己的UI设计作品，进行互相评价第九章：移动UI设计的创业与实战9.1 课程目标让学生了解如何将移动UI设计应用于创业项目让学生掌握如何将移动UI设计应用于实际项目实战9.2 教学内容移动UI设计在创业项目中的应用策略和方法移动UI设计在实际项目实战中的流程和技巧创业项目和实际项目实战中的案例分析9.3 教学方法讲授法：讲解移动UI设计在创业项目和实际项目中的应用策略和方法案例分析法：分析创业项目和实际项目实战中的移动UI设计案例9.4 教学资源微课视频：讲解移动UI设计在创业项目和实际项目中的应用策略和方法实战项目素材：提供真实的创业项目和实际项目供学生参考9.5 教学评估课堂讨论：学生分享对创业项目和实际项目实战中的移动UI设计的理解和应用作品展示：学生展示自己的实战项目，进行互相评价10.1 课程目标让学生展望移动UI设计的发展前景10.2 教学内容探讨移动UI设计的未来发展前景和趋势10.3 教学方法讨论法：让学生讨论移动UI设计的未来发展前景和趋势10.4 教学资源未来发展趋势资料：重点和难点解析重点环节1：移动UI设计的基本概念和原则需要重点关注的原因：了解基本概念和原则是进行移动UI设计的基础，对于后续设计流程和元素应用至关重要。
《PhotoshopCC 移动UI设计案例教程(全彩慕课版)》配套教学教案
《Photoshop CC 移动UI设计案例教程（全彩慕课版）》
配套教学教案
第1讲
第2讲
第3讲
3.5 课后习题——制作旅游类APP预约美食页
使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。
第4讲
4.3 课堂练习——制作医疗类APP输入信息页
使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。
4.4 课后习题——制作医疗类APP帮助支持页
使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。
第5讲
5.8 课堂练习——制作Delicacy App
使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。
5.9 课后习题——制作美食来了App
使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。
移动UI设计(微课版) 教案全套
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计的原则与要素1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本界面布局2.1 界面布局的基本概念与原则2.2 常见的界面布局类型与示例2.3 界面布局的实战技巧与方法2.4 优秀界面布局案例分析与借鉴第三章：移动UI设计的色彩与图标3.1 色彩在移动UI设计中的应用与重要性3.2 色彩搭配的基本原则与技巧3.3 图标设计的基本概念与原则3.4 图标设计的实战技巧与方法第四章：移动UI设计的字体与排版4.1 字体在移动UI设计中的应用与重要性4.2 字体的选择与搭配技巧4.3 排版的基本概念与原则4.4 排版设计的实战技巧与方法第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的应用与重要性5.2 交互设计的基本概念与原则5.3 动画设计的基本概念与原则5.4 交互与动画设计的实战技巧与方法第六章：移动UI设计的导航设计6.1 导航在移动UI设计中的应用与重要性6.2 导航设计的类型与实战技巧6.3 导航设计的常见问题与解决方案6.4 优秀导航设计案例分析与借鉴第七章：移动UI设计的适配与响应式设计7.1 适配与响应式设计在移动UI设计中的应用与重要性7.2 屏幕尺寸与分辨率的概念与实战技巧7.3 媒体查询与CSS Grid的应用技巧7.4 优秀适配与响应式设计案例分析与借鉴第八章：设计工具的使用8.1 Sketch在移动UI设计中的应用与实战技巧8.2 Adobe XD在移动UI设计中的应用与实战技巧8.3 Figma在移动UI设计中的应用与实战技巧8.4 其他设计工具的选择与应用技巧第九章：移动UI设计的项目管理与团队协作9.1 项目管理在移动UI设计中的应用与重要性9.2 项目计划的制定与执行技巧9.3 团队协作的基本概念与实战技巧9.4 优秀团队协作与项目管理案例分析与借鉴第十章：移动UI设计的案例解析与实战训练10.1 案例解析一：某电商APP的UI设计10.2 案例解析二：某社交平台的UI设计10.3 案例解析三：某新闻阅读APP的UI设计10.4 实战训练：设计一个属于自己的移动UI项目第十一章：移动UI设计的规范与标准11.1 设计规范的概念与重要性11.2 常见的设计规范与标准解读11.3 设计规范的实战应用与技巧11.4 优秀设计规范案例分析与借鉴第十二章：用户体验与用户测试12.1 用户体验在移动UI设计中的应用与重要性12.2 用户测试的基本概念与方法12.3 用户体验设计的实战技巧与方法12.4 优秀用户体验案例分析与借鉴第十三章：移动UI设计的优化与提升13.1 性能优化在移动UI设计中的应用与重要性13.2 图像优化与加载速度的提升技巧13.3 代码优化与执行效率的提升技巧13.4 优秀性能优化案例分析与借鉴第十四章：移动UI设计的趋势与创新14.1 设计趋势在移动UI设计中的应用与重要性14.2 最新设计趋势解读与实战技巧14.3 创新设计思维的培养与实践14.4 优秀创新设计案例分析与借鉴第十五章：移动UI设计的职业规划与发展15.1 移动UI设计师的职业角色与责任15.2 职业规划的基本概念与方法15.3 行业趋势与技能提升的方向15.4 优秀设计师的成长经验分享与借鉴重点和难点解析本文教案全面介绍了移动UI设计的基本概念、设计原则、实战技巧以及优秀案例分析等内容。
移动UI设计(微课版) 教案
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的概念与重要性1.2 移动UI设计的原则与目标1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本元素2.1 图标设计2.1.1 图标的分类与特点2.1.2 图标的创作技巧与规范2.1.3 图标设计的案例分析2.2 文字设计2.2.1 文字的排版与字体选择2.2.2 文字的可读性与排印规范2.2.3 文字设计的案例分析2.3 色彩设计2.3.1 色彩的心理学与情感表达2.3.2 色彩的搭配与渐变技巧2.3.3 色彩设计的案例分析2.4 布局与界面结构2.4.1 布局的分类与原则2.4.2 界面结构的层次与导航设计2.4.3 布局与界面结构的案例分析第三章：移动UI设计的交互与动效3.1 交互设计的基本原理3.1.1 交互设计的概念与目标3.1.2 交互设计的原则与方法3.1.3 交互设计的案例分析3.2 动效设计3.2.1 动效的概念与作用3.2.2 动效的创作技巧与类型3.2.3 动效设计的案例分析第四章：移动UI设计的用户体验与研究4.1 用户体验的基本概念与要素4.1.1 用户体验的五个层次4.1.2 用户体验的设计方法与流程4.1.3 用户体验的案例分析4.2 用户研究4.2.1 用户研究的类型与方法4.2.2 用户研究的流程与技巧4.2.3 用户研究的案例分析第五章：移动UI设计的实战项目与案例分析5.1 项目一：社交媒体APP的UI设计5.1.1 项目需求与分析5.1.2 UI设计的流程与方法5.1.3 项目成果与评价5.2 项目二：在线购物APP的UI设计5.2.1 项目需求与分析5.2.2 UI设计的流程与方法5.2.3 项目成果与评价5.3 项目三：音乐播放APP的UI设计5.3.1 项目需求与分析5.3.2 UI设计的流程与方法5.3.3 项目成果与评价第六章：移动UI设计的色彩心理学与应用6.1 色彩对用户体验的影响6.2 移动UI色彩搭配技巧6.3 色彩应用于不同功能区域的策略6.4 色彩心理学的案例分析第七章：移动UI设计的图标系统与风格统一7.1 图标系统的构建与重要性7.2 图标的设计风格与分类7.3 图标系统在不同平台中的应用差异7.4 风格统一案例分析第八章：移动UI设计的字体与排版8.1 字体的选择与搭配8.2 排版原则与层次感营造8.3 文本的可读性与交互设计8.4 字体与排版案例分析第九章：移动UI设计的动效与动画9.1 动效在移动UI中的应用9.2 动画原理与类型9.3 动效设计的实现技术与工具9.4 动效与动画案例分析第十章：移动UI设计的项目管理与团队协作10.1 项目管理在UI设计中的作用10.2 UI设计项目的流程与阶段10.3 团队协作技巧与沟通策略10.4 项目管理及团队协作案例分析重点和难点解析重点一：移动UI设计的基本元素图标设计：学生需要掌握如何创作具有辨识度和美观度的图标，以及如何遵循设计规范。
《移动终端UI设计》教学教案03滑块设计
******学校教师教案（学年第学期）课程名称：移动终端UI设计授课专业：任课教师：所在系部：2019年8月任务名称 3.2 音量调节滑块设计教学目的掌握如何利用PS CC软件绘制该部件的样式。
教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。
重点难点重点：掌握基本样式种类难点：熟悉设计思路历程教学内容设计授课内容：3.2 音量调节滑块设计在很多音乐播放器，视频播放器或者游戏类界面的App应用软件中，经常会用到控制块来调节音量的大小，采用这样的方式即方便用户操作，又能够美化界面，会提升用户的操作体验。
3.2.1 设计要求设计风格：音量调节滑块设计应采用中性、平淡、简单的视觉效果。
如果颜色复杂，会另用户在操作中失去选择的方向。
填充的形状和简单的金属的形状显为易见，使用简单的视觉暗示以便于用户能轻易读懂。
3.2.2 思路剖析本章音量调节滑块设计中，主要从简单的金属调节滑块设计、金属质感调节滑块设计和两个极简音量调节滑块设计来讲述如何制作音量调节滑块设计。
在未来的章节中，会讲述如何绘制渐变样式的按钮，本着从简到难的顺序为大家讲解。
3.2.3 实现步骤课后作业同学们自行设计旋钮，将所学付诸于实践。
任务名称 3.3 极简风格滑块设计教学目的掌握如何利用PS CC软件绘制该部件的样式。
教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。
重点难点重点：掌握设计思路难点：掌握极简风格的内涵教学内容设计授课内容：3.3.1 设计要求极简风格滑块设计，就是相对于金属质感旋钮滑块设计比较简单的样式，这种风格的设计，令用户觉得没有障碍感，任何用户都可以一目了然，不必那么隆重，也不必任何复杂的效果，使其眼花缭乱。
3.3.2 思路剖析（1）简约的配色方案：（2）要学会留白：（3）滑块中一定要有一个视觉焦点：（4）越是简单越是复杂：3.3.3 实现步骤极简风格滑块设计样式一制作过程:课后作业独立完成音量操控滑块图标，最终效果图如图3-46所示。
《移动终端UI设计》教学教案06APP导航设计
******学校教师教案（学年第学期）课程名称：移动终端UI设计授课专业： __________________________ 任课教师： __________________________ 所在系部： __________________________2019年7月6.2.2思路剖析标签式导航的标签数量通常不能超过3-5个，因为我们的手指在滑动屏幕的时候，接触的面积较大，一旦超过5个标签数量，每个标签所占面积太小，会点击错误。
使选择变得困难，甚至导致点击失误。
通常在标签式导航中是以图标、文字加色块的形式出现的。
为什么要用图标、文字和色块的形式？因为文字的指向性要比图标的指向性强。
其次是人类的视觉化特征，对图形比文字要敏感的多，所以将三者要素结合在一起，是为了让用户以最快的时间理解标签的含义。
标签式导航模块之间的关系，•般是由主到次，凡是以排列性质出现，都必须遵循主次的顺序，有顺序，就必须有优先选项，也就是将最核心的功能放置在最前面。
标签中对应的标签选项需要层级的排序。
将设置好的文字图层和图层组调整好位置，得到如图所示的“标签式导航设计（2）”图片样式。
B O T ∏ £丁&明覆100W；•/ + 3・—g¼■tie■∙≡⅛■■包■赠皂总结课程内容，重申重点、难点任务名称 6.3宫格式导航设计教学目的使同学们能够利用Photoshop CC绘制该样式部件。
教学方法讲授法、案例分析法教学手段多媒体教学、手机客户端。
重点难点重点：掌握宫格式导航的特点难点：熟悉该导航方式的绘制难点6.2.3 实现步PXS课后作业同学们设计自己风格的标签导航。
授课内容：6. 3.1设计要求宫格式导航设计的设计方式是以九宫格或多宫格的样式展现在 用户的面前，以缩略图或者以图标的样式呈现在表格之中。
这种宫 格式导航是将最主要的入口全部聚合在主页面，让用户做出最直接 的选择。
这样的组合方式不能第一时间让用户看到内容，所以会给 用户选择上带来压力，采用宫格式导航的应用已经越来越少，往往 用在二级页面作为内容列表（内容列表基本以缩略图的形式呈现）， 或是作为一系列工具入口的聚合。
移动UI设计(微课版) 教案
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 课程目标了解移动UI设计的概念与重要性掌握移动UI设计的基本原则与流程1.2 教学内容移动UI设计的定义与意义移动UI设计与用户体验的关系移动UI设计的基本原则移动UI设计的流程与步骤1.3 教学方法讲授与案例分析相结合互动讨论与学生展示1.4 课后作业第二章：移动UI设计的色彩与布局2.1 课程目标掌握移动UI设计中色彩的应用原则学习布局设计的方法与技巧2.2 教学内容移动UI设计中色彩的应用原则色彩搭配的技巧与实例分析布局设计的方法与技巧布局设计的实例分析2.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论2.4 课后作业学生根据所学知识，设计一款移动应用的界面布局与色彩搭配第三章：移动UI设计的图标与字体3.1 课程目标学习图标设计的方法与技巧掌握字体设计的原则与方法3.2 教学内容图标设计的方法与技巧图标设计的实例分析字体设计的原则与方法字体设计的实例分析3.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论3.4 课后作业学生根据所学知识，设计一款移动应用的图标与字体第四章：移动UI设计的交互与动效4.1 课程目标了解交互设计的基本概念掌握动效设计的原理与技巧4.2 教学内容交互设计的基本概念与原则交互设计的实例分析动效设计的原理与技巧动效设计的实例分析4.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论4.4 课后作业学生根据所学知识，设计一款移动应用的交互与动效第五章：移动UI设计的实战项目5.1 课程目标学习移动UI设计的实战项目流程掌握项目沟通与团队协作的技巧5.2 教学内容实战项目的流程与步骤项目沟通与团队协作的技巧项目案例分析与讨论5.3 教学方法实战项目操作与讲解相结合学生实践操作与讨论5.4 课后作业学生根据所学知识，参与一个移动UI设计的实战项目第六章：移动UI设计的趋势与创新6.1 课程目标了解当前移动UI设计的趋势学习创新设计的方法与思维6.2 教学内容当前移动UI设计的趋势分析创新设计的方法与思维创新设计的实例分析6.3 教学方法市场调研与分析创新设计练习与讨论6.4 课后作业第七章：移动UI设计的用户测试与反馈7.1 课程目标掌握用户测试的方法与技巧学习如何收集和分析用户反馈7.2 教学内容用户测试的方法与技巧用户测试的实例分析用户反馈的收集与分析方法7.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论7.4 课后作业学生设计一个简单的UI界面，并进行用户测试，记录测试过程和用户反馈。
《移动终端UI设计》教学教案04按钮设计
****** 学柠教师教案（学年第学期）课程名称：移动端UI设计授课专业： __________________________ 任课教师： __________________________ 所在系部： __________________________2019年8月4.2色块按钮设计掌握如何利用PS CC 软件绘制该部件的样式。
讲授法、案例分析法多媒体教学、手机客户端。
重点：掌握色块按钮的设计方法难点：透彻色块按钮的设计思路授课内容:4. 2.1设计要求 1 .大色块样式 2 .幽灵式按钮 3 .投影式按钮 4 .渐变色块按钮 5 .执教按钮和圆角按钮 4. 2.2思路剖析在设计按钮的时候，1 .要注意颜色的搭配，功能越强，颜色的突出会对用户更有帮 助，相反比较容易出现错误的操作。
2 .在做色块按钮设计的时候，也要注意层级上的比重，颜色太 鲜明对比，会给人以跳跃的视觉体验，从而会产生一些操作上的困 扰。
3.同一应用功能上，同级别的按钮，风格上，角度上，配色上, 和圆角的弧度，都要做到统一，反而会使页面显得混乱，毫无一致 性。
4,注意按钮的大小，过小会显得没有呼吸感，要注意留白。
5 .一般用户会使用右手，因为大部分人的右手比较灵活，有用 右手操作的习惯，所以在设计的时候，我们要把相对于重要的操作 放置在界面的右侧，这样用户使用更为便捷。
6 .注意不要太过花哨，在扁平化的软件中，讲究的就是操作效 率高，易于表达，如果按钮过于花哨，从而会增加用户的阅读难度。
4. 2. 3实现步骤 （最终效果图）任务名称 教学目的教学方法 教学手段重点难点 教学 内容 设计PS 文件(D 编箱§ E®U) BSS(L)文字①i≈¾S)鹿馍①3D(D) β≡(V)窗口侬科助回171.6% 文档:338.7K/13.4M总结课程内容，重申重点、难点课后作业完善课堂任务总结课程内容，重申重点、难点课后作业完善课堂任务任务名称 4.4水晶按钮设计教学目的 掌握如何利用PS CC 软件绘制该部件的样式。
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案章节一：Photoshop CC基础知识教学目标：1. 了解Photoshop CC的基本界面和功能。
2. 掌握Photoshop CC的基本操作，如新建、打开、保存文件等。
3. 学习使用Photoshop CC的工具箱，包括选择工具、修饰工具、绘画工具等。
教学内容：1. Photoshop CC的基本界面介绍。
2. 文件的创建、打开和保存方法。
3. 工具箱中各种工具的功能和使用方法。
教学步骤：1. 导入实例，展示Photoshop CC的基本界面。
2. 讲解文件的创建、打开和保存方法。
3. 演示并讲解工具箱中各种工具的功能和使用方法。
4. 学生跟随老师操作，进行实际操作练习。
教学评价：1. 学生能熟练操作Photoshop CC，进行文件的创建、打开和保存。
2. 学生能理解和掌握工具箱中各种工具的功能和使用方法。
章节二：移动UI设计基本原则教学目标：1. 了解移动UI设计的基本原则。
2. 学习如何设计简洁、直观、易用的移动界面。
教学内容：1. 移动UI设计的基本原则，如一致性、简洁性、易用性等。
2. 设计简洁、直观、易用的移动界面的方法。
教学步骤：1. 讲解移动UI设计的基本原则。
2. 分析实例，展示如何设计简洁、直观、易用的移动界面。
3. 学生跟随老师设计一个简单的移动界面，并进行实际操作练习。
教学评价：1. 学生能理解移动UI设计的基本原则。
2. 学生能运用所学方法，设计简洁、直观、易用的移动界面。
章节三：Photoshop CC基本绘图技巧教学目标：1. 掌握Photoshop CC的基本绘图技巧，如线条、形状、颜色等。
2. 学习使用Photoshop CC的图层功能，进行绘制和编辑。
教学内容：1. Photoshop CC的基本绘图技巧。
2. 图层的概念和功能，如新建图层、删除图层、图层顺序调整等。
教学步骤：1. 讲解Photoshop CC的基本绘图技巧。
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案1.1 课程背景1.1.1 随着移动互联网的快速发展，移动应用界面（UI）设计成为了设计师们关注的焦点。
1.1.2 Photoshop CC作为一款功能强大的图像处理软件，在移动UI设计领域具有广泛的应用。
1.1.3 本教程通过实例讲解Photoshop CC在移动UI设计方面的应用，帮助学员掌握相关技巧。
二、知识点讲解2.1 Photoshop CC基本操作2.1.1 界面布局：介绍Photoshop CC的工作界面及各个功能区的用途。
2.1.2 文件操作：讲解新建、打开、保存和关闭文件的方法。
2.1.3 图像编辑：学习裁剪、缩放、旋转和翻转图像的操作。
三、教学内容3.1 实例1：制作登录界面3.1.1 设计思路：讲解登录界面的设计流程，包括布局、颜色搭配和字体选择等。
3.1.2 制作步骤：使用Photoshop CC绘制登录界面的背景、输入框、按钮等元素。
3.1.3 技巧点拨：介绍如何调整图层顺序、使用图层样式和蒙版等技巧。
四、教学目标4.1 掌握Photoshop CC的基本操作。
4.2 学会使用Photoshop CC制作移动UI设计中的常见元素。
4.3 能够独立设计并制作出符合设计思路的移动应用界面。
五、教学难点与重点5.1 难点：Photoshop CC的高级功能，如图层样式、蒙版和调整图层等在实际操作中的应用。
5.2 重点：实例教学中涉及到的具体制作步骤和技巧，以及如何将设计思路转化为实际操作。
（由于篇幅原因，仅展示了前五个章节的结构，您可以根据这个结构继续编写后续章节。
）教案六、教具与学具准备6.1 教学用具6.1.1 计算机及投影设备6.1.2 Photoshop CC软件6.1.3 教学PPT6.1.4 教学视频（微课）七、教学过程7.1 导入新课7.1.1 展示实例效果，引发学生兴趣7.1.2 介绍本节课的教学内容和目标7.1.3 简要说明实例制作过程7.1.4 提出问题，引导学生思考7.2 知识讲解7.2.1 讲解Photoshop CC基本操作7.2.1.1 界面布局及功能区用途7.2.1.2 文件操作方法7.2.1.3 图像编辑技巧7.2.2 知识点拓展7.2.2.1 介绍图层概念及其用途7.2.2.2 讲解图层样式、蒙版和调整图层的使用方法7.2.2.3 分析实例中应用的知识点7.3 实践操作7.3.1 学生自主尝试制作实例7.3.1.1 按照设计思路绘制界面元素7.3.1.2 调整图层顺序、应用图层样式等技巧7.3.1.3 学生相互交流、讨论遇到的问题和解决方法7.3.2 教师辅导7.3.2.1 针对学生遇到的问题提供指导7.3.2.2 演示制作过程，讲解相关技巧7.3.2.3 鼓励学生提出问题和意见，共同探讨八、板书设计8.1 教学重点板书8.1.1 Photoshop CC基本操作8.1.2 实例制作步骤及技巧8.1.3 设计思路与实际操作的转化方法8.2 教学难点板书8.2.1 图层样式、蒙版和调整图层的使用8.2.2 实例中涉及的高级功能8.2.3 针对性的问题解决方法九、作业设计9.1 课后练习9.1.1 制作一个简单的移动应用界面9.1.2 要求运用所学知识和技巧，体现个人设计风格9.1.3 提交作业时附上设计思路说明9.2 拓展作业9.2.1 分析并模仿一个喜欢的移动应用界面9.2.2 学会从实际应用中吸取经验，提高设计水平9.2.3 撰写课后心得体会，分享学习经验十、课后反思及拓展延伸10.1 教学效果反思10.1.1 学生对知识的掌握程度10.1.2 教学过程中存在的问题10.1.3 针对性地调整教学方法，提高教学效果10.2 学生学习反馈10.2.1 收集学生作业，评估学习成果10.2.2 听取学生意见，了解学习需求10.2.3 鼓励学生积极参与课堂讨论，提高课堂氛围10.3 拓展延伸10.3.1 介绍相关书籍、教程、在线课程等学习资源10.3.2 推荐参加设计比赛、研讨会等活动，拓宽视野10.3.3 鼓励学生自主探究，培养创新意识重点和难点解析一、重点环节1.1 知识点讲解在教学过程中，Photoshop CC基本操作的讲解是重点环节。
《移动UI设计案例教程》配套教案
1.3.1图像类型........................................................................ 6 1.3.2图像格式........................................................................ 6
（4）答疑互动：为学生提供答疑环节，解决学生在学习和实践中遇到的问题，帮助学生更好地理解和掌握UI设计知识。
教学内容
讨论问题：1.什么是UI设计？
2.为什么要进行UI设计？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
1.1 UI设计介绍
1.1.1 UI设计的概念
1.1.2 UI设计原则
1.明确用户群体
2.教学手段：
（1）讲授：通过讲课形式介绍UI设计的概念、原则、分类、单位、流程、图像和风格等知识点，确保学生对基础知识有全面了解。
（2）示例演示：使用实际案例演示UI设计流程和图像的处理过程，让学生能够更好地理解实际应用。
（3）小组讨论：组织学生进行小组讨论，共同探讨不同UI设计风格的优缺点以及适用场景，促进学生思维的广度和深度。
练习题
1.UI设计流程包括哪些环节？
2.不同图像格式各自的特点有哪些？
单元2 UI设计要素
授课内容
UI设计要素
课时
4
内容介绍
通过元素的不同组合和排列给用户带来不同的视觉效果，促使画面新颖、有张力地呈现是一名UI设计师的基本功。在进行UI设计时，需要UI设计师对界面的布局和色彩进行合理搭配。本单元将对界面布局和色彩搭配进行详细讲解。
数字媒体艺术设计《移动端UI设计教案二》
《移动端UI设计》任务二教案所属项目：移动端UI设计概述学时：4一、教学目标了解课程的基本情况，对移动端UI设计形式的整体认知，了解APP开发的时代背景与市场需求，全流程及各个环节的相关工作要点。
掌握移动端UI设计项目前期策划及任务分析的工作内容，深刻认识到前期策划工作的重要性，体验具体的应用程序产品形成直观感受。
（一）知识目标1 了解UI设计的岗位设置及对应工作职责2 熟悉APP开发的基本流程3 理解移动端UI交互设计概念（二）素质目标1 熟悉数字经济时代移动终端的广泛运用场景2 培养学生细心观察、发现问题、勇于创新的专业素养二、课时难点熟悉移动端UI特征与设计要点，针对项目背景资料的收集与分析，总结概括出一款APP的核心功能与理念，依次作为创意出发点，拟定选题报告。
客观理性分析APP体验报告，从UXPA获奖作品抽取关键要素引导设计选题。
三、课时重点交互设计概念与发展历程，结合当前数字经济发展趋势融入课程思政要点，培养学生的文化自信与家国情怀。
四、教学方法本章节主要以老师讲授相关理论知识，进行具体案例分析，结合UXPA获奖作品进行有针对性的讲解；然后教师提出问题，同学讨论并解决问题为主，最后由老师针对性的总结来完成教学。
1项目教学法。
将企业移动端UI设计中的优秀设计项目引入课程体系，以项目为载体，努力实现课程内容与职业标准对接，教学过程与生产过程对接，培养学生的专业技能和职业素养。
2任务驱动教学法。
以学生为中心，做中学，做中教。
引入递进型项目任务，循序渐进提升并拓展学生的专业知识与专业技能。
3混合教学法。
采用线上线下相结合的混合教学模式，课前教师主导教学准备、学生自主学习与发现难点，课中师生共同聚焦难点组成专。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
讨论问题：1.美妆电商App的工程背景有哪些？
2.美食外卖App的工程背景有哪些？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。
8.1设计与制作美妆电商App工程
1.1.1分析美妆电商App的工程背景
2.1.2制作美妆电商App界面的草图原型
3.1.3构建美妆电商App的颜色系统
8.1.1设计与制作美妆电商App的图标组
□掌握美妆电商App的界面标注；
0掌握美妆电商App的切图资源：
0分析美食外卖App的工程背景；
0掌握制作美食外卖App的草图原型；
□掌握创立美食外卖App的颜色系统；
□掌握设计与制作美食外卖App的图标组；
0掌握美食外卖App的UI设计；
0掌握美食外卖App的交互设计；
0掌握美食外卖App的界面标注；
1.3.1需求分析
1.3.2原型设计
1.3.3UI设计
1.4移动UI设计原那么
1.4.1风格一致性原那么
1.4.2元素准确性原那么
1.4.3界面布局合理化原那么
5. 6. 3设置App界面中的内容间距
5. 6. 4操作案例一设计与制作iOS App侧面菜单界面5. 6.5移动App界面的布局方式
1.了解移动UI的基本元素；
教学重点
□掌握移动UI交互的类型。
教学难点
0掌握移动UI中的作用。
教学设计
1、教学思路：介绍交互动效的概念、交互设计软件、交互设计的基本流程、移动UI交互的类型、动效在UI中的作用和交互设计需要遵循的习惯等相关内容，使学员 能够理解并掌握移动App交互设计的相关知识。
2、教学手段：通过讲解操作案例的方式，使学员熟知移动App交互类型，并了解制作 移动App交互的绘制软件和表现手法。
2.了解常见的UI设计软件；
3.掌握移动UI的设计基础；
4.掌握设计与制作iOS App启动界面；
5.掌握设计与制作Android系统App界面；
6.掌握移动UI的字体规范；
小马口
7.掌握设计与制作iOS App登录界面；
8.掌握设计与制作Android系统App分类界面；
9.了解移动UI图片尺寸规范；
2.了解移动UI与PC端UI的不同点；
3.了解移动UI的系统分类以及各类型的特点；
4.理解移动UI设计流程；
5.了解需求分析阶段的主要步骤；
6.理解移动UI设计原那么以及各原那么的特点；
7.理解移动UI设计流程的职位划分。
课时内容
移动U1筹划与原型设计
授课时间
分钟
课时
教学目标
0了解移动UI目标用户；
7.2.2Adobe XD
6.3交互设计的基本流程
6. 3.1提出交互设计创意想法
7.3.2实现创意想法
6.4移动UI交互的类型
6.4.11转场过渡
6.4.2操作案例一设计与制作App转场交互
6.4.3层级展示
6.4.44.4空间扩展
6.4.5关注焦点
6.4.6内容呈现
6.4.77操作案例一设计与制作相册App内容呈现交互
教学目标
0了解标注的重要性；
H了解常见的标注软件；
0掌握标注移动UI；
0了解移动UI标注规范；
0掌握输出与适配iOS UI设计；
0掌握输出与适配Android系统UI设计。
教学重点
□掌握标注移动UI。
教学难点
0掌握输出与适配iOS UI设计；
0掌握输出与适配Android系统UI设计；
教学设计
1、教学思路：介绍标注的重要性、常见的标注软件、标注移动UI、移动UI标注规范、 输出与适配iOS UI设计和输出与适配Android系统UI设计，使学员能够了解并掌 握适配与输出移动UI设计的使用方法和技巧。
11.掌握导出Android系统App切图资源。
课时内容
设计与制作移动App工程
授课时间
分钟
课时
教学目标
0分析美妆电商App的工程背景：
□掌握制作美妆电商App界面的草图原型；
0掌握构建美妆电商App的颜色系统；
□掌握设计与制作美妆电商App的图标组；
0掌握美妆电商App的UI设计；
0掌握美妆电商App的交互设计；
3、教学资料及要求：准备一些视频和案例素材，以便在讲解过程中使用。
教学内容
讨论问题：1.移动II交互的类型有哪些？
2.动效在U1中作用有哪些？
内容大纲：具体可结合本章的PPT课件进行配合讲解。
6.1了解UI交互设计
6.1.1交互动效的概念
6.1.2基础动效类型
6.2常见的交互设计软件
6.2.1Adobe Affter Effects
1.1了解移动UI设计
1. 1.1初始移动UI设计
2.1.2移动UI设计的概念
1. 1.3移动UI与PC端UI
1.1.4将PC端LI重置为移动UI
1.2移动UI的系统分类
1.3.1iOS
1. 2.2Android系统
1. 2.3HarmonyOS
1. 4Wear OS和watchOS
1.3移动UI设计流程
7.5输出与适配iOS UI设计
7. 5.1向上适配与向下适配
7. 5.2适配切片命名规范
7. 5.3操作案例一导出iOS App界面切图资源
7.6输出与适配Android系统UI设计
7. 6.1Android系统中的“点9”切图
输出与适配的一稿两用
7. 6.3操作案例一导出Android系统App切图资源
2.4.3 XMind
2. 4.4操作案例一下载并安装XVind
2.5绘制移动UI思维导图
2.5.1思维导图的操作流程
3.5.2思维导图的基本类型
4.5.3操作案例一绘制美妆App的首页思维导图
2.6绘制移动UI草图
2. 6.1了解草图的概念
2. 6.2认识草图的特点
草图功能的表达
2. 6.4常见的草图形式
8.2.2Assistor PS
7.3标注移动UI
7. 3.1移动App标注的内容
7. 3.2操作案例一标注iOS App界面
7. 3.3标注的声明文档
7.3.4操作案例一标注Android系统App界面
7.4移动UI标注规范
7.4.1位置与尺寸的标注规范
7.4.2色彩和文字的标注规范
7.4.3切图资源的尺寸必须是偶数
8.2.4
设计与制作美食外卖App的图标组
8. 2.5
完成美食外卖App的UI设计
完成美食外卖App的交互设计
8. 2.7
完成美食外卖App的界面标注
8. 2.8
导出美食外卖App的切图资源
1.分析美妆电商App的工程背景；
2.掌握制作美妆电商App界面的草图原型；
3.掌握构建美妆电商App的颜色系统；
13.掌握美食外卖App的UI设计；
14.掌握美食外卖App的交互设计；
15.掌握美食外卖App的界面标注；
16.掌握美食外卖App的切图资源。
系统响应时间原那么
1.5移动UI设计流程的职位划分
1.5.1产品经理
1.5.2工程经理
1.5.3UI设计时
1.5.4开发工程师
1.6本章小结
小结
1.了解移动UI设计的概念；
1.7了解原型设计
2.7.1原型设计的概念
3.7.2原型设计的参与者
1.8绘制原型的常用软件
2.8.1Axure RP
3.8.2Adobe XD
4.8.3操作案例一安装Axure RP10
2.9绘制移动UI原型图
2. 9.1原型的表现手法
2. 9.2原型的重要性
操作案例一绘制美妆App分类界面原型
小结
教学设计
1、教学思路：通过对移动UI设计相关基础知识的讲解了解移动UI设计；
2、教学手段：针对移动UI与PC端UI的区别、移动UI的系统分类、移动UI设计流 程、移动II设计原那么和移动UI设计流程的职位划分进行讲解，
教学内容
讨论问题：1、移动UI的系统分类有哪些？
2、移动UI设计原那么有哪些？
内容大纲：具体可结合本章的PPT课件进行配合讲解。
□了解移动UI筹划书；
0了解思维导图；
□了解思维导图的常用软件；
0掌握绘制移动UI思维导图；
0掌握绘制移动UI草图；
□了解原型设计；
0了解绘制原型的常用软件；
0掌握绘制移动UI原型图。
教学重点
0掌握绘制移动UI思维导图。
教学难点
0掌握绘制移动UI草图；
□掌握绘制移动UI原型图。
教学设计
1、教学思路：通过对移动UI筹划与原型设计相关内容的讲解，使学员能够掌握移动UI筹划与原型设计的方法及形式。
10.掌握移动App内容布局：
11.掌握设计与制作iOS App首页界面；
12.掌握设计与制作iOS App侧面菜单界面。
课时内容
移动App交互设计
授课时间
分钟
课时
教学目标
0了解交互动效的概念：
0了解常见的交互设计软件；
0了解交互设计的基本流程；
0掌握移动UI交互的类型；
0掌握动效在UI中的作用；
0了解交互设计需要遵循的习惯。
2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。
3、教学资料及要求：制作简单易懂的操作案例，通过由浅入深的方式，来加深学员对 相关理论知识的理解。
教学内容
讨论问题：1.思维导图有哪些特点？
2.草图功能的表达有哪些？
3.用户的体验方式和用户的体验要素有哪些？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。