紧凑消息样式

用户体验
1

您好，

在我看来，Discourse 默认的 2022-01 消息样式过于臃肿、分散注意力且浪费空间。我建议进行 2 项更正：
1）消息控件可以放置得更紧凑、更精确——看看我的草图，我最喜欢设计 v2 和 v4。
2）假设某些按钮无论如何都必须始终显示在移动设备上，例如：[点赞、编辑、回答、…更多]，但对于桌面（Win/Mac/Lx），可以始终只显示 [点赞、编辑]，而其他控件仅在鼠标悬停在每条消息上时显示。

PS 将点赞放在消息的另一侧（离得太远了 :smiley:）是一个有意识的决定——这将显著减少“无意义的点赞”、“为微笑而点赞”、“为开玩笑而点赞”、“为再次见到你而点赞”、“因为自己心情好而点赞”等现在被滥用且毫无实际意义的点赞。

有人能帮忙制作这样的样式吗？

more-compact-style_
more-compact-style_1690×1492 322 KB

1 个赞
2

您好，@GVG！
我有一些解决您问题的想法：

常见问题解答

1. 初始解决方案

  • 您可以使用 userstyles 更改 Discourse 的样式。

2. 为什么使用 user styles？

3. 这如何解决我的问题？

  • 您可以设置 CSS 样式，使此消息在 Discourse 中变得紧凑。

4. 优点？

  • 已经有紧凑消息的自定义样式，您可以根据需要将其应用于 Discourse。
  • Userstyles 易于您进行操作和实现。
  • 如果这具有吸引力且可行，也许 Discourse 会采纳此样式作为官方样式。
  • 这直接在浏览器中运行，您可以与其他用户共享此样式。

5. 缺点？

  • 如果您禁用视觉样式，则没有紧凑的消息。
  • 需要 CSS 和 JS 知识才能操作该网站。

6. 想法？我的意见？

  • 我认为您的想法可以使用 usertyles 来实现，或者创建一个自定义主题来用于 Discourse。

7. 您有什么不那么复杂的想法吗？

  • 创建一个主题，并根据需要自定义该主题，例如这个紧凑消息的想法。

8. 参考？

3

无需移动图标和菜单（此外，您的截图中并未显示其他元素，例如编辑计数、回复给谁的提及等），您仍然可以先处理边距：

默认：

.post-menu-area {
    margin: 20px 0;
}

自定义：

.post-menu-area {
    margin: 0;
}

对比：

image
image1561×394 30.1 KB

移动图标和操作按钮并非易事，可能需要更深入的工作。

2 个赞
4

@Canapin 你觉得我的 userstyles 想法怎么样？你觉得它不好吗？这个想法好吗？

  • 我想知道你的意见，因为我们可以根据这段代码为 Discourse 制作自定义 userstyles
5

Userstyles 仅在客户端工作，并且通常是按站点工作的（我使用 userstyles 并创建了一些）。

如果有人想改进 Discourse 的整体外观，任何建议都可以在 UX 中提出，如果没人创建主题组件或在 Discourse 中包含想要的更改，我认为任何用户都可以找到自己的解决方案。无论是主题组件（如果他们是管理员）还是客户端解决方案（如果他们不是管理员），都可以使用他们喜欢的任何浏览器插件的 CSS。

但是，这似乎不再是与 Discourse 相关的讨论了。

@GVG，请看这个相关讨论，这可能会让你感兴趣：

2 个赞
6

不，您的消息看起来像是对您的网络服务的经典垃圾邮件广告。

谢谢，但是：a) 我自己可以减小边距；b) 这还不够，因为那些活动元素浪费了并且占用了太多空间。所以主要目标是——将消息控件按钮从它们当前的位置移到另一个浪费空间更少的地方。

7

@GVG

不，您的消息看起来像是对您的网络服务的经典垃圾邮件广告。

    1. 对不起：（我的意图是用 userstyles 对 Discourse 进行一些客户端自定义 - 如果您不需要创建主题，这将起作用。我认为您的想法非常有价值 - 我只是想用 MVP - 最小可行产品 - 来帮助您 - 我希望每个人都能通过用户样式体验 UX，而不必开发一些插件或主题
    1. 我考虑过，因为我经常在制作网站时进行自定义
    1. 他们发布的链接是我研究和阅读的参考资料
    1. 如果这对您没有帮助，我很抱歉。我犯了一个错误。
8

@Canapin

  1. 我觉得你说的很有趣，但是：
  • 我的初衷是想通过 userstyles 对 Discourse 进行一些客户端定制——如果你不需要创建主题，这就可以实现。
  • 我只是想做一个 MVP（最小可行产品）——让大家都能体验到 user styles 的用户体验，而不必开发某个插件或主题。
  • 例如，有一个叫做 refined github 的仓库，你可以在那里发布对 GitHub 的改进——甚至还有一个浏览器扩展可以实现这一点。
    1. 我的想法会类似于这个仓库的想法。也许我们可以创建一个 refined-discourse——一个 userstyles.css 文件，其中包含各种视觉增强效果，就像 MVP 一样。这样社区就可以看到哪些是最好的，哪些是有意义的。
    2. 看到需要进行的调整，即使不必实现或创建主题或插件，那将是非常棒的。
    3. 我想到这一点是因为我觉得紧凑型消息的想法非常好，我想到了这一点，我们可以用 userstyles 来定制它——这将是一种简单的方法。
    4. 这就是我所说的“绿野仙踪”体验——如果你制作一个 userstyles.css，你就不需要花很多时间来开发你的想法。
    • 绿野仙踪实验：在人机交互领域，“绿野仙踪”实验是一种研究实验，其中受试者与一个他们认为自主运行的计算机系统进行交互，但实际上该系统是由一个看不见的真人操作或部分操作的。
      • 人们可以在没有主题或插件的情况下看到改进的用户体验/用户界面。
      • 对于那些使用 userstyles 的人来说，这可能看起来像是一个主题或插件——但事实并非如此。
      • 这看起来是一个 MVP（最小可行产品）的想法。
  1. 这是个坏主意吗？
  • 这是最后一个问题，如果你能对我的观点或看法感到满意的话。
  • 我想要更多反馈 ;D

参考

9

你有没有想过这对长帖子来说会如何运作？然后你阅读它，不得不向上滚动来点赞，然后再向下滚动来阅读下一篇帖子。

2 个赞
10

逻辑上同意，这是一个不错的反驳，但不是很好，因为：

  • 我最喜欢 v4 风格——当消息控件出现在帖子的右侧时，它们在垂直方向上可以“尽可能低——在消息末尾和屏幕底部”。控件面板甚至可以动态地垂直出现在每条消息的垂直位置，最接近当前鼠标位置！:wink: 所以这不是问题。
  • 大多数撰写和阅读长帖的用户——为了回复会使用精确的文本引用，或者总是可以回复主题本身——因此“回复”按钮并不是非常必要。
  • 正如我之前关于“移动端”所说的——由于缺少右侧的可用空间和触摸屏——主控件按钮仍然必须始终显示在标准位置——这似乎是垂直狭窄移动屏幕的最佳设计。
  • 如果您更喜欢保留 v3，其中主消息控件保留在底部或类似位置。

所以，如果您希望将消息控件保留在底部——没问题，但我仍然要求帮助最小化它们上方和下方的所有可用垂直空间，并且仅在鼠标悬停时（对于桌面端）显示控件（除点赞/编辑外）。

1 个赞
11

无需任何第三方工具即可轻松自定义 Discourse。

您可以在此处进行操作：https://theme-creator.discourse.org/。这正是它的用途。

您可以通过个人资料菜单创建主题：https://theme-creator.discourse.org/my/themes

所有论坛组件的外观均在此处引用：https://theme-creator.discourse.org/styleguide/

至于帖子本身的样式：https://theme-creator.discourse.org/styleguide/organisms/post

您新创建主题的 CSS 修改会实时应用，无需重新加载页面。

更多信息：

您能详细说明一下吗？您是让我们发挥创意并提出其他想法，还是为您编写 CSS？

2 个赞