BrowseBase 的设计笔记

最近在做的网站：BrowseBase

它是一个极简设计的资源网站，设计参考了 openai.fm 的拟物化风格。灵感来源于一个很细微的体验：每次我打开某个博客链接时，总会有一种"开盲盒"的期待感。但我发现，国内很多资源站做得特别复杂，视觉噪音多、加载缓慢、信息密度堆叠、链接也大多只是一些普通网站。不仅增加了用户的使用负担，审美上也不够克制和统一。

我其实一直觉得，"资源"不一定非得是一个网站，它也可以是一个 YouTube 创作者，或者某个平台上稳定输出优质内容的人。像我在用 YouTube 时就发现，它不像国内平台那样执着于"追新"。它推荐的内容往往是质量高的——哪怕是五年前的视频。 这点很打动我：如今很多产品都在追逐"热"和"新"，却很少沉淀"好"和"久"。不像书籍那样，经过时间筛选后留下的是精品，而不是流量。

为了一块按钮的位置、颜色、逻辑，来来回回改十几遍，最后甚至因为整体不满意，直接删掉重做。改了一版又一版，也终于理解了为什么程序员讨厌产品经理（笑）。

BrowseBase 上线两天后，我把链接发到了 V 站，收到了很多真诚的反馈，产品也因此完善了很多。其实发布前我就已经很纠结，没想到 V 友们也看出了其中的一些小问题：

因为移动端屏幕宽度限制，没法像桌面端那样一次性展示所有分类和合集。我改成了左右滑动方式。但由于组件容器的原因，用户滑动时会出现"空气墙"般的割裂感。 为了缓和这个视觉问题，我在左右两边添加了白色渐变块，看起来还行。

但问题来了：按钮的样式不太美观，和右上角那个按钮视觉风格也不统一。我又尝试做了一个凹陷版本，跟资源卡片一致。把两个版本发到即刻问了问大家，大家普遍更喜欢凹陷的那个。但有朋友指出，选中状态的颜色很突兀——这也确实是个问题。

我试着统一成黑色，跟右上角对齐，结果又跟白色渐变块冲突，效果很糟糕。 原本的目的是弱化滑动时的割裂感，结果反倒把视觉变得更混乱。最后我想了个替代方案：直接移除渐变块，让按钮突破容器边界，穿破边框显示。 干净、直接、视觉上也更统一。

因为每条资源的介绍文字不同，导致每行卡片高度不一致。我不希望强制统一高度——介绍内容多的卡片会拉高整行，让其他卡片显得空；介绍少的则会让整体不平衡、不美观。

我尝试了很多方案。 比如：把翻页按钮放到底部，结果因为"内容决定高度"，每次翻页按钮都在跳动，位置不固定。又不能定高，不然内容不是显示不完整，就是留白过多，视觉也会出问题。 而这还得影响到骨架屏的加载高度，改起来更麻烦。

其实不是我不做原型，而是这个项目的每一个 UI 元素，都是做完才会发现不合适，再去改，再去调。我觉得这是产品设计中不可跳过的一部分。我甚至想过让鼠标 hover 时显示一个提示卡片，把完整内容展示出来，但这不符合 BrowseBase 的拟物化风格：现实生活中的按钮不会突然弹出卡片提示，它应该像一个实体那样存在和响应。

最后我将内容限制在 4 行以内，超出的部分省略；少了也不会因为留白显得太空。当鼠标放上去时，会自动展开剩余内容。 链接按钮也直接取消，整个卡片就作为一个链接。 用户 hover 时卡片会有一个阴影，模拟"手将要触碰"的质感。拟物化的核心不是伪3D或者装饰质感，而是一种"可感知"的交互。这个效果我很满意。

简约 ≠ 简陋。Less is More。

可能有些人不喜欢这种风格，觉得"空"、"冷"、"不好用"，但我觉得这只是审美上的不一致。而提出的问题和建议，只要合理，我都会认真看、认真改。

我不想做一个纯粹堆积链接的工具，而是想打造一个能让人"期待"的资源空间。它安静，但不冷漠；简约，但不简化。