Web界面设计(人机交互).pdf

人机交互界面理论与技术人机交互界面理论与技术 第十第十三章章Web界面界面 设计设计 Web界面及相关概概念 Web是一个由许多互相链接的超文本 （（HyperTextHyperText））文档组成的系统文档组成的系统。。分布在世界分布在世界 各地的用户能够通过Internet对其访问，进行 彼此交流与共享信息彼此交流与共享信息。在这个系统中在这个系统中，每个有每个有 用的事物，被称为一种“资源”，其由一个全 局局 “统一资源标识符统一资源标识符” （（URIURI））标识标识；这些资这些资 源通过超文本传输协议 （HyperText Transfer ProtocolProtocol））传送给用户传送给用户；而用户通过点击链接而用户通过点击链接 来获得这些资源。 Web界面及相关概概念 Web应用的成功与否，除了受其所采用的技术 和所能够提供的功能的限制和所能够提供的功能的限制，，还受还受WebWeb 网页的网页的 外观的影响。Web 网页的外观经常是最先被用 户注意到的户注意到的。用户对网站的第用户对网站的第一印象与界面外印象与界面外 观是否友好、吸引人密切相关。所以对于设计 人员来说人员来说，WebWeb界面设计至关重要界面设计至关重要。WebWeb界面界面 设计的人性化、易用性是Web界面设计的核心。 Web界面及相关概概念 Web界面设计原则 一般的Web界面设计应该遵循如下基本原则 以用户为中心以用户为中心 要求把用户放在第一位。设计时既要考虑用户的共性， 同时同时也要考虑他们要考虑他们之间的间的差异性异性。 一致性 WebWeb界面设计还必须考虑内容和形式的界面设计还必须考虑内容和形式的一致性致性。。其次其次 ，Web界面自身的风格也要一致性，保持统一的整体形 象。 简洁与明确 Web界面设计是设计的一种，要求简练、明确。 Web界面设计原则 Web界面设计原则 体现特色 只有丰富特色只有丰富特色、内容翔实的网页才能使浏览者驻足阅读内容翔实的网页才能使浏览者驻足阅读。 特色鲜明的Web 网站是精心策划的结果，只有独特的创意 和赏心悦目的网页设计才能在和赏心悦目的网页设计才能在一瞬间打动浏览者瞬间打动浏览者。。 兼顾不同的浏览器 明确的导航设计明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容，要 能让浏览者确切地知道自己在整个网站中的位置，可以确 定下一步的浏览去向。 Web界面设计原则 清华大学首页（/，2009年9月） Web界面要素设计 Web界面规划 无论那种类型的无论那种类型的WebWeb 网站网站，想要把界面设计想要把界面设计 得丰富多彩，吸引更多的用户前来访问，Web 界面规划至关重要界面规划至关重要。 。 Web界面要素设计 文化与语言 网站网站一经发布经发布，意味着全世界都可以看到其意味着全世界都可以看到其 中的信息。所以，全球服务型的网站还要考虑 如何适应不同国家的不同类型的文化与语言环如何适应不同国家的不同类型的文化与语言环 境。 Web界面要素设计 内容、风格与布局、色彩设计 内容内容：：WebWeb界面的内容不仅要遵循简洁明确的原则界面的内容不仅要遵循简洁明确的原则 ，也要符合确定的设计目标，面向不同的对象要使 用不同的用不同的口吻和用词吻和用词。 风格：Web界面的风格是指网站的整体形象给浏览 者的综合感受者的综合感受。。这个整体形象包括网站的标志这个整体形象包括网站的标志、、色色 彩、字体、布局、交互方式、内容价值、存在意义 等。一个优秀的网站与实体公司一样，也需要整体 的形象包装和设计。 Web界面要素设计 布局：Web界面布局就是指如何合理地在界面 上分布内容分布内容。常用的常用的Web界面布局形式有界面布局形式有：“ 同”字形结构、“国”字形结构、左右对称、 自由式自由式。。 色彩：Web 网站给人的第一印象来自视觉冲击 。颜色元素在网