从空地到入住：一个豪宅建商网站的设计思考

这次做的是 Structiv 的网站。这是大达拉斯地区一家为客户设计并建造定制住宅的公司。网站以一段十五秒的影片开场，一块空地变成一座建成的庄园；接着横向滚动，依次是图纸、灯光、室内、施工流程、预算计算器和公司介绍，一共七屏。整个过程我都借助 AI 完成。下面是视频版，也可以继续往下看文字版。

Play video

视频按制作顺序走了一遍。这篇更想讲背后的思考：网站为什么用一段影片开场，为什么横向滚动，以及真正在浏览器里跑起来以后，我又删掉了哪些东西。

动手设计之前，先回答四个问题

这个项目的需求可以归结为四点：

1. **几秒钟内讲清楚，所有事情都由同一个团队负责：**设计、施工、室内，一直到交付。
2. **高端、让人记得住，**但不能做成房产广告。
3. **回答客户建房前最担心的问题：**大概要花多少钱？需要多长时间？由谁负责？
4. **吸引合适的咨询，**也让预算或需求不匹配的人提前自己做判断，不必浪费一通电话。

另外，整个网站要围绕一栋真实的房子展开。每张图、每一屏，展示的都必须是同一栋房子：同样的屋顶轮廓、同样的门窗、同样的车道。

第一点最重要。“同一个团队，从始至终”这句话很容易说，也很容易被略过，几乎每家建商都这么说。所以我希望访客是亲眼看到这件事，而不是读到这句话。

一句话，九个镜头

我的想法是：用一个连贯的长镜头开场，一块空地慢慢变成一个真正有人住的家。不切换、不在不同项目之间跳来跳去，只有一栋房子、一台摄影机、一个团队的工作。

生成任何图片之前，我先把这段过程拆成了九个镜头：

每一行都有自己的任务。第一行让施工开始：空地、挖掘机进场、打地基。第二行让房子成形：框架、外立面、完工。第三行从建造转向生活：推开大门、一家人坐在沙发上，最后升到空中俯瞰整个庄园。

最后这一行，才是这段影片的重点。建商的网站很容易停在“房子建好了”。但客户买的不是一栋建筑，而是搬进去的那一天。所以影片在结束之前，要先走进屋里。

分镜确定以后，我为每个镜头制作画面。这一步生成和淘汰了很多轮，判断标准也不是单张好不好看。我会把整组图放在一起问：这明显是同一栋房子的不同阶段吗？窗户的位置对得上吗？车道的弧度一样吗？单张再漂亮，只要破坏了连贯性，就只能放弃。因为只有每个镜头都能接上下一个，整段影片才立得住。

在网站上，影片上叠了一些实时信息：从 Day 001 跑到 Day 412 的天数计数，以及当前阶段的标签（场地与地基、框架、外围护、景观与收尾）。开场标题是 “Every estate starts as dirt.”，收尾是 “From first dig to first dinner.”。镜头停在俯瞰画面时，房子上会出现五个标记点（天窗、泳池、车庭、橄榄树花坛、石灰岩立面），点开都是一张带特写的小卡片。

为什么横向，为什么是图纸

网站的其余部分，我希望浏览本身就像沿着一条路线，一步一步往前走。所以它横向滚动，一次一整屏。

把这一切串起来的点子，来自客户自己的行业。建筑师交付一栋房子，交的是一套图纸：A-00、A-01、A-02……于是每一屏都成了一张图纸，编号从 A-00 到 A-06，切换到下一屏，就像翻到下一张图。字体、细线、暖白的纸色，以及唯一的古铜色强调色，都从这个想法里来。

在做任何视觉设计之前，我先给每一屏定了一个任务：

这个顺序是一个漏斗。前四屏吸引注意、建立信任，接下来两屏回答实际问题，之后网站才请你预约咨询。滑过最后一屏会回到那块空地：一栋房子建成的故事，变成了开始下一栋的邀请。

文案要像建商在说话

写标题之前，我先给文字定了几条规矩：短，用陈述句；尽量用数字，天数、平方英尺、月份；不用 “dream home”“luxury living”“world-class” 这类词。这些说法会让网站读起来像广告，而这群客户已经看过太多广告了。

最后的标题都是直白的陈述，每一句提出一个主张，再由那一屏来证明：

• Designed in-house. Built by the same hands.（自己设计，同一双手建造。）
• Light is a material.（光也是一种材料。）
• Finished by the team that framed it.（搭框架的团队，也负责收尾。）
• A simpler, faster path to an exceptional home.（更简单、更快地拥有一栋出色的房子。）
• What will your home cost?（你的房子要花多少钱？）
• One team. From dirt to dinner.（同一个团队，从空地到入住。）

Elevation 这一屏最能说明“展示而不是宣称”。左半边是照着照片一笔一笔描出来的线稿，右半边是建成的房子。拖动分隔线，图纸就变成了建筑。到这里，标题已经不需要再多解释什么。

预算计算器，回答最难开口的问题

客户最不好意思问建商的，就是“要多少钱”。所以我给它单独留了一屏。

五个选项：面积、装修档次、地块状态、层数，以及泳池和户外生活区。结果是一个范围，而不是一个数字：默认设置下是 $3.8M–$4.6M、14–18 个月，并拆分成设计、施工和室内三部分。下面有一行小字说明，这是大达拉斯地区的参考范围，最终价格要在实地勘察之后确定。

这里有几个决定比较关键：

• **给范围，不给报价。**没看过地块之前，单一数字读起来像一个谁也兑现不了的承诺。范围更诚实，也依然有用。
• **不用留邮箱。**计算器是帮访客做判断的，不是用来收集联系方式的。觉得合适，结果下面的按钮会打开咨询表单，估算结果已经自动填好。
• **它既在推销，也在筛选。**期待一栋一百万美元房子的人，三十秒就能知道这家公司不适合自己，这对双方都是好事。这正是需求里的第四点。

背后是一条很简单的公式（面积 × 对应档次的单价，再加上泳池或拆除重建的固定费用），所有数字都放在同一个文件里。客户想调整单价，改一处就够了。

Process 这一屏用同样的思路回答“要多久”。两条时间线放在同一个刻度上：传统方式里，设计、报批、招标、施工、收尾首尾相接，一共 18–24 个月；设计施工一体的方案里，各阶段相互重叠，12–16 个月完成。差别不用读字就能看出来。

从概念图到真实的浏览器

开发之前，我先为每一屏做了高保真概念图，确认照片、字体和配色放在一起是否成立，浏览节奏对不对。然后在 Claude Design 里把这些整理成一份设计规范，再把设计、需求和开发说明一起交给 Claude Code。

第一版大概达到了我设想的百分之八十，结构和主要视觉都和规划一致。但只要真正上手用几秒钟，问题就出来了：滚动的惯性很奇怪，切换屏幕会卡顿，有些字体也不是我想要的效果。

这些问题，概念图是看不出来的，因为它们不会滚动。所以接下来的阶段，关心的是网站用起来的感觉，而其中很大一部分工作是做减法：

• **一次滑动只翻一屏。**触控板在手指离开以后还会继续发送滚动事件，用力一划可能直接跳过两屏。现在一个手势只移动一屏，轻轻一推则会弹回原位。
• **影片改成自动播放。**一开始，影片是跟着滚动逐帧推进的。听起来很巧妙，但这等于把故事的节奏交给了访客的手腕，大多数人不是划得太快，就是卡在中间。现在它自己播放，剪到十五秒，播完以后标记点才出现。
• **少一点图纸装饰。**第一版有进度刻度尺、每屏的图签、切换时扫过的网格线，还有影片上的数据标注。每一样在概念图里都有，可放在一起就成了噪音。我把它们都删了。图纸的概念留在结构、字体和纸色里，安静下来反而更有力量。
• **手机有自己的布局。**横向滚动是为桌面设计的。在手机上，各屏改成纵向堆叠，循环变成一个“回到开头”的按钮；开启了“减少动态效果”的用户，看到的是俯瞰静帧，加一个播放影片的按钮。

我会带到下一个项目的几点

1. **找到客户必须传达的那一句话。**这次是“同一个团队，从始至终”，影片、结构和大部分文案都从它长出来。
2. **先画分镜，再生成。**九张草图先定下每个时刻要讲什么，画面就有了方向，而不是一张一张地挑。
3. **把视觉当作一整组来判断。**连贯，比任何一张漂亮的单图都重要。
4. **每一屏只回答一个问题，**并按照客户提问的顺序排列。
5. **做好浏览器会改变计划的准备。**概念图决定了样子；用起来的感觉，只有能滚动时才看得出来，而解决办法常常是删掉一些东西。

各屏截图和完整影片可以在 Structiv 项目页 里看到，也可以直接打开线上网站体验。

建造影片、横向滚动，还是从 Claude Design 到 Claude Code 的工作流，你最想继续了解哪一部分？欢迎在 YouTube 评论区告诉我，也可以在下面订阅，下一篇发布时第一时间收到。