Hacker News 中文摘要

RSS订阅

为何我们的网站设计类似操作系统 -- Why our website looks like an operating system

文章摘要

PostHog网站设计灵感来源于操作系统,旨在解决用户在浏览大型技术网站时因打开多个标签页而导致的混乱问题。通过引入窗口吸附、键盘快捷键和书签应用等功能,用户可以在同一页面内同时打开和操作多个内容,减少不必要的滚动和空白空间,提升内容消费效率。这种设计使用户能够更专注于内容本身,而非页面布局。

文章总结

为什么我们的网站看起来像一个操作系统 - PostHog

许多大型技术网站存在一个常见问题:当用户需要同时参考多个页面时,往往会通过CMD + 点击的方式打开多个标签页,但这些标签页由于共享相同的图标而难以区分。PostHog.com也面临同样的问题,尤其是随着网站从支持少数付费产品扩展到十几个产品。

为了解决页面爆炸的问题,我开始质疑当前营销和文档网站的典型设计模式,如长篇幅滚动、过大的页脚和过多的空白区域。这些设计鼓励用户滚动页面,但仅仅是为了到达页面底部,然后呢?为什么我们不能提供更好的内容消费方式?

这就是新版PostHog.com的核心理念。用户可以在网站上多任务处理,同时打开多篇文章并随意移动它们。网站甚至可能缺乏空白区域,因为用户会因内容的高度参与而减少滚动操作。网站具备窗口吸附、键盘快捷键和书签应用等功能,操作体验如同在浏览器中使用操作系统。

用户可以在阅读最新的产品工程师通讯时,同时在角落观看演示视频,甚至玩“刺猬模式”游戏。虽然最初将操作系统界面应用于网站可能会让人感到不适,但随着使用时间的增加,这种设计逐渐变得令人喜爱,甚至让人无法想象使用其他方式。

在构建网站的过程中,我们融入了许多有趣的元素,如模仿Windows文件浏览器的界面、类似PowerPoint演示的产品页面、可编辑内容的文档编辑器、设计成Outlook Express新闻组的论坛、QuickTime的克隆、以电子表格格式呈现的页面、屏保和桌面背景库,以及大量的键盘快捷键。

此外,我们还解决了如何组织五年内容并使其未来可扩展的技术挑战。例如,我们将视觉层与内容分离,所有产品页面现在都由JSON文件驱动,这意味着JSON决定了页面布局、内容呈现、功能级别的竞争对手比较图表等。我们还创建了一个客户数据库,记录客户使用的产品、特定人员对产品的评价以及适用于亮暗模式的SVG标志。

在构建过程中,我们在TypeScript和Tailwind中设计UI,并在生产环境中进行原型设计,这种方式让我们能够边开发边构思功能。虽然我们仍会使用Balsamiq来完善一些想法,但大部分工作都是在实际开发中完成的。

新版PostHog.com仍处于早期MVP阶段,有许多改进空间。但我们希望用户能享受这个新网站,点击探索,享受乐趣。如果你对网站的技术实现感兴趣,可以阅读更多关于网站如何工作的内容。

评论总结

评论主要围绕以下几个方面展开:

  1. 怀旧与创新

    • 一些评论者认为这种设计唤起了90年代家庭计算的怀旧感,并认为它有趣且有用。
      • "That's so fun! It brings back the excitement and nostalgia of home computing in the 90s." (评论1)
      • "My bank 20 years ago had an “OS like” online banking system. I remember it fondly!" (评论15)
  2. 窗口管理的争议

    • 部分评论者认为这种多窗口界面是反模式,认为浏览器和操作系统的窗口管理已经足够,不需要每个应用都内置自己的窗口管理。
      • "I’ve always thought ‘multi-document interfaces’ as we used to call them are an anti-pattern." (评论2)
      • "This is all the job of the window manager. We need better window managers." (评论14)
  3. 用户体验与性能

    • 一些用户指出界面虽然独特,但性能较差,操作不流畅,且存在一些设计缺陷。
      • "It’s neat but it runs like a dog." (评论10)
      • "Looks neat, but also makes feels really slow in my browser." (评论12)
  4. 营销与实用性

    • 评论者认为这种设计更多是营销手段,虽然吸引眼球,但实际使用中可能不会像描述的那样被广泛采用。
      • "It’s all marketing. But it’s good marketing." (评论5)
      • "But nobody will actually use it the way they describe in this article." (评论4)
  5. SEO与可访问性

    • 有评论者提到这种设计可能对搜索引擎优化(SEO)不友好,且在处理打印或PDF时可能会出现问题。
      • "In the past, this was a big no-no because SEO was important." (评论10)
      • "This works, until you want to print the page and breaks everything." (评论11)
  6. 目标受众与转化率

    • 一些评论者从营销角度质疑这种设计是否有助于提高转化率,认为它可能会让用户难以找到行动号召(CTA)。
      • "My gut is it’ll dramatically hurt. Since the call to action is way more challenging for users to find." (评论28)
      • "Reminds me of Jakob’s Law, ‘Users spend most of their time on other sites.’" (评论26)
  7. 设计与细节

    • 部分用户赞赏设计的独特性和细节,认为它带来了愉悦的用户体验。
      • "It’s lovely. It’s unique. and UX is just delightful." (评论13)
      • "I wish my desktop environment looked like this." (评论16)

总结:评论者对这种多窗口网页设计的态度褒贬不一,一方面赞赏其创新性和怀旧感,另一方面则对其性能、实用性和SEO影响表示担忧。