ui设计教案18个课时

备课本
Lesson Preparation
_2013__--__2014_学年第_一_学期
Academic Year - Semester
课程名称UI设计
Course
教材名称及版本UI设计
T extbook and Edition
授课班级2011平面1班Class
教师姓名黎丹
Teacher
审核人周增辉Approver
填写说明
1、此备课本用来书写教案，适用于所有专职教师、兼职教师和兼课教师。

2、所有承担教学任务的教师需书写纸质版教案，如因使用多媒体教学需要和教学任务繁重，可用电子版教案，但格式必须按纸质版格式，且所有教案的书写应与学期授课计划相符合。

3、备课过程中的各个环节和要素可根据实际授课内容进行填写。

如：
授课课题：（教学章、节、标题或项目名称）
教学目标和要求：（教学目标一般说应包含知识教学、能力发展和思想教育三方面内容，教学要求是指识记、理解、简单应用、综合应用等层次）
教学重点和难点：教学重点，是为了达到确定的教学目的而必须着重讲解和分析的内容；教学难点，是就学生的接受情况而言的，学生经过自学还不能理解或理解有困难的地方，即可确定为教学难点。

教学方法：（讨论、启发、演示、辩论、讲练结合、案例教学、情境模拟等）
教学手段：（多媒体教学、录像带、挂图、幻灯片等）
授课时间：第周
课时累计：
教学过程：（体现教学步骤，包括时间分配和教学内容教学进程）作业布置：（含思考题、讨论题）
课后反思：（因为课后反思是教案实施效果追记，课前还不能打印，只能课后用笔手写）
4、备课本的审核人为各教研室（项目中心）主任。

编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。

UI的本意是用户界面，是英文User和interface 的缩写。

从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来。

做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。

其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。

一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。

界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。

检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。

所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

教学步骤及教学内容时间分配3）依赖认知而非记忆。

譬如打印图标的记忆，下拉菜单列表
中的选择等要符合业界习惯。

4）提供视觉线索。

界面要有吸引力，如下图：
5）提供默认(default)、撤消(undo)、恢复(redo)等功能。

这
方面好多同学可能不是很了解，但是你要做好一个真正的UI
设计师，那么功能方面你还是要有一定的掌握喔！当然啦，
同学也不用怕，只要你用心，其实很简单的！Just do it!
6）提供界面的快捷方式。

7）尽量去使用真实事物的类比。

如电话、打印机等的图标设
计，尊重用户以往的使用经验和使用习惯。

: r: F1 A7 @' A9
8）完美视觉的清晰度。

条理清晰，图片、文字的布局和隐喻
不要让用户去猜。

如图
授课课题人本界面
教学
目标和要求
通过本章学习使学生了解UI设计案例展示欣赏与分析
教学
重点和难点教学重点：掌握UI设计案例展示欣赏与分析。

教学难点：掌握UI设计案例展示欣赏与分析。

教学方法案例教学教学手段多媒体
授课时间第十周课时累计12
教学过程
教学步骤及教学内容时间分配导入新课
第一节图标
图标是具有明确指代含义的计算机图形。

其中桌面图标是软件标识，界面中的图
标是功能标识。

同学们主要在以下几个方面来考虑：
1 造型；
2 颜色；
3 艺术性；
4 创造性；
5 统一性；
我收集了一些图标的文件，我们接下来可以分享一下。

第三节手机界面设计
同学们主要在以下几个方面来考虑：
1 造型；
2 颜色；
3 艺术性；
4 创造性；
5 统一性；
我收集了一些图标的文件，我们接下来可以分享一下。

第四节播放器
同学们主要在以下几个方面来考虑：
1 造型；
2 颜色；
3 艺术性；
4 创造性；
5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。

第五节系统界面
设计、标签设计、图标设计、滚动条及状态栏设计、安装过程设计、包装及商品化。

如下图：直观的按钮设计
二．图形界面的分类
随着科技的发展，人们对信息的需求量也在不断的增多，所以图形界面也越来越多样化和细分化，不同的图形界面在设计上也会有不同的特点。

图形界面可以分为以下几类：
●软件用户界面：软件只是一种工具，然而人们与软件
的交互性操作都是通过软件界面来进行的，所以软件
界面的设计不仅要美观而且要易用。

●网络界面：网络的发展带来的网站界面设计的繁荣，
随着网络的发展，网站设计已经从最初的纯文字内容
发展到现在的包含图像、视频、动画等多种媒体的形
式。

网站界面必须具有独立性和创意性。

在网站界面
设计中，最重要的是使用户方便地查找信息，并能够
感受到方便操作带来的乐趣。

如下图的咖啡网站页面
●手机界面：随着科技的发展，手机的功能也越来越强
大，手机界面的设计要人性化，不仅要方便使用，还要美观。

如下图
●游戏界面：游戏软件界面的制作通常比较华丽、主题
鲜明，三维效果十分普遍，所以游戏中的人物或物品为主体，视觉效果占十分重要的地位。

播放器界面：在激烈的市场竞争中，软件产品仅有强大的功能是远远不够的，将易用性与美观相结合，才能适应用户的需要，从而创造出更高的价值。

授课课题界面的整体设计--UI设计流程
教学
目标和要求
通过本章学习使学生了解UI设计原则、流程。

教学
重点和难点教学重点：掌握UI设计原则、流程。

教学难点：掌握UI设计流程。

教学方法案例教学教学手段多媒体
授课时间第十周课时累计16
教学过程
教学步骤及教学内容时间分配导入新课:
第一节UI设计原则
1.简易性
界面的简洁
UI设计图片
是要让用户便于使用、便于了解、并能减少用户发生错误选择的
可能性。

一的衡量方法。

因此需要对目标用户进行调查取得反馈。

交互行为一致
在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。

但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

可用性原则
可理解
软件
要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：删除操作元素。

用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加。