第8章web界面设计精品

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

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

2、出现与发展 w90年代初，瑞士日内瓦的欧洲核能研究中心分 布在世界各地的科学家需要高效率的通讯方式 来进行彼此交流与分享信息。 w该中心高能核理学家Tim Berners-Lee研究发展 了万维网（World Wide Web，WWW）的雏形 ，目的是为了建立一个能够整合各种资源、文 件及多媒体的系统，让使用者方便地取得不同 媒体的资料。 4人机交互技术编写组WWW-环球信息网络空间w简单来说，WWW是建立在客户/服务器模型之 上，构成的一个环球信息网络空间，主要使用 ：n超文本标记语言（Hypertext Markup Language， HTML）n超文本传输协议（Hypertext Tr

3、ansport Protocols， HTTP）通过Internet把遍布世界各地的服务器连接起来， 它能够提供各种Internet服务，具有一致用户界面 的信息浏览功能。 5人机交互技术编写组Web页面的发展趋势wWeb的一个发展趋势，是图形Web页面 的爆炸性发展。网上浏览中包括了大量 使用的动态图形，使图形Web遍布网络 的各个角落。 w新一代Web信息描述标准XML，能更详 尽地描述文档的结构信息，具有比HTML 有更强大的功能，为Web的发展提供了 强有力的支持。 6人机交互技术编写组8.1.2超文本与超媒体 w超文本 （Hypertext）n是一种使用于文本、图形或计算机的信息的

4、组织形式，是一种非线性的信息组织形式。 它使得单一的信息元素之间相互交叉引用， 这种引用并不是通过复制来实现的，而是通 过指向对方的地址字符串来指引用户获取相 应的信息。 7人机交互技术编写组8.1.2 超文本与超媒体w超媒体 （Hypermedia）n利用超文本形式组织起来的文件不仅仅是文 本，也可以是图、文、声、像以及视频等多 媒体形式的文件。这些多媒体信息就构成了 所谓的超媒体 。8人机交互技术编写组8.1.3Web界面设计问题的提出 wWeb界面设计是人机交互界面设计的一 个延伸，是人与计算机交互的演变。 wWeb界面设计与站点外观直接相关n站点的界面外观是否友好直接关系到是否能 吸引

5、人的关注。 w人性化的设计是Web界面设计的核心n如何根据人的心理、生理特征，运用技术手 段，创造简单、友好的界面，是Web界面设 计的重点。 9人机交互技术编写组8.2 Web信息交互模型 w用来解释Web的人机界面性质的一个模型 ，它提出网页是用户和知识之间的界面。 w对于信息提供者来说包括信息的表达。 w对于使用者来说则是信息的获取。 w信息的表达与获取分别受到两者认知结构 的制约。10人机交互技术编写组Web信息交互模型图 8-1 Web信息交互模型知 识信息提供者信息一致性动态性认知结 构 知 识数 据复杂信息过程信息网络空间用 户认 知 结 构 11人机交互技术编写组Web信息交互

6、模型w模型涉及到信息的三种类型n数据：当一条信息被反复、简单的提供时称 为数据，比如机票价格。n复杂信息：而用来叙述事件时称为复杂信息 ，如多媒体信息。n过程性信息：在信息有明确目标，并相互作 用时称为过程性信息，如在线、在线测 试等。 12人机交互技术编写组Web信息交互模型w模型涉及到信息的两种特性n动态性：信息在不断的变化，具有动态性w比如股票价格、机票价格等是不断变化的。n一致性：信息元素的组织方式具有一致性 w信息元素总是通过一定的方式结合在一起，如通 过讨论、说明，或根据电话号码、名字、数字等 方式组织陈列。13人机交互技术编写组8.3 Web信息设计模型 wWeb信息设计模型n是

7、解释Web人机界面性质的另一个模型。n是一种研究网页的信息设计模型。 w设计模型中要考虑到信息的两个方面n第一是应该呈现或略去什么信息。 n第二个方面指的是信息该如何被表现 。14人机交互技术编写组Web信息设计模型用户工具设计信息设计过程信 息内容选取通路结构兴趣结构执行结构图 8-2 Web信息设计模型提供者工具设计15人机交互技术编写组WEB的三种设计空间结构模式 w通路结构模式n说明要展示的关键问题，使用户更容易获取有用的 信息。 w如出版物中的索引、标题、摘要、概述等。 wWeb网站地图和各栏目标题等信息都属于通路结构。 w兴趣结构n兴趣结构的目的在于捕捉用户的注意力，并维持用 户浏

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

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

10、行。w方法 n通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结 果显示适用于特定浏览器的网页内容。 n根据用户浏览器分布情况决定设计所面向的浏览器类别和版本 。 20人机交互技术编写组8.5 Web界面设计所涉及的问题 wWeb界面设计中要考虑的基本问题包括 ： nWeb界面设计基本原则 nWeb界面规划 21人机交互技术编写组8.5.1 Web界面设计基本原则 w了解浏览者的心理状态 w内容与形式的统一 w减少浏览层次 w特点明确 w统一整体的形象 wWeb界面设计的3C原则 22人机交互技术编写组8.5.1 Web界面

11、设计基本原则1了解浏览者的心理状态n从心理学的角度分析浏览者的心理状态，有 助于网页页面的设计。n在单击“退回”按钮之前有三秒钟而且只有三 秒的等待。n必须迅速地把有趣和有吸引力的东西显示出 来。 23人机交互技术编写组8.5.1 Web界面设计基本原则2内容与形式的统一n内容指的是Web网站的信息、数据及文字内容等.n形式指的是网页设计的版式、构图、布局、色彩以 及它们所呈现出的风格特点等。n网页的形式是为内容服务的，但本身又有自己的独 立性和艺术规律。n网页设计的目的就是为了使网页更加形象、直观， 更易被观众所接受。n不同内容的网页要求用不同的设计形式。 24人机交互技术编写组8.5.1

12、Web界面设计基本原则3减少浏览层次n应尽量把网页的层次简要化，力求以最少的 点击次数链接到具体的内容。 n在主页的访问率为100人次的情况下，下一 页的访问率降到30到50人次。n网页的层次越复杂，实际内容的访问率也将 越低，信息也就越难传达到读者的手里。25人机交互技术编写组8.5.1 Web界面设计基本原则4特点明确n利用相应逻辑结构来有序组织、开发出一个页 面设计原型，进行测试，逐步精炼此原型，形 成明确的特点n特色鲜明的Web网站是精心策划的结果，只有 独特的创意和赏心悦目的网页设计才能在一瞬 间打动它的浏览者n应清楚地了解Web网站用户的基本情况，从而 能有的放矢，挑选关键信息26

13、人机交互技术编写组8.5.1 Web界面设计基本原则5统一整体的形象 nWeb网站标识以及网页设计标准确定后， 应尽量地应用到每一页页面上，使浏览者 可以确定当前所浏览的网站，并且给浏览 者留下深刻而统一的印象。27人机交互技术编写组SONY公司的首页特点wSONY公司的首页设计充分体现了引领消 费电子产品的潮流这一特点，设计者很 好地传递了该Web网站的特点：n页面上富有动感的线条和画面n鲜亮的用色nFlash画面和字样n鼠标落在上面就会以彩色显示的多个画面等28人机交互技术编写组SONY公司的首页29人机交互技术编写组8.5.1 Web界面设计基本原则w6Web网站设计的3C原则nconc

14、ise （简洁 ） w使用醒目的标题，这个标题常常采用图形 来表示，但图形同样要求简洁。 w限制所用的字体和颜色的数目。 w页面上所有的元素都应当有明确的含义和 用途，不要用无关的图片把页面装点起来 。 30人机交互技术编写组8.5.1 Web界面设计基本原则n Consistent（一致性） w各页面使用相同的页边距；文本、图形间保 持相同的间距。 w各页面上都放上公司或网站的统一标志。 w各页面应当使用相同的导航图标。 w页面中的每个元素与整个页面以及站点的色 彩和风格上保持一致性。 w文字的颜色要同图像的颜色保持一致并注意 色彩搭配的和谐。31人机交互技术编写组8.5.1 Web界面设计

15、基本原则ncontrast (对比度) w对比是强调某些内容的最有效的办法之一 ，好的对比度使内容更易于辨认和接受。 w常用的对比方法是使用颜色进行对比。 w另一种实现对比的方法是使用字体变化。 w可以在文字排版中使用斜体和黑体写出关 键内容，但不要滥用，以免不能达到强调 效果。32人机交互技术编写组8.5.2 Web界面规划 w确定Web界面设计的目标n企业Web网站：w企业建立这个Web网站的目的w这个网站的作用w该提供哪些吸引访问者的东西 w用户访问这个Web网站后，能给他们带来什么？ n个人Web网站 ：w主要是展现自我、演练技术 。w建立的Web网站要有个性和特色 。33人机交互技术

16、编写组8.5.2 Web界面规划n界面布局的规划w制定好目标后，网页布局、元素的设计都要以这 个目标为中心，尽量从各方面综合表现Web站点 的目标。w在制定建立站点目标的同时，应该将站点作为一 种文化、一种艺术来看。34人机交互技术编写组8.5.2 Web界面规划wWeb界面设计中用户的地位n确定Web站点的用户群体 ，从用户的角度去思考。 n以用户为中心的设计，为用户的共性设计，同时考 虑差异。n对目标用户群的构成进行分析：Web网站是以提供 的信息内容来分类的。n对目标用户的行为方式来分析：按照人机工程学的 观点，行为方式受年龄、性别、地区、种族、职业 、生活习俗、受教育程度等因素影响。35人机交互技术编写组8.6 Web界面概要设计 w Web界面概要设计包括nWeb界面框架设计 nWeb界面的内容与风格的设计nWeb界面设计的语言与文化 36人机交互技术编写组8.6.1 Web界面框架设计wWeb网站规划 n对市场进行分析，确定站点的目的和功能，并根据 需要对站点建设中的技术、内容、费用、测试、维 护等做出规