选择让有意义的内容承担视觉重点。
避免让容器、描边与效果和内容争夺注意力。
一个安静而有质感的工作空间,让智能以可感知的方式显现。
探索品牌身份有生命的清晰是品牌理念,柔和精准是界面行为:安静的结构、稳定的几何与有用的细节。
四项可以在任何 Zillion 界面中直接检查的选择。
选择让有意义的内容承担视觉重点。
避免让容器、描边与效果和内容争夺注意力。
选择导航与操作保持可预测,工作内容可随意图变化。
避免每次出现新结果都重新排列整个界面。
选择只用香槟色标记选择、进度或完成。
避免用金色描边或发光装饰所有表面。
选择在 AI 结果旁展示来源、新鲜度与可执行权限。
避免让智能以无法解释或自动权威的方式出现。
主要身份使用完整组合标。只有在 Zillion 已被明确识别时才单独使用符号。
四周至少保留一个符号宽度(1×)的安全区。
符号与 Zillion 名称保持不变;服务名是安静的描述,不是重新设计的标志。
命名模型 · 非导出标志文件核准源文件public/logo.svgpublic/logo-reverse.svg
色彩、字体、布局、表面、影像、图标与动效。
中性结构,克制的香槟色信号;状态使用独立配色。
--canvas#F7F7F5 / #141517--surface#FFFFFF / #202123--ink#222525 / #F2F2EC--accent#81602D / #DCB87A让中性结构保持安静,使内容、智能与状态清晰可辨。
画布与表面用于结构,香槟色用于有意义的智能信号,语义色用于状态。
不要为了让空白区域显得经过设计而增加颜色。
标题、正文与控件使用无衬线字体,编辑式衬线字仅用于短笔记与字标。
清晰的工具,让内容成为主角。 Clear tools make room for the work.
中英文共用一套层级,但按文字系统选择合适字体。应用界面始终使用无衬线字;编辑式衬线字只用于短注记;Cormorant 只用于拉丁字标。
明确记录字号 / 字重 / 行高。中文沿用相同信息层级,但需要更宽松的行框,不能压缩字距。
--type-title32px / 600 / 中文 1.35 · 拉丁 1.25每个页面或模块只使用一个简短主标题。--type-section24px / 600 / 中文 1.4 · 拉丁 1.3用于开始一个独立内容组。--type-reading16px / 400 / 1.7用于段落、说明与长篇内容。--type-ui14px / 500 / 1.5用于控件、卡片正文和简短标签。--type-meta12px / 400 / 1.5用于日期、状态标签和补充信息。对齐的数据使用等宽数字。不能为了模仿较窄的拉丁文字而缩小中文字号。
默认使用用户熟悉的原生字形。CSS 字体栈会选用首个已安装字体;每个支持平台都必须检查实际换行。
| 平台 | 界面 / 正文 | 编辑式短文 | 说明 |
|---|---|---|---|
| Apple | 苹方 → 冬青黑体简体中文 | 宋体-简 → 华文宋体 | macOS 与 iOS 的首选。 |
| Windows | 微软雅黑 | 中易宋体 | 旧系统避免使用伪造的细字重。 |
| Android / Linux | Noto Sans CJK SC → 思源黑体 | Noto Serif CJK SC → 思源宋体 | 是否可用取决于系统镜像或发行版。 |
| 确定性 Web 字体 | 经过子集化的 Noto Sans SC / 思源黑体 | 经过子集化的 Noto Serif SC / 思源宋体 | 完成负载与许可审核后才能自托管。 |
启用按语言换行。行首避免出现句末标点,行尾避免出现左括号、左引号等起始标点。
中文句子使用全角中文标点。条件允许时,不拆开成对引号与书名号。
阅读正文行高约为 1.7,段落之间留出间距。紧凑产品界面不使用首行缩进。
保持中文自然字距。不要套用拉丁全大写字距,也不要用负字距强行塞入一行。
优先使用字重、颜色或简短标签。避免长篇中文斜体与浏览器合成的倾斜字形。
中文中的普通拉丁词和阿拉伯数字两侧默认不手动加空格;只有歧义或产品约定需要时才增加间隔。
表格列使用等宽数字。24px、12GB、14:30 等紧凑单位与数值不拆开;面向用户的计量方式需要本地化。
使用 zh-CN 与产品明确指定的时区、币种调用 Intl;禁止拼接字符串生成日期或金额。
已注册的拉丁产品名保持原样。翻译其周围的角色或操作,不翻译品牌标记本身。
选择视觉字号与字重相容的拉丁和中文字体;检查基线、标点与换行,不要只匹配 CSS 字重数值。
分享前请检查版本说明,并确认中英文表达的信息一致。 Review the release notes before sharing.
Visionary 网站已就绪 / Ready
检查窄屏下的换行、控件与状态反馈。 Check wrapping, controls and status messages on a narrow screen.
指南本地托管拉丁字体。中文采用原生字体优先,因为现有的常规字重测试字体并不是完整生产家族;直接使用上游完整无衬线与衬线可变字体,在优化前会增加约 42 MB。
需要确定性呈现时,使用 OFL 许可的 Noto CJK 或思源 CJK 字体。
从批准的上游来源生成产品专用 WOFF2 子集,并保留所需中文、标点、拉丁字母与数字。
只预加载首屏主字体。声明 unicode-range 与 font-display: swap,并保留原生字体栈作为回退。
每个引入的字体都要同时保留上游许可与来源记录。禁止复制来源不明的其他仓库构建产物。
采用前记录压缩体积、请求字体数量、布局偏移和慢速网络表现。
正文 ≥ 4.5:1,大字与必要控件边界 ≥ 3:1。明暗主题分别检查。
--ink / --canvas—--muted / --surface—--accent / --canvas—--field-line / --surface—输入焦点:中性 2px 边缘;其他控件保留可见键盘轮廓。状态配文字,玻璃需结合实际背景另测。
使用安静的实色表面。卡片用轻边缘分层,输入控件保留清晰边界。
画布上的安静卡片。表单、列表与模块使用同一表面。
输入保留清晰边界,焦点加强原边缘,不添加外光圈。
4px 网格 · 输入框 8px · 卡片 24px · 间隔 16px。
48121624324864柔和几何是共享不变量。使用少量圆角尺度;先用间距表达归属,再考虑增加边界。
禁止坚硬的外轮廓直角
✓ 相关内容保持开放
× 避免盒子层层嵌套
简单描边图标辅助标签,不替代陌生含义。
根据实际裁切选择叠字对比度;页面主题永远不决定图片文字颜色。
鲍德加湾✓ 正确 · 受保护的前景
鲍德加湾× 错误 · 继承主题正文色为服务提供可靠比例,同时保留各自的任务架构。
选择服务专属构图前,先使用共享页面框架、边距、阅读宽度与模块限制。
不要为所有服务规定同一种仪表盘、侧栏或列数。
通过间距、色阶与少量有意义的边缘建立层级。
内容需要归属、交互、状态或与周围分离时使用表面。
不要把每段文字卡片化,也不要用嵌套容器装饰层级。
| 用途 | 时长 | 属性 |
|---|---|---|
| 反馈 / 弹窗退出 | 160ms | --duration-feedback |
| 导航抽屉 | 200ms | --duration-navigation |
| 内容切换 | 240ms | --duration-replace |
| 字体预览 | 360ms | --duration-font |
| 面板进入 | 280ms | opacity + translateY(10px → 0) |
| 主题 | 700ms | 一次页面渐变 |
终点必须与静止状态一致。反馈不改变字号、字重或容器高度。减少动态效果时直接切换,连续操作以最后选择为准。
700ms 渐变。默认跟随系统,记住手动选择。
反馈 160ms · 进入 280ms。
淡入,然后停留。
工作区已更新。
重要页面切换使用 Visionary 过渡。快速页面安静完成;较慢页面显示带品牌、可访问的进度状态。
快速页面不闪烁
遮罩、标志与字标出现
让进度状态清晰可读
目标就绪后释放遮罩
减少动态时保留相同信息,使用 140 / 180 / 180ms,并取消装饰性循环。
帮助理解状态、关系与存在感,同时不拖慢工作。
反馈、进入、空间连续、组装进度与关闭可以使用动效。
不要为静态装饰添加动画,也不要用发光漂移表现 AI 的智能。
根据用途与状态定义的可复用控件及内容边界。
共享系统定义可重复的部分;服务决定这些部分表达什么、承载什么以及完成什么。
| 家族 | 共享决策 | 服务决策 |
|---|---|---|
| 操作与输入 | 结构、状态、反馈与无障碍交互。 | 字段、验证规则与操作后果。 |
| 导航与框架 | 品牌位置、方向感、选中状态与重排。 | 目的地、层级与产品工具。 |
| 内容与数据 | 表面、列表、表格、状态与进度语言。 | 领域记录、密度与比较模型。 |
| 反馈与覆盖层 | 位置、紧急度、焦点、关闭与恢复。 | 触发条件、信息与产品后果。 |
| AI 信任控件 | 来源、新鲜度、权限、建议与回执。 | 工具、权限与领域操作。 |
让组件可以根据用途与行为复现,而不只是照着外观模仿。
当用途、结构、变体与状态模型会跨服务重复时使用共享组件。
不要在只使用一次后,就把产品专属构图提升为共享组件。
每组保留一个主要操作。
一个按钮拥有一块连续的点击区域。使用主要、描边或安静变体;禁止附加侧边竖线、标签边或选中条。
默认、已填、错误、禁用和只读使用同一基础组件。用 Tab 比较可用输入框的焦点。
形状和文字共同承载状态,不让颜色单独工作。
使用整块表面变化、加强的文字或图标,并在需要时明确写出状态;禁止用贴边竖线或横线表示选中。
使用原生控件与一个可见标签;帮助、错误和可用状态贴近字段。
| 控件 | 必备状态 | 窄屏行为 |
|---|---|---|
| 搜索/组合框 | 空白、结果、无结果、加载、错误。 | 结果与字段对齐且不超出屏幕。 |
| 文字/多行文字 | 默认、已填、错误、禁用、只读。 | 标签与消息在操作上方换行。 |
| 日期/时间 | 空白、已选、不可用、错误。 | 选择器可变为聚焦式底部面板。 |
| 上传 | 空闲、拖入、上传中、完成、失败。 | 文件变为可读的纵向列表。 |
让跨服务的信息输入、检查与纠错保持可预测。
文字、搜索、选择、日期、上传及其他直接输入使用共享字段结构。
不要为每种数据类型重新创造字段外框,也不要把帮助与错误信息放到远离控件的位置。
切换视图查看下方模块,标签始终保持可见。
已选择摘要视图。
至少 44px 高 · 输入文字 16px · 8px 圆角。方向键浏览,回车选择,Esc 关闭;可搜索选择器和操作菜单单独设计。
模块是可复用的信息边界,而不是固定卡片模板。即使内部内容改变,其用途、状态、来源与可执行操作也必须清晰。
一个清晰问题或任务决定模块标题与层级。
内部可以是文字、数据、媒体、列表或可编辑工具。
以足够判断结果的层级呈现状态、来源与新鲜度。
控件靠近所影响的对象,并保留用户直接控制权。
有状态的工作需要模块;解释性文字通常只需要间距,不需要另一张卡片。
先编辑草稿,再应用。只有保存成功后表格才更新。
| 项目 | 状态 | 更新时间 |
|---|---|---|
| 色彩 | 就绪 | 2026年9月9日 |
| 字体 | 就绪 | 2026年9月9日 |
| 材质与层次 | 草稿 | 2026年9月9日 |
使用支持扫描、比较与明确下一步的最小结构。
中断强度匹配紧急程度;保留语境、说明结果并提供一个恢复路径。
| 模式 | 适用场景 | 必须提供 |
|---|---|---|
| 行内提示 | 信息属于附近内容。 | 含义、影响区域与下一步。 |
| Toast | 低风险操作完成后需要确认。 | 简短状态;关键恢复不能只放在这里。 |
| Tooltip | 熟悉控件需要简短补充说明。 | 键盘与指针可达;仅放非关键内容。 |
| 菜单/Popover | 多个语境操作共享一个来源。 | 明确触发器、焦点顺序、Escape 与关闭。 |
| 弹窗/抽屉 | 需要聚焦决策或临时工作区。 | 标题、后果、焦点限制与返回。 |
保持卡片位置,说明发生了什么,并给出一个明确的下一步。
每周概览已就绪,可以开始查看。
模块已就绪
本地模拟 · 重试后显示示例内容。
最大宽度 480px · 内边距 20px · 圆角 24px。一次只处理一个决定。
焦点保持在弹窗内。Escape 或取消关闭后恢复焦点。进入 280ms,退出 160ms;减少动态效果时立即切换。
组合任务、决策、集合、状态与响应式布局。
由任务决定层级,不默认使用等权卡片。
页面可以包含多个区域,但只有一个区域拥有当前任务。
主要工作比辅助信息更宽、更明确,并且更早出现。
在辅助信息争夺注意力前,让当前目的清晰可见。
标签、帮助、验证与结果操作形成一条清晰的阅读顺序。
降低表单、审核与重要操作中的不确定性。
叙事对象使用卡片;重复属性使用对齐行。
来源评审
访问策略
根据用户需要扫描和比较的内容选择列表、网格或表格。
加载、空白、错误与完成都是设计状态,不是遗留空白。
说明正在进行的工作
解释这里应该出现什么
说明失败与恢复方式
展示结果与下一步
把加载、缺失、失败、过期与完成纳入完整体验。
身份确认只保留一项专注任务、一张有语境的图片,并延续产品内部相同的柔和几何语言。

登录时不让产品导航争夺注意力。
框架、输入与操作都使用按角色定义的圆角。
桌面使用左右分栏;手机把较短的语境图片放在表单上方。
焦点、错误、加载与恢复都不应推动表单跳动。
影像是通向地点、对象或知识的窗口。叠加样式由影像自身的明度与构图决定。

根据实际裁切选择文字与控件对比度,禁止从全局主题推导。
每个断点都要保留主体和稳定的文字安全区域。
只有影像自身无法提供可靠对比时,才使用克制的局部遮罩。
优先使用真实语境、材质细节与有效证据,而不是泛化的氛围装饰。
每个界面都支持桌面、平板与手机。模式由可用 CSS 宽度决定,而不是物理分辨率、设备识别或横竖屏;阅读、表单与模块保留各自宽度上限。
68ch400px1600px360px480px| 视口 | 页边距 | 行为 |
|---|---|---|
| ≥ 1200px | 32px | 桌面 · 以 1920×1080 为主;导航常驻;框架居中且上限 1600px;4K 下限制阅读宽度。 |
| 681–1199px | 24px | 空间足够时双列,辅助上下文可收起。 |
| ≤ 680px | 20px + safe area | 手机 · 任务优先单列;抽屉导航;覆盖层独占滚动并保留页面位置。 |
卡片最小 240px,长表格仅在自身区域滚动。检查 320、390、768、1024、1920×1080 与 3840×2160 CSS 视口,以及 200% 缩放。
每个 Zillion 界面都支持桌面、平板与手机。模式由可用 CSS 宽度决定,最终构图由能力与内容决定。
≥ 1200px分享前检查字体与间距。
先检查 1920×1080,再检查 3840×2160 与 200% 缩放。构图可以扩展,阅读行宽不能无限增长。
681–1199px分享前检查字体与间距。
调整窗口或进入分屏。内容根据可用宽度重排,并保留任务、状态与顺序。
≤ 680px分享前检查字体与间距。
检查窄屏、长屏、横屏与屏幕键盘。覆盖层打开时,底层页面绝不能跟随滚动。
围绕当前意图,在稳定工作空间中动态组装有用界面。
保持方向与权限稳定,由智能体组装最小且有用的模块。
随时输入、浮在页面上的紧凑对话,或与工作内容并列的集成对话。
本地演示 · 未连接模型,不保存数据
试着修改备注、输入消息并切换布局。两个区域都会保留当前位置。
12 字符与团队分享前先审阅摘要。
来源:示例文档
试着修改备注、输入消息并切换布局。两个区域都会保留当前位置。
与团队分享前先审阅摘要。
位置、权限与主要控件保持稳定,有用模块在画布内变化。
让智能改变有用内容,但不动摇工作空间。
用途、内容、语境与操作直接显示在模块中。
三个来源结论一致;一个较新的来源需要评审。
4 个来源 · 最新于 12 分钟前无需回看对话记录,也能判断生成界面。
对象保持同一身份,同时改变状态、可用控制与确定性。
评审范围
准备执行
4 个来源中的 3 个
回执可用
对话建立意图;持续工作进入可直接检查与编辑的模块。
4 个来源 · 1 个需要关注
发挥两种媒介各自优势,而不是把产品变成带附件的聊天框。
原因、来源、新鲜度、权限与回执在影响决策的位置保持可见。
这将替换一个过期引用,并保留上一版本。
保留已完成工作,指出失败部分,并提供最小有效恢复操作。
现有摘要已保留。只需重试不可用来源。
请重试。
保留部分智能成果,同时不夸大成功,也不让整个工作空间崩塌。
同一模块保留身份与信任信息,只改变位置与密度。
以不可随意改变的法则,让每项 Zillion 服务都属于同一个品牌。
这些法则优先于局部样式便利。服务规范可以补充细节,但不得暗中违背。
视觉示例位于品牌身份章节;只有在边界情况需要精确措辞时展开。
让每项 Zillion 服务属于同一家族,但不强迫不同产品使用相同布局。
使用当前 Zillion 符号与 Cormorant 字标提供方向感,而不是与产品内容竞争的装饰。
每项法则都是可见判断;只有边界情况才需要展开精确文字。
一个有意义的强调
把强调色当作装饰
仅用于智能、有效选择、重要价值与有意完成。
Bodega Bay前景跟随实际裁切
Bodega Bay由页面主题决定图片文字
无论应用主题如何,叠加内容都保持可读。
两种语言分别构图
把中文当作溢出内容
让中英文都是设计输入,而不是先后翻译层。
形状与文字共同表达状态
只靠颜色表达状态
以 WCAG 2.2 AA 作为共享基线,而不是最后补做审核。
重排后层级保持不变
只是压缩桌面布局
支持桌面、平板与手机,同时保留任务、顺序、状态与控制。
来源与结果保持相邻
信任信息被放在远处
让 AI 生成工作可理解、可判断。
已知与推断明确区分
把猜测呈现为事实
设计、语言或生成输出变化时仍保护含义。
增加容器前先使用间距
为了装饰而嵌套卡片
保护有生命的清晰,不让流行效果代替层级或意义。
服务专属设计继续推进前,对共享语言进行最后一次检查。
评审者应当直接从渲染界面判断层级、状态、信任与操作。
只有当每个相关问题都有可见答案时,设计才适合继续进行服务专属深化。
移除标志后,是否仍能识别为 Zillion?
是否只有一个清晰主角和一个明确主要操作?
色彩、字体、影像与动效是否遵循各自语义?
相关场景是否定义加载、空内容、错误、过期、禁用与完成状态?
中英文是否拥有同等意义与视觉权威?
窄屏与 200% 缩放后,任务、输入和状态是否保留?
键盘、焦点、对比度、触控与减少动效是否满足要求?
每个 AI 模块是否呈现足够的原因、来源、新鲜度、不确定性与权限?
有后果的操作是否明确,并提供准确回执?
每项共享规则偏差是否能说明需求与责任方?
共享语言设定不变量;服务负责定义让这些不变量在自身领域中发挥作用的产品决策。