# 为类别和聊天提及添加颜色和子类别样式
**URL:** https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643
**Category:** UX
**Tags:** hashtag-autocomplete
**Created:** [2022 年12 月 14 日 00:33 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643 "2022-12-14T00:33:10Z")
**Posts on this page:** 20
**Page:** 1
### 作者：  [@not-ethan](https://meta.discourse.org/u/not-ethan)
#### 发布日期： [2022 年12 月 14 日 00:33 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/1 "2022-12-14T00:33:10Z")
我喜欢它。但我希望类别在键入时能在图标中显示颜色，并且有一种方法可以表示它是子类别，在键入和最终帖子中都像以前一样显示根类别和子类别。
---
### 作者：  [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2022 年12 月 14 日 01:01 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/2 "2022-12-14T01:01:18Z")
我非常喜欢使用类别颜色的想法！
* * *
至于图标，我们是否可以像在设置中选择的类别设计（带框、项目符号、条形图等）一样，而不是使用文件夹图标？
我明天会尝试做一个模型。
---
### 作者：  [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2022 年12 月 14 日 13:39 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/3 "2022-12-14T13:39:35Z")
> [@Canapin](#):
>
> 我明天会试着做一个模型。
1. 项目符号
2. 框式
3. 带子类别的栏
我对每个样式都使用了类别选择器的 HTML 代码，并做了一些修改（边距等 + 此主题中引入的浅色圆角背景）。
---
### 作者：  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### 发布日期： [2022 年12 月 14 日 19:23 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/4 "2022-12-14T19:23:50Z")
是的，我认为我们肯定会以某种方式添加类别颜色。一开始保持单色可以简化一些围绕初始实现的问题，但颜色一直是与类别相关联的东西……
与其支持替代的类别样式，不如考虑将这些选项移至独立的“主题组件”，并将默认的 `bullet` 样式作为唯一的类别样式。这样也会简化很多。
我想就如何设置子类别关联图标的样式征求更多反馈……将子类别颜色拆分扩展到其他图标是否合理？例如，与子类别关联的聊天频道提及可能看起来像这样：
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年12 月 14 日 20:06 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/5 "2022-12-14T20:06:21Z")
在这种情况下，是否有必要拆分类别和子类别？它们只是样式化的链接，仅此而已。试图记住所有可能的颜色对以及哪种属于哪种可能过于压倒性，并且没有提供任何信息价值。
那些条形图无论如何都很小，添加更多小的细节和彩色斑点会让一切……显得杂乱无章。
无论如何，但希望单色总会是一个选项 😉
---
### 作者：  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### 发布日期： [2022 年12 月 14 日 20:22 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/6 "2022-12-14T20:22:57Z")
> [@Jagster](#):
>
> 试图记住所有可能的颜色组合以及它们分别属于哪里，可能太令人不知所措了
我自己不认识所有的类别颜色，但我熟悉我经常使用的类别的颜色，这使得从列表中挑选它们稍微容易一些。
> [@Jagster](#):
>
> 没有任何信息价值。
我认为“这是一个子类别”是有价值的。也有一些情况，一个网站有多个同名的子类别，在这种情况下，颜色可以作为提及的最明显的区分。它肯定会增加一些噪音，我相信人们对信号：噪音比有不同的偏好。
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年12 月 14 日 22:49 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/7 "2022-12-14T22:49:06Z")
我们之前不知道链接是导向类别还是子类别。我知道——过去的事情并不是现在做得更好的理由，但是……那真的是个让某人生活更艰难的问题吗？ 😉
我只是不明白为什么直接链接到子类别需要某种标记来表明它是未知类别的子类别（我的意思是，除了使用相同的名称之外；如果用户必须理解颜色编码，那将是用户界面/用户体验/逻辑以及其他几个设计错误 🙃）。它毕竟只是一个链接。
不过，这对我来说不是什么大问题。但我喜欢它现在的样子，而且——再说一遍——如果我能选择极简的单色版本，我就是一个完全快乐的小管理员 🤣
---
### 作者：  [@\_diondiondion](https://meta.discourse.org/u/_diondiondion)
#### 发布日期： [2022 年12 月 15 日 01:11 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/8 "2022-12-15T01:11:04Z")
就我而言，你可以叫我老派，但对我来说，新设计缺少了#作为我正在查看内容的清晰标识。#是一种显而易见的方法，可以教人们如何自己创建这样的链接，而你却将其移除，并用一个图标替换它，这个图标更多地告诉你目标是什么，但关于链接的性质却很少。
我建议保留#，并将图标添加到标签的末尾。这样你就可以增强它们，而不会模糊它们。
---
### 作者：  [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2022 年12 月 15 日 12:04 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/9 "2022-12-15T12:04:10Z")
> [@awesomerobot](#):
>
> 与其支持备用类别样式，不如考虑将这些选项移至独立的 theme components，并仅将默认的 `bullet` 样式作为唯一的类别样式。这样也能大大简化工作。
我喜欢这个主意！我个人最喜欢 bullet 样式。
对于像正方形这样简单的形状，双色图标不是问题，但它可能会稍微影响诸如 bubble 图标之类的可读性……虽然不是 100% 确定。它_看起来_有点奇怪，但也许只是我还不习惯。
另外，像默认 staff 类别那样的特定图标的类别怎么办？它们也会显示吗？
> [@\_diondiondion](#):
>
> 我会保留 #，然后将图标添加到 # 的末尾。这样你就可以增强它们而不会遮挡它们。
在我看来，这对于标签来说是合理的。`#` 在几乎所有社交平台上都被广泛使用。
我甚至在正在开发的三个论坛上定制了标签来实现这一点。所有标签在帖子中链接时都以 `#` 作为前缀。
但对于类别链接来说，这看起来有点不对劲。
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年12 月 15 日 13:17 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/10 "2022-12-15T13:17:03Z")
> [@Canapin](#):
>
> `#` 几乎在所有社交平台上都被广泛使用
在我看来，这才是如今不应该使用 `#` 的主要原因。社交方面并不将标签用作标记，而是用作一些奇怪的简短笑话。如果我们引入标签的使用方式，就像它们应该被 `#` 标记一样，那么我们就发出了一个强烈的信号，即标签的使用方式应该和 Instagram 上发生的那样。然后，我们就必须教会用户两件事，而不是一件事：什么是标签， **以及** 如何不使用它们。
再说一遍——如果有人想使用 `#`、颜色、图标或闪烁的 GIF，我不在乎，只要所有这些选项都是管理员可以选择的，而不是强制使用的。
---
### 作者：  [@hellekin](https://meta.discourse.org/u/hellekin)
#### 发布日期： [2022 年12 月 20 日 17:50 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/11 "2022-12-20T17:50:27Z")
> [@awesomerobot](#):
>
> 如何为与子类别关联的图标设置样式…
我认为颜色区分对某些人来说是可行的。
请不要使用 🏷 图标，因为它会使标签和类别容易混淆。
那我们用 `[> subcat]` 怎么样？ `>` 看起来像 fancy Emacs 或 Shell powerlines 中使用的箭头。
---
### 作者：  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### 发布日期： [2022 年12 月 20 日 18:06 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/12 "2022-12-20T18:06:31Z")
> [@hellekin](#):
>
> 请不要使用 🏷 图标，因为它会使标签和类别之间的混淆变得过于容易。
有什么建议可以提供一个不那么令人困惑的替代方案吗？我们一直认为标签图标将是最明显的标签图标……如果我们不再将 `#` 用于聊天频道，那么它是否可以作为替代方案？……但我们的标签不像其他平台上的 #hashtags 那样工作……如果我们为类别添加颜色，那么标签图标是否还会那么令人困惑？
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年12 月 20 日 18:46 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/14 "2022-12-20T18:46:29Z")
再次……最明显的解决方案是保持现状。让管理员按原样使用 CSS……随心所欲地更改外观和感觉。
所有这些只需要精心设计的 CSS 来提供轻松的自定义。那样每个人都会满意（除了用户，但谁会问他们想要什么 ;)）。
---
### 作者：  [@hellekin](https://meta.discourse.org/u/hellekin)
#### 发布日期： [2022 年12 月 20 日 19:16 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/15 "2022-12-20T19:16:37Z")
> [@awesomerobot](#):
>
> 标签图标将是最明显的标签图标……
确实如此，我赞同，但子类别不适用。
---
### 作者：  [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2022 年12 月 20 日 19:26 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/16 "2022-12-20T19:26:28Z")
> [@awesomerobot](#):
>
> 有什么建议可以提供一个不那么令人困惑的替代方案吗？
我喜欢在帖子中添加彩色项目符号样式的类别提及的想法，并且我完全赞同你的感受：
> [@awesomerobot](#):
>
> 我自己并不认识所有的类别颜色，但我熟悉我经常使用的类别的颜色，这使得从列表中挑选它们稍微容易一些。
子类别可能“是”子类别，但根据设计，它们 **是** 类别，在这方面，我认为它们应该继承主类别的提及设计。 🤷
就像 @hellekin 一样，我不希望它们被样式化，好像它们与类别不同，例如前面加上一个 🏷 图标。
双色图标毕竟可能效果很好（而且对于不喜欢它的人来说，可以用 CSS 轻松隐藏它们——反之则更复杂）。
据我所知，多年来在帖子外部使用双色项目符号一直没有引起任何抱怨。
我唯一担心的是，聊天的双色气泡图标提及一开始可能看起来有点奇怪，但这种感觉目前没有现实依据，尤其是我想到已经广泛使用的双色项目符号时。 🤔
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年12 月 20 日 19:37 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/17 "2022-12-20T19:37:20Z")
> [@Canapin](#):
>
> 多年来，帖子外部一直使用双色项目符号，据我所知，从未有人抱怨。
也许是因为那些毫无价值，而且很少显示给用户？
您现在是建议提供两个选项：彩色编码或什么都没有？
我仍然很难理解这对读者有什么价值，因为它实际上隐藏了目标——读者 **必须** 知道颜色与类别相同，读者 **必须** 知道哪种颜色与哪个类别相关。即使那样……用户能得到什么好处呢？
抱歉，但这同样违反了所有用户体验规则。
---
### 作者：  [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2022 年12 月 20 日 19:42 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/18 "2022-12-20T19:42:17Z")
> [@Jagster](#):
>
> 您现在是建议提供两种选项：带颜色编码或什么都没有？
关于这类话题，总会有一个滑坡，变成关于“自行车棚”的讨论。我对用户体验（UX）一无所知。
我是 Discourse 论坛的管理员和 Discourse 论坛用户，但我习惯于处理 IT/网络方面的事情，我的观点不一定反映对社区最有利的东西。我在这里分享我的感受，而不是事实（最好需要数据支持）。🙂
---
### 作者：  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### 发布日期： [2022 年12 月 20 日 20:54 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/19 "2022-12-20T20:54:32Z")
> [@Jagster](#):
>
> 读者 **必须** 知道颜色代表类别，并且读者 **必须** 知道哪种颜色与哪个类别相关联
我认为读者在过程中会直观地理解，尤其是因为每个主题的顶部很可能都会有一个彩色的框。作者只需输入 `#`，也不需要知道。
我相当喜欢摆脱为多个事物显示哈希符号的想法，并且可能会投票赞成上述提案——一个/两个颜色的（类别）框和聊天图标，单色标签图标。不过，双色聊天图标需要一些时间来适应。
---
### 作者：  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### 发布日期： [2022 年12 月 20 日 23:08 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/20 "2022-12-20T23:08:35Z")
> [@Jagster](#):
>
> 并让管理员使用 CSS 来创建……随心所欲地改变外观。
大多数管理员根本不知道那也是可能的。
> [@Canapin](#):
>
> 子类别可能是“子”，但它们 **在设计上** 是类别
是的。我认为你不应该区别对待它们（而且还有鲜为人知的子子类别）。
---
### 作者：  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### 发布日期： [2022 年12 月 20 日 23:47 UTC](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643/21 "2022-12-20T23:47:44Z")
> [@Canapin](#):
>
> 我不希望它们被样式化，就好像它们与类别不同，例如前面有一个 🏷 图标。
哦，我明白了，我误解了！如果它不清楚，我们绝对不会为子类别使用标签图标！标签只对标签有意义。
[下一页](https://meta.discourse.org/t/add-color-and-subcategory-styling-to-category-and-chat-mentions/249643.md?page=2)