UI一目了然地标记年龄的东西

Question

我有一个用于预订演艺人员的网络应用程序。我想一眼就看到自我预订以来已经有多长时间了。目前，我使用彩色标签。

• 将来预订的表演者：绿色
• 最近预订的表演者：淡蓝色
• 很久以前预订的表演者：深蓝色
• 表演者从未预订过：黑色

是否有一种典型的方式来标记可能比这更好的东西？这有点奇怪。当我分发这个应用程序时，我希望用户能够立即清楚地看到他们看到表演者多久以前被预订的直观表示。

Answer 1

我发现很多人都在争夺用户的注意力，所以也许你可以减少整体视觉重量。

我要调查的一些事情：

• 根据预订日期对列表进行排序
• 对列表进行分组
• 将不同预订状态的数量减少到2或3
• 用两种不同的显示样式替换标签：与用户相关占用更多空间（未来和最近预订），其余显示折叠视图

一般来说，通过留下东西而不是添加更多样式来修复破坏的UI，可以更好地改进UI。您选择的内容取决于您的用例的优先级。

与您的问题没有直接关系，可用按钮，灰色类别标签和明亮的预订标签由于缺乏对比而几乎无法辨认。

您的应用程序一切顺利：）

Answer 2

虽然我同意之前的海报总体上有很多竞争，但我想就你的日期和标签问题给你一个想法：

总体而言，使用彩色标签，您将有四种不同的颜色块竞争 - ＆gt;标签，编辑，可用性和这个新的预订状态之一。因此，您可以考虑使用带有文字的图标，从而消除颜色。

为了简单起见，我使用下面的FontAwesome代码（https://fontawesome.com/cheatsheet?from=io），但大多数图标集应具有可比较的代码。

• 未来：[fa-calendar-plus] 1个月

• 最近：[fa-check-square]或[fa-clock] 2天前

• 过去：[fa-calendar-check] 02/2018

• 预订表演者永远不需要标签，因为这是唯一的例外情况，并不涉及任何形式的预订。

旁注： - 或许可以考虑减少每条线上的心脏/块的数量，或者使用一颗带有不同填充物的心脏。我认为这可能是你“混乱”的罪魁祸首。