课程实验报告
专业年级计算机科学与技术课程名称人机交互技术
指导教师
学生姓名
学号
实验日期
实验地点
实验成绩
教务处制
二O一O 年十月二十五日
浅析网页界面设计——首页设计 首页设计，需开宗明义突出主题 开宗明义，无论是对于一篇文章、一场会议或一部专题片，还是对于一个网站来说，都是必不可少的。那么能为一个网站开宗明义的地方（标签）就是Title（标题）和Description（描述、副标题），而能够为Title和Description 提供进一步诠释的就是网站的首页。 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上，反过来说，页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中，网站标题、副标题、菜单（狭义上的导航，请参看《WEB导航设计》）、用户登录信息、关于、版权信息这几项是网站的基础信息，是一个网站身份的象征，承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命，在设计页面时，这些信息必不可少。 而网站的首页，除了需要显示以上这些基础信息之外，最重要的是还承担着网站转化率的重任，这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢？我的理解是把网站所提供的产品或劳务通过版式设计、文案设计、色彩设计之后，展示在首页适当的位置，并使其不受其它信息元素干扰，甚至使其它元素为它（产品或劳务）服务。 突出主题思想 知道了首页需要展示哪些信息，知道了信息之间的权重，如何把信息呈现得更符合信息本身，却不是一件容易的事，需要时间的磨练与经验的积累。就设计本身而言，是一件感性的事，不像数学公式，它缺乏严谨的理论做为指导，所以在工作中，经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性，在重要信息的设计上突出设计的主题思想，在与Boss、同事讨论时，尽量把讨论的重点放在主题思想的呈现方式与其对转化率（或市场目标）的作用之上。你可以说这是功利的设计，没错，所有的设计都是以商业利润为最终目的。 如何突出 在版式设计上，要求把信息分门别类，让用户在扫描（只为扫描而设计，请参考《Don’t Make Me Think》）页面时保证视觉流的流畅性，在短时间内（3-5秒）发现首页包函哪些区域（如菜单、广告、注册、个人信息、链接、按钮等），方便用户在第一时间内做出选择。在设计过程中，建议严格遵循四个排版的原则，即：对比、对齐、重复和亲密性（请参看《写给大家看的设计书》)。如https://www.doczj.com/doc/5114318643.html,、https://www.doczj.com/doc/5114318643.html,、https://www.doczj.com/doc/5114318643.html,的首页设计。
重庆邮电大学移通学院学生实验报告 实验名称：熟悉设计管理和游戏界面设计 专业班级：数字媒体技术 02141401 姓名：罗钧 学号： 2014210xxx 实验日期：
实验五：熟悉设计管理和游戏界面设计 一、实验目的 （1）了解和熟悉人机界面设计过程管理的相关知识； （2）了解和评价游戏软件的人机交互设计，提高自己的评价能力，提高自己对设计水平的。 二、工具/准备工作 需要准备一台带有浏览器，能够访问因特网的计算机。 三、实验内容与步骤 1.概念理解 （1）成功的用户界面开发有4个支柱，它们能够帮助用户界面架构师将好的思想转化为成功的系统。经验表明，每个支柱都能在此过程中产生数量级的加速作用，并能促进建立优秀的系统。 请简单描述这4个支柱。 用户界面需求：软件项目的成败经常取决于所有用户和实现者之间理解的精确性和完整性。如果没有适当的需求定义，那就既不能确定正在解决什么问题，也不会知道何时能够完成。拟定用户界面需求是整个需求开发和管理过程的一部分，系统需求（硬件、软件、系统性能及可靠性等）必须清楚的加以陈述，任何处理用户界面的需求（输入/输出设备、功能、界面及用户范围等）都必须指明并达成共识。一个确定用户需求的成功方法是通过用户观察，监视正在行动的真实用户的背景和环境。 指南文档和过程：指南文档应考虑以下几方面。 1.词、图标和图形 2.屏幕布局问题 3.输入与输出设备 4.动作序列 5.培训 用户界面软件工具：设计交互系统的困难之一，是客户和用户可能对新系统并没有一个清晰的想法。由于在很多情况下交互系统都是新奇的，用户可能认识不到设计决策的用意。虽然打印出来的文稿对初步体验是有帮助的，但具有活动键盘和鼠标的屏幕展示却更为真实。菜单系统的原型可能用一两条活动路径来代替为最终系统预想的数千条路径。 专家评审和可用性测试：现在，网站的设计人员认识到，在将系统交付给客户使用之前，必须对组件进行很多小的和一些大的初步试验。除了各种专家评审方法外，与目标用户一起进行的测试、调查和自动化分析工具被证明是有价值的。其过程依可用性研究的目标、预期用户数量、错误和危害程度和投资规模而变化很大。 （2）请简单描述用户界面设计所涉及的法律问题 ①隐私问题 ②安全性和可靠性
人机交互技术 Web界面设计学号: 姓名:
一、Web界面设计的基本概况 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。 模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 二、Web界面设计要求及目的 Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。 Web界面设计要素 a)Web界面布局
1、页面命名 每个页面都要有与之模块对应的名称。 2、页面兼容性 （1）页面大小兼容 o自适应1366*768px及以上的分辨率 o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条） （2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。 （3）浏览器兼容 兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。 o文字 文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。 o容图片 容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作 显示数据（表格） （1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。 （2）单无格：文字图片容左对齐，数字、金额容右对齐。 （3）操作容原则上均用文字表达，如“编辑-删除” （4）鼠标划过表格单行时，颜色高亮。 （5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。 （6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。 选中数据 （1）勾选全选则选中当页所有记录 （2）去掉当页某个记录的勾选，则全选也去掉勾选。 （3）翻页后，自动去掉已勾选的记录及全选的勾选。 （4）翻页后是否进行选择记录的保留应试具体业务而定。 （5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据 （1）新增的记录必须排在新增页的首行； （2）所有列表页面默认按数据新增时间倒序排列。 （3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （4）提交成功后自动回到数据列表页。 （5）提交时需对主要标识字段进行重复值、空值（空格）判断。 修改数据 （1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。 （2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。 （4）提交时需对主标识字段进行重复值、空值（空格）判断。 查询数据 （1）把所有查询条件全部显示出来，并放在查询列表上方位置。 （2）每个查询条件必须有预置文案。 （3）每次查询后保留当前输入的查询条件。
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
中北大学软件学院 实验报告 专业软件工程 课程名称人机交互 学号 姓名 辅导教师何志英成绩 实验日期2012/3/13实验时间19:00-22:00
1实验名称 试验一：最新人机交互技术 2、实验目的 了解最新人机交互的研究内容 3、实验内容 通过网络查询最新人机交互相关知识。 (1)在百度中找到“最新人机交互视频”的相关网页，查看视频。 (2)什么是Kinect技术。 (3)人机交互技术在各个领域的应用。 4、测试及结果 (1)已在百度中查看“最新人机交互视频”的相关网页。 (2)Kinect是微软在2010年6月14日对XBOX360体感周边外设正式发布的名字。 (3)人机交互技术已成为解决医疗、教育、科研、环保等各类重大社会问题不可或缺的重要工具 5、心得 通过此实验，我了解人机交互技术在社会各个行业的重大作用。辅导教师何志英成绩 实验日期2012/3/13实验时间19:00-22:00 1、实验名称 实验二：立体视觉 2、实验目的 掌握立体视觉的原理
3、实验要求 通过网络查询立体视觉相关知识。 (1)在虚拟环境是如何实现立体视觉？ (2)3D和4D电影的工作原理。 4、测试及结果 (1)实物虚化的视觉跟踪技术使用从视频摄像机到x-y平面阵列，周围光或者跟踪光在图像投影平面不同时刻和不同位置上的投影，计算被跟踪对象的位置和方向。 视点感应必须与显示技术相结合，采用多种定位方法（眼罩定位、头盔显示、遥视技术和基于眼肌的感应技术）可确定用户在某一时刻的视线。例如将视点检测和感应技术集成到头盔显示系统中，飞行员仅靠“注视”就可在某些非常时期操纵虚拟开关或进行飞行控制 (2) 4D电影是在3D立体电影的基础上加环境特效模拟仿真而组成的新型影视产品。所谓4D电影，也叫四维电影；即三维的立体电影和周围环境模拟组成四维环境。观众在看立体电影时，顺着影视内容的变化，可实时感受到风暴、雷电、下雨、撞击、喷洒水雾、拍腿等身边所发生与立体影象对应的事件,4D的座椅是具有喷水、喷气、振动、扫腿等功能的，以气动为动力的。环境模拟仿真是指影院内安装有下雪、下雨、闪电、烟雾等特效设备，营造一种与影片内容相一致的环境。 5、心得 通过本次试验，我明白了立体视觉以及3D、4D电影的工作原理。
人机交互界面设计规范 （讨论稿） Hygrand 上海华冠电子设备有限责任公司 Hygrand Electronic Equipment CO., LTD.Shanghai
1. 必须在编码之前完成，否则就成花架子了。 2. GUI规范不是一蹴而就，它和设计相互迭代，彼此补充，相互完善。 3. GUI规范的内容70％是通用原则，涉及产品图形控件的基本属性和构建的基本参数和原则，30％ 是与项目或产品特点相适应的内容，这部分内容就是在设计过程中迭代产生。 1.概述 <目的、适用项目、基本风格> 2.通用指导原则 2.1.易用性 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。如按钮名称应该易懂，用词准确，要与同一界面上的其他按钮易于区分。 <补充易用性细则> 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 复选框和选项框要有默认选项，并支持Tab选择。 …… 2.2.规范性 通常界面设计按Windows界面的规范，即包含“菜单条、工具栏、状态栏、滚动条、右键快捷菜单”等的标准格式，界面遵循规范化的程度越高，则易用性相应的就越好。 <补充规范性细则> 工具栏的图标能直观的代表要完成的操作。 标签提示：字体为加重、宋体、黑色、无边框。 对齐方式：左对齐、一般文字、单个数字、日期等。 等待过程：在需等待时间较短(0-10秒)的情况下应将鼠标显示成为沙漏；当需10秒以上时，要显示进度条等。 菜单深度一般要求最多控制在三层以内。 ……
2.3.美观与协调性 界面应该适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 <补充美观与协调性细则> 父窗体或主窗体的中心位置应该在对角线焦点附近。 按钮的大小要与界面的大小和空间要协调。 …… 2.4.独特性 在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 <补充独特性细则> 安装界面上应有单位介绍或产品介绍，并有自己的图标。 登录界面上要有本产品的标志，同时包含公司图标。 …… 2.5.快捷方式 在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些，在Windows 及其应用软件中快捷键的使用大多是一致的。 <补充快捷方式细则> 文件操作：如打印、关闭相应的快捷键。 系统菜单：如工具、帮助等的快捷键。 …… 2.6.安全性 在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。 <补充安全性性细则> 应当注意尽可能避免用户无意录入无效的数据。 采用相关控件限制用户输入值的种类。 ……
人机交互界面设计中的感性分析 学院：计算机学院专业班级：本09软件02班姓名：肖喜武学号：225 摘要: 好的设计就是创造美好的界面使用体验。在非物质时代里,对于人机交互界面的设计来说,不仅要满足用户对功能的需求,还要让用户能够简单、愉悦的使用。依托感性工学原理,为如何更好的设计人机交互界面作出分析。 关键词:人机交互;界面;感性;感性工学 在非物质社会中,人与社会的关系愈发微妙起来,如何应对科技对于人性的挑战也是值得关注的问题。对于产品用户界面设计来说,/物质性0是由于工业化大批量的机械生产所导致的。工业化生产所导致的是工业化社会的产生与发展,经常以产量和质量作为社会进步的标杆。以技术为中心的社会,是工业化大批量生产的技术条件下的产物。工业化社会的目标是物质的数量和质量的满足,这也是当时人们的生活水准和追求的衡量标准。但是未来的非物质社会下的社会价值,更要通过/情感与体验0等无形的因素来衡量人的生活品质,非物质主义下的设计理念倡导重视产品的体验而非产品本身。设计师必须打破已有的思维方式和逻辑方式,去解决来自不同社会和文化背景下的设计实践问题。本文依托感性工学原理,为如何更好的设计人机交互界面作出分析。 1、感性工学 ！ 在感性消费的社会里,人们对于自己要的是什么更加明确,心里所渴望的是一份适合自己的感觉。感性工学正是将消费者所抱有的意象或感觉转变成物理特性的产品设计要素而加以实现的科学。它是以使用者的情感反应与认知作为分析研究的基础,通过统计分析及计算机技术的运作,建构出符合使用者感觉意象的产品出来。感性工学技术也是一种顾客导向的产品人因工程发展技术。利用此技术,可将人们模糊不明的感性需求及意象,具体转化为细部设计的形态要素。因此感性工学是一种立足于顾客的感受和需求的技术。 2、人机交互界面设计 、用户生理、心理、个人背景和使用环境的影响 用户对界面的使用情况无时无刻不受到各自的生理、心理因素及个人背景和使用环境的影响。需要考虑的生理方面的因素包括用户群体的年龄、性别、体能、生理障碍、左右手使用的习惯程度等;在心理方面,完成任务的动机和态度对完成任务的质量和效率起着非常关键的作用。用户背景包括可能影响到界面使用的用户各方面的知识和经验。例如,用户界面、帮助资料和培训过程的设计应当考虑用户各个方面背景的强弱趋势,才能达到最满意的效果。用户使用界面的物理环境和社会环境也对使用效率有明显影响。 、人机交互与人机交互界面 人机交互是研究如何把计算机技术和人联系起来,使计算机技术最大程度的人性化。在界面设计中,充分运用人们容易理解与记忆的图形与少量文字,以及运用色彩,静止的画面与运动的画面等,使人在操作计算机及计算机向人显示其工作状态的交互关系中,达到最大方便与高效的可能。随着科技的进步,如今的界面设计必须使用比过去更为复杂得多的人的感觉因素,在视觉、听觉等通道传递信息并感知信息。
网站界面设计应遵循的几个原则 网站用户界面（Website User Interface）是指网站用于和用户交流的外观、部件和程序等等。如果你经常上网的话，会看到很多网站设计很朴素，看起来给人一种很舒服的感觉；有点网站很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。网站界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。通常的讲，企业网站用户界面的设计应遵循以下几个基本原则： 1．用户导向（User oriented）原则 设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于网站的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。 2．KISS（Keep It Simple And Stupid）原则 KISS原则就是"Keep It Sample And Stupid"的缩写，简洁和易于操作
是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网页的下载不要超过10秒钟（普通的拨号用户56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；网站所有的内容和服务都在显眼处向用户予以说明等。 3．布局控制 关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有： （1）Miller公式。根据心理学家George https://www.doczj.com/doc/5114318643.html,ler的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如https://www.doczj.com/doc/5114318643.html,的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices 共八个分类。https://www.doczj.com/doc/5114318643.html,的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而很多国内的网站在栏目的设置远远超出这个区间。 （2）分组处理。上面提到，对于信息的分类，不能超过9个栏目。
人机界面设计原则 “以人为本” 1.以用户为中心的基本设计原则 在系统的设计过程中，设计人员要抓住用户的特征，发现用户的需求。在系统整个开发过程中要不断征求用户的意见，向用户咨询。系统的设计决策要结合用户的工作和应用环境，必须理解用户对系统的要求。最好的方法就是让真实的用户参与开发，这样开发人员就能正确地了解用户的需求和目标，系统就会更加成功。 2.顺序原则 即按照处理事件顺序、访问查看顺序(如由整体到单项，由大到小，由上层到下层等)与控制工艺流程等设计监控管理和人机对话主界面及其二级界面。 3.功能原则 即按照对象应用环境及场合具体使用功能要求，各种子系统控制类型、不同管理对象的同一界面并行处理要求和多项对话交互的同时性要求等，设计分功能区分多级菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面，从而使用户易于分辨和掌握交互界面的使用规律和特点，提高其友好性和易操作性。 4.一致性原则 包括色彩的一致，操作区域一致，文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、形状、字体自成一体，不同设备及其相同设计状态的颜色应保持一致。界面细节美工设计的一致性使运行人员看界面时感到舒适，从而不分散他的注意力。对于新运行人员，或紧急情况下处理问题的运行人员来说，一致性还能减少他们的操作失误。 5.频率原则 即按照管理对象的对话交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等，提高监控和访问对话频率。 6.重要性原则 即按照管理对象在控制系统中的重要性和全局性水平，设计人机界面的主次菜单和对话窗口的位置和突显性，从而有助于管理人员把握好控制系统的主次，实施好控制决策的顺序，实现最优调度和管理。 7.面向对象原则 即按照操作人员的身份特征和工作性质，设计与之相适应和友好的人机界面。根据其工作需要，宜以弹出式窗口显示提示、引导和帮助信息，从而提高用户的交互水平和效率。
XXXXXXXXXX学院 毕业论文课题名称网页界面设计 学生姓名XXX 学号XXXXXXX 专业XXXXXXXXXXX 班级XXXXXXXXXX 指导教师XXX 2008年5月9日 ``````````````````````````````````````````````````````````````````````````````````````````封面```````````````````` 摘要：网络教学的好处随着科技的飞速发展与进入小康社会近一步的实现，电脑，在人们 的生活中已经十分普及。于是，网络也已经成为人们生活中不可获缺的一部分。虚拟实验室是一种特别的、分布式的解决问题的环境,是提供给用户的一个基于网络的实验教学、技术交流、共同研究、协同工作的平台,是一种基于计算机虚拟原型系统的全新的科学研究与工程设计方法,是除理论与实物实验之外的第三种研究设计手段和形式。目前,虚拟实验室的指的是在计算机系统中采用虚拟现实技术实现的各种虚拟实验环境,实验者可以像在真实的环境中一样完成各种预定的实验项目,所取得的学习或训练效果等值于甚至优于在真实环境中所取得的效果.为此我们设计了这个物理实验学习网站供学生学习.采用了3DMAX技术,CULT 3DMAX技术,人机交互技术（BBS技术,聊天室技术）本人主要负责的是界面设计. 英文：The advantage of study of network, with the development at full speed and entering realization of nearly one step of well-off societies of science and technology, the computer, has already popularized in people's life very much. Then, the network has already become a part that can't be lacked in people's life. The fictitious laboratory is a kind of special, distributed environment of solving the problem, offer an teaching of experiment, exchange of technology, platform studied together, worked in coordination based on network of users', it is a brand-new scientific research based on fictitious prototype system of the computer and design method of the project, it is the third kind of research besides theories and material object experiments that
实验一： 实验名称最新人机交互技术 实验目的了解最新人机交互的研究内容。 实验内容通过网络查询最新人机交互相关知识。 1、在百度中找到“最新人机交互视频”的相关网页，查看视频。 2、什么是eTable 。 3、人机交互技术在各个领域的应用。 实验二： 实验名称立体视觉 实验目的掌握立体视觉的原理。 实验内容通过网络查询立体视觉相关知识。 1、在虚拟环境是如何实现立体视觉？ 2、3D和4D电影的工作原理。 实验三： 实验名称交互设备 实验目的掌握常用的交互设备的工作原理如键盘、鼠标、显示器、扫描仪。 实验内容通过网络查询人机交互设备相关知识。 1、重点查找液晶显示器和扫描仪的工作原理和方法 2、什么是数字纸？工作原理是什么？ 实验四： 实验名称虚拟现实系统中的交互设备 实验目的掌握虚拟现实系统中人机交互设备的工作原理和方法。 实验内容通过网络查询人机交互设备相关知识。重点查找虚拟现实中使用的交互设备和较新的交互设备的工作原理和方法，如：数据手套、三维鼠标、空间跟踪定位器、触觉和力反馈器、头盔式显示器等。（实验报告中写出3种以上） 实验五： 实验名称人机交互界面表示模型 实验目的掌握人机交互界面表示模型中的GOMS、LOTOS和UAN的方法。 实验内容1、简述GOMS和LOTOS表示模型的方法。 2、结合GOMS和LOTOS对任务“中国象棋对弈”进行描述。 3、UAN描述“文件拖入垃圾箱”。 实验六： 实验名称WEB界面设计 实验目的掌握WEB界面设计的原则，了解页面内容、风格、布局、色彩设计的方法。
实验内容1、找到三种类型的网站：旅游景区、购物网站、政府部门网站，每种类型找三个以上网站，总结功能、布局、风格、色彩设计有什么相同和不同。 实验七： 实验名称移动界面设计 实验目的掌握移动界面设计的原则。 实验内容比较移动界面设计与WEB界面设计有什么相同和不同。 实验八： 实验名称可用性分析与评估 实验目的掌握可用性分析与评估的方法。 实验内容对某个网上银行进行可用性分析与评估（银行自定）。 辅导教师成绩
习题1 1.什么是人机交互？ 人机交互技术(Human-Computer Interaction Techniques)是指通过计算机输入、输出设备，以有效的方式实现人与计算机对话的技术。 它包括机器通过输出或显示设备给人提供大量有关信息及提示请示等，人通过输入设备给机器输入有关信息及提示请示等，人通过输入设备给机器输入有关信息，回答问题等。人机交互技术是计算机用户界面设计中的重要内容之一。它与认知学、人机工程学、心理学等学科领域有密切的联系。 1.简单介绍人机交互技术的研究内容。 1.人机交互界面表示模型与设计方法 2.可用性分析与评估 3.多通道交互技术 4.认知与智能用户界面 5.群件 6.Web设计 7.移动界面设计。 2.简单介绍人机交互技术的发展历史。 人机交互的发展过程，也是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段： 命令行图形用户界面自然和谐的交互
1.命令行界面交互阶段 计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程 2.图形用户界面（GUI）交互阶段 1）图形用户界面（Graphical User Interface，GUI）的出 现，使人机交互方式发生了巨大变化。GUI 的主要特点是桌 面隐喻、WIMP技术、直接操纵和“所见即所得”。 2）与命令行界面相比，图形用户界面的人机交互自然性和效 率都有较大的提高。图形用户界面很大程度上依赖于菜单选 择和交互小组件（Widget）。 3）图形用户界面给有经验的用户造成不方便，他们有时倾向 使用命令键而不是选择菜单，且在输入信息时用户只能使用 手这一种输入通道。 4）图形用户界面需要占用较多的屏幕空间，并且难以表达和 支持非空间性的抽象信息的交互。 3.自然和谐的人机交互阶段 随着虚拟现实、移动计算、无处不在计算等技术的飞速发展，自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互是其主要特点，其目的是使人能以声音、动作、表情等自然方式进行交互操作。习题2
基于用户体验的网页UI设计 【摘要】本文基于用户体验剖析网页UI设计，阐述了网页界面视觉设计和网页界面交互设计重要性。结合当前人们的生活方式、行为习惯及心理体验等方面论述如何进行网页UI设计。 【关键词】网页UI设计；视觉设计；视觉吸引；交互设计；交互艺术 随着信息化的深入，网页成为人们浏览信息、获取信息、放眼世界的主要窗口之一。在传统网页的界面设计中，人们认为网页界面设计就是美工，而美工就是单纯对网页进行装饰。随着网络技术的发展与普及，网页界面设计的技术在不断的进步，设计的理念也在不断的更新，网页界面设计不再是单纯的视觉设计，而是将视觉设计与人的行为习惯、生活方式、心理体验等结合在一起的设计，基于用户体验的网页UI设计是当前研究的热点。 一、网页UI设计及用户体验 UI即User Interface（用户界面）的简称，指对软件的人机交互、操作逻辑、界面美观的整体设计。网页UI设计用户体验（User Experience，简称UE）则是一种纯主观在用户使用产品过程中建立起来的感受。由于生活习惯、文化背景、行为方式及心理体验等不同，用户体验产品时会有不同的感受，一个好的UI设计要能充分满足大众的需求，使用户在体验过程中都能心情愉悦、操作流畅、交互高效。 就网页UI设计而言，用户浏览网页的需求是什么？抽象出来可以归纳为两点：一浏览信息，二操作数据。这里的数据是指在数据库中躺着的数据，用户在单纯浏览信息时，不会对页面背后的“数据”造成任何操作，但用户进行点击链接、跳转页面和处理信息时，就要和页面背后的数据进行交互。所以，在做网页UI 设计时候主要满足于用户的这两方面的需求，第一是用户在浏览信息时候，要有一个赏心悦目的界面，即网页界面的视觉设计要美观。第二是用户在操作数据时候要高效，即网页界面的交互设计灵活。 二、网页界面视觉设计 爱美之心人皆有之，漂亮的网页界面能吸引浏览者的眼球、提高网页的浏览量。传统网页美工设计，更注重网页的布局以及网页的颜色搭配，换言之，就是重在设计网页平面效果图和以及对网页进行装饰。随着人们生活节奏的加快，快餐文化日渐丰富，仅靠传统网页美工已不能适应当今网页发展的需要。那么，如何让你的网站跟上时代的步伐，满足当今用户的需求呢？ 从用户体验出发：什么东西能让我们从电脑屏幕上看到接近于现实世界的东西？是视觉吸引，视觉吸引是非常有效的提示工具，通常在用户第一次打开某个应用，或进入某个新的界面时出现。简单的视觉吸引能扭转乾坤，把令人沮丧万
中北大学软件学院实验报告 专业：软件工程 方向：电子商务 课程名称：人机交互基础教程 班级：1021010C01 学号： 姓名： 辅导教师：李玉蓉 2012年2月制
成绩： 实验时间年月日时至时学时数 1.实验名称 最新人机交互技术 2.实验目的 了解最新人机交互的研究内容 3.实验内容 通过网络查询最新人机交互相关知识。 1、在百度中找到“最新人机交互视频”的相关网页，查看视频。 2、什么是eTable 。 3、人机交互技术在各个领域的应用 4. 实验原理及流程图
成绩： 5.实验过程或源代码 Etable是一种多功能电脑桌，集时尚、实用、经济于一“桌”，无论是居家卧室，还是出差旅途，都可以提供一个舒适、惬意的网上时光，部件有：多角度调节桌面、2个风扇、1个USB插口、1个活动USB插头、鼠标垫、桌腿可调节长度。 人机交互技术的发展极大地促进了计算机的快速发展和普及，已经在制造业、教育、娱乐、军事和日常生活等领域得到 广泛应用。在制造业用于产品设计、装配仿真等各个环节；在 教育中用于研发沉浸式的虚拟世界系统，供学者学习；在军事 方面头显示器等的出现给军事训练提供了极大地方便；在娱乐 中3d和4d电影的拍摄都应用到此技术；体育方面用于体育训 练和报道等；生活中，触屏手机，人脸识别技术等都用到人机 交互技术。 6.实验结论及心得 通过在网上查阅有关近期最新人机交互的视频和网页，我对人机交互的发展及在各方面的应用有了初步了解和认识
实验时间年月日时至时学时数1.实验名称 立体视觉 2.实验目的 掌握立体视觉的原理 3.实验内容 通过网络查询立体视觉相关知识。 1. 在虚拟环境是如何实现立体视觉？ 2. 3D和4D电影的工作原理。 4.实验原理及流程图
门户网站界面设计方案-策划方案网https://www.doczj.com/doc/5114318643.html, 一、编写目的 该方案主要是为了给天天好菜网界面设计者提供一个概括性的内容，让设计者更深入了解天天好菜网这个平台。 二、网站介绍 天天好菜网是一个综合性的商务服务平台，主要准对居住在中大城市的家庭主妇提供网上买菜、家庭营养分析、健康饮食资讯、学做菜、娱乐积分换礼品。引导用户树立科学营养的饮食观念，让用户吃得放心、买得实惠、玩得开心。 以“蔬菜配送”为主要经营，以“方便大众”为经营理念，以“安全、新鲜、快捷、实惠”为服务宗旨，以客户利益最大化，立足于新兴行业。 品种齐全、质优价廉，有专门的蔬菜供应基地，这样不但减少了流通环节，而且保证了蔬菜的新鲜。无论份量多少，只要预订，我们将以最及时、最快捷的方式送货上门，并以最新鲜的、安全的蔬菜满足客户的需求。 秉承公道、诚信、价优、物美来迎接更多的挑战，以求做的最好，赢得更多人的信任，把真正的方便带给大家。 三、对设计的要求 界面一定要美观大方、功能简单实用、富有主题，注重每个细节，每一个栏目、图片、动画、线条、功能按钮都要有文字说明，写明你的设计理由和设计表达的思想。要考虑与用户的交互性，可以用一些flash动画、gif动态图片、js效果等。让整个页面变得生动起来，特别是首页，做为吸吲用户眼球的第一个窗口，一定要本着以上的设计理要求，抓住现代家庭主妇的心理需求、把她们停留在这个网站。 四、功能频道栏目规划 1.频道介绍
2.功能栏目
五、Logo设计（150元） 1. LOGO的样式应简洁、大方、大气，包含天天好菜、天天好彩的内含及经营特色。 2. LOGO设计作品应构思精巧，简洁明快，富有内含，色彩协调，健康向上，有独特的创意，易懂、易记、易识别，有强烈的视觉冲击力和直观的整体美感，有较强的思想性、艺术性、感染力和时代感。 3. 色调、构图、设计工具不受征集人局限，由设计人自由发挥，设计人可根据自己的理解和喜好进行创作，并应提供有多种配色的方案供选择。 4.设计的LOGO将应用于公司的徽标、网站宣传册、网站、名片、vip会员卡； 5.中标作品请提交完整的、可用的矢量图形源文件（如PSD格式图片）或矢量格式的.ai .fla .cdr 原图，并且告诉我们所用到的相关字体； 6.设计之前一定要写出详细的设计方案，写明你每一个细节的设计思想及理由。 著作权说明： 1 、所设计的作品应为原创，未侵犯他人的著作权；如有侵犯他人著作权，由设计者承担所有法律责任。完成的LOGO 设计不应与著名商标或常用图标/ 徽标雷同或类似（如进行商标注册时因与其它已注册了的商标类似而不能注册时，设计者应免费将LOGO 进行调整与修改，直到本公司认可与满意）； 2 、选中的设计作品，我方支付悬赏金后，即拥有该作品知识产权，包括著作权、使用权和发布权等，有权对设计作品进行修改、组合和应用. 六、对技术上的要求 1.界面全部采用div+css进行布局，样式写成相关文件 2.DIV+CSS+js+AS等编码必须有注释说明，遵循web2.0标准规范 3.必须兼容目前主流的浏览器，如IE、火狐、傲游、Mozilla/Netscape、Opera等 七、相关设计作品 说明：以下首页设计作品是公司美工设计的，但是界面设计大过于复杂，有点像门户网站，不是我们想要的效果。 效果1.1：
浅析网站登录界面设计 无论网页或是移动APP的设计，很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。本文就移动APP表单设计进行浅析，看设计师是如何在设计与交互体验之间做到小而美的平衡。 一.极致的减法 这是一个异于常规设计思路而得的登录框产物，这不是通常意义上的登录窗。它仅仅保留了用户名的输入，只需按回车便可确定，跳出了登录界面设计中的条条框框，配色方面也足够醒目与简单。 二.引人注目的用户界面 1.模糊背景 最近，模糊背景的运用如雨后春笋般冒了出来，因为模糊背景的运用不仅让整个网站显得更加人性化，并且在很大程度上烘托出网站所要表现的氛围。以下介绍的案例是个迷人的登陆界面，在模糊的背景上面用极简的图标与细线来设计，背景图的色调与按钮的颜色很有心的挑选了同一色系，让界面融洽地结合成一个整体。
2.暗色调背景 当我们一眼看到下面的案例时，明亮的输入框吸引了所有的注意力。暗调处理过的背景图使登录的表单成了页面的视觉中心，没有任何东西可以分散用户的注意力。这不仅是优质的感官体验，更是舒适的用户体验。
3.扁平化的纯色背景 我着迷于以下案例中的扁平化设计。基本的样式本该显得单调无聊，但是如果在色彩上精心搭配，扁平化的登录界面将变得活泼俏皮起来。 三.清晰的视觉纵线 人的视觉浏览一般呈“L”型视线，意指从上到下，从左至右。而设计表单界面很注重对用户的引导作用，当一个界面没有过多的强调元素，那么表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。那么，用户就不用过多思考和寻找，能简单高效的执行完表单项的填写和提交。
四.注重用户体验设计 登陆和注册表单的使用率非常高，一个表单的设计其实也不是简单的事情，用户体验是必须要考虑的事情。有的喜欢把注册和登陆都放在一个页面，有的喜欢用AJAX无刷新效果来展
优秀毕业论文资料专题
优秀网页设计毕业论文题目采撷 网页设计是企业根据自身与客户需求，对网站功能进行策划，然后对网站页面进行美化。网页设计专业在信息时代已成为一个热门专业。这里展示一些网页设计毕业论文题目，供大家参考。 1、基于全景摄影的网页设计研究 2、浅谈WAP时代的网页前端设计 3、创新网页设计与制作课程的考核模式 4、网页设计之与教材配套的“微点”的开发与应用 5、网页设计中的美学应用研究 6、浅谈极简风格在网页设计中的运用 7、网页设计的原则与要求 8、网页设计与网站管理教学设计研究 9、响应式网页设计案例实现与分析 10、网页设计创意解析 11、体验设计在网页设计中的应用 12、图形图像课程网页制作信息化教学设计 13、论网页设计与网站建设的创意与实施 14、设计美学在网页设计中的体现 15、网页设计与制作课程一体化教学思考 16、响应式网页设计与实现 17、网络视觉文化传播与网页交互界面设计研究 18、网页设计与制作课程中的教学模式探究 19、北京学院路地区高校教学共同体的网页设计与制作教学探讨 20、《网页制作》课程实践教学模式的探索与设计 21、浅论电子商务中的网页视觉设计 22、“网页设计与制作”课赛融合教学模式研究 23、网页平面设计的一些问题讨论 24、依托精品资源构建《网页设计》教学新模式 25、网页设计中视觉语言的审美性表现研究 26、高职高专网页设计与制作课程教学探析 27、浅析网页界面设计中信息的有效视觉传达 28、网页设计中的视觉构成分析 29、《网页设计》课程教学改革初探 30、浅谈网页中字体设计的重要性
31、网页设计中艺术创新的研究与实现探讨 32、基于网站建设中网页设计的安全缺陷及对策 33、浅谈网页设计风格的变化 34、网页视觉亲和力的设计方法研究[D] 35、《网页设计》课程教学改革措施[A] 36、网页设计中技术与艺术的结合路径--以新闻门户网站为例 37、视觉传达在网页设计中的动态艺术效果及其技术实现 38、高职《网页设计与制作》课程现状及改革措施 39、浅谈网页设计中页面的布局方式 40、浅论网络视觉文化传播及其对网页交互界面设计的影响 41、电子商务专业《网页设计与制作》实训课程设计的探索研究 42、自适应网页设计问题浅析 43、静态网页设计中存在的问题与解决措施探究 44、网页设计中的色彩应用 45、“留白”理念在网页设计中的映射 46、《网页制作》课程“精讲热练”教学模式的探索与设计 47、网页设计课程教学模式研究 48、浅谈高职《网页设计与制作》课程教学改革探索 49、网页设计与色彩综述 50、浅析网页设计的秩序与灵动 51、视觉元素在网页设计中的表达与运用 52、一种网页实时防篡改技术的设计与实现 53、从电影网站设计浅析网页UI设计趋势 54、网页版面设计中浏览器兼容性问题分析 55、网页设计中使用表格和层排版的技巧分析 56、结合课程改革的《网页设计与制作》教学模式探讨 57、高职“网页设计”课程混合式教学方法研究 58、《商务网页设计与制作》工学结合课程对学生职业化的塑造 59、隐私权保护背景下网页编程的安全性设计研究 60、试析网站建设中网页设计的安全缺陷与解决策略 61、三维教学目标下《网页设计》课程教学改革 62、浅析网页界面设计中如何提升交互性的元素 63、网页设计中的视觉构成探讨 64、浅谈图片在网页设计中的重要作用及处理方法