额外的填充使主题标题下的标签和类别难以点击

在移动视图中,主题列表的标题周围有额外的内边距,当用户尝试单击标签时,很难单击到标签本身。

2 个赞

我们曾故意增加标题的内边距,使其成为一个更大的点击目标(大到足以覆盖类别/标题,以便点击进入主题)……但似乎这又退步了。

也许值得尝试让类别/标签成为更大的目标,以便它们实际上可用。我会看看。

4 个赞

这是故意的。@schleifer 说他在移动设备上从未点击过那些字段(标签、类别),所以我们在主题列表中基本上只让标题可点击了。如果我们改变这一点,我们应该先讨论一下。

2 个赞

我认为,在桌面端分类和标签可以点击跳转,但在移动端却不行,这有点奇怪。而且,如果用户想在移动端查看,他们会认为网站有问题,因为当你在标题上长按时,很明显,激活时内边距会变成灰色并覆盖标题和一半的分类/标签行。从我的角度来看,这是一种不寻常的 UI 设计。

此外,根据我的 GA 分析,超过 80% 的用户通过移动端访问我的社区,虽然我不能肯定地说 meta 也是如此,但我相信我的用户很有可能在移动端点击这些标签。

1 个赞

当然可以,虽然可能仍然不合理,但我想再看看它是否可行。

3 个赞

是的,我稍微调整了一下,这些链接对于大多数移动可用性标准来说太小了,无法点击。

话虽如此,我们可以做得更好来捕获这些点击,而不是依赖我们一直在做的 CSS 覆盖……它总是有点脆弱,取决于内容,并且在所有主题上效果都不好。

我尝试使用 JS 替代(基于 https://meta.discourse.org/t/clickable-topic-component/183339):

这还将能够通过一些 CSS 使那些底部行项目再次可点击:

旧 CSS 供参考
.mobile-view .topic-list .topic-item-stats {
    pointer-events: all;
}

更新:此 CSS 已略有更改

.topic-list .topic-item-stats__category-tags {
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all;
  }
}
9 个赞