it-swarm.cn

如何优化StackExchange网站右栏中的标记所使用的空间?

关于StackExchange UI网站应该是什么样的元问题 中,我正在研究(阅读:弄乱)该网站的设计。我正在使用基于Web的工具来编辑页面的CSS,这使我有很大的自由来更改内容,同时将我限制在服务器提供的可用HTML范围内。

在更改和重新组织事物(主要是字体和视觉重量等元素)时,我意识到,几乎每个StackExchange网站上显示的右手栏效率都非常低。这是元网站上的外观:

How the tags look on beta sites

标签(及下方的徽章)是水平方向上比垂直方向上长的小物体。每个都有几个属性:

  • 对象名称
  • 标签被授予次数或徽章被分配给成员的次数
  • 增强对象概念的视觉元素
  • 不同的水平宽度,取决于名称的长度

现在,事情的组织方式非常低效:

  • 尽管不需要整个水平宽度,但每个标签/徽章都占用一行空间。
  • 该页面上的标签和徽章视觉效果不足。尽管标签和徽章设计为可以自己显示,例如问题上的标签或成员个人资料上的徽章,但在这些情况下,它们会附带元数据:标签被应用的次数或成员徽章被授予。但是视觉表示仍然假定通用应用。
  • 在大多数StackExchange网站上,这些元素具有很强的边界,当它们位于一条线上时,会在每个元素之间创建很多尴尬的负空间。

我的重新设计 中,我已采取措施降低标签的强度(尚未处理过徽章)以减少视觉干扰,但是我没有想出一种好的方法来表示标签结合尚未应用的次数。我有一些想法,但是没有一个感觉正确:

  • 在标签云中渲染它们。这将使用更多的水平空间和更少的垂直空间。但是,标签云大部分是可扫描的,而且不清晰。不确定这是否是一个问题。
  • 考虑将标记与应用程序数量结合使用的新视觉表示形式。通过在标签中包含数字,也许:<讨论] x14将变成<讨论| 14]。或者,通过增加标签元素的高度,并在名称下方放置“ 14”。总体上,这将占用更多的垂直空间,但每行上允许多个标签。
  • 删除对特定数量应用程序的引用,而是使用视觉隐喻来指示应用次数。也许使用温度计调色板:“热”标签可能会更红,而冷标签可能会更蓝。但是,这对于新用户而言不会立即显现出来。
  • 删除对特定数量的应用程序的引用,而是使用宽度来表示热度。标签越宽(在右栏中),它越受欢迎。但是,如上所述,这在开始时会有些混乱。

提问时间:重新设计标签和徽章在右侧栏中的显示方式是一种有效的方法,因为我只能修改CSS且不能篡改HTML?

8
Rahul

努力的荣誉-非常好!

最后,我对列表有一些评论:

  • 我个人觉得标签云不是很有用。
    元素之间的顺序不清楚,通常不容易看出哪个更大,并且您不知道标签的排序方式。
  • 至于您的第二个建议,我可能会有所改善,但感觉也不对-使用宽度,而不是简单地使标签变宽-将它们堆叠起来!
    即只需在每个实例的每个标签右侧显示一个“阴影”。
    alt text
    自然,您将设置一个边界,大于10左右的任何东西都会出现省略号(...)
    如果需要,您可以在堆栈中合并出现的次数,但可能会造成混乱。
7
Dan Barak

也许使用字体大小加权或字体颜色方法?


(来源: ljplus.r

4
Kostya

我认为这个网站上令人生畏的标签列表使我避免了这么长的潜意识,使我感到下意识。我认为将其限制在前十名中,并可以选择查看全部内容,这将使用户快速扫描并在几秒钟内看到它的运行情况。

另外,我永远也无法理解标签的排序方式。在我看来,它们是按右侧的数字而不是按新近度排序的。因此,我认为将数字向左移动并将它们(数字)向右对齐将确定它们是按其排序的。删除重复的“ x”符号和每个标签周围的图形将使列表混乱,并提高可扫描性。

此外,使标签看起来像链接将表示该标签是可单击的,并且会将您带到另一个页面。

enter image description here

4
Denzo

一些想法,更多的是spark其他现成的想法,比其他任何想法:

  • 滑块(标签面板连续淡入和淡出)
  • 标签的股票行情
  • 静态标签图
  • 互动标签图
  • 类似于 Digg Labs 处的可视化效果。
0
Virtuosi Media