UI界面设计与制作教学教案.docxVIP

教案编号:1

课题:第1章初识UI设计

课时:4课时

授课类型:讲授

项目目标:

●掌握UI设计的基本概念

●掌握UI设计的常用软件

●了解UI设计的行业发展

●了解学习UI的正确姿势

●掌握UI设计的制作流程

项目重点:

●UI设计的基本概念

●UI设计的常用软件

●UI设计的制作流程

项目难点:

●UI设计的制作流程

项目技能点：

单位、尺寸、适配、结构、间距、文字图标及图片的基础规范与规则

项目教学技巧：

1.知识讲解

2.案例展示

项目过程：

（一）课前准备

1.授课前准备

准备好教学用具和教学设备

2.板书

课题：第1章初识UI设计

项目目标:

●掌握UI设计的基本概念

●掌握UI设计的常用软件

●了解UI设计的行业发展

●了解学习UI的正确姿势

●掌握UI设计的制作流程

3.课程引入

通过日常生活中的UI设计案例引入UI设计的概念

网易云课堂App

（二）课程内容

1.1UI设计的基本概念

UI即用户界面（UserInterface）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计，如图所示。

用户界面（UserInterface）

1.2UI设计的常用软件

建议先掌握Photoshop和Illustrator，有条件的话还要掌握Sketch和Figma，如图所示。

UI设计常用软件

1.3UI设计的发展趋势

从早期的专注于工具的技法型表现，到现在要求UI设计师参与到整个商业链条，兼顾商业目标和用户体验，可以看出国内的UI设计行业发展是跨跃式的。UI设计从设计风格、技术实现到应用领域都发生了巨大的变化，如图所示。

UI设计发展趋势

1.技术实现

虚拟现实、增强现实及人工智能等技术的发展，使得UI设计更加高效，交互亦更为丰富。

2.设计风格

UI设计的风格经历了由拟物化到扁平化设计的转变，现在扁平化风格依然为主流，但加入了MaterialDesign设计语言（材料设计语言），使设计更为醒目且细腻。

3.应用领域

UI设计的应用领域已由原先的PC端和移动端扩展到可穿戴设备、无人驾驶汽车、AI机器人等，更为广阔。

今后无论技术如何进步，设计风格如何转变，甚至于应用领域如何不同，UI设计都将参与到产品设计的整个链条中，实现人性化、包容化、多元化的目标。

1.4UI设计的学习方法

对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性地学习提升。结合市场需求，我们推荐下列学习方法。

1.整体学习

进行相关课程学习及文章学习，针对初学者建议进行课程学习，这样可以系统的学习UI的相关知识和设计应用方法。

iOS设计规范Android设计规范

2.作品收集

建议设计师每天拿出1~2小时到UI中国、站酷（ZCOOL）、追波（Dribbble）等网站，如图所示，浏览最新的作品，并加入收藏，形成自己的资料库，

UI中国站酷追波

3.项目临摹

首先推崇的是从应用中心下载优秀的App，如图所示，截图保存进行临摹。临摹一定要保证完全一样并且要多临摹。

贝壳找房App网易云课堂App京东App

4.项目实战

经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Demo。

1.5UI设计的项目流程

针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节，如图所示。

上图为大流程，下图为展开流程，下图中的橙色为多个角色共同协作完成

1.6UI设计规范与规则

UI设计的基础规范与规则可以令设计师在进行设计时更加事半功倍。下面主要介绍单位、尺寸、适配、结构、间距、文字图标以及图片的基础规范与规则。

1.单位介绍

（1）DPI和PPI

PPI：像素密度,是屏幕分辨率，表示的是每英寸所拥有的像素数量，通常代表苹果手机。

DPI：网点密度，是打印分辨率，表示每英寸打印的点数，通常代表安卓手机。

DPI等同于PPI

（2）px、pt、dp、sp

px：物理像素，是相对单位，运用Photoshop软件进行UI设计时使用的单位，运用此单位需要兼容不同分辨率的界面。

pt：逻辑像素，是绝对单位，不会因为屏幕像素密度变化而变化。iOS开发及运用Sketch软件进行UI设计使用的单位。

dp：独立密度像素，是安卓设备