人机交互基础第7章.ppt

CSS+DIV DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。 优点 页面载入更快、降低流量费用（特别是大型网站） 保持一致性、修改设计时更有效率 * 人机交互与界面设计课程 * 人机交互与界面设计课程 特色鲜明的网站更容易在一瞬间打动它的浏览者，留下令人心动的第一印象； 应清楚Web网站用户的基本情况，从而在网站设计时做到有的放矢，呈现关键信息； 利用逻辑结构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点。 体现特色的原则 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 网站的浏览者可能使用不同类型和版本的浏览器。 IE浏览器，opera浏览器，火狐浏览器（Firefox），Google浏览器（Google Chrome ），搜狗浏览器等； IE浏览器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。 以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示。 根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。 通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 兼顾不同浏览器的原则 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。 Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。 好的导航系统可以使用户以一种满意的方式找到需要的信息。 导航系统的设计应从使用者的角度出发，力争简便、清晰和完整一致。 明确的导航设计的原则 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 Web界面规划 无论那种类型的Web网站，想要把界面设计得丰富多彩，吸引更多的用户前来访问，Web界面规划至关重要。 个人网页示例 文化与语言 网站一经发布，意味着全世界都可以看到其中的信息。所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。 Google首页图标（中国七夕） 内容、风格与布局、色彩设计 内容：Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。 风格：Web界面的风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。一个优秀的网站与实体公司一样，也需要整体的形象包装和设计。 布局：Web界面布局就是指如何合理地在界面上分布内容。常用的Web界面布局形式有：“同”字形结构、“国”字形结构、左右对称、自由式。 色彩：Web网站给人的第一印象来自视觉冲击。颜色元素在网站的感知和展示上扮演重要的角色。某个企业或个人的风格、文化和态度可以通过Web界面中的色彩混合、调整或者对照的方式体现出来。一般地，Web界面中色彩选择可考虑：鲜明性、独特性、合适性、联想性、和谐性。 文本设计 文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。 多媒体元素设计 图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。 Rollover按钮 HTML HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。 HTML语言的标记元素通常分为如