移动UI设计-课程标准(教学大纲)及-教案全套-

《移动UI设计（微课版）》课程标准XXXX学校二〇二二年月

一、课程基本信息【课程名称】移动UI设计（微课版）【适用专业】数字媒体与艺术设计专业【开课时间】第X学期【课程类型】专业基础课/专业核心课/专业拓展课等二、课程性质与任务课程性质：《移动UI设计（微课版）》是数字媒体与艺术设计专业的一门核心专业课程，依据职业能力的要求，主要对移动UI设计、iOS和Android系统移动设备界面的结构及设计规范等相关知识进行梳理和讲解，主要介绍了移动UI设计基础知识、移动UI的策划与原型设计方法、移动UI的色彩搭配方法、移动图标的设计方法、移动App的UI设计方法、移动App的交互设计、适配与输出移动UI设计的方法和设计与制作移动App项目的相关知识等八部分内容。随着科技的发展，手机与人们生活的联系日益密切。手机中的软件系统是用户直接操作的对象，它以精美的视觉效果和便捷的操作为用户所青睐，进而促进了移动UI设计行业的兴盛。本课程使学生进一步了解移动UI设计的相关知识，在项目的实践过程中激发学生的创新意识，促使学生加深掌握移动UI设计的基本知识，使学生实现从学校到社会的平滑过渡。课程任务：通过学习移动UI设计等相关理论知识，不仅促使学生具备移动UI设计相关的理论知识和行业素养，同时也有助于培养学生发现问题、分析问题、解决问题的能力，使学生能够具有相对良好的沟通、交流和协调能力，培养良好的职业道德和行为素养，为后续的课程学习和职业发展打下坚实的基础。 三、职业岗位标准1．典型职业活动移动UI设计师等。2．典型职业岗位标准（或工作内容、职责）、技术等级标准职业功能移动UI设计师工作内容负责软件界面的美术设计、创意工作和制作工作；根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；对页面进行优化，使用户操作更趋于人性化；维护现有的应用产品。相关知识艺术设计，多媒体设计，动画设计，工业设计等相关设计艺术专业；可以独立设计手机界面里的所有画面元素，能够原创图标及制作动画效果；熟练Photoshop，ai，Flash，或者其他设计软件；有扎实的美术功底和审美能力，富有创新精神，有良好的平面设计和造型设计能力；有较强的学习能力，能不断的跟踪学习，新的设计理念和流行趋势；对移动互联网及移动终端手机UI软件行业发展有深刻的理解。3．主要职业能力培养学生严谨认真的工作态度和终身学习的习惯；培养学生在实际工作中遵守相关规范和要求；丰富学生的知识结构，提升专业技能；培养良好的人际沟通能力和团队互助的精神；培养学生自我学习、勇于创新、积极承担不同角色的能力。四、课程教学目标1．课程总体目标本课程根据数字媒体与艺术设计专业学生将来工作过程中所必须具备的综合职业能力出发，应用先进教学方法和教学理论，优化和整合教学内容，将基于移动UI设计与操作案例相结合，构建一种创新型的《移动UI设计》教学。本课程对移动UI设计、iOS和Android系统移动设备界面的结构及设计规范等相关知识进行了梳理和讲解，主要通过案例操作的形式，希望通过分析案例操作的过程，使学生能够逐步培养自我思考、自我分析的能力，同时提升专业技能。从而促进学生的综合能力的全面提升，充分满足社会对于适应型人才的需求。2．职业能力目标：掌握移动UI设计、移动UI的系统分类、移动UI设计流程、移动UI设计原则和移动UI设计流程的职位划分。掌握移动UI目标用户、移动UI策划书、思维导图、绘制思维导图的常用软件、绘制移动UI思维导图、绘制UI草图、绘制原型的常用软件和绘制移动UI原型图。掌握色彩搭配方法与配色方法、构建移动UI颜色系统和移动UI色彩搭配的注意事项。掌握图标设计常用软件、图标栅格系统、图标设计形式、App图标的分类、图标尺寸和图标组设计规范。掌握移动UI的基本元素、常见的UI设计软件、移动UI的设计基础、移动UI的字体规范、移动UI图片尺寸规范和移动App内容布局。掌握常见的交互设计软件、交互设计的基本流程、移动UI交互的类型、动效在UI中的作用和交互设计需要遵循的习惯。掌握标注的重要性、常见的标注软件、标注移动UI、移动UI标注规范、输出与适配iOSUI设计和输出与适配Android系统UI设计。掌握美妆电商App项目和美食外卖App项目的制作。五、课程内容根据移动UI设计相关工作内容，总结出适应学生特点的，并与数字媒体与艺术设计工作相关的基于移动UI设计的知识，通过学习、分析操作案例。本书围绕移动UI设计，向读者介绍了相关的基本知识和操作案例，构建成体系的运营过程，为实际操作打下坚实的基础。本课程的学习内容分解如下：课程内容与教学要求序号名称主要内容教学要求建议学时第1章关于移动UI设计了解移动UI设计移动UI的系统分类移动UI设计流程移动UI设计原则移动UI设计流程的职位划分讲解移动UI设计中的基础知识，帮助学生快速了解移动UI设计的基础知识第2章移动UI策划与原型设计确定移动UI目标用户完成移动UI策划书了解思维导图绘制思维导图的常用软件绘制移动UI思维导图绘制移动UI草图了解原型设计绘制原型的常用软件绘制移动UI原型图讲解如何将客户提出的抽象化描述转化为具象化的移动UI策划和原型设计，转化过程中使用的方法及常用软件，帮助学生更好地完成每一款移动UI产品的策划与原型设计第3章优秀的移动UI色彩搭配认识色彩和谐、统一的色彩搭配方法突出、对比的配色方法构建移动UI颜色系统移动UI色彩搭配的注意事项讲解如何为一款移动App项目构建符合设计主题的颜色系统，帮助学生掌握如何让移动UI的外观变得更加出彩，从而可以吸引更多的用户第4章出色的移动图标设计初始App图标图标设计常用软件熟悉图标栅格系统图标设计形式App图标的分类图标尺寸图标组设计规范讲解图标相关的概念、设计形式和设计尺寸及设计制作方法，是学生进入UI设计行业的必备条件第5章移动App的UI设计移动UI的基本元素常见的UI设计软件移动UI的设计基础移动UI的字体规范移动UI图片尺寸规范移动App内容布局讲解有关App界面的设计规范和设计技巧，使学生掌握App界面的设计规范和App界面的设计方法第6章移动App交互设计了解UI交互设计常见的交互设计软件交互设计的基本流程移动UI交互的类型动效在UI中的作用交互设计需要遵循的习惯讲解有关移动App交互设计的相关基础知识，使学生掌握移动App交互类型，并了解制作移动App交互的绘制软件和表现方法第7章适配与输出移动UI设计标注的重要性常见的标注软件标注移动UI移动UI标注规范输出与适配iOSUI设计输出与适配Android系统UI设计讲解标注的重要性、常见的标注软件、标注移动UI和移动UI标注规范及输出UI切片资源等内容，使学生能够理解标注移动UI和输出切片资源的作用与条件，从而完成标注和导出移动AppUI的操作第8章设计与制作移动App项目设计与制作美妆电商App项目设计与制作美食外卖App项目讲解设计与制作两个移动UI项目，帮助学生巩固前面所学的知识，同时加深学生对移动UI设计规范的理解学时合计：学时六、教学实施建议1.教学建议：采用“理论+案例”的教学法，通过案例分析加强知识理解，将所学知识与操作案例相结合，帮助学生准确理解与使用移动UI设计的相关知识，并领会移动UI设计的内在实质。充分利用挂图、投影和多媒体等教学手段。2.教学评价建议：在本课程实施过程中，突出评价的教育功能，注重过程评价与结果评价并重、定性评价与定量评价相结合，形成教师和学生共同参与的多元评价主体，构建评价体系。3.教材编写与选用建议：教材编写要体现课程的特色与设计思想，教材内容体现先进性、实用性，操作案例的选取要科学，采用全流程设计的方式，由浅入深地讲解初学者需要掌握的基础知识和操作技巧，全面解析各种元素的具体绘制方法，并在知识点后衔接相关案例，使学生能够轻松理解知识点。教材力求文字标准规范、正确、科学，配备适量的直观图片和视频影像资料。4.实验实训设备配置建议：充分利用挂图、投影和多媒体等教学手段，采用理论知识与操作案例分析相结合的教学模式，帮助学生准确理解相关知识。5.课程资源开发与利用建议：开发相关辅导用书、教师指导用书、网络资源，要注重仿真软件的应用及开发。《移动UI设计（微课版）》配套教学教案课时内容关于移动UI设计授课时间分钟课时教学目标了解移动UI设计；移动UI的系统分类；移动UI设计流程；移动UI设计原则；移动UI设计流程的职位划分。教学重点掌握移动UI设计原则；掌握移动UI设计流程的职位划分。教学难点掌握移动UI设计流程。教学设计教学思路：通过对移动UI设计相关基础知识的讲解了解移动UI设计；教学手段：针对移动UI与PC端UI的区别、移动UI的系统分类、移动UI设计流程、移动UI设计原则和移动UI设计流程的职位划分进行讲解。教学内容讨论问题：1、移动UI的系统分类有哪些？2、移动UI设计原则有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1 了解移动UI设计1.1.1 初始移动UI设计1.1.2 移动UI设计的概念1.1.3 移动UI与PC端UI1.1.4 将PC端UI重置为移动UI1.2 移动UI的系统分类1.2.1 iOS1.2.2Android系统1.2.3 HarmonyOS1.2.4 WearOS和watchOS1.3 移动UI设计流程1.3.1 需求分析1.3.2 原型设计1.3.3 UI设计1.4 移动UI设计原则1.4.1 风格一致性原则1.4.2 元素准确性原则1.4.3 界面布局合理化原则1.4.4 系统响应时间原则1.5 移动UI设计流程的职位划分1.5.1 产品经理1.5.2 项目经理1.5.3 UI设计时1.5.4 开发工程师1.6 本章小结小结了解移动UI设计的概念；了解移动UI与PC端UI的不同点；了解移动UI的系统分类以及各类型的特点；理解移动UI设计流程；了解需求分析阶段的主要步骤；理解移动UI设计原则以及各原则的特点；理解移动UI设计流程的职位划分。

课时内容移动UI策划与原型设计授课时间分钟课时教学目标了解移动UI目标用户；了解移动UI策划书；了解思维导图；了解思维导图的常用软件；掌握绘制移动UI思维导图；掌握绘制移动UI草图；了解原型设计；了解绘制原型的常用软件；掌握绘制移动UI原型图。教学重点掌握绘制移动UI思维导图。教学难点掌握绘制移动UI草图；掌握绘制移动UI原型图。教学设计教学思路：通过对移动UI策划与原型设计相关内容的讲解，使学员能够掌握移动UI策划与原型设计的方法及形式。教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。教学资料及要求：制作简单易懂的操作案例，通过由浅入深的方式，来加深学员对相关理论知识的理解。教学内容讨论问题：1.思维导图有哪些特点？2.草图功能的体现有哪些？3.用户的体验方式和用户的体验要素有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。2.1 确定移动UI目标用户2.1.1 分析移动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 XMind2.4.4 操作案例—下载并安装XMind2.5 绘制移动UI思维导图2.5.1 思维导图的操作流程2.5.2 思维导图的基本类型2.5.3 操作案例—绘制美妆App的首页思维导图2.6绘制移动UI草图2.6.1 了解草图的概念2.6.2 认识草图的特点2.6.3 草图功能的体现2.6.4常见的草图形式2.7 了解原型设计2.7.1 原型设计的概念2.7.2 原型设计的参与者2.8 绘制原型的常用软件2.8.1 AxureRP2.8.2 AdobeXD2.8.3 操作案例—安装AxureRP102.9 绘制移动UI原型图2.9.1 原型的表现手法2.9.2 原型的重要性2.9.3 操作案例—绘制美妆App分类界面原型小结了解移动UI项目背景；掌握用户画像分析法；了解移动UI策划书；了解思维导图；了解思维导图的常用软件；掌握下载并安装XMind；掌握绘制美妆App的首页思维导图；掌握绘制移动UI草图；了解原型设计；掌握安装AxureRP10；掌握绘制美妆App首页草图；掌握绘制App分类界面原型。

课时内容优秀的移动UI色彩搭配授课时间分钟课时教学目标认识色彩；掌握和谐统一的色彩搭配方法；掌握突出对比的配色方法；掌握构建移动UI颜色系统；掌握移动UI色彩搭配的注意事项。教学重点þ掌握和谐统一的色彩搭配方法；þ掌握突出对比的配色方法。教学难点掌握构建移动UI颜色系统；掌握移动UI色彩搭配的注意事项。教学设计教学思路：通过对移动UI色彩搭配相关知识的讲解，使学员能够理解并掌握移动UI色彩搭配的方法及和技巧。教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。教学资料及要求：可以准备一些经典色彩搭配的海报，分析案例的制作方法，通过观看海报色彩与分析案例的操作方法，来加深学员对相关理论知识的理解。教学内容讨论问题：1.色彩三属性都有哪些？2.构建移动UI颜色系统的基本流程有哪些？3.移动UI色彩搭配的注意事项有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1 认识色彩3.1.1 色彩基础3.1.2 色彩三属性3.2 和谐、统一的色彩搭配方法3.2.1 同色系配色方法3.2.2 邻近色配色方法3.2.3 类似色配色方法3.2.4 同色调配色方法3.2.5 类似色配色方法3.3 突出、对比的配色方法3.3.1 中差色配色方法3.3.2 对比色配色方法3.3.3 互补色配色方法3.3.4 对比色调配色方法3.4 构建移动UI颜色系统3.4.1 确定风格3.4.2 确定主色3.4.3 确定辅色3.4.4 操作案例—构建美妆App颜色系统3.4.5 调整配色3.5 移动UI色彩搭配的注意事项3.5.1 切记将精致、美观放在第一位3.5.2 配色方案要符合用户的心理印象3.5.3操作案例—美妆App首页界面配色设计3.5.4 App界面内容必须便于阅读3.5.5 保守地使用色彩3.5.6规避杂乱的配色方案3.5.7操作案例—美妆App分类界面配色设计小结认识色彩；掌握同色系配色方法；掌握邻近色配色方法；掌握类似色配色方法；掌握同色调配色方法；掌握类似色调配色方法；掌握中差色配色方法；掌握对比色配色方法；掌握互补色配色方法；掌握对比色调配色方法；掌握构建移动UI颜色系统的基本流程；掌握构建美妆App颜色系统；掌握移动UI色彩搭配的注意事项；掌握美妆App首页界面配色设计；掌握美妆App分类界面配色设计。

课时内容出色的移动图标设计授课时间分钟课时教学目标了解App图标的概念和重要性；了解图标设计常用软件；了解图标栅格系统；理解图标设计形式；理解App图标的分类；掌握图标尺寸；掌握图标组设计规范。教学重点þ理解图标设计形式；þ理解App图标的分类。教学难点þ掌握图标尺寸；þ掌握图标组设计规范。教学设计教学思路：通过对移动图标设计相关知识的讲解，使学员能够理解并掌握设计与绘制移动图标的方法和技巧。教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。教学资料及要求：收集不同类型的移动图标，通过观看并分析不同移动图标以及操作案例，来加深学员对相关理论知识的理解。教学内容讨论问题：1.移动UI图标的设计形式有哪些？2.App图标的分类有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。4.1 初始App图标4.1.1 App图标的概念4.1.2 App图标的重要性4.2 图标设计的常用软件4.2.1 AdobeIIlustrator4.2.2 AdobePhotoshop4.2.3 CorelDRAW4.3 熟悉图标栅格系统4.3.1 系统图标栅格4.3.2 图标栅格规范4.4 图标设计形式4.4.1 中文风格4.4.2 英文风格4.4.3 图形风格4.4.4 数字风格4.4.5 特殊符号风格4.5 App图标的分类4.5.1 工具图标4.5.2 操作案例—设计与制作磨砂质感工具图标4.5.3 装饰风格4.5.4 启动图标4.6 图标尺寸4.6.1Android系统的图标设计尺寸4.6.2 操作案例—设计与制作水果装饰图标4.6.3 iOS的图标设计尺寸4.6.4 操作案例—设计与制作时钟启动图标4.7 图标组设计规范4.7.1创建制作清单4.7.2 设计草图4.7.3 数字化呈现4.7.4 确定最终效果4.7.5 命名与导出小结了解App图标的概念和重要性；了解图标设计常用软件；了解图标栅格系统；理解图标设计形式；理解App图标的分类；掌握设计与制作磨砂质感工具图标；掌握图标尺寸；掌握设计与制作水果装饰图标；掌握设计与制作时钟启动图标；掌握图标组设计规范。

课时内容移动App的UI设计授课时间分钟课时教学目标了解移动UI的基本元素；了解常见的UI设计软件；掌握移动UI的设计基础；掌握移动UI的字体规范；了解移动UI图片尺寸规范；掌握移动App内容布局。教学重点þ掌握移动UI的设计基础；þ掌握移动UI的字体规范。教学难点þ掌握移动App内容布局。教学设计教学思路：介绍移动UI的基本元素、设计软件、设计基础、字体规范、图片尺寸规范和App内容布局等相关内容，使学员能够理解并掌握移动App的UI设计的方法和技巧。教学手段：通过案例操作的方式，使学生可以循序渐进地领会如何完成一套移动App的UI设计。教学资料及要求：准备一些视频和图片素材，以便在讲解过程中使用。教学内容讨论问题：1.移动UI的基本元素有哪些？2.移动App界面的布局方式有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。5.1 移动App的基本元素5.2 常见的UI设计软件5.2.1 AdobePhotoshop5.2.2 Sketch5.2.3 AdobeXD5.3 移动UI的设计基础5.3.1 iOS的开发单位5.3.2 iOS的界面尺寸规范5.3.3 操作案例—设计与制作iOSApp启动界面5.3.4 Android系统的开发单位5.3.5 Android系统的界面尺寸规范5.3.6 操作案例—设计与制作Android系统App界面5.4 移动UI的字体规范5.4.1 iOS字体规范5.4.2 操作案例—设计与制作iOSApp登录界面5.4.3 Android系统字体规范5.4.4 操作案例—设计与制作Android系统App分类界面5.5 移动UI图片尺寸规范5.6 移动App内容布局5.6.1 了解App界面中的全局边距5.6.2 操作案例—设计与制作iOSApp首页界面5.6.3 设置App界面中的内容间距5.6.4 操作案例—设计与制作iOSApp侧面菜单界面5.6.5 移动App界面的布局方式小结了解移动UI的基本元素；了解常见的UI设计软件；掌握移动UI的设计基础；掌握设计与制作iOSApp启动界面；掌握设计与制作Android系统App界面；掌握移动UI的字体规范；掌握设计与制作iOSApp登录界面；掌握设计与制作Android系统App分类界面；了解移动UI图片尺寸规范；掌握移动App内容布局；掌握设计与制作iOSApp首页界面；掌握设计与制作iOSApp侧面菜单界面。

课时内容移动App交互设计授课时间分钟课时教学目标了解交互动效的概念；了解常见的交互设计软件；了解交互设计的基本流程；掌握移动UI交互的类型；掌握动效在UI中的作用；了解交互设计需要遵循的习惯。教学重点þ掌握移动UI交互的类型。教学难点þ掌握移动UI中的作用。教学设计教学思路：介绍交互动效的概念、交互设计软件、交互设计的基本流程、移动UI交互的类型、动效在UI中的作用和交互设计需要遵循的习惯等相关内容，使学员能够理解并掌握移动App交互设计的相关知识。教学手段：通过讲解操作案例的方式，使学员熟知移动App交互类型，并了解制作移动App交互的绘制软件和表现手法。教学资料及要求：准备一些视频和案例素材，以便在讲解过程中使用。教学内容讨论问题：1.移动UI交互的类型有哪些？2.动效在UI中作用有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1 了解UI交互设计6.1.1 交互动效的概念6.1.2 基础动效类型6.2 常见的交互设计软件6.2.1 AdobeAffterEffects6.2.2 AdobeXD6.3 交互设计的基本流程6.3.1 提出交互设计创意想法6.3.2 实现创意想法6.4 移动UI交互的类型6.4.1 转场过渡6.4.2 操作案例—设计与制作App转场交互6.4.3 层级展示6.4.4 空间扩展6.4.5 关注焦点6.4.6 内容呈现6.4.7 操作案例—设计与制作相册App内容呈现交互6.4.8 操作反馈6.4.7 操作案例—设计与制作相册App点赞反馈交互6.5 动效在UI中的作用6.5.1 吸引用户注意力6.5.2 为用户提供操作反馈6.5.3 加强指向性6.5.4 操作案例—设计与制作App后台交互6.5.5 传递信息深度6.6 交互设计需要遵循的习惯小结了解UI交互设计；了解交互设计软件；掌握交互设计的基本流程；掌握移动UI交互的类型；掌握设计与制作App转场交互；掌握设计与制作相册App内容呈现交互；掌握设计与制作App点赞反馈交互；掌握动效在UI中的作用；掌握设计与制作App后台交互；了解交互设计需要遵循的习惯。

课时内容适配与输出移动UI设计授课时间分钟课时教学目标了解标注的重要性；了解常见的标注软件；掌握标注移动UI；了解移动UI标注规范；掌握输出与适配iOSUI设计；掌握输出与适配Android系统UI设计。教学重点þ掌握标注移动UI。教学难点þ掌握输出与适配iOSUI设计；þ掌握输出与适配Android系统UI设计；教学设计教学思路：介绍标注的重要性、常见的标注软件、标注移动UI、移动UI标注规范、输出与适配iOSUI设计和输出与适配Android系统UI设计，使学员能够了解并掌握适配与输出移动UI设计的使用方法和技巧。教学手段：通过边操作边讲解的方式，使学员快速掌握适配与输出移动UI设计的操作方法。教学资料及要求：准备一些视频和案例素材，以便在讲解过程中使用。教学内容讨论问题：移动UI标注规范有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1 标注的重要性7.2 常见的标注软件7.2.1 PxCook7.2.2 AssistorPS7.3 标注移动UI7.3.1 移动App标注的内容7.3.2 操作案例—标注iOSApp界面7.3.3 标注的声明文档7.3.4 操作案例—标注Android系统App界面7.4 移动UI标注规范7.4.1 位置与尺寸的标注规范7.4.2 色彩和文字的标注规范7.4.3 切图资源的尺寸必须是偶数7.5 输出与适配iOSUI设计7.5.1 向上适配与向下适配7.5.2 适配切片命名规范7.5.3 操作案例—导出iOSApp界面切图资源7.6 输出与适配Android系统UI设计7.6.1 Android系统中的“点9”切图7.6.2 输出与适配的一稿两用7.6.3 操作案例—导出Android系统App切图资源小结了解标注的重要性；了解常用的标注软件；掌握移动App标注的内容；掌握标注iOSApp界面；了解标注的声明文档；掌握标注Android系统App界面；掌握移动UI标注规范；掌握输出与适配iOSUI设计；掌握导出iOSApp界面切图资源；掌握输出与适配Android系统UI设计；掌握导出Android系统App切图资源。

课时内容设计与制作移动App项目授课时间分钟课时教学目标分析美妆电商App的项目背景；掌握制作美妆