人机工程与交互设计网页界面设计.docx
《人机工程与交互设计网页界面设计.docx》由会员分享，可在线阅读，更多相关《人机工程与交互设计网页界面设计.docx（40页珍藏版）》请在冰豆网上搜索。
人机工程与交互设计网页界面设计
浙江大学城市学院
2012—2013学年第1学期期末考核
《人机工程学》大作业
姓名：
李鹏飞林智翔
学号：
****************
班级：
电信1101_电信1102_
****_刘加海_____
人机工程与交互设计
——网页设计
摘要：
就产品而言，随着时代的发展，产品已不是单纯地重视款式的创新，更多的强调的是用户的体验。
但社会上仍有许多产品新增了各式各样的功能，却忽略了用户对产品功能是否可以简单方便地使用。
而本文将从使用者的角度探讨网页设计，主张网页设计要以人为本，进行人性化设计。
在探讨过程中，我们会对各种类型的门户网站进行对比，分析其设计的含义。
指出网页设计的主要内容，并提出网页设计的要点。
但在设计中由于网站对针对自己用户方面有自己独特的创新设计，所以不能以偏概全，因此会产生些许不足。
关键字：
人机界面网页设计以人为本人性化设计
Abstract：
Termsofproducts,withthedevelopmentofthetimes,theproducthasnotsimplyemphasisonmodelsofInnovation,moreemphasisistheuserexperience.Buttherearestillmanyproductsaddedtoavarietyoffunctions,butignoredtheuserwhethertheproductfunctionscanbesimpleandeasytouse.Thisarticlefromtheuser'sperspectiveofwebdesign,advocatewebdesigntopeople-oriented,user-friendlydesign.Exploretheprocess,wewillalltypesofportalcomparisonanalysisofthemeaningofitsdesign.Thatthemaincontentofthewebdesign,webdesignandmadepoints.Websitedesignhasitsownuniqueinnovativedesignfortheirownuser,socannotbegeneralized,andthereforewillhavealittleless.
Keyword：
Man-machineinterfaceWebDesignPeople-orientedUser-friendlydesign
引言：
一个门户网站作体现着是企业的形象，好的网站对企业重要性不言自喻。
如今越来越多的行也开始注重网站对于自身宣传。
然而目前由于网页技术更新很快，导致目前的网页设计普遍沿用某个经典模式，而没有根据用户的需求去设计。
比如现在的市场中，有大部分中小企业看重网站对其知名度的宣传，从而匆匆仿照某个模板，简单地建立一个网站，但这种人云亦云的网站如何能让人印象深刻。
因此一个好的交互网站无疑是必须的。
但如何使网站很好地帮助双方的交互交流呢则是我们关注。
第一章交互设计的介绍
1.1传统的交互设计
简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。
对于传统的设计，设计者主要关注的产品的外在形式，却忽视了使用者对产品的实用性。
可以这么说，传统设计是设计者们自然现象中直接得到启示，或是全凭人的直观感觉来设计制作工具。
设计方案存在于手工艺人头脑之中，无法记录表达，产品也是比较简单的。
也可以说，这只是设计，还没有达到交互的目的。
事实上，通过对产品的界面和行为进行设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这才是交互设计。
所以现代的交互设计关注的是产品的内容和内涵，即一个产品的设计是从客户需求为出发点的，在客户需求的前提下，尽可能将产品的使用性设计的方便，区别于传统的交互设计，既需要设计出用户满意的功能产品，还要使设计品方便用户发现和了解使用方法。
这就需要现代的人性化交互设计来满足顾客需求。
1.2以人为本的人性化交互设计
一般来说，好的产品设计并非始于图片，而是对人的理解。
好的设计建立在对用户的深刻了解上。
用户喜欢什么产品，他们的用产品习惯是什么，了解产品的交互，他们将如何与之交互都是一个设计者需要去求证的。
作为设计师，只有对使用的人了解越多，这样才能对产品进行更有效的设计。
只有了解了用户的真正目的，然后更好的帮助用户达到其目的，才能使用户更加喜欢。
而以用户的目的为主旨，根据人的行为习惯、人体的生理结构、人的心理情况、思维方式等等，在原有设计基本功能和性能的基础上，对产品进行优化，使用户使用起来更加方便、舒适。
人性化设计可以说是是科学、技术与人性的结合。
人性化很大程度上和可用性设计紧密联系在一起,或者说人性化设计就是可用性设计的一个思路和原则。
最后让我们来定义究竟什么是人性化设计呢？
专家普遍指出：
人性化是指厂家在设计产品时力求从人体工程学、生态学和美学等角度达到完美，从而真正实现科技以人为本的目的。
第二章分析人机界面的设计
2.1人机界面的介绍
人机界面，又称用户界面或使用者界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计，是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分,其主要功能是帮助人和机器在信息交换和功能上接触或互相影响。
如下图所示
。
人机界面示意图
设计用户界面时要充分考虑人的视觉，触觉，听觉的作用。
好的用户界面设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
在生活中，凡参与人机信息交流的领域都存在着人机界面。
而其中网页设计则作为人机界面设计中重要的一块，已经越来越受现代人所重视。
一个好的网站展现出来的不仅仅是企业的形象与，更重要的其对用户认真的风格。
网页界面设计作为一个广义用语，包含了许多不同的技能和学科中所生产和维护的网站。
其主要目的是通过文字图形的空间结合，进行合理的排列布局，从而可以使用户可以有一个流畅的视觉体验，达到最佳的视觉表现效果。
此外能够快速地寻找到用户所需要的信息则是好网站设计的核心所在。
2.2网站界面的设计原则
网站设计绝不是凭自己的臆想来进行设计的，其中有许多设计原则是需要熟记并且遵守的。
如果你经常上网的话，会看到很多网站设计很朴素，看起来给人一种很舒服的感觉；有点网站很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。
网站界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。
通常的讲，网站用户界面的设计应遵循以下几个基本原则：
（1）用户导向原则
设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。
要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等
（2）KISS原则
KISS原则就是"KeepItSampleAndStupid"的缩写，简洁和易于操作是网页设计的最重要的原则。
毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。
没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片
（3）布局控制
关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。
如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。
因此合理的排版是必须的。
（4）视觉平衡
网页设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。
根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。
所以，为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。
另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。
同时，也决不能低估空白的价值。
如果你的网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。
在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简洁
（5）色彩搭配与文字可阅读性
颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：
红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。
此外，为了方便阅读网站上的信息，可以参考报纸的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。
另一种能够提高文字可读性的因素是所选择的字体，
（6）和谐与一致性
通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。
或者说，网站的众多单独网页应该看起来像一个整体。
网站设计上要保持一致性，这又是很重要的一点
（7）个性化
虽然说是个性化，但是网站的整体风格和整体气氛表达要与网站的主旨相符合。
2.3分析传统网页界面的不足之处
上面解析了一下网站界面和介绍了一些交互设计的原则，接下来我们将根据以上所讲进行详细的优缺点分析。
（1）排版不简洁
传统的网页界面注重的的其功能，简而言之，就是将用户所需要的功能都摆在了台面上，然而再简单地加以修饰，一眼看上去的确是极其地充实，但这琳琅满目的信息却并不能给浏览者留下深刻的印象。
失败的规划是造成这的主要原因。
如下图所示
（2）字体不统一
各种颜色的字实在看上去太缭乱了，让人容易一下子就开始犯迷糊，一眼看上去总感觉排布不那么对劲，主要原因便出现在这些字体上面，如下图所示
（3）主次色彩不分
网站颜色是抓住用户眼球的第一要素，一个好的网站绝对不会让次要内容的颜色抢了主要内容的风头。
如下图所示，红色实在是太抢镜了。
（4）广告图片太多
适量的图片的确能起到锦上添花的作用，但是不要让大量的图片充斥在一个框面上，对浏览者来说，谁都不希望看到亮花自己双眼出网站。
（5）没有重点
有些新闻网站看上去排序井然有序，经过了简单的规划，似乎是很不错。
但是用户在浏览这类网站时希望看到的是最新或者最重要的新闻，这种则应该用比较突出的字体或图画体现出来。
如下图所示
上图看上去非常工整，但作为一个提供人民消息的网站，最好可以将一些最新消息和一些影响大的政策用显眼的字体颜色和大号字体标出来，让人一眼可以注意到。
（6）文字形式相同，功能不同
外观相同的文字，功能却不一样，违背了一致性的原则。
如下图所示，“应急管理”和“主题服务”文字样式相同，却前者是链接而后者不是。
这给交互者产生一个不好的挫折感。
（7）导航目有重复
一个明确的导航目录可以让浏览者少了很多的烦恼。
虽然这是隐藏的要素，但这也是影响一个网站是否设计用心的一个方面，其潜在地影响了这个网站的印象。
如下图所示
导航目录
不得不提一下城院的门户网站在这一点也做的不太好，如下图所示，这两条导航目录是出现在在一屏中的。
城院导航仪
（8）信息遮拦
网站需要赚钱，自然需要广告的大量植入，但某些广告图片却经常将网站的信息遮拦住，这实在实不可取。
虽然这种错我网站越来越少，但还是会有一些网站出现这样的问题。
2.4分析好的网页界面出彩之处
一个好的界面应该不仅仅是画面出彩，规范整齐等等，而应该让使用者可以轻易地获取其所希望的内容，这才是一个好的网站所应该存在的。
其中以下是一些好的网站所应该有的。
（1）排版整齐
不得不承认，看似一个没有多少内容的网站，却给人有一种大气的感觉，干净整洁，一眼看去就知道有什么内容是自己需要的。
作为一个新闻网站，其排版可以说是成功的。
网易新闻网
（2）突出重点
浏览一些新闻网站往往是用户希望获得一些今日的热点，如果网站可以把最重要的让人一目了然，绝对是可以令人默默记住这个人性的网站。
如下图所示，这么大的一幅图片再配上醒目颜色写的文字，第一时间可以看到网站想要传达的一个重点。
中国娱乐网
（3）字体统一
同一等级的项目采用的是一样的字体，这样子给人的感觉就是整齐划一，虽然字体的颜色不太一样，但看上去绝对没有眼花缭乱的感觉。
起点小说网
（4）色彩搭配协调
合理地利用色彩的含义来衬托网站，同时利用各种颜色协调的搭配，往往能给网站带来许多意想不到的效果。
毕竟色彩也是能表达许多内涵的。
如下图所示
世纪佳缘网
（5）条目数量适宜
一个好的网站不应该让界面充满过多的条目，这样子给人一种不简洁的感觉。
有的时候几条让人一目了然的栏目绝对是让人眼前一亮的。
如下图所示。
新浪读书网
（6）导航目录合理安排
不同的网站有不同的安排，但最基本的就是应该将必须呈现出来而不是许多重复的放在上面。
更多的时候简洁即是美。
如下图所示。
XX搜索引擎
2.5针对不足提出如何改进
（1）明确网页主题
相对于怎么去做好一个网页，更重要的是你要明确你这个网站的内容是什么。
明确你网站的主题是什么，网站的服务对象是谁，网站的发展方向在哪里，网站的文化氛围怎么样，这些因素都是影响你的网站的设计。
网站最重要的就是不能忽视你的服务对象，你这个网站的用户群体在哪里，用户的特点是怎么样的根据这些东西来制定你网页的设计。
明确了你的服务对象，接下去要知道的是你网站的功能。
你功能如果只是单纯地介绍的话，那么设计就不能与塑造企业形象的网站的设计一样，因为你所提供用户的功能是不一样的。
这对设计也是极其重要的一面。
（2）排版改进
一个好的排版可以让网页令人眼前一亮，简洁有序的分布可以在第一时间便让人喜欢上这个网站。
那么怎样才能做出好的排版呢。
1）注意间距
这个间距指的是网页中各分栏之间的距离。
所谓分栏，像报纸的排版一样，采用分栏显示信息，将其规划成一个大表格，然后根据版面设计进行安排内容，将这个表格分成不同的行和列调整行和列的高度和宽度，以便整个页面框架稳定，再把图片和文字放到相应的单元格里，以达到版面的要求。
好的网页要在一屏内保持适当的栏数，即保持各个栏间的间距适宜，例如最基本的就有上下分栏和左右分栏，这些需要注意的就是在完成后既不能令版面太空旷也不能令版面显得太狭窄。
对于网站中正文内容，现在普遍是将行距设置为字体的150%~200%之间。
。
至于为什么采用这样的间距，主要是出于以下考虑：
适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。
此外，除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。
例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。
另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。
2）字体。
针对字体的间距，则需要分字体的大小和中英文进行考虑。
字体太大会减少一屏的网页信息，字体太小则又会影响用户的阅读，产生视觉上的压抑，因次字体的选择便显得尤为重要了。
中国的网页大概是760~800宽左右，主要是因为现在显示屏的分辨率普遍为1024*800上下，至于主要宽度则根据这个公司的种类如门户类还是公司类等来进行确定。
一般现在网页上的默认字体为12pt（磅），现在网页上较为流行的中小字体为9pt左右。
中文的字体在默认大小的情况下一般每行20~30个为宜，英文字母一般为40~70个为宜。
字体之间的间距在这些数量之内不会令用户产生不适应的感觉。
这是针对字体大小的，对于字体样式也是有考究的。
网页设计者可以用字体来更充分地体现设计中要表达的情感。
字体选择是一种感性、直观的行为。
但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。
例如：
粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。
在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。
关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。
因为浏览器是用本地机器上的字库显示页面内容的。
作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。
而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。
解决问题的办法是：
在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
此外，如果有一些精美的艺术字体应该谨慎使用，毕竟网页需要照顾全局来考虑。
3）窗口排布
一个大小不合理的窗口排布容易让用户自己费精力去找重要的信息，此外也容易失去你所希望用户看到的内容，所以主次窗口的排布是非常重要的。
现在普遍采用的是一个主窗口大小旁边附加若干个（一般不超过5个）小窗口进行排列。
4）元素搭配平衡
一个最简单的网页的也就是几样元素，包含了文字，图片和超链接。
内容网站的灵魂，而这些是构成灵魂的物质基础。
文字是网页的主体。
虽然利用flash和图形文字等可以达到表达内容的效果，甚至可以表现地更好。
但是纯文本文字的作用还是无法替代的，毕竟其所占用的存储空间是非常少的。
当然在显示字体的时可以注意字体的大小和颜色，避免页面过于呆板，从而达到改善网页的效果。
至于具体如何做将会在后面的内容中进行述说。
图像给人的视觉效果比文字更加强烈。
如果在网页中可以灵活地运用图片，可以很好地起到点缀网页的作用。
但是如果只是为了画面的炫丽而盲目地添加图片，则会造成网页的混乱不堪，给人一种杂乱无章的感觉。
对于超链接一定要让人轻易辩得，对于与网页主题有关的目录要用相对醒目的方式来进行表达，给人的感觉要鲜明。
其实还有一点也可以算是元素，那就是空白区。
一般来说空白区的合理安排也是网站成功的推手。
（3）色彩搭配
不要忽略色彩对网站的重要作用，一个适合的网页内容的颜色绝对是可以起到锦上添花的作用。
其中排版使用的颜色并不是指单一的文字使用颜色，其中还包括图片和背景所使用的颜色。
在使用颜色中，由于许多网站其不同的功能性和针对用户的不同，所使用的也要根据对象来选择。
不同的颜色给人的感觉是完全不同的。
网站可以通过色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，有助于网站的持久性。
下面举出一些颜色的例子：
红色---是一种激奋的色彩。
刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。
金黄---淡白搭配，可以产生优雅，舒适的气氛。
橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。
蓝色---是最具凉爽，清新，专业的色彩。
它和白色混合，能体现柔顺，淡雅，浪漫的气氛（象天空的色彩:
）。
白色---具有洁白，明快，纯真，清洁的感受。
黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。
灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。
以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。
此外，由于许多颜色都有其自身的含义，恰当地使用这些色彩，可以完美地影响用户的情感。
一些典型的额设计如IBM的深蓝色和window的红黄蓝绿色彩都令我们感觉很深切。
下面展示出一些色彩的内涵
色彩图片内涵
上面展现出来的是一部分颜色，针对不同的网站，浏览者不同，应用的主色调也可以进行相应的调整。
根据色彩选内容是一方面，另一方面则是需要将你选出的色彩进行合理的搭配。
如果牵强地将你认为符合的颜色搭配在了一起，只会让人产生一种很别扭的感觉。
按照色彩的记忆性原则和以上颜色所代表的一些内涵，再根据和谐，均衡和突出重点的原则，进行色彩的合理搭配。
在色彩的运用中也不是运用颜色越多越好，虽然没有明确的颜色数量限制，但是太多的颜色显现在一屏中容易让用户眼花缭乱并且失去重点。
色彩可以通过对比可以给人以强烈的视觉冲击，如windows红黄蓝三种基本色的搭配，而补色的对比则可以使颜色更加地鲜明，黑白的对比给人感觉黑的更黑，白的更白，给人的感觉相对比纯色的话，刺激更大。
色彩的互补则不单单是从颜色上表现出来，从深色与淡色的相互映衬可以使画面看上去比较柔和。
如果是两种对比很强烈的颜色，则是可以通过面积大小这种方式进行排布，面积小的颜色自动会补充道面积大的颜色，从而衬托出面积大的颜色的抢眼。
对于文字的颜色，要根据网页的内容和背景等进行相应的选择。
但不要出现字体颜色和背景颜色相近导致无法看清的状况。
而在整个网页上，最重要的是统一色调，整个界面中尽量少使用类别不同的颜色，控制在三种之内，使界面看上去保持简洁，单纯。
除非是特殊情况，否则尽量不要使用对比非常强烈的色彩搭配。
在网页设计中，色彩的运用遵循以上一些技巧和原则，如统一色调，慎用对比，善用色彩明度和面积等等，就大致可以设计出比较符合用户的网站了。
（4）图片处理
如果可以很好地利用图片的话，是可以对网站起到点睛之笔的作用，因为图片的视觉冲击是远远大于文字的。
但是如果不顾原则地乱放一切的话，给人的第一印象绝对是不会好的。
现在市场上的网站由于广告的盈利性，网页上的图片自然就会造成网页的不协调，对于这些图片只能看网站经营商的想法了。
对于图片的处理是非常复杂的事情。
由于图片既包含有彩色和造型各异的字体，还有许多自己的色彩，对于某些动态图片，更有动画产生，这些因素都是影响网页的整体造型。
因此图片要与网站相协调是件更加困难的事情，它甚至可以说还综合了前面字体与颜色设计技巧。
对于图片处理，本着设计简洁至上的原则，应通过和谐统一的样式风格将这些视觉元素呈现出来。
图片的几何框架，线条风格，色彩饱和度等要与网页的相关主题保持一致。
下面列举出一些图片在排版时的一些注意点：
1）图片的摆放
图片的摆放位置直接关系到版面的构图布局、版面中的左右上下及对角线的四角都是视线的焦点。
在这焦点上恰到好处地安排图片，版面的视觉冲击力就会明显地表露出来。
编排中有效地控制住这些点，可使版面变得清晰、简洁而富于条理性。
图片摆放位置
2）图版面积
图片面积的大小安排，直接关系到版面的视觉传达。
一般情况下，把那些重要的、吸引读者注意力的图片放大，从属的图片缩小，形成主次分明的格局，这是排版设计的基本原则。
图版面积的大小安排，直接关系到版面的视觉传达。
一般情况下，把那些重要的、吸引读者注意力的图片放大，从属的图片缩小，形成主次分明的格局，这是排版设计的基本原则。
图片面积
3）图片的数量
图片数量多寡，可影响到读者的阅读兴趣。
如果版面只采用一张图片时，那么，其质量就决定着人们对它的印象。
往往这是显示出格调高雅的视觉效果之根本保证。
增加一张图片，就变为较为活跃的版面了，同时也就出现了对比的格局。
图片增加到三张以上，就能营造出很热闹的版面氛围了，非常适合于普及的、热闹的和新闻性强的读物。
有了多张照片，就有了浏览的余地。
数量的多少，并不是设计者的随心所欲，而最重要的是根据版面的内容来精心安排。
图片数量
4）图片的形式
对于不同的网站需求，图片也将以不同的方式呈现出来
方形图式
方形格式
出血图式即图片充满整个版面而不露出边框。
出血格式
退底图式是设计者根据版面内容所需，将图片中精选
升级会员 