01品牌定義
目前已知的事
經營型態下班後經營的電商，白天是消防業務祕書。Ruby 說的
商品品類食品、日用品、服飾、保養品。Ruby 說的
維運人力一個人，時間集中在下班後。推論你沒說過是否有人幫忙，我從「下班後做」推的。
品牌名稱暫定「下班後」。待查商標、網域、IG 與 LINE 帳號能不能用，還沒查。
商品數量「很多」，但不知道是 30 樣還是 3000 樣。待查這個數字決定分類方式、後台工具與平台選擇。
目前銷售管道不清楚是否已在蝦皮、IG、LINE 等地方賣。待查
品牌方向：已選定「下班後」
決定方向 2「下班後」，用時間與場景串起四種品類。已決定2026-09-19，Ruby 從三個方向中選定。
品牌主張白天上班，下班後，把我自己用過、覺得好的東西挑給你。建議
為什麼是它它取自你告訴我的事實：白天有正職，下班後才經營這個電商。Ruby 說的吃的、用的、穿的、擦的本來沒有共同點，但都屬於「下班後的生活」，所以不必砍品類。
未選的方向方向 1「試過才賣」與方向 3「什麼都有」。方向 1 辨識度較低。方向 3 走價格與齊全，跟「讓客人相信你挑的東西」的目標不合。
三個支柱：客人為什麼相信你挑的東西
我自己下班後用過才賣
這是選品標準。每項商品頁都寫「我怎麼用、用多久」。建議
時間有限，所以只挑好的
白天要上班，不追求商品數量，上新的節奏也誠實地告訴客人。建議
誠實不誇大
缺點也寫出來，不編評價，不做假倒數。建議
品牌一句話
「白天上班，下班後，我把自己用過覺得好的吃的、用的、穿的、擦的，挑給你。」
這是草稿，請改成你自己說話的方式。
公開故事要講到哪裡
「白天上班」會出現在首頁與選品故事頁，但不必點名行業或公司。建議
推薦理由：品牌故事需要的是「有正職、時間有限、所以認真挑」，行業名稱對客人沒有幫助。這份規格書的公開頁面有提到行業，那是你先前選擇維持原樣，品牌網站正式上線時可以再決定。
品牌個性：三條軸線
距離感親切像朋友。建議像下班回家跟朋友聊今天用到的好東西。
質感實在好用。建議你賣的是日用品，講究的是「好用」，不是「高級」。
氣氛安靜舒服。建議下班後的氣氛是放鬆，不是促銷的熱鬧。
三個都是我依「下班後」推出來的預設，覺得不像你，直接改。它們決定了第 7、8 章的字體、留白與語氣。
02目標與成功指標
先寫目標，再寫怎麼量。沒有現有數據的地方我不編數字，一律標待補。
網頁要達成的三件事
看懂新客人第一次進來，看完首屏就能說出「這家賣什麼、為什麼可以信」。建議驗收方式：找 3 個沒看過的人，只給他們看首屏，請他們用一句話說出來。
買得到從商品頁到付款完成不超過 4 步，不強迫註冊。建議
顧得動一個人下班後，用手機就能處理當天訂單。建議「當天處理時間上限」要看你實際單量，待你提供。
指標與基準值
手機占比來自手機的訪客比例，決定設計的優先順序基準值待補
購物車放棄率加入購物車但沒付款的比例，用來找結帳流程的問題基準值待補
最有價值的一份資料：如果你已經在別的平台賣，把最近三個月的訂單匯出給我。品類比例、客單價、買家地區、回購狀況，全部可以從那裡算出來，也能校正下一章我對受眾的推論。
03受眾假設
你說「年齡層廣泛」，我把它拆成三群來設計。年齡區間全部是我的推論，要用你的訂單資料校正。
職場族群（約 25 到 39 歲）推論
- 多半用手機、下班或通勤時逛，看圖決策，會比價。
- 可能偏向保養品、服飾、零食。
- 設計要求：載入快、圖片好看、結帳快。
家庭採購者（約 40 到 54 歲）推論
- 買食品和日用品，會重複買，在意成分、保存方式和運費。
- 設計要求：資訊欄位完整、運費規則講清楚、容易再買一次。
年長客群（約 55 歲以上）推論
- 字要大、步驟要少，可能習慣用 LINE 或電話詢問再下單。
- 設計要求：大字級、客服入口在每頁都找得到、不要有需要滑動的東西。
設計含意：年齡層廣時，以最難用的那一群為基準，其他群自然也好用。
所以本規格書把年長客群的可讀性定為底線：內文字級至少 16px、可點擊的東西至少 44×44px、文字對比至少 4.5 比 1。建議
04研究計畫
你要求完整分析加深入研究，這章是研究的範圍。這一版尚未執行，你確認方向後我才開始查。
1. 同類網站怎麼做
抓 5 到 8 個台灣的綜合型或選物型電商，實際記錄首屏、導覽、商品頁欄位、結帳步驟。
產出：對照表加截圖。狀態：待查
2. 選品標準怎麼表達
看這些網站如何讓客人相信「這是精挑的」，包含文案、標章、故事頁。待查
3. 客人怎麼搜尋
用搜尋工具查你的品類的關鍵字，決定分類名稱該用哪個詞。待查
4. 法規檢查點
食品、保養品、網路購物的官方規定，只讀主管機關的原文，不憑印象。待查
5. 平台比較
讀各平台官方的定價與功能頁，比較費用、金流、超商取貨、冷藏物流、手機後台。待查
6. 字體實際載入量
用瀏覽器量測中文字體子集化後的實際 KB。待查
7. 名稱能不能用
查「下班後」與候選名的商標、網域、IG、Facebook、LINE 帳號是否已被占用或高度近似。待查商標我會用智慧財產局的檢索，查得到與否再回報你。
資料可靠度規則：官方網頁與實際打開的頁面算一手，部落格與文章算二手，每一條結論都會標出來源與等級。工具抓不到的資料，我會寫「未確認」，不會用印象補。
05資訊架構
導覽原則
頂層項目最多 5 項，超過就收進「更多」。建議導覽列換行時，最後一顆會單獨掉到第二行，這是你踩過的版面問題。
手機常駐選單、搜尋、購物車三個圖示固定在頂端。建議
資料來源桌面導覽與手機選單只維護同一份資料。你遇過頁籤加了但手機選單找不到的問題，資料只有一份就不會發生。
站點地圖
- 首頁
- 全部商品
- 搜尋、篩選、排序
- 分類頁：食品 / 日用品 / 服飾 / 保養品
- 商品詳情頁
- 購物車 → 結帳 → 訂單完成
- 選品故事
- 客服中心
- 常見問題
- 運送說明
- 退換貨
- 聯絡方式（LINE、電話或表單，待定）
- 訂單查詢
- 政策頁
分類要用品類還是場景
建議第一層用品類，首頁再用主軸做「策展入口」。建議
推薦理由：年齡層廣的客人找東西，最直覺的方式是「我要找吃的」，不是「我要找下班後的日常」。主軸放在首頁與故事頁講，分類維持好找。
這個判斷我還沒驗證。若你的訂單資料顯示客人常一次買跨品類，會改成場景為第一層。待查
首頁的策展入口：品類是找東西的入口，「下班後」的主軸放在策展區，例如按一天的時刻分：回到家、洗完澡、週末前。建議
混合品類的購物車問題
常溫商品與冷藏商品通常不能同一個包裹寄出，運費也不同。
購物車必須在客人付款之前，就把「這筆訂單會分幾個包裹、各多少運費」寫清楚。建議
實際物流業者的分溫層規則與費用，待查。
06頁面規格
全部以手機為主寫，桌面版是把同樣的內容排寬。
先講一個會影響所有頁面的限制：你的規則是網頁不准有任何需要左右滑動的地方。
所以電商常見的橫向商品輪播、可滑動的圖片集，本規格書全部不採用。商品一律用 2 欄網格，圖片集用「大圖加縮圖點選」。
首頁：由上到下的區塊順序
頂部列
品牌名、選單、搜尋、購物車。
首屏
一句品牌主張加一個按鈕（去逛商品）。不放自動輪播。文案用品牌一句話，見第 1 章。
四大品類入口
4 格排成 2×2，不會有落單的格子。
選品理由
用 3 件具體的事說明你怎麼挑，證明品牌主軸，也就是三個支柱。
新品與熱賣
2 欄網格，每區 4 到 6 項，附「看更多」。
信任資訊
出貨時效、退換貨、付款方式、客服管道。
客人評價
只放真實評價，還沒有就整區不顯示，不編造。
頁尾
政策連結、客服、社群。
商品列表頁
卡片內容圖片、名稱（最多兩行）、價格、狀態標記（新品、冷藏、缺貨）。
篩選與排序收在一顆「篩選」按鈕裡，打開後是全螢幕面板，不做橫向滑動的篩選標籤列。
商品詳情頁：由上到下
圖片
一張大圖，下方縮圖排成網格，點縮圖切換，不用左右滑。
名稱、價格、規格選擇
價格用大字。
加入購物車
手機固定在畫面底部，不能蓋住內容。
運送方式與時效
常溫或冷藏一眼看得出來。
商品說明
先講為什麼選它，再講規格。
品類專屬資訊
見下方四張欄位表。
常見問題與相關商品
四種品類各自需要的欄位
欄位是建議清單。哪些是法規要求的必填，要等第 10 章查完才能確定。
食品
- 品名、淨重或容量
- 成分與過敏原
- 有效期限
- 保存方式（常溫、冷藏、冷凍）
- 產地與製造商
- 食用方式
日用品
- 規格與尺寸
- 材質
- 使用方式與注意事項
- 產地
- 包裝內容物
服飾
- 尺寸表（公分）
- 材質成分與洗滌方式
- 模特兒身高與所穿尺寸
- 顏色實拍
- 版型說明（偏大、偏小、正常）
保養品
- 全成分
- 容量
- 使用方式與注意族群
- 保存期限與開封後使用期限
- 製造商與產地
購物車與結帳
步驟購物車 → 收件與運送 → 付款 → 完成，共 4 步。建議
運送方式宅配與超商取貨。推論台灣網購常見超商取貨，但你的客人是否需要，待你確認。
付款方式信用卡、行動支付、超商付款、貨到付款，取決於平台與金流。待查
錯誤訊息要具體，例如「手機號碼需為 10 碼，目前 9 碼」，不寫「格式錯誤」。
其他頁與空狀態
選品故事頁內容骨架：為什麼叫下班後、我怎麼挑（三個支柱）、我不賣什麼、一件商品從挑選到上架的過程。
搜尋無結果顯示「找不到某某」，並給四大品類入口與 LINE 客服，不留空白頁。
缺貨按鈕改成「到貨通知」，並說明預計補貨時間，沒有時間就直說沒有。
07視覺系統
依「下班後」設計。色名取自下班後的天色與燈光，對比度是我用公式算的，不是憑感覺。
色彩
暮藍 #2B3A55主色：標題、按鈕、連結。白字放在它上面約 11.4 比 1，它放在淺底上約 10.6 比 1。
燈光琥珀 #E39B3B點綴色：標籤底、小圖形、Logo 的亮點，用量要少。墨色字放在它上面約 6.7 比 1。但它放在白底上當文字只有約 2.3 比 1，不合格，所以絕不用來寫字。
墨色 #1C2433內文。放在霧白上約 14.4 比 1。
灰藍 #56627A次要文字。放在霧白上約 5.7 比 1。
柔藍 #C9D3E6區塊分隔線與淡色底。它只有約 1.4 比 1，不能當輸入框邊框。輸入框邊框改用 #7C89A3，約 3.5 比 1，達到表單邊框 3 比 1 的要求。
狀態色成功 #2E7D5B（約 4.6 比 1），錯誤 #B3372B（約 5.5 比 1）。警告用深褐字 #7A4B00 放在淡琥珀底 #FBEBD0 上，約 6.3 比 1。
規則：「加入購物車」按鈕永遠是暮藍底白字，全站同一個顏色，琥珀不用在任何按鈕。
這組配色是我依「下班後」設計的提案。建議
字體
底層採用你規則包的字體套組，但依電商的需求調整了一處。
內文與商品名稱Noto Sans TC，字重 400 與 500，行高 1.7。
中文大標Noto Serif TC，字重 700。只用在首屏標語與各區大標。建議
與規則包的差異規則包寫的是「美感型網頁的標題全用襯線」。電商的商品名稱又多又密，襯線會拖慢速讀，所以商品名稱改用 Sans。推論這是我的設計判斷，不是查證的結果。你可以否決。
英文襯線的選擇選定 Cinzel，用在價格、數字與英文小標。建議規則包的判準：客群廣、氣質不確定時 Cinzel 較安全。你的品牌走「實在好用」而不是「時尚雜誌」，所以不選 Bodoni Moda。
載入量上限字體總量小於 0.5MB，用 Google Fonts 連結載入（它會自動切成小片段），只載用到的字重，並設定 font-display: swap。
字級、間距、觸控
可點擊區域至少 44×44px，相鄰按鈕之間留足間距。
中文斷行全站設定標點不進行首、避免最後一行只剩一兩個字；短標題平均分行；多行段落一律靠左；一段只放一句話。
Logo 與識別
Logo 方向文字標誌「下班後」，搭配一個小圓點，用琥珀色，像窗裡亮起的燈。建議我只提方向，不是最終稿。要看 Logo 的實際樣子，可以再請我提案。
文字標誌字體Noto Serif TC 700，字距略放寬。
名稱狀態「下班後」是暫定名。待查商標、網域、帳號能不能用，還沒查。
情境照片
首屏與選品故事頁用傍晚室內的暖光，例如桌上、窗邊、玄關。建議
這類照片要你自己拍或使用有授權的來源。用 AI 生成圖冒充你「自己用過」的商品，會直接違反品牌主張，所以不這樣做。
圖示
全站用內嵌 SVG，線條風格（lucide 風格），顏色跟著文字色，絕不使用 emoji 當圖示。彩色狀態點用 CSS 圓點。
預計需要的圖示：搜尋、購物車、會員、選單、關閉、冷藏（雪花）、運送（貨車）、退換貨（回轉箭頭）、客服（對話框）、勾選、箭頭。
商品攝影規範
列表圖比例全站統一同一種比例，建議 1:1。建議推薦理由：食品與日用品的包裝多為方形；服飾的全身圖放在詳情頁。
背景與光線霧白或淺灰藍背景、側面的柔光、暖色調一致，四個品類放在一起才像同一家店。商品照要是你實際用的那一件。
每項商品最少張數主圖、細節、使用或尺寸情境、包裝各一張。
檔案用 WebP 格式，標明寬高避免版面跳動，列表縮圖大小目標待實測後訂。待查
08內容與語氣
語氣第一人稱「我」，像下班回家跟朋友說今天用到什麼好東西。建議用具體的事，不用「頂級」「極致」這類空話。時間感的詞（今晚、洗完澡、週末前）偶爾用，不要每句都套。
不說什麼不寫職場勵志，不製造焦慮，不說「你值得」。下班後的品牌要讓人放鬆。
商品文案結構一句話賣點 → 我為什麼選它、我怎麼用 → 資訊欄位 → 使用與保存。建議
只用真實資料不編造評價、銷量、「只剩 3 件」這類倒數。沒有真的用過的商品，不能掛「我用過」的說法。這既是信任問題，也可能是不實廣告的法規問題，見第 10 章。
宣稱限制食品與保養品不能宣稱醫療效能，也要避開「最」「第一」這類極限用語。待查這是我知道存在的原則，具體條文與罰則沒查證。
09工程規格
平台先不綁定：選擇準則
我知道市面上有 Shopify、SHOPLINE、CYBERBIZ、WooCommerce 等做法，但它們的功能與費用我還沒查，所以不列任何數字。待查
比較時逐項檢查：
- 商品欄位可以自訂，讓食品、服飾、保養品各有各的欄位。
- 能串接超商取貨，也能處理常溫與冷藏分開運送。
- 金流支援台灣常用的方式。
- 手機就能處理訂單、出貨、庫存。
- 能串接電子發票。
- 可以控制網址、頁面標題、結構化資料（影響搜尋排名）。
- 費用要算三塊：平台月費、交易手續費、金流手續費。
- 資料可以整批匯出，換平台時不被綁死。
效能
載入標準最大內容繪製 2.5 秒內、互動延遲 200 毫秒內、版面位移 0.1 以下。這是我記得的 Google 對「良好」的門檻，實作前要對官方文件再確認一次。
搜尋與追蹤
搜尋優化每頁獨立的標題與描述、商品結構化資料（價格、庫存、評價）、圖片替代文字、網站地圖。
數據追蹤GA4，並記錄四個轉換事件：看商品、加入購物車、開始結帳、完成購買。
維運：一個人下班後的後台需求
- 手機上可查看、處理、標記出貨的訂單。
- 一次列印多張出貨單。
- 庫存低於門檻自動提醒。
- 缺貨商品自動改成「到貨通知」，不讓客人下單。
- 訂單可匯出成試算表。
安全與隱私
付款資料信用卡資料交給金流業者，自己的網站不儲存。
10法規與營運檢查點
這不是法律意見。下面是我知道存在、需要確認的方向，具體條文我都還沒查。確認要以主管機關原文或專業人士為準。
所有商品
營業登記與稅務狀態、電子發票、網路購物的七日鑑賞期規定與例外項目、個人資料保護、網站上必須揭露的賣家資訊。待查
食品
網路販售食品業者是否需向主管機關登錄、包裝標示要求、冷藏冷凍運送。待查查詢處：衛福部食藥署。
保養品
化粧品產品登錄與標示要求、廣告宣稱限制。待查查詢處：衛福部食藥署。
日用品
個別商品是否屬於經濟部標準檢驗局規定的應施檢驗品項。待查
11驗收清單
這些標準來自你的規則包與你踩過的坑。做完一項才打勾，而且要有實際證據，不接受「我改了所以應該好了」。
版面（每個頁面都要做）
- 在 320、375、1024 三個寬度各截一張圖，並且真的打開來看。
- 逐一掃描頁面上每個元素，確認沒有任何需要左右滑動的地方，包含藏在容器裡的。
- 導覽列量測每一行有幾顆，最後一行不能只剩一顆落單，跨滿寬的除外。
- 奇數格的網格，最後一格跨滿寬。
- 中文斷行：最後一行不少於 3 個字、標點不出現在行首。
- 改到共用元件（頂部列、頁尾、全域樣式）時，五個以上的頁面全部重看。
功能
- 每個按鈕指向的功能真的存在，主控台沒有錯誤訊息。
- 沒有「有邊框卻沒內容」的空框。
- 從首頁一路走到付款完成，實際下一筆測試訂單，含超商取貨與冷藏商品。
- 空狀態全部看過：搜尋無結果、缺貨、空購物車、結帳錯誤。
找得到
- 新功能量測它在第幾個螢幕，超過 1.5 個螢幕就要在頂端加入口。
- 從選單入口點進去走一次，不用直達網址驗收。
- 手機選單與桌面導覽的項目一致。
效能與內容
- 字體總量小於 0.5MB。
- 載入標準符合第 9 章的門檻。
- 每項商品的必填欄位完整，政策頁全部存在。
- 沒有 emoji 當圖示，圖示全為內嵌 SVG。
12待決事項
依影響大小由上到下排。品牌主軸已決定，最需要你補的是商品數量與公開故事的範圍。
2. 品牌名稱與 Logo名稱暫定「下班後」，正式採用要等查證結果。Logo 方向見第 7 章。影響：全部。
3. 商品數量現在大約幾樣？之後會繼續增加嗎？影響：分類、後台工具、平台。
4. 現有銷售資料是否已在其他平台賣？能否匯出近三個月訂單？影響：校正受眾、決定分類。
5. 平台與預算每月願意花多少？影響：整個工程章節。
6. 客服管道LINE、電話、表單，你下班後能回哪一種？
10. 公開故事的範圍「白天上班」要不要寫進首頁與選品故事頁，要不要點名行業。影響：第 1、8 章的文案。我建議提白天上班，不點名行業。
13下一步
你回覆兩件事
商品大約幾樣，以及公開故事要講到哪裡。
我查名稱能不能用
商標、網域、帳號都沒問題，才正式定案「下班後」。
我做第 4 章的其他研究
產出競品對照表、法規檢查點、平台比較，整理成 v0.3。
手機線框
首頁、商品頁、結帳三張，整理成 v0.4。
版本紀錄
v0.1 2026-09-19 初版。結構完整，內容只用已知資訊，研究尚未執行。
v0.2 2026-09-19 品牌方向定為「下班後」。補上第 1、7、8 章的具體設計，配色附對比度實算。研究仍未執行。