第七章网页设计禁忌演示课件
合集下载
网页设计与制作教学课件
利用鼠标或键盘事件，触发元素的动 态变化。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
《网页设计与制作》第7章课件
修 饰 属 性
border-color border-width border-style
四 个 方 向
border-top border-right border-bottom border-left
缩 写 形 式
border border-left …
边框
分别代表什么 含义？
空白间隙 文本框边框
演示示例：3行布局
使用盒子属性实现DIV+CSS布局2-2
实现步骤
2、编写每个DIV块的CSS控制定位
#container: 980px 、居中 #header： 136px;、背景 色#ccc
#main： 400px;、背景 色#fff
#footer： 100px;、背景 色#ccc
演示示例5：实现页面布局
padding-top: 5px
标准文档流
标准文档流组成
块级元素（block level）
<h1>…<h6>、<p>、<div>、列表
内联元素（inline）
<span>、<a>、<img/>、<strong>... 经验 内联标签可以包含于块级标签中，成为它的子元素， 而反过来则不成立
display属性
第七章
CSS样式表（三）
——布局、定位
提问
回顾
使用CSS设置背景图像时，通常会同时设置背景图像的
（ background-repeat）和（ background-position ）属性
使用font属性设置字体类型、风格、大小、粗细时的顺序
是什么？字体风格→粗细→大小→类型
WEB设计禁忌
《WEB设计禁忌》提纲第一部分内容与功能禁忌第1章内容禁忌禁忌1：主页身份危机说明：网站的主页不能使访问者通过快速浏览，确定站点的用途。
解决：网站需要具备的特点：◎机构名称位置显著◎机构名称非常明显◎机构职能的简要说明◎图示说明了机构的产品或服务项目◎页面中的链接标记是关于整个站点内容的概述禁忌2：混乱的分类说明：内容组织的混乱严重影响导航解决：使用不容易产生误解的分类原则：◎按层次组织的◎独立的◎互斥的◎彻底的◎不随心所欲的禁忌3：毫无意义的说明说明：许多网站中，项目的名称和说明名没有帮助访问者做出选择，通常，这些名称和说明似乎是不同时期写的、出自不同的人、缺乏一致性、没有考虑各项之间的差异、没有考虑在上下文中项目说明作何解释。
解决：当一个网站或者是基于网络的应用程序列出一套项目时，关于项目的说明信息必须能帮助使用者回答两个问题：1.这些项目中有我所需要的吗？2.符合条件的项目中哪一个最能满足我的要求？项目名称和说明中不应该包含市场化的干扰性词语，应该包含该项目具备什么功能和不具备什么功能的真实说明，或许还应该包含关于其他项目的功能参考。
而且，不能孤立的编写每个项目的说明，每个项目说明应该由该产品的管理人员编写。
不希望一些项目不经意的诋毁其他项目。
项目说明必须一起写，同时考虑在上下文中如何解释该项目以及项目间的对应关系。
禁忌4：内容不一致说明：如果有关某个项目，如产品、服务、突发事件、新闻故事、人物和政策的信息不止一次出现在网站中，那么最好保证内容的一致性，否则，你的站点会给访问者留下一种机构组织不当的强烈印象。
解决：如果信息不是复制的，那么副本必须相同。
◎有关特定项目的所有图片应该链接到唯一的图像文件◎在线目录中列出的相同项目应该链接到唯一的项目页◎有关项目的全部描述和属性来原因应该唯一如果必须辅之信息，那么无论如何都要保持信息的一致性。
禁忌5：过期的内容说明：网站中几乎与矛盾信息一样糟糕的是明显过期的信息。
网页设计规范..共34页PPT资料
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用960的网页宽度，与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
建议使用：
五、文字的编排与设计
深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
建议使用天蓝色的：
纯蓝色：
五、文字的编排与设计
其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。
三、页码设计规范
2. 小型页码翻页的表现方法： • 链接页码为简明独立，不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.
五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
1. 文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
网页设计与制作PPT教程
果等交互效果。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
电子商务网页设计(第三版)课件汇总全书电子教案完整版课件最全幻灯片(最新)课件电子教案幻灯片
2. 内容及其格式标记的简单应用
（1）格式标记 <p>…</p> 用来创建一个段落，在此标记之间的文本将按照段落的格式显 示。 <br> 是一个很简单的换行标记，它没有结束标记，用来创建一个换行。 <dl></dl><dt></dt><dd></dd> 是普通列表标记，<dt></dt> 和 <dd></dd> 都必须放在<dl></dl> 标记之间。<dl></dl> 用来创建一个列 表；<dt></dt> 用来创建列表中的上层项目；<dd></dd> 用来创建列表中最 下层项目。
一、网页中添加文本
1. 添加普通文本
（1）直接输入文本 （2）复制粘贴文本 （3）从其他文件导入
2. 添加空格
在需要输入的地方单击鼠标左键，将输入法切换到半角状态，单击空格键即 可输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：
（1）菜单“插入记录”/“HTML”/“特殊字符”/“不换行空格”。 （2）直接按“Ctrl+Shift+Space”快捷键。 （3）设置软件首选参数“允许连续空格”。
2. 网站逻辑链接结构基本形式
树状链接结构（一对一）
星状链接结构（一对多）
3. 网站逻辑链接结构的选择
最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之 间用树状链接结构。
四、页面流程
1. 页面流程的概念
网站设计者为访 问者设计的在浏览网 站时的浏览经历就是 页面流程。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
是你浏览的起点。知道过去和现在的位置反过来使得决定下 一步去哪里变得容易了。链接是这些浏览过程中的一个关键 因素。用户可以不去访问那些没有用处的地址，相反，他们 会访问那些他们过去发现对他们有帮助的链接地址。 ? 最重要的是，他们知道哪些网页已经访问过了，这样就 不必一次又一次访问同一个历史页面。 ? 但是这些好处只是基于一个重要的假设：由于网站提供 不同的颜色显示，用户可以分辨出哪些链接访问过，哪些链 接没有访问过。如果访问一个链接后颜色没有发生变化，那 么用户很可能会感到迷惑并无意中反复访问同一历史页面。
厌恶的情绪。
8
网站设计十大错误
? 8、违反设计惯例
?
一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，
用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生
什么事情。就像你每次在牛顿的头顶上放下一个苹果，它一定会砸中他
的脑袋一样。
?
用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并
9
网站设计十大错误
?
9、打开新的浏览器窗口
?
打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的
杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕（尤其在
当前操作系统低劣的窗口管理技术下）。
?
设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用
户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”
字。
? 对于其他网页来说，标题应该是将具体内容的概要文字说明，由于网页标题是浏 览器窗口的标题，也是用户任务条上的标签，多个窗口下将会显示每一页的标题， 因此，如果你所有的网页标题字都相同的话，对于开了多个窗口的用户来说，你 网站的可用性将严重降低。
? 相关话题，主页所包含的标签（tag）：tag也需要简短，并且迅速传达网站的关 键信息。
字体大小”的功能，并使得网站有一个固定的字体 大小。对于大多数人的年龄超过 40岁的人来说，这 个固定地文字大小实在太小了。 ? 尊重用户的喜好，让他们按照自己的需要修改 文字的大小，同时，明确字体大小是相对的，而非 绝对显示像素的数量多少。
6
网站设计十大错误
? 6. 网页标题搜索引擎不友好
?
搜索是用户发现网站的最重要途径，搜索用户找到一个独立网站的最重要的
?
因此，最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的
广告形式出现而变化。目前遵循以下规则：
?
无视横幅：着用户将不会把注意力放在任何看似横幅广告的东西，这取决于
它的形状及位置。的文字或其它侵略性很强的动画。
?
净化弹出窗口：用户在弹出窗口完全打开前就会将其关闭，有时是带着极端
4
网站设计十大错误
? 4、文字未排版
?
将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛
苦的经历。
?
在线写作，并不是为了打印，需要让用户能很好地阅读，下面是几
个改进的要点：
?
使用子标题
?
使用列表
?
突出关键字
?
使用小段落
?
反金字塔结构
?
简单的写作风格
5
网站设计十大错误
? 5、固定字体大小 ? CSS样式不幸让网站有权禁止浏览器的“改变
按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，
尤其当他们的显示器很小，而窗口又正好是最大化时。因此，当用户想要返回原
器窗口相适应。没有了平滑的滚动浏览，有的只是超小号的
字体。
?
更糟糕的是，PDF文件内容是分块的，很难浏览。
?
PDF是对于印刷及发行手册和其他需要打印的大文件来
讲是很合适的，使用它的目的只是为了保留它的信息使其网
页上浏览成为现实。
3
网站设计十大错误
? 3、未改变已访问链接的颜色 ? 一个好的浏览历史能够帮助你了解目前的位置，因为那
7
网站设计十大错误
? 7、所有的东西看起来都像广告
?
有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些
目的性很强的广告采取不予理睬的态度。（专门的广告搜索除外）
?
不幸的是，这也使得用户忽视了那些看起来很像广告的设计样式。毕竟，当
你不理会某些东西时，就不会仔细地研究它并搞清楚它是什么。
功能，建议还是使用简单搜索，搜索形式应该是一个简单的录入框，就
象用户心里所期望的一样 。
2
网站设计十大错误
? 2、使用PDF文件作为在线阅读
?
用户讨厌在浏览的时候跳出PDF文件，因为那会打断用
户的浏览过程，因为普通的浏览器按钮无法工作，即使如打
印或保存文档这样简单的事情也会变得复杂。由于其版面设
计是基于纸张优化的，因此文字的字体很少会和用户的浏览
人机交互界面设计
Lecture 16 网页设计禁忌
1
网站设计十大错误
? 1. 搜索引擎不友好
?
过分依赖文字的搜索引擎降低了搜索可用性，他们不能应付那些打
字稿（扫描稿），错别字、以及复数的、加了连字符号的词，还有变异
的单词等等各种各样的问题。这样的搜索引擎对那些年纪大的用户来说
显然是很难用的，但是如果搜索引擎刻意去迎合这种错误使用的话，会
方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工
具。
?
网页的标题文字是在<title>标记之间的文字，并通常作为搜索引擎结果列表
中的链接文字。搜索引擎一般只显示标题开头66个字，是真正的缩略内容。
?
网页标题也用户将一个网址加为书签时的默认文字，对于你的主页，应该以
公司名称开头，接着是网站的简介，不要用“The”或“Welcome to”做为开头文
伤害到所有的搜索使用者。
? 一个相关的问题是，搜索引擎在给搜索结果排序的时候是完全按照其中 所包含的检索条件的数量，而不是依靠文档的重要性。如果你的搜索引 擎能够把“最佳推荐”放在结果的最前面就更好了——特别是对于某些 重要的查询来说，比如你的产品名称。
?
当导航不能使用的时候 ，搜索是用户的救生索。即使有高级搜索
且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放
苹果时，它变成了西红柿并朝着天空蹦出一英里，那多荒诞！
? Jakob的网页用户体验法则中说道“用户的大部分时间会在其他网站度 过” 这意味着他们对你的网站的期望，是基于其他网站通常是如何做的。如 果你偏离了，你的网站就会非常难用，用户也会离开。
厌恶的情绪。
8
网站设计十大错误
? 8、违反设计惯例
?
一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，
用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生
什么事情。就像你每次在牛顿的头顶上放下一个苹果，它一定会砸中他
的脑袋一样。
?
用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并
9
网站设计十大错误
?
9、打开新的浏览器窗口
?
打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的
杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕（尤其在
当前操作系统低劣的窗口管理技术下）。
?
设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用
户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”
字。
? 对于其他网页来说，标题应该是将具体内容的概要文字说明，由于网页标题是浏 览器窗口的标题，也是用户任务条上的标签，多个窗口下将会显示每一页的标题， 因此，如果你所有的网页标题字都相同的话，对于开了多个窗口的用户来说，你 网站的可用性将严重降低。
? 相关话题，主页所包含的标签（tag）：tag也需要简短，并且迅速传达网站的关 键信息。
字体大小”的功能，并使得网站有一个固定的字体 大小。对于大多数人的年龄超过 40岁的人来说，这 个固定地文字大小实在太小了。 ? 尊重用户的喜好，让他们按照自己的需要修改 文字的大小，同时，明确字体大小是相对的，而非 绝对显示像素的数量多少。
6
网站设计十大错误
? 6. 网页标题搜索引擎不友好
?
搜索是用户发现网站的最重要途径，搜索用户找到一个独立网站的最重要的
?
因此，最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的
广告形式出现而变化。目前遵循以下规则：
?
无视横幅：着用户将不会把注意力放在任何看似横幅广告的东西，这取决于
它的形状及位置。的文字或其它侵略性很强的动画。
?
净化弹出窗口：用户在弹出窗口完全打开前就会将其关闭，有时是带着极端
4
网站设计十大错误
? 4、文字未排版
?
将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛
苦的经历。
?
在线写作，并不是为了打印，需要让用户能很好地阅读，下面是几
个改进的要点：
?
使用子标题
?
使用列表
?
突出关键字
?
使用小段落
?
反金字塔结构
?
简单的写作风格
5
网站设计十大错误
? 5、固定字体大小 ? CSS样式不幸让网站有权禁止浏览器的“改变
按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，
尤其当他们的显示器很小，而窗口又正好是最大化时。因此，当用户想要返回原
器窗口相适应。没有了平滑的滚动浏览，有的只是超小号的
字体。
?
更糟糕的是，PDF文件内容是分块的，很难浏览。
?
PDF是对于印刷及发行手册和其他需要打印的大文件来
讲是很合适的，使用它的目的只是为了保留它的信息使其网
页上浏览成为现实。
3
网站设计十大错误
? 3、未改变已访问链接的颜色 ? 一个好的浏览历史能够帮助你了解目前的位置，因为那
7
网站设计十大错误
? 7、所有的东西看起来都像广告
?
有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些
目的性很强的广告采取不予理睬的态度。（专门的广告搜索除外）
?
不幸的是，这也使得用户忽视了那些看起来很像广告的设计样式。毕竟，当
你不理会某些东西时，就不会仔细地研究它并搞清楚它是什么。
功能，建议还是使用简单搜索，搜索形式应该是一个简单的录入框，就
象用户心里所期望的一样 。
2
网站设计十大错误
? 2、使用PDF文件作为在线阅读
?
用户讨厌在浏览的时候跳出PDF文件，因为那会打断用
户的浏览过程，因为普通的浏览器按钮无法工作，即使如打
印或保存文档这样简单的事情也会变得复杂。由于其版面设
计是基于纸张优化的，因此文字的字体很少会和用户的浏览
人机交互界面设计
Lecture 16 网页设计禁忌
1
网站设计十大错误
? 1. 搜索引擎不友好
?
过分依赖文字的搜索引擎降低了搜索可用性，他们不能应付那些打
字稿（扫描稿），错别字、以及复数的、加了连字符号的词，还有变异
的单词等等各种各样的问题。这样的搜索引擎对那些年纪大的用户来说
显然是很难用的，但是如果搜索引擎刻意去迎合这种错误使用的话，会
方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工
具。
?
网页的标题文字是在<title>标记之间的文字，并通常作为搜索引擎结果列表
中的链接文字。搜索引擎一般只显示标题开头66个字，是真正的缩略内容。
?
网页标题也用户将一个网址加为书签时的默认文字，对于你的主页，应该以
公司名称开头，接着是网站的简介，不要用“The”或“Welcome to”做为开头文
伤害到所有的搜索使用者。
? 一个相关的问题是，搜索引擎在给搜索结果排序的时候是完全按照其中 所包含的检索条件的数量，而不是依靠文档的重要性。如果你的搜索引 擎能够把“最佳推荐”放在结果的最前面就更好了——特别是对于某些 重要的查询来说，比如你的产品名称。
?
当导航不能使用的时候 ，搜索是用户的救生索。即使有高级搜索
且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放
苹果时，它变成了西红柿并朝着天空蹦出一英里，那多荒诞！
? Jakob的网页用户体验法则中说道“用户的大部分时间会在其他网站度 过” 这意味着他们对你的网站的期望，是基于其他网站通常是如何做的。如 果你偏离了，你的网站就会非常难用，用户也会离开。