设计流程发生了怎样的变化
今天和我们一起的是 Shopify 产品设计工作室负责人 Marvin Schwaibold。他会带我们深入了解自己的工作流程，看看他如何使用最新的 AI 工具让设计落地；之后我们还会评审一些观众投稿的网站。欢迎收看新一期《Design Review》。
Marvin，感谢你来做客。
谢谢邀请。
在聊你在 Shopify 的工作之前，我想先多了解一下你的设计流程，以及你现在用哪些工具借助 AI 做设计。
我觉得流程本身并没有真正改变，仍然是高度迭代、按步骤推进的。设计工作本来就会有很多轮迭代和不同版本，但工具确实变化很大。以前主要用 Figma 做视觉布局，现在更多转向 AI 驱动的工作流。我会把 Figma 当作草稿本，记下自己的想法，但很快就会把它们做成真正可用的演示。只有在需要排版，或者需要向 AI 解释某些内容时，我才会偶尔再回到 Figma。
现在的工作方式更多围绕 Codex、Claude Code 这样的工具展开，也包括经常在终端里工作。这样我能更快得到可以使用的成品，并在手机或电脑上测试。这仍然是很有意思、不断迭代的循环，只不过我们确实已经从画布转向了更广泛的 AI 工具。
这套流程里有多少由 AI 驱动，又有多少是你这个人来完成？
很多工作还是由我来推动，让 AI 替我承担大量繁重任务。但质量把关和决策仍然由设计师负责。方向盘在我们手里。比以往任何时候都更明显的是，产出本身不再是问题，关键在于我们要非常谨慎地挑选哪些结果值得继续推进、哪些值得采用。所以，我们更多是在筛选 AI 创造的东西，并持续与 AI 来回协作。
只要你理解手头工作的复杂度，并能把它拆成许多子任务，逐项交给智能体，AI 就很擅长完成过去需要我们亲自做的许多事情。接下来就是不断往返协作。
听起来，你的角色其实是编辑。
现在我们比以往更像编辑了，我觉得这很有意思，也很好。其实设计师一直承担这个角色，只是以前要到可以编辑的阶段，需要在 Figma 里手工完成大量设计。现在 AI 工具能加快并扩展其中越来越多的工作。
所以最终产出仍由你这个人负责，要确保它达到你的标准。
一直如此。
只是现在有了这些工具，你能快得多地做到这一点。
完全正确。AI 确实提高了所有人的能力上限，但它不是工匠。它能执行复杂任务、运用我自己无法手写实现的技术，也能写代码；但它不知道什么好看、什么不好看。这要由我来判断，并引导 AI 朝正确方向前进。
我一直很喜欢你的作品。那我们先从 Shopify 的产品设计工作室聊起吧……
Shopify 产品设计工作室内部
先介绍一下 Shopify 的产品设计工作室，以及你们在那里做什么。
我和一群非常出色的设计师共事。我们加入团队大约一年了，大家一起负责公司的一项计划，重新设计并改善 Shopify 最重要的产品界面。从 Sidekick 相关工作——它是管理整个后台的 AI 基础设施层——到我们称为“绿色应用”的手机 App，再到后台和管理仪表盘，我们都在参与。最近我们还开始使用工程团队为我们构建的大量新 AI 基础设施。这一年确实令人兴奋。
Shopify 已经有二十年左右的历史了，对吧？
二十年。
二十年，所以我们正进入一个新时代。AI 正在改变很多事情。听起来你们的工作也在通过设计和体验本身，让产品现代化。你负责的产品设计团队具体做什么？你们只是用 Figma 和画布做设计，再交给工程师吗？
至少目前，这项大计划大致分成两部分。设计团队中的一部分重新设计了整个后台体验：从 Figma 开始，打磨界面，再把它做进网页里。另一部分是 Shopify 的 Sidekick 团队，他们在研究如何通过聊天自动化操作 Shopify 的许多界面。商家可以用聊天、Sidekick 或 AI 基础设施来管理店铺，自动完成线上经营中的许多工作。
这两个方向看上去几乎相互矛盾，甚至有点悖论，但配合得很好：一边打造漂亮的新 UI，一边又利用新的 UI 来生成 AI 基础设施和 AI 工作流。这很令人振奋，而且不少成果也能很好地迁移到手机 App，提升移动端体验。现在的交互更像对话：你可以和 Sidekick 谈业务，而不必事事都在界面里手动操作。
没错。加入 Shopify 之前，你和 Molly 一起打造了自己的产品工作室……
Molly：布鲁克林的设计工作室
加入 Shopify 之前，你和 Molly 一起经营自己的产品工作室。你们做了很多很棒的动态效果、动画和交互，我一直觉得很有启发。能不能给我们看看一些作品，并讲讲这些想法从何而来？
Molly 是我和工作室合伙人 J Tal 在布鲁克林经营的一家设计工作室。加入 Shopify 并把工作室整合进 Shopify 之前，我们经营了大约两年。
那段时间你们合作过一些大客户吧？
是的，我们和 Collins、Apple、Google 合作很多，也服务过不少规模较小的客户。项目类型很广，既有网页设计、产品设计，也有网站内容策略和信息层级设计。因为工作室规模小，我们能和客户建立非常紧密的关系，会连续很多周每周与客户见面，把每个项目当成高度专注的一段合作。为了保持专注，我们一次从不接超过两三个客户。这里放的是工作室期间做过的一些作品集锦。
很酷，有不少细节。动画很自然。每个画面切换时，背后的渐变和阴影也会跟着背景颜色变化。很多人可能不会特意注意到，但会直觉地感觉到这里有东西在发生，对吧？
这个想法来自挂在墙上的电视背后的环境光。那时还没有 AI，J Tal 把视频复制了一层，在背景里做模糊处理，让背景光跟屏幕内容的节奏一致，效果很好。
在这句话出现以前，页面上只写着“Molly 是一家位于布鲁克林的设计工作室”，底部只有一条像在振动的渐变。看起来像雷声，至少我们觉得它会让人想继续往下滚动。这样我们甚至不必直接展示作品，只要稍微暗示一下；往下滚动就能看到作品集。其他部分是简单、漂亮的轮播。你能看到一些我们工作室做的项目。
你提到的某些设计模式，来自我们叫作 Primal 的系统。它帮助我们理解和组织网站内容。客户往往会带来大量网站资料，我们用一种结构化的方法整理，再把内容组织成让用户可以探索的网站。我们一直觉得，浏览网站应该像是在探索，而不是网站强迫你把注意力交给它。每个内容都只隔着一层就能看到，并且逐步展开，不会一下子用太多内容把用户淹没。
你们具体是怎么做到的？
我可以直接带你看几个作品。这是我们和……合作的项目。
Collins 的书架
这是我们和 Collins 设计公司合作的项目。网站做了一年多。你看首页滚动时，每个区块都像一个章节；用户与网站互动后，还能从这个章节继续探索。我最喜欢的区块之一是这个书架，上面放着 Collins 的所有案例研究。
回去再把鼠标悬停在那些元素上看看。它们弹跳的感觉和常见效果不一样。
是的。
讲讲你们怎么做出来的。你没有用 AI 工具，而是手工制作的，对吧？
是的。这个项目很能体现设计和工程的紧密合作。我会先在 Figma 里排出大致布局，研究间距、尺寸、颜色、行列等，再交给 Jesper 这样的工程师去做具体实现，比如弹跳动画。所有这些“书”要一层层叠上去，最后一本落在上面时，还要再落稳一次。动作必须自然、有弹性，这样才会让人觉得这是一本书，也像是一排有生命的书架。这些细节看起来似乎不重要，但人们浏览网站时恰恰会感受到这些小瞬间。
这些细节真的重要吗？这个项目有位非常优秀的人，专门负责制作标签页的交互。大家很容易觉得：“放个标签页就行了，现成组件五秒钟就能搞定，然后继续做下一个。”在 AI 能做到这些之前，为什么值得专门投入一个人的时间，只做这一个交互？
原因有很多。特别是对 Collins 这样的设计品牌来说，访问网站的客户就是来寻找这些小彩蛋的。他们会想：如果我聘请这家机构，而他们做一个网站都投入这么多细节，那为我们的项目工作时，会加入什么样的巧思？他们为我们选色时，会不会建立一套系统，而不是随便挑五个喜欢的颜色？深入做到这个程度，才能展示你愿意投入多少心力，也能展示你把工艺和细节带到界面各处的能力。我们在 Shopify 也努力保持同样的用心和工艺水准。
说说你们把设计工作室出售给 Shopify、加入 Shopify 的决定吧。进入大型上市公司、在公司内部领导产品工作室，和你独立经营时相比有什么不同？
去年年初，Tobi 有一次对我说……
Tobi 的要求：未来需要被设计出来
“我们正在进入一个新时代，而未来需要被设计出来。”大概就是这么一句话。他说：“我想为未来做设计，需要聘请优秀的设计师帮我描绘一幅图景。等我们看到那幅图景，就会知道它是什么，也能沿着那个方向走下去。”
我觉得这就是 Shopify 给设计团队的使命。设计如今更处于前台。Shopify 是一家很坦诚、很有自我认知的公司，由创始人领导，也由工程团队主导；设计过去并不总是像现在这样发挥作用。如今设计正在帮助塑造公司未来发展的叙事，也让我们能更有工艺感、更自豪地打造为商家服务的工具和软件。这很美好，也是我们想加入的原因之一。
我们很享受为 Collins 这样的工作室、或插画师 Spencer 设计网站，但也希望产生更大的影响，看看我们的界面设计方法能否服务数百万用户，而不只是访问 Spencer 网站的少数人。
面临的挑战确实不同。你们工作室以前做的可能是新建网站展示作品，或者设计一个产品。现在 Shopify 有数百万用户，每一个设计和交互决策都关系到大量业务。作为内部设计工作室，你们现在的流程是什么？如何与公司其他部门、尤其是用户协作？
目前，我们的工作室只在 Sidekick，也就是 Shopify 的 AI 基础设施层里开展工作……
工作室如何融入 Shopify
整个团队和其他设计组织配合得很紧密，这种协作非常好。我认为这也是此类工作室成功运作的方式。我以前的职业经历中也遇到过相反情况：如果团队太孤立，就很难融入公司，也很难产生广泛影响。目前我们深度融入现有工作流程、时间安排和路线图。
这需要大量试验。提升界面本身对我们来说很容易，因为团队里有非常优秀的设计师，他们会先在 Figma 里重做部分界面，再借助 AI 很快把设计转成可以实际体验的原型。我们都知道，原型比任何 PRD 文档都实用得多，而且会很快在公司里传开。如果 Tobi 看到一个喜欢的原型，我们就可以继续把它做出来。
Shopify 最近探索的一些 AI 变体工作也是如此，稍后可以给你看。我们有一些想法，现在用现有技术模拟并生成原型非常容易。以前在 Molly，很多工作都是手工完成：设计稿是手绘式地逐项制作，动画由开发者实现。方向或许是我提出的，但除此之外还要和许多人协作。如今我看到两个人组成的小团队，借助工具完成过去需要一支大团队做的事情。
这让争取支持容易多了。我可以带着原型出现，更快吸引大家的注意；如果只有一个想法，就得先把整个团队都动员起来。
能给我们看看你们在 Shopify 做的项目吗？
这是对当前后台体验的一次重新设计和整体焕新，包括新的首页设计……
Sidekick 建议与全新后台
我们正在重新设计当前后台体验，包括新的首页，以及整个产品的整体焕新。其中一个很有意思的探索，是 Sidekick 和商家之间如何互动。我们考虑在首页信息流里展示 Sidekick 的建议。这些建议由我们提供：我们识别出商家在其业务生态里可以采取的机会和有益行动，再把它们展示给用户。
用户与建议互动时，就会开启一段 Sidekick 对话。我们可以直接替用户操作后台，并展示改动。比如我们告诉用户：“我们认为你应该重写这个产品描述，这是我们建议的版本。”用户可以发布修改。通过与 Sidekick 对话，就能直接管理自己的店铺。
核心想法是把 UI 带到用户面前、带入当前情境，而不是让用户在界面里一层层点击。未来商家可能会把更多时间花在首页，把 Shopify 当作一个控制台，向 Sidekick 分配任务、与它互动，并让它直接管理店铺。
你现在看到的仍是原型环境，里面有开发者 UI 面板。设计团队直接在界面里构建这些改动、演示和想法，以便测试并继续迭代。这个流程很不错：演示达到大家都认可的程度后，每个人就可以分头做自己认为有价值的版本；然后再汇合到同一个演示和同一种语言里。
是的。
这真是分享想法和背景信息的好方式。
你说设计师在这里直接构建产品。很多时候设计师只负责设计，不负责实现。但在 Shopify，你和团队会亲自构建很多设计，才能测试原型、用真实数据和真实体验观察效果。这对做好产品、确保它有用非常关键。你是如何从只在 Figma 里设计，发展到现在自己把它做出来、跑完完整测试流程的？
在这个例子里，后台本身就有一个我们在里面搭建的试验场……
会构建产品的设计师
后台里有一个试验场，我们在那里测试的不是生产代码，这些代码也不会被允许进入 Shopify 的主 GitHub 仓库。不过，AI 已经发展到让设计师拥有很强能力的程度：我们可以把任何想法可视化。以前做不到这一点。
刚才看的 Collins 网站，当时在 Figma 里的许多设计稿就是这样。你可以放大看任何部分，里面都是我们设计的细致 Figma 画面。这是一个构思过程，我、Michael Spicer 和 J Tal 一起做了这个项目。你能看到我们不断尝试新想法时，设计如何演变。这些方案太复杂、测试成本也太高，不适合直接写代码验证；那需要工程师专门实现。所以我们都先在 Figma 里测试。过去我们先做桌面版，再转成移动版；所有东西都要先在 Figma 里经过很长时间的压力测试，才会去麻烦工程团队。
现在我和 AI 协作时，Figma 依然有用。我只要画一个很粗略的草图，就能推进很多事情。比如这是我周末做的一个副项目，稍后可以详细介绍。我想做一个 2×3 的草地研究总览，展示我拍的视频。用户可以打开任意视频，再向下拖动关闭；模拟器里的交互也一样。我把需求描述给 AI，用 Codex 做出了这个原型。
不过，交互不能被中断。每次点开一个素材再把它拖下来，我都得等它完全回到原位并停稳，才能点另一张图。这种模式不应该如此。它必须非常灵敏，否则用户很快就会对界面感到厌烦。于是我回到 Figma，画了些非常简单的方框：点一个方框，红色面板弹出，可以滑走；滑动的同时点蓝色，蓝色就弹出来，再把它滑走后试绿色。
这很好地说明我现在如何使用 Figma：把它当作草稿本来绘制想法，再把想法交给 Codex。一方面我自己更容易把交互拆解清楚，另一方面 Codex 也能从视觉上理解草图。它对图像的理解和我很像，至少它看懂了我的思路和我想要的动效。我无法用文字或语音清楚表达，但可以把它画出来。
这里有两点值得强调。第一，Codex 和现在的 AI 软件、模型都非常擅长创造东西。你可以用这些工具做任何想做的东西，但你得懂自己在做什么，也要能把一个概念——例如着色器这种复杂项目——拆成各个小组件。理解这些指令后，才能把组件重新组合起来。
展示一下你是怎么做到的。也就是说，你手头有一批……
把真实草地重建为着色器
图片和视频，对吧？
对，是实际草地的图片和视频。
你想做一个看起来和真实草地一样、同时又能像着色器那样控制和运行的效果。为了让它看起来栩栩如生，你经历了哪些步骤？
我这里有几张截图，也能说明我怎样用 Figma。我第一次把视频交给 Codex 时，先解释了项目和我想走的流程：把视频转成着色器，在网页上运行，而且要尽可能精细、像素级还原。提取所有颜色、使用相同的十六进制色值，理解图像的每个部分，再尝试重建。它说“没问题，交给我”，然后给出了这个结果。显然和我们最后做出来的效果差得很远。
之后我把这个结果和原视频截图，交给 ChatGPT 里的另一个智能体。我也告诉它自己在做什么，并问为什么另一个智能体没理解我的目标。ChatGPT 帮我梳理了自己的工作流程：要告诉它光从哪里来、阴影是什么样，或许还要把图像拆成六个部分，分别处理后再合起来。
我开始思考怎样才能把需求讲得更清楚，让 AI 明白它实际看到的是什么。其中一个技巧是让 ChatGPT 渲染底层结构的地形图。随着反复调整，效果逐渐接近，草叶上也出现了更多像素。这些形状开始有点像草丛，看起来更真实了……
地形图带来的关键发现
……再往后我觉得终于有进展了：效果不再那么糟。但我发现，AI 没理解下面并不是一层平面，而是一些小土丘。
对。
我把这个信息再交给 AI，它就理解了：底下有一套起伏不同的结构和地形图。如果能把草渲染在这个结构上，就更容易生成整个场景。这个方法很有效。在这个原型里，你可以用一个开关控制草地显示或隐藏，也可以相当自由地调整地形。
对。
这又是前几天和 Josh 共进午餐时得到的启发。当时我们把 DialKit 装进了演示里。Josh 看了以后说：“看起来不错，但你应该看看草叶的长度。”我想了想，确实如此。于是我问 Codex：“我们有多少种草叶长度变化？”它说大约有 21.7 万种，但彼此只差 0.7 到 0.8。我们就决定加个开关，这样自己能直接看出差别。我不想每次都回到界面里，再通过聊天来回调整。把底层结构暴露出来，也能帮我发现错误。
我最初实现的地形图完全错了，比例也歪了。所以无论如何都不可能得到想要的结果，因为我在五轮提示之前就误解了某些东西，自己当时还不知道。DialKit 帮我把问题拆解出来。通常改几个数值，就能直观看到我究竟想要什么。比如草叶变长后，可以加大风力。这是我想测试的效果，看看风吹起来能有多夸张。你能看到它变得有点疯狂。
这是一个有趣的小项目，让我试试这些工具能把我带到多远。没有 AI 的话，这些事我以前做不了。我可能有这些想法，却没有能力或条件把它们实现。我觉得这正是设计师角色正在发生的变化：设计师变得更全栈，工程师和产品经理也是如此，大家都在向各个方向拓展。
现在似乎什么都不再受限制了。我们也常看到这样的模式：先做原型，再加一些小控件来调整不同变量，方便测试并把效果调好……
DialKit：把变量调出来
……以前花时间做这些控件不划算。你可能只会在代码里调参数，调到满意就结束了；那样要花很久，甚至根本不会做。现在很容易做出小工具来控制变量、测试效果，再把参数精确调好。我猜 DialKit 的名字就是这么来的。能介绍一下 DialKit 吗？它能让你轻松创建并调整项目里的各种参数，对吧？
正是如此。你可以通过它的网站运行 npm 命令，网站上有现成的安装提示，把它接入手头的项目就可以。我还可以快速展示另一个项目里的 DialKit。
这个例子是在调整轮播。我受设计负责人 Mike Matas 启发，他在 Luv From 的作品集轮播就是这种方式。我想研究这个交互里的细节：你可以拖动一个元素，松开后，能量似乎会从这个元素向外扩散，再与左右相邻的元素产生碰撞效果。
做出这个侧边面板后，我能深入查看自己用 91 次提示拼出来的“弗兰肯斯坦”。它能帮我调整重要参数。比如 pull boost：我往下拖得越快，反弹力度就越大。你要试着调这个开关，效果不能太吓人或太强，否则整个系统就会感觉不对。我知道什么时候感觉不对，但光靠和聊天工具来回沟通不行；你得把这些参数直接展示出来。
我们看的这些项目，以及你说的内容，都在追求一个高得有些不切实际的标准；现在有了工具，达到这个标准比以前快多了。
是的。
那设计师的角色是什么？非设计师又会怎样？……
给创始人和设计师的建议
大家应该怎样看待设计？我们的很多观众是早期创业公司的创始人，可能觉得自己是工程师，天生不懂设计；也有设计师想知道能不能创业、能不能亲自做出产品。他们习惯在 Figma 里设计，再把稿子交给别人。你们以前也经历过这样的阶段。你建议他们如何借助 AI 提升设计质量？
我一直把 AI 看作一位无限耐心的协作者和队友。即使我为了把动画调对试了 91 次，Codex 也不会生气。如果我让工程师这么做，对方大概会抓狂。
所以我的建议听起来可能有点傻：多动手试用这些工具。直接描述你希望它做什么。看到结果后别放弃，要告诉它这和你的设想哪里不同。给它看一个你喜欢其轮播动画的网站，或者发一张从 Cosmos 保存的截图；给它一套你想让它模仿的配色，然后持续来回交流，一起塑造你想讲的故事。
对设计师来说，我学到的一招就是先试着模仿。现在我也在尝试复刻一款已经出现很久的轮播动画，因为我有一位无限耐心的老师和朋友，能陪我一起搭建。于是我可以深入研究它的实现。这是我自己的实验，我周末在自己的时间里做，不必打扰工程师。我想弄明白这个东西是怎么拼起来的。这样能让我成为更好的管理者、更好的协作者和更好的团队成员。我觉得我们就该这样使用这些工具。
这建议很好。YC 下一期项目正在接受申请。如果你心里有创业点子，就去 ycombinator.com/apply 申请。现在申请永远不算早，填写申请也能帮你完善想法。好，回到节目。
我们来评审几个网站吧？
好啊，开始吧。
行，开始。首先是 Nstack。
网站评审一：Endstack
首先是 Nstack，来看看。它说：“你唯一需要的 AI 工作空间。一个强大的智能体，一个直观的桌面工作区，以及处理任何任务所需的全部工具。”
一开始有个做得不错的地方：它模拟了桌面环境，所以你感觉自己就在桌面里，也可以直接探索。好处是你一进来就像在使用他们的产品。
是的。不过我有点不清楚该拿它做什么。它说是唯一需要的 AI 工作空间，一个桌面就能处理任何任务。但说得太宽泛，就很难判断我具体该怎么用。也许真的什么都能做，但有时最好明确告诉用户：到这里以后，你希望他做什么？
是的。从视觉上说，现在的内容有点过载。侧边栏内容很多，还有可以滚动浏览的聊天记录；这里似乎有某种界面，而 Nstack 的主要信息又在这里。我很难判断应该先看哪里。
我在德国读平面设计、学排版时，老师做海报总会说：“这张海报没有主导性。”意思是没有任何元素能吸引我的注意。看着它，我不知道该做什么，也不知道先看哪里。
是啊，我该点这些图标吗？进类似 Slack 的界面，还是进聊天界面？我是在这里发消息和聊天吗？为什么我叫 Mark？
看来你现在就是 Mark。
对，我现在叫 Mark。
我会把这里一些杂乱内容折叠起来，把重点放在介绍、标题，以及希望用户读到并记住的内容上。再给用户一个简单入口，让他能快速看到工具或软件的演示，这会很重要。不过整体风格很俏皮，有点复古，挺不错。
对。通常页面上应该有一个明确的主要目标……
每个页面只设一个首要目标
……一个首要目标、主要 KPI，或者用户进入网站后最希望他完成的事情。我不确定这里的目标是什么：也许是“开始使用”，也许是“和这个智能体对话”。但现在有太多东西分散注意力，让用户看不出主要目标是什么。
“开始使用”可能是主按钮，但旁边还有其他按钮，颜色相同、位置也很显眼，比如“通用工程”“营销”“开始使用”。用户会疑惑到底该先关注哪个。
有人曾经告诉我，做网站时通常应该围绕一件事，把它做好，再围绕这件事建立整套叙事。对 Collins 来说，我们很自豪书堆这个设计，也希望把它展示出来。网站的核心是大量视觉作品，而进入对应页面的路径很清晰；进去以后，用户很容易继续浏览、停留很久。
如果我是 Nstack 的设计师，我会问自己：有什么事情能让大家围绕它行动、让用户去看、去做？如果用户最后只记住一件事，也比试图同时做所有事情更好。现在这个页面上有很多东西都在争抢注意力。
对，这和逐步展示内容正好相反。
没错。
但也有一个优点：他们试图直接把你放进产品里。我想这就是产品实际运行的样子。他们没有先讲一堆产品介绍，再让你点很多东西、注册账号；如果用户的“顿悟时刻”来自亲自使用产品，那就尽早让用户进去。不过现在可能还需要多一点背景，让人知道在这里具体该做什么。
同意。
谢谢 Nstack。接下来看看 SkillSync。
网站评审二：SkillSync
“一款免费的本地优先 Mac 应用，能让你的记忆和技能在所有智能体与队友之间同步。”
不错，至少我觉得它把公司做什么讲清楚了。
对，功能就是技能可以同步。
是的，页面用了深色模式。我觉得字体很小，Logo“SkillSync”和下面第一段之间的字体比例也有点奇怪，有些字高看起来不太协调。还有很多信息挤在一起。
就像刚才聊 Nstack 时说的，如果把功能抽象成很多细节条目，却没有清楚说明它们具体做什么，用户就很难理解。必须认真阅读所有功能介绍，才能弄懂产品。
想听听你的看法。他们这里放了一组侧边栏标签，试图展示不同功能。你对标签页有些有趣的想法：你做的那些滑块其实也有点像标签页，只不过用户能直接看出有多个选项，而且一次能看到好几个。
很多人做这类标签页时会掉进一个陷阱：用户通常不会把所有标签都点一遍、全部探索。因此你得假设藏在每个标签背后的内容可能没人会看到。你怎么看？怎样才能鼓励用户多探索、了解更多，而不是把所有信息都藏在标签后面？
我一直遵循一条原则：你不能……
标签页的问题
如果你在演示作品的幻灯片上不会放超过七行字，那么网站也该制定类似规则，限制展示多少功能。这里我会用三列组件，把所有功能压缩整理，想清楚 SkillSync 最重要的三项能力是什么：它能做 X、Y、Z。先展示这三项，并让它们都可以点击，进入弹层或页面转场，查看更多信息。这样每一项下面还能承载更多背景。
现在的内容很平、很宽，却不深入，有点像“宽一英里、深一英寸”，你看不出自己究竟在看什么。需要深入理解产品功能，再把它们浓缩成几个原则、规则和重点。然后再把更多信息放在这些支柱之下，用户就能更好地理解网站的逻辑和导航方式。
这对创始人也有帮助。如果我还在经营工作室、正在和这家公司合作，我们会先问一个问题：“你们到底最擅长什么？”
如果核心是同步技能，那就只讲这件事，把它做得精彩、展示出来，再尽快让用户开始使用产品。我们已经滚到页面底部了，页面不长。
是啊。
用户习惯滚动。所以如果一些重要信息藏在这些功能标签后面，不如直接展开，让页面更长一点。没关系，人们可以继续往下滚，不必为了缩短页面把所有内容都藏起来。
正是如此。
我还看到很多人使用 AI 工具时会掉进另一个陷阱……
没有提供价值的 AI 插图
……现在做一张图或一段动画很容易。这里每个功能都配了动画，对吧？它们大多有相似的问题：文字很小，动画里还有些小点从角落移动。以前根本不会有人专门花时间去设计并编写这样一个效果。
但这不代表它真的给产品增加了价值。正如你刚才所说，设计师要负责筛选、设定标准，并确认作品传达了正确的信息。这里虽然放了很多东西，却没有帮助我理解它想表达什么。
我完全同意。这也说明你需要找到拥有合适技能的人来帮忙。AI 也许能把整个网站搭起来，但要把功能抽象成插图，最好还是找一位做过信息图、擅长插画设计的人合作。把信息讲清楚后，这些插图甚至可以成为 SkillSync 品牌形象的核心部分。
嗯。
这让我想起几年前我和 Gemini 合作时，看到一段编织状动画。它展示模型及 Gemini 的各种能力，最后汇聚成一个螺旋结构。那段动画几乎把模型能做什么讲得一清二楚。
嗯。
最后它变成一条很细的线，然后显示“Gemini”。这段动画由许多比我厉害得多的人花了很长时间制作，之后又有优秀工程师把它做成网站上的滚动动画。它一下子就让人理解产品，随后你进入产品、开始使用。那段动效一直留在我记忆里，准确解释了模型在做什么。有时更有艺术感、更抽象的表达，反而很有效。
我觉得 SkillSync 也有很多不同的视觉表达方式可以尝试，可以更讲究工艺、用更有图形设计感的方式呈现。这就是我给他们的建议。
很好，谢谢 SkillSync。
非常感谢。
好，接下来是 Instaplay。
网站评审三：Instaplay
我看到一堆精选内容，分不清是电影还是游戏。上面写着“设计一个……”。
“鸟类分类”。
鸟类分类？看来这是可以玩的游戏。
我想是的。
好，怎么玩？这里有一群鸟，声音也响起来了……我们换一个试试。点开始。看起来我们在和一只狼打架。好了，够了。
这里有个提示挺有意思：“描述你的游戏创意”。但点进 Instaplay 时，标题下面没有任何说明，所以我们得自己猜这个页面是做什么的。
是的。
我们第一眼看到的是那些游戏画面和截图。
对。
所以我们直接点过去了。
没错。
结果我们没注意到它的主要用途其实是让用户即时创建自己的游戏。
是的。
页面上加一行文字，或者更醒目地突出提示框，都能说明这一点。这又回到了前面讲的原则：用户进入页面时，你最希望他记住什么？是探索平台上已经制作好的各种游戏，还是自己创建游戏？
创建游戏之后会进入注册页面。如果用户还没看到自己生成的游戏，恐怕没人愿意注册。
对。
所以得给用户足够的免费额度，让他先体验产品。这就是获取一个用户的成本。这个平衡非常关键，他们肯定也在考虑。但这个获客成本得足够低：我输入要求，产品就应该准确生成内容，并且让我还能再试一两次。效果不错，我才可能真的用它。
可是你输入提示并提交之后，它就把你带到登录页面。
是的，问题是我们还不知道生成得好不好。
这正好是个例子：这里也可以做一个很棒的交互式轮播……
展示游戏本身，而不是缩略图
……每个游戏都可以配一段大约十秒的短视频。
对。
这样比现在只看静态图片强。我们不知道图片后面是什么，也不知道自己在看什么。可以让 Codex 打开每个游戏、录下屏幕，再把视频换成缩略图，至少在鼠标悬停时播放。这样会让页面和这些游戏世界更有互动感、更有活力。我觉得这些封面想说的是：“看，Instaplay 能做很多事情。”
嗯。
如果主要行动号召是让用户创建自己的游戏、亲自当游戏设计师，那我甚至不觉得必须让用户玩遍所有现成游戏。
对。如果这是主要行动号召，现在的设计没有把用户带到那里。应该先帮用户创建一个游戏，让他们玩起来；等他们想保存、之后再回来或者分享给朋友时，再要求注册账号。
这里还有“创建”“我的游戏”“为你推荐”“探索”这些选项，但没有人知道各自是什么意思。点“我的游戏”又会要求注册。如果用户还没有账号，可能根本不该看到“我的游戏”，更不该点进去再被要求登录。“为你推荐”会把我带回刚才的游戏，也不一定合理；“探索”其实就是当前页面。主页已经可以探索了，没必要另设一个按钮。点进探索页后，唯一变化是输入框消失了。
嗯。
所以现在反而不能创建游戏。你得站在第一次访问网站、完全不知道产品是什么的人的角度想一想：他们要怎么和产品互动？
对。你刚才进了游戏，我们说“这个玩完了，回去吧”。但我没看出来快进图标是回主页的按钮，还以为它会带我去下一款游戏或做点别的。
这种图标很容易被误认为是出了错。我刚才实际点了浏览器的返回按钮，因为页面上没有明显的回主页入口。
没错。
不过这个产品很酷。你能想象让用户输入提示，马上生成一个像刚才赛车游戏那样的游戏。人们可以玩上好几个小时。关键是尽快让用户体验到“创建游戏”并亲自玩起来的价值。
用户创建出满意的游戏后，能和朋友分享，很可能是不错的增长策略。这类产品有很大潜力。向他们致意。
是啊，做得不错，Instaplay。接下来是 Mintlify……
网站评审四：Mintlify
……为基础设施智能体提供构建工具，并为初创公司、企业和智能体提供可自动更新的文档。
对。
我很熟悉 Mintlify。这是一家很棒、增长很快的公司，很多 YC 初创公司和其他开发者工具都在用它。
是的。
这是个漂亮的网站。
看起来很专业、很值得信任。
简洁、干净。
是的，色彩、字体、间距和行高的组合都很好。
我们深入看看，究竟是页面上的哪些元素让人觉得整洁、专业？
我觉得是因为它恰到好处地做了减法，只展示真正有必要的内容。标题很清晰，下面配一小段文字，“开始使用”的按钮非常醒目。页面还展示了某种仪表盘，让人能想象文档可能存放在哪里、又会如何更新。
背景图形增加了氛围，没有喧宾夺主。它很微妙地待在背景里，让人想到某种网络结构。整体感觉是，他们在谨慎、认真地打造某种基础设施智能层。
我知道很多网站都会放客户 Logo 墙，但这里的排列做得很好。
上面有很多有公信力的大公司，形成了社会认同。看到 Microsoft、Anthropic、Ax 和 Coinbase 都在使用，就让人觉得这是专业、可信的产品。
对。
社会认同，以及少即是多
市场上涌现了很多工具，需要这种证明让人想：“既然 Spotify 在用，也许我们应该看看。”整体上，这些界面和功能被抽象成连贯、漂亮、经过艺术指导的视觉元素，很有吸引力。
不过我觉得这些卡片的标题有点太小了。现在它们都配着相同的背景色，我反而一张都没注意到。他们在背景里重复用了编织状动画，用得太多就失去了新鲜感。我觉得这里应该做减法，把标题放大一些。
这一部分也是如此，我不确定是否需要这样的内容。叠在现有背景上很难读。
但这里想表达的内容很重要：你可以控制谁能访问，也可以在现有配置上继续构建。
对，但它很容易被忽略。截图占了很大空间，动画又把注意力从重要标题上拉走，而标题竟然埋在底部。
正是如此。你得判断视觉内容到底传达了多少信息，以及还能否通过文字补充。这里的平衡稍微有点偏，不过整体确实很漂亮。这些轮播也很好用，可以直接滑动。颜色和照片互相呼应，这一点常常得不到足够认可。曼哈顿和蓝天对应 Coinbase 那张蓝色卡片，滑动浏览时感觉很舒服，也很有品牌感。
对，很有品牌感。
不过这里几种颜色太接近了，我会给这张换一个颜色，比如灰色。
我可能会用更接近 AT&T 的蓝色，但会给这张换另一张图。
这个建议大概是对的。总体来说，页面非常干净、值得信任。
区块之间也留了很多空间。我知道你设计时经常用这种方法。
首页的每个区块基本上都是对应子页面的第一章……
把首页区块设计成章节
……我们以前给客户设计网站时，如果他们有产品、解决方案、资源和价格，这四项就会成为首页的主要部分，因为这说明大家认为它们最重要。用户滚动页面时，就按重要程度从高到低依次看到这四部分。毕竟用户会随着滚动逐渐离开，重要内容显然应该放在上面。
每个区块还应该引导用户继续了解相应内容。理论上，这个网站首页应该有一整块产品介绍，用户再从这里点进产品页面。产品本身可能还应该有独立首页，因为产品种类很多。
总体上，它设计得很好，也很简单。看得出他们花了时间、用心做这个网站。
是的，感觉更通透了。
这里看起来比我们看过的其他网站更清爽。
内容其实不少，但被分散、留白后铺在页面上。
每样东西都有自己的空间，用户一次只需关注一件事，而不会觉得很多东西都在争抢注意力。你说得很有意思：这种设计反而花了更多时间。
对。
因为要做出取舍并不容易。决定保留什么需要花功夫筛选。把所有东西都放上去很简单，难的是判断哪些应该删掉。
这类讨论在团队里尤其难进行。每个人都想把自己的功能放到页面上，所以你得筛选、做决定、精简内容。这就是设计师的工作：降低复杂度，一次展示一部分，并用这种方式推动叙事。很难做到，但做好后会有回报。
说得好，Netlify 做得很棒。接下来看看 Netlify……
网站评审五：Knowlify
> 页面文案： “用户不读文档，患者不读手册，员工不读内容。Nullify 能把你的文档和想法变成配有旁白的动画视频。你可以几分钟内自己制作，也可以让我们的工作室团队代劳。服务于那些需要的视频比自己有时间制作的更多的团队。”
我做字体设计，所以第一眼就会注意到：这里有一个标题、一段正文，下面又用另一种字号重复了一段类似正文的内容，然后是“预约演示”和“免费开始”两个按钮。单是首屏就可能有四五种字号，还没算 Logo、横幅和角落里的提示。从排版角度看，信息太多了。可以有标题和一段正文，把所有重要信息放进这段正文里；不能不断加标题，让用户逐条读完。
我第一眼注意到标题里有两个动态替换的占位词，感觉有些让人迷失。
是的。
如果只变一个词还好，用户可以理解是“我们为这类人做这个，也为那类人做那个”。但两个部分同时变化，就像用户、文档、手册都在变。而且从标题根本看不出这是视频产品。
对。
我觉得他们想说：“大家不读文档和 PDF，所以要用视频让大家注意到内容。”但他们可以从正面讲，说明视频能让内容更有效地传达。
他们能不能让自己的工作室先做一段介绍 Nullify 的视频，放到网站上给我们看？
这样就能证明他们的观点了：人们不读这么多内容。
对，我为什么要读这些？直接给我们看产品视频就好了。这里有个展示产品的轮播，我们点开看看。
对，我猜这些是他们制作的动画示例。
这些卡片不能直接点，必须点旁边的小图标，这不太好。整张卡片都应该能点击。
嗯，看到它就会想点进去。
> 旁白： 每年有数千名仓库工人受伤。
好，这是一个教学动画视频。
> 旁白： 这些事故大多完全可以通过警示设备避免。
视频制作得不错。但接下来我们想做的事情很有意思，这又和你之前展示的轮播有关……
让用户探索作品
……我想浏览他们的作品。点开一个之后，它会全屏播放，我就得琢磨怎么缩小或关闭。我真正想要的是把它放大到能看清视频，然后还能继续切换到其他作品，因为我想了解他们作品的深度和多样性。
没错。
现在要做到这点有些困难。
是的，这些卡片都不能点开，也不能全屏查看。你只能用那些小按钮，没法滚动浏览或快速切换。我希望它放大到大约屏幕的 90%，而不是占满全宽、把一切都盖住。
这样我就能看到发生了什么，然后滑动浏览其他视频。下面还可以显示对应的公司名称。
对。
也许这些其实都是案例。点开时可以用有层次感的抽屉式面板：背景页面往后退，面板滑上来，顶部显示视频，旁边说明视频的用途；比如是哪家建筑公司，还可以介绍案例。也可以链接到客户故事或成功案例。这些显然是展示过去合作客户的作品，所以应该把重点放在视频上，减少对顶部 Logo 横幅的强调。标题也应该更简洁，不要同时来回切换两个内容。
对。
然后现在进入平台介绍。
正是，我们终于看到平台了。
这里还有另一段视频。你上传文档、博客文章或想法，几分钟内就能得到一段带旁白的动画视频，还可以通过聊天来编辑。我觉得这些信息应该放在页面最上面，解释他们到底在做什么。
对。
因为一开始我甚至不知道这是不是适合我的产品。这样他们会失去多少潜在客户？用户可能根本没意识到这正适合自己。
展示产品做什么。如果我感兴趣，再让我看成果。
对。我还注意到这里用了滚动劫持。
是啊，这让我很抓狂。
滚动劫持
这让我很抓狂。
我同意。它对我想进行的滚动操作响应不够及时，要花一段时间才逐渐加速。
我想借这个播客聊聊滚动劫持，以及网站操纵滚动的做法。行业里的平滑滚动简直是一场灾难。我觉得应该使用浏览器原生滚动，不要阻碍用户按自己的速度浏览网站内容。
没错。这和刚才说的可中断界面是一回事。Apple 几十年来一直在引领这方面的设计，软硬件都证明了这一点。我们需要可中断的软件，因为人的思路本来就会随时转向。你可能正在想一件事，却突然点开了别的内容。不能把用户困在一个必须平滑滚动、被滚动劫持控制的环境里，只因为你觉得用户应该按某种方式理解内容。
对。
这甚至有点傲慢。我一直觉得，进入用户的空间时应该尽可能不打扰、尽可能礼貌。狄德罗曾说过：“走进房间时，要礼貌而安静。”
而且用户用过的可不止这一个网站。
没错。
人们可能在成千上万、甚至数百万个网站上滚动过。
也包括手机。
对，手机上也是。大家习惯了滚动的灵敏度和精确度。一旦网站改变这些行为，用户就得重新适应、重新找内容，注意力反而被分散。
而且整个体验变得迟钝。我想停下来读一段内容，动画却还在继续播放。我只能用触控板反向操作，和动画较劲，这让我很不舒服。我不想那样滚动。再加上点击目标很难点，你只能按那些很小的按钮。
是的。
这就有点复杂了。说到底，网站上有多个轮播，后面都是视频播放器，会全屏打开，而且只能按 Escape 键退出。
总体来说，视频做得很好。
视频确实不错。让用户进去观看更多视频、了解背后的案例，才是促成转化的关键。
对。如果这些内容能改善 Adidas 或那家建筑公司的健康与安全状况，那 Nullify 的工作就做得很好。这才是他们真正销售的产品。
很棒，谢谢 Nullify。接下来是 Instinct。
网站评审六：Instinct Space
> 页面文案： “今天就开始建设月球的未来。”
好，我们看到一颗月球。
还有一颗漂浮的卫星。
是的，很漂亮、很有沉浸感。
嗯。
我想可以很肯定地说，他们在做航天技术。
哈哈。你怎么知道？
航空航天技术。首先要夸一下这个网站。回到 AI 话题，这是个很好的例子：现在很容易让大语言模型生成一个 3D 或 WebGL 版本的月球，放到网站上，跟着鼠标光标互动。我可能会在这里加上这样的效果。页面里的这两个元素都可以做成 3D 实时对象。用 AI 实现这些并非不可能。
我会加一个这样的设计元素。我们把它称为“吸睛组件”：网站上有一两个特别抢眼的组件，能抓住用户的注意力，把人带入正在讲述的内容。
是的。
这正是展示这种效果的好时机。
我觉得他们做得很好，因为一开始我们就知道这是做什么的。这里用 3D 展示动画，原本也可以只放一张照片。
是的。
但现在的视觉确实让人注意到他们正在建造的东西。
背景里的月亮其实是照片，所以我刚才说的主要是背景。不过你说得对。字体也用得不错。很多网站都用安全稳妥的无衬线字体，而他们有勇气在网页上用衬线字体，这是个很好的选择。
不过，Logo、这里的字体和这段文字用了不同的字体，彼此有点冲突。下面这些 Logo 也有很多颜色，包括你们漂亮的 Logo，我觉得它们有点过于抢眼，把注意力从真正的信息上带走了。
这里的信息其实很精简，但还可以再留出空间，多放一点背景内容，介绍公司做什么、正在建设什么。
对。
我们再往下看看。
好，现在他们讲得更具体了：Instinct 正在为当今的航天产业打造月球着陆器……
发射、巡航、着陆
> 页面文案： “发射、巡航、着陆。”
对，这大致说明了他们在做什么。
鼠标悬停时能看到动画，挺酷的。不过第一个动画我没看懂发生了什么。
我不太觉得它看起来像发射。
噢，出来了。原来得等一会儿才能看到。也许可以更快些。
快很多。人的注意力跨度越来越短。
第二个很不错，鼠标一移上去它就立刻起飞。
对，这是个很好的反馈。只要鼠标悬停，动画就应该马上开始。甚至可以让三个动画同时播放，因为它们都很短：发射、巡航、着陆。把它们做成快速循环的视频，用户会更快理解。着陆这段现在没有把重点说清楚。我觉得不是所有人一开始都能明白那是月球、飞行器正慢慢靠近。我觉得大家真正想等的是这个瞬间——想看到……
对，对，你看影子越来越大了。
没错，那才是我想看的。
对。
我甚至不会展示前面那些内容。
是啊，只要这一段就够了。
只需要这一幕，然后再接上打开顶部的画面，就足够了。
对。
另外，三项内容在手机上很容易变成一个好用的轮播，很容易适配移动端。
Primal 的策略里，我和 J Tal 一直有个想法：如果技术、公司、新闻、招聘是你认为业务最重要的内容，那它们就应该是首页的几个章节。直接在首页展示技术、公司、新闻和招聘，不要让我再去点顶部导航。这些内容都可以放进首页。
对。
然后用简单的抽屉式面板，就能从首页进入其中任何一块内容，让整页更容易理解、更容易阅读。我们再点开几个页面看看。
好，挺酷。技术页面……
技术页面
……它看起来像真实拍摄的视频，所以让我觉得这是真的。
这本来就是真的。
对。
它们都是真实的，不是一堆效果图，让你猜这是真的，还是他们的计划。实际上他们真的在做这件事。
他们确实在建造。这个例子也很好：技术页面上的信息不多。整个视频完全可以作为首页的一段内容，标题写“探索我们的技术”。点进去后打开类似这样的新面板，用户可以滚动查看；滚出来时又回到首页。这种交互在这里会很合适。
是的。
现在你得指望用户点击技术页面，才能看到这些内容。
正是如此。而且我们在封面图上有点粗心了，内容显得杂乱。
它和其他页面的质量与风格不一致。
完全不一致。我觉得 Instinct 要记住：衬线字体可以用于标题，作为品牌整体艺术指导中的风格元素。但正文和段落应该用无衬线字体。这里这些信息，我会用像 Instrument 这样的字体，或者 Inter 这种常见的无衬线字体。
我们刚才也看了轮播。这个轮播不能拖动，也不能用触控板滑动，只能点这些按钮才能操作。我肯定不会这么构建这个组件。
我的结论是，你们应该发布一个轮播组件……
我们其实已经有一个轮播工具包了，叫……
Blossom Carousel
Yes，Prevolus 最近一直在做一个轮播组件库，叫 Blossom Carousel。
是的。
Blossom Carousel 支持滑动和滚动，有很多不同的变体与版本；在手机上会叠成卡片。它可以免费使用，代码在 GitHub 上。正在看节目的创始人和创业者都可以试试。
这个太好了，大家都应该用。用了之后轮播马上就会好很多。
没错。
太棒了。Instinct，感谢你们，作品做得很好。今天的设计评审就到这里。Marvin，非常感谢你来做客。
非常感谢邀请。我很高兴能来这里，也很喜欢旧金山。这里的氛围无与伦比。Y Combinator 很棒，这里的办公室也特别酷。很高兴你们邀请我上节目，让我能和志趣相投的人一起深入看看这些作品。感谢你们让我展示自己的工作流程，也很高兴看到这些公司不断拿出这么有创新性的作品。
能看到你的幕后工作、了解你的思路，以及你如何设定标准、提升视觉效果和交互体验，真的很棒。谢谢你分享这些内容。本期《Design Review》到此结束，我们下期再见。拜拜！