人机工程学 大作业讲解.docx
- 文档编号:27520738
- 上传时间:2023-07-02
- 格式:DOCX
- 页数:21
- 大小:4.03MB
人机工程学 大作业讲解.docx
《人机工程学 大作业讲解.docx》由会员分享,可在线阅读,更多相关《人机工程学 大作业讲解.docx(21页珍藏版)》请在冰豆网上搜索。
人机工程学大作业讲解
浙江大学城市学院
2013—2014学年第1学期期末考核
《人机工程学》大作业
姓名:
林敏耿
学号:
31202228
班级:
电信1201
指导老师:
_刘加海_
人机工程与交互设计
——网页设计
摘要:
就产品而言,随着时代的发展,产品已不是单纯地重视款式的创新,更多的强调的是用户的体验。
但社会上仍有许多产品新增了各式各样的功能,却忽略了用户对产品功能是否可以简单方便地使用。
而本文将从使用者的角度探讨网页设计,主张网页设计要以人为本,进行人性化设计。
在探讨过程中,我们会对各种类型的门户网站进行对比,分析其设计的含义。
指出网页设计的主要内容,并提出网页设计的要点。
但在设计中由于网站对针对自己用户方面有自己独特的创新设计,所以不能以偏概全,因此会产生些许不足。
关键字:
人机界面网页设计以人为本人性化设计
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)宋体字型结构
11
3.1太小的链接点击区域
13
3.2错误使用的分页
14
一、网页设计
1.网站界面的设计原则
网站设计绝不是凭自己的臆想来进行设计的,其中有许多设计原则是需要熟记并且遵守的。
如果你经常上网的话,会看到很多网站设计很朴素,看起来给人一种很舒服的感觉;有点网站很有创意,能给人带来意外的惊喜和视觉的冲击;而相当多的网站页面上充斥着怪异的字体,花哨的色彩和图片,给人网页制作粗劣的感觉。
网站界面的设计,既要从外观上进行创意以到达吸引眼球的目的,还要结合图形和版面设计的相关原理,从而使得网站设计变成了一门独特的艺术。
通常的讲,网站用户界面的设计应遵循以下几个基本原则:
(1)用户导向原则
设计网页首先要明确到底谁是使用者,要站在用户的观点和立场上来考虑设计网站。
要作到这一点,必须要和用户来沟通,了解他们的需求、目标、期望和偏好等
(2)KISS原则
KISS原则就是"KeepItSampleAndStupid"的缩写,简洁和易于操作是网页设计的最重要的原则。
毕竟,网站建设出来是用于普通网民来查阅信息和使用网络服务。
没有必要在网页上设置过多的操作,堆集上很多复杂和花哨的图片
(3)布局控制
关于网页排版布局方面,很多网页设计者重视不够,网页排版设计的过于死板,甚至照抄他人。
如果网页的布局凌乱,仅仅把大量的信息堆集在页面上,会干扰浏览者的阅读。
因此合理的排版是必须的。
(4)视觉平衡
网页设计时,也要各种元素(如图形、文字、空白)都会有视觉作用。
根据视觉原理,图形与一块文字相比较,图形的视觉作用要大一些。
所以,为了达到视觉平衡,在设计网页时需要以更多的文字来平衡一幅图片。
另外,按照中国人的阅读习惯是从左到右,从上到下,因此视觉平衡也要遵循这个这个道理。
同时,也决不能低估空白的价值。
如果你的网页上所显示的信息非常密集,这样不但不利于读者阅读,甚至会引起读者反感,破坏该网站的形象。
在网页设计上,适当增加一些空白,精炼你的网页,使得页面变的简洁
(5)色彩搭配与文字可阅读性
颜色是影响网页的重要因素,不同的颜色对人的感觉有不同的影响,例如:
红色和橙色使人兴奋并使得心跳加速;黄色使人联想到阳光,是一种快活的颜色;黑颜色显得比较庄重,考虑到你希望对浏览者产生什么影响,为网页设计选择合适的颜色(包括背景色、元素颜色、文字颜色、链节颜色等)。
此外,为了方便阅读网站上的信息,可以参考报纸的编排方式将网页的内容分栏设计,甚至两栏也要比一满页的视觉效果要好。
另一种能够提高文字可读性的因素是所选择的字体,
(6)和谐与一致性
通过对网站的各种元素(颜色、字体、图形、空白等)使用一定的规格,使得设计良好的网页看起来应该是和谐的。
或者说,网站的众多单独网页应该看起来像一个整体。
网站设计上要保持一致性,这又是很重要的一点
(7)个性化
虽然说是个性化,但是网站的整体风格和整体气氛表达要与网站的主旨相符合。
2.分析传统网页界面的不足之处
上面解析了一下网站界面和介绍了一些交互设计的原则,接下来我们将根据以上所讲进行详细的优缺点分析。
(1)排版不简洁
传统的网页界面注重的的其功能,简而言之,就是将用户所需要的功能都摆在了台面上,然而再简单地加以修饰,一眼看上去的确是极其地充实,但这琳琅满目的信息却并不能给浏览者留下深刻的印象。
失败的规划是造成这的主要原因。
如下图所示
(2)字体不统一
各种颜色的字实在看上去太缭乱了,让人容易一下子就开始犯迷糊,一眼看上去总感觉排布不那么对劲,主要原因便出现在这些字体上面,如下图所示
(3)主次色彩不分
网站颜色是抓住用户眼球的第一要素,一个好的网站绝对不会让次要内容的颜色抢了主要内容的风头。
如下图所示,红色实在是太抢镜了。
(4)广告图片太多
适量的图片的确能起到锦上添花的作用,但是不要让大量的图片充斥在一个框面上,对浏览者来说,谁都不希望看到亮花自己双眼出网站。
(5)没有重点
有些新闻网站看上去排序井然有序,经过了简单的规划,似乎是很不错。
但是用户在浏览这类网站时希望看到的是最新或者最重要的新闻,这种则应该用比较突出的字体或图画体现出来。
如下图所示
上图看上去非常工整,但作为一个提供人民消息的网站,最好可以将一些最新消息和一些影响大的政策用显眼的字体颜色和大号字体标出来,让人一眼可以注意到。
(6)文字形式相同,功能不同
外观相同的文字,功能却不一样,违背了一致性的原则。
如下图所示,“应急管理”和“主题服务”文字样式相同,却前者是链接而后者不是。
这给交互者产生一个不好的挫折感。
3.分析好的网页界面出彩之处
一个好的界面应该不仅仅是画面出彩,规范整齐等等,而应该让使用者可以轻易地获取其所希望的内容,这才是一个好的网站所应该存在的。
其中以下是一些好的网站所应该有的。
(1)排版整齐
不得不承认,看似一个没有多少内容的网站,却给人有一种大气的感觉,干净整洁,一眼看去就知道有什么内容是自己需要的。
作为一个新闻网站,其排版可以说是成功的。
网易新闻网
(2)突出重点
浏览一些新闻网站往往是用户希望获得一些今日的热点,如果网站可以把最重要的让人一目了然,绝对是可以令人默默记住这个人性的网站。
如下图所示,这么大的一幅图片再配上醒目颜色写的文字,第一时间可以看到网站想要传达的一个重点。
中国娱乐网
(3)字体统一
同一等级的项目采用的是一样的字体,这样子给人的感觉就是整齐划一,虽然字体的颜色不太一样,但看上去绝对没有眼花缭乱的感觉。
起点小说网
(4)色彩搭配协调
合理地利用色彩的含义来衬托网站,同时利用各种颜色协调的搭配,往往能给网站带来许多意想不到的效果。
毕竟色彩也是能表达许多内涵的。
如下图所示
世纪佳缘网
(5)条目数量适宜
一个好的网站不应该让界面充满过多的条目,这样子给人一种不简洁的感觉。
有的时候几条让人一目了然的栏目绝对是让人眼前一亮的。
如下图所示。
新浪读书网
(6)导航目录合理安排
不同的网站有不同的安排,但最基本的就是应该将必须呈现出来而不是许多重复的放在上面。
更多的时候简洁即是美。
如下图所示。
XX搜索引擎
4.人机界面的视觉设计
界面视觉设计对用户体验的要求是综合运用色彩、图片、按钮、线条、边框、文字等设计元素把网页要传达的信息通过艺术的形式展示出来,形成网站的特定风格。
这一阶段应注重艺术性和可用性的结合,核心原则如下:
(1)品牌一致性。
整站的风格应保持简洁和一致性,增强网页的可记忆性和学习性。
主色调要与品牌整体形象相统一,以恰当的色彩明度和亮度,确保浏览者的浏览舒适度。
(2)图形的可学习性。
采用用户熟悉的事务图形做图标,增强网页的可学习性。
(3)各种元素的艺术性处理。
利用文字行距加强版式的装饰效果,加宽行距可以体现轻松、舒展的情绪,而宽、窄行距并存,可增强版面的空间层次与弹性。
根据以上这一些核心设计原则我们在网页设计中还应该注意到以下这些方面:
(1)布局的艺术性。
运用美学构图中的形式美规律对称、平衡、黄金分割、对比、多样统一、变化!
结合光影、色彩、影调等辅助手段,对网页设计元素及内容进行合理布局,使网页形式富有节奏感并且图文并茂。
如果网页只有多样变化,没有和谐统一,就会显得纷繁杂乱;如果只有和谐与统一,没有多样变化,就显得呆板单调。
只有各独立的差异因素在艺术组合建构中,不仅有外在关系的差异,而且有一定内在联系,构成统一整体,才能具有赏心悦目的审美效果。
(2)重要内容的突出性。
根据视觉流程原理,采用容易扫视的方法安排整体版面,把重要内容和功能放在醒目位置。
针对国内网站,醒目位置包括由九宫格!
法[3]确定的中间位置和根据国内用户从上往下、从左向右的视觉浏览习惯确定的页面上部和中上部。
网站公告以及一些关系可用性的关键要素如全局导航、辅助导航以及一些常用辅助功能的快捷方式应放在页面顶部。
对于拥有海量信息的网站,首页尽量不超过3屏,将目标用户最感兴趣的且与网站的营销目标最符合的信息放在首页首屏之内,其他次要信息可通过合理分类仅在首页提供类别入口,例如淘宝网首页的分类列表。
(3)信息浏览的便捷性。
由于网页的信息主体为文字,通过大小、色彩、位置等调整和图片图标线条等元素,对重点文字信息进行强调,能帮助用户快速阅读。
具体包括:
加粗段落标题以区别于内文;采用易于阅读的字体,避免文字过小或过密造成的阅读障碍;对字体进行大中小设置,以满足不同的浏览习惯;对于长篇文章进行分页浏览,避免页面过长而影响阅读;为新文章提供标识(如new图标),吸引浏览者查看;为重要内容在首页设立导读,使得浏览者可以了解大概信息
(4)表单操作的友好性。
表单的布局可利用视觉流程的相关研究来提高可用性。
表单元素对应的标签与其垂直对齐能提高可读性;为减少操作时间,增加表单的效率性,尽量采用下拉框而不是输入框,并在页面出错后能保存已输入的信息,避免重复输入信息;对必需字段及其限制做出标注(如手机位数、数据类型等等,避免无效信息);交互性的按钮必须清晰突出
二、
网页中文字的编排与设计
文字作为信息传达的主要手段目前也是网页设计的主体,文字是网页设计中必不可少的元素,也是网页中的主要信息描述要素,可以说是网页的灵魂
1.字体的使用
字体的最大特点就是每种字体给人带来不同的情感和风格属性。
字体具有两方面的作用:
一是实现字意与语义的功能,二是美学效应。
从加强平台无关性的角度来考虑,正文内容最好采用默认字体。
因为浏览器是用本地机器上的字库显示页面内容。
在网页设计中准确选择字体,是每个网页设计师首先要考虑的问题。
1.中文字体
1)宋体字型结构:
方中有圆,刚柔相济,既典雅庄重,又不失韵昧灵气,从视觉角度来说,宋体阅读最省目力,不易造成视觉疲劳,具有很好的易读性和识别性。
标题使用宋体给人稳健、传统的印象,宋体由书法体发展而来,最便于阅读。
2)楷体字型:
柔和悦目,间架结构舒张有度,可读性和识别性均较好,适用于较长的文本段落,也可用于标题。
3)仿宋体笔画:
粗细均匀,秀丽挺拔,有轻快、易读的特点,适用于文本段落。
因其字型娟秀,力度感差,故不宜用作标题。
4)黑体:
横竖线条粗细相同,结构非常合理。
黑体不仅庄重醒目,而且极富现代感,因其形体粗壮,在较小字体级数时宜采用等线体(即细黑),否则不易识别。
标题使用黑体给人以合理、理智的印象。
5)圆体:
视觉冲击力不如黑体,但在视觉心理上给人以明亮清新、轻松愉快的感觉,但其识别性弱,故只适宜作标题性文字。
2.文字的大小
1、文字的大小决定形象
1)标题的大小控制了画面的形象。
放大标题会给人有力量、活跃、自信的印象;缩小则表现出纤细和缜密的印象。
另外,文字大小的对比也会左右印象。
标题文字的大小与正文之比叫做跳动率。
跳动率越大,画面越活跃;反之,越稳重。
2)字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel)。
因为网页文字是通过显示器显示,所以建议采用像素为单位。
较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。
需要注意的是,小字号容易产生整体感和精致感,但可读性较差。
对于很多网页设计师来说,很习惯的使用某一字体大小,比如14px或12px。
有时候我们设计网页时并不会十分仔细的考虑字体大小的选择,因为在国内网站来说12px和14px基本成了所有网页字体的标准大小
3.网站的共性
1)标题应安排在醒目的位置,使用较大的字体,在版面中作点或线的编排。
为了保证标题的显示效果,大部分设计者都将其设置为图形格式。
2)一个网页一般不超出3种字体
3)网页中文字的颜色一般是多样的
4)网页的超级链接内容使浏览者对所包含信息一目了然。
文字链接可方便浏览者对信息的检索。
三.网页设计可用性研究
下面是2个网站经常面临的可用性问题,以及对于这些问题的推荐解决方案。
1.太小的链接点击区域
设置超文本链接的目的是被点击,确保它们很容易点击才有意义。
下面的示例中的链接实在是太小了;点击它们的难度太高。
这些是评论中的链接,Hacker
News是一个社会新闻的网站。
(点击区域用红色突出显示):
下面例子中包含相同的界面元素,链接的评论,但是这个例子中有一个很大的可点击区域:
2.错误使用的分页
分页指把内容分为几页。
如果需要显示一个很长的内容列表,这是网站上常用的方式;例如,商店中的产品或是相册中的照片。
因为这种目的使用分页是有意义的,因为太多的项目显示在一个页面上将会使网页下载和处理速度变慢。
FeedMyApp以正确的方式使用分页:
把其海量的应用服务列表以合适的量显示。
但是现在还有人用另一种方式在Web上使用分页。
.内容网页上,比如博客的一篇文章,有时也会分成若干页。
为什么这样做?
有什么好处么?
不太可能是文章实在太长了,因此需要分页;在大多数情况下,这样做是用来提高页面浏览量的。
因为很多博客和杂志通过广告获得收入,获得更多的页面浏览量(即单独网页的加载数量)来提高他们的浏览统计数据,使他们能够在每个广告上获利更多。
Wired上的文章《Google的Logo》分为8页,非常难以阅读。
虽然这可能看起来像是一种简单的方法,让您可以从广告中挤压出更多的钱,但它也带来了两个主要的问题。
首先,这样做真的,真的非常讨厌。
阅读一篇文章不得不加载好几页一点也不好玩。
您给您的访客设置了一个完全没有必要的障碍。
第二个原因是SEO(搜索引擎优化)。
搜索引擎使用您网页上的内容理解它是关于什么的,然后相应地进行索引。
如果内容分成若干页,内容就被稀释了,每个页面更难理解并且其中和主题相关的关键字也更少了。
这可能会对文章在搜索引擎中的排名产生不利影响。
第四章.以人性化为主旨的交互设计的2样产品
4.1浙江大学城市学院
俗话说:
学以致用。
作为学院的一份子,我就先将学校的这个门户网站来进行解析一下。
(1)网站主题
既然是学校网站,他的最主要作用是宣扬我们学校形象。
也就是对社会上公布我们学校最近的近况,引起社会关注,令我们的学校在社会中拥有好的影响力。
换句话说,它的服务人群一部分是社会上的群众,记者等,另外一部分也是我们学生的家长。
这些用户的特点都是希望了解学校最进什么内容,所以在设计时应该在正文中对学校状狂多加描述,这是网站的任务之一。
网站的设计就是要营造出一种浓郁的学院气氛,仅从网站外表看上去,就要知道我们学校虽然不是一所一流大学,但是是在朝这个目标前进的。
总而言之,网站就是向这些关心学校的用户群体提供学校的内容,展示学校良好形象。
(2)排版
1)间距
进行大致区分一下,这个网站的主要版块就是两块,一块是上面的图画,另一块就是正文的内容。
然后,通过的中间的导航仪进行分离。
两者之间的距离通过导航目录完美地分来了,
然后针对导航目录中的间距而言,每个条目之间大约空余了两个字的间距。
从整行的字体数量来考虑的话,其实是略显多的,有52个字,幸好是字体较小才没有带来比较拥挤的感觉。
但因为字体大小的原因,每个字体之间的间距就显得有些窄,毕竟你要是太宽的话就感觉正文有点空泛了。
并且每行之间的间距也不太大,总之一眼看去正文给人的感觉有点不太显大气。
但总的来说间距还是比较适宜的,没用影响用户的可读性。
2)字体
针对字体型式而言,采用的是标准的宋体,毕竟学校展示出来的不能像一些娱乐网站一样用一下特殊的艺术体来进行表述内容。
而简明干练的宋体字可以说符合学校的形象
3)窗口排布
一眼看上去显而易见可以明显区分出来三个窗口,一个是最上面的图片,然后是下面左边的内容展现,最后是右边的正文内容。
概括起来就是上下规划加上左右规划,是非常常见的布局。
总之一眼看上去可以说是井然有序的,没有让人感觉到排版很混乱。
对于内容窗口的展示,网站设计者采用的是一个窗口搭配几个目录进行设计,相对于一个大窗口带上若干个小窗口的设计,显得比较简洁,唯一设计的问题就是目录的摆放位置放在图片上方,令用户可能有些不习惯。
这个可以改下。
4)元素搭配
对于文字前面已经说过了,图片则后面再说。
对于超链接而言,如下图所示
这是这个网站的超链接,只是较为简单的将字体的颜色进行改变了下,对于一个学校网站来说,的确也可以了,不需要像一些娱乐网站搞的非常炫目的。
此外这个网站的部分留白还是不错的,通过这些白色令页面看上去简洁多了。
(3)颜色搭配
首先明确的就是这事一个学校网站,它需要红绿蓝的颜色使网站看上去非常绚丽的,这样子颜色起到的就是反效果了,
网站采用是以白色为底,蓝色为导航目录框,红色大标题,黑色字的搭配。
总结来说,就是把每个颜色各自的作用表现出来。
白底黑字是最常见的搭配,是用户可以清晰地浏览内容,蓝色代表的是活力,冷静,城市信赖的含义,而这种活力蓝则避免页面充满了死气沉沉的感觉,带来用户一抹明亮的心情,红色大标题第一时间抓住用户们的眼球,让人可以在第一时间关注到今日的重要新闻。
由此看来,设计者在颜色运用上是非常不错的。
(4)图片
放眼望去,图片一共也就两张,可是说采用的方形格式的摆放。
第一张是占了全屏内容一半的学校展校景图,放在了网页的正上方。
可以说,这幅图片在第一时间内吸引了用户的眼光,给大家展现出来了学校的良好学习环境。
另外一幅是占了网站四分之一的内容的新闻画面,放在了下面的左边,可以方便用户们迅速地获取他们想要的信息。
三、
【参考文献】
【1】杨盖尔,交换空间【M】中国建筑工业出版社2002-10
【2】人性化是未来产品形态设计的发展趋势【C】2010-9
【3】社交网站排行榜【J】来源站长之家
【4】网站设计注意事项【C】
【5】教学网页界面设计研究【C】2012-4
【6】网页配色万能宝典【M】2010-10-4电子工业出版社
【7】网页的版式设计【C】
【8】网站界面设计用户体验【C】
【9】网页设计艺术【M】北京希望电子出版社2009-3-1
【10】XX文库,XX百科
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 人机工程学 大作业讲解 人机 工程学 作业 讲解