人机交互技术Web界面设计学习资料.docx
《人机交互技术Web界面设计学习资料.docx》由会员分享，可在线阅读，更多相关《人机交互技术Web界面设计学习资料.docx（10页珍藏版）》请在冰豆网上搜索。
人机交互技术Web界面设计学习资料
人机交互技术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）AceHTMLPro6.0—全功能的HTML&JavaScript编辑器；
2）AntennaWebDesignStudio—强大的可视化网页设计软件；
3）EasyHTML—简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面。
五、技术的应用
Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。
Web网页的外观经常是最先被用户注意到的。
用户对网站的第一印象与界面外观是否友好、吸引人密切相关。
所以对于设计人员来说，Web界面设计至关重要。
Web界面设计的人性化、易用性是Web界面设计的核心。
Web界面设计原则
一般的Web界面设计应该遵循如下基本原则：
●以用户为中心
要求把用户放在第一位。
设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。
1）面对的访问群体不同；
2）目标用户的行为方式不同；
一般的Web界面设计应该遵循如下基本原则：
●一致性
Web界面设计还必须考虑内容和形式的一致性。
其次，Web界面自身的风格也要一致性，保持统一的整体形象。
板式、构图、布局、色彩、风格
●体现特色
只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。
特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。
●兼顾不同的浏览器
●明确的导航设计
网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。
Web界面规划
1）明确网站的目标和用途；
2）确定网站的用户群体。
文化与语言
网站一经发布，意味着全世界都可以看到其中的信息。
所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境
内容、风格与布局、色彩设计
●内容：
Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。
●风格：
Web界面的风格是指网站的整体形象给浏览者的综合感受。
这个整体形象包括网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。
一个优秀的网站与实体公司一样，也需要整体的形象包装和设计。
Web设计以达到用户舒适为追求。
升级会员 