移动UI交互设计教案全套教学设计.docx

移动UI交互设计教案全套教学设计.docx课次：1
第1章UI设计概述
教学目标
了解UI设计的概念
初步了解UI设计的流程
初步了解UI设计的规范
教学重点
UI设计概念
教学难点
UI设计的流程
教学过程
【导课】
可介绍UI设计的发展趋势、市场需求等内容，引发学生兴趣
【课程内容】 结合示例图
片，进行讲解
UI设计的概念
UI是User Interface的缩写，译为用户界面，已成为屏幕产品的重要组成部分。
UI设计的流程 结合课件，进
行讲解
>测试改进阶段一、 尸需求调研阶段4
1 Why
UI设计
翼 方案修改阶段 J 设计制作阶段 < 瞿舞言
1） 需求调研阶段：分析产品用户的需求以及同类产品的优缺点
2） 设计制作阶段：包括界面设计、交互设计，形成设计方案
3） 方案修改阶段：与客户进行沟通，根据客户的需求来修改设计
结合示例图
4） 测试改进阶段：跟踪了解用户的测试与反馈 片，进行讲解
UI设计的规范
1）用户控制原则：以用户体验为中心，要感觉在控制软件而不是感觉被软件所
控制
2） 一致性原则：一是尽可能允许用户将已有的知识运用到新产品中，二是在同 一产品中的相同元素或术语要保持一致
3） 简单美观原则：图形的创意、颜色的运用、可视化设计的技巧都是构成美观 的界面必不可少的要素
4） 布局合理原则：布局设计是为了提升用户的使用体验，最适合用户使用的布 局设计才是最合理的
5） 响应时间合理原则：系统响应时间应该适中
教学总结 本次课概括性地介绍了 UI设计相关理论知识，可为后续的学习奠定基础
课后练习 可为学生提供UI设计作品、相关网站进行赏析，加深对UI设计的理解。
课次：2
第2章主题图标设计
教学目标
了解图标设计的作用及分类
了解图标设计的流程及设计规范
掌握图标设计的原则
教学重点
图标设计的原则
教学难点
图标设计的规范
教学过程
【导课】
复习UI设计的概念、流程等理论知识
【课程内容】
3.
图标设计的概念及作用
结合示例图
片，进行讲解
4.
5.
4.
5.
一组具有高度浓缩、快捷传达信息、便于记忆的图形。
图标比文字描述直观、漂亮，可以携带更多的视觉感。
图标设计的分类
结合示例图
片重点讲解、
按照功能分类、按照设计风格分类
图标设计的原则
5)
6)
7)
8)
可识别性原则
差异性原则
合适的精细度
风格统一
图标设计的流程
1)
2)
3)
4)
分析，便于掌
结合示例图
片讲解图标
的设计风格
确定图标风格
图标草图绘制
图标电脑制作
主题界面制作
图标设计规范
1)系统规范
iOS系统图标制作规范
Android系统图标制作规范
2)设计制作规范
光源方向统一 裁切区域和安全区域
136px
教学总结 本次课介绍了图标设计的相关理论知识，需要重点掌握图标设计风格和设计原则
课后练习 可为学生提供优秀的图标设计作品、相关网站进行赏析，加深对图标设计的理解。
课次:3
第2章主题图标设计
教学目标
了解手绘图标的作用
掌握手绘图标的特点
教学重点
手绘图标的作用
教学难点
如何将设计思想利用手绘具像化
教学过程
【导课】
复习图标设计的原则、设计风格等理论知识
【课程内容】 介绍项目设
计风格，明确
咨、4•去I
设计万向
可爱、亲切的“小黄人”手机主题图标
7.
手绘图标的作用
手绘是将设计思想具象化的必要过程。
讲解手绘的 方法，表现的 方式。引导启 发学生的想 象力
举例说明：“电话”图标的设计、手绘表现过程
8.
课堂练习
练习题目：“收音机”图标的设计、手绘表现
9.
引导学生分析收音机和小黄人形象的联系，可自行设计
设计点评
1）可学生展示作品，介绍设计思路
3）教师点评，并给出修改意见。也可参看样图，进行展示说明
教学总结 本次课介绍了手绘的作用和表现方式，希望大家能够掌握，并运用到自己的设计当中
课后练习 根据项目风格，自行完成16个图标的手绘稿
课次:4
第2章主题图标设计
教学目标
了解电脑软件制作图标的方法
掌握相关设计软件的使用
教学重点
相关设计软件的使用
教学难点
利用软件制作图标的表现手法
介绍软件的 区别及使用 方法
操作演示并 讲解
1） 将手绘草图拍成照片
2） 利用PS软件进行描边、上色