（翻译）导航栏按钮的5类常见设计错误

  用户依靠导航栏来查找所需的信息，如果导航栏按钮的标签和状态不明确，他们用着就很不方便。
  以下列出设计人员设计导航栏按钮时的5类常见错误，如果你也存在这些问题，现在是时候让导航栏变得更明确了。

1.没有突出显示选中按钮

  很多设计人员没有在导航栏中突出显示选中按钮。用户点击导航栏中的按钮，他们需要看到选中按钮的视觉反馈。
  看不到视觉反馈，用户就不知道他们在任务流程中的位置，可能会把当前页面误认为是另一个类似的页面。

  同时采用形状和对比色突出显示选中按钮。仅采用颜色的话，色盲用户可能难以区分按钮的选中状态。
  用形状突出显示选中按钮的标准做法是在按钮标签下方显示粗的下划线。也可以在标签周围显示轮廓线，但要注意不能与导航栏中的行为召唤按钮有冲突。
  选中按钮的标签也应作为主页标题，不过在导航栏中突出显示按钮已经足够明确，不会产生任何混淆。

2.选中按钮采用低对比色

  很多网站用低对比色区分选中按钮，这种做法有问题，用户无法快速看出所处的网站层级。

  低对比色让用户难以识别按钮标签，迫使他们必须回忆起点的哪个按钮。如果能通过视觉提示看出选中按钮，则可以提高用户的操作效率。
  选中按钮应该具有导航栏所有按钮中最高的颜色对比度，让用户一眼就能看出活动按钮。
  可以使用对比度检查程序获取按钮标签和背景之间的颜色对比值。

3.未激活按钮采用低对比色

  未激活按钮与背景的颜色对比值应低于选中按钮，但也不能低得看不清按钮标签。颜色对比度过低会让用户忽略按钮，并认为它们处于禁用状态。

4.按钮标签周围区域不支持点击

  导航栏按钮用空白隔开。设计人员应该将每个按钮的周围空白配置为可点击区域，这能扩大按钮的点击范围，以便用户更快地导航。

5.按钮没有悬停效果和焦点效果

  导航栏按钮增加悬停效果更便于用户点击，这能让他们清楚鼠标光标是否位于按钮的可点击区域。没有悬停效果，用户认为每次都得点到标签上才能选中按钮，这减少了按钮的命中区域，增加了用户的点击难度。
  不是所有的用户都使用鼠标。屏幕阅读器用户使用键盘导航，他们在按钮之间切换时需要焦点效果。所有类型的可点击元素都应支持焦点效果，这是一种良好的可访问性实践。

导航栏上的视觉提示

  用户浏览网站时通常最先接触的是导航栏。用户点击导航栏按钮时需要视觉提示，以便了解他们当前的位置和可去之处。
  避免上述5类常见设计错误，让导航栏按钮变得更直观。忽略导航栏上的视觉提示可能会影响用户的参与度，没有明确的视觉提示，用户就是在摸黑导航。

原文地址：https://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/