人机交互课件第7章 Web界面设计

WWW-环球信息网络空间
简单来说，WWW是建立在客户/服务器 模型之上，构成的一个环球信息网络空间， 主要使用：
超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transport Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接 起来，它能够提供各种Internet服务，具有一 致用户界面的信息浏览功能。
Web界面布局
布局设计应做到整体布局合理、有序、整 体化。 常用Web页面布局的形式：
“同”字形结构布局 “国”字形结构布局 “匡”字形布局 “三”字形布局 “川”字形布局 左右对称布局 自由式布局
“同”字形结构布局(/)
Web页面的发展趋势
Web 的一个发展趋势，是图形 Web 页面 的爆炸性发展。网上浏览中包括了大量 使用的动态图形，使图形 Web 遍布网络 的各个角落。 新一代 Web 信息描述标准 XML ，能更详 尽地描述文档的结构信息，具有比HTML 有更强大的功能，为 Web 的发展提供了 强有力的支持。
“匡”字形布局 ()： 这种布局结构去掉了“国”字形布局的右 边的边框部分 给主内容区释放了更多空间，内容虽看起 来比较多，但布局整齐又不过于拥挤 适合一些下载类和贺卡类站点使用。
“三”字形布局 一般应用在简洁明快的艺术性网页布局， 这种布局一般采用简单的图片和线条代 替拥挤的文字，给浏览者以强烈的视觉 冲击
文本设计
字体是每一个网站的必要组件，选择字 体和颜色，和其它页面元素一起产生一 个视觉效果。
文本设计遵循的几个原则
文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一 个和谐的视觉效果；文本的颜色应该一致，让用户可以容易 地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素 选择了字体，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同 类型的数据或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化 的外观和感觉。 应该重视标题的处理。标题一般无分级要求，其字形一般较 大，字体的选择一般具有多样性，字形的变化修饰则更为丰 富。
Web界面的内容与风格
Web界面的风格
Web界面的风格包括站点的标志、色彩、字
体、布局、交互方式、内容价值、存在意义等。 一个杰出的网站需要整体的形象包装和设计。 为儿童设计的网站应当使用比较丰富的色彩和 图形，并且较多使用动画和声音等多媒体表现 工具。 为老年人设计的网站需要考虑采用较大的字体、 直截了当的信息显示和简单的浏览方式，以适 用老年人可能逐渐减弱的视力和记忆力
Web网站规划
对市场进行分析，确定站点的目的和功能， 并根据需要对站点建设中的技术、内容、费 用、测试、维护等做出规划。
建立原型系统
尝试采用不同的方法修改目标、更新形象。 解决Web网站建设中的一些基本问题 ：
Web网站的结构 信息的组织与管理 新增文件与原有系统保持一致的措施。 存储信息的物理方法（采用数据库还是文件系统） 文档版本控制 结构的完整性以及维护方法等
超文本与超媒体
超文本 （Hypertext）
是一种使用于文本、图形或计算机的信息的 组织形式，是一种非线性的信息组织形式。 它使得单一的信息元素之间相互交叉引用， 这种引用并不是通过复制来实现的，而是通 过指向对方的地址字符串来指引用户获取相 应的信息。
超文本与超媒体
超媒体 （Hypermedia）
自由式布局 自由式布局打破上述两种布局的框 架结构，常用于文字信息量少的时 尚类和设计类网站。 其优点是布局随意，外观漂亮，吸 引人。 缺点是显示速度慢。
Web界面的色彩
确定网站的标准色彩
不同的色彩搭配产生不同的效果，并可能影 响到访问者的情绪。
以红、绿、蓝三色称为三基色
其它的色彩都可以用这三种色彩调和而成。
7.3 Web界面要素设计 7.3.1 Web界面规划
确定Web界面设计的目标
企业Web网站：
企业建立这个Web网站的目的 这个网站的作用 该提供哪些吸引访问者的东西 用户访问这个Web网站后，能给他们带来什么？
个人Web网站 ：
主要是展现自我、演练技术 。 建立的Web网站要有个性和特色 。
界面布局的规划
制定好目标后，网页布局、元素的设计都要 以这个目标为中心，尽量从各方面综合表现 Web站点的目标。 在制定建立站点目标的同时，应该将站点作 为一种文化、一种艺术来看。
站点的导航设计
导航系统对访问者来说是路径指示系统。 站点访问者通过导航系统寻找需要的信息。 用户感觉到能以满意的方式找到所需信息时， 导航系统才是合适的。 由于用户的差异，不可能实现完美的导航系 统。
“川”字形布局( ) 整个页面在垂直方向分为三列，网站的 内容按栏目分布在这三列中，最大限度 地突出主页的索引功能，一般适用在栏 目较多的网站里。
左右对称布局 采取左右分割屏幕的方法形成对称布 局。 优点是自由活泼，可显示较多文字和 图像。 缺点是两者有机结合较为困难。
2．一致性
Web界面设计还必须考虑内容和形式的一致性。其次，Web界 面自身的风格也要一致性，保持统一的整体形象。 Web网站的信息、数据及文字内容要与网页设计的版式、构图、 布局、色彩以及它们所呈现出的风格特点一致。形式为内容服 务，但本身又有自己的独立性和艺术规律。网页设计的目的就 是为了使网页更加形象、直观，更易被观众所接受。不同内容 的网页要求用不同的设计形式。
利用超文本形式组织起来的文件不仅仅是文 本，也可以是图、文、声、像以及视频等多 媒体形式的文件。这些多媒体信息就构成了 所谓的超媒体 。
Web界面设计问题的提出
Web界面设计是人机交互界面设计的一 个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关
站点的界面外观是否友好直接关系到是否能 吸引人的关注。
页面顶部为主菜单，下方左侧为二级栏目条， 右侧为链接栏目条，屏幕中间显示具体的内 容。 优点是页面结构清晰、左右对称、主次分明， 因而得到广泛的应用。 缺点是太过于规矩呆板，需要善于运用细节 色彩的变化来调剂。
“国”字形结构布局 ( ) “ 国”字形结构布局在“同”字形结构布局 的基础上，在页面下方增加一横条菜单或广 告 其优点是充分利用版面、信息量大、切换方 便。 有的网站将页面设计成镜框的样式，显示出 网站设计师的品味。
人性化的设计是Web界面设计的核心
如何根据人的心理、生理特征，运用技术手 段，创造简单、友好的界面，是Web界面设 计的重点。
7.2 Web界面设计原则
以用户为中心 内容与形式的统一 简洁与明确 体现特色 统一整体的形象 Web界面设计的3C原则
1．以用户为中心 要求把用户放在第一位。设计时既要考 虑用户的共性，同时也要考虑他们之间 的差异性。
站点的结构可分为逻辑结构和物理结构:
逻辑结构描述文档间的关系，定义文档间的链接。 物理结构描述文档的实际位置及显示方式 。
超文本结构中最常用层次结构
层次型结构按信息的必要性来改变信息的显示方式。 根网页是站点的主页，层次以根网页开始。 用户深入站点时，选择趋向于越来越具体，直到找 到目标或叶子网页。 层次结构通过深度和广度来描述。
底色应柔和、素雅
柔和的底色配上深色文字，读起来自然，流 畅。
Web界面的色彩
网页色彩搭配的原则：
色彩的鲜明性
网页的色彩要鲜艳，容易引人注目。
色彩的独特性
要有与众不同的色彩，使得大家对网页的印象强烈。
色彩的合适性
色彩和网页要表达的内容气氛相适合。
色彩的联想性
不同色彩会产生不同的联想，选择色彩要和网页的内 涵相关联。
Web的出现与发展
90年代初，瑞士日内瓦的欧洲核能研究中心分 布在世界各地的科学家需要高效率的通讯方式 来进行彼此交流与分享信息。 该中心高能核理学家Tim Berners-Lee研究发展 了万维网（World Wide Web，WWW）的雏形， 目的是为了建立一个能够整合各种资源、文件 及多媒体的系统，让使用者方便地取得不同媒 体的资料。
利用相应逻辑结构来有序组织、开发出一个页面设计原型， 进行测试，逐步精炼此原型，形成明确的特点 特色鲜明的Web网站是精心策划的结果，只有独特的创意和 赏心悦目的网页设计才能在一瞬间打动它的浏览者 应清楚地了解Web网站用户的基本情况，从而能有的放矢， 挑选关键信息
6 明确的导航设计
站点结构
3．简洁与明确 Web界面设计是设计的一种，要求简练、明确。
应尽量把网页的层次简要化，力求以最少的点击次 数链接到具体的内容。 在主页的访问率为100人次的情况下，下一页的访 问率降到30到50人次。 网页的层次越复杂，实际内容的访问率也将越低， 信息也就越难传达到读者的手里。
4．体现特色
第7章 Web界面设计
本章内容简介
Web界面及相关概念 Web界面设计原则 Web界面要素设计 Web界面基本设计技术 一些典型的Web站点实例
7.1 Web界面及相关概念
互联网是近年来对社会影响最大的技术进步,影 响到人类生活的很多方面。 互联网已经成为全面支持多媒体，能在多种平 台上运行的庞大信息服务系统。 互联网的应用范围也日趋扩大，被广泛用于商 业办公、业务管理、购物娱乐等人类生活的各 个方面，业已成为一种全球化社会现象。
7.3.3 内容、风格与布局、色彩设计
网站内容设计的原则
网站的首页要给用户带来好的第一印象，能够 吸引用户再次光临这个网站。 网站内容应是动态进行修改和更新；。 网页中应该提供联机帮助功能。 网页的文本内容应简明，通俗易懂。