Zillion Visionary
设计指南
Zillion 设计指南

有生命的清晰。

一个安静而有质感的工作空间,让智能以可感知的方式显现。

探索品牌身份

柔和精准

有生命的清晰是品牌理念,柔和精准是界面行为:安静的结构、稳定的几何与有用的细节。

界面方向

四项可以在任何 Zillion 界面中直接检查的选择。

选择让有意义的内容承担视觉重点。

避免让容器、描边与效果和内容争夺注意力。

选择导航与操作保持可预测,工作内容可随意图变化。

避免每次出现新结果都重新排列整个界面。

选择只用香槟色标记选择、进度或完成。

避免用金色描边或发光装饰所有表面。

选择在 AI 结果旁展示来源、新鲜度与可执行权限。

避免让智能以无法解释或自动权威的方式出现。

标志与字标

主要身份使用完整组合标。只有在 Zillion 已被明确识别时才单独使用符号。

允许使用的背景

Zillion Visionary浅色画布 · 首选
Zillion Visionary安静表面
Zillion Visionary深色画布 · 反白标志

安全区与尺寸

1×Zillion Visionary

四周至少保留一个符号宽度(1×)的安全区。

32px导航符号24px符号最小尺寸120px完整组合标最小宽度

品牌家族组合

符号与 Zillion 名称保持不变;服务名是安静的描述,不是重新设计的标志。

命名模型 · 非导出标志文件
ZillionVisionary
ZillionKnowledge
ZillionAgents

保持标志完整

禁止拉伸
禁止旋转
禁止添加效果
禁止失去对比

核准源文件public/logo.svgpublic/logo-reverse.svg

共享,还是服务自有

添加产品规则前,先确认这条边界。共享规则保护识别度与信任;服务自有规则塑造具体工作。

决策归属控制内容
标志系统共享使用核准的标志、安全区与对比度规则。
色彩与字体角色共享共享语义角色,而不是强制同一种布局。
共享基础组件行为共享操作、输入、导航框架与反馈使用相同契约。
响应式与无障碍共享必须支持桌面、平板、手机与多种输入方式。
AI 信任与权限共享来源、新鲜度、权限与操作状态保持可见。
信息架构服务自有每项服务组织自己的工作。
产品语气与内容服务自有产品团队根据受众与语境定义语言。
领域工作流服务自有共享指南不规定产品任务。
领域组件服务自有服务使用共享基础组件组合专用记录与工具。
布局与数据密度服务自有各服务选择工作流构图与信息密度。

服务可以扩展系统,但不得悄悄重定义共享规则。

02

设计基础

色彩、字体、布局、表面、影像、图标与动效。

色彩

中性结构,克制的香槟色信号;状态使用独立配色。

画布--canvas#F7F7F5 / #141517
表面--surface#FFFFFF / #202123
正文--ink#222525 / #F2F2EC
强调--accent#81602D / #DCB87A
FD-01

色彩各有归属

让中性结构保持安静,使内容、智能与状态清晰可辨。

适用场景

画布与表面用于结构,香槟色用于有意义的智能信号,语义色用于状态。

不适用场景

不要为了让空白区域显得经过设计而增加颜色。

始终
语义色必须搭配文字、形状或图标含义,并在双主题下验证对比度。
通常
让瓷白与炭黑占据界面的大部分面积。
绝不
把香槟色用于警告、错误、破坏性操作或装饰性外框。
例外
媒体可以带来更强色彩,但前景必须得到独立保护。

字体

标题、正文与控件使用无衬线字体,编辑式衬线字仅用于短笔记与字标。

清晰的工具,让内容成为主角。 Clear tools make room for the work.

中英文共用一套层级,但按文字系统选择合适字体。应用界面始终使用无衬线字;编辑式衬线字只用于短注记;Cormorant 只用于拉丁字标。

角色与度量

明确记录字号 / 字重 / 行高。中文沿用相同信息层级,但需要更宽松的行框,不能压缩字距。

应用标题--type-title32px / 600 / 中文 1.35 · 拉丁 1.25每个页面或模块只使用一个简短主标题。
工作区概览 · Workspace overview
章节标题--type-section24px / 600 / 中文 1.4 · 拉丁 1.3用于开始一个独立内容组。
最近动态 · Recent activity
正文--type-reading16px / 400 / 1.7用于段落、说明与长篇内容。
让下一步操作容易理解。 Make the next action easy to understand.
界面--type-ui14px / 500 / 1.5用于控件、卡片正文和简短标签。
保存更改 · Save changes
辅助信息--type-meta12px / 400 / 1.5用于日期、状态标签和补充信息。
更新于 14:30 · Updated 14:30

对齐的数据使用等宽数字。不能为了模仿较窄的拉丁文字而缩小中文字号。

中文平台字体栈

默认使用用户熟悉的原生字形。CSS 字体栈会选用首个已安装字体;每个支持平台都必须检查实际换行。

平台界面 / 正文编辑式短文说明
Apple苹方 → 冬青黑体简体中文宋体-简 → 华文宋体macOS 与 iOS 的首选。
Windows微软雅黑中易宋体旧系统避免使用伪造的细字重。
Android / LinuxNoto Sans CJK SC → 思源黑体Noto Serif CJK SC → 思源宋体是否可用取决于系统镜像或发行版。
确定性 Web 字体经过子集化的 Noto Sans SC / 思源黑体经过子集化的 Noto Serif SC / 思源宋体完成负载与许可审核后才能自托管。

中文排版

换行

启用按语言换行。行首避免出现句末标点,行尾避免出现左括号、左引号等起始标点。

标点

中文句子使用全角中文标点。条件允许时,不拆开成对引号与书名号。

段落节奏

阅读正文行高约为 1.7,段落之间留出间距。紧凑产品界面不使用首行缩进。

字距

保持中文自然字距。不要套用拉丁全大写字距,也不要用负字距强行塞入一行。

强调

优先使用字重、颜色或简短标签。避免长篇中文斜体与浏览器合成的倾斜字形。

中英混排

空格

中文中的普通拉丁词和阿拉伯数字两侧默认不手动加空格;只有歧义或产品约定需要时才增加间隔。

数字与单位

表格列使用等宽数字。24px、12GB、14:30 等紧凑单位与数值不拆开;面向用户的计量方式需要本地化。

日期与货币

使用 zh-CN 与产品明确指定的时区、币种调用 Intl;禁止拼接字符串生成日期或金额。

产品名称

已注册的拉丁产品名保持原样。翻译其周围的角色或操作,不翻译品牌标记本身。

字体匹配

选择视觉字号与字重相容的拉丁和中文字体;检查基线、标点与换行,不要只匹配 CSS 字重数值。

应用场景示例

今日重点 · Today’s priorities

分享前请检查版本说明,并确认中英文表达的信息一致。 Review the release notes before sharing.

使用简短且容易识别的名称。 Use a short, recognizable name.
计划状态

Visionary 网站已就绪 / Ready

请输入 2–40 个字符。 Use 2–40 characters.
9月11日更新 · Updated 14:30
准备双语版本 · Prepare the bilingual release

检查窄屏下的换行、控件与状态反馈。 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。明暗主题分别检查。

Aa 字--ink / --canvas—
Aa 字--muted / --surface—
Aa 字--accent / --canvas—
Aa 字--field-line / --surface—

输入焦点:中性 2px 边缘;其他控件保留可见键盘轮廓。状态配文字,玻璃需结合实际背景另测。

材质

使用安静的实色表面。卡片用轻边缘分层,输入控件保留清晰边界。

内容表面

画布上的安静卡片。表单、列表与模块使用同一表面。

嵌套内容 · 轻微色阶区分

交互边界

输入保留清晰边界,焦点加强原边缘,不添加外光圈。

间距与形状

4px 网格 · 输入框 8px · 卡片 24px · 间隔 16px。

4
8
12
16
24
32
48
64

间距、圆角与层级

柔和几何是共享不变量。使用少量圆角尺度;先用间距表达归属,再考虑增加边界。

按角色使用圆角

81220∞
使用 · 按角色使用圆角禁止 · 坚硬的 90° 直角

禁止坚硬的外轮廓直角

优先使用间距

✓ 相关内容保持开放

× 避免盒子层层嵌套

图标构造

简单描边图标辅助标签,不替代陌生含义。

16px 行内20px 控件1.5px 描边44px 触控区域

前景跟随图片

根据实际裁切选择叠字对比度;页面主题永远不决定图片文字颜色。

鲍德加湾✓ 正确 · 受保护的前景
鲍德加湾× 错误 · 继承主题正文色
FD-02

布局是约束,不是模板

为服务提供可靠比例,同时保留各自的任务架构。

适用场景

选择服务专属构图前,先使用共享页面框架、边距、阅读宽度与模块限制。

不适用场景

不要为所有服务规定同一种仪表盘、侧栏或列数。

始终
主要任务在文档与视觉顺序中都应优先,并在重排后保持。
通常
以 68ch 阅读宽度、400px 表单宽度和 360px 辅助模块作为起点。
绝不
不要仅因屏幕很宽就拉伸正文、表单或弹窗。
例外
数据画布与媒体可在内部结构确实受益时扩展。
FD-03

边界服从用途

通过间距、色阶与少量有意义的边缘建立层级。

适用场景

内容需要归属、交互、状态或与周围分离时使用表面。

不适用场景

不要把每段文字卡片化,也不要用嵌套容器装饰层级。

始终
所有有可见边界的控件与独立归属表面,都必须使用按角色定义的外轮廓圆角。
通常
说明文字保持开放,示例、工具与有状态模块使用边界。
绝不
在输入、按钮、卡片、导航行、独立数据行、弹窗或抽屉外轮廓使用 90 度直角;视口边缘和网格内部接缝不属于组件外角。
例外
媒体或专注工作需要时,深色语境表面可以打断中性系统。

动效规则

用途时长属性
反馈 / 弹窗退出160ms--duration-feedback
导航抽屉200ms--duration-navigation
内容切换240ms--duration-replace
字体预览360ms--duration-font
面板进入280msopacity + translateY(10px → 0)
主题700ms一次页面渐变

终点必须与静止状态一致。反馈不改变字号、字重或容器高度。减少动态效果时直接切换,连续操作以最后选择为准。

主题切换

700ms 渐变。默认跟随系统,记住手动选择。

相同尺寸,不同明暗。

反馈与进入

反馈 160ms · 进入 280ms。

面板预览

淡入,然后停留。

面板 · 淡入上移
色彩
字体
材质
列表 · 依次进入
更改已保存

工作区已更新。

反馈 · 平稳出现
尊重系统的减少动态效果设置。

页面切换保持品牌存在感

重要页面切换使用 Visionary 过渡。快速页面安静完成;较慢页面显示带品牌、可访问的进度状态。

延迟400ms

快速页面不闪烁

进入680ms

遮罩、标志与字标出现

保持≥560ms

让进度状态清晰可读

退出760ms

目标就绪后释放遮罩

减少动态时保留相同信息,使用 140 / 180 / 180ms,并取消装饰性循环。

FD-06

动效解释变化

帮助理解状态、关系与存在感,同时不拖慢工作。

适用场景

反馈、进入、空间连续、组装进度与关闭可以使用动效。

不适用场景

不要为静态装饰添加动画,也不要用发光漂移表现 AI 的智能。

始终
交互可以中断,焦点得到保留,并提供减少动态效果的结果。
通常
反馈使用 160ms,内容使用 240–280ms,只有环境主题变化可以更长。
绝不
装饰动效结束前阻塞输入、让控件弹跳或悬停时缩放整张卡片。
例外
保留空间连续且可中断时,语境媒体过渡可以稍慢。
03

组件

根据用途与状态定义的可复用控件及内容边界。

共享基础组件家族

共享系统定义可重复的部分;服务决定这些部分表达什么、承载什么以及完成什么。

家族共享决策服务决策
操作与输入结构、状态、反馈与无障碍交互。字段、验证规则与操作后果。
导航与框架品牌位置、方向感、选中状态与重排。目的地、层级与产品工具。
内容与数据表面、列表、表格、状态与进度语言。领域记录、密度与比较模型。
反馈与覆盖层位置、紧急度、焦点、关闭与恢复。触发条件、信息与产品后果。
AI 信任控件来源、新鲜度、权限、建议与回执。工具、权限与领域操作。
CP-01

每个组件都是完整契约

让组件可以根据用途与行为复现,而不只是照着外观模仿。

适用场景

当用途、结构、变体与状态模型会跨服务重复时使用共享组件。

不适用场景

不要在只使用一次后,就把产品专属构图提升为共享组件。

始终
按需定义默认、悬停、焦点、按下、禁用、加载、错误与完成行为。
通常
变体以主要、安静、破坏性等语义命名,而不是按颜色或位置命名。
绝不
在任何组件上用贴住单侧边缘的竖线或横线表示选中,包括导航、按钮、卡片、数据行与标签页;选中状态必须改变对象本身。
例外
熟悉的纯图标工具在具备无障碍名称、提示与足够触控尺寸时可以使用。

操作

每组保留一个主要操作。

按钮是完整控件

一个按钮拥有一块连续的点击区域。使用主要、描边或安静变体;禁止附加侧边竖线、标签边或选中条。

主要次要安静
默认
悬停
焦点
按下
加载中
禁用

输入状态

默认、已填、错误、禁用和只读使用同一基础组件。用 Tab 比较可用输入框的焦点。

状态与选择

形状和文字共同承载状态,不让颜色单独工作。

○ 草稿◉ 进行中✓ 已完成 开启

选中状态改变整个对象

使用整块表面变化、加强的文字或图标,并在需要时明确写出状态;禁止用贴边竖线或横线表示选中。

使用 · 整体状态
导航行已选择卡片已选择数据行已选择标签页已选择
禁止 · 贴边选中条
导航行已选择卡片已选择数据行已选择标签页已选择

扩展输入控件

使用原生控件与一个可见标签;帮助、错误和可用状态贴近字段。

参考文件PDF 或图片 · 最大 20 MB
控件必备状态窄屏行为
搜索/组合框空白、结果、无结果、加载、错误。结果与字段对齐且不超出屏幕。
文字/多行文字默认、已填、错误、禁用、只读。标签与消息在操作上方换行。
日期/时间空白、已选、不可用、错误。选择器可变为聚焦式底部面板。
上传空闲、拖入、上传中、完成、失败。文件变为可读的纵向列表。
CP-02

输入控件明确呈现自身状态

让跨服务的信息输入、检查与纠错保持可预测。

适用场景

文字、搜索、选择、日期、上传及其他直接输入使用共享字段结构。

不适用场景

不要为每种数据类型重新创造字段外框,也不要把帮助与错误信息放到远离控件的位置。

始终
可见标签、输入值、可用状态、帮助或错误信息与必填状态必须在语义上关联。
通常
原生控件能可靠提供键盘、触控与平台行为时优先使用原生控件。
绝不
不要把占位文字作为唯一标签,也不要在验证失败时清除用户输入。
例外
窄屏可以为复杂选择器打开聚焦式面板,但原字段与返回路径必须清楚。

切换视图查看下方模块,标签始终保持可见。

已选择摘要视图。

工作区概览
3模块2已就绪

至少 44px 高 · 输入文字 16px · 8px 圆角。方向键浏览,回车选择,Esc 关闭;可搜索选择器和操作菜单单独设计。

内容模块结构

模块是可复用的信息边界,而不是固定卡片模板。即使内部内容改变,其用途、状态、来源与可执行操作也必须清晰。

01

用途

一个清晰问题或任务决定模块标题与层级。

02

内容

内部可以是文字、数据、媒体、列表或可编辑工具。

03

语境

以足够判断结果的层级呈现状态、来源与新鲜度。

04

行动

控件靠近所影响的对象,并保留用户直接控制权。

只有拥有状态或操作时才增加边界

有状态的工作需要模块;解释性文字通常只需要间距,不需要另一张卡片。

✓ 有归属的模块
× 多余的容器

表单工作流

先编辑草稿,再应用。只有保存成功后表格才更新。

没有待保存更改

易读的数据

示例工作区 · 通知已开启

项目状态更新时间
色彩就绪2026年9月9日
字体就绪2026年9月9日
材质与层次草稿2026年9月9日

内容、状态与进度

使用支持扫描、比较与明确下一步的最小结构。

Zillion Visionary今日更新已就绪
迁移进度64%64%
  1. 1检查
  2. 2批准
  3. 3应用

反馈与覆盖层

中断强度匹配紧急程度;保留语境、说明结果并提供一个恢复路径。

模式适用场景必须提供
行内提示信息属于附近内容。含义、影响区域与下一步。
Toast低风险操作完成后需要确认。简短状态;关键恢复不能只放在这里。
Tooltip熟悉控件需要简短补充说明。键盘与指针可达;仅放非关键内容。
菜单/Popover多个语境操作共享一个来源。明确触发器、焦点顺序、Escape 与关闭。
弹窗/抽屉需要聚焦决策或临时工作区。标题、后果、焦点限制与返回。

加载与恢复

保持卡片位置,说明发生了什么,并给出一个明确的下一步。

模块已就绪

每周概览已就绪,可以开始查看。

模块已就绪

本地模拟 · 重试后显示示例内容。

弹窗

最大宽度 480px · 内边距 20px · 圆角 24px。一次只处理一个决定。

创建模块

在示例工作区中添加概览。本演示不会保存数据。

焦点保持在弹窗内。Escape 或取消关闭后恢复焦点。进入 280ms,退出 160ms;减少动态效果时立即切换。

04

应用模式

组合任务、决策、集合、状态与响应式布局。

快速理解页面构图

由任务决定层级,不默认使用等权卡片。

品牌叙事

知识阅读

工作空间

概览

一个页面,一个主角

页面可以包含多个区域,但只有一个区域拥有当前任务。

研究简报
主要工作

准备证据评审

主要工作比辅助信息更宽、更明确,并且更早出现。

6 个来源 · 今日刷新
  1. 1当前位置
  2. 2当前任务
  3. 3下一步操作
精确规则

在辅助信息争夺注意力前,让当前目的清晰可见。

始终
主要结果或任务优先,主要操作含义明确。
通常
辅助模块负责解释、比较或支持主角。
绝不
在没有核心问题时堆出同样响亮的卡片仪表盘。
例外
探索型集合可以暂时没有选中对象,但仍需清晰的浏览目的。

决策靠近它的后果

标签、帮助、验证与结果操作形成一条清晰的阅读顺序。

受邀协作者可以看到。
  1. 1输入前先解释
  2. 2概括操作后果
  3. 3相关操作放在一起
精确规则

降低表单、审核与重要操作中的不确定性。

始终
保留已输入内容,指出受影响字段,并解释下一项有效操作。
通常
主要操作放在其提交内容之后,分阶段工作显示进度。
绝不
使用禁用控件却不解释如何恢复可用。
例外
自动保存可以省略提交按钮,但状态、失败与恢复必须可见。

根据比较任务选择集合

叙事对象使用卡片;重复属性使用对齐行。

独立对象通过
01研究简报

来源评审

02知识地图

访问策略

可比较记录通过
来源评审就绪今天
访问策略草稿昨天
精确规则

根据用户需要扫描和比较的内容选择列表、网格或表格。

始终
把表格作为一张完整卡片处理:使用一个外框、对齐列、统一单元格内边距,并让表头与行分隔线保持同一线宽。
通常
窄屏通过滚动、优先列或明确行视图保留列含义。
绝不
把表格变成无标签的堆叠数值,或在重排时隐藏选中状态。
例外
当影像或独立操作是主要比较维度时,小型视觉集合可以使用卡片。

每个状态都保留前进路径

加载、空白、错误与完成都是设计状态,不是遗留空白。

加载中01

说明正在进行的工作

空状态02

解释这里应该出现什么

错误03

说明失败与恢复方式

已完成04

展示结果与下一步

精确规则

把加载、缺失、失败、过期与完成纳入完整体验。

始终
说明发生了什么、什么仍然安全,以及下一步可以做什么。
通常
保留周围结构,避免状态变化破坏方向感。
绝不
替代内容就绪前删除过期内容,或只靠动画暗示完成。
例外
短暂首次加载且没有用户操作或旧结果风险时,可使用安静骨架屏。

登录是一个安静的门槛

身份确认只保留一项专注任务、一张有语境的图片,并延续产品内部相同的柔和几何语言。

语境媒体

影像是通向地点、对象或知识的窗口。叠加样式由影像自身的明度与构图决定。

博德加湾美国加州索诺玛县 · 由语境决定对比度

前景

根据实际裁切选择文字与控件对比度,禁止从全局主题推导。

裁切

每个断点都要保留主体和稳定的文字安全区域。

保护

只有影像自身无法提供可靠对比时,才使用克制的局部遮罩。

意义

优先使用真实语境、材质细节与有效证据,而不是泛化的氛围装饰。

宽度与响应式布局

每个界面都支持桌面、平板与手机。模式由可用 CSS 宽度决定,而不是物理分辨率、设备识别或横竖屏;阅读、表单与模块保留各自宽度上限。

阅读

68ch

表单

400px

页面框架

1600px

侧栏模块

360px

弹窗

480px
主要内容
视口页边距行为
≥ 1200px32px桌面 · 以 1920×1080 为主;导航常驻;框架居中且上限 1600px;4K 下限制阅读宽度。
681–1199px24px空间足够时双列,辅助上下文可收起。
≤ 680px20px + safe area手机 · 任务优先单列;抽屉导航;覆盖层独占滚动并保留页面位置。

卡片最小 240px,长表格仅在自身区域滚动。检查 320、390、768、1024、1920×1080 与 3840×2160 CSS 视口,以及 200% 缩放。

三种响应式模式

每个 Zillion 界面都支持桌面、平板与手机。模式由可用 CSS 宽度决定,最终构图由能力与内容决定。

桌面

≥ 1200px
  • 以 1920×1080 CSS 视口为主要构图基准。使用常驻的 240px 导航区域、32px 外边距,以及上限 1600px 的居中框架。
  • 在 4K 下保持阅读宽度与控件尺寸上限。把更大的画布用于平衡结构与辅助上下文,绝不能只按物理分辨率放大字体。
  • 同等支持指针与键盘。主内容和上下文都保有有效宽度时可并排显示;必要操作不能依赖悬停。

项目状态

等待审阅。

辅助上下文

分享前检查字体与间距。

次要内容不能盖过主要任务。

先检查 1920×1080,再检查 3840×2160 与 200% 缩放。构图可以扩展,阅读行宽不能无限增长。

平板

681–1199px
  • 使用 24px 页边距与抽屉导航。把竖屏、横屏和分屏视为正常宽度变化,不建立另一套设备设计。
  • 只有每个区域都保有足够内容宽度时才使用双列;窄分屏下按阅读顺序堆叠。
  • 同等支持触摸、触控板与键盘。焦点保持可见,触控目标至少 44px,局部溢出限制在有名称的区域内。

项目状态

等待审阅。

辅助上下文

分享前检查字体与间距。

次要内容不能盖过主要任务。

调整窗口或进入分屏。内容根据可用宽度重排,并保留任务、状态与顺序。

手机

≤ 680px
  • 采用任务优先的单列布局,使用 20px 页边距并叠加安全区域。辅助模块排在主要内容之后,或作为聚焦视图打开。
  • 触控目标至少 44px,输入文字至少 16px。输入聚焦时保持在键盘上方,所有必要操作无需悬停即可使用。
  • 抽屉或弹窗打开后独占滚动。页面冻结在准确位置,阻止滚动链,并在关闭时恢复位置与焦点。

项目状态

等待审阅。

辅助上下文

分享前检查字体与间距。

次要内容不能盖过主要任务。

检查窄屏、长屏、横屏与屏幕键盘。覆盖层打开时,底层页面绝不能跟随滚动。

05

AI 原生

围绕当前意图,在稳定工作空间中动态组装有用界面。

稳定框架,动态组装工作

保持方向与权限稳定,由智能体组装最小且有用的模块。

为何出现2 个来源 · 今日更新
应用前检查
  1. 1建议
  2. 2就绪
  3. 3执行中
  4. 4回执

同一段对话,三种工作方式

随时输入、浮在页面上的紧凑对话,或与工作内容并列的集成对话。

本地演示 · 未连接模型,不保存数据

文档
助手季度回顾
Enter 发送 · Shift+Enter 换行
草稿 · 切换布局时保留

季度回顾

试着修改备注、输入消息并切换布局。两个区域都会保留当前位置。

12 字符

概览

与团队分享前先审阅摘要。

来源:示例文档

工作区

试着修改备注、输入消息并切换布局。两个区域都会保留当前位置。

与团队分享前先审阅摘要。

Zillion

导航

探索导航与响应式布局 →

框架稳定,工作变化

位置、权限与主要控件保持稳定,有用模块在画布内变化。

Zillion研究工作区
动态组装模块

证据摘要

  1. 1稳定位置
  2. 2动态组装模块
  3. 3稳定权限
精确规则

让智能改变有用内容,但不动摇工作空间。

始终
每次组装变化都保留当前任务、用户输入与清晰返回路径。
通常
用途不变时更新现有模块,而不是不断添加模块。
绝不
因模型推断新意图而重排持久导航、提交操作或丢弃草稿。
例外
用户可明确进入暂时隐藏辅助结构的专注模式。

每个模块都解释为何存在

用途、内容、语境与操作直接显示在模块中。

根据你的请求生成

证据摘要

三个来源结论一致;一个较新的来源需要评审。

4 个来源 · 最新于 12 分钟前
  1. 1用途
  2. 2结果
  3. 3来源
  4. 4操作
精确规则

无需回看对话记录,也能判断生成界面。

始终
按判断所需层级呈现出现原因、用途、生命周期、来源、新鲜度、不确定性与可用操作。
通常
从已知语义模块组装,每个视图只保留一个主要结果。
绝不
把生成数据当权威数据,或隐藏建议与已执行操作之间的区别。
例外
低风险临时建议可以压缩来源信息,但完整详情需一步可达。

同一模块,状态可见

对象保持同一身份,同时改变状态、可用控制与确定性。

  1. 01
    证据摘要已提议

    评审范围

  2. 02
    证据摘要已批准

    准备执行

  3. 03
    证据摘要执行中

    4 个来源中的 3 个

  4. 04
    证据摘要已完成

    回执可用

对话引导,画布承载工作

对话建立意图;持续工作进入可直接检查与编辑的模块。

根据你的请求生成

冲突评审

4 个来源 · 1 个需要关注

精确规则

发挥两种媒介各自优势,而不是把产品变成带附件的聊天框。

始终
对话与模块之间的引用明确,任一方获得焦点时都保留语境。
通常
只询问一个精确阻塞问题,让未受影响模块继续可用。
绝不
让用户复述可见模块内容,或为纯展示重排请求确认。
例外
没有持久状态、比较或直接操作的简单答案可以留在对话中。

信任信息靠近结果

原因、来源、新鲜度、权限与回执在影响决策的位置保持可见。

根据你的请求生成

更新证据摘要

需要评审

这将替换一个过期引用,并保留上一版本。

原因
用户要求比较
来源
4 条已链接记录
权限
需要评审
回执
保留版本历史

权限出现在后果发生的位置

请求权限前说明将要改变什么;不能根据对话推断权限。

更新提议替换 1 个引用 · 保留 3 个 · 影响 1 份共享简报
精确规则

让智能体自由处理可逆展示,同时保护外部与持久变化。

始终
重要操作前说明目标、后果与可逆性,操作后说明实际变化。
通常
可逆组装、排序与展示调整无需确认。
绝不
把草稿说成已发送、把建议说成已采纳,或把尝试说成已完成。
例外
有范围的长期用户策略可授权重复操作,但当前目标仍需可见。

失败具体且可以恢复

保留已完成工作,指出失败部分,并提供最小有效恢复操作。

通过

3 个来源完成 · 1 个不可用

现有摘要已保留。只需重试不可用来源。

不通过

出现问题

请重试。

精确规则

保留部分智能成果,同时不夸大成功,也不让整个工作空间崩塌。

始终
指出受影响工作,保留有效结果,并提供范围最小的安全恢复。
通常
失败模块解释下一步时,未受影响模块继续保持就绪。
绝不
丢弃用户输入、隐藏不确定性,或未经授权重试有后果的操作。
例外
只有稳定框架本身无法安全继续时,才使用整页中断。

响应式交接保留意义

同一模块保留身份与信任信息,只改变位置与密度。

桌面对话与画布同时显示
平板画布优先,语境折叠
手机单一任务,信任信息内联
06

系统规则

以不可随意改变的法则,让每项 Zillion 服务都属于同一个品牌。

八条共享法则

这些法则优先于局部样式便利。服务规范可以补充细节,但不得暗中违背。

品牌身份规则索引

视觉示例位于品牌身份章节;只有在边界情况需要精确措辞时展开。

ID-01一种语言,多项服务

让每项 Zillion 服务属于同一家族,但不强迫不同产品使用相同布局。

始终
保留共享身份、语义色、字体角色、无障碍基线与 AI 信任模型。
通常
引入服务变体前,先复用共享组件与构图规则。
绝不
把某项服务的页面结构称作通用 Zillion 布局。
例外
服务可以在记录需求且不暗中违背共享不变量时扩展系统。
ID-03标志保持安静与完整

使用当前 Zillion 符号与 Cormorant 字标提供方向感,而不是与产品内容竞争的装饰。

始终
保持比例、清晰前景对比,以及至少等于一个符号宽度的安全间距。
通常
产品导航使用指南中的 28px 符号与 Cormorant 字标。
绝不
添加特效、单独改色笔画,或把字标字体用于普通界面标题。
例外
服务描述可遵循已记录的品牌家族模型;紧凑版、活动或合作方组合必须使用核准资产。

八项法则,直接展示

每项法则都是可见判断;只有边界情况才需要展开精确文字。

R-01

香槟色表达意义

通过

一个有意义的强调

不通过

把强调色当作装饰

精确规则

仅用于智能、有效选择、重要价值与有意完成。

始终
状态色保持独立语义。
通常
每个决策组只出现一次香槟色重点。
绝不
用于警告、错误或破坏性操作。
例外
品牌编辑场景可以使用不暗示交互的安静香槟色细节。
R-02

媒体拥有自己的前景

通过
Bodega Bay

前景跟随实际裁切

不通过
Bodega Bay

由页面主题决定图片文字

精确规则

无论应用主题如何,叠加内容都保持可读。

始终
测试所有支持的裁切与断点。
通常
使用稳定的图片安全区。
绝不
仅因明暗主题切换叠字。
例外
局部遮罩可以稳定无法避免的明度变化。
R-03

两种语言都拥有主导权

通过
Research brief研究简报

两种语言分别构图

不通过
Research brief研究简报

把中文当作溢出内容

精确规则

让中英文都是设计输入,而不是先后翻译层。

始终
提供同等意义与完整状态覆盖。
通常
每种语言使用自然表达与行文节奏。
绝不
缩小中文去模仿拉丁文字密度。
例外
注册产品标识保持原样。
R-04

无障碍属于组件本身

通过

形状与文字共同表达状态

不通过

只靠颜色表达状态

精确规则

以 WCAG 2.2 AA 作为共享基线,而不是最后补做审核。

始终
焦点可见,名称可由辅助技术读取。
通常
使用 44px 触控目标并支持 200% 缩放。
绝不
为了视觉便利移除语义。
例外
紧凑目标需要等效无障碍交互与明确原因。
R-05

意义在重排后保留

通过

重排后层级保持不变

不通过

只是压缩桌面布局

精确规则

支持桌面、平板与手机,同时保留任务、顺序、状态与控制。

始终
验证 1920×1080 与 3840×2160 桌面、平板竖屏与横屏,以及窄屏手机。
通常
桌面保留常驻导航,平板与手机使用抽屉;空间变窄时,辅助模块排在主角之后。
绝不
把必要操作藏在悬停后,或让打开的覆盖层背后的页面继续滚动。
例外
密集数据可在有名称的区域内滚动,但页面本身必须保持稳定。
R-06

智能保持透明

通过
证据摘要4 个来源 · 今天

来源与结果保持相邻

不通过
证据摘要4 个来源 · 今天

信任信息被放在远处

精确规则

让 AI 生成工作可理解、可判断。

始终
区分建议、行动与完成。
通常
来源信息保持安静但随时可达。
绝不
暗示并不存在的确定性或权限。
例外
低风险临时帮助可使用紧凑披露。
R-07

内容保持真实

通过
已知4推断1

已知与推断明确区分

不通过
已知4推断1

把猜测呈现为事实

精确规则

设计、语言或生成输出变化时仍保护含义。

始终
明确未知、过期与部分完成。
通常
优先直接动词与具体对象。
绝不
编造精度、来源或完成状态。
例外
不提出操作事实时,编辑式语言可以更具暗示性。
R-08

拒绝视觉捷径

通过

增加容器前先使用间距

不通过

为了装饰而嵌套卡片

精确规则

保护有生命的清晰,不让流行效果代替层级或意义。

始终
移除泛化玻璃、装饰发光、过度卡片与无解释动态界面。
通常
用间距、字重与内容层级代替装饰。
绝不
使用金色外框、戏剧化 AI 效果、主题驱动媒体叠字或密集界面衬线字。
例外
有记录的探索可在规范指南之外测试禁用方向。
07

设计评审

服务专属设计继续推进前,对共享语言进行最后一次检查。

评审界面,而不是解释

评审者应当直接从渲染界面判断层级、状态、信任与操作。

通过

证据评审

4 个来源 · 今日更新
不通过

工作区仪表盘

AI 驱动
  1. 1一个明确主角
  2. 2来源与新鲜度相邻
  3. 3操作说明后果
  4. 4没有装饰性嵌套
RV-01

共享语言评审

只有当每个相关问题都有可见答案时,设计才适合继续进行服务专属深化。

  1. 01

    移除标志后,是否仍能识别为 Zillion?

  2. 02

    是否只有一个清晰主角和一个明确主要操作?

  3. 03

    色彩、字体、影像与动效是否遵循各自语义?

  4. 04

    相关场景是否定义加载、空内容、错误、过期、禁用与完成状态?

  5. 05

    中英文是否拥有同等意义与视觉权威?

  6. 06

    窄屏与 200% 缩放后,任务、输入和状态是否保留?

  7. 07

    键盘、焦点、对比度、触控与减少动效是否满足要求?

  8. 08

    每个 AI 模块是否呈现足够的原因、来源、新鲜度、不确定性与权限?

  9. 09

    有后果的操作是否明确,并提供准确回执?

  10. 10

    每项共享规则偏差是否能说明需求与责任方?

RV-02

服务规范需要补充什么

共享语言设定不变量;服务负责定义让这些不变量在自身领域中发挥作用的产品决策。

共享指南定义

  • 身份与语义语言
  • 设计基础与无障碍
  • 共享组件行为
  • 构图约束
  • AI 原生信任与权限

服务自行定义

  • 信息架构
  • 产品语气与内容
  • 领域组件与数据密度
  • 工作流与用户意图
  • 服务专属布局
  • 经过验证的例外与演示