《网页设计综合指南》（二）

设计师和开发人员在构建网站时，需要考虑很多事情，从视觉外观到功能设计。为了简化这个过程，我们准备了这个指南。限于篇幅限制，将这一指南分为三部分，此为第二部分内容。

本文主要内容为：

二、设计页面

• 2.1 内容策略
• 2.2 页面结构
• 2.3 视觉层次
• 2.4 滚动操作
• 2.5 内容加载
• 2.6 按钮
• 2.7 图像化
• 2.8 视频
• 2.9 行为响应按钮
• 2.10 网页表单
• 2.11 交互动画

二、设计页面

2.1 内容策略

内容策略最重要的一点就是聚焦在页面目标上。理解页面的目标，并根据目标安排内容。

下面是一些提高用户对内容理解的实用技巧：

• 防止信息超载。信息超载是一个严重的问题。用户觉得有太多信息需消化，从而无法下决定或采取行动。有一些简单的方法能最小化信息超载。一个常用的方法就是分块——将内容分成几个模块，帮助用户更好的理解和处理。结账单就是最好的例子。每次最多显示五到七个输入字段，将结帐单拆分到多个页面，必要时才逐步公开字段。

(Image credit: Witteia)

• 避免行话和行业术语。页面上出现的每个未知术语或短语都会增加用户的认知负荷。一个安全的方式就是为所有读者编辑内容，并选择所有用户都清楚易懂的词。
• 最大限度地减少长内容。根据信息过载的观点，如果网站不是以信息消费为主，尽量避免长文本块。 例如，如果您需要提供有关服务或产品的详细信息，请尝试逐步展开详细信息。 将文本块写的短一些，更方便理解。根据罗伯特·盖宁（Robert Gunning）的“How to Take the Fog Out of Business Writing”这本书，为了舒适的阅读，大多数的句子应该是20个字以内。

(Image credit: The Daily Rind)

• 避免所有字母采用大写。全部大写的文本（也就是所有字母都是大写的文本）对于字符量较少的文本是可以的，比如缩略词和图标；但是，请避免在字符量比较大的地方使用（例如段落，表格标签，错误，通知）。正如 Miles Tinker 在“Legibility of Print”一书中提到的，全部大写会降低阅读速度。另外，大多数读者会觉得全部大写的文本不能快速清晰的理解。

  全部采用大写，用户比较难以理解。

2.2 页面结构

一个结构合理的页面清楚地显示了每个用户界面元素位于布局中的位置。虽然没有一个适合所有页面的规则，但是有一些指导性原则可以帮助你创建一个坚固的结构：

• 使结构可预测。使您的设计符合用户期望。可以参考同类网站来找出在页面上需要哪些元素以及位置。使用目标用户熟悉的模式。
• 使用布局网格。布局网格将页面划分为几块主要区域，并根据大小和位置定义区域之间的关系。在网格的帮助下，能更轻松地将不同部分组合在一起，形成一个有凝聚力的页面。

网格和布局是设计的一部分，且能适应不同屏幕尺寸的设计场景。Adobe XD的布局网格使设计人员能够针对不同的屏幕尺寸实现一致设计及管理网格中元素之间的比例。

• 使用低保真线框模拟，避免界面杂乱不清晰。混乱会增加理解的难度——每添加一个按钮，图像或文本都会使页面更加复杂。在用真实元素构建页面之前，先创建一个线框图，分析它，然后去掉那些不是绝对必要的东西。

Adobe XD中创建的低保真线框图(Image credit: Tim Hykes)

2.3 视觉层次

人们大多数情况是快速浏览网页，而不是阅读所有内容。 因此，如果访客想要查找内容或完成任务，他们将快速浏览网页、找到需要的地方。作为一名设计师，你应该通过设计良好的视觉层次来帮助他们。视觉层次是指以重要性（即应该首先关注哪些、再关注哪些等等）呈现元素。一个适当的视觉层次结构可以让用户更快速地浏览页面。

• 使用自然的浏览模式。 作为设计师，我们可以控制人们浏览页面的时，关注的位置。为了给访问者的眼睛设定合适的浏览路径，我们可以使用两种模式： F形模式 和 Z形图案 。对于重文本的页面（如文章和搜索结果），F模式更好，而Z模式适用于不以文字为中心的页面。

CNN采用的F形模式

Basecamp采用的Z形模式

• 优先考虑重要元素。要让页面标题，登录表单，导航选项和其他重要内容成为视觉焦点，以便游客立即看到它们。

“Learn More About Brains” 按钮就是视觉焦点。

• 创建模型来阐明视觉层次结构。当拥有真实数据后，设计原型能够看到真实页面。在原型中重新排列元素要比技术人员开发网页时更方便，如此来避免开发过程中再修改。

使用Adobe XD创建的原型。(Image credit: Coursetro)

2.4 滚动操作

网页设计师中流传着一个谎言——用户不会使用滚动。重申：今天， 每一个人都在使用滚动 !

用户进行滚动操作时，提升用户体验的一些提示：

• 鼓励用户滚动。 尽管页面加载后人们通常会 开始滚动 。但页面顶部的内容仍然非常重要。顶部的内容给观众带来了第一印象和期待。只有在内容有吸引力的时候，用户才会进行滚动。因此，把你最引人注目的内容放在页面顶部：
• 提供一个优秀的 介绍 。 一个优秀的介绍为内容铺设了背景，并回答了用户的问题：“这个网页是关于什么的？
• 使用 有吸引力的图像 。 用户会密切关注包含相关信息的图像。
• 坚持导航。当您创建冗长的页面时，请记住用户仍然需要方向感（当前位置）和导航（其他可能的路径）。长页面可能会出现导航问题；如果顶部导航栏在用户向下滚动时不可见，则当他们在页面底部时，他们将不得不一直向上滚动。最简单的解决方案是 悬浮菜单 ——显示当前位置，并一直悬浮在页面中。

滚动后的导航 (Image: Zenman)

• 加载新内容时提供视觉反馈。 这对于动态加载内容的网页尤为重要（如新闻）。由于滚动过程中的内容加载是快速的（基本都在2到10秒），你可以使用 循环动画 来表示系统正在工作。

加载动画（如Tumblr的加载指示器）告诉用户正在加载更多的内容。

• 不要劫持滚动（即不要将滚动操作限定死）。劫持滚动是最恼人的事情之一，因为它将控制权从用户手中带走，并使滚动行为完全不可预知。 当你设计一个网站，应该让用户控制他们的浏览行为。

Tumbler登录页面劫持了滚动操作。滚动的页面时固定的，而不是自由的。

2.5 内容加载

内容加载值得进一步强调。即时响应是最好的，但有时候你的网站需要更多的时间向访问者传递内容。一个糟糕的网络连接可能导致一个缓慢的反应，或者一个操作可能需要更长的时间才能完成。但是不管原因是什么，你的网站都应该快速加载。

• 确保常规加载不需要很长时间。网民的注意力和耐心是非常低的。根据 Nielsen Norman Group research ，用户保持注意力的极限是10秒。当访问者不得不等待一个网站加载，如果网站加载速度不够快，他们会感到沮丧并可能离开。如果加载时间过长，即使设计了最漂亮的加载指示，用户仍然会离开。
• 加载过程中使用Skeleton Screens。许多网站使用进度指示器显示数据正在加载。虽然进度指标背后的意图是好的（提供视觉反馈），但结果可能是负面的。正如 Luke Wroblewski 所述，“按照定义，进度指标是对有人需要等待的响应。这就像看着时钟滴答下来 – 当你这样做，时间似乎变慢。”有一个很好的替代进展指标：Skeleton Screens。这些容器本质上是一个暂时空白的页面版本，信息逐渐加载到容器中。设计师可以使用Skeleton Screens将用户的注意力集中在实际进展上，并为即将到来的事物预测。这意味着事情正在立即发生，因为信息在屏幕上逐渐显示，人们看到网站在等待的时候正在采取行动。

当内容被加载时，Facebook使用Skeleton Screens来填充UI。

2.6 按钮

按钮对于创建流畅的交互流程至关重要。 这有一些地方值得关注：

• 确保可点击的元素看起来像可点击的。使用按钮和其他交互元素，考虑如何传递可用性信息。用户是如何将元素理解为一个按钮？表单应该遵循以下功能：元素的表现形式要传递使用方式。看起来像链接或按钮但不可点击的可视元素（如带有下划线的单词不是链接或具有矩形背景但不是按钮的元素）会让用户懵逼。

左上角的橙色框是按钮吗？ 不，但形状和标签文本使其看起来像一个按钮。

• 标签按钮要符合用户的期望。可操作的界面元素上的文本标签应该与实际作用相关联。如果用户明白按钮的作用，用户使用起来会更舒适。像下面例子中的“提交”的文本标签（Awesome！），这样的模糊标签不能让用户快速明白按钮的作用。