UI界面教学大纲

课程名称界面（UI）设计

课程编号课程类别必修

课程学时 48 课程学分 3

课程实施方式（即教学组织形式、采用的教学方法及手段）

考核方式考查

开设时间第二学期

使用教材创意UI Photoshop玩转图标设计，Art eyes设计工作室编著，人

民邮电出版社2015年1月

内容简介通过案例的方式介绍了如何使用Photoshop进行图标设计。从轻松迈

向图标王国、掌控图标创意原则、图标设计与软件操作、扁平化图标设计、质感图标的设计、涂鸦风格图标设计到玩转图标应用和附录逐一讲解，使读者由浅入深，逐步了解使用Photoshop制作图标的整体设计思路和制作过程。

课程的目的与任务

1、知识目标

通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，掌握硬件人机界面与软件人机界面方法、理论与设计实例，探索新的交互技术。

2、能力目标

通过本课程的学习，学生应该掌握软件的基本操作，并初步具备：UI界面设计能力；

3、素质目标

通过本课程的教学，我们重要的是培养学生观察生活、体验生活、体验、审美能力、吃苦精神和激发学生的创造能力的方法和手段。

课程学习指导《UI设计》是艺术设计专业（平面设计方向）的专业核心课程，

是在图形图像处理、企业VI、标志设计课程基础上的延续和提高。课程几乎涉及到了平面设计专业基础课程的各个方面，课程实践中注重对各专业基础课程如图形设计、编排设计、字体设计、构成设计等课程的统合和整体应用。UI界面设计是一门新的学科，也称之为当代的新媒体，它是跨学科的学术领域，是在各门相关学科中提取相关的内容要素而综合起来的系统学科。

在教学过程中，应立足于加强学生实际操作能力的培养，采用项目教学，以工作任务引领提高学生学习兴趣，激发学生的成就动机。

教学过程中教师应积极引导学生提升职业素养，提高职业道德。

课时分配表

课程内容与基本要求

第1章轻松迈向图标王国

1.1 图标入门

1.1.1 什么是图标

1.1.2 图标与标志的区别

1.1.3 常见移动应用图标

1.1.4 常见电脑应用图标

1.2 图标设计的意义和作用

1.2.1 什么是图标

1.2.2 图形内在含义

1.2.3 图标设计的作用

1.3 图标的像素分辨

1.3.1 Windows操作系统的图标像素分辨1.3.2 WindowsXP操作系统的图标像素分辨1.3.3 安卓操作系统的图标像素分辨

1.3.4 iOS操作系统的图标像素分辨

1.4 常见图标的标准尺寸

1.4.1 常见移动操作系统的图标标准尺寸1.4.2 常见电脑操作系统的图标标准尺寸1.5 图标的设计要素和结构

1.5.1 图标型的把握

1.5.2 图标型的把握

1.5.3 透视、光源与阴影

1.5.4 元素的组合

1.5.5 视觉均衡

1.6 那些你不知的图标分类

1.6.1 PNG格式图标

1.6.2 ICON格式图标

1.6.3 ICL格式图标

1.6.4 IP格式图标

1.7 制作图标的常用软件

1.7.1 PhotoshopCS6

1.7.2 IllustratorCS6

第2章掌控图标创意原则

2.1 图标制作的原则

2.1.1 可识别性原则

2.1.2 差异性原则

2.1.3 合适的精细度和元素个数原则2.1.4 风格统一性原则

2.1.5 原创性原则

2.2 图标的创意

2.2.1 界面需求

2.2.2 图标的创意元素

2.2.3 创意图标的特点

2.3 图标设计草图的绘制和渲染

2.3.1 图标的设计方法及技巧

2.3.2 图标视觉分析

2.3.3 最终草图定稿

2.3.4 草图渲染

2.4 图标的视觉分析和效果

2.4.1 用户体验

2.4.2 图标的可识别性

2.4.3 图标设计的连续性

第3章图标设计与软件操作

3.1 基础图形绘制图标中的元素

3.1.1 圆形图标的绘制

3.1.2 方形图标的绘制

3.1.3 圆角矩形图标的绘制

3.1.4 组合图形图标的绘制

3.1.5 自定义形状图标的绘制

3.2 让人过目不忘的简单生活图标

3.2.1 移动设备电池图标绘制

3.2.2 安卓系统启动图标

3.2.3 iOS系统启动图标

3.2.4 Windows系统启动图标

3.3 具有设计性的图标制作

3.3.1 具有设计性的开关图标

3.3.2 具有设计性的音乐旋钮图标

3.3.3 具有设计性的导航栏图标的绘制3.4 色彩斑斓的图标

3.4.1 粉嫩色系图标

3.4.2 蓝绿色系图标

3.4.3 暖色调图标

第4章扁平化图标设计

4.1 纯色形状扁平化图标

实战1 应用类纯色形状扁平化图标

实战2 生活类纯色形状扁平化图标

4.2 Windows系统中的扁平化图标

实战1 Windows操作系统的扁平化图标实战2 WindowsXP操作系统的扁平化图标4.3 iOS系统中的扁平化图标

实战1 线条扁平化图标

实战2 图形扁平化图标

第5章质感图标的设计

5.1 质感立体图标设计

实战1 立体透明图标制作

实战2 立体毛绒图标制作

5.2 质感写实图标设计

实战1 逼真质感图标

实战2 逼真食物图标

实战3 金属质感写实图标

实战4 逼真生活物品图标

第6章涂鸦风格图标设计

6.1 矢量涂鸦风格图标

实战1 矢量牌游质感风格图标

实战2 矢量趣味涂鸦图标

6.2 可爱动画涂鸦风格图标

实战1 可爱游戏涂鸦风格图标

实战2 可爱动画涂鸦风格图标

6.3 手绘涂鸦界面图标

实战1 手绘涂鸦界面图标

实战2 手绘相机应用图标

实战3 手绘导航应用图标

第7章玩转图标应用

7.1 移动应用和图标

实战1 手机App应用和图标

实战2 苹果手机App应用和图标

实战3 移动iPad应用和图标

7.2 电脑桌面应用图标

实战1 电脑桌面图标

实战2 矢量插画电脑应用和图标

学生自学内容

重要思考题

1.完成简单数字图标设计

2.完成电脑，手机APP图标设计