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

- 第 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

3
.gitignore vendored
View File

@@ -25,3 +25,6 @@ docs/design/logo/compare/
# Python 缓存 # Python 缓存
__pycache__/ __pycache__/
*.pyc *.pyc
# VI 手册 iPhone 桌面模拟用的 Apple 素材(版权归 Apple,用 docs/design/vi/mockup/fetch.sh 获取)
docs/design/vi/mockup/apple/

View File

@@ -9,6 +9,7 @@
1. 准备 logo 的工具环境(见 `../logo/logo-spec.md` 第 6 节):`../logo/.work/venv` 和 `../logo/.work/fonts`。手册引用的字体(思源宋体、思源黑体、Libre Caslon、Barlow Semi Condensed)也从 `.work/fonts` 加载。 1. 准备 logo 的工具环境(见 `../logo/logo-spec.md` 第 6 节):`../logo/.work/venv` 和 `../logo/.work/fonts`。手册引用的字体(思源宋体、思源黑体、Libre Caslon、Barlow Semi Condensed)也从 `.work/fonts` 加载。
2. 重新生成标注图:在 `docs/design/logo/` 下运行 `.work/venv/bin/python scripts/vi_diagrams.py` 2. 重新生成标注图:在 `docs/design/logo/` 下运行 `.work/venv/bin/python scripts/vi_diagrams.py`
第 22 页的 iPhone 桌面模拟图(`mockup/apple/iphone-home.png`)用到 Apple 的素材,不进 git,生成方法见 `mockup/README.md`。
3. 在 `docs/design/` 下启动本地服务:`python3 -m http.server 8765 --bind 127.0.0.1`(直接打开 file:// 地址时,字体可能因浏览器安全限制加载失败) 3. 在 `docs/design/` 下启动本地服务:`python3 -m http.server 8765 --bind 127.0.0.1`(直接打开 file:// 地址时,字体可能因浏览器安全限制加载失败)
4. 导出 PDF: 4. 导出 PDF:

View File

@@ -0,0 +1,20 @@
# iPhone 桌面模拟
VI 手册第 22 页「应用图标」用的 iPhone 主屏幕效果图:iPhone 18 Pro 黑色机身、iPhone 18 Pro 官方壁纸 Black(深色、干净,不和印章红冲突)、iOS 系统应用图标。只放 4 行图标,第四行只有股市和「标博士」两个,下半屏留空。
- `iphone-home.html`:主屏幕排版(按 iPhone 18 Pro 屏幕 402×874pt,1 CSS px = 1pt)
- `fetch.sh`:下载系统图标和壁纸到 `apple/`
- `build.sh`:从机身 PNG 量出屏幕位置,生成屏幕遮罩和 `apple/geometry.css`,再用 Chrome 无头模式按 3 倍截图成 `apple/iphone-home.png`(透明背景),手册引用这张图
- `apple/`:Apple 的素材和生成结果,**版权归 Apple,不进 git**
## 重新生成
1. 运行 `./fetch.sh`。系统图标来自 App Store 公开查询接口(中国区),壁纸来自 iClarified 转载的官方壁纸。
2. 放入机身。机身来自 [Apple Design Resources](https://developer.apple.com/design/resources/) 的 iPhone 18 Product Bezels(`Bezel-iPhone-18.dmg`)。打开 DMG 前要**由本人阅读并同意** Apple Design Resources 许可协议,不要用脚本自动同意。打开后把 `PNG/iPhone 18 Pro/iPhone 18 Pro - Black - Portrait.png` 复制为 `apple/bezel.png`,许可文件 `Apple Design Resources License.rtf` 也一起放进 `apple/`。
3. 运行 `./build.sh`。换机型时只要替换 `apple/bezel.png`,屏幕位置会重新量;但图标排版是按 402pt 屏宽调的,换成屏宽差别大的机型要检查一下。
## 使用限制
- Apple Design Resources 许可只允许把机身用于**只运行在 Apple 系统上的软件**的界面效果图;把效果图交给别人时,要让对方知道这些限制,也不能把素材抠出来单独使用。标博士目前是桌面 Web 产品,这张图只作为应用图标的示意。手册如果要对外发布,先确认这一点,或者把手机换回自绘的示意机身。
- 系统图标和壁纸的版权归 Apple,只作为示意,不用于宣传物料。
- 日历图标上的星期是英文「Tue」:App Store 只提供这一版,真机在中文系统上会显示「星期二」。

44
docs/design/vi/mockup/build.sh Executable file
View File

@@ -0,0 +1,44 @@
#!/usr/bin/env bash
# 生成 VI 手册用的 iPhone 桌面模拟图 apple/iphone-home.png(透明背景,3 倍分辨率)。
# 前置:fetch.sh 已下载图标和壁纸;机身 PNG 已按 README.md 放到 apple/bezel.png;logo/.work/venv 可用。
# 用法:docs/design/vi/mockup/build.sh
set -euo pipefail
cd "$(dirname "$0")"
PORT=8799
PY=../../logo/.work/venv/bin/python
# 1. 量机身:与中心连通的透明区就是屏幕(圆角形状和机身完全一致)。
# 输出屏幕遮罩 screen-mask.png,以及页面用的尺寸 geometry.css(机身 PNG 是 3 倍图,1pt = 3px)
SIZE=$("$PY" -I - <<'EOF'
import numpy as np
from PIL import Image
from scipy import ndimage
a = np.asarray(Image.open("apple/bezel.png"))[..., 3]
lab, _ = ndimage.label(a < 10)
screen = lab == lab[a.shape[0] // 2, a.shape[1] // 2]
ys, xs = np.where(screen)
x, y, w, h = xs.min(), ys.min(), xs.max() + 1 - xs.min(), ys.max() + 1 - ys.min()
# 向外扩 2px 压到机身黑边下面,避免抗锯齿露出白缝;CSS 遮罩读透明通道,所以存成 RGBA
m = ndimage.binary_dilation(screen, iterations=2)[y:y + h, x:x + w]
rgba = np.zeros(m.shape + (4,), np.uint8)
rgba[..., 3] = m * 255
Image.fromarray(rgba, "RGBA").save("apple/screen-mask.png")
H, W = a.shape
pt = lambda v: f"{v / 3:g}px"
open("apple/geometry.css", "w").write(
f":root{{--dev-w:{pt(W)};--dev-h:{pt(H)};--scr-x:{pt(x)};--scr-y:{pt(y)};--scr-w:{pt(w)};--scr-h:{pt(h)}}}\n")
print(f"{W // 3},{H // 3}")
EOF
)
cat apple/geometry.css
# 2. 临时起本地服务(file:// 下遮罩图片会被浏览器安全策略拦掉;根目录是 docs/design,页面要引用 logo/),按 3 倍截图
python3 -m http.server $PORT --bind 127.0.0.1 --directory ../.. >/dev/null 2>&1 &
SERVER=$!
trap 'kill $SERVER' EXIT
sleep 1
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --hide-scrollbars \
--default-background-color=00000000 --force-device-scale-factor=3 --window-size="$SIZE" \
--virtual-time-budget=5000 --screenshot="$PWD/apple/iphone-home.png" \
"http://127.0.0.1:$PORT/vi/mockup/iphone-home.html" 2>/dev/null
magick identify apple/iphone-home.png

58
docs/design/vi/mockup/fetch.sh Executable file
View File

@@ -0,0 +1,58 @@
#!/usr/bin/env bash
# 下载 VI 手册里 iPhone 桌面模拟用到的 Apple 素材到 apple/(版权归 Apple,不进 git)。
# - 系统应用图标:App Store 公开查询接口(中国区)里 Apple 自家应用的 1024px 图标
# - 壁纸:iPhone 18 Pro 官方壁纸 Black(主屏幕版,1320×2868),iClarified 转载
# - 机身:Apple Design Resources 的 iPhone 18 Product Bezels,DMG 要先由本人同意许可协议才能打开,
# 所以不自动下载,步骤见 README.md
# 用法:docs/design/vi/mockup/fetch.sh
set -euo pipefail
cd "$(dirname "$0")"
mkdir -p apple/icons
# App Store ID 文件名
APPS="
1108185179 calendar
1108187098 mail
1069513131 weather
915056765 maps
1110145109 notes
1584215688 clock
1232058109 files
364709193 books
1108187390 music
525463029 podcasts
1108187841 reminders
1069512882 stocks
1110145091 facetime
1242545199 health
1160481993 wallet
1146562112 safari
1514844618 translate
1069512134 voicememos
1110145103 home
1069509450 tips
915249334 shortcuts
6443742539 freeform
6447391597 journal
1383426740 measure
1146560473 messages
1514844621 findmy
1069511488 calculator
"
ids=$(echo "$APPS" | awk 'NF{print $1}' | paste -sd, -)
curl -sSf -m 60 "https://itunes.apple.com/lookup?country=cn&id=$ids" -o apple/lookup.json
echo "$APPS" | while read -r id name; do
[ -z "$id" ] && continue
out="apple/icons/$name.png"
[ -f "$out" ] && continue
# artworkUrl512 换成 1024px PNG
url=$(python3 -I -c "import json,sys; r=[a for a in json.load(open('apple/lookup.json'))['results'] if a['trackId']==$id]; print(r[0]['artworkUrl512'].rsplit('/',1)[0]+'/1024x1024bb.png')")
curl -sSf -m 60 -o "$out" "$url"
done
WALL=apple/wallpaper-black.jpg
[ -f "$WALL" ] || curl -sSf -m 600 -o "$WALL" \
"https://www.iclarified.com/files/ios/iClarified-iPhone-18-Pro-Wallpaper/iClarified-iPhone-18-Pro-Wallpaper-Black-Home-Screen.jpg"
ls apple apple/icons

View File

@@ -0,0 +1,85 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>iPhone 桌面模拟</title>
<!--
VI 手册「应用图标」一页用的 iPhone 桌面模拟。按 iPhone 18 Pro 屏幕 402×874pt 排版(1 CSS px = 1pt),
用 Apple 的 Product Bezels 机身、iPhone 18 Pro 官方壁纸、iOS 系统应用图标(都在 apple/,由 fetch.sh 获取,不进 git)。
机身和屏幕的位置尺寸由 build.sh 从机身 PNG 量出,写在 apple/geometry.css。
导出:运行 build.sh,按 3 倍截图成 apple/iphone-home.png,手册引用这张图。
-->
<link rel="stylesheet" href="apple/geometry.css">
<style>
:root{
/* Apple 风格连续曲率圆角(squircle):iOS 图标遮罩的贝塞尔近似,r = 边长 × 22.37% */
--squircle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath 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'/%3E%3C/svg%3E");
--icon:62px;
}
html,body{margin:0;background:transparent}
body{font-family:-apple-system,"SF Pro Text","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
.device{position:relative;width:var(--dev-w);height:var(--dev-h)}
.screen{position:absolute;left:var(--scr-x);top:var(--scr-y);width:var(--scr-w);height:var(--scr-h);overflow:hidden;color:#fff;
background:url(apple/wallpaper-black.jpg) center/cover;
-webkit-mask:url(apple/screen-mask.png) 0 0/100% 100% no-repeat;mask:url(apple/screen-mask.png) 0 0/100% 100% no-repeat}
.bezel{position:absolute;left:0;top:0;width:var(--dev-w);height:var(--dev-h);pointer-events:none}
.status{position:absolute;left:0;right:0;top:0;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 32px 0 48px}
.status .time{font:600 17px/1 -apple-system,"SF Pro Text",sans-serif;letter-spacing:-.2px}
.status .right{display:flex;align-items:center;gap:6px}
/* 只放 4 行:前三行系统应用,第四行只有股市和标博士,下半屏留空 */
.grid{position:absolute;left:26px;right:26px;top:72px;display:grid;grid-template-columns:repeat(4,var(--icon));justify-content:space-between;row-gap:28px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--icon)}
.app img,.dock img{width:var(--icon);height:var(--icon);display:block;-webkit-mask:var(--squircle) center/100% 100% no-repeat;mask:var(--squircle) center/100% 100% no-repeat}
.app span{font:500 12px/1.1 -apple-system,"PingFang SC",sans-serif;white-space:nowrap}
.search{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:7px 13px;border-radius:16px;
background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 13px/1 -apple-system,"PingFang SC",sans-serif}
.dock{position:absolute;left:12px;right:12px;bottom:12px;height:92px;border-radius:36px;display:grid;grid-template-columns:repeat(4,var(--icon));justify-content:space-between;align-items:center;padding:0 17px;
background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.homebar{position:absolute;left:50%;bottom:8px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:rgba(255,255,255,.85)}
</style>
</head>
<body>
<div class="device">
<div class="screen">
<div class="status">
<span class="time">9:41</span>
<span class="right">
<svg width="19" height="12" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx="1" fill="#fff"/><rect x="5.1" y="5" width="3.2" height="7" rx="1" fill="#fff"/><rect x="10.2" y="2.5" width="3.2" height="9.5" rx="1" fill="#fff"/><rect x="15.3" y="0" width="3.2" height="12" rx="1" fill="#fff"/></svg>
<svg width="17" height="12" viewBox="0 0 17 12"><path d="M8.5 2.4c2.5 0 4.8 1 6.5 2.6l1.3-1.3A11 11 0 0 0 .7 3.7L2 5a9.3 9.3 0 0 1 6.5-2.6Zm0 3.7c1.5 0 2.9.6 4 1.6l1.3-1.3a7.5 7.5 0 0 0-10.6 0l1.3 1.3a5.6 5.6 0 0 1 4-1.6Zm0 3.6c.6 0 1.1.2 1.5.5L8.5 11.7 7 10.2c.4-.3.9-.5 1.5-.5Z" fill="#fff"/></svg>
<svg width="28" height="13" viewBox="0 0 28 13"><rect x=".5" y=".5" width="24" height="12" rx="3.8" fill="none" stroke="#fff" stroke-opacity=".4"/><rect x="2" y="2" width="21" height="9" rx="2.5" fill="#fff"/><path d="M26 4.5v4a2.2 2.2 0 0 0 0-4Z" fill="#fff" fill-opacity=".4"/></svg>
</span>
</div>
<div class="grid">
<div class="app"><img src="apple/icons/facetime.png"><span>FaceTime通话</span></div>
<div class="app"><img src="apple/icons/calendar.png"><span>日历</span></div>
<div class="app"><img src="apple/icons/weather.png"><span>天气</span></div>
<div class="app"><img src="apple/icons/clock.png"><span>时钟</span></div>
<div class="app"><img src="apple/icons/maps.png"><span>地图</span></div>
<div class="app"><img src="apple/icons/notes.png"><span>备忘录</span></div>
<div class="app"><img src="apple/icons/reminders.png"><span>提醒事项</span></div>
<div class="app"><img src="apple/icons/files.png"><span>文件</span></div>
<div class="app"><img src="apple/icons/books.png"><span>图书</span></div>
<div class="app"><img src="apple/icons/podcasts.png"><span>播客</span></div>
<div class="app"><img src="apple/icons/health.png"><span>健康</span></div>
<div class="app"><img src="apple/icons/wallet.png"><span>钱包</span></div>
<div class="app"><img src="apple/icons/stocks.png"><span>股市</span></div>
<div class="app"><img src="../../logo/png/icon-512.png"><span>标博士</span></div>
</div>
<div class="search"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="7"/><path d="m21 21-5.5-5.5"/></svg>搜索</div>
<div class="dock">
<img src="apple/icons/messages.png"><img src="apple/icons/safari.png"><img src="apple/icons/mail.png"><img src="apple/icons/music.png">
</div>
<div class="homebar"></div>
</div>
<img class="bezel" src="apple/bezel.png" alt="">
</div>
</body>
</html>

View File

@@ -610,6 +610,8 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
<!-- ============ 21 网站与图标 ============ --> <!-- ============ 21 网站与图标 ============ -->
<section class="page"> <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="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<div class="cols c21" style="gap:10mm"> <div class="cols c21" style="gap:10mm">
<div> <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"> <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 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>
<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: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> <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> <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>
</div> </div>
<p class="cap">页头左侧放横版干净版,高度约 32–40 像素。浏览器标签使用 16 像素专用图标。</p> <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>
<div> <div>
<h2>应用图标</h2> <h2>应用图标</h2>
<div style="display:flex;gap:6mm;align-items:flex-end;margin-top:3mm"> <div style="display:flex;gap:5mm;align-items:flex-start;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> <img src="mockup/apple/iphone-home.png" alt="iPhone 桌面" style="width:56mm;display:block;flex:none">
<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;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> </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> </div>
<div class="folio">22</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/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/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">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> </tbody>
</table> </table>
<p class="note" style="margin-top:3mm">所有文件由 scripts/build_assets.sh 生成,修改请改 scripts/logo_lib.py 的参数后重新生成,不要手改 SVG。</p> <p class="note" style="margin-top:3mm">所有文件由 scripts/build_assets.sh 生成,修改请改 scripts/logo_lib.py 的参数后重新生成,不要手改 SVG。</p>