人机界面设计（第二版） 教学课件 作者 王文 周苏 涂嘉庆 第05章 网页界面设计与Visio工具.ppt

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