广州总部电话:020-85564311
21年
互联网应用服务商
广州总部电话:020-85564311
21年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

设计师卡住别再乱翻!这 4 个网站,帮你从配色找到交互细节

发布日期:2026-07-08 07:40:21 浏览次数: 806 来源:第二灵感库
推荐语
打开设计灵感急救地图,针对配色、按钮、交互、品牌四大难题,精准找到解决方案。

核心内容:
1. 暗色页面设计:从背景到强调色的层级构建法则
2. 按钮优化策略:文案、位置与转化路径的灵感参考
3. 品牌视觉统一:Logo、字体到动态系统的整体设计思路
小优 网站建设顾问
专业来源于二十一年的积累,用心让我们做到更好!
哈喽 我是大鹏,这里是第二灵感库,每天学习一点点,加班熬夜少一点,成长进步多一点!
设计师缺的可能不是灵感网站,而是“怎么找灵感”。
我们经常打开一个设计网站,收藏几十张看起来不错的页面。等真正开始做项目时,却还是不知道背景用什么颜色、按钮怎么写、动效加在哪里、品牌视觉怎么统一。
问题不是看得少,而是没有带着具体问题去看。
所以今天不做普通的网站排行榜,而是给大家整理一张“设计灵感急救地图”。遇到不同问题,就去不同的网站找答案。

本期灵感地图

设计问题
推荐网站
重点看什么
暗色页面总显得脏
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 方法论、灵感案例和效率工具。
希望这里能成为你的设计备忘录,也帮你在每一次项目开始前,少一点迷茫,多一点方向。
我是大鹏,我们下期继续一起补充灵感库。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询