信息化UI设计教案一学期Word文件下载.docx
《信息化UI设计教案一学期Word文件下载.docx》由会员分享，可在线阅读，更多相关《信息化UI设计教案一学期Word文件下载.docx（85页珍藏版）》请在冰豆网上搜索。
绘制输入法皮肤
绘制信息查询界面
案例4：
绘制简单的日历软件界面
第五章手机界面设计
5.1手机界面设计的重要性
5.2手机界面设计的要求
5.3手机界面设计的特征
5.4手机界面设计的基本常识
绘制手机界面中的游戏图标
绘制IOS应用商店图标
绘制IOS操作系统手机界面
绘制Android拨号界面
第六章播放器界面设计
6.1注意人性化设计
6.2播放器界面设计的原则
6.3情感化因素不可忽视
绘制黑色时尚播放器
绘制简约时尚播放器
绘制音乐播放器界面
第七章大作业
教师课时授课计划
（1）
授课班级
授课日期
见日志
学生出勤情况
课题
本次授课目的
及要求
知识目标
1、什么是UI设计；
2、UI设计的分类。
能力培
养目标
1、能够熟记UI设计的定义；
2、能够掌握UI设计的分类。
课堂类型
实践课
教具
多媒体教学设备
考核对象
全体学生
复习旧课要点
新课重点
新课难点
及解决措施
多给学生做演示，讲解制作方法。
课后总结
及改进措施
学生能够熟记UI设计的定义，并掌握UI设计的分类。
备课时间
2017.9.3
主任审阅
年月日
涉及标准
参考工具书
授课内容
时间分配
一、组织教学
1、点名签到
2、复习旧课
二、教学内容
一、UI设计
UI设计即为用户界面设计，全称UI=UserInterface。
UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支。
二、UI设计分类
随着信息技术的高速发展，人们对信息的需求量不断增加，图形界面的设计也越来越多样化。
UI设计主要可以分为手机界面设计、网站设计、软件用户界面设计和游戏界面设计等，不同类型的界面设计风格和特点各不相同。
1.手机界面设计
现如今，手机俨然已经成为普通大众的生活必需品，而手机的功能也越来越完善，很多高端手机的性能甚至及电脑不分高下。
手机界面设计最大的要求就是人性化，不仅要便于用户操作，还要美观大方。
2.网站设计
近年来，随着电子商务的高速发展，国内网站设计行业也正在快速崛起。
从最初的纯文本网页到版式古板，配色拙劣，再到现如今的配色新奇，版式多元化，网站设计得到了长足发展。
3.软件用户界面
用户主要通过软件及各种机器设备进行交流，更确切的说，是软件界面。
为了方便用户使用，软件界面的设计应该简洁美观、易于操作。
4.播放器界面
如今，市场上的各种音乐播放器软件层出不穷，体验者们不再局限于追求软件的强大功能，更对软件界面风格提出了新的要求。
5.游戏界面
相较于其它软件界面来说，游戏界面通常都比较华丽、主题鲜明三维效果应用非常普遍，具有较强的视觉震撼力。
三、学生自由练习及教师指导
四、小结
10分
35分
教师课时授课计划
（2）
1、常见的图像的格式、模式和类型；
2、Photoshop基础操作；
1、能够了解常见的图像的格式、模式和类型；
2、能够掌握Photoshop基础操作。
学生能够了解常见的图像的格式、模式和类型，并掌握Photoshop基础操作。
2017.9.10
一、数字化图像的基础
日常生活中，人们总会和各种各样的图片打交道，这些图片来自不同的渠道，它们的颜色、格式、体积和用途都不尽相同。
常见图像格式：
JPEG格式是目前市面上最常使用的存储格式，它可以提供优质照片质量的压缩格式，是目前所有图像格式中压缩率最高的，
PNG格式主要应用于网络图像，可以保存24位真彩图像，并且支持透明背景和消除锯齿功能，
GIF格式使用的压缩方式会将图片压缩的很小，非常有利于在互联网上传输，此外它还支持以动画方式存储图像。
BMP格式最早应用于微软公司的Windows操作系统，是一种Windows标准的位图图形文件格式。
TIFF格式便于在应用程序和计算机平台之间进行数据交换，是一种灵活的图像格式。
常见图像模式：
在Photoshop中，“图像模式”和“颜色模式”是一个概念，PhotoshopCC中共包括9种颜色模式，分别为RGB模式、CMYK模式、Lab模式、HSB模式、位图模式、灰度模式、多通道模式、双色调模式和索引颜色模式。
常见图像类型：
位图图像也称为点阵图，它最基本的单位是像素，像素呈方块状。
矢量图像是由称作矢量的数学对象定义的直线和曲线构成的，它最基本的单位是锚点和路径，平常所见到和使用的矢量图形作品是由矢量软件创建的。
二、Photoshop基础操作
Photoshop是目前市面上使用最为普遍的图像处理及合成软件，最新的版本为PhotoshopCC本书中的全部操作实例都将使用PhotoshopCC完成。
在使用PhotoshopCC进行设计操作之前，首先需要将该软件安装到计算机中，然后双击桌面上的快捷方式图标即可成功启动
优化配置PhotoshopCC
对于其他类型的专业软件来说，PhotoshopCC算得上是一个消耗系统资源的大户。
为了使PhotoshopCC运行能够更加流畅，各个功能都能正常使用，我们需要在操作前进行简单的设置，使其工作起来更得心应手。
执行“编辑>
首选项>
性能”命令，弹出“首选项”对话框，提高“历史记录状态”的数值，并将剩余容量大、不常使用的本地磁盘指定为暂存盘。
文件的基本操作：
PhotoshopCC文件的基本操作主要包括新建文件、打开文件和存储文件。
图像的变换：
使用PhotoshopCC进行设计制作时，经常需要对各种对象进行变换，例如移动位置，缩放、旋转和翻转图像等。
这些操作大部分可以通过执行“编辑>
变换”命令来完成。
设置前景色和背景色：
设置前景色和背景色也是使用极其频繁的操作。
在PhotoshopCC中，用户可以通过3种方式设置前景色和背景色，分别为使用“拾色器”对话框，使用“颜色”面板和使用“色板”面板。
按钮的应用格式：
使用PhotoshopCC制作简洁的开机按钮后，还要将其存储为Web所用格式的文件，才能应用于网页。
常用的Web所用的格式有JPG、PNG和GIF。
实现不同的渐变效果：
渐变色可以实现多个颜色之间平滑过渡的填充效果，在UI设计中使用极为频繁。
在PhotoshopCC中，用户可以通过多种方法创建渐变色。
教师课时授课计划（3）
2.1了解图标设计
2.2图标设计的绘制原则
1、什么是图标设计；
2、图标设计的绘制原则；
1、能够了解什么是图标设计；
2、能够熟记图标设计的绘制原则。
学生能够了解什么是图标设计，并熟记图标设计的绘制原则。
2017.9.17
图标是具有指代性的计算机图形，具有高度浓缩并快速传达信息和便于记忆的特点。
图标的应用范围非常广泛，从各种软硬件到现实生活到处都可以看到各种图标的影子，可以说我们的生活离不开图标。
什么是图标：
图标的概念分广义和狭义两种。
从广义上来说，图标是指具有指代意义的图形符号，具有快速传达信息和便于记忆的特性。
它的应用范围很广，软硬件网页社交场所公共场合无所不在，例如各种交通标志和各种软件图标等。
图标设计的作用：
一个图标是一个小的图片或对象，代表一个文件、程序或命令。
图标可以帮助用户快速执行各种命令或打开应用程序。
此外，图标也用于在浏览器中快速展现内容。
图标设计的意义：
作为UI界面设计的关键部分，图标在UI交互设计中无处不在。
一套成功的图标设计不仅需要质感精美，引人眼球，更重要的是具有良好的可用性。
一般来讲，具有强烈质感的图标可以为网页增添亮点，给浏览者留下深刻的印象。
二、图标设计的绘制原则
相较于文字来说，图标有着很明显的优势。
比文字更直观，也更漂亮。
在制作图标时，我们也应该相应的强化图标的优势，降低劣势。
未来软件界面的设计方向是简洁、实用、高效。
可识别性原则：
可识别性原则是图标设计的首要原则。
可识别性就是指设计的图标应该能够准确表达相应的操作，让浏览者一看到就能明白它是用来做什么的。
及环境协调的原则：
图标制作出来以后最终被应用到图形界面中才能体现出价值，独立存在的图标是没有意义的。
差异性原则：
差异性是指图标之间有明显的差别，能够让人一眼区分出来不同的图标，这样才能被浏览者所关注和记忆，并对界面内容留有印象。
这是图标设计的重要原则之一，同时也是最容易被设计者忽略的一条原则。
视觉效果的原则：
视觉效果是指图标设计应该刻画质感和细节，使其更加美观，满足使用者的视觉要求。
创造性原则：
一般在制作图标时都会创建较大尺寸的文档，或者使用矢量形状创建图标，制作完成后也会将其保存为不同的尺寸，以满足不同界面的使用。
教师课时授课计划（4）
1、Photoshop图层的基本操作；
2、案例的制作；
1、能够掌握Photoshop图层的基本操作；
2、能够完成本章案例。
学生能够掌握Photoshop图层的基本操作，并完成本章案例。
2017.9.24
Photoshop图层的基本操作
“图层”在PhotoshopCC中是一个至关重要的概念，所有的操作和编辑都及之有密切的关系。
那什么是“图层”呢？
简言之，“图层”就如同一些堆叠在一起的透明纸张，每一张都存储着不同的图像。
这些图像以一定的顺序排列在一张，从而构成一副完整的图像。
新建图层
PhotoshopCC中提供了很多种创建新图层的方法，最常用的两种分别为是直接在“图层”面板中创建和通过菜单命令创建。
在“图层”面板中创建新图层
使用“新建”命令新建图层
选择图层
在PhotoshopCC中对文件进行操作时，必须首先选中相应的图层，才能保证当前操作的正确应用。
选择图层的操作通常也在“图层”面板中进行。
1.可以选择单个图层：
2.可以选择多个连续的图层
3.可以择多个不连续的图层
复制、移动图层
复制的方法有很多种，同一文档之间的复制、不同文档的复制、通过命令复制和复制局部图形。
在同一文档之间复制图层
若要在同一文档中复制图层，只需将相应的一个或多个图层直接拖曳至“图层”面板下方的“创建新图层”图标上即可。
在不同文档之间复制图层
若要在不同文档之间复制图层，选中需要复制的图层，执行“图层>
复制图层”命令，或单击“图层”面板右上角的扩展图标，在弹出扩展菜单中选择“复制图层”命令，弹出“复制图层”对话框，定需要复制到的文档，然后单击“确定”图标即可。
使用“通过拷贝的图层”命令复制图层
除了将图层拖曳到“创建新图层”图标复制图层外，用户也可以执行“图层>
新建>
通过拷贝的图层”命令，或按快捷键【Ctrl+J】快速复制，如果没有创建选区，执行该命令可以快速复制当前图层。
复制局部图形
复制局部图像及复制整个图层的方式类似。
使用“框选工具”或者“魔棒工具”将要复制的图形创建选区，执行“图层>
新建图层>
通过拷贝的图层”命令，或直接按快捷键【Ctrl+J】，即可将选区内的图像复制到新的图层中。
鼠标直接拖动
若要调整图层顺序，先选中相应的图层，然后将其拖曳到新的位置即可。
“排列”命令
用户也可以对当前的图层执行“图层>
排列”命令，根据需求在子菜单中分别选择置为顶层、前移一层、后移一层、置为底层或反向选项调整图层顺序。
重命名图层、删除图层
重命名图层：
若要对图层名称进行重命名，双击相应图层的名称部分，激活编辑模式，直接输入新的名称，然后按【Enter】键确认命名。
删除图层：
先在“图层”面板中选中相应的图层，单击面板下方的“删除图层”图标，或者直接用鼠标拖曳图层至该图标上删除。
添加图层样式：
若要为图层应用“图层样式”，先选中相应的图层，单击面板下方的“添加图层样式”图标，在弹出的菜单中选择需要的选项，然后在弹出的“图层样式”对话框中设置参数值即可。
画笔工具
在PhotoshopCC中，“画笔工具”的应用比较广泛，使用它可以绘制出比较柔和的线条，其效果如同用毛笔画出的线条。
该工具
可以设置画笔的笔尖形状、笔刷尺寸、不透明度、流量和喷枪等属性。
如果结合“画笔”面板中的各项功能，还能绘制出更多变的笔触效果。
使用“画笔工具”时，在英文状态下，按【[】键可减小画笔的直径，按【]】键可增加画笔的直径，对于实边圆、柔边圆和书法画笔，按【Shift+[】键可减小画笔的硬度，按【Shift+]】键则增加画笔的硬度。
按键盘上的数字键可以跳调整工具的不透明度。
按【1】时，不透明度为10%，按【5】时，不透明度为50%，按【75】时不透明度为75%，按【0】时不透明度为100%。
预设画笔工具
单击工具箱中的“画笔工具”按钮，在选项栏中单击“画笔”选项右侧的按钮，可以打开“画笔预设选取器”。
可以看到很多不同形状的画笔，单击任意画笔即可使用该画笔形状。
PhotoshopCC提供了多种类型的画笔，为了方便选取画笔，用户可以通过单击“画笔预设选取器”面板中右上方的菜单按钮，在弹出的下拉菜单中改变“画笔预设选取器”的显示方式，在该菜单中还提供了其它相应的选项供用户选择。
自定义画笔
当用户自定义特殊画笔时，只能定义画笔的形状，而不能定义画笔的颜色。
因为使用画笔绘画时，颜色都是由前景色的颜色决定的。
钢笔工具
PhotoshopCC中的“钢笔工具”，可用于绘制具有最高精度的路径，“钢笔工具”属于矢量绘图工具，其优点是可以勾画出平滑的曲线，在缩放或者变形之后仍能保持平滑效果。
当无法使用普通的形状工具创建出复杂的图形时，就需要用“钢笔工具”进行创建。
创建路径
使用“钢笔工具”可以创建闭合或者不闭合的路径，单条或多条路径。
使用“钢笔工具”在画布中任意位置单击插入第一个锚点。
继续在其它位置单击插入第二个锚点，并拖曳控制手柄控制路径形状。
使用相同方法插入更多的锚点，并拖曳控制手柄调整路径形状。
若要闭合路径，单击第一个锚点，并拖曳控制手柄调整路径形状。
松开鼠标，完成该闭合路径的创建。
编辑路径
添加锚点工具：
使用“添加锚点工具”在路径上单击，可在单击点添加一个锚点。
删除锚点工具：
使用“删除锚点工具”单击路径上的某一个锚点，可以将其删除。
转换点工具：
使用“转换点工具”单击路径的平滑点，可以将其转换为角点；
使用“转换点工具”单击路径的角点，并拖动控制手柄调整路径形状，可以将其转换为平滑点。
路径选择工具：
使用“路径选择工具”单击路径的任意部分，即可将整条路径全部选中。
例如要复制路径，或者单击调整复合路径中的单个路径，就需要首先使用“路径选择工具”选中相应的路径。
直接选择工具：
用户可以使用“直接选择工具”单击选择路径上的单击锚点，或者拖选多个锚点，并且可以调整每个锚点的控制手柄。
路径的变换操作
使用“路径选择工具”选择路径，执行“编辑>
变换路径”命令，在该命令的子菜单中，包括各种变换路径命令，执行路径变换命令时，当前路径上会显示出定界框、中心点和控制点。
形状工具
PhotoshopCC的“工具箱”中包含5个形状工具，它们分别是矩形工具、圆角矩形工具、椭圆工具、多边形工具、直线工具和自定形状工具。
这些工具可以帮助用户快速创建出许多规则的、较为常用的形状，被大量应用于UI设计及制作。
矩形工具、圆角矩形和椭圆工具
顾名思义，矩形工具、圆角矩形工具和椭圆工具就是用来创建矩形、圆角矩形和椭圆的，用户只需要在“工具箱”中单击选择相应的工具，然后在画布中拖动即可创建出矩形、圆角矩形或椭圆。
多边形工具和直线工具
“多边形工具”用于在文档中创建多边形和星形，“直线工具”用于在文档中创建直线。
自定义形状
“自定形状工具”允许用户创建一些出比较常用的形状，例如各种箭头、花纹、动物和标志等，这些形状通常无法直接使用规则的形状工具创建出来。
教师课时授课计划（5）
1、什么是网页UI；
2、网页界面构成元素；
1、掌握网页UI概念；
2、掌握网页界面构成元素；
多给学生展示作品并分析，是学生从讲解中领会制作方法。
学生能够掌握网页UI概念，并掌握网页界面构成元素。
2017.10.8
一、网页UI
网页是一个包含文字、图像和各种多媒体文件的Html文档，我们根据网页的具体内容将其划分为环境性界面、功能性界面和情感性界面3种类型。
什么是网页设计：
通俗的说，一张网页就是一个Html格式的文档，这个文档又包含文字、图片、声音和动画等其他格式的文件，这张网页中的所有元素被存储在一台及互联网相连接的计算机中。
当用户发出浏览这张页面的请求时，就由这台计算机将页面中的所有元素发送至用户的计算机，然后再由用户的浏览器将这些元素按照特定的布局方式显示出来，就是我们实际看到的网页的样子。
网页设计的分类：
网页界面根据具体内容和风格的不同，大致可以分为三大类型：
环境性界面、情感性界面和功能性界面。
1.环境性界面
环境性网页界面所包含的内容非常广泛，包括经济、文化、科技、时事政治、历史、民族、宗教信仰和风俗习惯等。
2.情感性界面
人是有感情的，当一件事物真正的感动了受众，引起人们在情感上的强烈共鸣，就会被牢牢的记住，网页设计也是如此。
3.功能性界面
功能性界面所占的比例很大，主要是用来展示产品和相关信息的，它实现的是使用性内容。
二、网页界面构成元素
网页中的元素多种多样，其中比较常见的有文字、图像、动画、音频和视频等，还有通过代码实现的各种动态交互效果。
这些元素都各有特点，合格的设计师总是可以将不同的元素有条有理的组合在一起，制作出一张美观协调的页面。
文字：
文字最大的优
升级会员 