原文：Back-to-Top Button Design Guidelines
作者：Hoa Loranger (2017-08-27)
阅读时间：5m27s
摘要：返回顶部按钮的 9 个 UX 准则，可帮助用户导航至长页面的顶部。根据用户需求，在某些网站上，使用其他技术可能更加恰当。
响应式网页设计的流行导致了移动端和桌面端单列长页面设计的数量激增。这些设计带来的结果就是「返回顶部」按钮，这是一种允许用户快速导航至页面顶部的一种快捷方式。
当用户到达一个非常长的页面的底部时，他们通常需要回到顶部，以：
- 查看导航菜单并选择一个新的目的页面
- 使用筛选和排序功能
- 在搜索框中输入或编辑问题
操作系统和浏览器已经提供了多种实现这一功能的方法：按下键盘上的 Home 键，点击 iOS 上 Safari 中的状态栏，使用快捷命令，等等。
然而，技术受众（如本文的读者）可能知道这些方法，但大多数用户却不知道。对一般 Web 用户来说，这些技术过于隐蔽和不适用，他们通常只使用手指或者鼠标来向上滚动。
当页面非常长时（比如，因为无限滚动），在屏幕和内容屏幕之间向上滚动就会变得非常乏味。因此，「返回顶部」按钮就发挥了作用。
「返回顶部」按钮的 9 个设计准则
以下是一些关键指南，可以帮助您决定何时使用「返回顶部」按钮以及如何有效地设计它。
-
对于长度超过 4 个屏幕的页面，请使用「返回顶部」按钮。对于相对较短的页面，返回顶部按钮则多余了———人们可以轻松地滚动返回，而无需过多的努力。如果您只需使用滚动条或手指便可快速导航至顶部，那就没有必要让界面变得杂乱。
-
在页面的右下方放置一个持续显示的「返回顶部」按钮。这是人们期望看到它的位置。这个位置不碍事，但很明显。当按钮被放置在屏幕上其他地方时，通常会被忽略。
-
使用文本标签「返回顶部」。这个词组最具描述性。 仅有图标（例如，向上的箭头）可能会产生歧义，并且，根据图形认识的不同，可能无法传达正确的含义。
MedlinePlus.gov: 单独的箭头图标含义太模糊了，文本标签有助于解决这个情境中的歧义。
Overstock.com: 显示在箭头图标旁边的文本标签”返回顶部“，有助于解释该按钮。
-
每个页面显示一个固定的「返回顶部」的链接，而不是在页面中的各个部分显示多个链接。（后一种模式曾经在具有锚链接的页面上很流行。）在可用性研究中，我们观察到，人们忽略了这些重复的链接，因为它们是可预测的。
USA.gov: 重复的「返回顶部」链接增加了视觉上的混乱，导致它们被忽略了。
-
保持按钮尺寸较小，这样它就不会覆盖重要的页面元素。但是，如果是在触摸屏上，请将其做得足够大，以便人们点击它。
-
使按钮在页面看起来更突出，而不是混在一起。当「返回顶部」与背景内容太过混合时，用户将不太可能会注意到并使用它。
-
考虑延迟显示「返回顶部」，直到用户滚动了几页并表明他们想要向上滚动（例如，向上移动滚动条，向上划动页面）。因此，按钮仅在最需要的时候才显示，而不会在其余时间覆盖屏幕上的重要部分。
Overstock.com: 只有当页面向上滚动时，才会显示「返回顶部」链接。（并且正如我们所建议的那样，它位于右下方。）
-
固定显示按钮。一旦按钮出现，禁止它移动。移动的元素造成很大的干扰，因为眼睛会自动被屏幕上任何移动的元素所吸引。
-
让用户控制滚动。永远不要让页面自动滚动，例如，当页面顶部出现新内容时。最好提供一个通知并允许用户决定是否滚动以查看任何新内容。
「返回顶部」按钮的替代方案
有其他方案可帮助人们去他们需要去的地方。回到顶部是达到目的的一种手段。如果您能预测用户想要什么内容并提供给他们，那就更好了。以下是一些方法：
-
页面底部的导航可以满足那些想要返回顶部去导航或搜索其他内容的用户。当用户倾向于滚动到网站上长页面的最底部时，这种方法最有效。
Etsy.com：该网站在页脚内和页脚附近提供了链接以支持 user journey，而不是使用「返回顶部」。
-
与「返回顶部」链接相比，sticky menus 有时候是更优雅的解决方案。如果滚动的主要目的是导航至网站中不同的话题或部分，那么当人们需要时，可直接使用菜单选项，而无需返回顶部。
类似地，如果向上滚动页面的主要目的是访问页面顶部的常见功能（例如，筛选，排序，搜索，下一页），那么在人们向上滚动时显示这些功能可以提供及时的帮助。
Nordstrom.com: 该网站将提炼出来的功能固定显示在页面一侧，防止大多数购物任务需要回到顶部。
- 社交网站上的「主页」按钮通常会将人们带到主页的顶部，主页恰好是一个有着很长 Feed 的页面，最需要的就是快速返回顶部的方法。在社交网站上，大多数人都习惯于点击「主页」按钮来滚动至 feed 的顶部。
虽然「主页」按钮可以在社交网站上使用，但不要指望它也适用于其他类型的网站。在一般的网站上，人们希望「主页」链接将他们带到主页，而不是同一网页的顶部。
Twitter.com: 「主页」按钮同时有「返回顶部」的功能。
总结
有许多好的解决方案可以帮助人们回到网页顶部。在您决定使用「返回顶部」链接之前，请考虑您的具体情况并确定哪种方法最适合于您的受众。
以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^
网友评论