哈喽 我是大鹏，这里是第二灵感库，每天学习一点点，加班熬夜少一点，成长进步多一点！

设计师缺的可能不是灵感网站，而是“怎么找灵感”。

我们经常打开一个设计网站，收藏几十张看起来不错的页面。等真正开始做项目时，却还是不知道背景用什么颜色、按钮怎么写、动效加在哪里、品牌视觉怎么统一。

问题不是看得少，而是没有带着具体问题去看。

所以今天不做普通的网站排行榜，而是给大家整理一张“设计灵感急救地图”。遇到不同问题，就去不同的网站找答案。

---

本期灵感地图

设计问题	推荐网站	重点看什么
暗色页面总显得脏	Dark Design	层级、对比度、发光色
按钮有了但没人想点	CTA Gallery	按钮文案、位置、转化路径
页面好看但没有记忆点	Design Spells	微交互、彩蛋、动态反馈
品牌视觉总是不统一	Rebrand Gallery	Logo、字体、色彩和动态系统

---

场景一：暗色页面总显得脏，怎么办？

Dark Design

网址：https://www.dark.design/

Dark Design 是一个专门收集暗色主题网站的灵感图库。它目前收录了软件、AI、设计机构、个人网站、硬件、教育和 Web3 等不同类型的暗色案例。

它的价值不只是“网站都是黑色的”，而是可以让我们集中观察：优秀的暗色界面究竟是怎么建立层级的。

网站自身的视觉语言

主色参考：

背景色：#000000

主要文字：#FFFFFF

辅助文字：灰色与半透明白

强调色：根据收录案例变化

字体参考：

大标题：页面检测到 Aeonik Pro

导航和正文：页面检测到 Aeonik Fono

网站首页采用纯黑背景和高对比白色标题，标题字体非常粗，正文则带一点等宽字体的技术感。

暗色设计不是把白色换成黑色

很多暗色页面不好看，原因是设计师只做了颜色反转：

白色背景变成黑色，黑色文字变成白色，其他东西基本不动。

但真正成熟的暗色界面，至少需要处理三个层级：

背景层

：接近黑色，但不一定是纯黑

内容层

：卡片和面板比背景稍亮

强调层

：用高亮色、发光色或高对比按钮引导视线

如果背景、卡片和弹窗全是同一个黑色，页面就会失去空间关系。用户看不出哪些内容在前面，也不知道该先看哪里。

可以运用的设计法则

60-30-10 配色法则

60%：暗色背景

30%：卡片、图片和内容区域

10%：按钮、状态和关键数据

对比度原则

暗色页面不建议大面积使用纯白正文。纯白和纯黑的对比过强，长时间阅读容易疲劳。正文可以使用偏灰白，纯白只留给标题和重点信息。

正确使用方法

打开 Dark Design 后，不要只看完整截图。建议每次选 3 个案例，分别记录：

背景色是什么

卡片比背景亮多少

标题和正文用了几级灰度

强调色出现在哪些位置

图片周围有没有渐变、阴影或发光

这样收藏下来的不是一张图片，而是一套可以复用的暗色设计逻辑。

---

场景二：按钮已经很明显，为什么还是没人想点？

CTA Gallery

网址：https://www.cta.gallery/

CTA Gallery 是一个专门收集行动号召设计的网站。

它不是收集完整网页，而是聚焦按钮、表单、弹窗、订阅、价格方案和购买入口等与转化相关的局部设计。

目前可以按照以下类型筛选：

Button

Call-to-Buy

Download

Form

Modal / Pop-up

Navigation

Newsletter

Pricing / Subscription

这种分类方式特别适合正在做落地页、电商页面、SaaS 官网和活动页面的设计师。

网站自身的视觉语言

主色参考：

背景色：约#0E0F11

标题文字：#FFFFFF

卡片区域：深灰色层级

字体参考：

标题：页面检测到 Overused Grotesk SemiBold

其他内容：以简洁无衬线字体为主

网站自身没有抢案例的视觉注意力，而是用深色背景把不同 CTA 截图衬托出来。

一个有效的 CTA，需要解决三个问题

第一，用户点了会发生什么？

“提交”是一个动作，但用户不知道提交之后能得到什么。

相比之下，“生成我的配色方案”“查看完整案例”“开始免费创建”会更加具体。

第二，用户为什么现在要点？

按钮附近需要有足够的价值说明。例如节省时间、免费体验、无需注册、可以随时取消。

第三，用户敢不敢点？

如果按钮旁边还有高风险信息，比如直接付费、需要填写很多资料，用户会犹豫。可以通过辅助文案降低心理成本。

可以运用的设计法则

冯·雷斯托夫效应

当页面中的一个元素与其他元素明显不同时，用户更容易注意并记住它。

这就是为什么主要按钮和次要按钮不能使用完全相同的颜色、尺寸和权重。

菲茨定律

一个目标越大、距离越近，用户越容易点击。

移动端按钮需要保持足够的触控面积，重要按钮也应该靠近相关内容，而不是让用户读完一段内容后再到其他位置寻找。

希克定律

选择越多，决策时间越长。

如果一个首屏同时出现“立即开始、了解更多、观看视频、查看案例、联系我们”五个按钮，用户可能一个都不点。

给设计师的检查清单

设计 CTA 时，可以问自己：

按钮文案有没有表达结果？

主按钮和次按钮是否有明显层级？

按钮是不是离相关信息太远？

页面是否提供了太多选择？

按钮附近有没有降低风险的说明？

---

场景三：页面好看，但为什么没有记忆点？

Design Spells

网址：https://www.designspells.com/

Design Spells 收集的不是完整网站，而是那些“像魔法一样”的设计细节。

例如：

微交互

过渡动画

404 页面

彩蛋

拟物化细节

动态岛设计

Confetti 庆祝反馈

有趣的按钮状态

3D 和动效细节

如果 Dark Design 解决的是整体视觉氛围，Design Spells 解决的就是页面最后那一点“灵气”。

网站自身的视觉语言

主色参考：

背景色：#FAFAF9

标题色：约#1C1917

插画和装饰：使用紫色、红色、绿色等书本色彩

字体参考：

大标题：Fraunces

正文和标签：Inter

Fraunces 是一款带有明显个性的衬线字体，搭配 Inter 后，既保留了故事感，又不会影响正文阅读。

微交互的价值不是“让页面动起来”

一个完整的微交互通常包含四部分：

触发

：用户做了什么

规则

：系统接下来执行什么

反馈

：用户如何知道操作成功

循环与模式

：这个反馈是否会重复或改变

例如用户点击收藏按钮：

触发：点击收藏

规则：把内容加入收藏夹

反馈：图标变色并出现轻微缩放

循环：再次点击时取消收藏

如果只有动画，没有对应的操作结果，这个动效就只是装饰。

正确使用方法

浏览 Design Spells 时，可以为每个案例记录四句话：

什么动作触发了它？

动画持续了多久？

用户获得了什么反馈？

它对任务有帮助，还是只在制造热闹？

AI 微交互提示词

请为一个设计灵感收藏按钮设计微交互方案。

需要包含：

1. 默认状态

2. Hover 状态

3. 点击反馈

4. 收藏成功状态

5. 取消收藏状态

6. 推荐动画时长和缓动曲线

风格要求：克制、轻量、有愉悦感，不影响连续操作。

这个提示词可以帮助设计师先整理交互逻辑，再到 Figma 中制作原型。

---

场景四：Logo 做完了，为什么品牌还是不统一？

Rebrand Gallery

网址：https://www.rebrand.gallery/

Rebrand Gallery 是一个专门收集品牌升级、视觉识别系统和 Rebrand 发布案例的网站。

它目前可以看到品牌开场动画、Bento 展示、动态 Logo、字体系统、品牌色彩和发布视频等内容。收录案例包括 Netflix、Walmart、Etsy、Semrush 等不同类型的品牌。

网站自身的视觉语言

字体参考：

标题：页面检测到 Bricolage Grotesque

正文：Inter

页面以浅色背景和深灰文字为主，把视觉注意力留给不同品牌案例。由于每个品牌的配色差异很大，网站自身没有使用过强的固定强调色。

Rebrand 不等于换一个 Logo

一个完整的品牌升级至少包含五个层级：

Logo 与基础图形

品牌色彩系统

标题与正文字体

图片、插画和图标风格

动效与应用规范

如果只换了 Logo，但官网、App、海报、社交媒体依然各用一套视觉语言，用户还是感受不到品牌升级。

看品牌案例时，不要只问“好不好看”

建议用下面五个问题拆解：

旧品牌遇到了什么问题？

新标识保留了哪些品牌资产？

主色发生变化了吗？

字体如何体现品牌性格？

新系统是否适合 App、网页、包装和动态媒体？

Rebrand Gallery 最适合学习的不是某一个 Logo，而是品牌如何把一套视觉规则延伸到所有接触点。

AI 品牌分析提示词

请从品牌设计师的角度分析这组 Rebrand 案例。

重点分析：

1. 新旧 Logo 的变化

2. 品牌色彩的策略

3. 标题与正文字体的分工

4. 图形语言和图片风格

5. 动态识别系统

6. 新方案解决了什么品牌问题

7. 哪些方法可以迁移到其他项目

请避免只评价“高级、简约、好看”，需要说明设计依据。

---

把 4 个网站串成一套设计工作流

这 4 个网站不需要一次全部浏览，可以根据项目阶段使用：

项目阶段	使用网站	要解决的问题
确定视觉方向	Dark Design	暗色氛围与视觉层级
优化转化路径	CTA Gallery	按钮、表单和购买入口
补充体验细节	Design Spells	微交互、反馈和彩蛋
建立视觉系统	Rebrand Gallery	品牌色、字体和动态规范

收藏网站只是第一步。真正有用的方法，是每次带着一个具体问题进去，然后带着一条可以落地的规则出来。

---

本期回顾

Dark Design 适合解决暗色页面的层级问题。

CTA Gallery 适合解决按钮和转化路径问题。

Design Spells 适合解决页面缺少记忆点的问题。

Rebrand Gallery 适合解决品牌视觉不统一的问题。

设计灵感不是让我们照着别人的页面重新画一遍，而是帮我们理解：别人用了什么方法，解决了什么问题。

以上就是本期的 4 个设计灵感内容。

如果你正在积累 UIUX 知识、Figma 插件、Web/App 素材模板，或者想建立自己的设计灵感库，可以先把这篇收藏起来，等做项目、找参考、搭作品集的时候再回来翻一翻。

第二灵感库会持续整理更适合设计师学习和实战的内容：包括设计网站、Figma 资源、UIUX 方法论、灵感案例和效率工具。

希望这里能成为你的设计备忘录，也帮你在每一次项目开始前，少一点迷茫，多一点方向。

我是大鹏，我们下期继续一起补充灵感库。