ARTICLE · 1106978
Aham UI v7.3:ToB 管理软件的界面规范
Aham UI v7.3 包含一套 ToB 管理软件的界面规范，覆盖列表、详情、单据、设置和 AI 协作。
这套规范的布局、交互和字体栈按 Linear 的做法，颜色、形状、字号和字重使用 Aham 的取值。
文中截图都取自仓库里的示例页，客户、人员和金额都是虚构的。
01 · 分工
Aham 与 Linear 的分工
两者冲突时，颜色、形状、字号和字重按 Aham，字体栈、布局、交互和键盘操作按 Linear。
图 1 · Aham 与 Linear 的分工
例外有两处：筛选条件用胶囊形，Aham 的标签是 6px 圆角；⌘K 面板位于屏幕中间偏上。这两处沿用 Linear 的形状，其余标签和弹层仍用 Aham 的圆角。
西文用 Inter Variable，并开启 cv01 和 ss03 两个字形特性；中文回退到苹方或微软雅黑。数字和代码用等宽字体 Berkeley Mono，没有购买授权时显示为 JetBrains Mono。字重只用 400、500、600 三档。
图 2 · 文本样式：11 种字号与字重组合
截图在 Mac 版 Chrome 中截取，中文显示为苹方。在 Windows 上，中文会显示为微软雅黑，字形和截图不同。
主按钮底色是 #164EC3，白字对比度 7.21:1。键盘焦点是 2px 蓝色实线框，对比度 4.63:1。规范列出的 30 组文字和控件配色，对比度都达到 WCAG 的最低要求：文字 4.5:1，焦点和控件边界 3:1。
02 · 列表
列表页、筛选与批量操作
导航展开 240px、收起 52px。页眉是 40px 高的横条，每页一到两条。列表行高 36px，紧凑模式下是 32px，正文字号 13px。
图 3 · 列表页：页眉下方是四段式筛选条件
点「筛选」按钮，在命令菜单里选择字段，再勾选取值，页眉下方就会显示条件标签。每个标签分四段：字段、关系、取值和删除按钮。
筛选条件写在网址里。同事打开同一个链接时，看到的是同一组结果。
图 4 · 显示选项：分组、排序、行高和显示属性
「显示」弹层宽 320px，可以设置分组、排序、行高和要显示的列。修改后立即生效，设置保存在当前浏览器里，换一台电脑需要重新设置。
图 5 · 勾选 3 条记录后的批量条
勾选记录后，页眉第 2 条换成批量条，显示已选条数、分配负责人、导出和删除。删除用红色文字按钮，点击后弹出确认框，焦点默认落在「取消」上。
03 · 键盘
命令面板、快捷键与右键菜单
图 6 · ⌘K 命令面板，操作按组列出
按 ⌘K 打开命令面板，页面上的每个操作都能在面板里搜索到。鼠标在按钮上停留 0.5 秒后显示提示，提示中列出这个按钮的快捷键。
在列表中，↑↓ 移动当前行，空格打开预览，Enter 打开记录，x 勾选当前行，Shift 加 ↑↓ 连续勾选。
图 7 · 行右键菜单，每一项标出快捷键
在行上点右键，菜单列出改阶段、改负责人、打开、预览、勾选、复制编码和删除，每一项都标出快捷键。键盘上按 Shift + F10 也能打开这个菜单。
单键快捷键可以在设置里整体关闭，避免语音输入误触发。关闭后，⌘ / Ctrl 组合键和列表里的方向键仍然可用。
04 · 详情
记录详情与单据
图 8 · 记录详情：正文居中，属性栏在右
详情页正文宽 720px、居中，右侧是 240px 的属性栏，属性可以就地修改。页眉显示当前记录在列表中的序号，切换上一条或下一条时不需要返回列表。
图 9 · 销售报价单：明细表、报价汇总、收款计划和审批流程
单据页左侧是基本信息和可编辑明细表，右侧是报价汇总、收款计划和审批流程。明细表只有横线，数字右对齐，金额不截断成省略号。
汇总金额和明细用同一份数据计算，不单独存一份金额。示例的收款计划分 40%、40% 和余款三期，尾差计入最后一期。
示例里的审批是模拟的，页面上标着「模拟审批」。产品上线真实审批时，需要接入服务器确认和审计记录。
05 · AI
AI 协作的规则
图 10 · AI 生成结果的五种状态
AI 的入口有两处：⌘K 面板里的「AI」分组，以及页面上的就地按钮，比如详情页的「生成摘要」。
生成的内容都带 AI 标记和依据，依据写明引用了哪条记录、哪天的跟进。生成过程可以停止；生成失败时显示原因，并提供重试。
AI 修改数据前，界面必须弹出确认框，列出每个字段修改前后的值。修改后可以撤销。字段建议每次只显示一条。
首次使用前需要用户同意，确认框说明会发送哪些内容。AI 功能默认关闭，用户同意并开启后才调用模型服务。
这套规范本身不调用任何模型。示例中的 AI 文字是本地的固定文本，只用于演示状态。产品接入 AI 时，模型服务和鉴权方式由产品自行选择。
06 · 设置
设置页与深色模式
图 11 · 设置页：左侧分组导航，右侧设置行
设置页左侧是 240px 的分组导航，右侧内容最宽 720px。每一行左边是标题和说明，右边是开关、下拉框或分段按钮，修改后立即生效。
恢复默认、删除工作区这类操作放在最后一个分区，按钮用红色文字，点击后弹出确认框。
图 12 · 深色模式下的列表页
主题有浅色、深色和跟随系统三档。系统开启「增强对比度」时，控件边界的对比度提高到 3.45:1；界面动画也跟随系统的「减少动态效果」设置。
