今天，我与Shopify产品设计工作室负责人Marvin Schwaibold一起。他将为我们幕后揭秘他的工作流程，>> [音乐] >> 展示他如何利用最新的AI工具让设计栩栩如生，随后我们会回顾一些观众提交的网站。欢迎来到新一期的《Design Review》（设计评论）。
Marvin，感谢你的加入。>> 谢谢邀请我参加。 >> 在我们深入探讨你在Shopify的工作之前，我很想听听更多关于你的工作流程以及你目前使用AI进行设计所采用的工具。 >> 我觉得流程本身并没有发生太大变化。它仍然具有极强的迭代性，并且步骤有序。工作中充满了大量的迭代和变体，但工具确实发生了很大转变——从像Figma这样的工具和美学布局的工作方式，转向了更多以AI驱动的工作流。我会将Figma作为一些想法的草稿纸，但很快这些想法就会转化为我可以使用的真实演示原型。只有在我需要布局或向AI解释某些内容时，我才会偶尔回到Figma中。现在的世界肯定包含了像Codex和Claude Code这样的工具，以及大量使用终端，从而能够更快地获得可以在手机或电脑上测试的产出。这仍然是一个非常有趣的迭代循环，但我们确实已经从画布转向了更广泛的AI工具。 >> 那么在这个工作流中，有多少是由AI驱动的？又有多少是你作为人类参与的部分呢？ >> 我认为主要是我作为人类在驱动AI为我完成大量繁重的工作，但有很多质量控制和决策制定仍然完全由设计师负责。我们掌握着主动权，而且我们现在比以往任何时候都更有能力去决定哪些成果值得推进以及合作。因此，更多的是在策展AI所创造的内容，这是一个持续的、像来回对话一样的过程。我觉得只要你能理解你所处理工作的复杂性，并能够将其分解为多个几乎像是子任务的部分，然后逐步提供给代理（Agent），AI就能极其高效地完成我们需要做的许多事情。接着就是不断的来回沟通与调整。 >> 听起来你描述的很多内容表明，你的角色实际上更像是一位编辑。 >> 我们现在比以往任何时候都更像是编辑，这我觉得很有趣而且很棒。虽然这始终是我们的角色之一，但要达到这种“编辑”的状态以前需要大量在Figma中进行的手工设计工作。而现在，越来越多的这部分内容可以通过AI工具来加速和扩展。 >> 所以，你作为人类仍然对最终产出负责，并确保它符合你的标准？ >> 当然。 >> 但现在你有所有这些工具能够以更快的速度达到目标。 >> 百分之百正确。我的意思是，AI确实提高了我们所有人的上限，但它并不是一个工匠。它可以执行复杂性和技术层面的工作——比如写代码，这是我无法手写完成的；但它不知道什么是好看的、什么是不好看的，这需要由我来决定并引导AI走向正确的方向。 >> 我一直是你的作品的忠实粉丝很久很久了。所以，也许我们可以先从介绍Shopify的产品设计工作室开始，讲讲你们在那里做些什么？ >> 我与一群非常有才华的设计师一起工作。我们在一起已经一年了，基本上我们在公司内部发起了一项倡议，旨在重新设计并优化最重要的界面。这包括与Sidekick相关的一切内容——这是我们的AI基础设施层，基本上管理着我们整个后台管理系统；也包括我们称之为“绿色应用”的移动应用程序。我们会查看并处理所有与后台及其仪表盘相关的内容。最近，我们还在大量使用工程团队为我们构建的新AI基础设施。总之，过去的一年非常令人兴奋。 >> 是的，这确实很有趣，因为Shopify到现在已经有二十年的历史了，对吧？ >> 20年。 >> 20年了，所以我们现在处于>> 我想应该是21年吧。 >> 是的，我们现在进入了一个新时代。AI正在改变很多事情，听起来你们所做的很多工作实际上是为了现代化并使其适应这个现代时代，这不仅是通过设计，也是通过体验本身来实现的。那么，你所在的产品设计工作室的设计团队实际上在做什么呢？你们只是在Figma和画布上制作设计和界面，然后交给工程师吗？还是说你管理的设计职能有所不同？ >> 至少在目前阶段，我们正在推进的这个大型倡议几乎分为两部分。组织中的设计团队部分已经重新设计了整个后台体验。这次 redesign 始于Figma，通过打磨界面并将其应用到网页上；而组织的另一部分，即Shopify的Sidekick团队，则致力于通过聊天来自动化和操作大量的Shopify界面。这样你就可以使用聊天、Sidekick或AI基础设施基本上管理你的商店，并自动化作为在线商家所需的许多操作。这两者几乎是公司中两个看似矛盾、对立的领域，但它们配合得非常好。因此，你们在构建非常漂亮的新用户界面的同时，也在利用新界面基本上生成AI基础设施和AI工作流。看到这一切非常令人惊叹。而且其中很多内容也非常顺利地转化到了移动应用中，提升了移动端的体验。现在的移动端更加对话式、更多是通过与Sidekick交谈来管理你的业务，而不是通过界面去操作你的业务。 >> 没错。而在加入Shopify之前，你和Molly一起建立了自己的产品工作室，那里有令人惊叹的动效、动画和交互设计，我一直觉得非常受启发。也许你可以给我们展示一些那样的作品，并谈谈它们的来源？ >> 是的，Molly是布鲁克林的一家设计工作室，我和我的合作伙伴J Tal一起经营这家工作室。我们在加入Shopify并将该工作室整合进Shopify之前，运营了大约两年时间。 >> 在那段时间里，你们有一些大客户合作？ >> 是的，我们»
我们曾与 Collins、Apple 和 Google 等公司合作，同时也服务了许多小型客户。诚然，这是一个广泛的混合体，包括网页设计、产品设计以及为客户网站制定的内容策略和层级结构。由于我们是一家小型工作室，这也让我们能够与客户建立极其紧密的关系。在 Molly 期间，我们会连续数周每周与客户会面，将这些项目作为高度专注的合作阶段。为了保持极高的专注度，我们一次只承接两到三个客户。这里有一段视频剪辑，展示了我们在运营工作室期间所做的一些工作。
这里的细节很丰富，动画非常自然流畅。而且随着每个屏幕画面的切换，背后的渐变和阴影也会随之改变以匹配背景颜色。我想很多人可能不会注意到这一点，但这是一种你直觉上能感受到“这里正在发生某种变化”的体验。我们基本上是从挂在墙上的电视背后的环境光中获得了这个灵感。我认为 J Tal 在这之前（AI 出现前）就通过复制视频并将其模糊处理为背景，使其与屏幕上的内容节奏相匹配。效果非常好。
在此之前，文案只写着“Molly 是布鲁克林的一家设计工作室”，底部只有一个像震动或雷鸣般的感觉的渐变。至少对我们来说，这总让人觉得人们倾向于滚动进入其中探索。所以我们甚至不需要展示任何作品，只是稍微暗示了一下。当你滚入后，看到的是真实的作品。其余部分都是非常简洁漂亮的轮播图，你可以看到这是我们工作室所做的一些工作。
关于你提到的某些模式，我们曾将这套系统称为“Primal 系统”。这是一种基本理解网站内容、消化网站内容的方式。对我们而言，当客户带着大量信息来找我们时，这是一种非常结构化的消化方式。我们帮助他们将这些内容构建到网站系统中，允许用户进行探索。对我们来说，这种浏览方式感觉更像是在探索网站，而不是网站在强行吸引你的注意力。所有内容都只有一层之遥，并且是渐进式披露的。因此，你永远不会被过多的内容所淹没。
你是如何做到这一点的？我可以展示一些作品来说明。这是我们要与 Collins 机构合作的一个项目，我们与他们在这个网站上合作了超过一年。正如你所见，即使你在首页滚动浏览，页面的每个部分都是一个章节，随着你与网站的互动，可以引导你进行更深入的探索。这是我最喜欢的一部分之一：书架。这些基本上都是 Collins 的所有案例研究。
再回去悬停在这些元素上看看，它们弹跳的感觉与你通常看到的有所不同。是的，没错。谈谈你是如何制作它的？你没有使用 AI 工具来完成这项工作，是你手工制作的吗？是的。在这种情况下我要说，这是设计与工程紧密合作的结果。我会在 Figma 中布局这样的设计，试图理解间距、大小、颜色、行等所有细节。然后我会交给像 Jesper 这样的人，让他负责如弹跳动画等工作。
这些书必须层层堆叠在彼此之上，然后基本上在最后一种书落下时再落地一次。这感觉必须非常自然有机，因为如果它看起来既弹跳又自然，那就削弱了“这是一本活的书”的概念。这些看似不重要的细节，恰恰是人们滚动浏览这类网站时会捕捉到的小时刻。
这很重要吗？比如你有一个极其有才华的人，他在这个项目上的全部工作就是制作标签交互。任何人都很容易说：“好吧，直接加个标签吧。标签是存在的，5秒钟就能免费搞定，然后继续做下一件事。”你为什么觉得花一个人的专门时间在 AI 能之前做到这一点很重要，并让他们只专注于这一个交互？有多种回答方式，但我想特别是对于这家工作室来说，因为他们自己从事设计工作。
这是一个品牌工作室。我认为来到网站的客户正在寻找那种“彩蛋”。他们想知道，如果我聘请这家机构，或者如果这个机构在制作如此高质量网站时投入了这么多细节，那么当我们与他们合作时，他们会把什么样的彩蛋放入我们的项目中？当他们选择我们的调色板时，也许他们会在背后建立一个系统，而不仅仅是挑选五个喜欢的颜色。因为这种深度投入需要极大的专注度。
这在某种程度上也是一种展示，展示了你能带入任何界面部分或作品的工艺水平和细节程度。我们在 Shopify 也尝试做到同样级别的关怀和工艺水平。那么，谈谈将你的设计工作室出售给 Shopify 并加入他们的决定吧？在这个过程中，作为一名大型上市公司的领导者领导内部产品工作室，与你之前独立工作时所做的工作有何不同？
Tobi 在去年某个时候基本上说：“我们正进入一个新的时代，而这个未来需要被设计出来。”这就是全部。他说：“我想为未来进行设计，我需要雇佣优秀的设计师来帮助我描绘一幅画面。当我们看到那幅画时，我们就知道它是什么样子了，我们可以沿着那条路走下去。”我认为这就是 Shopify 的指令：设计更多地处于前台。这是一个非常诚实、自我意识很强的组织。
这是一家由创始人领导、工程驱动的组织，设计并不总是扮演它现在所扮演的角色。设计正在帮助塑造公司未来的叙事方向，以及我们对工艺和自豪感的投入程度。
工具以及我们为商家构建的软件，看到这些成果令人欣喜。这也是我们加入的原因之一：在为 Collins 或插画家 Spencer 等工作室设计网站时，虽然乐在其中，但我们希望产生更大的影响。我们想看看我们的策略在拥有数百万用户、涉及界面范式的大型平台上，能否像在小众平台（比如 Spencer 网站那少量浏览者）上那样经受住考验。
没错，挑战截然不同。你们在设计工作室的工作是创建新网站、展示作品还是开发产品？请谈谈现在的情况有何不同。Shopify 拥有数百万用户，每一个设计决策和交互都关乎巨额资金。作为内部设计工作室，你们现在的流程是怎样的？如何与组织其余部分协作？又如何特别地接触用户呢？
目前，我们的工作室主要在 Sidekick 内部运营，这是 Shopify 的 AI 基础设施层。整个团队与其余设计组织紧密合作，这种互动非常美妙，我认为这也是此类工作室成功运作的一般方式。在我过去的职业生涯中曾担任过一些职位，如果团队过于孤立，很难融入公司并产生巨大影响。目前我们深深嵌入当前的工作流、时间表和路线图之中，这需要大量的实验。
诚然，提升界面体验对我们来说很容易，因为我们拥有才华横溢的设计师，他们能在 Figma 中重建界面部分。利用 AI，我们可以极其迅速地将这些转化为具体的原型。众所周知，原型的实用性是任何 PRD 文档的百万倍。这些原型在公司内像野火一样传播。如果 Toby（Shopify CEO）看到喜欢的原型，我们就可以着手构建它。
我们在 Shopify 探索的一些 AI 变体工作也感觉类似：我们脑海中有了想法，利用当前技术模拟和生成原型变得极其容易。而在过去于 Molly 工作时，很多工作都是手工完成的：表格是手绘的，动画由开发人员制作。除了我的方向外，你需要与上千个对接方互动。而现在，我看到的是由一两个人组成的小团队就能完成过去许多人的工作，因为工具允许我们这样做。
这使得获得认可变得容易得多：我可以带着原型出现，比单纯提出想法并召集整个团队围绕该理念工作更快地吸引人们的注意。
能否展示一些你们在 Shopify 构建的作品？这基本上是对我们当前管理后台体验的重新设计和焕新，包括新的主页设计以及整个产品的整体面貌更新。目前我们正在努力推进这一项目。
我们目前正在探索的一个更有趣的概念是 Sidekick 与商家之间的互动方式。我们在主页信息流中有“建议”功能，这些由我们向商家提供的建议基于我们对商家生态系统中潜在机会和益处的识别。我们可以将这些展示给用户，当用户与这些建议互动时，我们便启动与 Sidekick 的对话。
我们可以直接操作用户的管理后台并展示这些更改。例如，我们向用户显示：“我们认为您应该重写产品描述。”这是我们的建议。您可以发布这些更改，通过与 Sidekick 的对话直接操作您的商店。其核心理念是：将 UI 带入用户及其上下文中，而不是让用户点击浏览界面。
归根结底，存在这样一个世界：商家可以在主页面上花费更多时间，将 Shopify 用作仪表板来委派任务并与 Sidekick 交互，让 Sidekick 直接操作商店。目前您看到的仍处于原型环境阶段。内部有一个开发 UI 面板，设计团队正将所有这些更改、演示和想法直接构建到界面中，以便我们进行测试并在此基础上开发。
这是一个美妙的过程：一旦演示达到某种共识点，每个人都会分支出去构建他们认为能带来价值的版本，然后大家再聚在一起。这一切都发生在同一个演示和同一种语言体系中。
是的，这是一种分享想法和上下文的绝佳方式。你说设计师在这里构建这些东西。通常设计师只负责设计而不参与开发，但在 Shopify 和你的团队中，你们不仅在设计，还在构建大量自己设计的作品。这样做的目的是为了测试、原型验证以及在真实数据和体验中查看效果，这是确保产品出色且实用的关键部分。
你从在 Figma 中进行设计演变到现在不仅设计，还将其创造出来投入世界进行测试并自己完成整个闭环。在这个过程中有什么变化吗？
在这个特定案例中，管理后台有一个我们构建的游乐场（Playground）。我们在其中进行测试。这不是生产代码，因此不允许合并回 Shopify 的主 GitHub 仓库或主存储库中。话虽如此，AI 确实已经发展到这样一个阶段：作为设计师，我们被高度赋能并具备能力去可视化任何想要的想法。在过去的世界中，这是不可能的。
我们之前看过 Collins 的网站，当时在 Figma 中进行的大部分工作至今看起来仍然如此。
放大这里的任意部分，你会看到高度详细的 Figma 界面设计稿，这是我们进行构思的过程。我认为这是我和 Michael Spicer、J Tall 共同协作完成这个项目的成果，你可以清晰地看到随着我们不断推敲想法并尝试新事物时的演变过程。这些设计过于复杂，用代码进行测试的成本太高且太昂贵了。我们目前不想在代码层面测试它，因为那需要工程师介入查看并为我们构建出来。因此，我们在 Figma 中进行所有测试。Figma 是我们构建一切内容的游乐场和试验田。
我们首先在桌面端进行构建，然后将其适配到移动端，而在正式去打扰工程团队之前，所有这些内容都必须在 Figma 中经过长时间的严格压力测试。目前我与 AI 交互或继续使用 Figma 的方式是，我可以凭借一个非常粗略的草图就推进很远。这里有一个我周末一直在做的副项目的例子，我可以稍微详细地介绍一下。我想为这个项目构建的一个功能是对这些草地研究和视频素材进行 2x3 的概览展示。
这里的交互逻辑是，你可以打开其中任意一个视频，并通过向下滑动来关闭它们。这种效果在模拟器中也是一样的。我用文字描述了这一交互逻辑，并在 Codex 中进行操作，Codex 为我构建了基础功能。但是，这种交互并不是可中断的。也就是说，每次我点击某个素材并向下滑动时，我必须等待该元素完全回到原位并放置好之后，才能点击另一张图片。这显然不是理想的交互模式。
这种操作必须非常灵敏且快速，否则用户会很快对界面感到厌烦。于是，我回到 Figma 中画出了非常基础简单的方框来模拟逻辑：当你点击某个方块时，红色弹出；你可以将其滑走。如果在滑动过程中你点击蓝色，则蓝色弹出并同样可以被划掉；接着你可以对绿色做同样的操作。我认为这是一个很好的例子，说明我个人是如何更多地使用 Figma 的。
Figma 更像是一个用来梳理想法的草稿纸，我将这些构思交给 Codex。我使用这个“草稿本”是因为对我来说更容易拆解某些概念，而且对于 Codex 来说，如果它以视觉形式呈现，也很容易进行解析。我认为它解读图像的方式与我类似：至少它能理解我在做什么以及我对动画的思考方式。虽然我无法通过文字或语音清晰地表达出来，但我可以通过绘图来传达意图。
我认为这里有两点非常重要需要指出：第一，Codex 以及所有当前的 AI 软件和模型在创建任何内容方面都极具能力。你可以利用这些工具制作你想要的任何东西，但你必须清楚自己在做什么，并且能够将一个概念或像着色器这样更复杂的东西拆解成其所有细微的组成部分。你必须能够理解这些指令，然后将这些组件重新组合起来。
“是的，请展示一下你是怎么做的。明确地说，你有很多图片和视频。” “还有实际草地的视频。” “没错。” “然后你想创建一个看起来与之一模一样的着色器，但它可以像着色器一样受控并运行。” “所以请谈谈不同的元素以及你为了使其看起来逼真所经历的步骤。”
“我这里有几张截图。这再次很好地展示了我是如何使用 Figma 的。我第一次将视频输入到 Codex 中，并解释了我想遵循的项目和流程：获取视频，将其转化为着色器。我希望该着色器能在网页上运行，并且希望你尽可能做到细致入微、像素级完美。提取所有颜色，确保使用相同的十六进制代码，理解图像的每个部分，然后尝试重现它。”
Codex 回答说：“没问题，交给我吧。”并生成了结果。显然，这与我们最终达成的效果完全不同。但随后的流程是：我会截取这个生成结果的屏幕截图以及我原始的视频，然后打开 ChatGPT 并将其发送给另一个智能体。我向该智能体解释了我正在做什么，以及为什么之前的智能体没有理解我想要达到的效果。
ChatGPT 随后帮助我理清了自己的思路，它指出：“你必须向它解释光线是从哪里来的、使用了什么阴影，也许实际上应该将图像分解为六个部分，让智能体逐个处理这些部分，然后再将它们重新组合起来。”当我思考所有这些不同因素时，我试图弄清楚如何向 AI 表达得非常清晰，并准确解释它实际看到的内容。
其中一个技巧是我进入 ChatGPT，让它渲染底层结构的基本地形图。随着我不断调整，AI 逐渐接近目标，你可以看到它开始在草叶中填充更多的像素。是的，这些开始看起来有点像丛簇了，感觉更加逼真；而在另一边，我觉得：“好吧，我们现在有点进展了。这看起来不再那么糟糕了。”但我逐渐意识到它不理解下面不是平面层，而是小山坡。
“没错。” “基本上，我将这些信息反馈给 AI，它明白了：哦，原来存在一个具有不同深度和高度底层结构和地图。如果我能在这些基础设施或整体结构之上渲染草地，那么创建场景就会容易得多。”这确实行之有效。在这个原型参考中，你可以看到一个二进制开关来开启或关闭草地效果，你也可以在这里对地形进行相当多的调整。
“没错。” “这是前几天午餐时 Josh 向我揭示的窍门。我们在这个演示中安装了 DialKit，因为他看了一眼后说：‘这看起来不错，但你应该看看草叶的长度。’我当时想：“哇，确实如此。”于是我问 Codex：‘嘿，我们要有多少种草叶变体？’它回答说我们大约有 217,000 种不同的……
草叶，但它们仅相差约0.7或0.8。于是我们决定为此构建一个切换开关，以便亲自查看效果。我不希望再反复通过界面交互并就此进行讨论来确认细节。暴露底层结构也能让我发现自身的错误。我之前实现的地形图原始版本完全错误且存在偏差，因此无论如何都无法达成预期结果——因为我在五轮提示前误解了某个细节却浑然不知。DialKit 帮我梳理并解析了这一过程。
总体而言，你可以调整其中一些数值，它们有助于可视化我真正想看到的内容。如果这里的长度更长，你就可以引入更多的风力效果。这是我想要测试的一点：看看在风的运动上我能玩得多么夸张。你可以看到它变得有些狂野。但这只是一个小小的示例，旨在通过有趣的项目尝试探索这些工具能走多远。我认为在人工智能出现之前，我是无法做到这一点的。
我或许拥有这些想法，但受限于条件或能力而无法执行。我认为这正是当前设计角色发生变化的普遍现象。设计师正变得更具全栈属性，工程师和产品经理也是如此。这种趋势无处不在。现在似乎没有界限了？这确实是我们观察到的一种常见模式：创建原型，然后构建小型控件小部件，允许用户控制其中的不同变量，从而轻松测试并精准调整。
以前，这样做不值得任何人花费时间。人们可能只是在代码中摆弄变量直到满意为止，或者根本不愿花时间去做，因为那样耗时太长。而现在创建这些小型软件工具以控制变量和测试参数变得极其容易，可以将其调整至完美。这大概也是“DialKit”这个名字的由来。那么能否多介绍一下 DialKit？这是一个让创建和调整项目中各种变量变得极其简单的产品，对吧？
完全正确。这正是它的工作原理。你只需通过其网站运行 npm 命令即可，那里有简短的提示说明。你可以将其集成到你正在进行的任何项目中。我还有另一个项目可以快速展示，这是 DialKit 的另一个版本。在操纵轮播图的具体项目中……
这个项目灵感源自 Luv From 的设计负责人 Mike Matas，他的作品集轮播图采用这种方式运作。我想探究轮播图运作的细微差别：当你拖拽某个元素并松开时，能量仿佛从该特定元素向外扩散涟漪，触发与左右其他元素的碰撞效果。构建这个侧边栏帮助我窥探自己用91个提示词创造的“弗兰肯斯坦”式作品的内部机制，它有助于调整那些至关重要的参数。
例如，“拉力增强（pull boost）”意味着我拖拽得越快，获得的加速效果就越强。你需要稍微摆弄一下这个切换开关，使其感觉既不过于令人畏惧也不过于强烈。否则整个系统会显得不对劲。我知道何时感觉不对，但与聊天机器人的反复沟通并不奏效。你必须能够始终暴露这些数值。
看来我们看过的许多项目以及你描述的内容，核心在于设定一个极高的标准，而现在我们有工具能以比过去快得多的速度达到这一目标。那么设计师甚至非设计师的角色是什么？他们应如何思考设计问题？许多观看此视频的观众可能是早期初创公司的创始人，自认为是工程师但毫无设计天赋；或者是试图探索能否创业或亲自构建产品的设计师。
你们过去习惯于在 Figma 中设计然后移交他人，现在应如何思考自身角色？如何通过提升使用人工智能的方式，创造出更高质量的设计？我对人工智能的一般看法是：它是一个无限耐心的合作者和队友。如果我需要91种方法才能修正动画，Codex 不会生气。若我对工程师这样做，他们可能会抓狂。
因此我的建议是：尽管听起来有些傻气，但请摆弄这些工具。你可以直接描述你想要的功能；当看到结果时不要放弃。告诉它这并非你设想的样子，发送一个你喜欢其轮播动画的网站链接，或保存一张你认为美观的截图。展示它一种配色方案让它开始模仿你，并不断反复交互，与工具共同塑造你的叙事。我认为这非常重要。
对于设计师而言，我始终学到的技巧就是尝试模仿。即使现在我也在努力复刻那个存在已久的轮播动画，因为现在我有一个无限耐心的老师和朋友可以与之共同构建。我可以窥探其内部机制——这是我利用自己的周末时间进行的实验，没有打扰任何工程师。我想理解并拆解这个作品的构成方式。
这教会了我如何成为更好的管理者、合作者和团队成员，我认为我们也应这样对待这些工具。是的，这是非常棒的建议。YC 下一批次的申请现已开放。你有创业想法吗？请访问 ycombinator.com/apply 进行申请。（音乐）
早点完成，填写应用会让你的想法更上一层楼。好的，回到视频里。“我们要回顾一些网站吗？”“是的，我很乐意。”“那就开始吧。”“好的，就这样做。”“当然可以。”
首先介绍的是 Nstack。让我们看看。“嗯，这是 Nstack，你唯一需要的 AI 工作区。”“一个强大的智能体，一个直观的桌面工作区，以及处理任何任务所需的所有工具。”
“嗯……” “我是说，我认为一开始就要指出的一点是它非常好之处：显然它在模拟桌面环境。所以感觉就像你在桌面上操作，我认为你可以使用这些功能并探索它们。”“是的……” “我是说，我觉得这很好的一点是：你基本上已经身处他们的产品中，并且正在使用该产品。”
“是的……” “嗯……不过我对该用它做什么感到有点困惑。它说‘你唯一需要的 AI 工作区’，它是唯一的桌面，拥有处理任何任务所需的所有工具。当范围如此广泛时，很难弄清楚我应该用它做什么。”“也许字面上来说，它可以用于任何事情，但我感觉有时候明确用户点击后想让他们做什么会有所帮助。”
“是的。我是说，就你刚才提到的观点而言，从视觉角度来看，它非常令人不知所措。”“你在侧边栏里有很多内容。你在这里有聊天历史记录可以滚动浏览。然后这里似乎有一种界面，但主要的 Nstack 消息提示也坐落在这里。”
“嗯哼……” “很难确切地弄清楚首先该关注什么。我在学排版时，我的德国平面设计教授总是说我们在学校制作海报时，他总会强调这张海报不具强制性（dictatish）。意思是现在这张海报里没有任何东西能吸引我的注意力。就像我不知道看它时该做什么，”
“基本上……” “我是说，我不知道首先应该看哪里。”“是的。对，我该点击这些图标吗？还是进入类似 Slack 的地方？或者是聊天界面？”“我是在这里发短信和与聊天机器人对话吗？”
“是的……” “为什么叫我 Mark 呢？”“是啊，我想你就是 Mark。”“我现在是 Mark 了。我觉得这里如果有反馈会很好，那些杂乱的部分我几乎想要折叠起来，更多地围绕介绍、标题以及希望用户阅读和带走什么内容来布局。”
“是的……” “也许一种简单的方式，快速演示工具或软件产品会非常重要。但至少它是那种……非常富有奇思妙想且感觉有点复古，这不错。”“是的，通常应该有一个特定的目标，比如主要目标、主要的 KPI 或用户访问网站时你最希望他们做的核心事项。”
“我不确定这里是什么。也许是‘开始使用’，或者是与这个智能体交谈。但无论是什么，都有太多其他东西在分散你的注意力，让你无法专注于他们希望用户完成的主要目标。”“也许‘开始使用’按钮是主要的 CTA（行动号召），但他们在中间位置还有这些其他按钮，”
“是的……” “看起来与那些按钮完全相同。所以现在有多个颜色相同的按钮在呼吁行动，比如‘通用工程’、‘营销’、‘开始使用’。他们希望我们首先关注哪一个？”
“有人曾经对我说过这样的话：通常当我们构建网站时，我们会专注于那一个东西并把它做得很好，围绕那个单一事物建立整个叙事。”“在 Collins 网站上，感觉更像是书籍堆叠是我们引以为傲并想要展示的东西。那是网站的核心，大量的视觉工作都集中在那里。”
“我觉得进入该页面有一种简单的方法，然后你可以花很多时间在上面，因为它易于使用。”作为 Nstack 的观察者，我会问自己：我能围绕什么核心事物凝聚人心并让人们去看和做呢？如果用户只带走一个信息，那比同时尝试做所有事情要好得多。”
“这正是在这里发生的情况：下一件事，有很多东西在争夺注意力。” “是的……” “这与渐进式披露信息截然相反。” “是的。也许作为积极的一面，我认为他们做得好的一点是他们试图让你直接进入产品内部。”
“我假设这实际上是产品的运作方式，是的。他们并不想告诉你关于产品信息然后让你点击很多东西、注册等等。”“他们说：‘如果顿悟时刻是人们开始使用产品，那就让我们尽早让人们进入产品中。’但这仍然感觉可能需要多一点背景信息来弄清楚我们究竟应该在这里做什么。”
“同意……” Nstack。谢谢。“好的，让我们看看 Skill Sync 吧。”一款免费的本地优先 Mac 应用，将你的记忆和技能跨每个智能体和队友同步。
“这很好。” “是的……我是说，至少它清楚地表明了公司是做什么的。” “好的。” “是的……” “所以它有技能并且它们同步。” “是的……”
[笑声] “是的，我是说它是深色模式。字体我觉得非常小。”在 Skill Sync 基本作为标志和下面第一段文字之间，排版中的百分比很多。这里有一些高度我觉得我们可以稍微调整一下。”“在我看来它们感觉有点不对劲。”
“而且再次强调，这里有很多非常密集的信息……” “嗯哼……” “就像我们刚才对 Nstack 说的那样，当你开始抽象一些功能和特性但仍保持非常详细（就像他们在这里做的一样）时，就很难确切理解它是做什么的。”“这将需要大量实际阅读所有这些功能才能弄清楚发生了什么。”
“我很好奇你的看法。嗯……所以他们在这里基本上有一堆侧边栏标签，试图展示不同的功能。”“我觉得你对标签有一种有趣的方法，因为你制作的那些滑块有效地就像是标签一样，对吧？只是你拥有知道有多个它们并且可以同时看到多个的 affordance（可供性/提示）。”
“是的……” “我觉得很多人经常陷入的一个陷阱是，像这样的标签通常意味着”
用户通常不会点击所有标签页并逐一探索。因此，你必须假设隐藏在背后的内容无人会看。你是如何看待这一点的？他们该如何鼓励人们更多地探索以获取更多信息，而不是将一切隐藏在标签页之后呢？
我一直遵循一条规则：如果在演示作品时制作幻灯片，每页文字不能超过七行。你需要制定关于展示多少功能的规则和限制。我认为一个很好的例子是使用“三图并列”组件（three-up component）。我会提取所有功能，压缩信息，并试图理解 Skill Synch 能为你做的最重要的三件事。你可以做 X、Y 和 Z，这就是你要展示的三点。所有这些点都是可点击的，它们会引导你进入工作表或通过视图过渡查看更多详细信息，从而提供背景。
由于内容非常扁平且广泛，就像“一英里宽但只有一英寸深”，你并不真正知道自己在看什么。这需要你对功能集有更深入的理解，并将这些内容浓缩为原则、规则和主要要点。然后，你可以在每个支柱下整合更多信息。这将帮助用户更好地理解网站的流程和导航方式。这对创始人也有好处。我觉得如果我还在经营工作室并与这家公司合作，我们会进行一项练习：“你们最核心的功能是什么？”
“如果是 Sink Skills（技能融合），那就只谈论这一点，把它做得很酷并展示出来，然后让人们尽快使用产品。”
“是的。” “而且有趣的是，我们刚刚滑到了页面底部。” “它并不长。” “是的。所以我认为用户习惯滚动浏览。如果重要信息隐藏在这些功能标签页背后，就把它们展开并让页面变长。没关系，人们可以滚动更长的距离，而不是压缩信息并将一切隐藏起来。” “完全正确。”
另一个我看到很多人掉入的陷阱是，由于现在 AI 工具如此容易创建不同的图像或动画。这些实际上是动画对吧？对于每一个功能，它们都会生成一堆这样的内容，并且都具有那些微小文本和那种“人类不会花时间去编程一个从角落移动的小圆点”的动画特征。但这并不意味着它实际上为所做的工作增加了价值。因此，当你谈论这一点时，你需要进行策展并设定标准，确保它在传达正确的事情。这里有很多东西，但它们并没有真正帮助我理解它试图表达的观点。
“我完全同意。” 我觉得这再次涉及到你需要雇佣拥有正确技能组合的合适人员来帮助你完成工作。AI 肯定可以帮助你搭建整个网站，但在将这些功能抽象为插图时，找一位之前做过类似工作并专门从事信息图表的设计师合作并不是个坏主意。也许这实际上会成为 Skill Sink 品牌身份的核心部分，因为解释得很清楚。
“嗯。” 这就像……我记得几年前我和 Gemini 合作时，有一个关于辫子的动画。基本上他们展示了模型以及 Gemini 拥有的所有不同事物，它们汇聚在一起构建了一个螺旋体。那个动画基本上解释了模型的精确能力。
“嗯。” 然后它变成了一条细线，上面写着 Gemini。那是由许多比我更有才华的人花费很长时间制作的一个动画。后来，一些优秀的工程师将其转化为网站的滚动动画。正是这种设计“卖”出了产品。当你进入并使用该产品时，那段动态记忆深深印在我的脑海中，并准确解释了模型在做什么。有时候，稍微更具艺术性和抽象性反而能产生很大的影响。
我认为对于 Skill Sink 来说，我肯定能看到有无数种模式和视觉示例来展示这一点。你可以更加精心雕琢和图形化地设计网站上的呈现方式。这就是我对他们的反馈。“酷，谢谢 Skill Sink。”“非常感谢。”
接下来是 Instaplay。让我们看看。我看到很多特色内容，我不确定这些是电影还是游戏。它说“设计一个……” “Bird Sort（鸟类排序）。” “Bird Sort。” “好的，所以这些是我们能玩的游戏。” “我想是的。” “好。我们怎么玩？有一堆鸟，现在正在播放声音。” “让我们也许……” “我们从别处试试。” “开始按钮。”
我想我们在和这只狼战斗。“够了。”所以这里有一个突出的提示，这很有趣。你知道它说“创建描述你的游戏创意”，对吧？当你点击进入时，有趣的是标题 Instaplay 下方没有任何文案。所以我们不得不试图弄清楚如何在这个页面上定位自己。“是的。”
我们做的第一件事是看到了所有视觉游戏。“对。它们的所有截图。”“对。”所以我们直接跳到了那里。“是的。”因此我们错过了一个事实，即这里的主要目的是让我们能够即时创建自己的游戏。“对。所以我认为一行文字可以帮助这一点，或者某种提示框使其更突出。”
“而且这又回到了你之前的例子。即‘我们希望在用户着陆页面时带走的一个核心点是什么？’是探索平台上已经创建的众多游戏，还是我们可以创建自己的游戏这一事实？”
“创建我们自己的游戏实际上会引导你进入注册页面，如果用户没有看到他们创作的游戏，没人会去注册的。”
对，所以你必须投入足够的积分来尝试将用户引导至产品中。这就是单个用户的获客成本。顺便提一下，这个指标极其重要，显然也是他们思考的核心。但这种获客成本不能像刚才那样随意进行。
对。你问它做某事，它不仅必须完美地输出结果，你还得能再尝试一两遍。如果这样可行，我可能才会真正考虑使用它。你输入提示词并提交后，它会跳转到一个要求登录的界面。
是的。问题在于我们不知道这是否好用。举个例子，显然这里可以构建一个非常酷的交互式轮播图，每个游戏几乎都有大约十秒的短视频片段。
对。而不是仅仅看到这些静态素材。我不清楚背后的机制，所以我不知道自己在看什么。这是一个很好的例子。你可以让 Codex 接入每一个游戏，进行屏幕录制并替换缩略图，至少是在悬停状态下。
这可能会为所有这些不同的“宇宙”带来更多的互动性和动态感。我认为他们通过这些封面想要展示的是：“看，使用 InstaPlay 你可以做很多事情。”
嗯。我甚至认为我们不需要能够玩所有这些不同的游戏，如果行动号召是让我们创建自己的游戏并自己成为游戏设计师的话。
对。所以，如果那是主要的行动号召，那我们最初的做法就不对了。你可能实际上需要为人们创建游戏以便他们游玩；如果他们想保存、稍后回来或分享给他人，那时再要求注册或创建账户。
而且在这里你看，你有“创作”、“我的游戏”、“为你精选”和“探索”。顺便说一下，没人知道这些是什么意思。但如果你点击其中任何一个，比如“我的游戏”，它又会引导你注册。
如果用户未登录该页面，可能根本不应该看到“我的游戏”选项吧？比如，拥有点击某个功能然后再次引导登录的能力……这对我来说回到了我之前玩的那个游戏，我不确定这样是否合理。
而“探索”基本上就是我们要已经所在的页面。你已经在主页上浏览了，我甚至认为不需要这个新按钮。你在探索页面上所做的唯一一件事就是移除了输入框。
嗯。所以现在我不能……不能再创建游戏了。所以在层级结构中有几处地方，我真的建议换位思考，想象自己是第一次来到你网站的人，完全不知道你在构建或销售什么。
是的。他们如何与产品互动？这也很有趣，因为你进入游戏后我们说：“好吧，这个搞定了。我想回去。”我不确定快速前进图标是用来返回首页的。我以为它会带我去另一个游戏或做别的事。
这很容易被误解为错误，而且很快就会出现这种情况。对。所以有趣的是你实际上点击了后退按钮回来，因为没有明显的“首页”可以返回。
正是如此。但这超级酷。你可以想象让人们输入提示词，就像你刚才做的赛车游戏一样创建出一个游戏。人们可以玩上几个小时。关键在于让人们体验到创造游戏的价值并感受其中的乐趣。
一旦你创建了那个游戏，并对自己的作品感到自豪时，能够与朋友分享可能对这些公司来说是一个非常好的增长手段。而且我认为这种工作有很多价值……是的，确实如此。向他们致敬。
好的，干得不错，Insoflight。接下来是 Mintlify，知识基础设施代理构建的基础。为初创企业、企业和代理提供自我更新的文档。
对。很酷。我显然非常熟悉 Mintlify。这是一家令人难以置信的公司，增长迅速，是许多 YC 公司和其他开发者工具使用的产品。
是的。嗯……这是一个美丽的网站。看起来非常专业，给人一种值得信赖的感觉。很直观、干净。是的，他们的色彩、排版、间距和行高组合得非常精美。
那么让我们深入探讨一下为什么会有这种感觉？页面上哪些具体元素让我们觉得它如此干净、专业，以及我们提到的其他特质？
我认为因为它在正确的方式上做了减法，只展示了真正需要展示的内容。它有一个非常清晰的标题，下面有一段小文字，“开始使用”按钮非常醒目。
它还展示了一个仪表板之类的东西，你可以大致理解文档可能存放在哪里以及在哪里更新。背景中的图形实际上增强了氛围而不是削弱它，它很微妙且在背景中。
感觉它在帮助你思考某种网络或类似的东西。感觉他们对自己的构建非常谨慎和小心，这有点像是一种基础设施智能层。我知道有 Logo 墙的概念，但至少这个 Logo 墙的排列非常精心，这很不错。
有很多非常有信誉的大公司，建立了大量的社会认同感，似乎传达出一种专业、值得信赖的氛围。部分原因是通过看到微软、Anthropic 和 Coinbase 也是他们的用户来传达的。
市场上充斥着如此多的工具，你需要这样的证明点来说服自己：“好吧，既然 Spotify 在使用它，也许我们也应该看看。”
我认为这是一个很好的例子，他们将 UI 和功能抽象成一种非常连贯且经过艺术指导的形式，看起来很有趣。不过我认为这些卡片的标题有点太小了。
如果我现在看着它们，背景颜色都一样，我主要是在看……
这些元素都没有被完全使用，而且他们反复在背景中使用那种编织动画。如果你到处都重复使用这种效果，它确实会失去原有的魔力。所以我认为在这里“少即是多”，标题可以稍微大一些。嗯，是的，这里我有点不确定是否需要那个元素。把它放在现有布局的顶部非常难以阅读。
是的，这确实是一个非常重要的观点，你希望人们能够注意到这一点。你可以控制谁有访问权限，也可以在现有设置之上进行构建。但它很容易被忽略，因为截图占据了太多空间。这种动画吸引了你的注意力，让你忽略了实际上非常重要但被埋在底部的标题。
没错。然后你需要区分视觉元素为用户提供的信息量，与你可以添加的文案之间的平衡。我认为这里的平衡有点失调，但整体非常美观。这些都很不错，这是一个真正简单易用的轮播组件。我可以滑动浏览它，颜色与摄影作品相匹配。我认为这一点没有得到足够的认可，这做得非常好且出色。
这是曼哈顿的蓝天，是Coinbase的标志色——这里的蓝色元素感觉非常协调。浏览起来感觉很舒服。品牌化做得很好，虽然这些颜色靠得太近了，我会为其中一个使用不同的颜色，比如灰色或更偏向AT&T的蓝色。但这张图片我可能会换一张。确实如此，整体非常干净、值得信赖。
各部分之间的空间也很大。我知道这是你在设计和构建项目时经常使用的一种技巧。主页的各个部分基本上是所有子页面的第一章。因此，在为客户端设计时，我们通常会这样做：如果你在谈论产品、解决方案、资源和定价，那么这些就是主页的四个主要部分。
因为显然我们认为这四个是最重要的部分：产品功能、我们的解决方案、资源和定价。当你滚动浏览网站时，由于滚动深度，这四个组件会按照从最重要到最不重要的顺序出现。人们在向下滚动时会流失，所以重要内容必须位于顶部。
然后每一个部分都应该引导我进入下一个环节。所以我点击这里时，理论上主页上应该有一个关于产品的完整部分。然后你可以点击进入产品页面。顺便说一句，由于产品数量众多，产品页本身可能也需要一个主页。但总的来说，它设计得很好且简单。
看起来他们花时间和心思来制作这个网站，这很好。是的，很有趣。它更加透气。感觉这里发生的事情比其他我们看过的要少一些。虽然内容仍然很多，但分布在整个页面上。
每一样东西都有自己的空间，这有助于用户知道在任何时候该关注什么，而不是感觉有很多事物在争夺他们的注意力。有趣的是你描述说这实际上花了更多时间。是的，比那些有很多竞争元素的东西花的时间多，因为这需要工作和策展来确定我们真正想保留的内容。
把所有东西都扔上去很容易，但要确定哪些需要删减则难得多。因为与团队进行这种对话要困难得多。每个人都在竞争，每个人都希望他们的功能或特性出现在页面上。你必须进行策展并做出决定并进行精简，这是任何设计师的工作：降低复杂性，一次展示一个部分，并以这种方式驱动叙事。
这很难做到，但如果做对了就会得到回报。是的，这太棒了。Netlify做得很好。好的，接下来是Netlify。所以你的用户不阅读文档，你的病人不阅读手册，你的员工不阅读内容。Netlify将你的文档和想法变成旁白动画视频。
你可以自己在几分钟内制作，或者让我们的工作室团队为你制作。对于那些需要更多视频但没有时间制作的团队来说非常合适。我认为，作为一个排版设计师，我一眼就能看出这里有一个标题、一段正文，下面几乎还有一个不同字号的较小版本段落。
然后还有“预约演示”按钮和“免费开始”按钮。在这个视口中，不考虑所有的标志、横幅以及角落里的广告栏，这里潜在地使用了五种字号。从那个角度来看，这确实很杂乱。你可以有一个标题和一段正文，你必须把所有重要信息都放入那段文字中。
你不能不断添加标题并让用户阅读所有这些不同的要点。“第一个让我感到惊讶的是标题中的两个占位符元素，我觉得这令人困惑。是的。如果只有一个在变化还可以理解，因为你可以锚定自己——比如“我们为这类人、那类人和另一类人提供这种服务”。
但当两个元素都在变化时，感觉像是用户变了，或者文档、手册等也变了。然后听起来这实际上是一个关于视频的东西，这是我完全无法从标题中看出来的。是的。所以我认为他们想表达的是：“嘿，人们不阅读这些文档和PDF之类的东西，所以需要视频让他们关注。”
但我觉得他们应该强调他们的视频转化率更高之类的话，即正面描述他们所做的事情，而不是负面描述。让他们用自己的工作室制作一个关于Netlify的视频并放在网站上让我们先看？是的，这会证明他们的观点。人们不阅读所有这些内容……
那么我为什么要读这些呢？直接给我们展示你们制作的视频吧。
这里有一个轮播图，基本上展示了产品。点击它……对，我假设这些是他们的动画示例。无法点击进入其中一个，必须使用图标，这不太好。这张卡片显然是可点击的。嗯……每年都有成千上万的仓库工人受伤，这就像是一个教学动画视频。大多数事故完全是可以预防的，并且有警告装置。
这个视频制作精良。然而，我们想在这里做的事情很有趣，联系到你之前展示的那些项目中创建的许多轮播图，我正在探索他们的大量作品。是的……当我点击进入其中一个时，它会全屏显示，然后我想知道如何最小化或关闭它。
我真的希望它能放大以便我看到播放过程，同时能够跳转到其他视频，因为我想看到他们创作内容的深度和多样性。确实如此……目前很难做到这一点。是的，这些都不是可点击的，我无法将它们全屏打开。你必须使用这里的所有小按钮，不能滚动，也不能跳过它们。
我希望它能放大而不是占据整个宽度……比如90%左右显示内容，然后我可以开始滑动浏览所有视频。也许在下方展示实际的公司名称……对。可能这些都是案例研究，所以打开时可以用带有深度的精美面板呈现，页面其余部分后退，面板升起。
你可以在顶部看到视频，也许还有对该视频的说明……对。这家建筑公司的案例研究可能也会引导你了解客户故事或成功故事。这些显然是他们展示过去的合作客户的演示，因此应该更多地关注这些视频，而不是这里的标志横幅广告。
标题应更简洁，不要同时展示两个不同的内容……对。嗯，是的……现在我们进入平台部分。没错，我们现在正在讨论……哦，他们在描述“对，就是平台”。这里稍微往上一点。抱歉……另一个视频。
是的，所以你制作视频、上传文档、博客文章或想法，几分钟内就能获得旁白动画视频。只需通过聊天即可编辑。我觉得这才是我需要在顶部看到的内容，用来解释他们究竟在做什么……对。因为一开始我就不知道这是否适合我。
那么，他们会流失多少理想客户呢？这些人甚至无法弄清楚这是为他们准备的……向我展示产品能做什么，如果我喜欢这个功能，再给我看结果。对。我还注意到这里存在滚动劫持现象……是的。这让我很抓狂，我同意。
因为它感觉对我试图进行的滚动响应不够灵敏。它需要一段时间才能加速到应有的速度，而不是……我想在这个播客中谈谈网站上的滚动劫持和滚动操控问题。网站的平滑滚动在行业内是一场灾难，我认为应该使用原生滚动，不要阻碍用户以期望的速度与网站内容交互。
对……这正是我们之前讨论过的可中断界面。苹果几十年来一直引领这一潮流，他们的软件和硬件就是证明。你需要可中断的软件，因为我们的思维模式是可中断的。你可能会想到某事并点击别的东西，你绝不会希望用户陷入必须平滑滚动或进行滚动劫持才能感知或消化内容的环境中。
对……这几乎是一种傲慢的做法。我总是希望尽可能不 obstructive，像进入房间时那样礼貌。狄德罗总是说：“当你走进房间时，要礼貌而安静地进入。”
作为用户……这不是我们使用过的唯一网站。确实如此，我们已经习惯了在成千上万甚至数百万其他网站上滚动……在我们的手机上。是的，在手机上也一样，我们适应了滚动的灵敏度和精确度，当这种习惯被打破时，你必须重新调整自己去寻找想要的内容，这就变成了干扰。
它变得迟缓……我想暂停在这个内容上，但动画仍在播放。所以我试图使用触控板来抵消这种动画，这让我感到不适……我不想那样滚动。而且由于这里的点击目标很难命中，你必须按下这些微小的按钮。对……有点复杂。
归根结底，他们在这个网站上拥有多个不同的轮播图，每个后面都有视频播放器，打开后进入全屏视频播放模式，唯一的退出方式是按 Escape 键。总的来说，这些视频看起来做得很好……是的，而且让人们进入其中并能够看到更多、体验它们以及理解背后的案例研究，似乎是转化用户的关键。
对……而且我认为如果这改善了阿迪达斯或那家建筑公司的健康和安全状况，那么 Nullifysting 就做得很好。这就是他们销售的产品……太棒了，谢谢 Nullify。接下来是 Instinct，“今天构建月球未来”。好的，我们看到了一个月亮……对……“构建月球未来”，还有一个漂浮在周围的卫星。
是的，很不错，非常沉浸式。嗯……可以肯定地说这些人从事太空技术工作（笑声）。什么让你有了这个想法？航空航天技术。所以，这里先给你点赞。我想回到 AI 领域稍微说一下，这是一个很好的例子……我认为你可以很容易地让大语言模型为你制作一个类似 3D 版本或 WebGL 版本的……
你可以把这个月亮放在网站上，让它与光标产生交互。这是我可能会添加到这个页面上的元素。这两个元素实际上都是我会用3D渲染，然后作为实时对象放在页面上的东西。嗯，现在借助AI来实现这一点并非完全不可能。所以在这方面有一些想法，我想把它加到……
我们要构建所谓的“吸睛组件”。就像当网站上有一两个组件能真正吸引你的全部注意力，让你深深沉浸其中时那样。是的。我觉得这是一个展示此类内容的绝佳时刻。没错。我认为这部分做得很好，因为一开始我们就清楚地知道这是什么。
这里的3D展示动画很棒，本来可以只是2D或者一张照片。是的。你知道他们把它叠加上去，但有一种东西能吸引我们的注意力，让我们意识到这正是他们在构建的核心产品。背景中的月亮其实是一张照片，所以我刚才的反应是针对那个的，但你说得完全正确。
字体的使用也很棒。我觉得现在很多网站都在非常安全、保守的空间里运作，主要使用无衬线字体。敢于尝试在网站上使用衬线字体是一个不错的点缀。不过我要说的是，就这一点而言，标志本身的字体、这里的标题字体以及这段排版都各不相同，甚至有点相互竞争。
而且下面的标志有很多颜色，包括你可爱的标志，我觉得这几乎把太多注意力从实际信息上引开了。在这种情况下，只有一个核心信息，虽然简洁明了，但你还有空间添加另一块元内容，也许可以更多地介绍贵公司做什么以及你们在构建什么。是的。
让我们进一步深入探索。好的，现在他们变得更加具体了。“Instinct”正在为当今的太空行业建造月球着陆器。也就是发射、巡航和登陆。是的。我觉得这解释了正在发生的事情。
当你悬停时能看到它，真的很酷。我说的是第一个我其实看不出发生了什么。这看起来不太像发射过程哦。啊，原来是这样。好吧，你可能需要稍等一下才能看到效果。也许他们可以加快这个速度。
要快得多。总的来说，人们的注意力持续时间正在缩短。就像第二个那样很酷的地方在于，一旦你悬停它就会起飞。没错。我认为这是一个非常好的反馈点。当你鼠标悬停在上面的那一刻，这个组件就应该展开。
有一种可能性是让他们同时播放所有动画，因为这些时刻非常简洁。只是发射、只是巡航、只是着陆，它们实际上都可以作为快速循环的视频同时播放，这样可能能更快地传达要点。而且“着陆”那段视频并没有很好地传达出意思。
我不认为每个人都能立刻明白那是月球，然后你正缓慢地靠近它。我觉得你在等待的其实是这一刻，对吧？你想看到……是的。对，看那里。你看到影子变大了吗？就是那个效果。这就是我想看到的画面。是的。
我甚至不会展示……对，应该只有那部分就够了。就应该只是这个场景，然后是这个，但是顶部打开的样子……这就是这里需要做的全部事情。没错。
再次强调1、2、3，就像我们三个人一样好。在移动端上，这很快变成了一个漂亮的轮播图。所以很容易将其转换为移动端的体验。同样遵循J Tell和我所倡导的原始策略：技术、公司、新闻和职业机会合并。
如果这些是你认为对业务重要的内容，那么它们就是主页上的章节。展示技术、展示公司、展示新闻和职业机会。不要让我去使用顶部的导航栏。这些都是你可以引入主页的元素。
没错。然后从那里，通过使用非常简单的面板（sheets），你可以直接过渡到任何内容片段，这会让整体感觉更加易于消化和阅读。但是让我们点击浏览一些页面吧。
是的，这很酷。好的，技术部分……嗯，我喜欢这一点的……对。它看起来像是真实视频，所以这让我觉得这是真实的。
我是说这确实是真的。是的。他们是真的在做这件事。不像是一堆渲染图，你不知道这是真实的吗？还是只是他们的计划？不，他们真的在做这件事。他们在建造这个。
是的。我认为这里又是一个很好的例子，技术部分的信息并不多。这段视频本可以作为主页上“探索我们的技术”的内容板块。你点击它，打开一个新的组件像这样，滚动浏览它，当你滚回时，你就回到了主页。
这种交互模式在这里会非常合适。这太酷了，但你依赖人们点击“技术”页面才能看到这些内容。没错。这里的封面图片有点随意了。我觉得……有很多东西在发生……
这与其余页面的质量和风格不匹配。完全不匹配。我认为“Instinct”在这里要记住非常重要的一点是，你可以使用衬线字体作为标题。这成为品牌整体艺术指导的一个风格元素。
但你不要将其用于任何正文或段落文本中。那些应该是无衬线字体。这是一个无衬线字体。所以这里的信息和那里的信息，我会使用像Instrument这样的字体，或者就像普通的无衬线字体如Inter之类的东西，在这里效果会很好。
我们之前看过轮播图，比如这个轮播图不能拖拽。这个轮播图不能用触控板滑动。整个轮播图只有在我与这些按钮交互时才起作用。这绝对不是我会……你们能构建这样的组件吗？
我认为我的收获是，你必须发布轮播图套件。我们实际上有一个轮播图库叫Blossom Carousel。是的，Prevolus一直在开发这个。对。
“Blossm Carousel”基本上……嗯，这个轮播图可以滑动和滚动，它有多种不同的变体和版本。在移动端上它以堆叠形式呈现。这是免费使用的，并且……
Github，所以正在看这档节目的任何创始人或企业家们，你们可以>> 是的，这太棒了。每个人都应该使用它。你的轮播图瞬间就会变得好得多。>> 没错。>> 太棒了。>> 太棒了，本能（Instinct）。谢谢。>> 很棒的工作，本能。太赞了。
到这里就是本期“设计师视角”的全部内容了。马文（Marvin），非常感谢你来到节目。>> 非常感谢您的邀请。嗯，能来到这里真是太好了。能在旧金山感觉真好。这里的能量真是无与伦比。Y Combinator 太棒了，这里的办公室也很酷。我很高兴你们邀请我参加这档节目，能够和志同道合的人坐在一起，深入探讨一些幕后工作真的很不错。我们确实涉及了一些实际工作的内容，我想嗯……是的，谢谢你们让我展示一点我的工作流。看到这么多公司推出如此多创新的新作品真是太棒了。
是的，能看到你工作的幕后细节，真正进入你的思维世界，了解你是如何设定标准并提升水平的——不仅仅是视觉效果方面，还有大量的交互设计以及用户实际体验你所做的工作的方式。所以非常感谢你与我们分享这些内容，本期《Design Review》也就此结束。我们下期再见。朋友们，拜拜。