人机交互技术_07.ppt

人机交互技术 复 习 互联网是近年来对社会影响最大的技术进步， 明确了Web的发展趋势。 Web界面外观是否友好直接关系到是否能吸引人的关注。 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web信息交互模型是用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。 复 习 Web信息设计模型是研究网页的信息设计模型。 主要研究信息的选取和信息如何被表现。 Web网站概念设计涉及的工作： 建立好站点的架构和导航设计。 兼顾不同的浏览器。 Web界面设计所涉及的问题 Web界面设计基本原则 Web界面规划：确定Web界面设计的目标（布局）、Web界面设计中用户的地位。 作 业 上网查找 “土豆网/”、“优酷网/” 和 “天线网/”，观察三个网站首页标头界面进行对比，分析说明各网站的目标（倾向性）是什么？ 土豆网给用户一种悠闲自我的状态，倾向于个性与娱乐性，界面中用户信息比较详细； 优酷网则强调速度效率，倾向于视频数量的全面性和综合性； 天线网倾向于电台节目及影视高清播放。 本节课内容 第八章 Web界面设计 8.6 Web界面设计概要设计 8.7 Web界面设计要素 8.8 Web界面设计技术与工具 8.9 Web界面设计的评估 8.10 Web界面实例分析 Web界面设计概要设计 Web界面概要设计包括: Web界面框架设计 Web网站规划 建立原型系统 详细设计 包括：Web页面的布局、系统的内部结构、实现方法和维护方法等。 确定Web网站的运行模式：不同运行模式的网站，其设计的方法、内容和风格都有很大差别。 正式实施 Web界面的内容与风格的设计 Web界面设计的语言与文化 Web界面的内容与风格 Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。 为网站编写内容时要特别注意： 使用用户的语言； 使用平易的语言； 避免不必要的词句； 使用简单的句子； 避免夸夸其谈； 保证准确性，反映时间性。 Web界面的内容与风格 网站内容设计的原则： HTML文档的效果由其自身的质量和浏览器解释的方法决定。不同浏览器的解释方法不同，所以应注意让所有的浏览器都能够正常浏览。 网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。 要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。 Web界面的内容与风格 网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。 网站内容应是动态进行修改和更新。 网页中应该提供联机帮助功能。 网页的文本内容应简明，通俗易懂。 所有的内容都要针对设计目标而写，不要节外生枝。 文字要正确，不能有语法错误和错别字。 Web界面的内容与风格 Web界面的风格 Web界面的风格包括站点的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。 一个杰出的网站需要整体的形象包装和设计。 为儿童设计的网站应当使用比较丰富的色彩和图形，并且较多使用动画和声音等多媒体表现工具。 为老年人设计的网站需要考虑采用较大的字体、直截了当的信息显示和简单的浏览方式，以适用老年人可能逐渐减弱的视力和记忆力。 Web界面设计的语言与文化 网站应设置多语言选择 网站面向的用户使用不同的语言，则在设计时要考虑包括不同语言的版本，将选择语言版本的功能放在网站的主页，并用不同版本的语言进行标注 。 在网站设计和建设中进行跨文化研究 应当注意到不同地区的文化特点。 不同的语言表达可以产生不同的效果。 有些内容在一个地区是允许的或适用的，但是在另外一个地区使用却是不合适的。 应当避免显示对用户不适合的内容。 Web界面设计要素 Web界面设计要素包括： Web界面布局 布局设计应做到整体布局合理、有序、整体化。包括： “同”字形结构布局 “国”字形结构布局 左右对称布局 自由式布局 Web界面的色彩 Web界面的字体 Web界面的动画与多媒体 Web界面的导航 Web界面的色彩 颜色搭配问题： 确定网站的标准色彩 不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 以红、绿、蓝三色称为三基色 其它的色彩都可以用这三种色彩调和而成。 底色应柔和、素雅 柔和的底色配上深色文字，读起来自然，流畅。 网页色彩搭配的原则： 色彩的鲜明性 色彩的独特性 色彩的合适性 色彩的联想性 Web界面的字体 字体是每一个网站的必要组件，选择字体和颜色，和其它页面元素一起产生一个视觉效果。 常用的英文字体 （1）Serif字体 （2）Sans-Serif字体 （3）TrueType字体 常用的中文字体 Web界面中常用的中文字体有宋体、仿宋体、楷体和黑体，还有