
Shop
白色大理石上漂浮的交易星座
这家网店采用“白画布”模式,产品以大幅弧形图片卡片的形式展示,而非缩略图网格。整个界面极其流畅:圆角半径为 20-28 像素,控件呈药丸状,紧凑的 16 像素 GT 标准字重搭配紧密的负间距,使文字清晰醒目。系统中唯一的醒目点缀是充满活力的紫色 (#5433eb),它出现在徽标、圆形搜索结果框以及按钮的阴影部分。其余色调则以温暖的中性色为主:白色背景、柔和的冷灰色画布、简洁的边框以及近乎黑色的文字。12 像素的间距保持了紧凑的视觉效果,而醒目的主图和类别条纹则采用了 64-80 像素的宽阔垂直间距,使购物体验更像是浏览而非浏览产品目录。
页面最大宽度为 1200 像素,居中显示在半透明的 #f2f4f5 画布上,左侧有一个 64 像素宽的固定侧边栏,仅包含导航图标。主元素是一个全宽条形区域,产品卡片位于居中的紫色“商店”标志上方,其正下方是一个药丸状的搜索栏。类别药丸排列在搜索栏下方居中的一行。内容板块(女装、男装、美妆、家居、婴幼儿)以条形区域的形式呈现,每个板块包含一个四列网格(包含产品图片)或一个两列的“主元素+网格”组合。垂直方向的布局较为宽松:主板块之间间隔 64-80 像素。页脚是页面底部的深色条形区域,包含列状链接组。水平产品面板右侧的轮播箭头指示可滚动的内容,但没有分页点。
摄影是主要的视觉元素:全屏产品照片以白色为背景,采用 1:1 裁剪比例,生活方式图片则以温暖的大地色调(米色、赤陶色、鼠尾草绿、象牙色)为主。产品图片拥有独立的色彩——用户界面保持无彩色,使产品色调能够带来丰富的视觉效果。品牌标识以叠加文字的形式出现在深色或浅色的主图上,而非独立的图标。在主界面中,产品卡片以悬浮的、略微重叠的星形图案形式位于品牌标识上方。图标采用极简主义的单色设计(黑色轮廓),类别图标除外,类别图标使用单一的品牌颜色。产品图片中没有插图、3D 效果或渐变色。
调色板
品牌
- Shop Violet
#5433eb— 发送按钮、虚线文字标记和品牌标志是白色背景上仅有的几个点缀,它们突显了动作和个性。 - Violet Wash
#c0b5f3— 紫色发送按钮后面有一个半透明的光晕,它保持发光状态,色调不变。
中性的
- Canvas Mist
#f2f4f5— 页面背景和凸起卡片背后的附加表面处理。 - Pure White
#ffffff— 卡片、输入字段、浮动标志和药丸形按钮的主要表面。 - Ink Black
#000000— 深色模式下的主要文本、标题、图标、导航符号和产品卡片。 - Faint Border
#ebebeb— 卡片上的细分割线、输入字段轮廓和药丸状按钮框。 - Muted Gray
#787574— 辅助文本、导航标签、图标轮廓(非活动状态) - Cool Stone
#cccccc— 占位符、禁用状态和非活动图标背景
排版
从 11 像素到 16 像素 · 4 步
- GT Standard — 替代品: Inter · 轮廓 400 · 所有字号的主字体——包括正文和标题——均为 GTStandard-MRegular。GTStandard-MRegular(16px/-0.031em)是正文、按钮和标签的主字体。GTStandard-MSemibold(20px/-0.05em)用于多个大标题;GTStandard-MMedium(11-12px)用于微型标题。每种字体变体的视觉粗细均为 400——字体层次是通过微妙的渐变和密集的负间距来实现的,而不是通过粗体对比。这是本店的标志性风格:它不使用粗体字来强调视觉效果,而是通过字母间距来塑造文本。
- Shopify Sans — 替代品: Inter · 轮廓 400, 700 · 保留用于系统级消息,例如应用程序加载横幅和 Cookie 同意文本。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 12px |
| 按钮半径 | 9999px |
| 卡片半径 | 28px |
| 阴影 | 柔和的阴影 |
| 各部分之间 | 64px |
| 页面宽度 | 1200px |
AI 将按照Shop风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Cursor — 一间温馨的羊皮纸工作室,被燃烧的煤炭照亮
- Slush — 粉彩纸上的充气贴纸宇宙
- MindMarket — 这是一本印在奶油色纸上的温馨童话书——友好的编辑画布上,醒目的国际标题和剪纸人物在阳光普照、柔软的贴纸表面上和谐共存。
- Airbnb — 一面静谧的白色画廊墙,上面挂着一枚珊瑚红色的书签。
- Superr — 午后柔和的阳光下,一本温暖的笔记本映入眼帘。米白色纸页,一支没盖笔帽的橙色马克笔,还有一叠等着撕下来的塑封姓名贴纸。
- Apple (España) — 在柔和的日光下,博物馆展厅是一个单一、迷人、轻盈的白色空间,每个展品都由一束聚光灯照亮,照射在浅色墙壁上。
- Lamborghini — 展厅里,一辆黑色车身的黄色汽车在聚光灯下熠熠生辉。
- Amplemarket — 阳光普照的工作场所,到处散落着五彩纸屑。
- Getharvest — 夕阳西下,书桌的金色光芒映照在眼前——温暖的米色画布上挂着白色明信片,一簇明亮的橙色火焰点缀其间。
- Agence Foudre — 杂志封面采用柔和的粉红色,让人联想到口红的颜色。
- Drive Capital — 复古公路旅行海报,印在暖色调纸张上
- Apple (España) — 白色画廊展示柜