人机工程与交互设计(网页界面设计)

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）排版不简洁 传统的网页界面注重的的其功能，简而言之，就是将用户所需要的功能都摆在了台面上，然而再简单地加以修饰，一眼看上

16、去的确是极其地充实，但这琳琅满目的信息却并不能给浏览者留下深刻的印象。失败的规划是造成这的主要原因。如下图所示（2） 字体不统一各种颜色的字实在看上去太缭乱了，让人容易一下子就开始犯迷糊，一眼看上去总感觉排布不那么对劲，主要原因便出现在这些字体上面，如下图所示（3）主次色彩不分网站颜色是抓住用户眼球的第一要素，一个好的网站绝对不会让次要内容的颜色抢了主要内容的风头。如下图所示，红色实在是太抢镜了。（4）广告图片太多适量的图片的确能起到锦上添花的作用，但是不要让大量的图片充斥在一个框面上，对浏览者来说，谁都不希望看到亮花自己双眼出网站。（5）没有重点有些新闻网站看上去排序井然有序，经过了简单的规

17、划，似乎是很不错。但是用户在浏览这类网站时希望看到的是最新或者最重要的新闻，这种则应该用比较突出的字体或图画体现出来。如下图所示上图看上去非常工整，但作为一个提供人民消息的网站，最好可以将一些最新消息和一些影响大的政策用显眼的字体颜色和大号字体标出来，让人一眼可以注意到。（6）文字形式相同，功能不同外观相同的文字，功能却不一样，违背了一致性的原则。如下图所示，“应急管理”和“主题服务”文字样式相同，却前者是链接而后者不是。这给交互者产生一个不好的挫折感。（7）导航目有重复一个明确的导航目录可以让浏览者少了很多的烦恼。虽然这是隐藏的要素，但这也是影响一个网站是否设计用心的一个方面，其潜在地影响了

18、这个网站的印象。如下图所示导航目录不得不提一下城院的门户网站在这一点也做的不太好，如下图所示，这两条导航目录是出现在在一屏中的。城院导航仪（8）信息遮拦网站需要赚钱，自然需要广告的大量植入，但某些广告图片却经常将网站的信息遮拦住，这实在实不可取。虽然这种错我网站越来越少，但还是会有一些网站出现这样的问题。2.4分析好的网页界面出彩之处一个好的界面应该不仅仅是画面出彩，规范整齐等等，而应该让使用者可以轻易地获取其所希望的内容，这才是一个好的网站所应该存在的。其中以下是一些好的网站所应该有的。（1）排版整齐不得不承认，看似一个没有多少内容的网站，却给人有一种大气的感觉，干净整洁，一眼看去就知道有什

19、么内容是自己需要的。作为一个新闻网站，其排版可以说是成功的。网易新闻网（2）突出重点浏览一些新闻网站往往是用户希望获得一些今日的热点，如果网站可以把最重要的让人一目了然，绝对是可以令人默默记住这个人性的网站。如下图所示，这么大的一幅图片再配上醒目颜色写的文字，第一时间可以看到网站想要传达的一个重点。中国娱乐网（3）字体统一同一等级的项目采用的是一样的字体，这样子给人的感觉就是整齐划一，虽然字体的颜色不太一样，但看上去绝对没有眼花缭乱的感觉。起点小说网（4）色彩搭配协调合理地利用色彩的含义来衬托网站，同时利用各种颜色协调的搭配，往往能给网站带来许多意想不到的效果。毕竟色彩也是能表达许多内涵的。如

20、下图所示世纪佳缘网（5）条目数量适宜一个好的网站不应该让界面充满过多的条目，这样子给人一种不简洁的感觉。有的时候几条让人一目了然的栏目绝对是让人眼前一亮的。如下图所示。新浪读书网（6）导航目录合理安排不同的网站有不同的安排，但最基本的就是应该将必须呈现出来而不是许多重复的放在上面。更多的时候简洁即是美。如下图所示。百度搜索引擎2.5针对不足提出如何改进（1）明确网页主题相对于怎么去做好一个网页，更重要的是你要明确你这个网站的内容是什么。明确你网站的主题是什么，网站的服务对象是谁，网站的发展方向在哪里，网站的文化氛围怎么样，这些因素都是影响你的网站的设计。网站最重要的就是不能忽视你的服务对象，你

21、这个网站的用户群体在哪里，用户的特点是怎么样的根据这些东西来制定你网页的设计。明确了你的服务对象，接下去要知道的是你网站的功能。你功能如果只是单纯地介绍的话，那么设计就不能与塑造企业形象的网站的设计一样，因为你所提供用户的功能是不一样的。这对设计也是极其重要的一面。（2）排版改进一个好的排版可以让网页令人眼前一亮，简洁有序的分布可以在第一时间便让人喜欢上这个网站。那么怎样才能做出好的排版呢。1）注意间距这个间距指的是网页中各分栏之间的距离。所谓分栏，像报纸的排版一样，采用分栏显示信息，将其规划成一个大表格，然后根据版面设计进行安排内容，将这个表格分成不同的行和列调整行和列的高度和宽度，以便整个

22、页面框架稳定，再把图片和文字放到相应的单元格里，以达到版面的要求。好的网页要在一屏内保持适当的栏数，即保持各个栏间的间距适宜，例如最基本的就有上下分栏和左右分栏，这些需要注意的就是在完成后既不能令版面太空旷也不能令版面显得太狭窄。对于网站中正文内容，现在普遍是将行距设置为字体的150%200%之间。至于为什么采用这样的间距，主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。此外，除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以

23、体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。2）字体。针对字体的间距，则需要分字体的大小和中英文进行考虑。字体太大会减少一屏的网页信息，字体太小则又会影响用户的阅读，产生视觉上的压抑，因次字体的选择便显得尤为重要了。中国的网页大概是760800宽左右，主要是因为现在显示屏的分辨率普遍为1024*800上下，至于主要宽度则根据这个公司的种类如门户类还是公司类等来进行确定。一般现在网页上的默认字体为12pt（磅），现在网页上较为流行的中小字体为9pt左右。中文的字体在默认大小的情况下一般每行2030个

24、为宜，英文字母一般为4070个为宜。字体之间的间距在这些数量之内不会令用户产生不适应的感觉。这是针对字体大小的，对于字体样式也是有考究的。网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是

25、用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。此外，如果有一些精美的艺术字体应该谨慎使用，毕竟网页需要照顾全局来考虑。3）窗口排布一个大小不合理的窗口排布容易让用户自己费精力去找重要的信息，此外也容易失去你所希望用户看到的内容，所以主次窗口的排布是非常重要的。现在普遍采用的是一个主窗口大小旁边附加若干个（一般不超过5个）小窗口进行排列。4）元素搭配平衡一个最简单的网

26、页的也就是几样元素，包含了文字，图片和超链接。内容网站的灵魂，而这些是构成灵魂的物质基础。文字是网页的主体。虽然利用flash和图形文字等可以达到表达内容的效果，甚至可以表现地更好。但是纯文本文字的作用还是无法替代的，毕竟其所占用的存储空间是非常少的。当然在显示字体的时可以注意字体的大小和颜色，避免页面过于呆板，从而达到改善网页的效果。至于具体如何做将会在后面的内容中进行述说。图像给人的视觉效果比文字更加强烈。如果在网页中可以灵活地运用图片，可以很好地起到点缀网页的作用。但是如果只是为了画面的炫丽而盲目地添加图片，则会造成网页的混乱不堪，给人一种杂乱无章的感觉。对于超链接一定要让人轻易辩得，对

27、于与网页主题有关的目录要用相对醒目的方式来进行表达，给人的感觉要鲜明。其实还有一点也可以算是元素，那就是空白区。一般来说空白区的合理安排也是网站成功的推手。（3）色彩搭配不要忽略色彩对网站的重要作用，一个适合的网页内容的颜色绝对是可以起到锦上添花的作用。其中排版使用的颜色并不是指单一的文字使用颜色，其中还包括图片和背景所使用的颜色。在使用颜色中，由于许多网站其不同的功能性和针对用户的不同，所使用的也要根据对象来选择。不同的颜色给人的感觉是完全不同的。网站可以通过色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，有助于网站的持久性。下面举出一些颜色的例子：红色-是一种激奋的色彩。刺

28、激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 金黄-淡白搭配，可以产生优雅，舒适的气氛。 橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:) 。白色-具有洁白，明快，纯真，清洁的感受。 黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有

29、青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。此外，由于许多颜色都有其自身的含义，恰当地使用这些色彩，可以完美地影响用户的情感。一些典型的额设计如ibm的深蓝色和window的红黄蓝绿色彩都令我们感觉很深切。下面展示出一些色彩的内涵色彩图片内涵上面展现出来的是一部分颜色，针对不同的网站，浏览者不同，应用的主色调也可以进行相应的调整。根据色彩选内容是一方面，另一方面则是需要将你选出的色彩进行合理的搭配。如果牵强地将你认为符合的颜色搭配在了一起，只会让人产生一种很别扭的感觉。按照色彩的记忆性原则和以上颜色所代表的一些内涵，再根据和谐，均衡和突出重点的原则，进行色彩的合理搭配。在色彩的运用中也不是

30、运用颜色越多越好，虽然没有明确的颜色数量限制，但是太多的颜色显现在一屏中容易让用户眼花缭乱并且失去重点。色彩可以通过对比可以给人以强烈的视觉冲击，如windows红黄蓝三种基本色的搭配，而补色的对比则可以使颜色更加地鲜明，黑白的对比给人感觉黑的更黑，白的更白，给人的感觉相对比纯色的话，刺激更大。色彩的互补则不单单是从颜色上表现出来，从深色与淡色的相互映衬可以使画面看上去比较柔和。如果是两种对比很强烈的颜色，则是可以通过面积大小这种方式进行排布，面积小的颜色自动会补充道面积大的颜色，从而衬托出面积大的颜色的抢眼。对于文字的颜色，要根据网页的内容和背景等进行相应的选择。但不要出现字体颜色和背景颜色

31、相近导致无法看清的状况。而在整个网页上，最重要的是统一色调，整个界面中尽量少使用类别不同的颜色，控制在三种之内，使界面看上去保持简洁，单纯。除非是特殊情况，否则尽量不要使用对比非常强烈的色彩搭配。在网页设计中，色彩的运用遵循以上一些技巧和原则，如统一色调，慎用对比，善用色彩明度和面积等等，就大致可以设计出比较符合用户的网站了。（4）图片处理如果可以很好地利用图片的话，是可以对网站起到点睛之笔的作用，因为图片的视觉冲击是远远大于文字的。但是如果不顾原则地乱放一切的话，给人的第一印象绝对是不会好的。现在市场上的网站由于广告的盈利性，网页上的图片自然就会造成网页的不协调，对于这些图片只能看网站经营商

32、的想法了。对于图片的处理是非常复杂的事情。由于图片既包含有彩色和造型各异的字体，还有许多自己的色彩，对于某些动态图片，更有动画产生，这些因素都是影响网页的整体造型。因此图片要与网站相协调是件更加困难的事情，它甚至可以说还综合了前面字体与颜色设计技巧。对于图片处理，本着设计简洁至上的原则，应通过和谐统一的样式风格将这些视觉元素呈现出来。图片的几何框架，线条风格，色彩饱和度等要与网页的相关主题保持一致。下面列举出一些图片在排版时的一些注意点：1）图片的摆放图片的摆放位置直接关系到版面的构图布局、版面中的左右上下及对角线的四角都是视线的焦点。在这焦点上恰到好处地安排图片，版面的视觉冲击力就会明显地表

33、露出来。编排中有效地控制住这些点，可使版面变得清晰、简洁而富于条理性。图片摆放位置2）图版面积图片面积的大小安排，直接关系到版面的视觉传达。一般情况下，把那些重要的、吸引读者注意力的图片放大，从属的图片缩小，形成主次分明的格局，这是排版设计的基本原则。图版面积的大小安排，直接关系到版面的视觉传达。一般情况下，把那些重要的、吸引读者注意力的图片放大，从属的图片缩小，形成主次分明的格局，这是排版设计的基本原则。图片面积3）图片的数量图片数量多寡，可影响到读者的阅读兴趣。如果版面只采用一张图片时，那么，其质量就决定着人们对它的印象。往往这是显示出格调高雅的视觉效果之根本保证。增加一张图片，就变为较为

34、活跃的版面了，同时也就出现了对比的格局。图片增加到三张以上，就能营造出很热闹的版面氛围了，非常适合于普及的、热闹的和新闻性强的读物。有了多张照片，就有了浏览的余地。数量的多少，并不是设计者的随心所欲，而最重要的是根据版面的内容来精心安排。图片数量4）图片的形式对于不同的网站需求，图片也将以不同的方式呈现出来方形图式方形格式出血图式 即图片充满整个版面而不露出边框。出血格式退底图式 是设计者根据版面内容所需，将图片中精选部分沿边缘裁剪。化网图式 是利用电脑技术用以减少图片的层次。退底格式特殊图式 是将图片按照一定的形状来限定。对于一些非常特别的形式，我一下子也没法找到，只能希望大家以后浏览网站时

35、注意关注就是了。5）图片的组合设计者将数张图片安排在同一版面中。它包括块状组合与散点组合。块状组合强调了图片与图片之间的直线。垂直线和水平线的分割，文字与图片相对独立，使组合后的图片整体大方，富于理智的秩序化条理。图片组合6）图片方向的强弱可造成版面的行之有效的视觉攻势。方向感强则动势强，产生的视觉感应就强。反之则会平淡无奇。图片的方向性可通过人物的运势、视线的方向等方面的变化来获得，也可借助近景、中景和远景来达到。图片方向感以上这些都是对网页中图片的排版应该注意到的地方，安排好这些细节有助于图片与网站的协调性。有这样一说，一幅图版胜于千字。但这并非语言或文字表现力减弱了，而是说图片在视觉传达

36、上能辅助文字，帮助理解，更可以使版面立体、真实。因此通过图片具体而直接地把网站的意念高素质、高境界地表现出来，使本来物变成强而有力的诉求性画面，充满了更强烈的创造性，这是每一个设计者都应该学习的。第三章设计网页界面3.1网页界面的用户研究现在网站很受欢迎，其中重要的一点就是对用户体验的重视。用户体验是顾客满意度和忠诚度的决定性因素。网页设计中的用户体验是指用户在访问网站界面、功能的过程中建立起来的心理感受。如今企业对用户体验的关注度也已经成为了一阵热潮。很多跨国公司如微软、苹果、雅虎、惠普、ibm等都先后成立了用户体验研究机构,尝试将用户体验的研究成果应用到设计中来,为自己的产品提高竞争力;国

37、内企业如华为、中兴、腾讯、阿里巴巴、网易、携程旅行网等大型企业也在用户体验研究中投入了巨大的人力物力。这些企业从界面、情感、信息架构及交互设计角度进行分析,全面探讨了用户体验的研究范围和影响因素。随着情感化设计在产品设计领域的风行,人机界面界面设计不再是外观的艺术性和信息的简单呈现,自然的人机交互和良好的用户体验逐步变成关注的焦点。用户体验专家提出应该从品牌、内容、功能和可用性这4个用户体验影响因素进行衡量。由于用户体验的根本目标是提高用户满意度,对网站界面用户体验的研究应一切以用户为中心、综合运用不同学科的知识展开,并以尽可能实现这4个用户体验影响因素为目标。（1）根据心理学理论进行情感体验

38、设计。在心理方面,完成任务的动机和态度对完成任务质量和效率起着非常关键的作用,需要对不同文化背景不同环境因素下的用户的上网目的、行为习惯和心理反应进行分析,研究如何让用户更方便快捷地获取相关信息、简单高效地完成任务,不断提高网站的情感体验,让用户感到舒适、友好、可靠,实现网站可用性和功能性目标。在心理方面,用户使用网站时会有一定的忍耐限度,因此需关注页面加载速度,尽量确保页面在5 s内打开,并加快反馈时间。为避免用户产生受挫感,应减小使用难度,简化操作流程,提供必要的反馈,提高交互的流畅性,减少用户的记忆负担,保持界面一致性!为原则指导可用性的设计。（2）结合心理学和美学理论进行感官体验设计。

39、运用美学中色彩、空间布局、视觉中心等方面的原理,结合网站的具体性能需求展开界面的艺术性设计。通过合理运用图形、色彩等设计元素,以及平衡、呼应、对比、疏密等平面设计手段,不但可以增强界面的视觉艺术效果,还可以有效引导用户的视觉焦点,清晰展示信息的主次层次及任务流程的先后顺序,帮助用户在愉悦的视觉听觉环境中完成目标,让用户心理上的可控制需求得到满足。用户进入网站后对网站产生的第一印象为网站首页的视觉效果。它可以给浏览者一个概念或一种印象,这种印象有时候是致命!的。越是与人对周围环境视觉习惯概念、经验感受相一致,越是符合人的审美意识,越能激起人们的直觉审美认同,就越能产生审美快感。简洁美观充满亲和力

40、的首页,能从审美角度满足人类最基本也最强烈的生理需求,使用户在一开始使用时就产生审美愉悦,从心理上提高用户的满意度,同时也增强了用户愿意学习并使用的心理暗示,在一定程度上提高了用户的可用性。（3）结合心理学和交互设计学理论进行交互、浏览体验设计。以web2. 0相关技术如分类标签、引用等为辅助手段,研究如何增强网站的趣味性和交互友好性。心流理论强调用兴奋感和成就感来增强用户驾驭网站的自信心,将工作任务当作一种愉悦的享受,提高完成任务的效率。激发用户产生兴奋感和成就感的具体手段包括提供一些创造性的个性化服务,例如火狐浏览器网页切换时的立体视觉效果、flickr随心的功能排放、delicio. u

41、s的右键提交等。3.2人机界面的信息设计（强调视觉）由于不同类型的网站对网站功能和界面风格以及用户体验要求都有所不同,后面的设计与开发都要紧紧围绕网站目标和目标用户需求进行,确定合适的设计元素类型和原则。在可用性方面,电子商务网站在保证用户高效完成购买任务的基础上,还应给予用户充分的控制权和信任感 3;信息网站则侧重于搜索的便捷性和信息呈现的清晰性。针对目标用户年龄、性别、个人文化水平方面的不同,对网站的风格设计和可用性要求也不同,例如:以青年人为目标用户的娱乐网站要求设计个性张扬,色彩浓烈;女性化妆品网站要求色彩柔和;大学生则倾向于交互性强、自由个性的风格3.3人机界面的视觉设计界面视觉设计

42、对用户体验的要求是综合运用色彩、图片、按钮、线条、边框、文字等设计元素把网页要传达的信息通过艺术的形式展示出来,形成网站的特定风格。这一阶段应注重艺术性和可用性的结合,核心原则如下:（1）品牌一致性。整站的风格应保持简洁和一致性,增强网页的可记忆性和学习性。主色调要与品牌整体形象相统一,以恰当的色彩明度和亮度,确保浏览者的浏览舒适度。（2）图形的可学习性。采用用户熟悉的事务图形做图标,增强网页的可学习性。（3）各种元素的艺术性处理。利用文字行距加强版式的装饰效果,加宽行距可以体现轻松、舒展的情绪,而宽、窄行距并存,可增强版面的空间层次与弹性。根据以上这一些核心设计原则我们在网页设计中还应该注意

43、到以下这些方面：（1）布局的艺术性。运用美学构图中的形式美规律对称、平衡、黄金分割、对比、多样统一、变化!,结合光影、色彩、影调等辅助手段,对网页设计元素及内容进行合理布局,使网页形式富有节奏感并且图文并茂。如果网页只有多样变化,没有和谐统一,就会显得纷繁杂乱;如果只有和谐与统一,没有多样变化,就显得呆板单调。只有各独立的差异因素在艺术组合建构中,不仅有外在关系的差异,而且有一定内在联系,构成统一整体,才能具有赏心悦目的审美效果。（2）重要内容的突出性。根据视觉流程原理,采用容易扫视的方法安排整体版面,把重要内容和功能放在醒目位置。针对国内网站,醒目位置包括由九宫格!法 3确定的中间位置和根据

44、国内用户从上往下、从左向右的视觉浏览习惯确定的页面上部和中上部。网站公告以及一些关系可用性的关键要素如全局导航、辅助导航以及一些常用辅助功能的快捷方式应放在页面顶部。对于拥有海量信息的网站,首页尽量不超过3屏,将目标用户最感兴趣的且与网站的营销目标最符合的信息放在首页首屏之内,其他次要信息可通过合理分类仅在首页提供类别入口, 例如淘宝网首页的分类列表。（3）信息浏览的便捷性。由于网页的信息主体为文字,通过大小、色彩、位置等调整和图片图标线条等元素,对重点文字信息进行强调,能帮助用户快速阅读。具体包括:加粗段落标题以区别于内文;采用易于阅读的字体,避免文字过小或过密造成的阅读障碍;对字体进行大中

45、小设置,以满足不同的浏览习惯;对于长篇文章进行分页浏览,避免页面过长而影响阅读;为新文章提供标识(如new图标),吸引浏览者查看;为重要内容在首页设立导读,使得浏览者可以了解大概信息（4）表单操作的友好性。表单的布局可利用视觉流程的相关研究来提高可用性。表单元素对应的标签与其垂直对齐能提高可读性;为减少操作时间,增加表单的效率性,尽量采用下拉框而不是输入框,并在页面出错后能保存已输入的信息,避免重复输入信息;对必需字段及其限制做出标注(如手机位数、数据类型等等,避免无效信息);交互性的按钮必须清晰突出第四章以人性化为主旨的交互设计的5样产品4.1浙江大学城市学院俗话说：学以致用。作为学院的一份

46、子，我就先将学校的这个门户网站来进行解析一下。（1）网站主题既然是学校网站，他的最主要作用是宣扬我们学校形象。也就是对社会上公布我们学校最近的近况，引起社会关注，令我们的学校在社会中拥有好的影响力。换句话说，它的服务人群一部分是社会上的群众，记者等，另外一部分也是我们学生的家长。这些用户的特点都是希望了解学校最进什么内容，所以在设计时应该在正文中对学校状狂多加描述，这是网站的任务之一。网站的设计就是要营造出一种浓郁的学院气氛，仅从网站外表看上去，就要知道我们学校虽然不是一所一流大学，但是是在朝这个目标前进的。总而言之，网站就是向这些关心学校的用户群体提供学校的内容，展示学校良好形象。（2）排版

47、1）间距进行大致区分一下，这个网站的主要版块就是两块，一块是上面的图画，另一块就是正文的内容。然后，通过的中间的导航仪进行分离。两者之间的距离通过导航目录完美地分来了，然后针对导航目录中的间距而言，每个条目之间大约空余了两个字的间距。从整行的字体数量来考虑的话，其实是略显多的，有52个字，幸好是字体较小才没有带来比较拥挤的感觉。但因为字体大小的原因，每个字体之间的间距就显得有些窄，毕竟你要是太宽的话就感觉正文有点空泛了。并且每行之间的间距也不太大，总之一眼看去正文给人的感觉有点不太显大气。但总的来说间距还是比较适宜的，没用影响用户的可读性。2）字体针对字体型式而言，采用的是标准的宋体，毕竟学校

48、展示出来的不能像一些娱乐网站一样用一下特殊的艺术体来进行表述内容。而简明干练的宋体字可以说符合学校的形象3）窗口排布一眼看上去显而易见可以明显区分出来三个窗口，一个是最上面的图片，然后是下面左边的内容展现，最后是右边的正文内容。概括起来就是上下规划加上左右规划，是非常常见的布局。总之一眼看上去可以说是井然有序的，没有让人感觉到排版很混乱。对于内容窗口的展示，网站设计者采用的是一个窗口搭配几个目录进行设计，相对于一个大窗口带上若干个小窗口的设计，显得比较简洁，唯一设计的问题就是目录的摆放位置放在图片上方，令用户可能有些不习惯。这个可以改下。4）元素搭配对于文字前面已经说过了，图片则后面再说。对于

49、超链接而言，如下图所示 这是这个网站的超链接，只是较为简单的将字体的颜色进行改变了下，对于一个学校网站来说，的确也可以了，不需要像一些娱乐网站搞的非常炫目的。此外这个网站的部分留白还是不错的，通过这些白色令页面看上去简洁多了。（3）颜色搭配首先明确的就是这事一个学校网站，它需要红绿蓝的颜色使网站看上去非常绚丽的，这样子颜色起到的就是反效果了，网站采用是以白色为底，蓝色为导航目录框，红色大标题，黑色字的搭配。总结来说，就是把每个颜色各自的作用表现出来。白底黑字是最常见的搭配，是用户可以清晰地浏览内容，蓝色代表的是活力，冷静，城市信赖的含义，而这种活力蓝则避免页面充满了死气沉沉的感觉，带来用户一抹

50、明亮的心情，红色大标题第一时间抓住用户们的眼球，让人可以在第一时间关注到今日的重要新闻。由此看来，设计者在颜色运用上是非常不错的。（4）图片放眼望去，图片一共也就两张，可是说采用的方形格式的摆放。第一张是占了全屏内容一半的学校展校景图，放在了网页的正上方。可以说，这幅图片在第一时间内吸引了用户的眼光，给大家展现出来了学校的良好学习环境。另外一幅是占了网站四分之一的内容的新闻画面,放在了下面的左边，可以方便用户们迅速地获取他们想要的信息。4.2网易新闻网如下图所示网易新闻网这个是网易的新闻网站，可以说这是我做这篇论文来所有 看过的网站做的最好的网站之一了。接下来我以上面讲的几个方面进行解析这个网

51、站。（1）网站主题一眼看去，浏览者可以轻松地发现这是一个上面类型的网站，这至少说明了一点，网站设计者明确自己是去做新闻网站，他所服务的客户群体是获取新闻的人，是那些空暇之余看新闻的人群，所以他的发展方向就是给这个最大的用户群体提供浏览网页的最大便利。那么这是这个网站最基本的内容，也是每个网站设计者所需要明确的。（2）排版1）间距由于每台电脑屏幕有限，那么你对你安排的内容就要进行有效的规划，既不能给人产生一种极其空洞的感觉，又要防止一堆琳琅满目的信息让用户眼花缭乱。这时候你需要做的第一点就是控制好各个版面之间的间距和版面内各个内容之间的距离。进行大致区分，这个网页可以分为3块版面。第一块是最上面

52、的网易的导航目录，然后在下面是网易新闻的导航目录，最后面试网易今日的新闻要点。这是大的分栏。对于这3块版面，第一个导航目录和第二个导航目录采用的是用图片进行分离。由鲜艳的图片给人以强烈的视觉冲击，可以令用户不自觉地就将这两块内容进行区分开来。至于第三块和第二块的内容同属于新闻，所以可以很自然将它延续在了下面，方便用户进行扫视型的浏览。对于正文中字体间的距离，设计者在文本字体的基础上，空余出了0.5倍字高的行距，这样子给人的感觉就是非常简洁的。2）字体对于字体来说，由于这是一个新闻网站，它给人的风格应该是非常严肃的，因此设计中就不应该采用一些花俏的字体和一些儿大小不同的字体尺寸，所以网页中各个版

53、块的内容采用的都是非常标准的宋体，对于今日的重要消息，则一律采用了小四加粗的方案，而对于普通新闻标题采用的是则是正常的五号字体。这种字体一眼看上去则给人传出来一种不带一丝感情的感觉，正是符合新闻的公正，公开的风格。且各个同等级的标题采用的是同一大小的字体，给人以一种整齐统一的协调性。最后整个页面看上去给人的第一感觉就是整齐，简洁。作为一个新闻网站，其无疑成功的。3）窗口排布这个网页页面在总规划上采用的第一步是上下规划的分局，然后在下面局部采用的是左右规划的分局。然后采用了一个主窗口进行图片展示。对于一个新闻网站来说，一个展示新闻图片的窗口也是可以的。当然，如果可以在主窗口边上再加上4个左右的小

54、窗口的话就显得比较好了，毕竟这样子无论如何也不会漏掉今日大多数人关注的重要信息了。4）元素搭配这个网站包含的也就是图片，文字，超级链接三部分。对于文字和图片前面已经略微介绍过了，至于超链接则可以通过下面这幅小图展现出来图超链接展示非常简洁的一种超链接设计，只是将颜色进行了改变，同时会有轻微的凹下去的感觉，但是使用者却已经知道了这地方有个超链接了。这个网站做的还有一点非常好，那就是进行了部分的留白。由于其有部分的空白区域，合理地分开了各个版块之间的内容，使得整个页面看上去非常整齐并且精致。（3）颜色搭配作为一个新闻网站，它对色彩的要求是不需要花俏的，新闻的特征是公正严谨，而黑色拥有崇高，严肃的含

55、义，而白色代表的是纯真和神圣，从这几点上看来，其都符合新闻的含义此外，黑白搭配的感觉是可以比任何集中颜色搭配相比带给人以一种强烈的视觉冲击，因为这是两种完全相反的颜色。网站设计者以白色为页面背景，以黑色为文本文字，就给人传达了一种情感-我们新闻是真实的，是准确的，报导是严谨的，不会有一丝的歪曲。这几点都会新闻报导必须拥有的。一个好的网站不可能让一个页面中出现在太多颜色，一般以3种颜色为主。这个网站除了主色调，只有两个微小的局域部分采用的是蓝色（针对图片的颜色和网易名字的颜色不在考虑范围之内），这种微小的点缀作用可以给人在沉默中带来一丝明亮。不可忽略的是，蓝色代表的含义是理性，是信用，是冷静，这

56、几点含义也有助于浏览者在看新闻报导时的情感。从总的来说，这个网站在颜色搭配上还是做得不错的，没有出现颜色含义与新闻特点不相符合的情况，也没有大量的花边颜色进行混淆浏览者的视线，由于其良好的搭配，给网页增色不少。（4）图片网站内图片数量上将还是很少的，除了一张今日重要新闻的图片，也就在第一个导航目录和第二个导航目录之间插了一副广告图片，从一个网站经营者角度来看，倒也无可厚非。在面积上来考虑，所占也不大。两张图片中，第一个广告图片对于网站毫无用处，自然不能将其作为重点，因此给予它的面积是较小的，毕竟你大了，用户不满意啊。至于其的摆放方式采用方形形式，在方向上从左到右，依次摆放了3张图片合并为一张，

57、秩序上还是不错的。中间的新闻图片所占地方实在是好，基本上可以在第一时间内吸引到浏览者的视线，作为今日最重要的图片，倒也应该是应该的。对于图片来说，网站设计者对其的处理的还算是不错的。广告图片不多，不会引起用户的反感，新闻图片显少，让人还需要通过文字来进行寻找信息，毕竟文字表达能力是大于文字的。总的来说是不太完美的。4.3dota视频网虽然很不好意思将这个游戏的网站放上去，但我再看了许多做视频的网站之后，不得不承认这个网站在许多做视频之中做的比较好的。优酷网的背景颜色搭配不协调，并且视频位置排版实在是讲不上好；奇艺网的设计比较新颖，但视频导航仪放的位置卡在了图片的中间，不好；土豆网排版做的倒是的确不错，但是背景与导航仪的颜色和留白几方面做的不太好，让人一眼看上去有点空，而不是简洁。我只看了这几个视频网站的大家，其他就不注意了。接下去忽略网站本身的内容是什么来进行解