粘性菜单的问题和替代方法

7 May 2023

2023年5月7日

Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages.

设计师使用粘性菜单（粘在视口边缘的菜单），使其在长页面上易于访问。

But this fancy pattern hurts UX far more than it improves it.

但这种花哨的模式对用户体验的伤害远远大于它的改善。

Here’s why:

原因就在这里：

Problem #1: They constantly take up space

问题一：它们不断地占用空间

They get in the way of the actual content. And it’s worse on small screens where space is more limited.

它们妨碍了实际的内容。而在空间更有限的小屏幕上，情况更糟。

Semplice’s menu sticks to the top

Semplice的菜单坚持到了顶端

For example, Material Design’s floating action button always gets in the way of the content behind it.

例如，Material Design的浮动行动按钮总是挡住了后面的内容。

Material Design’s sticky button obscures the content beneath

材料设计的粘性按钮掩盖了下面的内容

When zooming in, the size of the sticky menu can increase to a point where there’s little space for the content.

当放大时，粘性菜单的大小会增加到几乎没有空间容纳内容的地步。

Medium’s website when zooming in and out shows how the content withint he menu gets obscured

Medium的网站在放大和缩小时显示了菜单内的内容是如何被遮挡的

On mobile, sticky menus may disappear upwards. They may also become misaligned or slightly cropped.

在手机上，粘性菜单可能向上消失。它们也可能变得错位或略微歪斜。

Problem #4: They’re difficult to access

问题4：他们很难进入。

If a sticky menu is taller than the content and viewport, users will be unable to access the bottom of the menu (in some browsers).

如果一个粘性菜单的高度高于内容和视口，用户将无法访问菜单的底部（在某些浏览器中）。

Even if the content is taller than the menu, users still have to scroll to the bottom of the content to see the menu which is long winded.

即使内容比菜单高，用户仍然要滚动到内容的底部才能看到菜单，这就很啰嗦了。

MOJ Patterns with a sticky menu applied

应用粘性菜单的MOJ模式

You could add an inner scroll bar to the menu. But multiple scroll bars are hard to use.

你可以在菜单上添加一个内部滚动条。但多个滚动条很难用。

Problem #5: Internal page anchors feel broken when clicked twice

问题五：内部页面的锚点在点击两次时感觉被破坏了

Some sticky menus contain links that take users to content down the page.

一些粘性菜单包含链接，将用户带到页面下方的内容。

When the user clicks the same link for a second time nothing happens, which makes the interface feel broken.

当用户第二次点击同一个链接时，什么也没有发生，这让人感觉界面被破坏了。

Clicking a stic...