UI界面教学大纲

课程名称 界面（UI）设计课程编号 课程类别 必修课程学时 48 课程学分 3课程实施方式（即教学组织形式、采用的教学方法及手段）考核方式 考查开设时间 第二学期使用教材 创意UI Photoshop玩转图标设计，Art eyes设计工作室 编著，人民邮电出版社2015年1月内容简介通过案例的方式介绍了如何使用Photoshop进行图标设计。从轻松迈向图标王国、掌控图标创意原则、图标设计与软件操作、扁平化图标设计、质感图标的设计、涂鸦风格图标设计到玩转图标应用和附录逐一讲解，使读者由浅入深，逐步了解使用Photoshop制作图标的整体设计思路和制作过程。课程的目的与任务1、知识目标通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，掌握硬件人机界面与软件人机界面方法、理论与设计实例，探索新的交互技术。2、能力目标通过本课程的学习，学生应该掌握软件的基本操作，并初步具备：UI界面设计能力；3、素质目标通过本课程的教学，我们重要的是培养学生观察生活、体验生活、体验、审美能力、吃苦精神和激发学生的创造能力的方法和手段。课程学习指导UI设计是艺术设计专业（平面设计方向）的专业核心课程，是在图形图像处理、企业VI、标志设计课程基础上的延续和提高。课程几乎涉及到了平面设计专业基础课程的各个方面，课程实践中注重对各专业基础课程如图形设计、编排设计、字体设计、构成设计等课程的统合和整体应用。UI界面设计是一门新的学科，也称之为当代的新媒体，它是跨学科的学术领域，是在各门相关学科中提取相关的内容要素而综合起来的系统学科。在教学过程中，应立足于加强学生实际操作能力的培养，采用项目教学，以工作任务引领提高学生学习兴趣，激发学生的成就动机。教学过程中教师应积极引导学生提升职业素养，提高职业道德。课时分配表章 次内 容学 时第一章轻松迈向图标王国6第二章掌控图标创意原则6第三章图标设计与软件操作6第四章扁平化图标设计6第五章质感图标的设计6第六章涂鸦风格图标设计6第七章玩转图标应用1248课程内容与基本要求第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 PhotoshopCS61.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图标设计参考书目1、教材名称：认知与设计理解UI设计准则主编：美Jeff Johnson 著 张一宁 译 出版社：人民 邮电出版社 出版时间：2011年9月第1版2、人机界面设计罗仕鉴,朱上上,孙守迁著 机械工业出版社 2002年9月 3、人本界面交互