
Shopify
午夜温室——商标在深邃的蓝绿色背景下绽放,被一缕薄荷绿照亮。
Shopify 的设计系统宛如一个午夜电商工坊:近乎黑色的画布上点缀着深邃的蓝绿色,宽阔自信的无衬线字体,以及一抹鲜亮的薄荷绿,巧妙地激活了互动环节。整个界面如同暗房一般,产品和品牌是光源——照片和店铺在近乎黑色的背景下熠熠生辉,而镀铬元素则隐于幕后。组件几何感十足却又不失柔和:12 像素半径的卡片搭配纤细的边框,药丸状的按钮,以及 330 字重的字体,低调内敛而非张扬夺目。一个独特的彩色标点符号(#36f4a4)被谨慎地运用在链接、标签和焦点状态中,将色彩保留在功能性的关键时刻,确保商家故事始终是视觉焦点。
最大宽度约为 1280 像素,居中显示,全宽的启动块会延伸到图片容器之外。页面节奏交替呈现:(1) 全宽深色启动页,带有叠加的标题和行动号召按钮;(2) 舒适的深色区域,包含两列或三列的最大宽度文本和图片块;(3) 交互式展示面板(产品卡片、运费计算器、世界地图),以凸起卡片的形式显示在更深的画布上。导航栏为固定顶部栏,包含徽标、三个导航元素、二级链接和主要行动号召按钮,全部右对齐。垂直方向的过渡平滑,各部分之间留有 80 像素的间距——深色区域之间没有分隔线,仅通过表面色调的变化来过渡。
视觉设计主要以零售商为中心:全尺寸产品照片和品牌活动照片占据了视觉中心的大部分,通常以大尺寸背景叠加白色文字的形式呈现。图片经过精心裁剪,对比度高,并带有节日氛围(例如纳斯达克敲钟、集体问候、产品手持特写)。深色背景营造出照片仿佛被聚光灯照亮的效果。插图风格极简——主要的说明文字由嵌入式产品图片和店铺截图完成。图标为单色,线宽为 1.5-2 像素,通常为白色或 #36f4a4(表示激活状态)。
调色板
品牌
- Shopify Mint
#36f4a4— 活动导航指示器、焦点环、标签高亮和链接悬停高亮是唯一能在深色背景下营造出交互感的彩色闪光效果。
中性的
- Midnight Forest
#02090a— 页面画布、页眉背景图片、章节背景图片 - Deep Lichen
#061a1c— 主卡面、凸起面板、内容块。 - Shaded Fern
#072720— 导航面板、附加卡片、面板几乎察觉不到的凸起。 - Spruce Border
#1e2c31— 卡片的细边框、分割线、输入字段轮廓。 - Abyss Indigo
#000a1e— 用于嵌入产品/演示的附加表面,以及带有功能说明的面板。 - Pure White
#ffffff— 主要文本、按钮填充、标题、徽标。
排版
从 12 像素到 70 像素 · 8 个步骤
- Neue Haas Grotesk — 替代品: Inter · 轮廓 330, 400, 500, 550, 600 · 核心排版系统采用以下字体:标题字体粗细为 70–96px(330–400),风格含蓄而非张扬;正文字体粗细为 16–18px(400–500);导航和用户界面字体粗细为 14–16px(500–550)。在大屏幕尺寸下使用 330 的超细字体是一大特色:它以克制而非粗犷的方式传递自信。
- Inter Variable — 替代品: Inter · 轮廓 400, 420, 450, 550 · 这是一种辅助字体,用于导航界面元素、小型注释、选项卡控件和页脚中的微缩文本。它略大的小写字母和更标准的字母间距使其在紧凑尺寸下也更易于阅读。此外,它也适用于 420 字重字体能够填补常规字体和中等字重字体之间空白的场合。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 12px |
| 按钮半径 | 9999px |
| 卡片半径 | 12px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 80px |
| 页面宽度 | 1280px |
AI 将按照Shopify风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Retool — 一间温暖的黑曜石工作室——一个摆放精密工具的台面,在余烬的微光下熠熠生辉,万物皆由此诞生。
- Elektron — 午夜时分,设备控制面板几乎一片漆黑,产品照片清晰可见,而界面则几乎完全隐形。
- REKKI — 照片实验室中的飞行控制面板
- OFFFICE : — 一个被单调字体所包围的黑色画廊
- Clyde — 展厅里只有一盏聚光灯,几乎一片漆黑,房间里唯一的颜色是一个暖色调的渐变色球。
- Channel Studio — 一间配有珊瑚灯罩的照相馆
- Electronic Materials Office — 画廊里,一块闪烁的余烬,装饰着木炭。
- ORYZO AI — 一组关于暗房的摄影作品。一个孤零零的物体悬浮在温暖的黑暗中,奶油色的字体是唯一的装饰。
- Factory — 午夜时分的“作战室”终端。“工厂”是一个纯黑色的控制面板,一张白色的卡片像手电筒照着的电报一样落在上面——房间里唯一的物品就是工作本身。
- Hungry Tiger — 烤炉墙上涂满了姜黄色的涂鸦。统一的金色和锈棕色色调,字体大得惊人,看起来更像是香料市场的招牌,而不是网站。
- Bibliothèque — 聚光灯下的黑色立方体展厅——巨大黑暗大厅中孤零零的一块发光板
- Apple (España) — 黑色剧院,配有照明设备