從空地到入住：一個豪宅建商網站的設計思考

這次做的是 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 評論區告訴我，也可以在下面訂閱，下一篇發布時第一時間收到。