哈喽，我是大鹏，这里是第二灵感库。
你有没有过这种经历——你做了一个功能齐全、像素完美的页面，老板看完说"嗯，还行"，客户说"能不能再改改"，你的设计就像一杯白开水，解渴但没有任何记忆点。
问题出在哪？你的设计没有「说话」。
设计不只是排布元素，更是一种叙事行为。一个会讲故事的设计，能让用户在 3 秒内感受到品牌的态度、理解产品的价值、记住你这个人。而那些只会"排得好看"的设计，再好也只是一张漂亮的墙纸。
这期我拆了 6 个网站，它们分别用了 6 种完全不同的「叙事方式」——看完你会明白，设计的表达力到底是什么。
📋 本期速览
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Saapro — 数据叙事：让数字替你说话
🔗 https://www.saapro.ae/
📌 这是什么
Saapro 是一家阿联酋的环保科技公司，做移动式废物处理工厂。听起来很 B2B、很工业对吧？但它的网站拿了 Awwwards Site of the Day——一个环保科技网站，凭什么打败了那些酷炫的设计工作室？
🎨 设计风格
- 深色底 + 绿色点缀
：深色背景营造科技感和严肃感，绿色点缀呼应环保主题，整体氛围像一部高质量的科技纪录片 - 大数字冲击
：首页直接用巨型字体展示环境危机数据——40.9亿吨 CO₂ 排放、2.12亿吨城市固体废物——不给你任何缓冲，上来就是视觉重拳 - 圆角 + 点状图案装饰
：在冷硬的科技感中加入了柔和的几何元素，避免过于冰冷 - 技术对比表格
：用清晰的表格把自己的技术（非碳化废物销毁反应器）和传统方式（热解、气化、焚烧）并列对比，一目了然 - 6步流程图
：把复杂的技术原理拆成 6 个步骤，每步配简洁插图，让非技术人员也能看懂
🧠 为什么这样设计
Saapro 的设计团队（Adelt 工作室）用了数据驱动的叙事策略。这不是一个卖产品的网站，这是一个讲环保紧迫感的网站。
它的叙事逻辑是：
- 先制造焦虑
：用大数字展示环境危机——"你看，问题很严重" - 再提供方案
：用技术对比表格展示自己的方案为什么更好——"但我们的技术能解决" - 最后建立信任
：用流程图和实际案例证明可行性——"已经有人在用了"
这种叙事方式的核心设计理论是 "Problem-Agitation-Solution"（问题-放大-解决）。很多设计师在做企业官网时只想着"排版要好看"，但 Saapro 告诉我们：在商业设计中，信息的编排顺序比视觉好看重要100倍。
💡 学习价值
- 数据可视化的叙事力
：不是把数据塞进图表就完事了，而是思考——这个数据放在什么位置？用什么字号？和什么内容呼应？才能让读者产生你想要的感受 - B2B 也可以很叙事
：不要以为只有消费品牌需要讲故事。B2B 设计更需要叙事——因为你的产品往往更复杂、更难一眼看懂 - 色调的情绪引导
：深色底让读者进入"严肃思考"模式，绿色点缀暗示"希望和解决方案"。颜色本身就是叙事工具
2. Astral Frontier — 空间叙事：把网页变成一段旅程
🔗 https://www.theastralfrontier.com/
📌 这是什么
"Astral Frontier"（星际边境）是一个交互式沉浸体验网站，把网页浏览包装成一次"星际探索"。它是 Awwwards Masterclass 的一个练习项目，由设计师 Andrew Measham 创作，参考了 Niccolo Miranda 的交互式网站大师课。
🎨 设计风格
- 多层背景滚动（Parallax）
：页面有 6 层背景图——英雄区、目标区、行星区、银河区、页脚区，每层以不同速度滚动，创造深邃的空间纵深感 - 深色宇宙氛围
：黑底 + 暖棕色装饰线条（#8F7E77），SVG 点阵图案做边框装饰，像科幻电影的 UI 界面 - 3 颗虚构星球
：每颗星球都有完整的"文明设定"——Verdara（森林文明）、Pyrrhos（光暗对比文明）、Glaciora（冰下生物发光文明），附带详细的轨道距离、质量、直径、重力等参数 - 测验互动
：最后的"Explorers Path"测验——"Which World Calls to You?"（哪个世界在呼唤你？），用户完成测验后显示"Confirmed!"确认反馈 - 背景音效
：页面默认开启音量，建议用户戴上耳机体验
🧠 为什么这样设计
这背后是一种叫 "Diegetic Design"（叙事性设计） 的思维——你不是在"浏览一个网站"，你是在"探索一个世界"。
传统的网页导航是"首页 → 关于 → 作品 → 联系"，而 Astral Frontier 把它变成了"出发 → 了解使命 → 探索星球 → 穿越银河 → 找到归宿"。每一屏都是旅程的一个阶段，而不是独立的信息模块。
这里有一个关键的设计理论："Metaphor Mapping"（隐喻映射）。设计师把"了解一个设计师的作品"这件事，映射到了"探索宇宙"这个更容易产生情感共鸣的隐喻上。你不需要懂代码，但你会被这个故事吸引，不知不觉就看完了整个页面。
💡 学习价值
- 把你的作品集变成旅程
：你可以用同样的思维改造自己的作品集——不是"列出我的项目"，而是"跟我一起看看我设计过的世界" - 背景音效不是噱头
：当声音和视觉叙事配合时，用户体验提升不止一个档次。想想 Apple 的产品页面，它们从来不只是静态图文 - SVG 装饰的力量
：不需要 3D 渲染也能做出空间感——SVG 点阵、线条、几何图案的组合，成本低但效果惊人
3. HARD LINES — 态度叙事：品牌个性本身就是设计
🔗 https://hard-lines.co.uk/
📌 这是什么
Hard Lines Coffee 是一家英国威尔士卡迪夫的精品咖啡品牌。他们不只卖咖啡——他们有 3 家实体店、一个跑步俱乐部、精酿啤酒联名，还加入了"1% for the Planet"环保承诺。
🎨 设计风格
- 大胆有态度的品牌语言
：品牌名"Hard Lines"本身就带有叛逆个性（字面意思是"强硬路线"）。网站文案毫不避讳地使用强烈语气，甚至有些词被星号遮盖，但这反而强化了"我们不在乎完美"的态度 - 滚动跑马灯标语
：页面中多次出现横向滚动的重复标语——"REALLY REALLY REALLY GOOD COFFEE!"、"thursday at 6:30pm In cardiff!"——视觉冲击力极强，像街头涂鸦 - 社会证明轰炸
：The Guardian、FT（金融时报）、GQ 等权威媒体推荐标志 + 五星好评 + 客户引言——不靠"我们的咖啡很好喝"这种废话，直接用第三方背书说话 - 社区内容前置
：跑步俱乐部的信息和咖啡产品同等重要——每周四下午 6:30，"欢迎各种水平的跑者和狗狗"
🧠 为什么这样设计
Hard Lines 用的是一种叫做 "Brand Voice as Design"（品牌声音即设计） 的策略——你的品牌怎么说话，比你用什么配色、选什么字体更能定义你的设计风格。
这里可以拆出三个层次：
- 语言层
：大胆、直接、不修饰——"REALLY REALLY REALLY GOOD COFFEE!" 这句话如果换成"精心烘焙的优质咖啡"，品牌个性瞬间消失 - 行为层
：跑步俱乐部、精酿啤酒联名、环保承诺——这些不是营销噱头，它们是品牌在"做"而不是"说" - 信任层
：被 Guardian、FT、GQ 推荐——第三方背书比任何自吹自擂都有说服力
核心设计理论："Signal Theory"（信号理论）。你的设计发出的每一个信号（文字、图片、行为、合作方），都在向用户传递品牌的价值主张。Hard Lines 的信号是：我们不只是卖咖啡的，我们是你的生活方式的一部分。
💡 学习价值
- 写文案也是做设计
：不要以为文案是文案的事。你选的字体、字重、排版节奏，都在帮你"说"出品牌的态度 - 跑马灯不是过时的设计
：当跑马灯内容和品牌个性高度契合时，它不是俗套，是记忆点 - 社区内容 > 产品介绍
：Hard Lines 把跑步俱乐部放在和咖啡同等重要的位置——这传递了一个信号：我们卖的不只是产品，是社区体验
4. Flambette — 感官叙事：用文字让你"闻到"设计
🔗 https://flambette.com/
📌 这是什么
Flambette 是一家加拿大法语区的手工香氛蜡烛品牌。纯手工制作、天然成分（大豆蜡）、9 种经典香型（每种都是"A + B"的双原料组合命名），还有艺术家联名系列。
🎨 设计风格
- 极简法式文艺风
：大量留白、柔和低饱和度色调、大图轮播——整体气质像一本独立杂志 - 诗意文案是主角
：首页不写"我们的蜡烛很好闻"，而是写—— "Vivre le moment présent. Parce qu'après tout, à quoi bon se presser autant ?"
（活在当下。毕竟，何必那么匆忙？）"Il était une fois... Dans un humble atelier aux planchers rose houpette..."
（从前……在一个粉红色地板的简朴工坊里……） - 香型命名是微型故事
：每个香型不叫"薰衣草"，而叫"menthe + romarin"（薄荷 + 迷迭香）、"figue + cyprès"（无花果 + 柏树）——原料本身就是叙述，而不是标签 - 可持续叙事
：设有"容器回收"页面、"微瑕品"专区（减少浪费）、环保袋产品——环保不是口号，是贯穿整个购买流程的行为
🧠 为什么这样设计
Flambette 的叙事策略是 "Sensory Translation"（感官翻译）——如何用视觉和文字，传达嗅觉和触觉的体验？
卖蜡烛最大的难点是什么？用户在网上闻不到味道。 所以 Flambette 不用"香味描述"这种老套路，而是用三个手段替代感官缺失：
- 情绪代替气味
："活在当下，何必匆忙"——这是品牌想让你在点燃蜡烛时感受到的情绪，而不是蜡烛闻起来像什么 - 故事代替成分
：品牌从"一个简朴工坊的粉色地板"说起——这是品牌的起源故事，让产品有了温度 - 原料可视化
："无花果 + 柏树"——你可以想象这两种东西的味道混合起来是什么感觉
这是一个非常高级的设计思维：当你无法展示产品本身时，展示产品带来的体验。
💡 学习价值
- 感官品牌的设计方法
：如果你的产品无法在线上被"试用"（香水、食物、音响、床垫），你需要用视觉和文字来"翻译"其他感官 - 文案是界面的一部分
：Flambette 的诗意文案不是装饰，它是整个品牌体验的核心组件 - 可持续不止是标签
：当回收、微瑕品、环保袋成为产品线的一部分时，可持续才从"口号"变成了"体验"
5. Henri Heymans — 信任叙事：用荣誉为你的设计背书
🔗 https://henriheymans.com/
📌 这是什么
Henri Heymans，29 岁法国创意网页开发者，创意开发工作室 Propagande 联合创始人。他的个人作品集网站，核心目的就一个：让潜在的客户和合作方相信——这个人是专业的。
🎨 设计风格
- 极简无冗余
：导航栏只有 BIO、WORKS、GALLERY、CONTACT，没有任何装饰性元素，所有信息围绕"展示个人能力、促成合作"这一个目标 - 技术栈透明展示
：直接在显眼位置列出核心技术能力——Javascript / Vue / Nuxt / ThreeJS / GSAP / Prismic / Vercel——不藏着掖着，告诉你会什么 - 荣誉墙显性化
：专门设置"Recognitions & Awards"板块，整理了 15 项行业荣誉，包括 Awwwards 年度独立开发者提名、6 个 Site of the Day、6 个开发者专项奖 - LVMH 级别客户
：合作案例包括 LVMH 这样级别的品牌，放在页面上本身就是最强背书 - 简洁但有力的 CTA
：每个作品都附带"See live"链接、多处"Start a project"引导按钮——不是在"展示自己"，是在"邀请合作"
🧠 为什么这样设计
Henri Heymans 的网站是一个完美的 "信任建立漏斗"：
- 第一层
：你是谁（29岁法国创意开发者，Propagande 联合创始人）——立刻建立身份认知 - 第二层
：你会什么（Javascript / Vue / Nuxt / ThreeJS 等技术栈）——展示硬实力 - 第三层
：你做过什么（LVMH 等品牌合作案例 + 作品集）——用案例证明 - 第四层
：别人怎么说你（15 项 Awwwards 荣誉）——用行业认可背书 - 第五层
：怎么联系你（邮箱 + 社交链接 + "Start a project"按钮）——把信任转化为行动
这个漏斗的核心设计理论是 "Social Proof"（社会证明）。当一个设计师的作品集只有几张图，用户无从判断你的水平。但当你有 15 个行业奖项、LVMH 级别的客户、明确的技术栈——用户不需要懂设计也能判断：这个人靠谱。
💡 学习价值
- 作品集不是作品罗列
：你的作品集应该回答 3 个问题——你是谁？你会什么？为什么选你？Henri Heymans 用了不到 5 屏就回答了全部 - 荣誉要显性化
：很多设计师在作品集角落里放一个小小的"Awwwards"标签——Henri Heymans 专门开了一个板块。你有多重视自己的成果，别人就有多重视你。 - 技术栈透明 > 藏着掖着
：告诉客户你会什么，比说"我们能做任何事"更有说服力
6. Drams — 哲学叙事：让设计大师的原则在你的作品里复活
🔗 https://drams.framer.website/
📌 这是什么
Drams 是一个受 Dieter Rams（迪特·拉姆斯，20 世纪最具影响力的工业设计师之一）启发的 Framer UI 组件库。它把拉姆斯著名的"好设计十原则"融入到了一套可复制、可修改的 Framer 组件中——按钮、开关、滑块、旋钮、拨盘，每个组件的设计都像一个微型的产品。
🎨 设计风格
- Dieter Rams 式的克制美学
：博朗（Braun）风格的简洁线条、灰色调、没有任何多余装饰——每个组件都像是可以摆在博物馆里的工业设计品 - 复古 UI 与现代交互
：组件名叫"Braun Electric Shaver"（博朗电动剃须刀）、"Digital Clock Radio"（数字收音机闹钟）、"Rotary Radio Player"（旋转式收音机播放器）——把 1960 年代的工业产品形态，变成了 2026 年的数字 UI - Remix 文化
：所有组件可以一键复制到自己的 Framer 项目中，鼓励修改和二次创作 - 十大原则可视化
：首页直接将拉姆斯的十原则列出来——创新、实用、美观、易懂、谦逊、诚实、持久、细致、环保、少设计——作为整个组件的设计纲领
🧠 为什么这样设计
Drams 的核心叙事是 "Philosophy as Design System"（哲学即设计系统）。
大多数 UI 组件库的叙事是"我们有200个组件，省你时间"。Drams 的叙事是"这里有 10 条设计原则，每个组件都是它们的物理化身"。
这里有一个极其重要的设计思维：当你有了设计哲学，你的设计决策就不再是"这个颜色好不好看"，而是"这个决定是否忠于你的原则"。
比如，当一个按钮是否要加阴影时：
-
普通设计师：加了阴影好看，加吧 -
Drams 的设计师：拉姆斯第 5 条原则——"好的设计是谦逊的、不突兀的"，阴影太抢眼，不加
这就是从"靠感觉做设计"到"靠原则做设计"的转变。
💡 学习价值
- 建立你自己的设计原则
：你不一定要用拉姆斯的十原则，但你需要有自己的判断标准。没有原则的设计师，永远在追着趋势跑 - 组件库不是功能堆砌
：最好的组件库是有灵魂的——shadcn/ui 的灵魂是"可定制性"，Drams 的灵魂是"拉姆斯美学" - 致敬大师不是抄袭
：Drams 把拉姆斯的工业设计原则转化成了 UI 组件——这是一种创造性的"翻译"，而不是复制粘贴
📝 本期回顾
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
设计的本质从来不是"做得好看"。是"说得清楚"——对用户说清楚价值，对客户说清楚信任，对世界说清楚你是谁。
好看的设计千篇一律，会讲故事的设计万里挑一。
📦 我的 UI/UX 设计知识库
如果你不想停留在"知道很多设计网站但用不出来"的阶段，我的知识库包含了 11 个系统模块——从基础入门到 AI 设计，从 UX 方法论到职业发展路径，帮你把零散的灵感变成自己的设计判断力：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
目前知识库已整理完成，附带：
-
📦 Figma Web 官网模板 -
📱 App 模板 -
🎬 UX 交互动效模板 -
🔧 Figma 汉化软件 + 3 套课程 -
🔌 Figma 插件库 -
📚 设计电子书籍
如果你想系统提升设计能力——在评论区留言**「资源」**，我会把详细信息发给你～