设计师和开发人员在构建网站时，需要考虑很多事情，从视觉外观到功能设计。为了简化这个过程，我们准备了这个指南。限于篇幅限制，将这一指南分为三部分，此为第二部分内容。
本文主要内容为：
二、设计页面
二、设计页面2.1 内容策略
内容策略最重要的一点就是聚焦在页面目标上。理解页面的目标，并根据目标安排内容。
下面是一些提高用户对内容理解的实用技巧：
(Image credit: Witteia)
(Image credit: The Daily Rind)
2.2 页面结构
一个结构合理的页面清楚地显示了每个用户界面元素位于布局中的位置。虽然没有一个适合所有页面的规则，但是有一些指导性原则可以帮助你创建一个坚固的结构：
网格和布局是设计的一部分，且能适应不同屏幕尺寸的设计场景。Adobe XD的布局网格使设计人员能够针对不同的屏幕尺寸实现一致设计及管理网格中元素之间的比例。
Adobe XD中创建的低保真线框图(Image credit: Tim Hykes)
2.3 视觉层次
人们大多数情况是快速浏览网页，而不是阅读所有内容。 因此，如果访客想要查找内容或完成任务，他们将快速浏览网页、找到需要的地方。作为一名设计师，你应该通过设计良好的视觉层次来帮助他们。视觉层次是指以重要性（即应该首先关注哪些、再关注哪些等等）呈现元素。一个适当的视觉层次结构可以让用户更快速地浏览页面。
CNN采用的F形模式
Basecamp采用的Z形模式
“Learn More About Brains” 按钮就是视觉焦点。
使用Adobe XD创建的原型。(Image credit: Coursetro)
2.4 滚动操作
网页设计师中流传着一个谎言——用户不会使用滚动。重申：今天，每一个人都在使用滚动!
用户进行滚动操作时whatsapp网页版，提升用户体验的一些提示：
滚动后的导航 (Image: Zenman)
加载动画（如Tumblr的加载指示器）告诉用户正在加载更多的内容。
Tumbler登录页面劫持了滚动操作。滚动的页面时固定的whatsapp登录，而不是自由的。
2.5 内容加载
内容加载值得进一步强调。即时响应是最好的，但有时候你的网站需要更多的时间向访问者传递内容。一个糟糕的网络连接可能导致一个缓慢的反应，或者一个操作可能需要更长的时间才能完成。但是不管原因是什么，你的网站都应该快速加载。
当内容被加载时，Facebook使用Skeleton Screens来填充UI。
2.6 按钮
按钮对于创建流畅的交互流程至关重要。 这有一些地方值得关注：
左上角的橙色框是按钮吗？ 不，但形状和标签文本使其看起来像一个按钮。
不要让用户对按钮的作用困惑。(Image credit: UX Matters)
保持一致。
2.7 图像化
一张图片胜过千言万语。人类是视觉生物，几乎能立即处理完视觉信息；我们所感知并被传达到大脑的90%信息是可视化的。图像是捕捉用户注意力并区分产品的有效方式。与一段精心设计的文本相比，图像更能被浏览者接收。此外，图像能跨语言障碍。
以下原则，可以帮助您将图像应用到网页中：
与主题无关的图像会使用户困惑。
不真实的图像给用户带来一种虚伪的感觉。
同尺寸不同质量的照片 (Image credit: Adobe)
2.8 视频
随着网速的提高，视频正变得越来越流行，特别是它们延长了用户在网站的时间。今天，视频无处不在。 我们在台式机，平板电脑和手机上观看视频。当有效地使用视频时，能非常有效的吸引用户 – 它传递更多的情感，真正给人一种产品或服务的感觉。
Facebook的视频会在用户进入时自动播放，但默认不会播放声音。
（Image credit: Dmakproductions）
字幕和视频将使内容更容易获取。(Image credit: TED)
2.9 Call-to-Action(CTA)按钮
Call-to-Action（CTA）是指引导用户实现预期目标的按钮。 CTA的重点在于引导用户进行我们所期望的行动。 一些常见的CTA的例子是：
设计CTA按钮时需要考虑以下几点：
火狐网站上绿色的CTA非常醒目，能马上得到用户关注。
以前的Dropbox主页有一个很好的例子，使用负空间来创建主CTA。蓝色的“免费注册”CTA与背景的淡蓝色相映成辉。
Evernote为CTA提供了最常见且有效的文本。
提示：您可以通过模糊效果快速测试CTA。模糊测试是确定用户的眼睛是否会到达您想要的位置的便捷方法。将网页截图在Adobe XD中应用模糊效果（请参阅下面的示例）。看看页面的模糊版本，哪些元素会脱颖而出？如果您不是正在预测的内容，那就修改。
模糊测试是一种检验设计焦点和视觉层次的技术。
2.10 网页表单
填写表单仍然是网页最重要的互动类型之一。事实上，表单通常被认为是完成目标的最后一步。用户在填写表单时，应该避免出现困惑、尽快完成表单。表单就像一个对话whatsapp网页版，双方之间（用户和网站）应该有逻辑的沟通。
将相关信息集合在一起。（Image: Nielsen Norman Group）
2.11 动画
越来越多的设计师将动画作为功能元素来加强用户体验。动画不只是为了乐趣，它是提高交互效率的重要方式之一。但是，动画只有在合适的时间和位置才能提高用户体验。好的交互动画有一个目标：它是有意义、有作用的。
以下是动画增强用户体验的一些场景：
用户看到动画后，能立即了解问题。 (Image credit: The Kinetic UI)
(Image credit: xjw)
(Image credit: Ramotion)
(Image credit Heco)
第二部分结束，请移步第三部分。