一次从玩家反馈开始的改版

在PG模拟器的内容中心，产品设计师林昭远有一个习惯：每周翻一遍访客留言。去年冬天，一条留言让他停了很久——“页面挺好看，但找某个模拟项目要来回翻，眼睛累。”这条留言后来成了新版界面重构的起点。林昭远带着三人小组，把PG模拟器现有的栏目结构重新画在白板上，先做减法，再做加法。

减法的核心是导航。旧版导航条目分散，访客在PG模拟器里切换栏目时容易迷失。新版把所有入口收进一条吸顶导航，当前栏目用蓝色下划线标示，位置一目了然。林昭远说，这个改动看起来小，却让页面停留时长有了明显变化，因为访客不再需要反复确认自己在哪一层。

卡片悬浮的那六像素

新版PG模拟器大量使用圆角卡片，鼠标悬停时卡片上浮六像素，阴影加深。这个数值不是随手定的。前端工程师周予安在实现时试过三像素、六像素、十像素三档，最后选了六像素——三像素太弱，访客几乎察觉不到；十像素又太跳，像在页面上弹了一下。六像素刚好让手指和视线都觉得“被回应了”。

周予安还提到一个细节：卡片上浮时，下方内容的位移必须为零。早期版本里，悬浮动画会带动整行卡片轻微抖动，测试时被林昭远一眼挑出。后来改成只对单张卡片做变换，问题才消失。这类打磨在PG模拟器的改版清单上占了将近三分之一的工作量。

移动端折叠菜单的取舍

屏幕宽度小于七百六十八像素时，PG模拟器的八项导航会折叠成一个菜单按钮。负责响应式适配的工程师宋知遥说，折叠本身不难，难的是折叠后如何保留栏目层级感。团队最终选择让菜单全屏展开，条目纵向排列，当前栏目仍然带蓝色下划线，访客点开就知道自己在哪个位置。

  • 导航折叠后保留搜索入口，避免访客为找内容退出菜单。
  • 多列网格在窄屏下降级为单列或双列，卡片间距同步收紧。
  • 底部四列链接在窄屏下改为两列，版权信息保持居中。

宋知遥还分享了一个小插曲：测试阶段，有访客在手机上误触菜单外的区域，菜单没有关闭，导致他以为页面卡住了。团队随后补上了点击遮罩关闭的逻辑。这个改动没有写进更新说明，却让不少访客的反馈从“有点别扭”变成了“顺手”。

界面之外的那条线

林昭远反复强调，界面重构不是为了好看，而是为了让访客更快进入模拟体验本身。PG模拟器的栏目结构、卡片层级、按钮位置，最终都指向同一件事：减少寻找成本，把时间留给试玩。他说，下一轮改版已经在排期，重点会放在资讯列表的阅读节奏上，让长文和短讯在同一个栏目里各有各的位置。

对内容中心来说，这次改版留下的不只是一套新样式，还有一条被验证过的工作线：先听访客怎么说，再决定改哪里。PG模拟器的每一次界面调整，都沿着这条线往前走。