Vercel 卡片重构:细节决定体验

Rauno's Field Notes #2

Vercel 卡片重构:细节决定体验

我最近对 Vercel 的项目卡片进行了深度优化。首先通过精简 padding 和隐藏冗余的 branch 信息,让卡片在网格中多容纳了一行,信息密度显著提升。接着,我们将传统的按钮改为上下文菜单(Context menu),虽然增加了学习成本,但能更灵活地激活操作,Linear 的成功案例也证明了这一点。最关键的突破在于 Widgets 的设计:从最初尝试各种布局却显得杂乱无章,到最终采用双行布局,让每个小部件都成为视觉上独特的“角色”,既避免了与左侧标签冲突,又让右上角区域变得紧凑有序。这一系列改动不仅让界面更清爽,也让数据预览和平台功能引导变得更加自然。

我们很快意识到,让每个小部件在视觉上成为彼此独特的“角色”,而不仅仅是靠文字或颜色区分,会让它们更容易被快速扫描。

同日更多故事

2026-07-25