/ Brand · Tone Guideline

视觉与语调规范

一页讲清 XAISites 的视觉气质:影像、动效、图标、语调四个维度,确保数百品牌、数百万店铺、所有官网页面始终是同一个 XAISites。

01

克制 Restraint

技术感来自留白与精度,不是堆砌效果。能少一层就少一层。

02

证据 Evidence

用数据、状态、实时指标说话,而不是营销形容词。

03

尺度 Scale

一切设计都要经得起「数百品牌、数百万店铺」的尺度检验。

04

全球 Global

中英双语等权,符号系统跨文化通用,避免地域专属符号。

/ 01 — Imagery

影像风格

深色底 + 微弱青蓝/紫色辉光 + 等距网格。影像服务于「全球数据网络」的隐喻,避免人物特写与生活场景。

Do
  • 首选抽象渲染:数据网格、地球网络、节点拓扑、半透明几何体
  • 色温偏冷,主光为青蓝 (oklch 0.78 0.16 230),补光为紫罗兰
  • 纯实拍仅用于品牌方/履约伙伴的局部细节,统一冷调降饱和处理
  • 所有图像保留 1px 内描边或弱噪点,营造屏幕质感
Avoid
  • 笑脸特写、库存图风格的握手商务图、生活方式照片
  • 暖色橙黄主导、过饱和、强光斑、模糊的镜头眩光
  • 3D 卡通吉祥物、拟物化金属质感、玻璃折射
/ 02 — Motion

动效与交互气质

「精密仪器」级别的动效:短、可预测、有目的。每一次动效都要像后台中真实状态变化的回响。

Do
  • 默认时长 200ms,最长 400ms,曲线 cubic-bezier(0.4, 0, 0.2, 1)
  • 悬停只改变透明度、轻微位移 (≤4px) 或边框光晕,不放大缩放
  • 数据出现使用上滑 8px + 淡入,呈现「数据流入」的感觉
  • 辉光与脉冲只用于实时状态指示 (在线、新消息、机器人活跃)
  • 完整尊重 prefers-reduced-motion,关闭所有非必要动效
Avoid
  • 弹性反弹、抛物线、过冲曲线 (overshoot)
  • 整页视差滚动、鼠标跟随光标、滚动劫持
  • Loading 转圈 — 用骨架屏 + 进度态文案代替
/ 03 — Icons

图标体系

统一使用 Lucide 线性图标,1.5 描边,正方形视觉重量。图标是功能标识,不是装饰。

Do
  • 图标库: Lucide Icons (开源、风格统一、覆盖广)
  • 线宽固定 1.5,圆角端点,24px 网格,严禁混用填色与线性
  • 颜色: 默认 primary,弱化态用 muted-foreground,警示态用 destructive
  • 技术标签和数据点旁的图标可加 8% primary 色背景圆角方块
  • 中文环境下文字优先,图标作为辅助标识,不要图标 + 中文重复同义
Avoid
  • Emoji 作为正式 UI 图标 (仅允许出现在用户生成内容中)
  • 多套图标库混用 (Heroicons / Material / Feather 等不要混入)
  • 彩色品牌 logo 拼贴(供应商/支付方 logo 单独走 partner 区块)
/ 04 — Voice

品牌语调

像一位资深产品总监在做季度汇报:直接、有数字、不浮夸。中英文一致克制,避免感叹号与营销腔。

Do
  • 句式短,主谓清晰。能用数字就用数字 (1000 家店、200ms、99.99%)
  • 技术名词保留英文,如 GMV / SLA / Console / Bot
  • 中文字符之间不加空格,中英混排时英文与中文之间留 1 个空格
  • 标题用陈述句,不用疑问句和悬念句
  • 禁止使用「赋能、打造、革命性、颠覆、全球领先」等空话
Avoid
  • 感叹号、连续问号、表情符号 (官方文案中)
  • 对用户的命令式吼叫:「快来体验!」「立即抢购!」
  • 对竞品和友商的隐喻攻击,任何带情绪的表述
/ 05 — Voice attributes

语调坐标

在每一个维度上,我们更靠左还是更靠右。

Tone
克制 / Restrained热烈 / Hype
Posture
技术 / Technical营销 / Marketing
Voice
证据 / Evidence-led情感 / Emotion-led
Pace
短句 / Concise长段 / Verbose
Reference
全球 / Global区域 / Local-only
中文Sample
Good

全球 200 个品牌,3000 家独立店铺,1 个后台。

Off-brand

强大全球化布局,赋能全球品牌打造下一代连锁帝国!

EnglishSample
Good

200 brands. 3,000 storefronts. One global console.

Off-brand

Empower your brand to revolutionize the next generation of retail!

/ Icon spec

Lucide · 1.5

图标库
Lucide Icons
线宽
1.5px,圆端
网格
24 × 24
色板
primary / muted / destructive
/ Motion spec

200ms · Predictable

默认时长
200ms
最大时长
400ms
缓动曲线
cubic-bezier(0.4, 0, 0.2, 1)
悬停位移
≤ 4px

本规范适用于官网、登录页、邮件模板、社交分享卡片。任何例外需在 PR 中说明理由。