《UI视觉设计案例教程》教案 第1章 UI设计快速入门.docx

PAGE12

PAGE12

PAGE11

PAGE11

《UI视觉设计案例教程》

教案

课时分配表

章序

课程内容

课时

备注

1

UI设计快速入门

6

2

常见UI元素设计

8

3

App界面设计

8

4

网页界面设计

6

5

软件界面设计

6

6

游戏界面设计

6

合计

40

课题

UI设计快速入门

课时

6课时（260min）

教学目标

知识目标：

（1）了解UI设计的分类和常用软件

（2）了解UI设计的工作流程

（3）了解UI设计的风格

（4）掌握UI设计中色彩和文字的运用技巧

（5）了解UI设计的行业发展

（6）掌握UI设计的学习方法

素质目标：

（1）学习相关的设计规范和原则，了解行业最新政策

（2）培养自身的创新意识，积极适应社会发展

（3）了解行业发展趋势，树立职业规划意识，提升自身的职业规划能力

教学重难点

教学重点：UI设计的分类、常用软件、工作流程和风格，UI设计中色彩和文字的运用技巧

教学难点：掌握UI设计中色彩和文字的运用技巧

教学方法

问答法、讨论法、讲授法、多媒体展示法

教学用具

电脑、投影仪、多媒体课件、教材、APP

教学过程

主要教学内容及步骤

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

新课预热

【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等

【学生】聆听、互动

【教师】介绍UI设计行业的发展，让学生了解UI设计的就业前景

随着UI设计行业在全球的兴起和迅猛发展，国内外众多大型IT企业（如百度、腾讯、微软、苹果等）均已成立专业的UI设计部门，这使得UI设计人才的需求量逐年增加，UI设计行业的前景也一片光明。

【学生】聆听、思考、记录

问题导入

【教师】扫码播放“UI设计快速入门”视频，并提出问题：

什么是UI设计？UI设计可以分为哪几种类型？

【学生】观看、思考、主动回答问题

传授新知

【教师】总结学生的回答，引入新知，讲解UI设计的概念、分类、工作流程、风格、色彩搭配等知识

1.1UI设计概述

1.1.1什么是UI设计

UI即userinterface的简称，泛指用户界面，是系统和用户交互的媒介。

从广义上来说，UI设计包括以下三方面内容。

1．用户研究

用户研究包括两方面内容：一是研究用户的喜好和使用习惯，使界面更易于用户使用、学习和记忆，以提高产品的可用性；二是通过发掘用户的潜在需求，为技术创新提供新的思路和方法。

（详见教材）

2．交互设计

交互设计主要研究用户在和产品的交互过程中的心理模式和行为模式。

（详见教材）

3．界面设计

界面设计又称视觉界面设计，主要指界面外观的设计。

（详见教材）

1.1.2UI设计的分类

根据载体的不同，可以把UI设计分为移动UI设计、PC端UI设计和其他UI设计三大类。

【教师】通过多媒体展示“App界面和智能手表界面”图片（详见教材），并讲解新知

移动UI设计：是针对移动设备（手机、平板电脑、智能手表等）的界面设计。

（详见教材）

【教师】通过多媒体展示“网页和播放器软件界面”图片（详见教材），并讲解新知

PC端UI设计：是针对电脑的界面设计。PC端UI设计主要包括网页设计和应用软件的界面设计。

（详见教材）

【教师】通过多媒体展示“车载设备的界面”图片（详见教材），并讲解新知

其他UI设计：由于受界面载体的形状、尺寸和技术等因素限制，这类UI设计发展较慢，其载体通常是一些小众或目前正处于发展阶段的智能设备，如车载设备、VR（虚拟现实技术）设备、AR（增强现实技术）设备、智能电视等。

（详见教材）

1.1.3UI设计的常用软件

【教师】通过多媒体展示“UI设计常用软件”图片（详见教材），并讲解新知

Photoshop：是Adobe公司推出的图像处理软件，还可以用来绘画、处理数码照片，以及设计平面广告等。

Illustrator：是Adobe公司推出的专业矢量绘图软件，广泛应用于印刷出版、专业插画、多媒体图像处理和网页制作，适合设计各种复杂的界面，在UI设计中常用于制作矢量图标。

AxureRP：是Axure公司推出的快速原型设计软件，主要用于设计和制作产品的线框图、流程图、原型图等。

AfterEffects：是Adobe公司推出的一款动态图形和视频处理软件，常用于视频特技的设计和制作。

Sketch：是一款矢量绘图软件，其优点在于上手简单，运行流畅，拥有实用的共享样式功能（编辑某一个共享元素，所有相同的共享元素也会随之改变），但缺点在于只能在MacOS系统上使用，不支持psd、ai格式文件。

1.2UI设计的工作流程

【教师】通过多媒体展示“产品开发的流程”图片（详见教材），并讲解新知

UI设计介于策划设计和开发测试之间，主要负责视觉设计和一些简单的交互设计。

【知识链接】

U