diff --git a/design-refs/mockup/build.sh b/design-refs/mockup/build.sh index fda7a72..0f9b30d 100755 --- a/design-refs/mockup/build.sh +++ b/design-refs/mockup/build.sh @@ -17,7 +17,7 @@ export TMPDIR="$HOME/.cache/h2p-tmp" STEMS=("$@") if [ ${#STEMS[@]} -eq 0 ]; then - STEMS=(course-shelf components color-system design-styles design-system) + STEMS=(course-shelf components color-system design-system) fi for STEM in "${STEMS[@]}"; do diff --git a/design-refs/mockup/design-styles.html b/design-refs/mockup/design-styles.html deleted file mode 100644 index 8078cbc..0000000 --- a/design-refs/mockup/design-styles.html +++ /dev/null @@ -1,772 +0,0 @@ - - - - -设计风格探索 · 七种风格 × 课程书架 · stack idealjs - - - - - -
-
- <DesignStyles /> -

设计风格探索 · 八种风格 × 课程书架

-
同一套课程卡信息（章节卡 · 16:9 预期区 · 状态 · 路线）在八种风格语言下重演，供横向对比与择路。均遵守：不用色彩渐变。
-
- -
-
-
-
瑞士风格 Swiss02
-
-
网格与排印承担一切，红色只做信号。信息密度的最优解。
-
-
-
孟菲斯 Memphis03
-
-
粗黑描边、硬投影与几何涂鸦，欢乐但吵闹。
-
-
-
拼贴风 Collage04
-
-
纸片、胶带与图钉：知识像剪报被钉在线上，手作感强。
-
-
-
波普风 Pop Art05
-
-
本戴点与爆炸框，完成章节像漫画的 POW！情绪最强。
-
-
-
扁平风 Flat06
-
-
纯色块分层、无影无纹理，工程实现最省。
-
-
-
像素风 Pixel07
-
-
任务地图与 HP 条：学习像通关，游戏化拉满。
-
-
-
极简风 Minimal08
-
-
留白与发丝线，颜色退到墨阶，仅 sage 一点呼吸。
-
-
-
拟物 Skeuomorphism09
-
-
木桌、精装书与蜡封：材质带来拥有感，最有仪式感。
-
-
- 怎么选 -
主风格在瑞士 / 扁平 / 极简中取一（信息效率）；拟物给课程卡与书架本体；孟菲斯 · 波普 · 像素做成就与彩蛋层；拼贴适合实践经历栏目。风格分层混用，规则见各页右栏。
-
-
-
- -
设计风格探索 · Design Styles · stack idealjs
-
01 / 09
-
- - -
-
- Style · Swiss -

瑞士风格 · 网格与排印承担一切

-
客观、齐左、大字号对比，红只做信号；卡片无影，靠发丝线与网格定位。信息密度最高的选择。
-
- -
-
01
-
-
COURSE SHELF — FULL-STACK
-
课程书架 · 全栈工程师教程
-
-
- -
-
- 🌐 - 16:9 -
-
快速开始✓
-
-
-
- ⚛️ - 16:9 -
-
React✓
-
-
-
- 🔗 - LOCK -
-
全栈基础○
-
- - - - - - - -
SEQUENCE 01–06 · GRID 12 COL · TYPE 2 STEP
- -
-
ink
#111111
-
paper
#ffffff
-
desk
#f0f0ef
-
gray
#8a8a8a
-
signal-red
#e4002b
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩黑 / 白 / 灰 + 单一信号红
卡片无影，1px 发丝边框
排印大数字 + 小注释，齐左
线条1px 黑实线
站点6px 方块（红=当前）
状态黑块 ✓ / 灰框 ○
-
-
-

适配判断

-
1适合：教程正文与目录——信息效率天花板。
-
2慎用：儿童向或庆功场景太冷静。
-
3混用：可作全站骨架，其余风格做局部层。
-
- -
设计风格探索 · Swiss · stack idealjs
-
02 / 09
-
- - -
-
- Style · Memphis -

孟菲斯 · 粗描边与几何涂鸦

-
反功能主义的欢乐：高饱和撞色、2px 黑描边、硬投影，圆点波浪三角当装饰。学习不必一脸严肃。
-
- -
-
-
- 🌐 -
-
快速开始✓
-
-
-
- ⚛️ -
-
React✓
-
-
-
- 🔗 -
-
全栈基础?
-
- - - - - - - - - - - - - -
装饰不进正文区：涂鸦只出现在留白与卡片边缘。
- -
-
coral
#ff6b6b
-
mustard
#ffd93d
-
teal
#4ecdc4
-
cream
#f7f0e8
-
ink
#111111
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩珊瑚 / 芥末 / 湖蓝 + 奶油底
卡片2px 黑描边 + 5px 硬投影
形状大圆角，允许 ±1.5° 旋转
线条3px 黑实线
站点描边圆点，四色轮换
状态彩底描边胶囊 / 星形
-
-
-

适配判断

-
1适合：激励层——成就徽章、里程碑、空状态插画。
-
2慎用：正文阅读区，噪音大、久看累。
-
3规则：涂鸦只上留白与边缘，永不进文字。
-
- -
设计风格探索 · Memphis · stack idealjs
-
03 / 09
-
- - -
-
- Style · Collage -

拼贴风 · 剪报、胶带与图钉

-
知识像剪报被钉在线上：牛皮纸、撕边纸片、和纸胶带、邮戳。手作感与档案感并存，适合"经历"类内容。
-
- -
-
-
- -
-
-
- 🌐 - 16:9 · GIF -
-
快速开始✓ 完成
-
-
-
-
- ⚛️ - 16:9 · GIF -
-
React✓ 完成
-
- -
-
-
- 🔗 - 16:9 · GIF -
-
全栈基础○ 待读
-
-
-
NOTES · 剪报
-
-
-
-
已归档
-
- - - - - - - - - - -
麻绳点划线 + 图钉：路线像钉在软木板上。
- -
-
kraft
#d9c7a7
-
scrap
#fffdf5
-
newsprint
#efe9da
-
pin-red
#b3402a
-
twine
#8a7a5c
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩牛皮 / 纸白 / 新闻灰 + 邮戳红
卡片撕边圆角 + 微旋转 + 软影
固定和纸胶带（半透米色）
线条麻绳点划（棕）
站点图钉圆（红/黄铜）
状态邮戳圆章「已归档」
-
-
-

适配判断

-
1适合：实践经历栏目、学员作品墙、更新日志。
-
2慎用：需要精确对齐的表格与代码块。
-
3规则：旋转只在卡片 ±1.5°，文字永不斜。
-
- -
设计风格探索 · Collage · stack idealjs
-
04 / 09
-
- - -
-
- Style · Pop Art -

波普风 · 本戴点与爆炸框

-
漫画分格的 3px 黑描边、本戴点半调、四色撞色；完成章节就该像一格漫画里的 POW！情绪最强的选择。
-
- -
-
-
- 🌐 -
-
快速开始✓
-
-
-
- ⚛️ -
-
React✓
-
-
-
- 🔗 - 未解锁 -
-
全栈基础
-
- - - - - - - - - -
POW!
-
DONE!
-
本戴点 = 硬边点阵图案（非色彩渐变）；爆炸框只给"完成"时刻。
- -
-
yellow
#ffd500
-
pink
#ff3b6b
-
blue
#2b6bf3
-
halftone-b
#9ec5ff
-
ink
#111111
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩黄 / 粉 / 蓝 / 黑四色
卡片3px 黑描边 + 6px 硬投影
底纹本戴点（硬边点阵）
线条4px 黑实线
站点五角星（黄/蓝/白）
状态POW! 爆炸框 / 黑标未解锁
-
-
-

适配判断

-
1适合：庆功层——完成弹窗、里程碑海报、分享卡。
-
2慎用：整站主风格，视觉疲劳快。
-
3规则：爆炸框一屏至多一个，只用给"完成"。
-
- -
设计风格探索 · Pop Art · stack idealjs
-
05 / 09
-
- - -
-
- Style · Flat -

扁平风 · 纯色块与留白

-
无阴影、无描边、无纹理：层级靠色块对比与留白，状态即色块。工程实现最省、缩放最稳。
-
- -
-
-
- 🌐 -
-
快速开始完成
-
-
-
- ⚛️ -
-
React完成
-
-
-
- 🔗 -
-
全栈基础未开始
-
- - - - - - - -
层级完全靠色相对比：章节色块在上、灰阶状态在下、蓝线管路径。
- -
-
primary
#3b82f6
-
done
#22c55e
-
amber
#f59e0b
-
locked
#94a3b8
-
surface
#eef2f7
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩UI 蓝 / 绿 / 琥珀 + 灰阶
卡片纯白圆角块，无影无边
层级靠底色分区，不靠描边
线条3px 主色实线
站点实心圆，色即状态
状态色块小标签（圆角 5）
-
-
-

适配判断

-
1适合：主风格候选——与 Docusaurus 默认气质最近。
-
2慎用：层级多时区分度下降，需留白纪律。
-
3规则：色块只承载层级，文字永远白底。
-
- -
设计风格探索 · Flat · stack idealjs
-
06 / 09
-
- - -
-
- Style · Pixel -

像素风 · 任务地图与 HP 条

-
8-bit 语汇：阶梯硬边框、等宽字、方块点阵路线与进度条。学习即通关，游戏化拉满。
-
- -
-
-
- 🌐 -
-
- 快速开始 - ★ CLEARED -
-
- -
-
-
-
- ⚛️ -
-
- React - ▶ PLAYING -
-
- -
-
-
-
- 🔗 -
-
- 全栈基础 - 🔒 LOCKED -
-
- -
-
- - - - - - - - -
QUEST MAP · 方块站点=关卡 · 旗=下一目标 · HP条=学习进度
- -
-
navy
#1d2b53
-
red
#ff004d
-
green
#00e436
-
yellow
#ffec27
-
cream
#fff1e8
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩PICO-8 子集（海军蓝底）
卡片2px 框 + 4px 阶梯硬投影
字体等宽，全大写状态词
线条4px 方块点阵（8/8）
站点12px 方块 = 关卡
状态★CLEARED / ▶PLAYING / 🔒
-
-
-

适配判断

-
1适合：成就层与练习系统——关卡、积分、连击。
-
2慎用：长文阅读（等宽字排中文费力）。
-
3规则：像素装饰不缩放抗锯齿；中文正文回到 Noto。
-
- -
设计风格探索 · Pixel · stack idealjs
-
07 / 09
-
- - -
-
- Style · Minimal -

极简风 · 减到只剩信息

-
留白即层级：发丝顶线代替卡片，文字即界面，颜色退到墨阶——只留 sage 一点呼吸。安静到极致。
-
- -
-
-
-
- 🌐 -
-
01快速开始✓
-
-
-
-
- ⚛️ -
-
02React✓
-
-
-
-
- 🔗 -
-
03全栈基础○
-
- - - - - - - -
唯一的颜色留给路径（sage）；完成的章节墨色加重，未到的退为浅灰。
- -
-
ink
#111111
-
ink-500
#6b6b6b
-
hairline
#d5d5d3
-
paper
#ffffff
-
sage（唯一彩）
#a2b49b
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩墨阶 + 唯一 sage 强调
卡片发丝顶线，无底无框
排印序号小字 + 标题，留白分层
线条0.75px 浅灰
站点2px 圆点（sage）
状态墨 ✓ / 浅灰 ○，无底色
-
-
-

适配判断

-
1适合：正文与长阅读——零干扰。
-
2慎用：营销页与激励时刻，太平静。
-
3规则：一屏只允许一个彩色元素（sage）。
-
- -
设计风格探索 · Minimal · stack idealjs
-
08 / 09
-
- - - -
-
- Style · Skeuomorphism -

拟物 · 木桌上的精装书与蜡封

-
材质即隐喻：纸叠卡片、相框凹槽的预期区、缝线与黄铜铆钉、蜡封纪念完成。最重也最贵——用在最有仪式感的地方。
-
- -
-
- -
-
- 🌐 - 16:9 · GIF -
-
- 快速开始 - ✓ -
-
- -
-
- ⚛️ - 16:9 · GIF -
-
- React - ✓ -
-
- -
-
- 🔗 - 🔒 -
-
- 全栈基础 - 黄铜锁扣 -
-
- - - - - - - - - - -
缝线皮面点划 + 黄铜铆钉站点：路线像手工缝在桌面皮革上。
- -
-
wood
#8b5e3c
-
wood-dark
#6b4226
-
paper
#f5efe0
-
wax
#b3402a
-
brass
#c9a86a
-
-
- -
-

风格 token

- - - - - - - - -
维度取值
色彩木色 / 纸白 / 蜡红 / 黄铜
卡片纸叠边缘 + 落影（三层堆叠）
预期区相框凹槽：厚边 + 内阴影
线条皮面缝线（棕 9/6 点划）
站点黄铜铆钉（高光 + 暗边）
状态蜡封 ✓ / 黄铜锁扣 🔒
-
-
-

适配判断

-
1适合：课程卡本体与书架——材质给"拥有感"。
-
2慎用：全站铺满——维护重、渲染贵、易过时。
-
3规则：材质预算同海拔——一屏一个主角物件。
-
- -
设计风格探索 · Skeuomorphism · stack idealjs
-
09 / 09
-
- - - diff --git a/design-refs/mockup/design-styles.pdf b/design-refs/mockup/design-styles.pdf deleted file mode 100644 index 2453859..0000000 Binary files a/design-refs/mockup/design-styles.pdf and /dev/null differ