哈喽，我是大鹏，这里是第二灵感库。
你有没有这种感觉：打开 Dribbble，满屏的精致 UI；打开 Behance，一堆的视觉大作。但当你看到一个网站——一个真正让你「停下手、专心看」的网站时，那个冲击力是完全不一样的。
我说的不是「好看」，而是——「这居然是个网页？」
这就是 3D 和沉浸式设计正在改写的东西。以前，这种体验只属于电影、游戏、大型APP。现在，一个品牌官网、一个个人作品集、一个产品页，都能让人像走进一个空间一样，沉浸其中。
今天这期，我拆了 6 个把网页当作「空间」而非「页面」来设计的网站。记住——你不一定要自己做 3D，但你必须理解它在怎么改变用户感知设计的方式。
📋 本期速览
1. Resend — B2B 工具凭什么用 Three.js？
简介
https://resend.com/home
Resend 是一个面向开发者的邮件发送 API 平台——听起来很「后端」、很「枯燥」对吧？但打开它的官网（3D 粒子动画、流畅的视差滚动、以及像游戏界面一样的视觉层次。
一个「邮件 API」的官网，为什么做得像苹果发布会？
设计风格
极简与高级感并存：大量留白，暗色模式，蓝色（#00A3FF）作为强调色
Three.js 粒子系统：首页的 3D 粒子动态效果，并非「炫技」——它模拟了邮件在互联网中流转的视觉隐喻
代码美学化：深色代码块与浅色页面形成对比，让「开发者」感觉被理解
社会证明前置：Vercel CEO 的推荐语直接放在首屏
设计理论：B2B 产品的「信任转移」
Resend 的设计回答了一个深层问题：开发者为什么愿意把邮件基础设施交给一家创业公司？
答案是 ——视觉即信用。当一个 API 工具的官网看起来比大厂还精致，你在潜意识里会相信：这帮人连细节都不放过，邮件送达率肯定也不差。
这就是「光环效应」在 B2B 设计中的应用：用户对你产品的判断，会被他们在第一屏看到的东西严重左右。Resend 用 3D 动画制造的不是「好看」，而是「专业感」和「技术实力」。
想想你自己：你的作品集/项目展示，第一屏给人的感觉，是否配得上你的真实能力？
学习价值
B2B 不等于 boring：你的工具型产品（即使是 API、SaaS、后台系统），官网展示完全可以有情绪、有质感
3D 不一定非要「炫」：Resend 的粒子动画克制、优雅，不是为炫而炫——它服务于「邮件流转」这个产品隐喻
首屏信任建设：如果你做的是功能性产品（知识库、工具、模板），第一屏给用户的视觉信号，比功能列表更重要
2. OXYZ3 轴厂 — 一个机械键盘品牌，凭什么拿 Awwwards？
简介
https://oxyz3.xyz/
OXYZ3（Three.js 把轴体做成了 3D 可交互模型，并且拿了国际设计奖项。
一个「零件级」的产品，做出了「奢侈品级」的品牌体验。
设计风格
暗色 + 金属质感：暗色背景配金属色轴体，把工业零件做成了珠宝展示
3D 产品拆解：用户可以360°旋转查看轴体结构，部件拆解动画精致得像汽车广告
中英双语：中国企业出海的设计标准——不是翻译，而是真正的国际化视觉语言
设计理论：产品的「意义升维」
一个轴体售价几块钱。为什么要把它的网站做成像卖几十万的机械腕表？
这叫意义升维（Meaning Elevation）：把一个功能性商品，通过设计赋予它超出功能本身的文化意义。就像矿泉水瓶可以只是「装水的容器」，也可以做成 VOSS 那样的「餐桌艺术品」。
OXYZ3 的官网本质上在说：**「轴体不是零件，是工艺。」**当用户看到一个零件被如此认真对待，他们对这个品牌的价格预期、品质预期会自然上升。
这对做设计素材、模板、数字产品的人来说，是同一个逻辑：你的产品页面，有没有告诉用户「这个东西值得被认真对待」？
学习价值
产品展示 ≠ 产品截图：再小的产品（零件、配件、素材），都可以通过空间展示制造「仪式感」
全球化就是诚意：多语言不只是翻译，是你的品牌视觉在国际语境里是否「成立」
从零件到叙事：OXYZ3 网站里每个轴体都有一个「诞生故事」——这就是「产品即内容」的设计思路
3. Aether 1 Earbuds — 一页讲完一个产品的全部故事
简介
https://www.aether1.ai/
Aether 1 Earbuds（Hero + 功能列表 + 价格表 + Footer」，而是一个连续的 3D 滚动叙事。
你往下滚，耳机的 3D 模型在旋转、分解、重组。每滚一段，讲一个产品特性。滚到底，你就「看完了一部产品电影」。
设计风格
一页到底（Single Page）叙事：没有多个子页面，所有内容通过滚动串联
3D 模型驱动：耳机始终在视野中，随着滚动展现不同角度和功能拆解
极简文案：「Sound Without Boundaries」「Unrivalled audio quality」——短句快节奏，像电影字幕
触觉引导：页面中提到了「Haptic feedback」，暗示产品本身的设计语言也延伸到了网页体验
设计理论：Scroll-telling（滚动叙事）
传统的网页内容组织方式是分层导航——首页 → 产品页 → 详情页 → 购买页。用户需要主动跳转，每条路径都有流失。
Scroll-telling 是一种线性沉浸式叙事：你不需要「选路」，你只需要「往下滚」。故事是设计师帮你规划好的，用户只需被动接收。这种方式把「浏览网页」变成了「观看展示」。
这背后是**被动流畅性（Passive Fluency）**理论：当信息以最省力的方式呈现给用户时，他们的理解深度和情感投入反而更高——因为大脑没有被「选什么、点哪里」分散注意力。
学习价值
设计作品集也可以一页到底：如果你有 3-4 个核心项目，试试用滚动叙事串联起来，而不是传统的列表展示
「少即是多」在文案上同样适用：每屏只讲一件事，每句话不超过 10 个词——这是 3D 叙事的节奏感
3D 模型不一定是「炫技」：Aether 的耳机模型始终是功能展示的工具（拆解内部结构、展示材质细节），不是为了转圈好看
4. Cosmos Studio — 拿了 10+ 个设计奖的工作室，怎么介绍自己？
简介
https://www.cosmos.studio/
Cosmos Studio（UI/UX 和动效设计的工作室。400+ 项目、Awwwards Site Of The Day×2、FWA Of The Day、CSS Design Awards × N 个——他们的奖项列表比功能列表长。
但真正值得看的，是他们如何用 3D 动效设计了一个「工作室名片」。
设计风格
暗色 + 星空气质：「Cosmos」这个名字不是随便取的——整个网站有大片暗色背景、粒子效果、旋转的 3D 球体，营造出「宇宙」的氛围
文字排版作为设计元素：标题字符之间有间距特效（C o s m o s S t u d i o），让文字本身变成视觉装置
团队成员展示像产品卡片：每个人的自我介绍不是干巴巴的列表，而是带有性格标签、动态头像
地理坐标展示：页面直接显示工作室的经纬度（50°27'N, 30°31'E）、当地时间——这是「我们不是模板站」的自信
设计理论：品牌即氛围（Brand as Atmosphere）
大多数设计工作室的官网是这样的：Logo + 项目列表 + 客户评价 + 联系我们。这是一个信息型网站——你在介绍你是谁、你做了什么。
Cosmos Studio 做的是一个氛围型网站——你没看到「我们擅长什么」，但你已经感受到了。暗色星空的沉浸感本身就是他们的能力证明：「我能让你沉浸在这个空间里，所以我一定能让你沉浸在你的产品里。」
这就是「说服」和「证明」的区别。你不需要说「我们很擅长 3D 设计」——你让用户在体验中自己得出结论。
对设计师的启发：你的作品集，是「说」你厉害，还是在「证明」你厉害？
学习价值
「关于我」不是简历：用空间、动效、氛围来展示你是谁，比文字自述有力一百倍
奖项展示是信任杠杆：Cosmos 把 Awwwards/FWA/CSSDA 的获奖徽章放在显眼位置——如果你没有奖项，可以展示用户反馈、数据指标、项目成果
文化和人格让设计有温度：团队成员展示「我想当宇航员，所以我创立了 Cosmos」——这种叙事让一个设计工作室有了人格
5. ½8 collective — 把真实世界扫描进网页，是一种什么体验？
简介
https://halfof8.com/
½8 collective（Anton 的个人设计工作室——他生活在日本，白天在 JetBrains 设计开发者工具，业余做 3D 扫描、出书、拿 D&AD 和 Webby 奖。
他的网站不是「作品集」，而是一个3D 策展空间：他把徒步旅行中扫描的真实场景、香港街头角落、富士山、东京的界限空间（Liminal Spaces），全部做成了可交互的 3D 网页展览。
设计风格
日式极简 + 3D 扫描：排版干净得像无印良品，但配上 3D 扫描的粗粝质感，形成有趣的对比
「收藏家」思维：每个项目不是「客户案例」而是「我在这个世界发现的有趣东西」
多媒介融合：视频、3D、平面设计、音乐——每个项目用不同的媒介讲故事
获奖徽章像邮票：Webby、D&AD、Awwwards、CommArts、日本 Typography Annual，密集排列但克制
设计理论：策展式设计（Curatorial Design）
大多数设计师的作品集是存档型的：「这是我做过的项目，这是客户，这是效果图。」
½8 collective 做的是策展型的：「这是我探索世界的方式，这是我的好奇心存档，这些 3D 扫描是我理解空间的媒介。」
区别在于：存档型作品集是「我有能力做这些事」，策展型作品集是「我是这样看世界的，你想一起看吗？」
这种思路来自当代艺术的策展方法论：你不是在展示你的「产出」，你是在构建一个世界观的入口。
对设计师的启示：你的作品集不应该回答「你能做什么」，而应该回答「你怎么思考和感受」。
学习价值
3D 扫描让「个人经历」变成「可展示的作品」：去过的城市、拍过的照片、走过的街道——都可以通过 3D 扫描变成设计输出
不要把爱好藏起来：Anton 的徒步、日语学习、写作——全都成了网站内容的一部分。这让他的个人品牌不可复制
「少即精」的策展力：不是所有项目都值得放，只放那些能代表你「怎么看这个世界」的
6. Noomo Labs — 设计的未来，在这里做实验
简介
https://labs.noomoagency.com/
Noomo Labs（Noomo Agency 的「实验分舵」。如果说前面 5 个网站是在「用 3D 做设计」，Noomo Labs 是在「用 3D 做实验」——XR（VR/AR）、AI 生成、3D 实时渲染、数字人……
它不卖任何具体产品，它是一个技术可能性展示厅。
设计风格
实验室氛围：暗色背景、粒子效果、随机数字跳动——让你感觉进入了一个未来实验室
可交互的参数滑块：页面上有「customize me」的滑条，你可以实时调整参数看效果变化
多技术混合：WebGL、Three.js、GSAP、XR——技术列表本身就是一种「我们什么都能做」的宣言
项目展示像科学实验报告：每个案例不是「客户好评」而是「技术实现方式 + 视觉效果展示」
设计理论：能力信号（Capability Signaling）
Noomo Labs 的逻辑不是「我们有这些客户」，而是「我们有这些能力」。它用一种间接证明的方式传递专业度：你不用看我们的客户列表，你看我们能做到什么。
这在设计行业尤其有效。因为有大量客户并不懂怎么评判一个设计公司——但当他看到你能做出「这种级别的东西」，信任就自然建立了。
这也是为什么设计师的作品集应该包含个人实验项目——它们证明的不是你的商业交付能力，而是你的上限。
学习价值
大胆做实验项目，然后展示出来：你不用等客户给你机会做 3D、AR、生成式设计——自己做，放进作品集
「实验室」型页面的品牌价值：如果你有知识库、素材库，可以考虑做一个「实验/探索」板块，展示你对前沿技术的追踪
技术多元 = 能力多维：Noomo 展示了 XR + AI + 3D 的组合能力，这在提案时意味着你可以跨领域接需求
💭 写在最后
这 6 个网站的共通点不是「用了 Three.js」——因为用了 Three.js 的网站成千上万。
它们的共通点是：它们把网页当作「空间」，而不是「页面」来设计。
这意味着：
不靠「点按钮跳转」来组织信息，而是靠「滚动、旋转、进入」来推进叙事
不靠「写文案」来证明能力，而是靠「让用户沉浸其中」来产生信任
不靠「列功能」来展示产品，而是靠「空间叙事」来赋予产品意义
对于设计师来说，哪怕你现在不做 3D——理解这种「空间思维」，会让你对「排版」「层级」「用户流程」有全新的认知。
因为好的设计，从来不是「做好看」，而是**「把人带进去」**。
📦 我正在构建一个UI/UX 设计知识库，包含 11 个系统模块：基础入门、UX 用户体验设计、UI 界面设计、设计流程与方法论、设计文章与理论、全球设计网站导航、素材资源宝库、设计师工具箱、职业发展指南、个人学习输出，以及 AI 设计前沿。
里面附带了：
📦 Figma Web 官网模板
📱 App 模板
🎬 UX 交互动效模板
🔧 Figma 汉化软件 + 3 套课程
🔌 Figma 插件库
📚 设计电子书籍
在评论区留言「资源」，我会把详细信息发给你～
我们下期见 👋