《人机交互》幻灯片第8章-web界面设计

《《人机交互》幻灯片第8章-web界面设计》由会员分享，可在线阅读，更多相关《《人机交互》幻灯片第8章-web界面设计（115页珍藏版）》请在金锄头文库上搜索。

1、第8章 Web界面设计,2,本章内容简介,互联网上Web站点和页面的设计基础 Web站点的信息交互模型和结构 Web界面设计的基本思想和原则 Web界面设计的工具和技术 Web界面设计的可用性评估 一些典型的Web站点实例,3,8.1 Web基础,互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。 互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。 互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。,4,8.1.1 Web的出现与发展,90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学

2、家需要高效率的通讯方式来进行彼此交流与分享信息。 该中心高能核理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。,5,WWW-环球信息网络空间,简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用： 超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transport Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接起来，它能够提

3、供各种Internet服务，具有一致用户界面的信息浏览功能。,6,Web页面的发展趋势,Web的一个发展趋势，是图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 新一代Web信息描述标准XML，能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。,7,8.1.2超文本与超媒体,超文本 （Hypertext） 是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。

4、,8,8.1.2 超文本与超媒体,超媒体 （Hypermedia） 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。,9,8.1.3 Web界面设计问题的提出,Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关 站点的界面外观是否友好直接关系到是否能吸引人的关注。 人性化的设计是Web界面设计的核心 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。,10,8.2 Web信息交互模型,用来解释Web的人机界面性质的一个模型，

5、它提出网页是用户和知识之间的界面。 对于信息提供者来说包括信息的表达。 对于使用者来说则是信息的获取。 信息的表达与获取分别受到两者认知结构的制约。,11,Web信息交互模型,12,Web信息交互模型,模型涉及到信息的三种类型 数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线、在线测试等。,13,Web信息交互模型,模型涉及到信息的两种特性 动态性：信息在不断的变化，具有动态性 比如股票价格、机票价格等是不断变化的。 一致性：信息元素的组织方式具有一致性 信息元

6、素总是通过一定的方式结合在一起，如通过讨论、说明，或根据电话号码、名字、数字等方式组织陈列。,14,8.3 Web信息设计模型,Web信息设计模型 是解释Web人机界面性质的另一个模型。 是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面 第一是应该呈现或略去什么信息。 第二个方面指的是信息该如何被表现 。,15,Web信息设计模型,16,WEB的三种设计空间结构模式,通路结构模式 说明要展示的关键问题，使用户更容易获取有用的信息。 如出版物中的索引、标题、摘要、概述等。 Web网站地图和各栏目标题等信息都属于通路结构。 兴趣结构 兴趣结构的目的在于捕捉用户的注意力，并维持用户浏

7、览网页的注意力。 执行结构 指学习和教育材料之间的一系列交互，尤其是基于计算机的交互。 在WEB中指描述学习和网页信息之间的交互。,17,8.4 Web站点的概念设计,概念设计涉及的工作： 分析、确定站点的目标和用途。 准确定义所建立Web网站及站点的规范。 事先建立好站点的架构和导航设计。 兼顾不同的浏览器。,18,8.4.1 站点架构和导航设计,站点结构 站点的结构可分为逻辑结构和物理结构: 逻辑结构描述文档间的关系，定义文档间的链接。 物理结构描述文档的实际位置及显示方式 。 超文本结构中最常用层次结构 层次型结构按信息的必要性来改变信息的显示方式。 根网页是站点的主页，层次以根网页开始

8、。 用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。 层次结构通过深度和广度来描述。,19,8.4.1站点架构和导航设计,站点的导航设计 导航系统对访问者来说是路径指示系统。 站点访问者通过导航系统寻找需要的信息。 用户感觉到能以满意的方式找到所需信息时，导航系统才是合适的。 由于用户的差异，不可能实现完美的导航系统。,20,兼顾不同浏览器的设计,原因 站点浏览者可能使用不同类型和版本的浏览器。 以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。 方法 通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及

9、对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。,21,8.5 Web界面设计所涉及的问题,Web界面设计中要考虑的基本问题包括： Web界面设计基本原则 Web界面规划,22,8.5.1 Web界面设计基本原则,了解浏览者的心理状态 内容与形式的统一 减少浏览层次 特点明确 统一整体的形象 Web界面设计的3C原则,23,8.5.1 Web界面设计基本原则,1了解浏览者的心理状态 从心理学的角度分析浏览者的心理状态，有助于网页页面的设计。 在单击“退回”按钮之前有三秒钟而且只有三秒的等待。 必须迅速地把有趣和

10、有吸引力的东西显示出来。,24,8.5.1 Web界面设计基本原则,2内容与形式的统一 内容指的是Web网站的信息、数据及文字内容等. 形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点等。 网页的形式是为内容服务的，但本身又有自己的独立性和艺术规律。 网页设计的目的就是为了使网页更加形象、直观，更易被观众所接受。 不同内容的网页要求用不同的设计形式。,25,8.5.1 Web界面设计基本原则,3减少浏览层次 应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。 在主页的访问率为100人次的情况下，下一页的访问率降到30到50人次。 网页的层次越复杂，实际内容的访

11、问率也将越低，信息也就越难传达到读者的手里。,26,8.5.1 Web界面设计基本原则,4特点明确 利用相应逻辑结构来有序组织、开发出一个页面设计原型，进行测试，逐步精炼此原型，形成明确的特点 特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者 应清楚地了解Web网站用户的基本情况，从而能有的放矢，挑选关键信息,27,8.5.1 Web界面设计基本原则,5统一整体的形象 Web网站标识以及网页设计标准确定后，应尽量地应用到每一页页面上，使浏览者可以确定当前所浏览的网站，并且给浏览者留下深刻而统一的印象。,28,SONY公司的首页特点,SONY公司

12、的首页设计充分体现了引领消费电子产品的潮流这一特点，设计者很好地传递了该Web网站的特点： 页面上富有动感的线条和画面 鲜亮的用色 Flash画面和字样 鼠标落在上面就会以彩色显示的多个画面等,29,SONY公司的首页,30,8.5.1 Web界面设计基本原则,6Web网站设计的3C原则 concise （简洁 ） 使用醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。 限制所用的字体和颜色的数目。 页面上所有的元素都应当有明确的含义和用途，不要用无关的图片把页面装点起来。,31,8.5.1 Web界面设计基本原则,Consistent（一致性） 各页面使用相同的页边距；文本、图形间

13、保持相同的间距。 各页面上都放上公司或网站的统一标志。 各页面应当使用相同的导航图标。 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性。 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。,32,8.5.1 Web界面设计基本原则,contrast (对比度) 对比是强调某些内容的最有效的办法之一，好的对比度使内容更易于辨认和接受。 常用的对比方法是使用颜色进行对比。 另一种实现对比的方法是使用字体变化。 可以在文字排版中使用斜体和黑体写出关键内容，但不要滥用，以免不能达到强调效果。,33,8.5.2 Web界面规划,确定Web界面设计的目标 企业Web网站： 企业建立这个We

14、b网站的目的 这个网站的作用 该提供哪些吸引访问者的东西 用户访问这个Web网站后，能给他们带来什么？ 个人Web网站 ： 主要是展现自我、演练技术 。 建立的Web网站要有个性和特色 。,34,8.5.2 Web界面规划,界面布局的规划 制定好目标后，网页布局、元素的设计都要以这个目标为中心，尽量从各方面综合表现Web站点的目标。 在制定建立站点目标的同时，应该将站点作为一种文化、一种艺术来看。,35,8.5.2 Web界面规划,Web界面设计中用户的地位 确定Web站点的用户群体 ，从用户的角度去思考。 以用户为中心的设计，为用户的共性设计，同时考虑差异。 对目标用户群的构成进行分析：We

15、b网站是以提供的信息内容来分类的。 对目标用户的行为方式来分析：按照人机工程学的观点，行为方式受年龄、性别、地区、种族、职业、生活习俗、受教育程度等因素影响。,36,8.6 Web界面概要设计,Web界面概要设计包括 Web界面框架设计 Web界面的内容与风格的设计 Web界面设计的语言与文化,37,8.6.1 Web界面框架设计,Web网站规划 对市场进行分析，确定站点的目的和功能，并根据需要对站点建设中的技术、内容、费用、测试、维护等做出规划。 建立原型系统 尝试采用不同的方法修改目标、更新形象。 解决Web网站建设中的一些基本问题 ： Web网站的结构 信息的组织与管理 新增文件与原有系

16、统保持一致的措施。 存储信息的物理方法（采用数据库还是文件系统） 文档版本控制 结构的完整性以及维护方法等,38,8.6.1 Web界面框架设计,详细设计包括 Web页面的布局 系统的内部结构 实现方法和维护方法等 确定Web网站的运行模式 制造企业网站 商业企业网站 门户网站 新闻网站 个人网站 通过广告、销售等方式进行运作的网站 正式实施,39,8.6.2 Web界面的内容与风格,网站内容设计的原则 : HTML文档的效果由其自身的质量和浏览器解释的方法决定。应让所有的浏览器都能够正常浏览。 网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。 要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。,40,8.6.2 Web界面的内容与风格,网站内容设计的原则 网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。 网站内容应是动态进行修改和更新；。 网页中应该提供联机帮助功能。 网页的文本内容应简明，通俗易懂。 所有的内容都要针对设计目标而写，不要节外生枝。 文字要正确，不能有语法错误和错别字。,41,8