个性化-《APP交互设计》-实验教学大纲

个性化-APP交互设计》-实验教学大纲

课程名称 :《APP交互设计》-个性化课程

学时/学分:26/2(其中上机16学时)

公选通识课程

开课学院:文法学院

系:教育技术学系

教研室: 教育技术学教研室

承担实验室: 文法学院实验中心教育技术实验室

一、实验教学目的和任务

本课程结合实际案例分析,引导学生自主学习APP交互设计的基本理论和制作操作方法。实验教学验证课堂教学的理论,力求让学生理解和掌握人机交互技术中最基本、最广泛应用的概念、原理、理论和算法以及基本技术和方法,更好地掌握《人机交互技术》课程教学大纲要求的内容。

实验上机主要结合经典交互与用户体验成功案例进行讨论、分析,让学生领悟到交互与用户体验的最新知识和实用技术方法和手段。考虑到是公选课,选课同学的学习起点弱,所以利用一半时间进行平面设计基本训练,尽可能帮学生打动自主学习的基础和实践技能。

 

二、实验项目及学时分配 

序号

实 验 项 目 名 称

实验学时

每组人数

实验类别

实验类型

1

图层的使用练习

2

1

其他

验证性

2

选区的创建和编辑练习

2

1

其他

验证性

3

图像的绘制练习

2

1

其他

验证性

4

图像的编辑练习

2

1

其他

验证性

5

Web界面设计

4

1

其他

验证性

6

MindManage入门操作

4

1

其他

验证性

注:实验类别:基础、专业基础、专业课、其他

    实验类型:演示型、验证性、综合性、设计研究性、其他

 

三、推荐教材、参考书、实验指导书及自编教材(未出版)

推荐教材

About Face3交互设计精髓》,2014.9.1主编:库伯,出版社:电子工业出版社

参考书:

APP这样设计才好卖》,2014.12.16 主编:池田拓司, 出版社:人民邮电出版社

《设计师要懂心理学》,2013.10.1主编:weinschenk,出版社:人民邮电出版社

 

四、单项实验内容和要求

项 目 名 称

实验内容

实验要求

图层的使用

练习

让学生了解并掌握图层的基本使用方法

必修

选区的创建和编辑练习

让学生了解并掌握选区工具、描边、填充、渐变等工具的使用方法

必修

图像的绘制练习

让学生了解并掌握图像绘制工具的使用方法和综合应用的能力

必修

图像的编辑练习

让学生了解并掌握图像编辑工具的使用方法

必修

Web界面设计

1、熟悉Web站点的信息交互模型和结构

2、熟悉Web界面设计的基本思想和原则

3、掌握Web界面设计的工具和技术

必修

MindManage入门操作

让同学们了解并掌握MindManage基本使用方法

必修

注:实验要求:选修、必修、其他

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

实验一  图层的使用练习... 4

实验二  选区的创建和编辑练习... 10

实验三  图像的绘制练习... 15

实验四  图像的编辑练习... 20

实验五  Web界面设计... 23

 

 

 

 

 

 

 

 

 

 

 

 

实验一  图层的使用练习

一、实验目的:让学生了解并掌握图层的基本使用方法

二、实验要求:要求能够按照试验指导书的步骤完成给定的练习

三、实验器材:装有Photoshop的计算机

四、实验步骤:

1、收集所需素材图片

2、打开Photoshop软件并先做好必要的设置

3、按照要求完成图片的处理

4、在实例操作中更好的去理解图层的概念

5、保存好修改后图片,并完成实验报告

五、实验内容:

1、第一步,选择你的目标图片。图片的颜色最好不要太过繁杂,而且,周围和中心颜色反差较大的图片效果会比较好。大家可以根据自己的喜好选择不同的图片,自己的相片也可以拿来使用。


  2、复制背景层,将背景层 副本重命名为1”;再次复制,将副本层重命名为2;照这样,将背景层复制4次,四个副本层分别命名为1234。我们在这四个副本层中,分别制作构成图像的拼板。在这里我们只做了四个图层,大家也可以复制多个图层,依据自己的需要而定。


  3、我们从位于图层面板的最顶端图层1”开始,隐藏除图层1”之外的所有层。用矩形选框工具选择一个矩形,这个矩形就是拼板的基础形状。用选择>变化选区命令(注意:这里选择变化选区命令,如果直接用Ctrl+T,变换的则为选区内的图像),将选区扭转、做自由变换,然后反选,删除选区图像,取消选择。


  4、按照刚才的方法,依次显示每个图层,用选框工具选择不同大小的矩形选框,自由变换,反选后删除。适当注意选区大小以及变换的位置,尽量在作图的时候考虑到美观的效果。


  5、下面我们要为拼板添加立体效果。打开背景层,这样你会较容易看清图像的变化。选择图层1”,双击图层,进入图层样式面板,先选择斜面和浮雕,你可以按照默认样式(大多数时侯,默认样式也能够看得出效果)选择确定,如果对拼板有特殊要求,可以更改数值。当然也可以尝试投影等其他效果。直到

调整到自己满意的效果,这里仅使用了浮雕效果的默认值。


  6、设置好一个图层样式,其他的图层如果需要相同效果,重复设置就较为麻烦,多层应用同一种样式的情况下,我们可以复制图层样式。有两种方式可以实现图层样式的复制:一种是点击右键,选择复制图层样式菜单,然后在需要的图层中点击右键粘贴即可。另一种是用鼠标点击你希望复制的样式,不要放松鼠标,把它拖动到需要复制的图层中,放松鼠标,新图层就应用了你所拖动的样式。拖动的过程中,鼠标一直显示为抓手工具的形状。如果你希望只应用某一种图层样式,那么拖动的方法更为快捷,可选择所有的样式(拖动效果的选项),也可选择其中某种效果。依次对其他图层进行设置。
           
  7、最后,根据自己需要可调整图层位置。(图07


  掌握了这个方法后,可以选择不同的图片制作不同数量拼板图像,不过要注意图层顺序,达到合理的叠放顺序。还可以稍微改变阴影不透明度等细节。
              

六、实验报告:

1、结合实例能够更好的提高学生的兴趣,也能够更好的理解有关图层的概念。

2、较好地完成此试验,可自行完成书上或其他关于图层的简单操作的一些练习和实例。

3、教师可依据内容做实例的调整。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

实验二  选区的创建和编辑练习

一、实验目的:让学生了解并掌握选区工具、描边、填充、渐变等工具的使用方法

二、实验要求:要求能够按照试验指导书的步骤完成给定的练习

三、实验器材:装有Photoshop的计算机

四、实验步骤:

1、收集所需素材图片

2、打开Photoshop软件并先做好必要的设置

3、按照要求完成图片的处理

4、在实例操作中更好的去熟练工具的使用方法

5、保存好修改后图片,并完成实验报告

6、参照此试验步骤可完成课后的习题练习以及相关的一些练习

五、实验内容:

1、新建一个空白文档,具体参数设置可自己定义。

2、把前景色设置为R:113G:165B:248,背景色设置为白色。

3、选择渐变工具 ,在“渐变编辑器”对话框中进行设置。设置好后,选择线性渐变方式填充背景色。(效果如图)

4、选择椭圆选框工具 在渐变的背景上,拖动鼠标绘制一个圆形选区,然后对其进行羽化。

 

 

5、以背景色(白色)填充选区,创建出雪花的效果,快捷键为Ctrl+Delect,再多次重复这两步操作(创建选区、羽化及填充白色),以得到多个雪花,注意每次创建的选区的大小和羽化的强度是不同的。得到如图的效果。

            

6、打开配套光盘中“卡通.gif”图片,以此图片的外型作为我们雪人的外型。(为了选取的方便,我们使用魔棒工具 选取空白的区域,然后反选得到我们所需要的选区,这样选择较为方便)。

                     

7、将选择好的选区,拖动到我们的窗口中去,并选择“选择/变换选区命令,把拖进来的选区大小进行调整,并放置到合适的位置。

       

8、同样选择渐变工具,选择较浅的蓝色,为我们刚才调整的雪人的选区填充渐变效果。并选择“编辑/描边”命令为我们的区进行描边,得到我们的小雪人大体形态。(如图所示)

       

9、选择工具箱中的椭圆选框工具 ,配合我们键盘的Shift键,绘制一个正圆的选区,用黑色填充选区,得到雪人的黑眼睛的效果。

10、用同样的办法创建比刚才较小些的正圆选区,用白色为其填充,得到眼睛的白色部分。(注意:如果在创建之后,需要对眼睛进行调整的话,就在不同的图层上创建,调整好之后,若是觉得图层过多,可再进行合并)

11、运用类似的方法,创建三角形选区(可使用多边形套索工具得到三角形的选区)或是圆形选区,填充不同的色彩,并进行描边,得到鼻子和钮扣等形态。效果如图所示

12、下面我们为小雪人做个小帽子,我们选择配套光盘中的树叶的文件,使用树叶的外型作为帽子的选区,方法和我们获得雪人的方法相同,这里不再重复。同样为选区填充渐变效果。完成我们小雪人的绘制。

13、我们也可以为图像再增加些装饰,同学们在制作的时候,颜色的选取可以有所改变,但是要注意色彩的搭配和整体的协调性。

六、实验报告:

1、结合实例能够更好的提高学生的兴趣,也能够在学生制作的过程中发现问题。

2、较好地完成此试验,可自行完成书上或其他有关的一些练习和实例。

3、教师可依据内容做实例的调整。可依据学生掌握的情况和课时的具体情况,选择相同类型的试验。

 

 

 

 

 

 

 

 

 

实验三  图像的绘制练习

一、实验目的:让学生了解并掌握图像绘制工具的使用方法和综合应用的能力

二、实验要求:要求能够按照试验指导书的步骤完成给定的练习

三、实验器材:装有Photoshop的计算机

四、实验步骤:

1、打开Photoshop软件并先做好必要的设置

2、按照要求完成图形的绘制

3、在实例操作中更好的去熟练工具的使用方法

4、保存图片,并完成实验报告

5、颜色的选择、文件大小等可依据自己的需要、喜好进行修改

6、可尝试不同的方法创建,如月亮的创建方法,把所学知识综合运用

7、参照此试验步骤可完成课后的习题练习以及相关的一些练习

五、实验内容:

1、新建一个空白文档,具体参数设置可自己定义。

2、为背景填充颜色。

3、新建图层,选择椭圆工具,注意创建方式的选择,将前景色设置为白色,在图像窗口的左下方按住Shift键绘制白色圆形。

4、分别将前景色设置为玫红色、浅玫红色、粉红色和浅粉色,再绘制4个圆形,如下排列。

   (提示:若对于圆形的位置需要调整,可把圆形分别建在不同的图层中,方便进行调整)

5、新建图层,将前景色分别设置为浅黄色和白色,在图像窗口右下方绘制两个圆形。

6、选择工具箱中的魔棒工具,选取白色圆形,按Delete键将其删除,然后选取图像窗口中的黄色图形,将选区变换并填充为黄色与浅黄色。

7、自由变换,逆时针旋转,完成变换并取消选区,得到月亮的形态。

   (提示:也可用其他方法完成月亮的绘制,如选区的使用,用选区的加减来完成,也是可以的,而且能够拓展思维并对以前所学的知识进行复习。)

8、新建图层,是用工具箱中的多边形工具,将工具属性栏设置为如图所示,将前景色设置为白色,在图像窗口中下方创建五角星形。

 

9、选择工具箱中的线条工具绘制白色线条。

10、选择雪花图形,绘制雪花的形态。

11、使用画笔工具写出文字,完成最后效果。

(注意:图层的使用,需要修改的,就放在不同的图层中,方便修改)

13、我们也可以为图像再增加些装饰,同学们在制作的时候,颜色的选取可以有所改变,但是要注意色彩的搭配和整体的协调性。

六、实验报告:

1、结合实例能够更好的提高学生的兴趣,也能够在学生制作的过程中发现问题。

2、较好地完成此试验,可自行完成书上或其他有关的一些练习和实例。

3、教师可依据内容做实例的调整。可依据学生掌握的情况更换其他实例,实例可以不同,能够达到相同的实验目的就可以了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

实验四  图像的编辑练习

一、实验目的:让学生了解并掌握图像编辑工具的使用方法

二、实验要求:要求能够按照试验指导书的步骤完成给定的练习

三、实验器材:装有Photoshop的计算机

四、实验步骤:

1、打开Photoshop软件并先做好必要的设置

2、按照要求完成图形的绘制

3、在实例操作中更好的去熟练工具的使用方法

4、保存图片,并完成实验报告

5、颜色的选择、文件大小等可依据自己的需要、喜好进行修改

6、参照此试验步骤可完成课后的习题练习以及相关的一些练习

五、实验内容:

1、打开配套光盘的实例素材名为果树的图片,使用图案生成器命令,打开图案生成器对话框。

2、使用举行工具在图像中绘制一格区域作为样本,并在位移下拉列表中选择垂直选项。

3、单击生成按钮产生图案,如不满意可单击再次生成。

4、单击好,应用生成的图案,然后选择图像菜单的图像大小命令打开对话框,取消其中的约束比例复选框,在宽度文本框中输入文件大小。

(可依据自己的喜好,更换作为背景的图片,但是要注意整体色彩的协调性)

 

5、打开“香蕉”文件使用抽出工具抽出图像。

(注意抽出时边缘的处理要仔细)

6、按照此方法,依次完成其他水果图片的抽出工作,一定要注意抽出边缘的细节部分,注重细节的处理,在后面对图片合成时才会有好的效果,希望同学们无论处理什么样的图片都要注意细节处理,以达到更好的视觉效果。

7、使用移动工具把需要合成的各水果图片移到图片中去。

8、依据图片大小进行调整,使用变换工具进行大小的调整。

(注意等比例的放缩)

9、注意图层顺序的调整。

10、载入文字选区,进行描边,也可自己进行文字输入。

11、进行适当调整,完成最后效果。

六、实验报告:

1、结合实例能够更好的提高学生的兴趣,也能够在学生制作的过程中发现问题。

2、较好地完成此试验,可自行完成书上或其他有关的一些练习和实例。

3、教师可依据内容做实例的调整。可依据学生掌握的情况更换其他实例,实例可以不同,能够达到相同的实验目的就可以了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

实验五  Web界面设计

  实验目的和要求
1) 熟悉Web站点的信息交互模型和结构

2)熟悉Web界面设计的基本思想和原则

3)掌握Web界面设计的工具和技术

  预备知识

Web界面设计是人机交互界面设计的一个延伸,是人与计算机交互的演变。Web界面设计与站点外观直接相关,站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心,如何根据人的心理、生理特征,运用技术手段,创造简单、友好的界面,是Web界面设计的重点。

(1) Web信息交互模型

用来解释Web的人机界面性质的一个模型,它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达,对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。

模型涉及到信息的三种类型

1)数据:当一条信息被反复、简单的提供时称为数据,比如机票价格。

2)复杂信息:而用来叙述事件时称为复杂信息,如多媒体信息。

3)过程性信息:在信息有明确目标,并相互作用时称为过程性信息,如在线练习、在线测试等。

模型涉及到信息的两种特性:1)动态性:信息在不断的变化,具有动态性;2)一致性:信息元素的组织方式具有一致性

(2)Web信息设计模型

是解释Web人机界面性质的另一个模型,是一种研究网页的信息设计模型。

设计模型中要考虑到信息的两个方面:1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。

(3)Web界面设计基本原则

1)        了解浏览者的心理状态

2)        内容与形式的统一

3)        减少浏览层次

4)        特点明确

5)        统一整体的形象

6)        Web界面设计的3C原则

(4)Web界面概要设计

1)Web界面框架设计:Web网站规划 、建立原型系统、详细设计、正式实施

2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格

3)Web界面设计的语言与文化:网站应设置多语言选择,在网站设计和建设中进行跨文化研究

(5)Web界面设计要素

n      Web界面布局

n      Web界面的色彩

n      Web界面的字体

n      Web界面的动画与多媒体

n      Web界面的导航 

(6)Web界面设计技术与工具

要设计好的Web界面,需要有良好的设计工具,随着Internet网络的发展,国际组织和许多互联网软件开发商制订了若干标准,开发了不同的Web界面设计工具。主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScriptJavaApplet、服务器端脚本语言。

页面编辑器主要包括:1)MicroSoft公司 Frontpage2)Macromedia公司 DreamweaverDreamweaver对于动态网页的支持特别好,可以轻而易举地做出很多眩目的互动页面特效,DreamweaverFlashFirework并称为Macromedia的网页制作三剑客。

辅助工具主要包括:1)AceHTML Pro 6.0—全功能的 HTML & JavaScript 编辑器;2)Antenna Web Design Studio—强大的可视化网页设计软件;3)Easy HTML—简单的所见即所得的HTML 编辑器,有固定、类似浏览器的界面;4)Easy Web Editor—是一个 Web 发布工具,允许不了解HTML而在所见即所得环境中编辑Web网页。

 

实验内容与步骤

() 实验内容:

要求根据Web界面设计的原则(简洁、一致性、对比度),进行Web界面规划、概要设计和设计要素的选择,利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。

()实验步骤

1)选择一种界面设计工具,并熟悉它;

2)针对一个具体的网站(学校、个人、公司)设计应用,进行Web界面规划和概要设计;

3)选择WEB界面设计要素,设计出网页