人机交互技术Web界面设计 - 图文

人机交互技术

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界面布局

Web界面的色彩 Web界面的字体 Web界面的动画与多媒体 Web界面的导航 (1) Web信息交互模型 (2)Web界面设计基本原则 1) 了解浏览者的心理状态 2) 内容与形式的统一 3) 减少浏览层次 4) 特点明确 5) 统一整体的形象 6) Web界面设计的3C原则 (3)Web界面概要设计

1)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实施 2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格 3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究 四、Web界面设计要素 ? Web界面布局 ? Web界面的色彩 ? Web界面的字体

? Web界面的动画与多媒体 ? Web界面的导航

五、Web界面设计人机交互的特点及讲究

网站的界面设计需强调交互过程，即一方面是网站的信息传达，另一方面是用户的接受与反馈，对网站的信息都能动地认识与把握。本文基于Web界面设计的基本知识，结合网页设计的人性化问题和具体案例，浅谈我对人性化网页设计的一些理解。 人性化 web界面设计 实例

随着时代的发展，网站的建设越来越接近于一门艺术而不仅仅是一项技术，网站的界面设计是艺术与技术的高度统一，是伴随着计算机互联网络的产生而形成的视听设计的新课题。同时，网站的界面设计需强调交互过程，即一方面是网站的信息传达，另一方面是用户的接受与反馈，对网站的信息都能动地认识与把

握。所以网站界面设计是一个人性化的课题。

一、网页设计的原则和要素

界面的说法以往常见于人机工程学中。“人机界面”是指人机间相互施加影响的区域，凡参与人机信息交流的一切领域都属于人机界面。从心理学意义来分，界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。一个好的网站应该有：非常好看的设计、友好的界面、毫无缺点的结构、智能化的后台处理、非常优秀的内容以及优良陕捷的交互性。即网站的建设具有交互性与持续性、艺术与技术结合的紧密性等特点。网站界面设计的五大原则是：

1、目的性明确

任何一个网站，必须首先具有明确的目标群体。网站是面对客户、供应商、消费者还是全部?主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务?如果目的不是唯一的，还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响，因此目的性是一切原则的基础。

2、专业特性突出

对外介绍企业自身，最主要的目的是向外界介绍企业的业务范围、性质和实力，从而创造更多的商机。在这里包括：应该完整无误的表述了企业的业务范围(产品、服务)及主次关系；应该齐备的介绍企业的地址、性质、联系方式；提供企业的年度报表将有助于浏览者了解企业的经营状况、方针和实力。 3、功能服务的实用性

网站提供的功能服务应该是切合浏览者实际需求且符合企业特点的。网站提供的功能服务必须保证质量，这包括：每个服务必须有定义清晰的流程；实现功能服务的程序必须是正确的；需要人工操作的功能服务应该设有常备人员和相应责权制度；用户操作的每一个步骤(无论正确与否)完成后应该被提示当前处于什么状态。

4、易操作性

界面设计的核心是让用户更易操作，主要包括三层面含义：条理清晰的结构，表现为网站的板块划分的合理性；整体设计风格的一致性；页面内容的精简性。

5、网页创作的艺术性

设计是一种审美活动，成功的设计作品一般都很艺术化，网页设计也要遵循艺术的基本原则。网页创作从某种意义上来说可以称为“eyeballwork”，要达

到吸引眼球的目的，再结合界面设计的相关原理，形成了一种独特的艺术。因此有效地结合艺术审美原则进行网页设计，通过“美”来提高页面设计的品质和韵味是十分重要的手段。

二，人性化web设计

人性化设计是现代科学和艺术、技术与艺术结合的人性回归，科学、技术给设计以坚实的结构和良好的功能，而艺术赋予设计人性美感，使设计产品充满情趣和活力。随着人们实现功能性的不断提高，人们渐渐会有审美的需要，艺术性便会成为生活中的不可缺少的因素。网页设计也是如此，那么在网页设计中艺术方面人性化的要求也应该有所提高。这将是网页设计发展的必然趋势，也会成为网页设计商家竞争的一个重要方面。

1．版面的人性化设计

版面设计将文字、图形根据特定内容的需要恰当地组织在版面上，版面设计意味着要对印刷品等可视部位每一个细节的推敲。任何视觉艺术都在努力寻找把

握平衡、韵律及整体关系．版面设计也不例外。因为没有视觉平衡感就没有美感，没有韵律就不会有意境，没有对整体的把握就形不成主调和风格。所以在版面设计过程中对平衡、韵律、全局的把握，是设计成功与否的关键所在。

人性化艺术在网页设计中主要表现元素有网站、网页的格局、页面的文字、标题、图片等的组合，构成各种各样的线条和形状，这些线条与形状的组合，构成了主页布局的艺术效果。网页的版式设计同报刊杂志等平面媒体的版式设计有很多共通之处。它是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将设计思维个性化的表现出来。是一种具有个人风格和艺术特色的视听传达排列方式，它在传达信息的同时，也产生感官上的美感和精神上的享受。

2．色彩搭配的人性化设计

色彩是人的视觉最敏感的元素。页面的色彩处理得好，可以锦上添花．达到事半功倍的效果。色彩搭配要充分考虑到色彩对人的视觉、心理刺激作用，色彩总的应用原则应该是“总体协调，局部对比”，也就是：页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比、变化。

在色彩的运用上，可以根据页面内容、风格的需要，分别设计不同的主色调。色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬；职业的标志色，军警的橄榄绿，医疗卫生的白色等；色彩还具有明显的心理感觉，冷、暖的感觉，进、退的效果等；色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性。可以使我们的页面具有深刻的艺术内涵，从而提升页面的文化品位。

3．网页格调的人性化设计

格调是看不见、摸不着的某种存在。其实，再高、再隐秘的格调通常都得以某种形式体现出来。比如说，在客厅里布置一个大鱼缸之类的装饰。是在解决居住条件的情况下是自己的居住环境得到美化．从而提升了居住环境的格调。由此可见格调是在解决实用性之后的一种提升，是一种人性化的直接表现。“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物。再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。” 网页的格调设计越来越受到业内的重视。技术发展促进了技术与艺术的紧密结合，把浏览者带人一个真正现实中的虚拟世界，在浏览网页的同时得到审美锻炼、享受。 四、Web界面设计技术与工具

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

页面编辑器主要包括：1)MicroSoft公司的Frontpage；2)Macromedia公司的Dreamweaver，Dreamweaver对于动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效，Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。

辅助工具主要包括：

1)AceHTML Pro 6.0—全功能的 HTML & JavaScript 编辑器； 2)Antenna Web Design Studio—强大的可视化网页设计软件；

3)Easy HTML—简单的所见即所得的HTML 编辑器，有固定、类似浏览器的

搜索“diyifanwen.net”或“第一范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，第一范文网，提供最新高中教育人机交互技术Web界面设计 - 图文 全文阅读和word下载服务。