Rauno的现场笔记 #2 Vercel项目卡片 我开始调整填充和共同位置信息，以减少每个卡片占据的垂直空间。有些数据也被省略了，例如我们意识到没有必要在卡片上显示项目分支，通常它总是“main”。重要的是要理解，在这个视图中，这些卡片占据了屏幕上很大的空间。当卡片上的行数较少、信息紧凑简洁时，更容易消化卡片。以下是更改前后的对比。我们甚至在网格中获得了额外的一行。 上下文菜单 我们做出的另一个改变是项目卡片快捷菜单。我们仍在通过功能标志测试这个变化。起初，我们认为这只是简化卡片，因为···按钮重复得太多。后来我们意识到，我们希望在未来更多地使用上下文菜单，因为它们在使用上明显优于24×24的显式控件，因为你可以从表面上的任何地方激活上下文菜单。当然，对于可用性和学习曲线等问题有一些小的疑虑……但是像Linear这样的应用程序做得很好，所以¯\_(ツ)_/¯ 我们对上下文菜单可发现性的缓解措施是将相同的操作放在详细视图中，后面有常规下拉菜单。这样没人会错过任何事情，上下文菜单只是一个快捷方式。小部件 后来我开始思考……项目富含元数据，但我们在卡片上仅显示真实体验分数。每个人使用仪表板来获取不同的见解。更关注安全的用户可能想时刻关注防火墙状态等……我们能否让这个区域更加动态和自定义？一些显而易见的想法是包括其他页面性能见解，比如LCP、网络分析指标或与项目相关的警报等等……与@merycodes我们尝试了不同形式的小部件，但似乎没有合适的。我们试图寻找小部件的布局和视觉形式。似乎无论有背景还是没有背景，它都不太适合那个小角落。我们很快意识到，让小部件在视觉上彼此独特的“角色”而不仅仅通过文本或颜色区分是很有用的。这使得它们更易于快速浏览。我们的突破在于使用两行而不是一行。现在我们不太可能与左侧的标签发生冲突，并且有了更合理的空间来工作。右上角变成了这个小长方形区域，和其他区域一起，满足地紧凑，而不是漂浮而没有目的或与其他任何东西相对齐。从那时起，我们有了遵循的模式，我们不再在创造性上陷入困境。现在只需制作各种小部件。最后，我们对“小部件切换器”进行了几次修改，实则并不复杂。我们真的只是来回考虑菜单是否应该包含数据。我们认为这会很有帮助，因为这样你可以使用菜单预览其他小部件的数据，而不需更改项目卡片小部件本身。当项目没有数据时，小部件切换器提供对平台功能的有用概述，甚至帮助你启用它们。