商品主次與版面輕重

貓老闆的簡報

四條商品線不一樣大。陶碗是招牌，要最大；襪子就排後面一點，我不會生氣——因為那是對的。

——貓掌櫃的老闆「掌櫃」下需求時的原話

這章做什麼

動手做

1. 選出最重要的那一個：陶燒貓碗。給它大圖、大標、兩句介紹和購買連結。
2. 其餘商品線用一行一條的清單：品名、一句話、連結。不配圖示。
3. 桌面版用 Grid 排兩欄：招牌在左、清單在右；960px 以下自動上下疊。
4. 驗收法：把版面拿給不是做網站的朋友看三秒，問他記得哪個商品。答對才算過。

這樣對 AI 說

幫「貓掌櫃」排商品區，桌面版兩欄 Grid。左欄招牌商品陶燒貓碗：大圖（占位圖即可）、商品名、兩句介紹、「看看這個碗」連結。右欄四行商品線清單：主食罐與零食／貓玩具／貓抓板與睡窩／人用貓周邊，每行品名加一句話加連結，不要用圖示。手機版（960px 以下）折成單欄，招牌在上。使用我上一章定義的 design tokens，不要出現新的色碼。

驗收清單

版面一偷懶就退回模板。盯著商品區看：眼睛先落在哪裡？

• 陶燒貓碗明顯比其他商品大；四條商品線收成一行一條的清單。
• 沒有三張等寬卡片、沒有卡片疊卡片、沒有滿版分隔線。
• 手機上招牌商品在上、清單在下，不用左右滑。
• 把畫面給朋友看三秒，他記得的是陶碗，不是「三個圖示」。

這章的相關詞條

詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。