精選 · 開放 · 免費

Shopping Google

一個以編輯視角策展的購物體驗，精選節慶熱門產品。

01

設計氣質 DNA

一本高端雜誌的節慶禮品指南，轉化為極簡的網頁體驗。

02

色彩

高對比的編輯風格色板，包含純白畫布、深墨色文字，以及單一用於主要操作的鮮明 Google 藍點綴。

03

字型

transitional-serif · humanist-sans

• display80px · 200
• body14px · 400
• subtitle24px · 400

展示標題採用輕量過渡襯線體，字距緊密，營造優雅的編輯質感。 · 內文與 UI 元素使用簡潔、高易讀性的人文無襯線體。 · 產品標題採用標準粗細的無襯線體，在網格佈局中實現最佳可讀性。

04

間距

採用彈性網格，搭配充裕的留白與變化間距（16px、24px），以分隔產品卡片並維持乾淨、通透的佈局。

05

表面 (圓角 / 陰影 / 邊線)

rgba(0,0,0,0.04) 0px 0px 0px 1px · rgba(0,0,0,0.2) 0px 4px 8px 0px · rgba(60,64,67,0.25) 0px 2px 8px 0px

06

版面

採用置中、最大寬度的內容容器，包含顯眼的全寬首圖區域，後接一個彈性、類瀑布流的產品卡片網格。

07

動效與互動

下拉選單與遮罩採用流暢的顯示過渡效果。 · hover 狀態下背景顏色有細微變化。 · 互動元素採用標準的 border-radius 過渡效果。

透過背景顏色變化或陰影位移等細微視覺提示，指示卡片與按鈕的互動性。 · 直接導航或展開產品詳情。

08

組件

• button 膠囊造型的主要按鈕，採用高對比背景色與白色文字。
• card 產品卡片，以柔和灰色背景搭配大型高品質攝影圖片，圓角 20px，文字精簡。
• input 大型、置中的搜尋欄位，帶有細微邊框、圓角，並整合語音/鏡頭/搜尋圖示。
• hero 採用輕量襯線體的大型編輯風格標題，置中於一張大型生活情境照片之上。

09

文案語氣與禁用清單

• 語氣 富有啟發性、編輯風格且具實用性，將平台定位為策展指南，而非單純的市集。
• 標題風格 大型、優雅、以襯線體為主，令人聯想到高端時尚或生活風格雜誌的封面。
• 按鈕文案 直接且以行動為導向，使用高對比的膠囊造型按鈕。

• 不要為主要畫布使用深色背景 — 截圖顯示首圖與產品網格採用乾淨的白色背景。
• 不要為主要標題使用粗重的無襯線體 — 截圖中的「Holiday 100」採用輕量過渡襯線體。
• 不要為產品卡片使用尖銳的方形圓角 — 截圖顯示所有卡片與圖片均採用明顯的 20px 圓角。
• 不要為首圖區域使用混亂或多重欄位的佈局 — 截圖顯示為嚴格置中、單欄位的編輯式首圖。
• 不要為主要背景使用鮮艳的主色調 — 截圖使用純白 (#FFFFFF) 畫布，以突顯產品圖片。
• 不要為內文使用等寬或粗襯線字體 — 截圖採用簡潔的人文無襯線體以確保可讀性。
• 避免: 避免使用侵略性的「立即購買」用語，轉而採用側重於探索的表述。
• 避免: 避免雜亂的佈局或令人不知所措的行動呼籲。
• 避免: 避免使用深沉或厚重的色板，以免分散產品攝影的焦點。

11

System Prompt

en · zh-CN · zh-TW · ja · ko