01Hero双栏不对称（文字+视觉）

CATEGORY
图片/装饰区域
分享会Landing、教程首屏、产品介绍首屏

02Sticky侧栏 + 内容滚动

01
长内容分段展示、知识点讲解、深度内容

03三等分卡片网格

功能展示、能力矩阵、并列要点

04纵向Step流程线

1
2
3
安装步骤、流程教程、教学引导

05中轴时间线交错

内容对比、时间线、并列要点展示

06全宽深色面板

好的设计不是看起来有多美，
而是用起来有多自然。
重要引用、核心观点、代码展示（打破奶白底节奏）

07横向Step连接线

1

配置环境

2

安装依赖

3

启动运行

简短的3~4步骤概览

08Hero全屏居中型

个人品牌首页、产品发布页（强视觉冲击力首屏）

09Hero单栏纵向（中心辐射型）

👤
设计 AI 创作
活动分享页、情感叙事页（以头像/Logo为中心展开）

10自适应卡片网格（auto-fill）

📖
读书笔记
🎨
设计思考
💻
技术实验
✍️
写作练习
🎵
音乐日记
技能卡片、书籍卡片、不确定数量的内容集合

11全宽品牌色面板

核心观点在这里

用品牌色面板打破奶白底的节奏，制造视觉高潮

情绪高潮、CTA邀请、核心观点（打破奶白底节奏）

12横向滚动时间线

2021
2022
2023
2024
2025
经历时间线、横向浏览内容

13分栏对称（Pain Point展示）

你是否也有
这样的困扰？

  • 信息过载，无法聚焦
  • 缺少系统的方法论
  • 知道却做不到
  • 反复陷入同一个坑
问题vs方案对比、冲突展示、before/after

14Tab切换单栏（Dashboard型）

个人看板、功能切换、数据面板

15无限画布（Canvas型）

📝 想法笔记
🎯 目标拆解
💡 灵感收集
🔗 资源链接
白板应用、信息可视化、自由布局

16Sticky编号侧栏 + 大图杂志卡片

  • 01观察
  • 02分析
  • 03执行
01
02
03
步骤教程、流程拆解、图文并茂的长教程（5~10步）
esthersjw-design-system