跳到主要內容
CORNERLAB一角設計
← 所有作品線上工具2026

摩登系統櫥櫃

台南系統櫃廠商的線上規劃工具。訪客用五個步驟描述自己的空間,邊選邊看即時立面圖,最後拿到一份含價格區間的初步規劃——讓詢價在丈量之前就先對焦。

  • 產品設計
  • 互動開發
  • 估價邏輯
  • 前端開發
台南系統櫃廠商的線上規劃工具。訪客用五個步驟描述自己的空間,邊選邊看即時立面圖,最後拿到一份含價格區間的初步規劃——讓詢價在丈量之前就先對焦。
  1. 01

    客戶

    摩登系統櫥櫃,台南的系統櫃廠商。做的是客廳、臥室、廚房與玄關的整面收納,從丈量、設計到安裝一條龍。

  2. 02

    問題

    系統櫃最貴的不是板材,是跑一趟白工。客人在 LINE 上問「一面牆大概多少」,這個問題在看到空間之前答不出來;但不答,對話就停在那裡。於是只能先約丈量——開車過去、量完、回來做圖、報價,然後有相當比例的客人在聽到數字的那一刻就沒有下文了。

    • 預算落差要到報價那一刻才會爆開,前面的時間全部沉沒
    • 客人講不出自己要什麼,因為他沒有詞彙描述櫃型與配置
    • 老闆同時是業務、設計與丈量,這段流程塞住的是他本人
  3. 03

    構想

    把價格往前搬。與其讓客人在丈量之後才知道這件事要多少錢,不如讓他在官網上花三分鐘自己兜出一個配置,當場看到區間。願意按下「取得正式報價」的人,是已經接受這個價格帶的人——丈量才出門。

    • 不是線上估價機,是一份讓雙方對焦的共同語言
    • 五步驟照客人腦中的順序走:哪個空間 → 多大 → 什麼櫃 → 怎麼配 → 多少錢
    • 每一步都要能反悔,因為沒有人第一次就選對
  4. 04

    設計

    左邊問問題,右邊即時畫出來。每選一次,右側的立面圖就跟著長——寬高深標註在線上,櫃體、抽屜、電器的位置都看得到。客人不需要懂「下櫃 600 深」這種話,他看圖就知道對不對。

    • 步驟列用五個品牌色標記,橘、藍、黃、橘、藍,走到哪一步一眼看得出來
    • 選完空間才推薦櫃型——客廳給電視櫃與展示櫃,不把二十種選項一次攤開
    • 尺寸用滑桿不用輸入框,手指拖得動,也不會打出 3200 cm 這種數字
    • 右側預覽可以全螢幕,手機上才有辦法看細節
  5. 05

    實作

    估價邏輯做成一份可調的表:以尺計價乘上每尺單價,再加模組的加價,複雜度與收納容量另外算給客人看。單價與基準日期寫在畫面上,老闆調價時改一個數字,全站跟著動。

    • 價格明確標示為示意,並列出含與不含——拆除清運、水電、檯面都寫清楚
    • 依配置生出設計建議,例如抽屜比例過高時提醒可改層板降預算
    • 完成頁可以「產生需求摘要」並複製文字,客人直接貼進 LINE 給老闆
    • 全站無登入、無表單門檻,LINE 諮詢按鈕在每一頁都在
  6. 06

    成果

    工具已經上線。客人進來得到的不再是一句「要看現場」,而是一份寫著 NT$ 54,000 – 68,000、含什麼不含什麼、附兩條設計建議的規劃書。下方照五個步驟依序選讀,看完就知道這三分鐘裡發生了什麼事。

畫面選讀

SCREENS
  1. 線上規劃第一步,四張插畫卡片分別是客廳、臥室、廚房與玄關,右側為空櫃體預覽
    01選擇空間STEP 01 — SPACE

    第一步只問一件事,而且給圖不給字。客人不必先知道自己要什麼櫃型,他只要知道自己站在哪個房間——後面的推薦全部從這個答案長出來。

  2. 尺寸步驟,寬度、高度、深度三組滑桿,右側立面圖同步變形並標註尺寸線
    02輸入尺寸STEP 02 — SIZE

    三根滑桿,拖到哪裡右邊就畫到哪裡。旁邊那個人形比例尺是故意的——320 公分是多寬,講數字沒感覺,站個人進去就有了。

  3. 櫃型步驟,依客廳推薦四種櫃型,每項附英文名稱與一句使用情境說明
    03推薦櫃型STEP 03 — CABINET

    標題寫「依客廳推薦的櫃型」。同樣的頁面在臥室會給完全不同的四個選項——先問空間,就是為了在這裡把選擇收斂到四個以內。

  4. 配置步驟,上方為模組數量,下方可逐格指定層板、抽屜、吊掛、電器與封閉收納
    04配置模組STEP 04 — CONFIGURE

    整個流程最像在玩的一步:一格一格指定要層板還是抽屜,右邊的櫃子立刻長出抽屜面板與電器開口。客人在這裡待最久,而這正是他開始把這個櫃子當成自己的那一刻。

  5. 完成頁,列出配置摘要、收納容量、施工複雜度、價格區間與含與不含清單,下方為設計建議與取得報價按鈕
    05初步規劃書STEP 05 — SUMMARY

    這一頁是整個案子的目的。價格區間給得明確,但旁邊標著「示意價格」與計價基準;含與不含分兩欄列好,拆除、水電、檯面都寫進不含裡。先把話講清楚,後面才不會有爭議——這份坦白也是老闆篩掉不合拍客人的方式。

下一個專案

BLUE ROOM