《人机工程与交互设计网页界面设计》由会员分享，可在线阅读，更多相关《人机工程与交互设计网页界面设计（46页珍藏版）》请在金锄头文库上搜索。
1、 浙江大学城市学院2012 2013 学年第 1 学期期末考核 人机工程学 大作业姓名：李鹏飞 林智翔 学号：31102052 31102055班级：电信1101_ 电信1102_指导老师：_刘加海_人机工程与交互设计网页设计摘 要：就产品而言，随着时代的发展，产品已不是单纯地重视款式的创新，更多的强调的是用户的体验。但社会上仍有许多产品新增了各式各样的功能，却忽略了用户对产品功能是否可以简单方便地使用。而本文将从使用者的角度探讨网页设计，主张网页设计要以人为本，进行人性化设计。在探讨过程中，我们会对各种类型的门户网站进行对比，分析其设计的含义。指出网页设计的主要内容，并提出网页设计的要点。但
2、在设计中由于网站对针对自己用户方面有自己独特的创新设计，所以不能以偏概全，因此会产生些许不足。关键字：人机界面 网页设计 以人为本 人性化设计 Abstract：Terms of products, with the development of the times, the product has not simply emphasis on models of Innovation, more emphasis is the user experience. But there are still many products added to a variety of functions,
3、 but ignored the user whether the product functions can be simple and easy to use. This article from the users perspective of web design, advocate web design to people-oriented, user-friendly design. Explore the process, we will all types of portal comparison analysis of the meaning of its design. T
4、hat the main content of the web design, web design and made points. Website design has its own unique innovative design for their own user, so can not be generalized, and therefore will have a little less.Key word：Man-machine interface Web Design People-oriented User-friendly design 目录第一章 交互设计的介绍11.
5、1传统的交互设计11.2以人为本的人性化交互设计1第二章分析人机界面的设计22.1人机界面的介绍22.2网站界面的设计原则32.3分析传统网页界面的不足之处4（1）排版不简洁4（2） 字体不统一5（3）主次色彩不分6（4）广告图片太多6（5）没有重点7（6）文字形式相同，功能不同8（7）导航目有重复8（8）信息遮拦92.4分析好的网页界面出彩之处9（1）排版整齐9（2）突出重点10（3）字体统一10（4）色彩搭配协调11（5）条目数量适宜12（6）导航目录合理安排132.5针对不足提出如何改进13（1）明确网页主题13（2）排版改进13（3）色彩搭配15（4）图片处理17第三章设计网页界面23
6、3.1网页界面的用户研究233.2人机界面的信息设计（强调视觉）243.3人机界面的视觉设计24第四章以人性化为主旨的交互设计的5样产品264.1浙江大学城市学院26（1）网站主题26（2）排版264.2网易新闻网28（1）网站主题28（2）排版29（3）颜色搭配30（4）图片304.3Dota视频网31（1）网站主题31（2）排版31（3）色彩搭配33（4）图片33第五章人性化交互设计未来的发展355.1人性化交互设计未来的发展35【参考文献】36引言：一个门户网站作体现着是企业的形象，好的网站对企业重要性不言自喻。如今越来越多的行也开始注重网站对于自身宣传。然而目前由于网页技术更新很快，导
7、致目前的网页设计普遍沿用某个经典模式，而没有根据用户的需求去设计。比如现在的市场中，有大部分中小企业看重网站对其知名度的宣传，从而匆匆仿照某个模板，简单地建立一个网站，但这种人云亦云的网站如何能让人印象深刻。因此一个好的交互网站无疑是必须的。但如何使网站很好地帮助双方的交互交流呢则是我们关注。第一章 交互设计的介绍1.1传统的交互设计简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。对于传统的设计，设计者主要关注的产品的外在形式，却忽视了使用者对产品的实用性。可以这么说，传统设计是设计者们自然现象中直接得到启示，或是全凭人的直观感觉来设计制作工具。设计方案
8、存在于手工艺人头脑之中，无法记录表达，产品也是比较简单的。也可以说，这只是设计，还没有达到交互的目的。事实上，通过对产品的界面和行为进行设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这才是交互设计。所以现代的交互设计关注的是产品的内容和内涵，即一个产品的设计是从客户需求为出发点的，在客户需求的前提下，尽可能将产品的使用性设计的方便，区别于传统的交互设计，既需要设计出用户满意的功能产品，还要使设计品方便用户发现和了解使用方法。这就需要现代的人性化交互设计来满足顾客需求。1.2以人为本的人性化交互设计一般来说，好的产品设计并非始于图片，而是对人的理解。好的设计建立在对
9、用户的深刻了解上。 用户喜欢什么产品，他们的用产品习惯是什么，了解产品的交互，他们将如何与之交互都是一个设计者需要去求证的。作为设计师，只有对使用的人了解越多，这样才能对产品进行更有效的设计。只有了解了用户的真正目的，然后更好的帮助用户达到其目的，才能使用户更加喜欢。而以用户的目的为主旨，根据人的行为习惯、人体的生理结构、人的心理情况、思维方式等等，在原有设计基本功能和性能的基础上，对产品进行优化，使用户使用起来更加方便、舒适。人性化设计可以说是是科学、技术与人性的结合。人性化很大程度上和可用性设计紧密联系在一起,或者说人性化设计就是可用性设计的一个思路和原则。最后让我们来定义究竟什么是人性化
10、设计呢？专家普遍指出：人性化是指厂家在设计产品时力求从人体工程学、生态学和美学等角度达到完美，从而真正实现科技以人为本的目的。第二章分析人机界面的设计2.1人机界面的介绍人机界面，又称用户界面或使用者界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计，是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分,其主要功能是帮助人和机器在信息交换和功能上接触或互相影响。如下图所示。人机界面示意图设计用户界面时要充分考虑人的视觉，触觉，听觉的作用。好的用户界面设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。在生活中，凡参与人机
11、信息交流的领域都存在着人机界面。而其中网页设计则作为人机界面设计中重要的一块，已经越来越受现代人所重视。一个好的网站展现出来的不仅仅是企业的形象与，更重要的其对用户认真的风格。网页界面设计作为一个广义用语，包含了许多不同的技能和学科中所生产和维护的网站。其主要目的是通过文字图形的空间结合，进行合理的排列布局，从而可以使用户可以有一个流畅的视觉体验，达到最佳的视觉表现效果。此外能够快速地寻找到用户所需要的信息则是好网站设计的核心所在。2.2网站界面的设计原则网站设计绝不是凭自己的臆想来进行设计的，其中有许多设计原则是需要熟记并且遵守的。如果你经常上网的话，会看到很多网站设计很朴素，看起来给人一种
12、很舒服的感觉；有点网站很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。网站界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。通常的讲，网站用户界面的设计应遵循以下几个基本原则：（1）用户导向原则设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等（2）KISS原则KISS原则就是Keep It Sample And Stupid的缩写，简洁和易于操作是网页
13、设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片（3）布局控制关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。因此合理的排版是必须的。（4）视觉平衡网页设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循
14、这个这个道理。同时，也决不能低估空白的价值。如果你的网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简洁（5）色彩搭配与文字可阅读性颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。此外，为了方便阅读网站上的信息，可以参考报纸的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效
15、果要好。另一种能够提高文字可读性的因素是所选择的字体，（6）和谐与一致性通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者说，网站的众多单独网页应该看起来像一个整体。网站设计上要保持一致性，这又是很重要的一点（7）个性化虽然说是个性化，但是网站的整体风格和整体气氛表达要与网站的主旨相符合。2.3分析传统网页界面的不足之处上面解析了一下网站界面和介绍了一些交互设计的原则，接下来我们将根据以上所讲进行详细的优缺点分析。（1）排版不简洁 传统的网页界面注重的的其功能，简而言之，就是将用户所需要的功能都摆在了台面上，然而再简单地加以修饰，一眼看上去的确是极其地充实，但这琳琅满目的信息却并不能给浏览者留下深刻的印象。失败的规划是造成这的主要原因。如下图所示（2） 字体不统一各种颜色的字实在看上去太缭乱了，让人容易一下子就开始犯迷糊，一眼看上去总感觉排布不那么对劲，主要原因便出现在这些字体上面，如下图所示（3）主次色彩不分网站颜
