移动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设计师

1.负责软件界面的美术设计、创意工作和制作工作；

工作内容

2.根据各种相关软件的用户群，提出构思新颖、有高度吸

引力的创意设计；

3.对页面进行优化，使用户操作更趋于人性化；

4.维护现有的应用产品。

1.艺术设计，多媒体设计，动画设计，工业设计等相关设

计艺术专业；

2.可以独立设计手机界面里的所有画面元素，能够原创图

标及制作动画效果；

3.熟练Photoshop,ai,Flash,或者其他设计软件；

相关知识4.有扎实的美术功底和审美能力，富有创新精神，有良好

的平面设计和造型设计能力；

5.有较强的学习能力，能不断的跟踪学习，新的设计理念

和流行趋势；

6.对移动互联网及移动终端手机UI软件行业发展有深刻的

理解。

3.主要职业能力

1）培养学生严谨认真的工作态度和终身学习的习惯；

2）培养学生在实际工作中遵守相关规范和要求；

3）丰富学生的知识结构，提升专业技能；

4）培养良好的人际沟通能力和团队互助的精神；

5）培养学生自我学习、勇于创新、积极承担不同角色的能力。

四、课程教学目标

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设计，向读者介绍了相关的基本知识和操作案例，构建成体系的

运营过程，为实际操作打下坚实的基础。本课程的学习内容分解如下：

课程内容与教学要求

建议

序号名称主要内容教学要求

学时

•了解移动UI设计讲解移动UI设

•移动UI的系统分类计中的基础知

关于移动

第1章•移动UI设计流程识，帮助学生快

UI设计

•移动UI设计原则速了解移动UI

•移动UI设计流程的职位划分设计的基础知识

讲解如何将客户

•确定移动UI目标用户提出的抽象化描

•完成移动UI策划书述转化为具象化

•了解思维导图的移动UI策划

移动UI策•绘制思维导图的常用软件和原型设计，转

第2章划与原型设•绘制移动UI思维导图化过程中使用的

计•绘制移动UI草图方法及常用软

•了解原型设计件，帮助学生更

•绘制原型的常用软件好地完成每一款

•绘制移动UI原型图移动UI产品的

策划与原型设计

讲解如何为一款

移动App项目构

•认识色彩

建符合设计主题

•和谐、统一的色彩搭配方法

优秀的移动的颜色系统，帮

•突出、对比的配色方法

第3章UI色彩搭助学生掌握如何

•构建移动UI颜色系统

酉己让移动UI的外

•移动UI色彩搭配的注意事项

观变得更加出

彩，从而可以吸

引更多的用户

•初始App图标讲解图标相关的

•图标设计常用软件概念、设计形式

•熟悉图标栅格系统和设计尺寸及设

出色的移动

第4章•图标设计形式计制作方法，是

图标设计

•App图标的分类学生进入UI设

•图标尺寸计行业的必备条

•图标组设计规范件

•移动UI的基本元素讲解有关App界

•常见的UI设计软件面的设计规范和

•移动UI的设计基础设计技巧，使学

移动App的

第5章•移动UI的字体规范生掌握App界面

UI设计

•移动UI图片尺寸规范的设计规范和

•移动App内容布局App界面的设计

方法

讲解有关移动

•了解UI交互设计

App交互设计的

•常见的交互设计软件

相关基础知识，

•交互设计的基本流程

移动App交使学生掌握移动

第6章•移动UI交互的类型

互设计App交互类型,

•动效在UI中的作用

并了解制作移动

•交互设计需要遵循的习惯

App交互的绘制

软件和表现方法

讲解标注的重要

性、常见的标注

软件、标注移动

•标注的重要性

UI和移动UI标

•常见的标注软件

注规范及输出

•标注移动UI

适配与输出UI切片资源等

•移动UI标注规范

第7章移动UI设内容，使学生能

•输出与适配iOSUI设计

计够理解标注移动

•输出与适配Android系统UI设

UI和输出切片

计

资源的作用与条

件，从而完成标

注和导出移动

AppUI的操作

讲解设计与制作

两个移动UI项

设计与制作目，帮助学生巩

•设计与制作美妆电商App项目

第8章移动App项固前面所学的知

•设计与制作美食外卖App项目

目识，同时加深学

生对移动UI设

计规范的理解

学时合计：学时

六、教学实施建议

1.教学建议：

采用“理论+案例”的教学法，通过案例分析加强知识理解，将所学知识与

操作案例相结合，帮助学生准确理解与使用移动UI设计的相关知识，并领会

移动UI设计的内在实质。充分利用挂图、投影和多媒体等教学手段。

2.教学评价建议：

在本课程实施过程中，突出评价的教育功能，注重过程评价与结果评价并

重、定性评价与定量评价相结合，形成教师和学生共同参与的多元评价主体，

构建评价体系。

3.教材编写与选用建议：

教材编写要体现课程的特色与设计思想，教材内容体现先进性、实用性，

操作案例的选取要科学，采用全流程设计的方式，由浅入深地讲解初学者需要

掌握的基础知识和操作技巧，全面解析各种元素的具体绘制方法，并在知识点

后衔接相关案例，使学生能够轻松理解知识点。教材力求文字标准规范、正确、

科学，配备适量的直观图片和视频影像资料。

4.实验实训设备配置建议：

充分利用挂图、投影和多媒体等教学手段，采用理论知识与操作案例分析

相结合的教学模式，帮助学生准确理解相关知识。

5.课程资源开发与利用建议：

开发相关辅导用书、教师指导用书、网络资源，要注重仿真软件的应用及

开发。

《移动UI设计（微课版）》

配套教学教案

第1讲

课时内容关于移动UI设计授课时间分钟课时

0了解移动UI设计；

0移动UI的系统分类；

教学目标国移动UI设计流程；

0移动UI设计原则；

0移动UI设计流程的职位划分。

0掌握移动UI设计原则；

教学重点

0掌握移动UI设计流程的职位划分。

教学难点0掌握移动UI设计流程。

I、教学思路：通过对移动UI设计相关基础知识的讲解了解移动UI设计；

教学设计2、教学手段：针对移动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端UI

1.1.4将PC端UI重置为移动UI

1.2移动UI的系统分类

1.2.1iOS

1.2.2Android系统

1.2.3HarmonyOS

1.2.4WearOS和watchOS

1.3移动UI设计流程

1.3.1需求分析

1.3.2原型设计

1.3.3UI设计

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.3UI设计时

1.5.4开发工程师

1.6本章小结

1.了解移动UI设计的概念；

2.了解移动UI与PC端UI的不同点；

3.了解移动UI的系统分类以及各类型的特点；

小结4.理解移动UI设计流程；

5.了解需求分析阶段的主要步骤；

6.理解移动UI设计原则以及各原则的特点；

7.理解移动UI设计流程的职位划分。

第2讲

课时内容移动UI策划与原型设授课时间分钟课时

1+

0了解移动UI目标用户；

0了解移动UI策划书；

0了解思维导图；

0了解思维导图的常用软件；

教学目标0掌握绘制移动UI思维导图；

0掌握绘制移动UI草图；

0了解原型设计；

0了解绘制原型的常用软件；

0掌握绘制移动UI原型图。

教学重点0掌握绘制移动UI思维导图。

0掌握绘制移动UI草图；

教学难点

0掌握绘制移动UI原型图。

1、教学思路：通过对移动UI策划与原型设计相关内容的讲解，使学员能够掌握移动

UI策划与原型设计的方法及形式。

教学设计2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。

3、教学资料及要求：制作简单易懂的操作案例，通过由浅入深的方式，来加深学员

对相关理论知识的理解。

教学内容

讨论问题：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.1MindMeister

2.4.2MindManager

2.4.3XMind

2.4.4操作案例一下载并安装XMind

2.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.1AxureRP

2.8.2AdobeXD

2.8.3操作案例一安装AxureRP10

2.9绘制移动UI原型图

2.9.1原型的表现手法

2.9.2原型的重要性

2.9.3操作案例一绘制美妆App分类界面原型

1.了解移动UI项目背景；

2.掌握用户画像分析法；

3.了解移动UI策划书；

4.了解思维导图；

5.了解思维导图的常用软件；

6.掌握下载并安装XMind；

小结

7.掌握绘制美妆App的首页思维导图

8.掌握绘制移动UI草图；

9.了解原型设计；

10.掌握安装AxureRP10；

11.掌握绘制美妆App首页草图；

12.掌握绘制App分类界面原型。

第3讲

分钟

课时内容优秀的移动UI色彩搭配授课时间课时

0认识色彩；

0掌握和谐统一的色彩搭配方法；

教学目标0掌握突出对比的配色方法；

0掌握构建移动UI颜色系统；

0掌握移动UI色彩搭配的注意事项。

0掌握和谐统一的色彩搭配方法；

教学重点

0掌握突出对比的配色方法。

0掌握构建移动UI颜色系统；

教学难点

0掌握移动UI色彩搭配的注意事项。

1、教学思路：通过对移动UI色彩搭配相关知识的讲解，使学员能够理解并掌握移动UI

色彩搭配的方法及和技巧。

教学设计2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。

3、教学资料及要求：可以准备一些经典色彩搭配的海报，分析案例的制作方法，通过观

看海报色彩与分析案例的操作方法，来加深学员对相关理论知识的理解。

教学内容

讨论问题：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.4App界面内容必须便于阅读

3.5.5保守地使用色彩

3.5.6规避杂乱的配色方案

3.5.7操作案例一美妆App分类界面配色设计

1.认识色彩；

2.掌握同色系配色方法；

3.掌握邻近色配色方法；

4.掌握类似色配色方法；

5.掌握同色调配色方法；

6.掌握类似色调配色方法；

7.掌握中差色配色方法；

小结8.掌握对比色配色方法；

9.掌握互补色配色方法；

10.掌握对比色调配色方法；

H.掌握构建移动UI颜色系统的基本流程；

12.掌握构建美妆App颜色系统；

13.掌握移动UI色彩搭配的注意事项；

14.掌握美妆App首页界面配色设计；

15.掌握美妆App分类界面配色设计。

第4讲

课时内容出色的移动图标设计授课时间分钟课时

0了解App图标的概念和重要性；

0了解图标设计常用软件；

0了解图标栅格系统；

教学目标0理解图标设计形式；

0理解App图标的分类；

0掌握图标尺寸；

0掌握图标组设计规范。

0理解图标设计形式；

教学重点

0理解App图标的分类。

0掌握图标尺寸；

教学难点

0掌握图标组设计规范。

1、教学思路：通过对移动图标设计相关知识的讲解，使学员能够理解并掌握设计与

绘制移动图标的方法和技巧。

教学设计2、教学手段：采用操作案例分析与理论知识相结合的方式进行讲解。

3、教学资料及要求：收集不同类型的移动图标，通过观看并分析不同移动图标以及

操作案例，来加深学员对相关理论知识的理解。

教学内容

讨论问题：I.移动UI图标的设计形式有哪些？

2.App图标的分类有哪些？

内容大纲：具体可结合本章的PPT课件进行配合讲解。

4.1初始App图标

4.1.1App图标的概念

4.1.2App图标的重要性

4.2图标设计的常用软件

4.2.1AdobeIllustrator

4.2.2AdobePhotoshop

4.2.3CorelDRAW

4.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.5App图标的分类

4.5.1工具图标

4.5.2操作案例一设计与制作磨砂质感工具图标

4.5.3装饰风格

4.5.4启动图标

4.6图标尺寸

4.6.1Android系统的图标设计尺寸

4.6.2操作案例一设计与制作水果装饰图标

4.6.3iOS的图标设计尺寸

4.6.4操作案例一设计与制作时钟启动图标

4.7图标组设计规范

4.7.1创建制作清单

4.7.2设计草图

4.7.3数字化呈现

4.7.4确定最终效果

4.7.5命名与导出

1.了解App图标的概念和重要性；

2.了解图标设计常用软件；

3.了解图标栅格系统；

4.理解图标设计形式；

5.理解App图标的分类；

小马口

6.掌握设计与制作磨砂质感工具图标；

7.掌握图标尺寸；

8.掌握设计与制作水果装饰图标；

9.掌握设计与制作时钟启动图标；

10.掌握图标组设计规范。

第5讲

课时内容移动App的UI设计授课时间分钟课时

0了解移动UI的基本元素；

0了解常见的UI设计软件；

0掌握移动UI的设计基础；

教学目标

0掌握移动UI的字体规范；

0了解移动UI图片尺寸规范；

0掌握移动App内容布局。

0掌握移动UI的设计基础；

教学重点

0掌握移动UI的字体规范。

教学难点0掌握移动App内容布局。

1、教学思路：介绍移动UI的基本元素、设计软件、设计基础、字体规范、图片尺

寸规范和App内容布局等相关内容，使学员能够理解并掌握移动App的UI设计

的方法和技巧。

教学设计2、教学手段：通过案例操作的方式，使学生可以循序渐进地领会如何完成一套移动

App的UI设计。

3、教学资料及要求：准备一些视频和图片素材，以便在讲解过程中使用。

教学内容

讨论问题：I.移动UI的基本元素有哪些？

2.移动App界面的布局方式有哪些？

内容大纲：具体可结合本章的PPT课件进行配合讲解。

5.1移动App的基本元素

5.2常见的UI设计软件

5.2.1AdobePhotoshop

5.2.2Sketch

5.2.3AdobeXD

5.3移动UI的设计基础

5.3.1iOS的开发单位

5.3.2iOS的界面尺寸规范

5.3.3操作案例一设计与制作iOSApp启动界面

5.3.4Android系统的开发单位

5.3.5Android系统的界面尺寸规范

5.3.6操作案例一设计与制作Android系统App界面

5.4移动UI的字体规范

5.4.1iOS字体规范

5.4.2操作案例一设计与制作iOSApp登录界面

5.4.3Android系统字体规范

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界面的布局方式

I.了解移动UI的基本元素；

小结2.了解常见的UI设计软件；

3.掌握移动UI的设计基础；

4.掌握设计与制作iOSApp启动界面；

5.掌握设计与制作Android系统App界面；

6.掌握移动UI的字体规范；

7.掌握设计与制作iOSApp登录界面；

8.掌握设计与制作Android系统App分类界面；

9.了解移动UI图片尺寸规范；

10.掌握移动App内容布局；

11.掌握设计与制作iOSApp首页界面；

12.掌握设计与制作iOSApp侧面菜单界面。

第6讲

课时内容移动App交互设计授课时间分钟课时

0了解交互动效的概念；

0了解常见的交互设计软件；

0了解交互设计的基本流程；

教学目标

0掌握移动UI交互的类型；

0掌握动效在UI中的作用；

0了解交互设计需要遵循的习惯。

教学重点0掌握移动UI交互的类型。

教学难点0掌握移动UI中的作用。

1、教学思路：介绍交互动效的概念、交互设计软件、交互设计的基本流程、移动UI

交互的类型、动效在UI中的作用和交互设计需要遵循的习惯等相关内容，使学员

能够理解并掌握移动App交互设计的相关知识。

教学设计2、教学手段：通过讲解操作案例的方式，使学员熟知移动App交互类型，并了解制

作移动App交互的绘制软件和表现手法。

3、教学资料及要求：准备一些视频和案例素材，以便在讲解过程中使用。

教学内容

讨论问题：1.移动UI交互的类型有哪些？

2.动效在UI中作用有哪些？

内容大纲：具体可结合本章的PPT课件进行配合讲解。

6.1了解UI交互设计

6.1.1交互动效的概念

6.1.2基础动效类型

6.2常见的交互设计软件

6.2.1AdobeAffterEffects

6.2.2AdobeXD

6.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交互设计需要遵循的习惯

1.了解UI交互设计；

小结2.了解交互设计软件；

3.掌握交互设计的基本流程；

4.掌握移动UI交互的类型；

5.掌握设计与制作App转场交互；

6.掌握设计与制作相册App内容呈现交互；

7.掌握设计与制作App点赞反馈交互；

8.掌握动效在UI中的作用；

9.掌握设计与制作App后台交互；

10.了解交互设计需要遵循的习惯。

第7讲

分钟

课时内容适配与输出移动UI设计授课时间课时

0了解标注的重要性；

0了解常见的标注软件；

0掌握标注移动UI；

教学目标

0了解移动UI标注规范；

0掌握输出与适配iOSUI设计；

0掌握输出与适配Android系统UI设计。

教学重点0掌握标注移动UIo

0掌握输出与适配iOSUI设计；

教学难点

0掌握输出与适配Android系统UI设计；

1、教学思路：介绍标注的重要性、常见的标注软件、标注移动UI、移动UI标注规

范、输出与适配iOSUI设计和输出与适配Android系统UI设计，使学员能够了解

并掌握适配与输出移动UI设计的使用方法和技巧。

教学设计2、教学手段：通过边操作边讲解的方式，使学员快速掌握适配与输出移动UI设计的

操作方法。

3、教学资料及要求：准备一些视频和案例素材，以便在讲解过程中使用。

教学内容

讨论问题：移动UI标注规范有哪些？

内容大纲：具体可结合本章的PPT课件进行配合讲解。

7.1标注的重要性

7.2常见的标注软件

7.2.1PxCook

7.2.2AssistorPS

7.3标注移动UI

7.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.1Android系统中的“点9”切图

7.6.2输出与适配的一稿两用

7.6.3操作案例一导出Android系统App切图资源

1,了解标注的重要性；

2.了解常用的标注软件；

3.掌握移动App标注的内容；

小结

4,掌握标注iOSApp界面；

5.了解标注的声明文档；

6.掌握标注Android系统App界面；

7.掌握移动UI标注规范；

8.掌握输出与适配QSUI设计；

9.掌握导出iOSApp界面切图资源；

10.掌握输出与适配Android系统UI设计；

11.掌握导出Android系统App切图资源。

第8讲

课时内容设计与制作移动App项授课时间分钟课时

日

0分析美妆电商App的项目背景；

0掌握制作美妆电商App界面的草图原型；

0掌握构建美妆电商App的颜色系统；

0掌握设计与制作美妆电商App的图标组；