f4ef7af542
v1 为 Codex 精细化的草稿 1；v2–v4 为 SVG 程序化模拟印泥质感的尝试。 调研结论：印泥质感本质上是位图，改用位图生成后矢量化。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3 lines
9.8 KiB
HTML
3 lines
9.8 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>标博士 · 第二阶段方案对比</title><style>
|
||
*{box-sizing:border-box}body{margin:0;background:#f5f6f3;color:#1d2733;font:15px/1.65 -apple-system,BlinkMacSystemFont,"Noto Sans SC",sans-serif}main{max-width:1660px;margin:auto;padding:52px 28px 90px}h1{font-size:clamp(32px,4vw,56px);line-height:1.15;margin:12px 0 20px}h2{font-size:26px;margin:64px 0 8px}h3{font-size:19px;margin:0 0 8px}.eyebrow{font-size:12px;letter-spacing:.14em;color:#5c6670}.intro{max-width:68ch;color:#5c6670}.recommend{border-left:4px solid #2f5bd3;padding:10px 18px;background:#e7edfb;max-width:900px}.seal-grid{display:grid;grid-template-columns:repeat(3,minmax(320px,1fr));gap:14px}.card{background:white;border:1px solid #d9ddd8;padding:20px;min-width:0}.badge{font-size:12px;padding:3px 8px;color:#2348ac;background:#e7edfb}.copy{min-height:76px;color:#5c6670}.sample{overflow:auto;background:#fafaf8;border:1px solid #e8eae6;padding:12px}.sample img{display:block;max-width:none}.samples{display:flex;gap:18px;align-items:end;flex-wrap:wrap;margin-top:14px}figure{margin:0}figcaption,.caption{font-size:12px;color:#5c6670;margin-top:4px}.divider{border-top:1px solid #d9ddd8;margin:18px 0}.word-grid,.combo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.word{height:125px;display:flex;align-items:center}.word img{width:240px;max-width:100%}.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.plate{height:140px;padding:18px;display:flex;align-items:center;justify-content:center;background:#fafaf8}.plate.dark{background:#1d2733}.plate img{width:100%;max-width:320px}.notice{padding:18px;background:#fff;border:1px solid #d9ddd8}.small{font-size:13px;color:#5c6670}a{color:#2f5bd3}@media(max-width:1050px){.seal-grid{grid-template-columns:1fr}.copy{min-height:0}}@media(max-width:500px){main{padding:32px 16px}.pair{grid-template-columns:1fr}}
|
||
</style></head><body><main><div class="eyebrow">标博士 / 视觉探索 02</div><h1>印章、字形与留白</h1><p class="intro">基于方印与文书校样的方向，用手绘方折笔画重构「标」字；以下均为候选方案。质感由固定路径构成，无滤镜；32px 展示去除碎点的简化版。</p><p class="recommend"><b>推荐 S1 + W1。</b>纯印章最均衡，避免对勾被理解为审核结论；思源宋体与 Cinzel 的组合呼应校样和文书气质，识别稳重。质感版适合展示，干净版适合界面及单色印刷。</p><h2>01 / 印章</h2><p class="intro">每张卡片中的 512、128、64px 为质感版，32px 使用独立简化版；下方并列干净版。各尺寸均按 CSS 像素显示，512px 图可横向滚动。</p><div class="seal-grid"><article class="card"><h3>S1 · 纯印章 <span class="badge">推荐</span></h3><p class="copy">无勾与无内框，方印四边均衡，主体识别清楚。</p><div class="sample"><img src="seal-S1.svg" width="512" height="512" alt="S1 质感版 512 像素"></div><div class="caption">质感版 · 512px</div><div class="samples"><figure><img src="seal-S1.svg" width="128" height="128" alt="S1 128 像素"><figcaption>128px 质感版</figcaption></figure><figure><img src="seal-S1.svg" width="64" height="64" alt="S1 64 像素"><figcaption>64px 质感版</figcaption></figure><figure><img src="seal-S1-32.svg" width="32" height="32" alt="S1 32 像素"><figcaption>32px 简化版</figcaption></figure></div><div class="divider"></div><div class="samples"><figure><img src="seal-S1-clean.svg" width="128" height="128" alt="S1 干净版 128 像素"><figcaption>干净版 128px</figcaption></figure><figure><img src="seal-S1-clean.svg" width="64" height="64" alt="S1 干净版 64 像素"><figcaption>干净版 64px</figcaption></figure><figure><img src="seal-S1-clean.svg" width="32" height="32" alt="S1 干净版 32 像素"><figcaption>干净版 32px</figcaption></figure></div><div class="divider"></div><div class="sample"><img src="seal-S1-clean.svg" width="512" height="512" alt="S1 干净版 512 像素"></div><div class="caption">干净版 · 512px</div></article><article class="card"><h3>S2 · 字内回锋 </h3><p class="copy">右下笔画折回，核对的暗示融入字形；不改变方印轮廓。</p><div class="sample"><img src="seal-S2.svg" width="512" height="512" alt="S2 质感版 512 像素"></div><div class="caption">质感版 · 512px</div><div class="samples"><figure><img src="seal-S2.svg" width="128" height="128" alt="S2 128 像素"><figcaption>128px 质感版</figcaption></figure><figure><img src="seal-S2.svg" width="64" height="64" alt="S2 64 像素"><figcaption>64px 质感版</figcaption></figure><figure><img src="seal-S2-32.svg" width="32" height="32" alt="S2 32 像素"><figcaption>32px 简化版</figcaption></figure></div><div class="divider"></div><div class="samples"><figure><img src="seal-S2-clean.svg" width="128" height="128" alt="S2 干净版 128 像素"><figcaption>干净版 128px</figcaption></figure><figure><img src="seal-S2-clean.svg" width="64" height="64" alt="S2 干净版 64 像素"><figcaption>干净版 64px</figcaption></figure><figure><img src="seal-S2-clean.svg" width="32" height="32" alt="S2 干净版 32 像素"><figcaption>干净版 32px</figcaption></figure></div><div class="divider"></div><div class="sample"><img src="seal-S2-clean.svg" width="512" height="512" alt="S2 干净版 512 像素"></div><div class="caption">干净版 · 512px</div></article><article class="card"><h3>S3 · 印框缺口 </h3><p class="copy">右下红边留出细小的勾形缺口，保留含蓄的核对线索。小尺寸下这一细节会弱化。</p><div class="sample"><img src="seal-S3.svg" width="512" height="512" alt="S3 质感版 512 像素"></div><div class="caption">质感版 · 512px</div><div class="samples"><figure><img src="seal-S3.svg" width="128" height="128" alt="S3 128 像素"><figcaption>128px 质感版</figcaption></figure><figure><img src="seal-S3.svg" width="64" height="64" alt="S3 64 像素"><figcaption>64px 质感版</figcaption></figure><figure><img src="seal-S3-32.svg" width="32" height="32" alt="S3 32 像素"><figcaption>32px 简化版</figcaption></figure></div><div class="divider"></div><div class="samples"><figure><img src="seal-S3-clean.svg" width="128" height="128" alt="S3 干净版 128 像素"><figcaption>干净版 128px</figcaption></figure><figure><img src="seal-S3-clean.svg" width="64" height="64" alt="S3 干净版 64 像素"><figcaption>干净版 64px</figcaption></figure><figure><img src="seal-S3-clean.svg" width="32" height="32" alt="S3 干净版 32 像素"><figcaption>干净版 32px</figcaption></figure></div><div class="divider"></div><div class="sample"><img src="seal-S3-clean.svg" width="512" height="512" alt="S3 干净版 512 像素"></div><div class="caption">干净版 · 512px</div></article></div><h2>02 / 字标</h2><p class="intro">拼音统一为 BIAOBOSHI；下列字标均已转为矢量轮廓。</p><div class="word-grid"><article class="card"><h3>W1 <span class="badge">推荐</span></h3><div class="word"><img src="wordmark-W1.svg" alt="W1 标博士 BIAOBOSHI"></div><b>思源宋体 Black + Cinzel SemiBold</b><p class="small">笔画对比鲜明，带有文书、出版和碑刻的庄重感。</p></article><article class="card"><h3>W2 </h3><div class="word"><img src="wordmark-W2.svg" alt="W2 标博士 BIAOBOSHI"></div><b>站酷小薇 + Marcellus</b><p class="small">中文笔画更具装饰性，气质鲜明；拼音略显典雅。</p></article><article class="card"><h3>W3 </h3><div class="word"><img src="wordmark-W3.svg" alt="W3 标博士 BIAOBOSHI"></div><b>霞鹜文楷 Medium + Cormorant SC SemiBold</b><p class="small">楷书更有手写温度与书卷气，整体更柔和。</p></article></div><h2>03 / 横版组合</h2><p class="intro">同一组合在浅底与深底的效果，深底字标反白。</p><div class="combo-grid"><article class="card"><h3>S1 + W1</h3><div class="pair"><div><div class="plate"><img src="combo-S1-W1.svg" alt="S1 W1 白底组合"></div><div class="caption">白底 · 藏青字标</div></div><div><div class="plate dark"><img src="combo-S1-W1-reverse.svg" alt="S1 W1 深底组合"></div><div class="caption">深底 · 白色字标</div></div></div></article><article class="card"><h3>S2 + W1</h3><div class="pair"><div><div class="plate"><img src="combo-S2-W1.svg" alt="S2 W1 白底组合"></div><div class="caption">白底 · 藏青字标</div></div><div><div class="plate dark"><img src="combo-S2-W1-reverse.svg" alt="S2 W1 深底组合"></div><div class="caption">深底 · 白色字标</div></div></div></article><article class="card"><h3>S1 + W2</h3><div class="pair"><div><div class="plate"><img src="combo-S1-W2.svg" alt="S1 W2 白底组合"></div><div class="caption">白底 · 藏青字标</div></div><div><div class="plate dark"><img src="combo-S1-W2-reverse.svg" alt="S1 W2 深底组合"></div><div class="caption">深底 · 白色字标</div></div></div></article><article class="card"><h3>S2 + W3</h3><div class="pair"><div><div class="plate"><img src="combo-S2-W3.svg" alt="S2 W3 白底组合"></div><div class="caption">白底 · 藏青字标</div></div><div><div class="plate dark"><img src="combo-S2-W3-reverse.svg" alt="S2 W3 深底组合"></div><div class="caption">深底 · 白色字标</div></div></div></article></div><h2>04 / 使用边界与选择</h2><div class="notice">印章图形只代表逐项核对，不能作为「通过 / 合格 / 已审核」章盖在检查报告、投标文件或任何结论上，也不能与「通过」「合格」字样组合。请分别选择印章方案、字标组合，以及是否采用印泥质感。</div><p class="small">字标均由对应开源字体轮廓转曲，未改变字形结构。候选字体许可副本位于 <a href="licenses/">v2/licenses/</a>；最终选定后再整理正式许可证与标志资产。16px 已确定采用简化「标」字，不使用本页印章缩小版。</p></main></body></html> |