我们的网站酷似操作系统

为了解决在浏览大型技术网站时，因打开过多外观相同的标签页而导致内容难以区分的问题，PostHog.com 对其网站进行了重新设计。新网站模仿操作系统的界面，支持多任务处理、窗口管理和键盘快捷键，旨在挑战传统的网站设计模式，提供一种更高效、更具互动性的内容消费体验，尽管这种设计初期可能会让用户感到不适应。

传统网站设计的问题

许多大型技术网站都存在一个普遍问题：当用户为了参考不同页面而打开多个标签页时，会发现所有标签页都使用相同的网站图标，导致难以区分。随着 PostHog 网站内容的增长，这个问题也日益凸显。

传统的网站设计模式也受到了质疑：

• 无尽的滚动： 鼓励用户不断向下滑动页面，但目的仅仅是到达页面底部。
• 巨大的页脚： 占据大量屏幕空间，但实际效用有限。
• 过度的留白： 页面充斥着大量空白区域，降低了信息密度。

我们为什么要这样做？我们为什么不创造更好的内容消费方式呢？

一种全新的解决方案：网站即操作系统

新版 PostHog.com 的核心理念是提供一个类似操作系统的浏览环境。用户可以同时处理多项任务，比如并排打开几篇文章并随意移动它们。

新网站的核心功能包括：

• 窗口吸附： 像在桌面操作系统中一样，可以将窗口拖动到屏幕边缘进行自动排列。
• 键盘快捷键： 提供高效导航和操作的快捷方式。
• 书签应用： 用于保存和管理感兴趣的内容。

这种设计让用户可以在阅读技术文章的同时，在角落里观看产品演示视频，甚至玩内置的游戏。

从不适应到爱不释手

对于习惯了传统网页浏览模式的用户来说，一个类似操作系统的网站界面在初次使用时可能会带来强烈的陌生感。大脑期望在浏览器中看到熟悉的模式，当预期落空时，会产生抵触情绪。

然而，随着使用时间的增加，这种设计逐渐显示出其优势。无论是开发者自己还是公司同事，都经历了从不适应到偏爱的转变，最终发现自己再也无法回到过去的使用方式。

网站中融入了大量复古和有趣的元素，以增强互动性：

• 一个模仿 Windows 文件资源管理器的界面，同时也是周边商店。
• 产品页面设计得像 PowerPoint 演示文稿。
• 一个可以实际编辑内容的文档编辑器。
• 论坛的外观仿佛在使用 Outlook Express 阅读新闻组。
• 一个模仿 QuickTime 的播放器。

背后的技术实现

为了在五年积累的内容基础上构建一个可扩展的未来架构，设计中包含了一些关键的技术亮点。

• 内容与视觉分离：

  所有产品页面都由 JSON 文件驱动。这意味着页面布局、内容呈现方式、功能对比图表等都由 JSON 文件定义，而不是硬编码在页面中。这种方式最终将实现网站与 App 使用同一数据源。

• 灵活的主题与配色方案：

  系统地管理了浅色、深色模式以及多种强调色（主色、次色、三级色）之间的协调，确保它们能够和谐共存。

• 集中的客户引用数据库：

  创建了一个单一的客户记录代码库。每条记录包含客户使用的产品、针对具体产品的评价、以及适配深浅模式的 SVG 公司标志。这使得任何评价都可以被动态地、有针对性地展示在任何产品页面上，无需手动添加。

在真实环境中原型设计

整个网站的开发过程是在一个接近生产的环境中完成的，直接使用 Typescript 和 Tailwind 进行界面构建和设计。这种在真实代码中进行原型设计的方法，催生了许多在传统模型稿阶段不会想到的功能和想法。

目前发布的版本只是一个早期的最小可行产品 (MVP)，未来还有很大的改进空间。但它代表了一种对更好内容消费体验的探索。