《人机交互与界面设计 第1章ppt课件.ppt》由会员分享，可在线阅读，更多相关《人机交互与界面设计 第1章ppt课件.ppt（134页珍藏版）》请在三一办公上搜索。
1、人机交互与界面设计,交互,设计,任课教师：范艳芳邮箱：,教学目标,掌握人机交互及界面设计的基础知识具备初步进行Web系统前端开发的能力能够在Web系统开发过程中遵循界面设计相关原则,2022/11/17,2,学生作品1,2022/11/17,3,学生作品2,2022/11/17,4,学生作品3,2022/11/17,5,课程安排,课时安排：讲课22学时，上机10学时课程性质：专业任选课考核方式：总评成绩=考试成绩70%+ 实验成绩20%+平时成绩10%考试方式：开卷上机安排：12,13,15,16,17(周四8-9节，计算中心B机房)教材：Web程序设计（第3版）（吉根林等主编）参考资料：人机
2、交互基础教程（第2版）（孟祥旭等编著）、软件人机界面设计（陈启安主编）等,2022/11/17,6,课件邮箱,Email: 密码: 20132013,2022/11/17,7,课程内容,第 1 章 人机交互基础第 2 章 Web应用基础 第 3 章 浏览器端交互程序设计第 4 章 服务器端交互程序设计,2022/11/17,8,第1章 人机交互基础,学习要点：理解人机交互、人机界面的基本概念了解人机交互与其他学科的关系以及人机交互的研究内容掌握人机交互发展的三个阶段掌握Web界面的设计原则理解Web界面要素的设计,2022/11/17,9,目 录,1.1 人机交互基础知识 1.2 界面设计,2
3、022/11/17,10,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,11,1.1.1 人机交互的概念,人机交互（Human-Computer Interaction，HCI）是关于设计、评价和实现供人们使用的交互式系统，且围绕这些方面的主要现象进行研究的学科。狭义的人机交互技术主要研究人与计算机之间的信息交换，主要包括人到计算机和计算机到人的信息交换两部分。,2022/11/17,12,输入信息,输出信息,键盘、鼠标、操纵杆、数据服装、眼动
4、跟踪器、数据手套、压力笔，以及手、脚、声音、姿势或身体的动作等。,打印机、绘图仪、显示器、音箱等,1.1.1 人机交互的概念,人机交互与人机界面人机交互是指人与计算机系统之间的信息交换，它是人与计算机之间各种符号和动作的双向信息交换；人机界面（又称用户界面或使用者界面）是指人与计算机系统之间的通信媒介或手段，它是人机双向信息交换的支持软件和硬件；人机交互致力于人与计算机的协调，旨在消融这两个智能系统间的通讯和对话界线，使得人与机器的信息交流便捷而通畅。人机交互是通过人机界面实现的，在界面开发过程中，有时把它们作为同义词使用。,2022/11/17,13,1.1.1 人机交互的概念,人机交互与人
5、机界面从信息传递的角度来看，用户界面的任务是为人类的感觉和效应通道与计算机的感知和输出机制提供通信接口。从信息转换的角度来看，用户界面的作用是实现“用户认知空间”与“计算机信息处理空间”间信息的双向映射。,2022/11/17,14,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,15,1.1.2 人机交互与其他学科的关系,人机交互与认知心理学、人机工程学、多媒体技术和虚拟现实与增强现实技术密切相关。认知心理学与人机工程学是人机交互技术的理论基础
6、；多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉和渗透。,2022/11/17,16,1.1.2 人机交互与其他学科的关系,认知心理学研究人们如何获得外部世界信息，信息在人脑内如何表示并转化为知识，知识怎样存储又如何用来指导人们的注意和行为。将人看作是一个信息加工的系统，认知就是信息加工，包括感觉输入的编码、贮存和提取的全过程。涉及心理活动的全过程-从感觉到知觉、识别、注意、学习、记忆、概念的形成、思维、表象、回忆、语言、情绪发展和过程。了解认知心理学原理可以指导人们进行人机交互界面设计。,2022/11/17,17,注意是认知过程的一部分，通常是指选择性注意，即有选择的加工某些刺激
7、而忽视其他刺激的倾向。如：侧耳倾听某人说话，忽略其他人的交谈。,1.1.2 人机交互与其他学科的关系,人机工程学把人机环境系统作为研究的基本对象，运用生理学、心理学和其它有关学科知识，根据人和机器的条件和特点，合理分配人和机器承担的操作职能，并使之相互适应，从而为人创造出舒适和安全的工作环境，使工效达到最优的一门综合性学科。,2022/11/17,18,1.1.2 人机交互与其他学科的关系,多媒体技术是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成在一起的技术。 动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，提高了用户接受信息的效率。多媒体带来的信息冗余性还可以消除
8、人机通信过程中的歧义性。多通道人机交互研究的兴起，将进一步提高计算机的信息识别、理解能力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设计引向更高的境界。,2022/11/17,19,视线、语音、表情、动作、眼神等,1.1.2 人机交互与其他学科的关系,虚拟现实技术虚拟现实技术是借助于计算机技术及硬件设备，建立具有高度真实感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起来像真实的，以产生身临其境的感觉的一种技术。自然和谐的交互方式是虚拟现实技术的一个重要研究内容，其目的是使人能以声音、动作、表情等自然方式与虚拟世界中的对象进行交互。,2022/11/
9、17,20,1.1.2 人机交互与其他学科的关系,增强现实技术把原本在现实世界的一定时间空间范围内很难体验到的实体信息(视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加到现实世界被人类感官所感知,从而达到超越现实的感官体验,这种技术叫做增强现实技术,简称AR技术。,2022/11/17,21,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,22,1.1.3 人机交互研究内容,人机交互界面表示模型与设计方法（Model and Meth
10、odology）一个交互界面的好坏，直接影响到软件开发的成败。友好人机交互界面的开发离不开好的交互模型与设计方法。因此，研究人机交互界面的表示模型与设计方法，是人机交互的重要研究内容之一。可用性分析与评估（Usability and Evaluation）可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计原则和可用性的评估方法等。,2022/11/17,23,1.1
11、.3 人机交互研究内容,多通道交互技术（Multi-Channel）在多通道交互中，用户可以使用语音、手势、眼神、表情等自然的交互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。其中，多通道信息整合是多通道用户界面研究的重点和难点。认知与智能用户界面（Intelligent User Interface，IUI）智能用户界面的最终目标是使人机交互和人人交互一样自然、方便。上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要问题。,2022/11/17,24
12、,1.1.3 人机交互研究内容,移动界面设计（Mobile and Ubicomp）移动计算（Mobile Computing）、普适计算（Ubiquitous Computing）等对人机交互技术提出了更高的要求，面向移动应用的界面设计问题已成为人机交互技术研究的一个重要应用领域。针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网络的低带宽高延迟等诸多的限制，研究移动界面的设计方法，移动界面可用性与评估原则，移动界面导航技术，以及移动界面的实现技术和开发工具，是当前的人机交互技术的研究热点之一。,2022/11/17,25,1.1.3 人机交互研究内容,群件（Groupware）群
13、件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人或群组间的信息传递、群组中的信息共享、业务过程自动化与协调，以及人和过程之间的交互活动等。目前与人机交互技术相关的研究主要包括：群件系统的体系结构、计算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序共享以及同步实现方法等内容。Web设计（Web-Interaction）重点研究Web界面的信息交互模型和结构，Web界面设计的基本思想和原则，Web界面设计的工具和技术，以及Web界面设计的可用性分析与评估方法等内容。,2022/11/17,26,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科
14、的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,27,1.1.4 人机交互的发展历史,人机交互的发展过程，是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段：,图形用户界面,自然和谐的交互,命令行,2022/11/17,28,1.1.4 人机交互的发展历史,语言命令交互阶段计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程。机器语言和汇编语言对使用者提出了较高的要求，且使用时效率低下，容易出错。高级语言使用人们比较习惯的符号形式描述计算过程，降低
15、了对人的要求。命令行界面可以看作是第一代人机界面。输入信息为数据和命令信息，输出信息以字符为主。,2022/11/17,29,1.1.4 人机交互的发展历史,图形用户界面（GUI）交互阶段图形用户界面（Graphical User Interface，GUI）的出现，使人机交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、WIMP(Window,Icon,Menu,Pointing Device)技术、直接操纵和“所见即所得(WYSIWYGWhat You See Is What You Get)”。与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大的提高。,2022/11/17
16、,30,指用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。,人机交互领域最普遍的电脑互动界面：包括视窗、图标、菜单、定位设备。,指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。,在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。,1.1.4 人机交互的发展历史,自然和谐的人机交互阶段随着虚拟现实、移动计算、普适计算等技术的飞速发展，自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互是其主要特点，其目的是使人能以声音、
17、动作、表情等自然方式进行交互操作。,笔式交互设备,语音交互设备,视觉交互设备,虚拟环境中的交互设备,触觉交互设备,2022/11/17,31,1.1 人机交互基础知识,1.1.1 人机交互的概念1.1.2 人机交互与其他学科的关系1.1.3 人机交互的研究内容1.1.4 人机交互的发展历史1.1.5 人机交互的应用,2022/11/17,32,1.1.5 人机交互的应用,制造业在制造业领域，人机交互技术已用于产品设计、装配仿真等各个环节，利用立体投影系统等各种交互设备，构建产品的虚拟仿真平台。,2022/11/17,33,法国标志雪铁龙公司的工业仿真系统平台，可进行汽车设计的检视、虚拟装配与协
18、同项目的检测等等。,1.1.5 人机交互的应用,教育科研已有一些科研机构研发出沉浸式的虚拟世界，通过和谐自然的交互操作手段，让学习者在虚拟世界自如地探索未知世界。,2022/11/17,34,图示为一个沉浸式协同环境，可以支持儿童建造一个虚拟花园，并通过佩戴立体眼镜沉浸在一个虚拟场景中，进行播种、浇水、调整光照以及观察植物的生长等。,1.1.5 人机交互的应用,军事军事战略战术演练和培训领域是刺激交互技术发展的源动力。使用计算机仿真技术不仅降低成本而且可方便地改变环境和条件，适用于特殊，危险等环境。,2022/11/17,35,F-35战斗机是第一种在座舱里取消了平视显示器(HUD)的量产战斗
19、机，F-35的飞行员将在其头盔综合显示器(HMD)面罩上的虚拟平板显示器上读取所有数据。,F-35战斗机,F-35的头盔显示器,1.1.5 人机交互的应用,生活生物特征识别技术得到广泛应用。指纹识别和人脸表情识别技术广泛应用于人们日常生活的通信过程或者安全保护。,2022/11/17,36,1.1.5 人机交互的应用,生活苹果iPhone等智能机采用多种交互技术Multi-Touch屏幕凭借电场感应手指的触碰内置方向感应器对动作做出反应，当屏幕方向转变时，方向感应器会自动做出反应并改变显示方式通过距离感应器感应距离，当电话靠近耳边时，自动关闭屏幕以节省电力并防止意外触碰通过环境光线感应器自动调
20、节屏幕亮度根据输入的拼音或笔画建议并预测可能输入的单词或词组通过语音控制功能直接拨打电话或播放音乐,2022/11/17,37,1.1.5 人机交互的应用,文化娱乐在影视制作领域，动作捕捉设备已经得到了广泛应用。如图展示了“加勒比海盗3”制作过程中，运动捕捉实验室场景和最终合成的影片效果。,2022/11/17,38,1.1.5 人机交互的应用,体育运动捕捉系统在体育训练中可以帮助教练员从不同的视角观察和监控运动员的技术动作，并大量地获取某类技术动作的运动参数及生理生化指标等数据，并统计出其运动规律，为科学训练提供标准规范的技术指导。,2022/11/17,39,曲棍球训练系统,小结,人机交互
21、是人与计算机系统之间的双向信息交换；人机界面是人与计算机系统之间的通信媒介或手段。人机交互以认知心理学、人机工程学为基础，与多媒体技术和虚拟、增强现实技术密切相关。人机交互经历了语言命令交互阶段、图形用户界面交互，目前正向着和谐自然的人机交互方向发展。,2022/11/17,40,目 录,1.1 人机交互基础知识 1.2 界面设计,2022/11/17,41,2022/11/17,42,1.2 界面设计,1.2.1 界面设计原则1.2.2 Web界面设计问题的提出1.2.3 Web界面设计原则1.2.4 Web界面要素设计,1.2.1 界面设计原则,命令行界面可以看作是第一代人机界面，其中人被
22、看成操作员，机器只做出被动的反应，人用手操作键盘，输入数据和命令信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。图形界面可看作是第二代人机界面，是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。,2022/11/17,43,1.2.1 界面设计原则,图形用户界面的主要思想桌面隐喻桌面隐喻是指在用户界面中用人们熟悉
23、的桌面上的图例清楚地表示计算机可以处理的能力。所见即所得在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。,2022/11/17,44,1.2.1 界面设计原则,图形用户界面的主要思想直接操纵直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵用户界面更多地借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。心理学研究证明物理的、空间的或形象的表示有利于解决问题和进行学习。直接操纵用户界面的操纵模式和命令界面相反，用户只需关注其要控制和操作的对象的任务语义即可
24、，无需为计算机语义和句法分心。打印图标 ，存盘图标,2022/11/17,45,1.2.1 界面设计原则,图形用户界面设计的一般原则界面要具有一致性例如：在菜单和联机帮助中必须使用相同的术语；对话框具有相同的风格；在同一个用户界面中，所有的菜单选择、命令输入、数据显示和其他功能保持一致的风格。常用操作要有快捷方式为常用操作设计快捷方式，可以提高用户的工作效率。常用操作的使用频度大，应减少操作序列的长度。定义的快捷键最好与流行软件的快捷键一致。如：拷贝使用Ctrl+C，存盘用Ctrl+S。,2022/11/17,46,1.2.1 界面设计原则,图形用户界面设计的一般原则提供必要的错误处理功能在出
25、现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能。比如：在进行了内容更改而未存盘时，选择关闭应用软件会弹出一个对话框，让用户确认是否执行关闭操作，以避免用户误操作。提供信息反馈对操作人员的重要操作要有信息反馈。用户界面应能对用户的决定做出及时的响应，提高对话效率，尽量减少击键次数，缩短鼠标移动距离。允许操作可逆,2022/11/17,47,1.2.1 界面设计原则,图形用户界面设计的一般原则设计良好的联机帮助人机界面应提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。合理划分并高效地使用显示屏幕只显示与上下文有关的信息；允许用户对可视环境进行
26、维护，如放大、缩小窗口；只显示有意义的出错信息；隐藏当前状态下不可用的命令。,2022/11/17,48,2022/11/17,49,1.2 界面设计,1.2.1 界面设计原则1.2.2 Web界面设计问题的提出1.2.3 Web界面设计原则1.2.4 Web界面要素设计,2022/11/17,50,1.2.2 Web界面设计问题的提出,Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与Web界面的外观直接相关。Web界面外观是否友好直接关系到能否吸引人的关注。人性化的设计是Web界面设计的核心。如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，
27、是Web界面设计的重点。,2022/11/17,51,1.2 界面设计,1.2.1 界面设计原则1.2.2 Web界面设计问题的提出1.2.3 Web界面设计原则1.2.4 Web界面要素设计,2022/11/17,52,1.2.3 Web界面设计原则,以用户为中心一致性简洁与明确体现特色兼顾不同的浏览器良好的导航设计,2022/11/17,53,1 以用户为中心的设计原则,把用户放在第一位，重点考虑用户的需求。既考虑用户的共性，又考虑用户之间的差异性；不同类型的Web网站，访问群体不同；同一类型的Web网站，用户群也存在年龄、行业差别。网站示例1 针对女性的网站尽量选用柔和、明快的暖色作为主
28、色调，给女性浏览者以热情、柔美的感觉。在页面构成上，可选用大量清晰度高的图片做视觉冲击。网站示例2 针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。 网站示例3针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。,2022/11/17,54,1 以用户为中心的设计原则,把用户放在第一位，重点考虑用户的需求。网站示例4针对老年人的网站，应考虑采用较大的字体，直截了当的信息显示和简单的浏览方式。考虑目标用户的行为方式。行为方式是人们由于年龄、性别、地区、种族、生活习俗、职业、受教育程度等形成的动作习惯、办事方法。行为方式直接影响人们对网站的操作使用，是设计者需要加以考虑和利用的因素。
29、,2022/11/17,55,2022/11/17,56,2022/11/17,57,2022/11/17,58,2022/11/17,59,2022/11/17,60,2022/11/17,61,62,2022/11/17,63,2022/11/17,2022/11/17,64,2022/11/17,65,2 一致性原则,Web界面的内容和形式应一致。内容包括：网站显示的信息，如数据、文字内容等。形式包括：Web界面设计的版式、构图、布局、色彩、风格等。网页的形式为内容服务，不同内容的网页用不同的设计形式。,2022/11/17,66,2 一致性原则,Web界面自身的风格应一致。网站标识及页
30、面设计标准确定后，应运用到每个页面上。每个页面都使用相同的页边距；文本、图形之间保持相同的间距；主要图形、标题或符号旁边留下相同的空白；若使用图标导航，则各个界面应当使用相同的图标；页面上的每个元素要与整个页面的设计风格一致；文字的颜色应和图像的颜色保持一致，并注意色彩搭配的和谐。,2022/11/17,67,2022/11/17,68,2022/11/17,69,2022/11/17,70,3 简洁与明确原则,保持简洁的常用做法是使用醒目的标题，通常标题采用图形来表示；限制所用的字体和颜色的数目；界面上所有的元素都有明确的含义和用途；界面上每一个元素都能让浏览者看到；3次点击原则：通常情况下
31、，访问者应该最多通过3次点击就能在网站上找到想要的信息。主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次。有时需要打破3次点击原则。比如电子商务网站，用户可能需3次以上点击才能找到想要的商品。如果一定遵循3次点击原则，可能造成一个页面上必须面对大量的可选商品，这会使用户感到困惑，甚至索性什么都不买。,2022/11/17,71,2022/11/17,72,2022/11/17,73,2022/11/17,74,4 体现特色的原则,特色鲜明的网站更容易在一瞬间打动它的浏览者，留下令人心动的第一印象；应清楚Web网站用户的基本情况，从而在网站设计时做到有的放矢，呈现关键信息；利
32、用逻辑结构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点。,2022/11/17,75,2022/11/17,76,2022/11/17,77,2022/11/17,78,79,2022/11/17,80,2022/11/17,2022/11/17,81,5 兼顾不同浏览器的原则,网站的浏览者可能使用不同类型和版本的浏览器。IE浏览器，opera浏览器，火狐浏览器（Firefox），Google浏览器（Google Chrome ）等；IE浏览器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其
33、它版本上不能正常显示。根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结构显示适用于特定浏览器的网页内容。,2022/11/17,82,2022/11/17,83,2022/11/17,84,6 明确的导航设计的原则,导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。好的导航系统可以使用户以一种满意的方式找到需要的信息。导航系统的设计应从使用者的角度出发，力争
34、简便、清晰和完整一致。,85,2022/11/17,86,2022/11/17,87,2022/11/17,2022/11/17,88,1.2 界面设计,1.2.1 界面设计原则1.2.2 Web界面设计问题的提出1.2.3 Web界面设计原则1.2.4 Web界面要素设计,2022/11/17,89,1.2.4 Web界面要素设计,Web界面规划文化与语言内容设计Web界面布局Web界面色彩Web界面的文本设计Web界面的动画与多媒体Web界面上的导航,2022/11/17,90,1 Web界面规划,明确网站的目标和用途；网页布局、元素设计应以网站的目标为中心，从各方面表现站点的目标；在制定
35、建立站点的目标时，应将站点作为一种文化、一种艺术来看，力求在设计Web页面时追求艺术效果与美感；确定了Web页面设计目标后，需要确定Web网站的用户群体，进行以用户为中心的设计，既考虑用户的共性，又考虑用户的差异。,2022/11/17,91,2 文化与语言,全球服务型的网站应考虑不同国家的不同类型的文化与语言环境。Google的中文网站、百度网站通过图片体现中国的传统节日。外交部网站、Nvidia（英伟达）网站提供多种语言。当网站有多种语言版本时，应考虑不同的文化背景。阿拉伯语的书写方式为从右向左。不同国家和地区适用的颜色可能不同，不同地区的网页内容应符合该地区的货币单位、时间格式等习惯。不
36、同语言文字的结构不同，在设计页面布局时需要分别考虑。表达同样含义的语句，通常德语语句的长度大于英语语句，英语语句的长度大于汉语语句。,2022/11/17,92,2022/11/17,93,2022/11/17,94,2022/11/17,95,2022/11/17,96,2022/11/17,97,2022/11/17,98,2022/11/17,99,2022/11/17,100,2022/11/17,101,2 文化与语言,全球服务型的网站应考虑不同国家的不同类型的文化与语言环境。Google的中文网站、百度网站通过图片体现中国的传统节日。外交部网站、Nvidia（英伟达）网站提供多种语
37、言。当网站有多种语言版本时，应考虑不同的文化背景。阿拉伯语的书写方式为从右向左。不同国家和地区适用的颜色可能不同，不同地区的网页内容应符合该地区的货币单位、时间格式等习惯。不同语言文字的结构不同，在设计页面布局时需要分别考虑。表达同样含义的语句，通常德语语句的长度大于英语语句，英语语句的长度大于汉语语句。,2022/11/17,102,2022/11/17,103,3 内容设计,Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。面向消费者的网站应使用通俗的词汇、引人注目的广告方式、个性化并有趣味性的语言。面向专业人员的网站应使用科学、严谨、准确的词语和表达方式，避免可
38、能造成的任何误解。,2022/11/17,104,4 Web界面布局,布局设计应做到布局合理、有序、整体化。常用Web页面布局的形式：“口”字形布局左右结构布局上下结构布局封面型布局自由式布局,2022/11/17,105,4 Web界面布局,“口”字形布局页面顶部为网站的标题、横幅广告条以及网站的导航等；网页的左右分列两小条内容，中间是主要部分；网页的最下面是一些基本信息，如：联系方式、版权声明等；这种布局是使用最多的一种布局。,2022/11/17,106,2022/11/17,107,2022/11/17,108,2022/11/17,109,4 Web界面布局,左右结构布局Web页面的
39、顶部有标题或者无标题，页面的主要部分分为左右两部分，一般左面是导航链接，右面是正文。论坛多采用这种结构；企业网站也常采用这种结构。优点：结构清晰、一目了然。,2022/11/17,110,2022/11/17,111,2022/11/17,112,4 Web界面布局,上下结构布局Web页面的最上面是标题，下面是正文。新闻发布系统、内容介绍页面或注册页面等多用这种类型。,2022/11/17,113,2022/11/17,114,2022/11/17,115,4 Web界面布局,封面型布局多出现在网站的首页；通过精美的平面设计结合动画，给人带来赏心悦目的感觉；页面上通常仅包含简单的链接或没有任何
40、提示；常出现在企业网站和个人主页中。,2022/11/17,116,2022/11/17,117,2022/11/17,118,4 Web界面布局,自由式布局是上述几种类型的结合和变化,2022/11/17,119,2022/11/17,120,2022/11/17,121,4 Web界面布局,使用什么样的布局没有固定的模式，需要具体情况具体分析；内容较多时，可以考虑“口”字形结构的布局；如果介绍的主题较单一时，可以考虑上下结构布局；如果想展示企业形象或个人主页想要展示个人风采，可以考虑封面型布局。,2022/11/17,122,5 Web界面色彩,网站给人的第一印象来自视觉的冲击，颜色元素在
41、网站的感知和展示上扮演着重要的角色。企业或个人的风格、文化和态度可以通过网页中的色彩混合、调整或者对照的方式体现出来，因此确定网站的标准色彩很重要。不同的色彩搭配可以产生不同的效果，并可能影响到访问者的情绪。,2022/11/17,123,5 Web界面色彩,色彩理论中红、绿、蓝为三原色；其它的色彩可以通过三原色调和而成；HTML语言中的色彩表达使用三原色的数值（RGB）来表示。颜色分为彩色和非彩色；非彩色指黑、白、灰；彩色是指除了非彩色以外的所有色彩。专业机构的研究表明：彩色的记忆效果是黑白的3.5倍。,2022/11/17,124,5 Web界面色彩,网站的标准色彩一般不超过3种。标准色彩
42、主要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉；其它色彩作为点缀和衬托，不能喧宾夺主。应避免使用可能有文化禁忌的颜色，以及会给色盲用户带来问题的颜色。在新加坡红、绿、蓝色很受欢迎，视紫色、黑色为不吉利，黑、白、黄为禁忌色；捷克、斯洛伐克： 红、蓝、白是积极的，黑色视为带有消极的含义。,2022/11/17,125,5 Web界面色彩,网站的色彩搭配应考虑如下原则：色彩的鲜明性 网站的色彩要鲜明，容易引人注目色彩的独特性 与众不同的色彩，使得用户对网页的印象深刻色彩的适合性 色彩和网页要表达的内容气氛相适合色彩的联想性 不同色彩会产生不同的联想，选择色彩要和网页的内涵相关联蓝色想
43、到天空黑色想到黑夜红色想到喜事,2022/11/17,126,6 Web界面的文本设计,文本不要太多，以免转移浏览者注意力。要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。选择的字体应和整个界面融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。,2022/11/17,127,6 Web界面的文本设计,通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。应该重视标题的处理。标题一般无分级要求，其
44、字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。,2022/11/17,128,2022/11/17,129,2022/11/17,130,7 Web界面动画与多媒体,图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。在设计动画和多媒体元素时需要考虑带宽以及浏览器的支持能力。丰富的多媒体展现形式可以增强Web界面的艺术性和趣味性，但是过多的使用多媒体元素会降低浏览速度，影响访问效果和质量。,2022/11/17,131,8 Web界面上的导航,对
45、于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间中移动。真实世界的导航观点在Web中常被采用。Web导航应该帮助用户理解他们在哪里、可以去哪里、怎样获得想要的东西。导航的设计应充分考虑可见性、标记和导航元素的布局。,2022/11/17,132,8 Web界面上的导航,Web页上仅有五个基本区域可放置导航元素：顶部底部左侧右侧中央,2022/11/17,133,小结,图形用户界面的7个设计原则Web界面设计的6个原则Web界面的8种要素的设计,作业,找两个自己熟悉的商业网站，总结其在设计上的5条优点，根据自己的使用习惯，提出该网站可以进一步改进的地方。,2022/11/17,134,
