《人机界面设计 教学课件 ppt 作者 周苏 第5讲 网页界面设计与Visio工具》由会员分享，可在线阅读，更多相关《人机界面设计 教学课件 ppt 作者 周苏 第5讲 网页界面设计与Visio工具（37页珍藏版）》请在金锄头文库上搜索。
1、第五讲 网页界面设计,周苏 教授 Z QQ: 81505050,第5讲 网页界面设计,20世纪人类最重要的发明可能就是计算机及其网络技术了，因特网改变着世界，促成了网络经济的形成与电子商务的发展。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的主流传播媒体。,第5讲 网页界面设计,从技术上讲，网络技术带来了通信革命，它使人们的信息交流变得方便快捷；从经济上讲，网络技术带来了电子商务，使传统产业及其商业模式都面临着巨大的机遇、改造与挑战；,第5讲 网页界面设计,从文化上讲，网络技术把我们真正带入了信息社会，给人们的生产方式、生活方式、思想观念都带来
2、新的变化；从认知科学的角度来说，因特网是一种新的认知结构，通过它个体与社会相互作用，使知识得到延伸。网络空间中的网页体现给认知工效学提出了新的挑战。这个挑战及其内容和理论体系，形成了在超媒体环境中更容易获取知识的观点。,第5讲 网页界面设计,从人机界面的角度，可以将因特网理解为一个用户和其他用户的知识之间的抽象界面。自从发明了写作以来，人们就开始设计信息源，帮助他人构筑知识。网站是一种新的信息传播工具，它没有改变信息生成的本质，只是运用了一种新的信息传递的通路。,第5讲 网页界面设计,有两个模型可以解释因特网的人机界面性质： 第一个模型提出网页是用户和知识之间的界面，称作信息交互模型； 第二个
3、模型研究网页的信息设计，称之为信息设计模型。,第5讲 网页界面设计,1) 因特网信息交互模型。 网站是储藏信息的产品，信息是联系供给者和学习者或用户的中间媒介，正是丰富的信息使因特网具有如此的魅力。 信息的提供者利用自身的认知结构将知识转化为可以交流的信息储存在网络环境中，用户在特定的认知环境下为自己的目的获取信息，从而转化为自己的知识。,第5讲 网页界面设计,网页的目的是使最终用户更容易地获取信息。因特网信息交互模型对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。,第5讲 网页界面设计,2) 因特网信息设计模型。 在设计中，要考虑到
4、信息的两个方面中：什么和怎么样。“什么”指的是信息的选取，即应该呈现或省去什么信息；而“怎么样”则指的是信息该如何被表现，如媒体和其他指定结构。 这里充分体现了设计师的专家地位，因为网页设计不像其他领域，有现成的和快捷的规则可以引导设计过程，从某种程度上更多地要遵循认知心理学和人机工程学的原则。,1. 基于信息的网络界面设计,网络界面设计主要是网页设计，它是人机界面设计的一个延伸，也是人与计算机交互方式的演变。因此，人性化设计是网络界面设计的核心，如何根据人的心理、生理特点，运用技术手段，创造简单、友好的界面，是网络界面设计的重点。,1. 基于信息的网络界面设计,(1) 网页设计与传统平面设计
5、的异同 由于计算机及其网络技术条件的限制，网页设计与传统平面设计的主要区别有三个方面：,1. 基于信息的网络界面设计,1) 介质不同。传统平面设计作品大多是以印刷品的形式出现；而网页则主要出现在计算机显示器上。显示器的分辨率比较低，较细的线条不易显示，一般达到72dpi即可，色彩显示为RGB模式；印刷品要求分辨率须达到300dpi以上，色彩模式是CMYK。了解这一特点，在网页设计时应扬长避短，追求网页的色彩效果，避免过于在细节上做文章。,1. 基于信息的网络界面设计,2) 页面大小的限制。大多数电脑用户的显示环境为800600 (pixels) ，大多数门户网站的横幅为800pixels。这样
6、，为达到不做滚屏便可显示完整页面，在上下与左右滚动条 (scroll) 中就只能选择其一。 另一方面，下载速度的快慢直接关系到网页的访问率，要想提高网页的生命力，就必须在各方面下功夫，提高访问速度和下载速度。,1. 基于信息的网络界面设计,3) 交互性设计。几乎所有网页都有一个以上的链接或按钮，选择它们可以切换到其他网页或网站。更重要的是，用户通常可以通过网页参加讨论组、聊天、电子商务等，因此，应该尽可能减少不必要的交互障碍。 4) 多媒体功能。网站的最大资源优势在于它的多媒体功能。因特网可以利用文字、声音、图像、动画，甚至虚拟显示技术等与用户交互。但如果想在网页中添加音乐，应该添加一个按钮，
7、可以让用户选择打开或关闭它。,1. 基于信息的网络界面设计,(2) 网络界面设计中用户的地位 由于因特网具有的无限延伸性，数以万计的信息在网络上传递，不同的人群对信息的需求也各不相同。但是，在商业网站中，用户的需求是第一位的，在商业网络界面设计中，网站对网络界面的要求就是网站用户的需求。只有充分分析、了解网站的用户需求，才能准确地把握设计的方向和尺度，设计出令人满意的界面。,1. 基于信息的网络界面设计,一般地，用户上网主要有两种方式：搜索和浏览。搜索过程包含了用户下意识的活动，而浏览则更多的是一个无意识的过程。他们通常都不是针对某一项专门的任务，更多的是由于好奇心与求知欲，或者仅仅是为了娱乐
8、。另外，浏览本身或多或少地被局限于个人兴趣。 设计网站时，要将注意力集中于两个方面：内容选择和内容描述 (信息是什么和怎么样) 。在这里，设计问题必须考虑网页导航 (描述) 和用户兴趣 (选择) 。,1. 基于信息的网络界面设计,(3) 网络界面设计中对信息的分析与控制 网络是现代信息传播的主要载体，因此，在网页界面设计中，对信息进行有效的分析与控制，是十分必要的。,1. 基于信息的网络界面设计,1) 对信息的分析。一个网站通常都是由一系列的网页界面组成的。在网页界面设计中，设计师为保证用户在恰当的位置获得恰当的信息，首先要对信息进行分析。网站的信息有层次性的，各层次传达的信息都不相同。其中，
9、网站首页传递的信息最为重要，如同门面。因此，首页的设计要体现网站的风格，突出网站的特点，向用户传达网站的概要内容，提供网站的最新消息等等。,1. 基于信息的网络界面设计,2) 网站信息繁多，而用户耐心有限。在商业网络界面设计中，如何对信息进行控制，建立快捷的途径，帮助用户迅速找到所要的内容，是设计师的职责。为此，要建立清晰明了的导航系统，每一级页面要有清晰明了的导航，在醒目位置有到下一级界面的按钮联接提示等。要通过设计适当的界面提示信息来引导用户。,2. 网页界面设计的原则,网页设计一般有以下原则： 1) 内容与形式的统一。这里的内容，是指网站的信息数据及文字内容，而形式指的是网页设计的版式、
10、构图、布局、色彩以及它们所呈现出的风格特点。网页的形式是为内容服务的，但本身又有自己的独立性和艺术规律。,2. 网页界面设计的原则,无论是个体还是组织，设立网站都有自己的明确目的，网页设计的目的就是为了使网页内容得到更好的体现，使之更加形象、直观，更易于为受众所接受。因而，不同内容的网页要求用不同的设计形式。比如说，政府机构的网页形式应简洁、庄重；教育单位的网页应明快、大方；商业类网页可鲜艳夺目、丰富多彩；文化艺术类网页应讲求格调与品位。,2. 网页界面设计的原则,2) 特色明确。特色鲜明的网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者。设计者应该清楚地了解
11、网站受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等，从而能够有的放矢。挑选关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。,2. 网页界面设计的原则,3) 统一整体的形象。网页 (企业) 标志以及标准色决定后，应该应用在每一幅页面上，使浏览者始终可以判定自己的方位，并且还会给浏览者留下深刻而统一的印象。主题要做到鲜明突出、力求简洁，要点明确。 4) 减少浏览层次。据调查，网页的层次越复杂，实际内容的访问率也将越低。所以，要尽量简化网页的层次，力求以最少的点击次数连接到具体的内容。 5) 了解浏览者的心理状
12、态。从心理学的角度分析浏览者的心理状态，有助于网页页面的设计。,3. 网页色彩设计,在因特网上，给浏览者带来最强视觉冲击的要素就是网页色彩。色彩是人类视觉最敏感的东西，所以，在网页设计中，色彩设计是网页设计者首先要考虑的。,3. 网页色彩设计,色彩是一种语言，用来向人们传递信息，也用来吸引人们的注意。在一个具备色彩设计专业水平的网站，即使只使用很少的动画、图形和声音，通过色彩就可以给浏览者留下深刻的印象并提高访问率；色彩可以给浏览者带来舒适的视觉感受并易于人们浏览：通过色彩可以突出网页内容的重点和统一网站的风格；通过色彩还可以体现网站的特色和表明网站的主题。,3. 网页色彩设计,(1) 网页色
13、彩搭配的原则 色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站专业特点和艺术规律。网页的色彩搭配应遵循以下几个原则：,3. 网页色彩设计,1) 色彩的合理性。网页的色彩要漂亮、引入注目，同时还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛产生疲劳。 2) 色彩的独特性。要有与众不同的色彩搭配，并且与行业特征相结合，以衬托出网站的个性，使得大家对网站的印象更深刻。,3. 网页色彩设计,3) 色彩的艺术性。色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵
14、 (http:/ 。,3. 网页色彩设计,青蛙公司的网站 (http:/，见图5.2) ，根据不同的设计领域和服务对象，采用不同的设计色彩。但其公司的青春、活泼的特色，基本是以绿色、浅黄色来体现的。,3. 网页色彩设计,每种色彩在纯度、明度上略微变化就会产生不同的感觉，以绿色为例，绿色中加上较多的黄色，有青春旺盛的视觉意境。而含有较多蓝色成分的绿色，则显得幽宁阴深。黑底色上点缀的高纯度红、黄、蓝、绿色使黑色变得透明。黑色令人想到黑夜，可用做娱乐业站点的基本色调；红色可用于商业、零售业站点等。总之，选择色调一定要和网站的主要内容相适应。,3. 网页色彩设计,(2) 搭配技巧 专业研究机构的研究表
15、明：从人的记忆效果看，对彩色的记忆是黑白的3.5倍，也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。,3. 网页色彩设计,1) 非彩色的搭配。 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果不会太差。 一般印刷品较少用大面积的黑色，而网页设计中以黑色为底的网站以前比较多，主要是一些艺术网站。,3. 网页色彩设计,2) 彩色的搭配。 同类色的应用：同类色是由一种色彩呈现出的不同透明度或者纯度 (通俗地说，就是将色彩变淡或加深) 时产生的色彩系列。由这样的色彩
16、搭配出来的页面看起来统一、和谐、有层次感，比较适合于技术性、专业性站点。,3. 网页色彩设计,邻近色的应用：先选定一种色彩，然后选择它在色谱里相邻区域的颜色，如红和紫色互为邻近色；黄色与绿色互为邻近色，邻近色搭配可以使整个页面色彩丰富，但不花哨。,3. 网页色彩设计,对比色的应用：原色纯度较高的色彩搭配使用，即为对比色。各种色彩均可作为对比色使用，但应以一种颜色为主调，使它占有较大的面积同时，辅以对比色，起到点缀丰富的作用。例如以粉红色为主的色调，配以小面积的淡蓝、淡黄、淡绿或者土黄、土灰、土蓝，商业零售站点、新闻站点常常运用对比色，造成丰富充实的效果。网站的客户群体主要是青年女性，网页中的对比色显得活泼、明快，洋溢着青春的气息。,
