design: 线条语义体系——实=先后/虚=相关/点=同族/波浪带=代理交接；硬投影下站点改骑黑影外缘
This commit is contained in:
cqh963852 committed
1 parent
0530eeddc3
commit
4ba057c0d2
2 files changed
+47
-20
No files matched your search
@@ -111,7 +111,7 @@
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
|
||||
<div class="pillar-label">支柱一 · 色彩 <i>鲜艳、碰撞——三组撞色对，黑描边统一收束，大底永远是纸色</i></div>
|
||||
<div style="display:flex; gap:18px; margin-bottom:16px; align-items:flex-start;">
|
||||
<div style="display:flex; gap:18px; margin-bottom:10px; align-items:flex-start;">
|
||||
<div>
|
||||
<div class="pair"><div style="background:#ff6b6b;"></div><div style="background:#4ecdc4;"></div></div>
|
||||
<div style="font-size:9.5px; color:#6b6b6b; margin-top:4px;">撞色对 1 · coral × teal</div>
|
||||
@@ -130,7 +130,7 @@
|
||||
</div>
|
||||
|
||||
<div class="pillar-label">支柱二 · 形状即语义 <i>孟菲斯形状对内容下定义，散落于空白——装饰即语义</i></div>
|
||||
<div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:16px;">
|
||||
<div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:10px;">
|
||||
<div class="shapechip"><div class="box"><svg width="26" height="24"><path d="M13 2 L25 22 L1 22 Z" fill="#ff6b6b" stroke="#111" stroke-width="2"/></svg></div><div class="sn">▲ 靶子</div><div class="sm">目标，卡头打头</div></div>
|
||||
<div class="shapechip"><div class="box"><svg width="26" height="24"><circle cx="8" cy="12" r="5" fill="#ffd93d" stroke="#111" stroke-width="2"/><circle cx="19" cy="12" r="5" fill="#fff9f0" stroke="#111" stroke-width="2"/></svg></div><div class="sn">● 积木</div><div class="sm">清单点列，实=已学</div></div>
|
||||
<div class="shapechip"><div class="box"><svg width="26" height="24"><circle cx="13" cy="12" r="8" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="13" cy="12" r="8" fill="none" stroke="#111" stroke-width="1.5"/></svg></div><div class="sn">○ 预期</div><div class="sm">可核对的结果</div></div>
|
||||
@@ -141,7 +141,7 @@
|
||||
</div>
|
||||
|
||||
<div class="pillar-label">支柱三 · 卡片 <i>核心：教程的入口载体——孟菲斯骨架 + 拟物纸感，卡头三件套即靶子</i></div>
|
||||
<div style="display:flex; gap:26px; margin-bottom:14px; align-items:flex-start;">
|
||||
<div style="display:flex; gap:26px; margin-bottom:8px; align-items:flex-start;">
|
||||
<div class="mscard" style="position:static; width:300px;">
|
||||
<div class="mszone" style="background:#ff6b6b;">
|
||||
<span>🌐</span>
|
||||
@@ -161,15 +161,43 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pillar-label">支柱四 · 线条 <i>关系，不可缺——横平竖直 + R8 小圆角 + 站点半嵌卡边 + 并行不合并</i></div>
|
||||
<svg width="700" height="52" viewBox="0 0 700 52">
|
||||
<path class="msline" d="M 10 38 H 120 A 8 8 0 0 0 128 30 V 22 A 8 8 0 0 1 136 14 H 500"/>
|
||||
<path class="msline" d="M 10 38 H 424 A 8 8 0 0 1 432 30 V 26 A 8 8 0 0 0 440 18 H 497"/>
|
||||
<circle class="msstation" cx="10" cy="38" r="6" fill="#ffd93d"/>
|
||||
<circle class="msstation" cx="260" cy="38" r="6" fill="#4ecdc4"/>
|
||||
<rect class="msstation" x="494" y="8" width="7" height="22" rx="3.5" fill="#ff6b6b"/>
|
||||
</svg>
|
||||
<div style="font-size:11px; color:#6b6b6b; margin-top:4px;">黑 2.5px 实线；站点＝描边圆点四色轮换、半嵌卡边；多线入同一卡口 → 胶囊（端头半圆、线止于胶囊边）。</div>
|
||||
<div class="pillar-label">支柱四 · 线条 <i>关系，不可缺——形式即含义：四种形式各答一个问题；拓扑规则全形式通用</i></div>
|
||||
<div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:8px;">
|
||||
<div>
|
||||
<svg width="196" height="44" viewBox="0 0 196 44">
|
||||
<rect x="6" y="8" width="2" height="30" fill="#c9c9c7"/><rect x="188" y="2" width="2" height="18" fill="#c9c9c7"/>
|
||||
<path d="M 7 34 H 46 A 8 8 0 0 0 54 26 V 18 A 8 8 0 0 1 62 10 H 188" fill="none" stroke="#111" stroke-width="2.5"/>
|
||||
<circle cx="7" cy="34" r="5.5" fill="#ffd93d" stroke="#111" stroke-width="2"/>
|
||||
<circle cx="189" cy="10" r="5.5" fill="#4ecdc4" stroke="#111" stroke-width="2"/>
|
||||
</svg>
|
||||
<div style="font-size:11.5px; font-weight:700; margin-top:2px;">实线 ＝ 先后</div>
|
||||
<div style="font-size:9.5px; color:#6b6b6b;">推荐顺序 · 主线，唯一带站点</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="196" height="44" viewBox="0 0 196 44">
|
||||
<rect x="6" y="14" width="2" height="18" fill="#c9c9c7"/><rect x="188" y="14" width="2" height="18" fill="#c9c9c7"/>
|
||||
<path d="M 7 23 H 189" fill="none" stroke="#111" stroke-width="2" stroke-dasharray="4 2"/>
|
||||
</svg>
|
||||
<div style="font-size:11.5px; font-weight:700; margin-top:2px;">虚线 ＝ 相关</div>
|
||||
<div style="font-size:9.5px; color:#6b6b6b;">内容互参 · 无顺序，无站点</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="196" height="44" viewBox="0 0 196 44">
|
||||
<rect x="6" y="14" width="2" height="18" fill="#c9c9c7"/><rect x="188" y="14" width="2" height="18" fill="#c9c9c7"/>
|
||||
<path d="M 7 23 H 189" fill="none" stroke="#111" stroke-width="2.4" stroke-dasharray="0.1 6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="font-size:11.5px; font-weight:700; margin-top:2px;">点线 ＝ 同族</div>
|
||||
<div style="font-size:9.5px; color:#6b6b6b;">同一积木家族（教一块带一族）</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="196" height="44" viewBox="0 0 196 44">
|
||||
<path d="M 12 22 q 8 -18 16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="font-size:11.5px; font-weight:700; margin-top:2px;">波浪带 ＝ 代理交接</div>
|
||||
<div style="font-size:9.5px; color:#6b6b6b;">agent 边界 · 区域标记，不连线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:11px; color:#6b6b6b;">拓扑全形式通用：横平竖直＋R8；站点只上先后线、半嵌卡边；并行不合并（4px）；多线卡口→胶囊（端头半圆、距外侧线 ≥ 2 线宽、线止于胶囊边）。</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
@@ -207,17 +235,16 @@
|
||||
<path d="M 30 300 q 8 -22 16 0 t16 0 t16 0 t16 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M 762 270 l 10 20 22 3 -16 15 4 22 -20 -11 -20 11 4 -22 -16 -15 22 -3 z" fill="#a78bfa" stroke="#111" stroke-width="2"/>
|
||||
<path d="M 60 540 L 68 522 L 76 540 L 84 522 L 92 540" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round"/>
|
||||
<circle cx="480" cy="52" r="10" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="480" cy="52" r="10" fill="none" stroke="#111" stroke-width="1.5"/>
|
||||
<circle cx="852" cy="192" r="10" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="852" cy="192" r="10" fill="none" stroke="#111" stroke-width="1.5"/>
|
||||
<path d="M 624 470 v22 M613 481 h22" stroke="#a78bfa" stroke-width="4" stroke-linecap="round"/><path d="M 624 470 v22 M613 481 h22" stroke="#111" stroke-width="1.2"/>
|
||||
<path d="M 810 250 v20 M800 260 h20" stroke="#5b8def" stroke-width="4" stroke-linecap="round"/><path d="M 810 250 v20 M800 260 h20" stroke="#111" stroke-width="1.2"/>
|
||||
|
||||
<path class="msline" d="M 290 180 H 320 A 8 8 0 0 0 328 172 V 116 A 8 8 0 0 1 336 108 H 380"/>
|
||||
<path class="msline" d="M 290 180 H 380"/>
|
||||
<path class="msline" d="M 630 108 H 648 A 8 8 0 0 1 656 116 V 236 A 8 8 0 0 0 664 244 H 700"/>
|
||||
<circle class="msstation" cx="293" cy="180" r="6" fill="#ffd93d"/>
|
||||
<path class="msline" d="M 299 180 H 302 A 8 8 0 0 0 310 172 V 116 A 8 8 0 0 1 318 108 H 378"/>
|
||||
<path class="msline" d="M 639 108 H 699"/>
|
||||
<circle class="msstation" cx="299" cy="180" r="6" fill="#ffd93d"/>
|
||||
<circle class="msstation" cx="378" cy="108" r="6" fill="#4ecdc4"/>
|
||||
<circle class="msstation" cx="378" cy="180" r="6" fill="#ff8fab"/>
|
||||
<rect class="msstation" x="697" y="233" width="7" height="22" rx="3.5" fill="#ff6b6b"/>
|
||||
<circle class="msstation" cx="639" cy="108" r="6" fill="#ffd93d"/>
|
||||
<circle class="msstation" cx="699" cy="108" r="6" fill="#ff8fab"/>
|
||||
</svg>
|
||||
|
||||
<div class="mscard" style="left:40px; top:110px; width:250px;">
|
||||
@@ -263,7 +290,7 @@
|
||||
<span style="font-size:11px; color:#3d3d3d;"><b>价值区</b>：过程就地写清</span>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; left:40px; top:562px; font-size:10.5px; color:#8a7a5c;">形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派</div>
|
||||
<div style="position:absolute; left:40px; top:562px; font-size:10.5px; color:#8a7a5c;">形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
|
||||
Binary file not shown.
Reference in new issue
Block a user