改进用户菜单选项卡的布局

既然我们已经有了这些出色的菜单,是否考虑过让它们看起来更美观?我觉得有很多空间被浪费了(尤其是在移动端),这也导致点击区域变得太小。

移动端

桌面端


像这样如何?

这样可以让点击和阅读目标更容易。也许我们可以先从移动端开始尝试这个方案,因为移动端有额外的空间?

来自某个随机站点的另一个视觉示例,用于解释这一点

如果桌面端空间不足,我们是否可以采用如下所示的 3x3 布局?

17 个赞

我确实喜欢第一个标签页,也许我们可以从那里开始尝试?

9 个赞

对我来说,主要问题在于移动端第一个标签页的点击目标区域。我想知道,仅在那里调整一下间距,是否就能解决大部分问题。

很想知道 @awesomerobot 对此怎么看。我也觉得那一大块空白确实有点多了。

10 个赞

并不反对更大的改动,但将其改为两列是一个非常简单的改进。

15 个赞

我认为这里对移动端进行更大的改动是必要的。

12 个赞

我希望它看起来像这样。:slight_smile:

仅供参考,我在第一个标签页从未遇到过任何可用性问题。虽然我并不常使用该标签页,但在我使用时,从未记得误点过任何内容。

我觉得这个设计不错,但或许最好将“退出登录”按钮与其他选项隔离开来。据我理解,您可以向该菜单插入选项,如果“退出登录”按钮突然从左侧移到右侧(或反之),可能会造成混淆(即使它不常变动)。


对我来说,最别扭的地方是移动端所有标签页中存在的显著空白垂直空间,正如 @rishabh 最初提到的那样。

7 个赞

基于 @rishabh 的草图,有两个选项。我倾向于三列布局,但这会限制文本空间(“进入匿名模式”很可能可以缩短,而且默认情况下也不会开启……)

编辑:不过现在想想,对于使用更长单词的不同语言环境,两列布局可能更安全

10 个赞

“进入匿名模式”可以像“退出登录”一样显示在右下角。

在设计方面,我更喜欢第三列那种紧凑的样式。

我认为问题出在移动端:

我觉得这里用大按钮可能可行,但这样的话,我可能会把“退出登录”移到下方,并让它占满整行……我也不确定……

总的来说,桌面端目前的样式感觉还可以。

8 个赞

桌面端没问题,我认为这应该是一个仅针对移动端的变更。

8 个赞

新话题?这个讨论看起来与快速访问功能无关,该功能已经完成(非常棒),并且不会受到最新提案的影响。

我不明白为什么需要这些最新的更改。但我可能错过了其他地方提出的理由,说明“为什么这里需要针对移动设备进行更大的改动”。

  • 我喜欢桌面端和移动端的菜单保持一致。我两者都用,这样大脑负担更小。

  • 多列布局通常阅读速度较慢。图标很方便,但如果按钮被添加或移除,效果就不那么好了。

  • 如果垂直方向的着陆空间不足——它已经是下拉菜单的横向宽度了——那我们为什么不为所有菜单都使用图标按钮呢?

  • 我想填充空白区域是主要目标。在提出大按钮之前,我宁愿先实现其他功能:

    • 增大字体大小,使其与每篇帖子下方的“回复”按钮相匹配
    • 增加更多菜单选项,例如邀请、徽章
    • 对选项进行分组并提供某种分隔:用户菜单选项按与用户摘要相同的顺序放在一起;草稿单独列出;退出登录单独放在底部
    • 统计信息
8 个赞

是的,我倾向于更高的一致性(也更容易维护),但点击项和触摸项的体验不同……所以有时采用不同的布局是合理的。

我对此不太担心,因为项目数量很少。

也许我们应该试试?总得从某处开始。也许以后汉堡菜单也可以图标化。

我并不反对这样做,以便与用户菜单中的标签页保持一致,但我怀疑徽章/邀请在此上下文中并不是特别重要(徽章已在汉堡菜单中,大多数人也不使用邀请功能),所以它们可能带来的干扰多于帮助。

对于只有 6-7 个项目来说,这样并不合理。

也许我理解有误,但它们本来就在相同的顺序中(草稿和匿名模式在用户页面上没有完整的标签页,因此这些确实会稍微打乱顺序)。

我确实考虑过这一点,但目前我想暂时避免这样做。目前所有这些菜单都完全由可点击跳转或执行操作的项组成……我不确定它们是否适合放置纯信息性内容?

8 个赞

这有点棘手,因为该菜单最多只有 7 到 8 个项目,而在 iPhone X 上适配这些项目与在旧款 iPhone 或 Android 设备上适配是不同的。我认为两列布局更能有效利用空间,但在大屏手机上仍会有剩余空间。

我们可以做得更花哨,根据视口高度动态调整这些框的大小?如果我们的目标是充分利用空间并打造超大点击区域,那就可以尽情发挥。这可能过于极端,但这说明了即使将元素做得很大,仍会留有一些空间。

如果您希望实现单手操作可达性,理想情况下整个菜单都应放在底部……(在这种布局下,标签页风格不太合适,这里只是一个快速示例)。但这样一来,内容方向的问题就会变得复杂(如果菜单在底部,列表是否也应该从底部开始?这是个很大的麻烦)。

总之,刚才有点啰嗦……我认为两列图标框是一个不错的起点。它能更好地利用空间,并使点击操作更加便捷。

14 个赞

与其试图填满整个空间,为什么不只让菜单占用所需的宽度,而不是使用全高度呢?它在桌面端已经能动态调整高度了。在移动端不这样做有什么原因吗?

全高度设计遵循移动应用中“可全屏滑动的菜单”模式。如果不是全高度,我认为用户就不太容易明白可以将其滑走(至少额外的空白区域提供了额外的滑动区域)。

9 个赞

这将是巨大的改进,我也喜欢这样的先例(并非说现状不好)。

4 个赞

用户查看草稿的频率是否足够高,值得将其从个人资料标签页移至菜单中的独立标签页,就像通知、书签和消息一样?我推测与通知相比,它的使用频率相对较低,但想知道它与书签相比如何。在最近的菜单更改将草稿功能移至用户菜单的个人资料部分之前,我甚至不知道可以查看所有草稿,因此我怀疑使其更加醒目是否会更好。

1 个赞

书签很快就会变得更有用。

10 个赞

你好,Kris @awesomerobot,感谢你在用户体验方面所做的所有工作。

双栏布局看起来很棒。
另外,@seanblue 建议将草稿放在更显眼的位置,这听起来是个好主意。我完全忽略了这一点……它很实用,但目前是隐藏的。
我不确定有多少用户会去用户菜单左侧查看是否可点击,因为右侧的三个标签页吸引了我所有的注意力。

我在想,既然你正在那个区域编写代码……能否为列表添加单独的 CSS 类?目前所有项的类都是“read”。我希望能够隐藏其中一些。
我正在做一个特殊的独立私人客户论坛,用户之间无法互相查看。这有点像 @joebuhlig 在他的主题中尝试的做法。
谢谢!