人机交互第7章PPT课件.ppt

人机交互基础教程;Web界面及相关概念 Web界面设计原则 Web界面要素的设计 Web界面基本设计技术 Web3D界面设计技术; Web是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperText Transfer Protocol）传送给用户；而用户通过点击链接来获得这些资源。 ;Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。;7.1 Web界面及相关概念;一般的Web界面设计应该遵循如下基本原则： 以用户为中心 要求把用户放在第一位。设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。 一致性 Web界面设计还必须考虑内容和形式的一致性。其次，Web界面自身的风格也要一致性，保持统一的整体形象。 简洁与明确 Web界面设计是设计的一种，要求简练、明确。;迪斯尼网站（/，2008年7月）;体现特色 只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。 兼顾不同的浏览器 明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。 ;7.2 Web界面设计原则;Web界面规划 无论那种类型的Web网站，想要把界面设计得丰富多彩，吸引更多的用户前来访问，Web界面规划至关重要。 ;文化与语言 网站一经发布，意味着全世界都可以看到其中的信息。所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。;内容、风格与布局、色彩设计 内容：Web界面的内容不仅要遵循简洁明???的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。 风格：Web界面的风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。一个优秀的网站与实体公司一样，也需要整体的形象包装和设计。;布局：Web界面布局就是指如何合理地在界面上分布内容。常用的Web界面布局形式有：“同”字形结构、“国”字形结构、左右对称、自由式。 色彩：Web网站给人的第一印象来自视觉冲击。颜色元素在网站的感知和展示上扮演重要的角色。某个企业或个人的风格、文化和态度可以通过Web界面中的色彩混合、调整或者对照的方式体现出来。一般地，Web界面中色彩选择可考虑：鲜明性、独特性、合适性、联想性、和谐性。 ;文本设计 文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。 ;多媒体元素设计 图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。 ;HTML HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。 HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。;表单实例： HTML HEAD TITLEHTML表单实例/TITLE /HEAD BODY FORM用户名： INPUT TYPE=TEXT NAME=username SIZE=10 口令： INPUT TYPE=PASSWORD NAME=password SIZE=8HR 选学内容： INPUT TYPE=CHE