人机界面设计 教学课件 作者 周苏 第5讲 网页界面设计与Visio工具.ppt

第5讲 网页界面设计 20世纪人类最重要的发明可能就是计算机及其网络技术了，因特网改变着世界，促成了网络经济的形成与电子商务的发展。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的主流传播媒体。 第5讲 网页界面设计 从技术上讲，网络技术带来了通信革命，它使人们的信息交流变得方便快捷；从经济上讲，网络技术带来了电子商务，使传统产业及其商业模式都面临着巨大的机遇、改造与挑战； 第5讲 网页界面设计 从文化上讲，网络技术把我们真正带入了信息社会，给人们的生产方式、生活方式、思想观念都带来新的变化；从认知科学的角度来说，因特网是一种新的认知结构，通过它个体与社会相互作用，使知识得到延伸。网络空间中的网页体现给认知工效学提出了新的挑战。这个挑战及其内容和理论体系，形成了在超媒体环境中更容易获取知识的观点。 第5讲 网页界面设计 从人机界面的角度，可以将因特网理解为一个用户和其他用户的知识之间的抽象界面。自从发明了写作以来，人们就开始设计信息源，帮助他人构筑知识。网站是一种新的信息传播工具，它没有改变信息生成的本质，只是运用了一种新的信息传递的通路。 第5讲 网页界面设计 有两个模型可以解释因特网的人机界面性质： 第一个模型提出网页是用户和知识之间的界面，称作信息交互模型； 第二个模型研究网页的信息设计，称之为信息设计模型。 第5讲 网页界面设计 1) 因特网信息交互模型。 网站是储藏信息的产品，信息是联系供给者和学习者或用户的中间媒介，正是丰富的信息使因特网具有如此的魅力。 信息的提供者利用自身的认知结构将知识转化为可以交流的信息储存在网络环境中，用户在特定的认知环境下为自己的目的获取信息，从而转化为自己的知识。 第5讲 网页界面设计 网页的目的是使最终用户更容易地获取信息。因特网信息交互模型对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。 第5讲 网页界面设计 2) 因特网信息设计模型。 在设计中，要考虑到信息的两个方面中：什么和怎么样。“什么”指的是信息的选取，即应该呈现或省去什么信息；而“怎么样”则指的是信息该如何被表现，如媒体和其他指定结构。 这里充分体现了设计师的专家地位，因为网页设计不像其他领域，有现成的和快捷的规则可以引导设计过程，从某种程度上更多地要遵循认知心理学和人机工程学的原则。 1. 基于信息的网络界面设计 网络界面设计主要是网页设计，它是人机界面设计的一个延伸，也是人与计算机交互方式的演变。因此，人性化设计是网络界面设计的核心，如何根据人的心理、生理特点，运用技术手段，创造简单、友好的界面，是网络界面设计的重点。 1. 基于信息的网络界面设计 (1) 网页设计与传统平面设计的异同 由于计算机及其网络技术条件的限制，网页设计与传统平面设计的主要区别有三个方面： 1. 基于信息的网络界面设计 1) 介质不同。传统平面设计作品大多是以印刷品的形式出现；而网页则主要出现在计算机显示器上。显示器的分辨率比较低，较细的线条不易显示，一般达到72dpi即可，色彩显示为RGB模式；印刷品要求分辨率须达到300dpi以上，色彩模式是CMYK。了解这一特点，在网页设计时应扬长避短，追求网页的色彩效果，避免过于在细节上做文章。 1. 基于信息的网络界面设计 2) 页面大小的限制。大多数电脑用户的显示环境为800×600 (pixels) ，大多数门户网站的横幅为800pixels。这样，为达到不做滚屏便可显示完整页面，在上下与左右滚动条 (scroll) 中就只能选择其一。 另一方面，下载速度的快慢直接关系到网页的访问率，要想提高网页的生命力，就必须在各方面下功夫，提高访问速度和下载速度。 1. 基于信息的网络界面设计 3) 交互性设计。几乎所有网页都有一个以上的链接或按钮，选择它们可以切换到其他网页或网站。更重要的是，用户通常可以通过网页参加讨论组、聊天、电子商务等，因此，应该尽可能减少不必要的交互障碍。 4) 多媒体功能。网站的最大资源优势在于它的多媒体功能。因特网可以利用文字、声音、图像、动画，甚至虚拟显示技术等与用户交互。但如果想在网页中添加音乐，应该添加一个按钮，可以让用户选择打开或关闭它。 1. 基于信息的网络界面设计 (2) 网络界面设计中用户的地位 由于因特网具有的无限延伸性，数以万计的信息在网络上传递，不同的人群对信息的需求也各不相同。但是，在商业网站中，用户的需求是第一位的，在商业网络界面设计中，网站对网络界面的要求就是网站用户的需求。只有充分分析、了解网站的用户需求，才能准确地把握设计的方向和尺度，设计出令人满意的界面。 1. 基于信息的网络界面设计 一般地，用户上网主要有两种方式：搜索和