挖掘 Shopify Editions | Winter '26 的设计细节
前一周 Shopify 推出了一个介绍其冬季更新的网页，很多人应该已经在不同平台上都看到了，功能方面我无法评价它好不好，但我想所有看过这个网页设计的人都无法不惊叹一句「太酷了」。在这篇文章里，我将会挖掘网页里一些有趣的设计细节。
首屏
一打开网页首屏，复古配色、油画风格插图和罗马数字等等，文艺复兴的味道扑面而来，而滑板、购物袋和纸杯这些现代要素，很明确表达了这个网页的主题是古典和现代的结合。
对了，有些细节要屏幕宽度足够大才能看到，所以我建议全屏浏览或使用一个大屏幕来浏览这个网页，不要使用手机或者平板浏览。
黄金分割
首屏打开时背景加载的线条图形，以及后面每张插画都会出现的这些线条是黄金分割。说到这点，黄金分割在现实里有被滥用的情况，特别在设计行业，也有不少 meme 在调侃黄金分割。怎么看待黄金分割，我推荐看看 The Golden Ratio & Fibonacci Numbers: Fact versus Fiction 这个有趣的讲解视频。
ai
鼠标 hover 到标题和侧栏的 The Renaissance Edition 时，标题会变成 The ai Edition，表明了这次更新和 AI 有很大关联。
其实这一点在更早的时候就提及了，在网页加载时，会先显示成 The ai Edition，然后才会变成 The Renaissance Edition。
Sidekick
插图
插图里的人物戴了一个很特别的眼镜，是其 Sidekick 助手图标的眼镜。
左下角天体仪上的中心，换成了 Shopify 的 Logo。这个类似的做法还出现在笔记本电脑 Logo 等位置，这些类似的细节后面不重复说了。
首字下沉
小节标题里有首字下沉的效果，下沉的首字母用的是另一款特别的字体：Imperial Script。这里有一个很细节的处理，CSS 里代码可以看到开发者将首字下沉的效果在日语版本 里去除了。
接近时缩放
这部分的对话框，当鼠标开始往对话框靠近时，对话框就会开始放大，而不是完全接触到它的时候才会开始缩放，这也算是比较常见的一个交互效果了。
文艺复兴版本的 emoji
在这部分，鼠标 hover 到 prompt 上一段时间后，会飞出一些文艺复兴版本的 emoji，在这部分的左下角也提供了这批 emoji 的下载，文件的名称为 ren-editon-emoji ，很明显意思是「文艺复兴版本 emoji」。
打开文件夹可见这批 emoji 一共有 33 个，其中还有一个附属文档写到：
33 custom emojis for Slack
因此开发团队已经按照 Slack 的表情名称规则命名好了文件，这样在 Slack 添加时就会自动填入名称，省去了另外想名称的功夫。
Agentic
你可以看到插画里有一只握着手机的手，不同于背景的相对模糊，这只手是前景的特写，所以它加上了近距离观看油画才能看到的龟裂纹。
背后的窗口里有一只戴着伊丽莎白圈的猫，它同时被做到之前提到的 emoji 合集里了。
Online
在插画里面，人物在看左侧屏幕里一张图片的属性，这张图片的地址是可以真实访问的，去除各种查询参数后的地址是：https://mvseskate.myshopify.com/cdn/shop/files/headerupscale.jpg
看这个文件名称，似乎是团队用 AI 生成并 Upscale 后的图片。
链接地址的图片是以下这张，和屏幕里面小图显示的是同一张。
回到图片的链接上面来，我在浏览器里只访问主域名，发现这个商店地址确实可以访问，只是被设置为了「Coming Soon」的状态。
Retail
在这部分我没有找到特别可以一聊的内容，桌上的滑板和首屏出现是同一块，我不知道这能不能算是一点。也许有时候足够酷就可以了，不需要处处放置彩蛋。
前面提到网页上一些物品的 Logo 临时换成了 Shopify 的 Logo，但这个硬件上是真的有一个 Shopify 的 Logo。
Marketing
这一节插画的灵感可能来源于这张油画 Landscape with a Road Leading to Water。
这部分的插画里还有一个巨大的广告牌，这张图片其实已经在这个网页里反复出现很多次了，这也是我上面通过链接获取到的那张图，可以看到这是一个叫 MVSE SKATE 品牌的宣传图，
我在现实里查不到这个品牌，我认为这是一个为了这个网页「捏造」的品牌，我回去看了再前面几期的 Edition，每次的 Editon 页面都会出现一个不存在的品牌，这是前面几期的品牌名称：
- Summer 25：VILLA
- Winter 25：Kutsoo
- Summer 24：VMTI
- Winter 24：ZRO Chill
再之前的我就没有仔细查了，但大概率也会存在一样的虚构品牌，这可能已经成为了 Editions 页面的一种惯例。
我的同事提醒了我，MVSE 应该是指 MUSE ，这是它的拉丁铭文写法，而 MUSE （缪斯）是掌管艺术和科学的女神，用在这个主题网页里很合适。
Checkout
插图的帽子可以点击跳转购买，你可以真的拥有一顶这样的帽子！
Operations
当鼠标放到地球仪上面的时候，经纬线会出现一个交汇的点，对比现实的地图，虽然位置有一点点偏差，但应该是加拉帕戈斯群岛，这个岛和达尔文的有很大的联系：
岛上的环境启发了1835年9月搭乘小猎犬号前往南美洲从事自然调查研究工作的英国博物学家查尔斯·达尔文，使他重新思考真正可能的物种起源，进而成为二十多年后达尔文发表《物种起源》的开端。
放在这里我猜是想表达这次冬季更新将会演化出新的运营方式。
Shop app
这部分讲的是 Shop app，所以用的是这个这个品牌的紫色而不是其他插图里出现过的玫红色，帽子上的图形就是 Shop 品牌的 Logo。
B2B & Finance
暂时没特别的发现，期待有人能分享。
Shipping
猎豹上的快递
猎豹上的箱子上有一张标签，上面最大的文字写着「CHEETAH FLEET」，直译就是「猎豹舰队」，很明显就是在形容速度很快。
钥匙
钥匙应该是最广为人知的彩蛋，点击右侧的钥匙后浏览器会弹出一个小窗口，小窗口里的钥匙可以和原窗口的钥匙孔交互，单靠描述可能很难想象，推荐直接看这个视频，这个交互是这个网页里最让人惊叹的一个点。
注意部分浏览器（比如 Arc）无法弹出这个额外的窗口，建议使用 Chrome 来查看这个效果。
Developer
让我先按顺序把原来页面的内容先讲完。
Developer 这部分的插图设计仅为个人的猜测，背景的颜色、手稿、再加上头戴耳机这部分在指向音乐领域，这张插图的形象我认为在暗示着达芬奇的形象。
Key
回到 Shipping 这一节中出现的新窗口，我称它为 Key 窗口。
Key 窗口和旧窗口重叠后，像是 X 光扫描一样，在原窗口的上方显示出了一些涂鸦的内容，涂鸦大部分是文本，幸好整个页面的内容是一片涂鸦的 3 次循环，我只需要解析 1/3 页面的内容就好了。
涂鸦大致上是一些标语式的口号，用以表达 Shopify 的产品愿景，所以我不会在贴出这些文本具体想要表达什么，毕竟我也是使用 AI 识别后去解读，直接贴出来也没有意思，有兴趣的朋友可以使用我这张已经拼接好的长图让 AI 局部解读，我会简单解析几个图形的设计和另一个彩蛋。
涂鸦图案
涂鸦里出现了一个人物（上面第一张）拿着一本叫《GUTENBERG》的书，明显意指古登堡。
又是同一个同事提醒了我：Wordpress 的编辑器也叫 GUTENBERG，这两者很明显不是巧合，而是特地致敬了古登堡这个印刷术的象征，两者出现在这里我认为都是在暗喻着自身产品可以让你的效率得到跃升。
其他一些比较有趣的涂鸦：
- 一个米开朗琪罗的人像；
- 一个 Sidekick 助手；
- 还有 3 个不同的购物袋形象；
跳舞的购物袋
在页面的最顶部之外有一个 3D 的 Shopify 形象在跳舞，因为两个窗口的内容是重叠的，所以 Key 窗口的位置必须高于原窗口才能看到这个形象。
移动端
移动端上浏览，很多炫酷的效果都变成了高清的插图，由此我们可见一些静态插画（也可能是浏览器兼容的 fallback 方案）和 3D 处理时的改动，我顺手列一下一些差异点：
- Agentic 里窗口里的猫变成了人；
- Online 电脑界面不一样；
- Checkout 这一节尽管变成了静态插图，但是帽子依然可以点击购买；
- Operation 部分没有地球；
- Shop app 里的手机不是 iPhone 17 Pro Max；
- B2B 中的电脑没有 logo；
- Developer 里的人物没有戴耳机；
其他
技术细节
除了设计上的这些细节，技术上怎么将这么复杂的页面实现也非常值得关注，开发者放出了一些技术细节的讲解，我提取了其中对设计表现和体验影响较大的技术要点：
- 使用自己构建的 Electron 程序对 GLTF 进行优化；
- 使用 Theatre.js 制作动画；
- 使用了 Rive 制作动画，主要用于产品的界面动画；
- Key 窗口的实现不是重复渲染，而是通过 WebRTC 传输，并通过 BroadcastChannel 同步窗口之间的位置/大小/滚动；
- 创建了 4 个不同的加载质量，根据用户的 GPU 自动选择；
- 首屏的动画需要快速加载，主要依靠 SVG+CSS；
- 罗马数字的显示是一个自定义 CSS 样式；
其他 Edition 版本
Shopify 每半年就会上线一个新的 Edition 网页，你可以在这个网页里访问过往的版本。
除了每个 Edition 页面的设计完全不一样外，每个 Edition 页面的 favicon 也都和 Shopify 的不一样——除了 Winter 23 的版本，它仅仅在主站的 favicon 上添加了一个白色背景，但…还是可以说不一样对吧。
这是一篇不在预期内的文章。
上周我在一些设计周刊或者文章中也看到对这个网页的提及，无论是简单介绍还是用「很酷」之类描述的都完全合理，但当我看到一些对这个网页一模一样复制粘贴的评价，我想是不是很多设计细节其实都没有被展开过，我认为这个网页无论是在设计还是技术方面都值得好好看看，于是动手写下了这篇文章。
这个网页里的设计细节肯定不止于上面所讲的，写下这篇文章时我既没有进行太多的代码挖掘，也没有继续考证每节插图的设计是否有参考什么名画又或者进一步验证我的推测，即便如此，整理和写作这篇文章也花费了我很多时间，可见这个网页里的设计细节之丰富，也因此，让我很期待能看到更多挖掘这个网页背后的文化和设计的文章。
希望你们阅读愉快。