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:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -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/
|
||||||
|
|||||||
@@ -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:
|
||||||
|
|
||||||
|
|||||||
20
docs/design/vi/mockup/README.md
Normal file
20
docs/design/vi/mockup/README.md
Normal 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
44
docs/design/vi/mockup/build.sh
Executable 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
58
docs/design/vi/mockup/fetch.sh
Executable 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
|
||||||
85
docs/design/vi/mockup/iphone-home.html
Normal file
85
docs/design/vi/mockup/iphone-home.html
Normal 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>
|
||||||
@@ -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>
|
||||||
|
|||||||
Binary file not shown.
Reference in New Issue
Block a user