电蓝学习资源库 (Electric Learning Library)
更像带强品牌色的学习资源库首页,用超大标题、单一高识别色和策展式资源卡片,把知识入口做得有记忆点。
学习资源库课程导航知识门户
真实网站参考 / Real References
先看这些真实网站 / Open these real sites first
长这样 / Looks Like
- 电蓝识别强
- 超大标题先定调
- 导言像宣言
- 下折直连资源卡片
适合做 / Good For
- 学习资源库
- 课程导航
- 知识门户
不适合做 / Not For
- 纯作品集
- 后台工作台
- 重情绪摄影品牌页
Skill 包含什么 / What The Skill Controls
截图、排版和规则来自同一套风格包 / The screenshots, layout, and rules come from the same skill packet
配色系统 / Color System
- 用近白或极浅灰作为画布
- 只保留一个高识别度电蓝作为主色
- 不要再叠加第二套鲜艳品牌色
排版系统 / Typography
- 超大无衬线标题先定调
- 副文像导言或编辑按语
- 卡片元数据保持紧凑和整齐
版式规则 / Layout Rules
- 首屏先明确这个资源库在帮谁学什么
- 下折立刻进入 featured resources 或 videos 网格
- 品牌宣言和资源浏览要连续出现,不要分成两个站
图片处理 / Image Treatment
- 缩略图可以服务资源卡片
- 但视觉身份主要靠排印和电蓝色建立
- 不要让卡片缩略图风格彼此失控
交互节奏 / Motion
- 滚动显露和 hover 保持轻量
- 让链接、卡片边界和按钮反馈更清楚
- 不要做廉价 SaaS 弹跳或赛博发光
AI Prompt / AI Prompt
复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude
请参考电蓝学习资源库(Electric Learning Library)风格建站:
视觉特征:电蓝识别强 / 超大标题先定调 / 导言像宣言 / 下折直连资源卡片
适合场景:学习资源库 / 课程导航 / 知识门户
不适合:纯作品集 / 后台工作台 / 重情绪摄影品牌页
推荐页面组织:目录索引型 / Catalog Explorer / 档案堆栈型 / Archive Stack
历史来源:新字体排印 / New Typography / 瑞士风格 / Swiss Style / 包豪斯 / Bauhaus
参考网站:Zara Faces / AI: https://zara.faces.site/ai / Zara Faces / AI Grid: https://zara.faces.site/ai / People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/
配色系统:用近白或极浅灰作为画布 / 只保留一个高识别度电蓝作为主色 / 不要再叠加第二套鲜艳品牌色
排版系统:超大无衬线标题先定调 / 副文像导言或编辑按语 / 卡片元数据保持紧凑和整齐
版式规则:首屏先明确这个资源库在帮谁学什么 / 下折立刻进入 featured resources 或 videos 网格 / 品牌宣言和资源浏览要连续出现,不要分成两个站
图片处理:缩略图可以服务资源卡片 / 但视觉身份主要靠排印和电蓝色建立 / 不要让卡片缩略图风格彼此失控
风格要求:Use an electric learning library family: near-white canvas, one electric accent color as the identity system, oversized sans-serif hero copy, manifesto-like intro text, and curated resource cards or video modules directly below the fold.
历史来源 / Historical Roots
这部分放在最后看,用来补背景,而不是先决定风格。 / Use this section to add background after the direction is already clear.
1920s-1930s
新字体排印 (New Typography)
以非对称排版、空白场和摄影/版面组织信息清晰度。
1950s-1970s
瑞士风格 (Swiss Style)
网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。
1919-1933
包豪斯 (Bauhaus)
功能、工业和几何秩序优先。它把形式服从用途这件事系统化。