信息化UI设计教案一学期Word文件下载.docx
- 文档编号:16922884
- 上传时间:2022-11-27
- 格式:DOCX
- 页数:85
- 大小:3.66MB
信息化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.功能性界面
功能性界面所占的比例很大,主要是用来展示产品和相关信息的,它实现的是使用性内容。
二、网页界面构成元素
网页中的元素多种多样,其中比较常见的有文字、图像、动画、音频和视频等,还有通过代码实现的各种动态交互效果。
这些元素都各有特点,合格的设计师总是可以将不同的元素有条有理的组合在一起,制作出一张美观协调的页面。
文字:
文字最大的优
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 信息化 UI 设计 教案 一学期
![提示](https://static.bdocx.com/images/bang_tan.gif)