用户卡片重新设计实验

功能
1

今天，我们在元论坛上安装了新版本的用户卡片。我们这样做是为了收集您的反馈，看看哪些有效/无效。

新版本

image
image1096×780 117 KB

更新

  • 用户标题背景
    • 我们将用户背景移至标题图像，而不是卡片的背景图像。
    • 如果用户未设置背景图像，我们将使用其头像的颜色来创建标题图像。
    • 将徽章移至新用户卡的顶部“横幅图像”区域。
    • 也将用户位置移至“横幅图像”。
  • 重新设计了用户统计信息
  • 将用户状态移至头像图标，而不是完整的描述。
  • 将操作按钮移至卡片底部。
  • 允许位置链接到 Google Maps 或 OpenStreetMap。

旧版本供参考

image
image1330×808 136 KB

与任何实验一样，我认为此新用户卡可能会出现一些问题。

请使用此主题报告视觉/功能性错误以及您对卡片本身的看法。

仅供参考，随着错误的修复，我将删除报告错误的帖子，以减少需要整理的内容量 :smile:

在您自己的论坛上使用

如上所述，这仍然是一个实验。我们不打算将其作为主题组件长期支持，因为长期目标是将其作为新的用户卡集成到核心中。话虽如此，如果您希望现在在您的论坛上使用它，可以通过以下方式安装：-> GitHub - discourse/experimental-usercard

55 个赞
9

只是好奇……

如果“关于我”是不必要的，那么为什么还要显示积分、阅读时间和最奇怪的东西 :wink: 、蛋糕日呢？

编辑：关于我在这里可见，但在我的论坛上却不可见……更奇怪了。

6 个赞
10

我同意“蛋糕日”是一个奇怪的话语概念。我更喜欢“会员自…”。

但所有这些信息都有助于判断你正在打交道的人。

8 个赞
14

太棒了，看起来很棒！ :slight_smile:

image
image487×459 64.1 KB

我只有一些关于 Locations 插件 的小问题：

  • 位置显示在图钉下方一行。
  • 我还看到了两个不同布局的网站 URL。几周前也是这样，并且被 @merefield 修复了——但在旧的用户卡片上有两个网站但没有位置。
7 个赞
20

也许可以给用户一个选项，让他们上传单独的暗模式图片，就像我们在类别等中那样。

4 个赞
21

我们可以尝试移除头像的图片元素的背景色吗？那些特意使用透明 PNG 背景的用户头像现在看起来更糟了。

用户卡片的背景/头部图片的高度不到我们之前的一半，我想知道我们是否可以给它多一点 :thinking:

总的来说，工作很出色，看起来非常流畅。

9 个赞
22

在带有字体的模板中，用户卡片实验没有像 Minima 那样的用户卡片字体。
示例：

image
image1366×768 112 KB

8 个赞
24

太好了，期待重新设计！:star2:

我希望看到的一个不同之处是页眉。我甚至觉得它现在有点可悲：

image

放置背景图片感觉不太原创，也不支持社区功能。位置标签感觉有点像文件上的标签。徽章被最小化并放在角落里。

我喜欢徽章，根据我的经验，许多社区经理喜欢围绕徽章发挥创意。我希望徽章能得到更多庆祝，而不是在新卡片上被最小化！你知道，就像这样：

Member Card
Member Card518×373 63.3 KB

18 个赞
28

我认为类似这样的东西可以作为一种设置，我个人更喜欢只有 3 个。

3 个赞
30

Might be worth adding some custom CSS to your site to address this. Since this isnt an official discourse plugin, I’m not sure I would add css to support this as this will possibly be merged into core eventually.

1 个赞
32

抱歉，我有点负面，尤其是我没有太多改进建议，但老实说，我的第一印象是想直接说“呃，真难看，这是个bug吗？”。这并不意味着我是对的，这并不意味着这些对其他人来说不是一种改进，但对我来说，旧的用户卡片非常漂亮、简单，是我不会去改变的。

也许我会慢慢习惯它？

要点：

  1. 徽章对于资格认证非常有用，应该放在用户卡片上——没有什么比“到目前为止我做出了这些贡献”更能说明“我是谁”了。我猜它们现在在右上角，但我是在查看了几张用户卡片后才发现的。
  2. “已发布”、“赞”、“解决方案”等的标签式框框太吸引我了。也许也是因为粗体字体？我喜欢之前用户卡片中这些信息的微妙之处。为什么？因为我并不真正关心它。
  3. 蛋糕日（cakeday）方面也属于“不关心”的范畴。它很有趣也很好，但当我想要了解更多关于某个用户的信息时，这真的是我想了解的关于他们的四件最重要的事情之一吗？可能不是。

我会把蛋糕日换到右上角，并将徽章移回一整行或两行，并显示特色徽章的全称。大多数用户不知道图标的含义，需要文字说明。这进一步宣传了可用的徽章，激发了一些用户的好奇心，让他们想为获得别人用户卡片上看到的某个徽章而贡献更多。

6 个赞
38

我知道我遇到的问题是由 Locations 插件引起的。我在这里提出这个问题是因为这个插件似乎非常普遍。另外，我认为 CSS 或代码调整需要在插件中完成，而不是在 Discourse 核心中，至少主要是这样。我希望维护 Locations 插件的人员会对此进行研究。老实说，如果新的用户卡成为核心功能，他们或多或少必须这样做。 :wink:

我只是想在这里的主题中向大家说明我遇到的问题。

3 个赞
40

又发现了一些小问题，这次是关于闪烁动画的。
首先，它们的周期都不同。如果断开 Wi-Fi 连接然后点击一张卡片，就能最好地看到这一点：

而且，它停止得太早了：

image
image1284×1242 93.9 KB

图片还没有加载出来，动画就已经停止了。

2 个赞
43

我が表示バッジ名になった！
サイドバーのように、ユーザーが参加データ、最終ログイン日時などを設定できるようにすると良いと思います。

2 个赞
46

我更喜欢极简主义的方法，还有一个主要问题没有直接的答案：

用户卡片的概念仅仅是一个没有实际用途的装饰元素吗？我估计大多数用户只是用它来发送私人消息或打开聊天频道。那么……我们是不是应该进一步简化它，而不是增加可见元素？

管理员/版主的需要是完全不同的领域。

6 个赞
47

将主要用户详细信息集中在一个位置，而不是分散在卡片的各个位置，这样也可能更好：

Member Cards stats
Member Cards stats1656×413 146 KB

如果进行大修，我认为这是一个移除徽章中信任级别信息的绝佳机会。它们不是徽章，而是群组成员资格，表明论坛上的权限和访问权限。

5 个赞
48

我不确定发生了什么，但它在我的网站上看起来很糟糕。丢失了很多信息。我尝试在没有任何其他 CSS 的情况下进行此操作，结果看起来是这样的。也许是插件冲突，或者还有其他问题？

新的：

CleanShot 2023-02-09 at 17.09.21@2x
CleanShot 2023-02-09 at 17.09.21@2x974×438 81.3 KB

旧的：

CleanShot 2023-02-09 at 17.09.39@2x
CleanShot 2023-02-09 at 17.09.39@2x1174×772 142 KB

6 个赞
49

感觉有些不对劲，您能尝试在安全模式下运行吗？也许您的主题也在进行更改？

5 个赞
50

这是官方插件导致的问题，但不确定是哪一个。我首先禁用了非官方插件，看起来还是一样，但禁用所有插件后就能正常工作了。这是控制台中的错误：

CleanShot 2023-02-09 at 18.01.27@2x
CleanShot 2023-02-09 at 18.01.27@2x1848×1136 306 KB

编辑：我所有的官方插件

          - git clone https://github.com/discourse/discourse-chat.git
          - git clone https://github.com/discourse/discourse-user-notes.git
          - git clone https://github.com/discourse/discourse-reactions.git
          - git clone https://github.com/discourse/discourse-calendar.git
          - git clone https://github.com/discourse/discourse-adplugin.git
          - git clone https://github.com/discourse/discourse-whos-online.git
          - git clone https://github.com/discourse/discourse-canned-replies.git
          - git clone https://github.com/discourse/discourse-follow.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-gamification.git
          - git clone https://github.com/discourse/discourse-templates.git
          - git clone https://github.com/discourse/discourse-automation.git
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git --branch fa5
          - git clone https://github.com/discourse/discourse-spoiler-alert.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
6 个赞