設計重點
- 設計系統：把「留白」拆成四條版面原則，只用黑白加一個強調色、圓角一律 0、每個區塊最多一個主按鈕
- 互動狀態：五步驟預約之外，另外設計「當天排不下」「時段被搶走」「送出失敗」三種邊界狀態
- 決策紀錄：PRD 裡記錄 12 條設計決策，每條都寫明放棄了什麼、代價怎麼補
專案定位
一間虛構的沙龍，從規格文件做到可以預約的網站
這是自主概念專案，品牌、店址、設計師與影像都是虛構的，網站也設定不讓搜尋引擎收錄。我撰寫 PRD、全站文案與 SEO 規格，並以 Claude Design 輔助設計高擬真稿與 MARGIN 設計系統；網站程式由 Claude Code 撰寫，我負責定義需求、審查與驗收，在規格和實作衝突時做決定，並把決定回填成決策紀錄。
問題與目標
沙龍網站在客人決定預約的路上，有三個斷點
美髮客人的決策幾乎都在手機上走完：看作品、看設計師、看價格、預約。多數沙龍網站在這條路上會卡住：作品集像五間店拼起來、預約只放電話或 LINE、大圖很美卻看不到「誰會服務我」。所以網站只有一個轉換目標：產生預約。主要受眾是想換設計師的客人，他們最怕被推銷、被加價、約到沒看過作品的人。
關鍵設計決策
每一個決策，都寫下放棄了什麼
- 自建預約，不嵌第三方 widget：嵌入半天就好、自建約兩週，但預約是全站唯一的轉換行為，最重要的一頁不該交給別人的視覺。
- 價格全公開：直接回應受眾最怕被加價的顧慮；代價是失去報價彈性，所以一律標「起」價，並寫明加價條件。
- 拿掉麵包屑與 Header 的預約按鈕：網站只有兩層深，每頁底部也已經有預約區塊，Header 再放一顆，同一個畫面就有兩個主按鈕。代價是少一個預約入口，改用手機常駐預約列補上，並事先訂好判斷條件：預約點擊率低於 8% 就先把按鈕加回來。
- 不做 Before／After：手上沒有任何施作前的素材，拿不相干的照片湊，在美髮業就是不實廣告。改由作品頁的漂髮標示與色號、服務頁寫明不接哪些髮況來分擔。
主要畫面展示
一屏只說一件事的品牌網站
首頁、作品集與設計師個人頁都照同一套留白規則排版：強調色只當狀態色，不當按鈕色——按鈕也是紅的，這個訊號就失效了。
互動設計案例
不只設計順利的路徑，也設計會出錯的時候
選設計師、選服務、選時段、填資料、確認。空檔由 Google 日曆判斷：「同時段只服務一位客人」剛好等於「一位設計師一本日曆」，店家不必再學一套後台。代價是沒有原子性的訂位，查空檔到送出之間時段可能被別人約走，所以流程裡一定要設計這個狀態。
- 右側摘要把當步剛決定的值放大，還沒決定的欄位寫「尚未選擇」；按鈕停用時，把原因寫在按鈕下方。
- 當天排不下：日期格轉成強調色，直接給三個替代時段。
- 時段被別人約走：跳出對話框說明，先給同一天剩下的三個空檔，也可以自己重選時間。
- 送出失敗：導覽列下方出現黑底提示，填好的資料都保留，可以直接重送，也留了電話當退路。
- 實作時修正了原型本身的問題：原型把欄位錯誤檢查放在「下一步」，但下一步在填完前本來就停用，錯誤態永遠走不到；改成離開欄位時檢查，錯誤態才真的會出現。
可讀性與影像
壓在影像上的白字，逐張量對比
換上 AI 生成的空間照之後，白牆會吃掉白色標題。量法是依版位比例裁圖、疊上漸層，取標題範圍內最亮的區塊計算。設計師頁在 901px 寬最低只有 1.6:1、頁尾收尾區塊 1.7:1，都低於大字 AA 的 3:1 門檻。
- 調整漸層後，全站最低對比提高到 3.4:1。
- 設計師頁在手機改用素材原本的 16:9，避免為了壓住文字把整張照片壓黑。
- 手機拿掉 Header 預約按鈕後，由底部常駐的預約列補上入口，電話保留成第二選項。
這是概念作品，沒有真實的營運數據。以下是我對自己的設計所做的檢查：規則有沒有被寫成可以驗收的規格、元件是否對應設計系統，以及影像上的文字是否達到可讀的對比。
- 12 條
- 附代價的設計決策紀錄
- 23 支
- 對應設計系統規格的元件
- 3.4:1
- 全站影像上白字的最低對比
反思與下一步
接上真實營運之前，還缺實拍與驗證
目前影像都是示意，作品照是 Unsplash 佔位。真的上線需要實拍與拍攝同意，幾個以代價換來的決策，也要等有真實數據才能判斷對不對。
- 有了實拍素材後，優先補回 Before／After，分擔高單價客人的疑慮。
- 用預約點擊率驗證拿掉 Header 按鈕的決策，低於 8% 就先加回來。
- 補上月曆換月與簡訊通知，並把目前記在記憶體裡的流量限制換成 Cloudflare 的限流機制。