阿栗AI 设计规范.

# 阿栗AI 设计规范

版本：v1.1 · 2026-10-15

此文档记录当前网站设计基线。互动示例见 design.html。

## 01 设计原则

用少量、明确的规则，让每一页都像同一个产品。

LINE

### 细线建立秩序

分隔、边界与图标优先用线表达。大面积阴影和厚重描边不承担结构。

WEIGHT

### 价格以字重表达

把注意力留给金额、模型名称和主操作。正文保持轻、清楚、有层次。

COLOUR

### 纯色划分区域

橙、蓝、黑、白构成主视觉。通过底色与留白分区，不引入渐变。

CONTENT

### 内容先于装饰

供应商、具体型号、订单与价格可被快速找到，装饰始终服从使用任务。

### 继续使用

- 细线条、平面色块、小面积圆形与轨道线。
- 一个区域只强调一个主操作。
- 需要比较的信息以列表、表格和对齐的数字呈现。

### 避免使用

- 渐变、玻璃拟态、霓虹、多套装饰色同时出现。
- 大面积品牌色堆叠，掩盖正文或打乱阅读顺序。
- 为了视觉统一改写既定商品文案或价格。

## 02 品牌与形象

采用已确认的圆润 ali 字形，i 顶部保留机器人双眼。保留字形、笔画比例与字母间距，只调整配色。

| 项目 | 使用规则 |
| --- | --- |
| 网站名称 | 完整写法为「阿栗AI」，页面标题采用「页面名 · 阿栗AI」。 |
| 页头组合 | ali 标识容器桌面 80 × 40px；手机 68 × 34px；保持原比例，以 contain 放入。 |
| 品牌文字 | 中文品牌名约 18px / 700，AI 采用较轻字重，与 ali 标识并排使用。 |
| 标准配色 | a、l 为墨黑 #19191b；机器人 i 的头部与竖笔为品牌蓝 #2a74db。 |
| 安全空间 | 标志周围至少预留 12px；不得拉伸、旋转或叠加滤镜改色。 |
| 深色适配 | 深色页头与黑色页尾采用纯品牌蓝版本，搭配浅色站名，不增加底板。 |
| 小尺寸入口 | 页签、联系入口与票据使用同系列机器人 i 简版，保留双眼与圆角特征。 |
| 插图与厂商品牌 | 小牛用于辅助插画；供应商 logo 保留原色，业务主色保持橙、蓝、黑、白。 |

首屏品牌形象受容器约束，不挤占文字与内容。

### UI 设计资源

设计规范页面的品牌章节提供 12 份透明 PNG，支持按品牌标识、平面阿栗、立体阿栗分类，切换深浅预览背景，查看原图、逐项下载或下载完整素材包。

| 阿栗动作 | 文件 | 推荐用途 |
| --- | --- | --- |
| 阿栗 · 欢迎 | ali-welcome.png | 首页欢迎、产品介绍 |
| 阿栗 · 会员 | ali-membership.png | 会员选购、商品介绍 |
| 阿栗 · 开发 | ali-developer.png | AI 中转站、开发者服务 |
| 阿栗 · 阅读 | ali-reading.png | 接入文档、学习引导 |
| 阿栗 · 帮助 | ali-support.png | 联系我们、服务帮助 |
| 阿栗 · 完成 | ali-success.png | 完成提示、成功状态 |

三类入口首屏采用左文右图：左侧放标题、说明与主要操作，右侧以完整阿栗形象为中心，四个小型业务标签通过细线与节点衬托。标签只保留名称与一行短说明，不展示大段正文或独立操作栏；桌面标题 13px、辅助信息 9px、标签宽度不超过 136px。悬停或键盘聚焦标签时，对应连线同步强调。连线两端使用实际 DOM 连接点，随窗口、容器、图片和字体变化重新测量 SVG 坐标，避免断点缩放导致错位。保留原有细折线、圆角转折和小端点，仅叠加短段蓝 / 橙流光，沿同一路径从标签流向形象，0.54 秒错峰循环（原速度的 10 倍）；暂停图标在悬停图内或键盘聚焦时出现，遵循减少动态效果偏好，页面隐藏或形象离屏时暂停。无 JavaScript 时隐藏尚未测量的连线，入口与图片照常可用。首页关联会员、中转站、模型与工作台，次主页使用各自相关的业务内容。手机上下排列，图内仍使用轻量标签与完整形象。图片保持原始 1:1 比例、自动高度与安全留白。首屏底色直接跟随站点 --paper：浅色为纯白 #FFFFFF，深色为 #121316。深色模式的形象承托面使用纯白，保留黑白轮廓。

## 03 色彩规范

主色少而明确，文本、边线和底色通过语义变量取值。

品牌橙`#F37021`版块点缀、选中胶囊与少量视觉重心点击复制色值 ⧉品牌蓝`#2A74DB`主要操作、链接与 API 服务入口点击复制色值 ⧉墨黑`#19191B`文字、反色区域与细线图形点击复制色值 ⧉纯白`#FFFFFF`留白、卡片和深色区域的文字点击复制色值 ⧉
- 橙色通常配墨黑文字；品牌蓝上的主操作配白字。
- 黑色页尾和联系悬浮按钮固定使用 #000000，不随主题反转为白色。
- 大片品牌色应有明确功能。形象区只保留容器内的有限色块，不向视口边缘溢出。
- 灰色用于层次，不增加绿色、紫色等新的业务主色。状态必须同时提供文字。

主操作蓝 #2A74DB 配白字的对比度约 4.55:1；品牌橙 #F37021 配墨黑 #19191B 约 5.98:1。数值来自固定色值计算，不等于所有页面已完成视觉验收。

## 04 明暗主题与变量

主题切换改变语义底色和文字；品牌主操作、黑色页尾和黑色联系入口保持稳定。

LIGHT / 浅色
让层次来自边线。
白色画布、轻分隔、蓝色操作。
主要操作 →
DARK / 深色
让阅读保持清楚。
深色画布、浅色文字、稳定主色。
主要操作 →

| 语义变量 / 用途 | 浅色模式 | 深色模式 |
|  --- |  --- |  --- |
| `--paper`页面底色 | `#FFFFFF`⧉ | `#121316`⧉ |
| `--card`卡片底色 | `#FFFFFF`⧉ | `#1B1D22`⧉ |
| `--surface`功能页底色 | `#F8F8FA`⧉ | `#15171B`⧉ |
| `--subtle`次级底色 | `#FAFAFC`⧉ | `#22252B`⧉ |
| `--ink`主要文字 | `#19191B`⧉ | `#EEEEF2`⧉ |
| `--body-text`阅读正文 | `#50505B`⧉ | `#C4C7D0`⧉ |
| `--muted`辅助文字 | `#6F6F7B`⧉ | `#A8ACB7`⧉ |
| `--line`分隔线 | `#E1E1E7`⧉ | `#343840`⧉ |
| `--accent`主题链接 / 焦点 | `#2A74DB`⧉ | `#78ADFA`⧉ |
| `--accent-pale`浅蓝底色 | `#F4F7FC`⧉ | `#19283E`⧉ |
| `--accent-line`蓝色边线 | `#AAC6EE`⧉ | `#496B9D`⧉ |
| `--action-bg`主要操作底色 | `#2A74DB`⧉ | `#2A74DB`⧉ |
| `--on-accent`蓝底文字 | `#FFF`⧉ | `#FFF`⧉ |
| `--night`反色面板 | `#19191B`⧉ | `#19191B`⧉ |
| `--yellow`品牌橙（沿用变量名） | `#F37021`⧉ | `#F37021`⧉ |

历史变量 --yellow 对应实际品牌橙 #F37021。新增主题色优先使用语义变量，不在业务组件里堆叠临时 HEX。

当前主题 CSS 变量 浅色复制当前主题 ⧉

- 首次按系统主题展示；用户主动选择后跨页面保存。
- 深色模式的链接蓝为 #78ADFA；主按钮底色仍为 #2A74DB，避免白字落在过浅的蓝色上。
- 首页浅蓝信息区为 #EDF3FC，深色为 #18283E；局部链接可用更清楚的对比色。
- 公告在浅色模式为 #19191B，在深色模式为 #272C35，并保留细边线，避免与页面混成一片。

## 05 字体与数字

层级来自字号、字重和对齐，不依赖额外装饰字体。

TYPE / HEADING / NUMBER
清楚，就是一种力量.

¥148价格以较高字重呈现
金额对齐，单位保持清楚

| 场景 | 现有规格 | 使用要求 |
|  --- |  --- |  --- |
| 首页主标题 | 62px / 600；中屏约 49px；手机约 43px | 标题可自然换行，不用 nowrap 强行撑开手机页面。 |
| 功能页主标题 | 模型 / 状态 / 文档约 38px；会员页 52 → 44 → 34px | 页面只保留一个 h1。 |
| 分区标题 | 24–30px / 550–600 | 先表达这一段能做什么。 |
| 模型名称 / 卡片标题 | 模型约 13–15px / 600；会员约 20–22px / 600 | 具体型号完整可读，避免只显示系列大类。 |
| 会员价格 | 常规 48px / 750；宽屏约 52px | 货币符号小于金额，数字启用等宽数值。 |
| 正文 / 表格 | 正文以 12–14px 为主，表格与辅助信息约 10–12px | 正文行高约 1.8–1.9；关键信息不用装饰性小字号。 |
| 英文序号 / 微型标签 | 约 7–10px，适量字距 | 只用于不承担关键含义的辅助标记。 |
| ID / 代码 / 计量 | 系统等宽字体 / tabular-nums | 模型 ID、请求 ID、金额和延迟保持稳定对齐。 |

字体栈：Inter、Helvetica Neue、Arial、PingFang SC、Microsoft YaHei、sans-serif。当前页面不额外加载商业字体；字体可用性决定实际回退。

## 06 布局、间距与边界

色块可以有层次，内容必须在可靠的容器里排版。

4`4px`
8`8px`
12`12px`
16`16px`
20`20px`
24`24px`
28`28px`
32`32px`
40`40px`
48`48px`
64`64px`

| 结构 | 现有规格 / 准则 |
|  --- |  --- |
| 页面容器 | 默认最大宽 1280px，宽屏 ≥1600px 时为 1400px；数值包含左右内边距。 |
| 左右留白 | 常规 40px；≤1100px 为 28px；≤580px 为 20px；≤360px 为 15px。 |
| 间距基准 | 以 4px 为基准，常用 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64px。 |
| 栅格 | 弹性列使用 minmax(0, 1fr)，子项必要时设置 min-width: 0。 |
| 形象与装饰 | 绝对定位只在 position: relative 的专用画布内使用；画布设置 overflow: hidden。 |
| 通栏色块 | 外层 section 承担背景，内层容器承担内容；不使用负边距强行把形象图推出页面。 |
| 长内容 | 长模型 ID 可换行；数据表格和代码块使用独立横向滚动区域。 |

CONTENT CONTAINER形象留在边界内。
装饰可以被容器裁切，正文和操作必须完整可见。

| 变化点 | 响应行为 |
|  --- |  --- |
| ≤1180px | 页头可分两行；主题按钮保持可见。 |
| ≤700px | 主导航允许横向滚动，不将每个入口压得过小。 |
| 会员卡片 | 常规 3 列；≤860px 为 2 列；≤580px 为 1 列。 |
| 模型目录 | 常规 4 列；≤1000px 为 3 列；≤720px 为 2 列。 |
| ≤760px / ≤520px | 首页首屏改为单列；窄屏产品与信息卡片依页面规则逐步收为单列。 |
| 验收视口 | 至少检查 320 / 375 / 768 / 1280px，以及长标题和长 ID 场景。 |

## 07 线条、圆角与图标

用细节形成一致性，避免每个模块拥有不同的装饰语言。

STROKE

边框 1px
图标约 1.2–1.5px
键盘焦点 2px

RADIUS

控件 2–4px
卡片 4–8px
胶囊与圆形按用途保留

ICON

圆头、圆角、线性图标
一般 16–24px
操作含义同时有文字或标签

- 普通输入控件约 3px，模型卡片约 4px，工作台卡片约 6px，会员卡片约 8px。
- 边线主要使用 --line；选中、悬停或聚焦时再使用蓝色。
- 阴影集中用于悬浮联系、模态浮层和轻微悬停，不把所有模块做成厚重浮卡。
- 动效通常为 150–200ms；折叠约 280ms；尊重减少动态效果偏好。

## 08 按钮、导航与筛选

主次清楚、选中可见，并让键盘用户知道焦点在哪里。

BUTTON / 实际可操作示例Tab 查看焦点
主要操作 次要操作 复制模型 ID ⧉暂不可用

| 组件 | 准则 |
|  --- |  --- |
| 主要按钮 | 一个任务区域一般一个；品牌蓝底白字，动词在前。 |
| 次要按钮 | 描边或文字形式；对取消、返回、查看使用较轻层级。 |
| 购买按钮 | 沿用会员卡片中的原始文案和价格，不为演示规范改写。 |
| 导航 | 当前页有文字强调与细选中线；手机横向滚动，不能依赖 hover 才能找到入口。 |
| 焦点 / 禁用 | 焦点为 2px 轮廓并留 3–5px 偏移；禁用使用真实 disabled，文字说明原因。 |
| 筛选 | 展示当前选择、结果数量与清空入口；分类与搜索共同生效。 |

FILTER / 模型类型清除筛选

全部文本图片视频搜索示例模型
OpenAI / 文本GPT-4.1Anthropic / 文本Claude Sonnet 4.5OpenAI / 图片GPT Image 2Google / 图片Gemini 3.1 Flash ImageGoogle / 视频Veo 3.1Google / 视频Veo 3.1 Fast
6 个模型示例

没有匹配结果，试试其他关键词或清除筛选。

## 09 表单与输入

先说明需要什么，再输入；错误紧贴字段，不让用户猜。

FORM / 只做页面内验证不会发送信息

联系邮箱 必填
用于演示标签、帮助文字与错误提示的位置。

请输入有效的邮箱地址。

使用场景个人使用应用开发团队协作消息提醒
验证表单
- 每个输入有持续可见的 label；placeholder 只给例子，不替代标签。
- 说明输入用途、格式和单位；必填以文字标明，不只依靠星号或颜色。
- 错误同时使用说明文字、字段状态与 aria-invalid，并关联 aria-describedby。
- 涉及 Session、密码和 API 密钥时，不把敏感信息放进无关咨询或前端展示中。
- 查询、筛选与验证反馈不伪装成实际提交；Demo 清楚说明是否保存、发送或扣款。

## 10 卡片、价格与数据

会员看方案和价格；模型先看供应商与具体名称，再看介绍与费用。

01 / CHATGPT热销


ChatGPT Plus
需提供账号 Session


¥148

付款后自动开通


- 订单页与邮件各存一份
- 不用注册，凭邮箱就能查订单
- 订单内可申请发票

          立即购买


### 原会员卡片

这是当前会员页中的原始卡片。标题、价格、交付说明和权益保持原样；本页按钮仅打开组件演示。

- 会员价格为主要视觉，字段与权益保持固定顺序。
- 模型以供应商分组，分类为文本 / 图片 / 视频，名称完整且容易扫读。
- 模型卡片保持紧凑，补充简短介绍；价格仍展示，复杂参数放入详情。
- 文本按 ¥ / 1M Tokens 展示输入、输出、缓存读取与缓存创建；图片按档位与次计费。
- 未知价格显示「—」，并说明为待配置；不当作 0 或免费。

| 计费项 | 排版示例 | 单位 |
|  --- |  --- |  --- |
| 输入价格 | ¥0.231 | / 1M Tokens |
| 输出价格 | ¥1.155 | / 1M Tokens |
| 缓存读取 | ¥0.023 | / 1M Tokens |
| 缓存创建 | ¥0.289 | / 1M Tokens |
| 图片 4K / 2K / 1K / 默认 | ¥0.18 / ¥0.15 / ¥0.12 / ¥0.12 | / 次 |

上述数字是用户提供的计费排版示例，不对应额外新增的正式报价。不能混用 Token 单价、图片次数与视频时长。

| 供应商 | 具体模型 | 能力 | 展示状态 |
|  --- |  --- |  --- |  --- |
| OpenAI | `gpt-4.1` | 文本 | 正常 |
| Google | `gemini-3.1-flash-image` | 图片 | 波动 |
| Google | `veo-3.1-generate-preview` | 视频 | 暂无样本 |

表格状态仅为组件样例。金额和时长右对齐，ID 可复制；成功率附样本与时间范围，文本首 Token 延迟和图片 / 视频完成耗时分开说明。

## 11 反馈、公告与浮层

重要入口稳定可见，反馈简短，动态效果可被用户控制。

CONTACT / 固定黑色入口联系我们+
阿栗机器人图标、白色文字和橙色「＋」。浅色与深色页面均保持黑底。

DIALOG & TOAST / 非业务操作
打开对话框 显示反馈 ↗
可关闭、可取消、可键盘操作。确认不会创建订单或发送信息。

公告
浅色页面：近黑底，白色文字，品牌橙标记。

公告
深色页面：较亮炭灰底，细边线保留层次。

| 组件 / 状态 | 规则 |
|  --- |  --- |
| 顶部走马灯 | 高度克制；内容可暂停；悬停和键盘聚焦时暂停；减少动态效果时静态展示，重复副本不重复朗读。 |
| 联系悬浮按钮 | 桌面右下约 24px，手机约 16px，并考虑安全区域；对比栏和提示需避让。 |
| 模态对话框 | 原生 dialog；标题、说明、取消和确认完整；支持 Esc 和关闭按钮。 |
| 轻提示 | role=status / aria-live=polite；成功、失败都说明结果，不声称未发生的动作。 |
| 加载 / 空 / 错误 | 分别说明正在做什么、为什么没有内容、如何重试；错误不显示成空列表。 |
| 状态标记 | 正常用蓝，波动用橙，中断用墨色，未知用空心标记；都提供状态文字。 |
| 层级 | 轻提示 z-index 10，联系入口 20；模态使用原生 top layer，避免被普通页面覆盖。 |

FAQ 与折叠说明 +
问题是完整可读的按钮或 summary，展开状态可被识别。折叠适合次要说明，不隐藏价格、核心权限或主要操作。

## 12 页面模式与交付标准

### 入口页的首屏右侧

首页、会员与中转站共用 hero-visual.css 中的形象排版：桌面容器不超过 420 × 310px，手机不超过 300 × 240px。阿栗保持原比例，以 contain 放入，背景透明。

三页分别使用欢迎、会员和开发动作，保持同一个阿栗、同一种平面画风。首屏右侧只放形象，不增加展示框、网格、连线、背景块或装饰文字。手机下统一放在文案之后。



新增页面沿用现有组件，业务信息与视觉规则一起维护。

| 页面 | 信息组织 | 入口 |
|  --- |  --- |  --- |
| 官网首页 | 产品入口、模型发现、工作台与团队信息；用有限色块形成阅读节奏。 | 查看页面 ↗ |
| 会员选购 | 保留原商品卡片文案；首张可见商品的中点作为橙底起点。 | 查看页面 ↗ |
| AI 中转站 | 体验、接入示例与额度入口；配置和演示能力清楚标记。 | 查看页面 ↗ |
| 模型广场 | 按供应商呈现具体模型；搜索、分类、介绍、价格、详情与对比。 | 查看页面 ↗ |
| 模型状态 | 按具体型号展示成功率、延迟、样本口径与历史；无样本不视作失败。 | 查看页面 ↗ |
| 个人工作台 | 订单包含会员、卡密、额度与其他购买；再管理密钥、日志、账单和账号。 | 查看页面 ↗ |
| 文档中心 | 列表页与单篇阅读分开；内容来自 Markdown，含搜索、代码复制与源文件下载。 | 查看页面 ↗ |
| 联系我们 / 加入我们 | 咨询草稿与职位方向；未配置渠道或正式职位时如实说明。 | 查看页面 ↗ |

### 其他复用组件

| 组件 | 使用要求 |
| --- | --- |
| 搜索 / 排序 / 收藏 | 结果数量随条件更新；收藏给出选中状态；排序口径清楚，清空后回到可理解的默认状态。 |
| 模型对比栏 | 最多选择 3 个具体型号；可移除、清空与查看对比；固定栏避让右下联系入口。 |
| 分页 | 同时展示结果总数与当前页；首页禁用上一页，末页禁用下一页；筛选改变后校正页码。 |
| API 密钥 | 默认遮罩；查看、复制、停用按明确权限操作；说明密钥状态，不把无效 Demo Key 表达成真实可用。 |
| 代码与 Markdown | 保留换行、缩进和完整模型 ID；语言标签与复制结果一致；长行在代码区域横向滚动。 |
| 图表与历史状态 | 给出指标、单位、时间范围与样本口径；没有样本与失败分开；图例同时用文字和视觉标记。 |
| 额度与金额选项 | 预设金额是单选；自定义金额的整数与上下限在字段旁说明；确认前展示选中额度。 |
| 个人资料与偏好 | 保存、取消、开关状态各自清楚；Demo 只说明实际发生的本地变化，不声称已发送通知。 |
| 招聘与咨询 | 职位方向可筛选与展开；投递入口携带所选方向；未配置联系渠道时展示草稿状态。 |


### 每次改版，都检查这些

- 使用正确品牌名称和 logo；页尾与联系入口保持黑色。
- 明暗主题都检查文字、分隔、表单和选中状态。
- 320 / 375 / 768 / 1280px 下没有意外横向溢出，形象与装饰受容器约束。
- 确认商品文案与价格没有在视觉修改中变化。
- 测试筛选交集、空结果、复制失败、错误重试、关闭和返回入口。
- 验证键盘焦点、可见标签、动态效果偏好，以及表格和代码的横向滚动。
- 区分静态 / 代码校验与浏览器视觉验证；未完成的验证应如实说明。

此页是当前 Demo 的设计基线 v1.1，更新于 2026-10-15。后续修改色值、组件或规则时，同步维护规范与导出文件。

## 颜色变量速查

| 变量 | 浅色 | 深色 |
| --- | --- | --- |
| `--paper` | `#ffffff` | `#121316` |
| `--card` | `#ffffff` | `#1b1d22` |
| `--surface` | `#f8f8fa` | `#15171b` |
| `--subtle` | `#fafafc` | `#22252b` |
| `--ink` | `#19191b` | `#eeeef2` |
| `--body-text` | `#50505b` | `#c4c7d0` |
| `--muted` | `#6f6f7b` | `#a8acb7` |
| `--line` | `#e1e1e7` | `#343840` |
| `--accent` | `#2a74db` | `#78adfa` |
| `--accent-pale` | `#f4f7fc` | `#19283e` |
| `--accent-line` | `#aac6ee` | `#496b9d` |
| `--action-bg` | `#2a74db` | `#2a74db` |
| `--on-accent` | `#fff` | `#fff` |
| `--night` | `#19191b` | `#19191b` |
| `--yellow` | `#f37021` | `#f37021` |

## 阿栗AI 品牌素材

- 黑蓝标识：ali-logo-v3.png，墨黑 a、l 与蓝色机器人 i，用于浅色背景。
- 品牌蓝标识：ali-logo-blue-v3.png，纯品牌蓝 ali 字标，用于深色背景。
- 机器人图标：ali-icon-v3.png，用于页签和小尺寸入口。
- 牛头头像：ali-cow-logo.png。
- 扁平插画：ali-flat.png，保留使用笔记本电脑的角色姿态，蓝色领带。
- 立体形象：ali-mascot.png，保留绒毛材质，蓝色领带。

以上均为透明背景 PNG，可在设计规范页下载。

## 商品、支付与票据

列表按钮为「查看商品」，详情页按钮为「立即购买」。订单创建后进入独立支付页；支付宝、微信、USDT 共用布局和状态规范。付款成功后返回订单页，弹出账单与发货信息。

票据采用白色纸面、虚线分隔、等宽数字、加粗实付金额与锯齿底边。发货凭证与付款状态分别展示，支持复制、重开和打印。当前为本地演示，不会产生真实付款或邮件发送。

商品正文使用一个完整 Markdown 内容字段，自然段直接展开，不要求商家逐项配置场景、参数、准备资料和 FAQ。支付结果查询只读取状态，过期与关闭订单提供重新下单入口；付款与交付状态分别显示。票据支持仅打印收据或连同发货信息一起打印。