菜单

返回顶部按钮设计指南

by Hoa Loranger2017年8月27日

摘要:9返回页首的用户体验指南帮助用户导航到长页面的顶部根据用户的需求,其他技术在某些网站上可能更合适。


受欢迎程度响应式网站manbetx官方网站手机版has led to a proliferation of single-column, long-page manbetx官方网站手机版s both on mobile and desktop.  A consequence of these manbetx官方网站手机版s has been the回到顶部按钮,这是一种允许用户快速导航到页面顶部的快捷方式。

当用户到达一个非常长的页面的底部时,他们通常需要回到顶部:

  • 查看导航菜单并选择新目的地
  • 访问过滤和排序功能
  • 在搜索框中输入或编辑查询

操作系统和浏览器已经提供了多种方法:按下key on a keyboard, tapping the status bar in Safari on iOS, using shortcut commands, and so on. 

但是,虽然技术受众(如本文的读者)可能知道这些方法,但大多数用户却不知道对于一般的Web用户来说,这些技术过于隐蔽和不适用,他们通常只需使用手指或鼠标向上滚动即可。

当页面很长时(例如,因为无限滚动),向上滚动屏幕和内容屏幕变得太乏味了因此,作用回到顶部按钮。

9指南背部 最佳纽扣

以下是帮助您决定何时使用的关键指南背部  最佳 button and how to manbetx官方网站手机版 it effectively.

  1. 用一个回到顶部页面按钮超过4个屏幕对于相对较短的页面长度,回到顶部链接是过度的 - 人们可以简单地向后滚动而不需要过多的努力。不需要弄乱界面如果您只需使用滚动条或手指快速导航到顶部。
  2. 放置持久性回到顶部按钮右下页面的一面这是人们希望看到的地方这个位置不碍事,但很明显当按钮放在屏幕上的不同位置时,通常会忽略它。
  3. 标签按钮回到顶部这句话最具描述性仅图标(例如,向上的箭头)可能是模糊的,并且取决于图形实现,可能无法传达正确的含义。
MedlinePlus.gov:仅箭头图标的含义太模糊了文本标签有助于克服这种背景下的模糊性。

 

Overstock.com:文字标签,回到顶部 ,与箭头图标一起显示有助于解释按钮。

 

  1. 回到顶部每页链接而不是包括多个链接在页面的每个部分(This latter pattern used to be popular on pages with  锚链接。)在可用性研究中,我们观察到人们忽略了这些重复的联系,因为它们是如此可预测。
USA.gov: The repetitive 回到顶部  links increase visual clutter, causing them to be overlooked.

 

  1. 按住按钮所以它不包括重要的页面元素但是,如果您使用的是触摸屏,请将其设置得足够大,以便人们可以点按它。
  2. 按下按钮从视觉上脱颖而出在页面上而不是融入什么时候回到顶部与背景内容混合太多,用户不太可能注意到并使用它。
  3. 考虑延迟外观一个回到顶部选项直到用户滚动几页并指示他们想要向上滚动(例如,向上移动滚动条,向上翻页) Thus, the button appears only when it is most likely needed, without covering up important parts of the screen the rest of the time.
Overstock.com: The 回到顶部  link only appears when the page is scrolled up(它也在右下角,我们也推荐。)

 

  1. 按下按钮静止的一旦出现,不要让它移动移动元素会导致严重的干扰,因为眼睛会自动吸引屏幕上的任何移动。
  2. Let users 控制 scrolling永远不要让页面自动滚动,例如页面顶部有新内容可用时最好提供通知并允许用户决定是否滚动查看任何新内容。

替代品回到顶部

还有其他方法可以让人们去他们需要的地方回到顶端是达到目的的手段如果您可以预测用户想要的内容并将其提供给他们,那就更好了以下是一些想法:

导航在底部of the page could satisfy those who want to go back to the top to navigate to or search for something else.  This approach works best when users tend to scroll to the very bottom of long pages on your site.

Etsy.com: Rather than using 回到顶部 ,该网站提供页脚内和附近的链接,以支持用户旅程。

 

粘菜单有时候比一个更优雅的解决方案回到顶部链接如果滚动的主要目的是导航到网站的不同主题或部分,当人们需要它们时可以使用正确的菜单选项,则无需重新启动。

Similarly, if the main purpose of scrolling up the page is to access features commonly found at the top of the page (e.g., filter, sort, search, next page), having these features appear when people scroll up offers just-in-time assistance.

Nordstrom.com: This website keeps the refine features sticky on the side of the page, preventing the need for 回到顶部  for most shopping tasks.

 

社交网站上的按钮通常会将人们带到他们主页的顶部,这恰好是一个包含长馈送的页面,而且大多数需要快速的方法才能返回顶部社交网站上的大多数人习惯于点击按钮滚动到其Feed的顶部。

虽然按钮可能适用于社交网站,不要指望其他类型的网站在一般网站上,人们期待链接将它们带到主页,而不是同一网页的顶部。

Twitter.com: The  button doubles as 回到顶部

结论

许多好的解决方案来帮助人们回到网页的顶部在您决定实施之前回到顶部链接,考虑您的用例并确定哪种方法最适合您的受众。