Rauno's Field Notes #2

# 2 来源：https://rauno.me/notes/2 Rauno 现场笔记 \#2 ### Vercel 项目卡片 我首先调整了内边距和合并信息，以减少每张卡片占用的垂直空间。部分数据也被省略了，例如我们发现项目分支通常都是 "main"，无需在卡片上显示。 理解这一点很重要：在此视图中，卡片占据了屏幕的大量空间。当卡片上的行数更少、信息紧凑精炼时，更容易快速浏览。 以下是更改前后的对比。我们甚至在网格中多获得了一行。 ### 上下文菜单 另一个改动是项目卡片快捷菜单。我们仍在通过功能标志测试这一更改。起初，这似乎只是清理卡片，因为 `···` 按钮重复出现了很多次。 后来我们意识到，未来我们想更多地使用上下文菜单，因为它们相比显式的 24×24 控件有明显优势——你可以从表面的任何位置激活上下文菜单。当然，在可发现性和学习曲线等方面存在一个小问题，等等等等……但像 Linear 这样的应用做到了，所以 ̄\\\_\(ツ\)\_/ ̄ 我们针对上下文菜单可发现性的缓解措施是，在详情视图中将这些相同的操作放在一个常规的下拉菜单里。这样没有人会错过任何功能，上下文菜单只是一个快捷方式。 ### 组件 后来我开始思考……项目包含丰富的元数据，但我们在卡片上只显示了真实体验评分 (https://vercel.com/docs/speed-insights/metrics)。 每个人使用仪表盘都有不同的洞察需求。更注重安全的用户可能希望随时关注防火墙状态等。 我们能否让这个区域更动态、更可定制？ 一些显而易见的想法包括：包含其他页面性能指标如 LCP、Web 分析指标或与项目相关的告警等。 与 @merycodes (https://x.com/merycodes) 一起，我们尝试了多种不同形式的组件，但似乎都不太合适。 我们试图找到组件的布局和视觉形态。它似乎很难很好地适应那个小角落，无论是否有背景。我们也很快意识到，不同的组件之间应该在视觉上是不同的 "角色"，而不仅仅是通过文本或颜色来区分。这样更容易快速扫描。 当我们使用两行而不是一行时，问题迎刃而解。现在，我们不太可能与左侧的标签冲突，并且有了更合理的空间来操作。 右侧角落变成了一个类似矩形的小区域，与其他元素一起，紧凑且令人满意，而不是漂浮无依或缺乏相对对齐。 从那以后，我们有了一个可以遵循的模式，不再陷入创意困境。剩下的只是制作各种不同的组件。 最后，我们对 "组件切换器" 进行了一些迭代，这并不复杂。 实际上，我们只是在菜单是否应该包含数据这一问题上反复讨论。我们认为这会有帮助，因为这样你可以通过菜单预览其他组件的数据，而无需更改项目卡片组件本身。 当项目没有数据时，组件切换器能提供平台功能的有用概览，甚至帮助你启用它们。