精选 · 开放 · 免费

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

动效与交互

下拉菜单和覆盖层的平滑显隐过渡。 · 悬停状态下细微的背景色变化。 · 交互元素的标准边框圆角过渡。

通过细微的视觉线索，如背景色变化或阴影移动，来指示卡片和按钮的可交互性。 · 直接导航或展开产品详情。

08

组件

• button 胶囊形主按钮，采用高对比度背景色和白色文字。
• card 产品卡片，以柔和灰色为背景，展示大尺寸高质量摄影图片，20px 圆角边框，文字极简。
• input 一个大型居中搜索框，带细微边框、圆角，并整合了语音/镜头/搜索图标。
• hero 采用轻量衬线字体的巨型编辑风格标题，居中置于一张大型生活场景照片之上。

09

文案语气与禁用清单

• 语气 鼓舞人心的、编辑式的、乐于助人的，将平台定位为一个精选指南，而非纯粹的市场。
• 标题风格 大尺寸、优雅、以衬线字体为主，令人联想到高端时尚或生活方式杂志的封面。
• 按钮文案 直接且行动导向，使用高对比度的胶囊形按钮。

• 不要为主要内容区域使用深色背景——截图显示首屏和产品网格采用干净的白色背景。
• 不要为页面主标题使用粗重的无衬线字体——截图显示 'Holiday 100' 使用的是轻量级过渡衬线字体。
• 不要为产品卡片使用尖锐的直角——截图显示所有卡片和图片都采用明显的 20px 圆角边框。
• 不要为首页首屏使用混乱或多列布局——截图显示其为严格居中的单列编辑式首屏。
• 不要为主背景使用明亮的主色调——截图使用纯白色（#FFFFFF）画布来突出产品图片。
• 不要为正文使用等宽或粗衬线字体——截图采用干净的人文主义无衬线字体以保证可读性。
• 避免: 避免使用激进的“立即购买”用语，转而采用以发现为导向的措辞。
• 避免: 避免布局杂乱或行动号召过于密集。
• 避免: 避免使用深色或沉重的配色方案，以免削弱产品摄影的效果。

11

System Prompt

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