人机交互实验3报告解读

1、布力堂4/唐实验报告（/学年第学期）课程名称人机交互基础教程实验名称Web界面设计实验时间日指导单位计算机软件学院指导教师学生姓名班级学号学院（系）专 业实验报告实验名称Web界面设计指导教师实验类型 设计实验学时3实验时间一、实验目的1）熟悉Web站点的信息交互模型和结构2）熟悉Web界面设计的基本思想和原则3）掌握Web界面设计的工具和技术二、实验原理Web界面设计是人机交互界面设计的一个延伸, 是人与计算机交互的演变。 Web界面 设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人 性化的设计是 Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，

2、创造 简单、友好的界面，是 Web界面设计的重点。（1） Web信息交互模型用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对 于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取 分别受到两者认知结构的制约。模型涉及到信息的三种类型1）数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。2）复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。3）过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在 线测试等。模型涉及到信息的两种特性：1）动态性：信息在不断的变化，具有动态性；2）一致性： 信息元素的组织方式具有

3、一致性（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界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨

4、 文化研究(5)Web界面设计要素Web界面布局Web界面的色彩Web界面的字体Web界面的动画与多媒体Web界面的导航(6)Web界面设计技术与工具要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织 和许多互联网软件开发商制订了若干标准， 开发了不同的 Web界面设计工具。主要的技术 包括超文本标记语言 HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。页面编辑器主要包括：1)MicroSoft公司 的Frontpage； 2)Macromedia公司 的 Dreamweaver, Dreamweaver对于动态网页的支持

5、特别好，可以轻而易举地做出很多眩目 的互动页面特效，Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。辅助工具主要包括：1)AceHTML Pro 6.0一全功能的 HTML & JavaScript编辑器； 2)Antenna Web Design Studio-强大的可视化网页设计软件；3)Easy HTML 一简单的所见即 所得的HTML编辑器，有固定、类似浏览器的界面；4)Easy Web Editor-是一个 Web发 布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。三、实验内容与步骤（一）实验内容：要求根据Wet#面设计的

6、原则（简洁、一致性、对比度）,进行We册面规划、概要设 计和设计要素的选择，利用一种界面设计工具 （Dreamweaver / Frontpage）完成网页设计。（二）实验步骤：1）选择一种界面设计工具，并熟悉它；2）针对一个具体的网站（学校、个人、公司）设计应用，进行 Web界面规划和概要 设计；3）选择WE期面设计要素，设计出网页四、实验具体实现过程1、选择界面设计工具：Dreamweaver CS6 ,辅助工具 Photoshop CS62、设计内容：个人主页3、Web网站的概念设计：网站的超文本结构选择层次结构，首页作为根网页，在主页上设计了各种选择。将网站的导航放在最上方，简单操作，

7、用户能以一种满意的方式找到所需的信息，与流行的方式 相同。兼顾不同的浏览器设计： 在编码日使用JavaScript等编程工具或功能，探测用户浏览器的类型和版 本等参数及对于特定功能的支持情况，根据探测结果显示适用于特定浏览器的网页的内容。4、界面设计的基本原则：了解浏览者的心理状态（2）内容与形式的统一(3)减少浏览层次(4)特点明确(5)统一整体的形象Web网站设计的3c原则：(1)简洁因为做的是个人网站，所以特点鲜明，导航放在网页的最上方，版本及设计者信息放在网站最下 方，所用的字体为微软雅黑，整体的颜色为绿色，页面上所有的元素都有明确的含义和用途。一致性各个页面都使用相同的页边距、文本，

8、图形之间使用相同的间距；主要图形、标题和符号旁边留 下相同的空白，在每页都放有导航图标。页面中的每个元素与整个页面以及网站的色彩和风格上保持 了一致，图标都采用了相同的设计风格。文字的颜色同图像保持了一致。5、Web界面规划此网站的目的是建立一个个人主页，主要目的是展示自我，让读者浏览信息，所以网站的功能都 放在导航页上。本网站的面向客户群是二十岁左右的青年，所以会加一下特效，而本网站的风格和现在个人网站 的主流风格类似，所以客户用起来比较上手。6、Web界面设计概要设计先建立网站的原型系统。首先，打开 Dreamweaver CS6软件的界面，在 站点”菜单栏中的站点选 择新建站点”选项。接

9、下来在弹出的页面中选择高级”，将站点定义为 我的个人主页”，选择存放的文件夹。站点建好之后，在 Dreamweaver界面右部的文件窗口里会显示新建好的站点，接着在站点上点 击鼠标右键，新建了两个文件夹，分别命名为flash, images。它们用来存放网页信息和制作过程中所需要的图片。然后在我的个人主页文件夹下建立 moyan.html、 about.htmlphoto.htmlmessage.html、 flash.html和css.css六个文件，它们将成为我网站中的主要页面和样式表文件。 其他页面在设计过程中可以加入。7、Web界面设计要素(1)界面布局：采用自由式界面布局，导航栏放在

10、网页最上方，个别网页中在左侧放入抽屉式菜单。再力询嚏也普(2)日志(3)、留言板套用了上一个网页的留言板功能，设置参数都相同。总体设计：运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行 制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等。功能设计：利用框架(选取了左右的框架结构)设置基本模样。左边框架作为导航栏，右边一大部分作为各 个子网页的浏览区。在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性。导航栏包括：个人简历，日志，留言板，照片，音乐五项，分别链接到各个子页面。在导航栏的最下方还设置有版本信息和

11、作者相关信息链接。五、实验小结（包括问题和解决方法、心得体会、意见与建议等）这次实验让我熟悉了图形用户界面的设计原则，并利用设计工具完成了图形化的web用户界面设计。通过界面设计的实验让我能够更了解图形用户界面的设计原则，并从实验中体会到人机交互设计的奇妙之处。这次实验让我体会到人机交互的设计都是为使用户更容易理解和运用，希望下一次实验我能学到更多的东西。五、指导教师评语成绩批阅人日期读书的好处1、行万里路，读万卷书。2、书山有路勤为径，学海无涯苦作舟。3、读书破万卷，下笔如有神。4、我所学到的任何有价值的知识都是由自学中得来的。一一达尔文5、少壮不努力，老大徒悲伤。6、黑发不知勤学早，白首方悔读书迟。一一颜真卿7、宝剑锋从磨砺出，梅花香自苦寒来。8、读书要三到：心到、眼到、口到9、玉不琢、不成器，人不学、不知义。10、一日无书，百事荒废。一一陈寿11、书是人类进步的阶梯。12、一日不读口生，一日不写手生。13、我扑在书上，就像饥饿的人扑在面包上。