eric/bid-doctor
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(vi): 应用图标页改为 iPhone 18 Pro 主屏幕模拟

Browse Source 
- 第 22 页右栏换成 iPhone 18 Pro 主屏幕效果图（黑色机身、Black 壁纸、4 行图标，第四行为股市和标博士），旁边是 Apple 连续曲率圆角裁切的两个尺寸图标；邮件签名移到左栏
- 新增 vi/mockup/：iphone-home.html 排版，fetch.sh 获取系统图标和壁纸，build.sh 量机身、生成遮罩并按 3 倍截图
- Apple 素材（机身、壁纸、系统图标）版权归 Apple，放在 mockup/apple/ 不进 git；机身需本人同意 Apple Design Resources 许可后手动放入，使用限制见 mockup/README.md
- 重新导出 VI 手册 PDF

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
2026-11-03 10:10:59 +08:00
parent 05839dfe01
commit 9aff7c499c
8 changed files with 232 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/design/vi/vi-manual.html
View File

@@ -610,6 +610,8 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
<!-- ============ 21 网站与图标 ============ -->
<section class="page">
<!-- Apple 风格连续曲率圆角（squircle）：iOS 图标遮罩的贝塞尔近似，r = 边长 × 22.37%。用 SVG 裁切而不是 CSS 遮罩，导出 PDF 时边缘干净 -->
<svg width="0" height="0" style="position:absolute"><clipPath id="squircle"><path d="M34.20 0.00L65.80 0.00C75.65 0.00 80.57 0.00 85.87 1.68C91.66 3.78 96.22 8.34 98.32 14.13C100.00 19.43 100.00 24.35 100.00 34.20L100.00 65.80C100.00 75.65 100.00 80.57 98.32 85.87C96.22 91.66 91.66 96.22 85.87 98.32C80.57 100.00 75.65 100.00 65.80 100.00L34.20 100.00C24.35 100.00 19.43 100.00 14.13 98.32C8.34 96.22 3.78 91.66 1.68 85.87C0.00 80.57 0.00 75.65 0.00 65.80L0.00 34.20C0.00 24.35 0.00 19.43 1.68 14.13C3.78 8.34 8.34 3.78 14.13 1.68C19.43 0.00 24.35 0.00 34.20 0.00Z"/></clipPath></svg>
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<div class="cols c21" style="gap:10mm">
<div>
@@ -622,7 +624,7 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
<img src="../logo/svg/logo-horizontal.svg" style="width:34mm">
<div style="display:flex;gap:6mm;font-size:7.5pt;color:var(--sub)"><span>产品</span><span>价格</span><span>帮助</span><span style="color:var(--ink);font-weight:500">登录</span></div>
</div>
<div style="padding:30mm 8mm 34mm">
<div style="padding:15mm 8mm 17mm">
<div style="font:700 26pt/1.25 var(--serif)">标博士，你的AI投标专家</div>
<div style="font-size:8.5pt;color:var(--sub);margin:3mm 0 5mm;max-width:110mm">上传招标文件，得到一份能逐条回到原文的检查清单；递交前核对投标文件，逐项确认后导出报告。</div>
<span style="display:inline-block;background:var(--ink);color:#fff;font-size:8pt;padding:2mm 5mm">免费检查一个项目</span>
@@ -630,21 +632,26 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
</div>
</div>
<p class="cap">页头左侧放横版干净版，高度约 32–40 像素。浏览器标签使用 16 像素专用图标。</p>
<h3 style="margin-top:5mm">邮件签名</h3>
<div style="display:flex;gap:8mm;align-items:center;margin-top:2mm">
<div style="background:#fff;border:.25mm solid var(--rule);padding:3.5mm 5mm;width:96mm;flex:none;display:flex;justify-content:space-between;align-items:flex-end">
<div><div style="font:700 9pt var(--serif)">黄晓沁　销售专家</div>
<div style="font:500 7pt/1.6 var(--fig);color:var(--sub);margin-top:1mm">138 1452 1983<br>romy@biaoboshi.cn<br>www.biaoboshi.cn</div></div>
<img src="../logo/svg/logo-horizontal.svg" style="width:30mm">
</div>
<p class="cap" style="margin:0">签名中的标志用 PNG（logo-horizontal-1200.png 缩放显示），宽 120–160 像素。</p>
</div>
</div>
<div>
<h2>应用图标</h2>
<div style="display:flex;gap:6mm;align-items:flex-end;margin-top:3mm">
<div style="text-align:center"><img src="../logo/png/icon-512.png" style="width:38mm;border-radius:8.4mm;box-shadow:0 .5mm 1.5mm rgba(0,0,0,.15);display:block"><span class="cap">应用图标</span></div>
<div style="text-align:center"><img src="../logo/png/icon-192.png" style="width:19mm;border-radius:4.2mm;box-shadow:0 .5mm 1.5mm rgba(0,0,0,.15);display:block"><span class="cap">小图标</span></div>
<div style="display:flex;gap:5mm;align-items:flex-start;margin-top:3mm">
<img src="mockup/apple/iphone-home.png" alt="iPhone 桌面" style="width:56mm;display:block;flex:none">
<div style="display:flex;flex-direction:column;gap:5mm;padding-top:2mm">
<div><svg viewBox="0 0 100 100" style="width:20mm;display:block"><image href="../logo/png/icon-512.png" width="100" height="100" clip-path="url(#squircle)"/></svg><span class="cap">1024 / 512 px</span></div>
<div><svg viewBox="0 0 100 100" style="width:10mm;display:block"><image href="../logo/png/icon-192.png" width="100" height="100" clip-path="url(#squircle)"/></svg><span class="cap">180 / 192 px</span></div>
</div>
</div>
<p class="small sub" style="margin-top:4mm">白底，印章占图标边长的 80%。系统会自动加圆角，图标文件本身保持方形。</p>
<h3 style="margin-top:8mm">邮件签名</h3>
<div style="background:#fff;border:.25mm solid var(--rule);padding:4mm;margin-top:2mm">
<div style="font:700 9pt var(--serif)">黄晓沁　销售专家</div>
<div style="font:500 7pt/1.6 var(--fig);color:var(--sub);margin:1mm 0 3mm">138 1452 1983<br>romy@biaoboshi.cn<br>www.biaoboshi.cn</div>
<img src="../logo/svg/logo-horizontal.svg" style="width:30mm">
</div>
<p class="cap">签名中的标志用 PNG（logo-horizontal-1200.png 缩放显示），宽 120–160 像素。</p>
<p class="small sub" style="margin-top:3mm">印泥铺满整个图标，不留白边。图标文件保持方形、不带透明，圆角由系统按 Apple 的连续曲率圆角裁出。左图为 iPhone 18 Pro 主屏幕上的实际比例（机身、壁纸、系统图标为 Apple 素材，仅作示意）。</p>
</div>
</div>
<div class="folio">22</div>
@@ -665,7 +672,8 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
<tr><td class="mono">svg/seal(-textured)(-small).svg</td><td class="small">印章</td></tr>
<tr><td class="mono">svg/wordmark(-reverse).svg</td><td class="small">字标</td></tr>
<tr><td class="mono">svg/favicon-16.svg、favicon.svg</td><td class="small">网页图标</td></tr>
<tr><td class="mono">png/</td><td class="small">横版 1200 / 2400 px、竖版 600 px、印章 1024 px，图标 16 / 32 / 180 / 192 / 512 px</td></tr>
<tr><td class="mono">svg/app-icon.svg</td><td class="small">应用图标（印泥铺满）</td></tr>
<tr><td class="mono">png/</td><td class="small">横版 1200 / 2400 px、竖版 600 px、印章 1024 px，图标 16 / 32 px，应用图标 180 / 192 / 512 / 1024 px</td></tr>
</tbody>
</table>
<p class="note" style="margin-top:3mm">所有文件由 scripts/build_assets.sh 生成，修改请改 scripts/logo_lib.py 的参数后重新生成，不要手改 SVG。</p>