Web界面设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web界面设计
本章内容简介
• Web界面及相关概念 • Web界面设计原则 • Web界面要素设计 • Web界面基本设百度文库技术 • Web3D界面设计技术
山东大学计算机学院
2
课程目标
• 熟悉Web设计的原则及Web界面设计包含的元素。 • 掌握Web界面设计语言和技术，并灵活应用。
Web界面及相关概念
山东大学计算机学院
13
Web界面设计基本原则
3. 简洁与明确
• 使用一个醒目的标题，这个标题常常采用图形来表示，但图 形同样要求简洁。
• 限制所用的字体和颜色的数目。 • 界面上所有的元素都应当有明确的含义和用途，不要试图用
无关的图片把界面装点起来。 • 尽量减少浏览层次
山东大学计算机学院
图7-5 Google首页（http://www.google.com，2009年9月）
山东大学计算机学院
9
– 兼顾用户习惯
• Mac OSX：新邮件 图标在正中间 • Iphone：新邮件 图标在右下角 • Ipad: 新邮件 图标在右上角
• 用户特点
Myspace.cn myspace在中国区战略是覆盖18-35岁男 女。
通过51.com的搜索页面，大概能分析出用户年龄 在18-26岁。 所在地区北京、喜欢上传照片的居多。通过认证的不多。
• 网格的概念 • 云的概念
山东大学计算机学院
5
超文本与超媒体
• 超文本 （Hypertext）
– 是一种使用于文本、图形或其他信息的组织形式，是一种非线性 的信息组织形式。它使得单一的信息元素之间可以相互交叉引用， 这种引用并不是通过复制来实现的，而是通过指向对方的地址字 符串来指引用户获取相应的信息。
– 不同浏览器类别和版本在功能支持上有所区别
Web界面设计基本原则
• 6．明确的导航设计
– 网站首页导航应尽量展现整个网站的架构和内容；另外导航要能 让浏览者确切地知道自己在整个网站中的位置，可以确定下一步 的浏览去向。
• 灾难性目录
– 找"苯甲酸苄酯"
实例
• 视觉搜索眼动模式
– Hornof和Halverson提出的两种视觉搜索策略。圆圈表示用户的 注视点，圆圈的连线表示视线经过的路径。搜索整列由6个group 组成，每个group包含五个搜索项。左图为无标签（相当于无一 级类目）时的混合搜索策略（12个注视点），右图为有标签时的 层次搜索策略（7个注视点）。
• 目录设计
google directory 的目录设计
alivedirectory.com的目录设计
Web界面要素设计
• 1. Web界面规划 • 2. 文化与语言 • 3. 内容、风格与布局、色彩设计 • 4. 文本设计 • 5. 多媒体元素设计
1. Web界面规划
– Web界面的布局、元素的设计都要以”网站的目标和用途”这个 目标为中心。
• 人性化的设计是Web界面设计的核心
– 如何根据人的心理、生理特征，运用技术手段，创造简单、友好 的界面，是Web界面设计的重点。
山东大学计算机学院
7
Web界面设计基本原则
• 1．以用户为中心 • 2．一致性 • 3．简洁与明确 • 4．体现特色 • 5．兼顾不同的浏览器 • 6．明确的导航设计
山东大学计算机学院
8
Web界面设计基本原则
• 1．以用户为中心
– 一方面，不同类别的Web网站，面向的访问群体不同；同一类型 的Web网站，用户群体也有年龄、行业等差别。因此，Web界面 的设计只有了解不同用户的需求，才能在设计中体现用户的核心 地位，设计出更合理、能满足用户需求的界面，以吸引用户。
Web界面设计基本原则
• 2. 一致性
– 内容一致：Web网站显示的信息、数据等 – 形式一致：Web界面设计的版式、构图、布局、色彩以及它们所
呈现出的风格特点
Web界面设计基本原则
– Web界面自身的风格也要一致性
• 各页面使用相同的页边距；文本、图形间保持相同的间距； • 各页面上都放上公司或网站的统一标志； • 各页面应当使用相同的导航图标； • 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性； • 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。
Internet服务，具有一致用户界面的信息浏览功能。
山东大学计算机学院
4
Web的发展趋势
• 图形Web页面的爆炸性发展。
– 网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的 各个角落。
• 新一代Web信息描述标准XML
– 能更详尽地描述文档的结构信息，具有比HTML有更强大的功能， 为Web的发展提供了强有力的支持。
14
Web界面设计基本原则
• 4．体现特色
– 清楚地了解Web网站背景、体现主题和服务对象的基本情况，选 择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜 明的风格。
图7-6 清华大学首页（http://www.tsinghua.edu.cn/，2009年9月）
Web界面设计基本原则
• 5．兼顾不同的浏览器
• 超媒体 （Hypermedia）
– 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、 声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了 所谓的超媒体 。
山东大学计算机学院
6
Web界面设计问题的提出
• Web界面设计与站点外观直接相关
– 站点的界面外观是否友好直接关系到是否能吸引人的关注。
– 将网站作为一种文化、一种艺术作品看待，确定Web界面的设计 风格，力求在设计Web界面时追求艺术效果与美感。
2. 文化与语言
– 全球服务型的网站还要考虑如何适应不同国家的不同类型的文化 与语言环境。
– 在设计Web界面时，要将选择语言版本的功能放在网站的主页， 并以不同版本的语言进行标注。
• 万维网（World Wide Web，WWW）
– 高能核理学家Tim Berners-Lee雏形，建立一个能够整合各种资 源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。
– 建立在客户/服务器模型之上
• 超文本标记语言（Hypertext Markup Language，HTML） • 超文本传输协议（Hypertext Transport Protocols， HTTP） • 通过Internet把遍布世界各地的服务器连接起来，它能够提供各种
本章内容简介
• Web界面及相关概念 • Web界面设计原则 • Web界面要素设计 • Web界面基本设百度文库技术 • Web3D界面设计技术
山东大学计算机学院
2
课程目标
• 熟悉Web设计的原则及Web界面设计包含的元素。 • 掌握Web界面设计语言和技术，并灵活应用。
Web界面及相关概念
山东大学计算机学院
13
Web界面设计基本原则
3. 简洁与明确
• 使用一个醒目的标题，这个标题常常采用图形来表示，但图 形同样要求简洁。
• 限制所用的字体和颜色的数目。 • 界面上所有的元素都应当有明确的含义和用途，不要试图用
无关的图片把界面装点起来。 • 尽量减少浏览层次
山东大学计算机学院
图7-5 Google首页（http://www.google.com，2009年9月）
山东大学计算机学院
9
– 兼顾用户习惯
• Mac OSX：新邮件 图标在正中间 • Iphone：新邮件 图标在右下角 • Ipad: 新邮件 图标在右上角
• 用户特点
Myspace.cn myspace在中国区战略是覆盖18-35岁男 女。
通过51.com的搜索页面，大概能分析出用户年龄 在18-26岁。 所在地区北京、喜欢上传照片的居多。通过认证的不多。
• 网格的概念 • 云的概念
山东大学计算机学院
5
超文本与超媒体
• 超文本 （Hypertext）
– 是一种使用于文本、图形或其他信息的组织形式，是一种非线性 的信息组织形式。它使得单一的信息元素之间可以相互交叉引用， 这种引用并不是通过复制来实现的，而是通过指向对方的地址字 符串来指引用户获取相应的信息。
– 不同浏览器类别和版本在功能支持上有所区别
Web界面设计基本原则
• 6．明确的导航设计
– 网站首页导航应尽量展现整个网站的架构和内容；另外导航要能 让浏览者确切地知道自己在整个网站中的位置，可以确定下一步 的浏览去向。
• 灾难性目录
– 找"苯甲酸苄酯"
实例
• 视觉搜索眼动模式
– Hornof和Halverson提出的两种视觉搜索策略。圆圈表示用户的 注视点，圆圈的连线表示视线经过的路径。搜索整列由6个group 组成，每个group包含五个搜索项。左图为无标签（相当于无一 级类目）时的混合搜索策略（12个注视点），右图为有标签时的 层次搜索策略（7个注视点）。
• 目录设计
google directory 的目录设计
alivedirectory.com的目录设计
Web界面要素设计
• 1. Web界面规划 • 2. 文化与语言 • 3. 内容、风格与布局、色彩设计 • 4. 文本设计 • 5. 多媒体元素设计
1. Web界面规划
– Web界面的布局、元素的设计都要以”网站的目标和用途”这个 目标为中心。
• 人性化的设计是Web界面设计的核心
– 如何根据人的心理、生理特征，运用技术手段，创造简单、友好 的界面，是Web界面设计的重点。
山东大学计算机学院
7
Web界面设计基本原则
• 1．以用户为中心 • 2．一致性 • 3．简洁与明确 • 4．体现特色 • 5．兼顾不同的浏览器 • 6．明确的导航设计
山东大学计算机学院
8
Web界面设计基本原则
• 1．以用户为中心
– 一方面，不同类别的Web网站，面向的访问群体不同；同一类型 的Web网站，用户群体也有年龄、行业等差别。因此，Web界面 的设计只有了解不同用户的需求，才能在设计中体现用户的核心 地位，设计出更合理、能满足用户需求的界面，以吸引用户。
Web界面设计基本原则
• 2. 一致性
– 内容一致：Web网站显示的信息、数据等 – 形式一致：Web界面设计的版式、构图、布局、色彩以及它们所
呈现出的风格特点
Web界面设计基本原则
– Web界面自身的风格也要一致性
• 各页面使用相同的页边距；文本、图形间保持相同的间距； • 各页面上都放上公司或网站的统一标志； • 各页面应当使用相同的导航图标； • 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性； • 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。
Internet服务，具有一致用户界面的信息浏览功能。
山东大学计算机学院
4
Web的发展趋势
• 图形Web页面的爆炸性发展。
– 网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的 各个角落。
• 新一代Web信息描述标准XML
– 能更详尽地描述文档的结构信息，具有比HTML有更强大的功能， 为Web的发展提供了强有力的支持。
14
Web界面设计基本原则
• 4．体现特色
– 清楚地了解Web网站背景、体现主题和服务对象的基本情况，选 择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜 明的风格。
图7-6 清华大学首页（http://www.tsinghua.edu.cn/，2009年9月）
Web界面设计基本原则
• 5．兼顾不同的浏览器
• 超媒体 （Hypermedia）
– 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、 声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了 所谓的超媒体 。
山东大学计算机学院
6
Web界面设计问题的提出
• Web界面设计与站点外观直接相关
– 站点的界面外观是否友好直接关系到是否能吸引人的关注。
– 将网站作为一种文化、一种艺术作品看待，确定Web界面的设计 风格，力求在设计Web界面时追求艺术效果与美感。
2. 文化与语言
– 全球服务型的网站还要考虑如何适应不同国家的不同类型的文化 与语言环境。
– 在设计Web界面时，要将选择语言版本的功能放在网站的主页， 并以不同版本的语言进行标注。
• 万维网（World Wide Web，WWW）
– 高能核理学家Tim Berners-Lee雏形，建立一个能够整合各种资 源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。
– 建立在客户/服务器模型之上
• 超文本标记语言（Hypertext Markup Language，HTML） • 超文本传输协议（Hypertext Transport Protocols， HTTP） • 通过Internet把遍布世界各地的服务器连接起来，它能够提供各种