diff --git a/.gitignore b/.gitignore index fa0484a..25534b0 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,6 @@ docs/design/logo/compare/ # Python 缓存 __pycache__/ *.pyc + +# VI 手册 iPhone 桌面模拟用的 Apple 素材（版权归 Apple，用 docs/design/vi/mockup/fetch.sh 获取） +docs/design/vi/mockup/apple/ diff --git a/docs/design/vi/README.md b/docs/design/vi/README.md index 1738031..8779c85 100644 --- a/docs/design/vi/README.md +++ b/docs/design/vi/README.md @@ -9,6 +9,7 @@ 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` + 第 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:// 地址时，字体可能因浏览器安全限制加载失败） 4. 导出 PDF： diff --git a/docs/design/vi/mockup/README.md b/docs/design/vi/mockup/README.md new file mode 100644 index 0000000..5c37813 --- /dev/null +++ b/docs/design/vi/mockup/README.md @@ -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 只提供这一版，真机在中文系统上会显示「星期二」。 diff --git a/docs/design/vi/mockup/build.sh b/docs/design/vi/mockup/build.sh new file mode 100755 index 0000000..2507406 --- /dev/null +++ b/docs/design/vi/mockup/build.sh @@ -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 diff --git a/docs/design/vi/mockup/fetch.sh b/docs/design/vi/mockup/fetch.sh new file mode 100755 index 0000000..355ccfc --- /dev/null +++ b/docs/design/vi/mockup/fetch.sh @@ -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 diff --git a/docs/design/vi/mockup/iphone-home.html b/docs/design/vi/mockup/iphone-home.html new file mode 100644 index 0000000..08dbc4c --- /dev/null +++ b/docs/design/vi/mockup/iphone-home.html @@ -0,0 +1,85 @@ + + + + +iPhone 桌面模拟 + + + + + +
+
+
+ 9:41 + + + + + +
+ +
+
FaceTime通话
+
日历
+
天气
+
时钟
+ +
地图
+
备忘录
+
提醒事项
+
文件
+ +
图书
+
播客
+
健康
+
钱包
+ +
股市
+
标博士
+
+ +
搜索
+
+ +
+
+
+ +
+ + diff --git a/docs/design/vi/vi-manual.html b/docs/design/vi/vi-manual.html index 55ae465..7f070fa 100644 --- a/docs/design/vi/vi-manual.html +++ b/docs/design/vi/vi-manual.html @@ -610,6 +610,8 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
+ +
标博士 视觉识别规范06 应用示例
@@ -622,7 +624,7 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var
产品价格帮助登录
-
+
标博士，你的AI投标专家
上传招标文件，得到一份能逐条回到原文的检查清单；递交前核对投标文件，逐项确认后导出报告。
免费检查一个项目 @@ -630,21 +632,26 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var

页头左侧放横版干净版，高度约 32–40 像素。浏览器标签使用 16 像素专用图标。

+

邮件签名

+
+
+
黄晓沁　销售专家
+
138 1452 1983
romy@biaoboshi.cn
www.biaoboshi.cn
+ +
+

签名中的标志用 PNG（logo-horizontal-1200.png 缩放显示），宽 120–160 像素。

+

应用图标

-
-
应用图标
-
小图标
+
+ iPhone 桌面 +
+
1024 / 512 px
+
180 / 192 px
+
-

白底，印章占图标边长的 80%。系统会自动加圆角，图标文件本身保持方形。

-

邮件签名

-
-
黄晓沁　销售专家
-
138 1452 1983
romy@biaoboshi.cn
www.biaoboshi.cn
- -
-

签名中的标志用 PNG（logo-horizontal-1200.png 缩放显示），宽 120–160 像素。

+

印泥铺满整个图标，不留白边。图标文件保持方形、不带透明，圆角由系统按 Apple 的连续曲率圆角裁出。左图为 iPhone 18 Pro 主屏幕上的实际比例（机身、壁纸、系统图标为 Apple 素材，仅作示意）。

22
@@ -665,7 +672,8 @@ th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var svg/seal(-textured)(-small).svg印章 svg/wordmark(-reverse).svg字标 svg/favicon-16.svg、favicon.svg网页图标 - png/横版 1200 / 2400 px、竖版 600 px、印章 1024 px，图标 16 / 32 / 180 / 192 / 512 px + svg/app-icon.svg应用图标（印泥铺满） + png/横版 1200 / 2400 px、竖版 600 px、印章 1024 px，图标 16 / 32 px，应用图标 180 / 192 / 512 / 1024 px

所有文件由 scripts/build_assets.sh 生成，修改请改 scripts/logo_lib.py 的参数后重新生成，不要手改 SVG。

diff --git a/docs/design/vi/标博士-VI视觉识别规范-v1.1.pdf b/docs/design/vi/标博士-VI视觉识别规范-v1.1.pdf index a6f9b1e..ce6119d 100644 Binary files a/docs/design/vi/标博士-VI视觉识别规范-v1.1.pdf and b/docs/design/vi/标博士-VI视觉识别规范-v1.1.pdf differ