wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
161 lines
11 KiB
Markdown
161 lines
11 KiB
Markdown
# 穿山甲 VPN · Pangolin VPN — Design System
|
||
|
||
> 极简、轻量、亲和的跨平台网络加速品牌设计系统。暖大地色(穿山甲鳞甲)+ 大量留白 + 双语界面。
|
||
|
||
这是一套**从零创建**的品牌设计系统(无既有代码库 / Figma / Logo 输入)。所有视觉决策记录于本文件,所有 token 见 `colors_and_type.css`,可预览的卡片在 `preview/`,可拼装的高保真界面在 `ui_kits/`。
|
||
|
||
---
|
||
|
||
## 1. 产品语境 Product Context
|
||
|
||
**穿山甲(Pangolin)** 是一款面向大众的消费级网络加速应用。核心价值主张:**一键连接、智能选线、即开即用**。品牌人格定位为「极简轻量、亲和易用」——不堆砌技术参数,不制造焦虑,用干净的留白和温暖的大地色传递「顺畅又轻松」的感觉。
|
||
|
||
> 脱敏说明:面向国内市场,品牌与宣传统一定位为「网络加速 / 体验优化 + 隐私保护」,**不使用「VPN / 翻墙 / 窜 / 自由穿越」等敏感词**。产品主名统一为「穿山甲」(不带 VPN 后缀);VPN 仅在必要技术文档出现。
|
||
|
||
名字 **穿山甲(Pangolin)** 取鳞甲「防护 / 安全」之意。视觉系统提炼出**行走穿山甲**剖面作为核心图形母题。
|
||
|
||
### 覆盖的产品界面(UI Kits)
|
||
1. **移动 App**(iOS / Android)—— 登录/注册、首次引导、连接主界面、服务器列表、统计、账户中心(套餐/设备/兑换/联系)。`ui_kits/mobile/`
|
||
2. **桌面客户端**(Windows / macOS)—— 登录/注册、首次引导、连接面板、节点、统计、账户中心、联系我们、设置。`ui_kits/desktop/`
|
||
3. **iPad 客户端** —— 侧栏分栏布局(连接/节点/统计/账户),触控尺寸,复用移动端原子。`ui_kits/tablet/`
|
||
|
||
> 用户后台(账户 / 套餐 / 设备 / 兑换)已**直接集成进移动与桌面客户端**(因支付走外部渠道,独立 Web 后台冗余,故不再单列)。
|
||
|
||
### 生产前端:Flutter
|
||
生产代码使用 **Flutter**。设计令牌的 Dart 版本见 `flutter/pangolin_theme.dart`(与 `colors_and_type.css` 一一对应:颜色、间距、圆角、动效、文字、明/暗 `ThemeData`)。`ui_kits/` 的 React/HTML 为**视觉规范参考**,Flutter 实现以其为蓝本。详见 `flutter/README.md`。
|
||
|
||
### 输入来源 Sources
|
||
- **无外部素材**。本系统完全从品牌简述「穿山甲 vpn软件」与一轮用户访谈问题推导而来。
|
||
- 若后续有真实 Logo / Figma / 代码库,请通过 Import 菜单附上,我会据此校准。
|
||
|
||
---
|
||
|
||
## 2. 内容基础 Content Fundamentals
|
||
|
||
界面为**中英双语**,中文为主、英文为辅。**重要:真实产品在任一时刻只显示一种语言**——用户在设置/账户页通过「中文 / EN」段控切换,中英不会同时出现。设计系统 `preview/` 卡片里出现的中英并排,仅用于同时展示两套字体规范(specimen),不代表产品 UI。三个 UI Kit 均已实现单语言切换。
|
||
|
||
- **人称**:对用户用「你」,自称用「我们」。亲切、平等,不端着。例:「我们不记录你的浏览数据」。
|
||
- **语气**:简短、肯定、轻松。动词开头的祈使句优先:「一键连接」「选择节点」「立即升级」。
|
||
- **大小写**:英文标题用 Title Case 或全大写小字 overline(`PANGOLIN`、`ACCOUNT`);正文句首大写。中文不加句号于短标题/按钮。
|
||
- **数字与单位**:数据读数用等宽字体,数值大、单位小且着 clay 主色(`86.4 Mb/s`、`24 ms`)。
|
||
- **Emoji**:**不使用** emoji 作装饰。状态一律用「色点 + 文字胶囊」表达。
|
||
- **专业术语**:保留行业通用英文词(WireGuard、Kill Switch、P2P),不强行翻译,降低理解成本。
|
||
- **Vibe**:像一位靠谱又不啰嗦的朋友。文案示例:
|
||
- 连接态:`已连接 Connected` / `连接中 Connecting` / `未连接 Off`
|
||
- 营销:`极速畅连 Smooth`、`极速 · 稳定 · 省心`
|
||
- 隐私承诺:`我们不记录你的浏览数据 · 端到端加密`
|
||
|
||
---
|
||
|
||
## 3. 视觉基础 Visual Foundations
|
||
|
||
### 色彩 Color
|
||
- **主色 Clay / Copper**(`--clay-500 #B96A3D`):温暖的黏土铜色,呼应穿山甲鳞甲与大地。用于主按钮、强调、链接、选中态。完整 50–900 色阶见 token。
|
||
- **中性 Sand / Taupe**:暖灰中性 50–950,承担文本与表面。`--sand-950 #14110E` 是深色画布(暖 espresso,**非纯黑**——保持温度)。
|
||
- **语义色**(大地调校):`success #5B8C5A`(连接/安全)、`warning #D69A3C`(连接中)、`danger #C0533B`(断开/错误)。各配 `*-subtle` 浅底。
|
||
- **双主题**:浅色以沙米白(`--sand-50`)为画布、纯白为卡面;深色以暖 espresso 为画布、`#221E19` 为卡面。切换方式:`<html data-theme="dark">`。**所有颜色都走语义 token,组件天然双主题。**
|
||
- **影像基调**(若引入照片):偏暖、自然光、低饱和大地色,可加细微胶片颗粒;避免冷色与高对比霓虹。
|
||
|
||
### 字体 Type
|
||
- **Display — Sora**(600/700):标题、营销大字、Logo 字标。几何但不冰冷。
|
||
- **Body / UI — Manrope**(400–700):界面与正文主力。
|
||
- **CJK — Noto Sans SC**(400/500/700):中文专用伴随字体,与上面两者度量协调。
|
||
- **Mono — JetBrains Mono**:IP、速率、时长、密钥等数据读数,启用 tabular nums。
|
||
- 字阶:48 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12。标题字距收紧(-0.02em),overline 字距放宽(0.08em)。
|
||
- ⚠️ **字体说明**:四款均为开源字体(Google Fonts),作为本品牌**正式选定**字体,非临时替代。若你已有授权品牌字体,告诉我替换。
|
||
|
||
### 间距与网格 Spacing
|
||
- **4px 基准网格**。常用:4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。
|
||
- 留白慷慨——这是「极简轻量」气质的关键,卡片内边距偏大(16–24px),区块间距 32–48px。
|
||
|
||
### 圆角 Radius
|
||
- 偏大圆角传递亲和:`sm 6 / md 10 / lg 14 / xl 20 / 2xl 28 / full`。
|
||
- 按钮多用 `full`(胶囊);卡片用 `lg`–`xl`;输入框用 `md`。
|
||
|
||
### 阴影与高度 Elevation
|
||
- 暖色调投影(`rgba(45,30,20,…)`),**柔和克制**,不用冷灰阴影。
|
||
- `sm` 卡片静置、`md` 浮起卡片/按钮悬浮、`lg` 弹窗/抽屉、`xl` 模态。
|
||
- 深色主题下投影改为深黑透明并加强。
|
||
- **焦点环**:`0 0 0 4px var(--ring)`(clay 半透明),用于输入与可聚焦元素。
|
||
|
||
### 边框 Borders
|
||
- 细边 1–1.5px,色用 `--border`(浅:sand-200 / 深:白 10% 透明)。强调边 `--border-strong`。
|
||
- 卡片优先「`surface` + `shadow-sm` + 极淡边框」组合,而非重边框。
|
||
|
||
### 动效 Motion
|
||
- 缓动:进出场用 `--ease-out cubic-bezier(.22,1,.36,1)`,状态切换用 `--ease-in-out`。
|
||
- 时长:`fast 140ms`(hover/press)、`base 220ms`(开关/展开)、`slow 360ms`(页面/抽屉)。
|
||
- 风格:**淡入 + 轻微位移**为主,无浮夸弹跳。连接中状态用环形 loader 旋转;连接成功用色环扩散(`box-shadow` 外环)。
|
||
|
||
### 交互态 States
|
||
- **Hover**:主色按钮加深一档(`--accent-hover`);幽灵按钮显示 `--accent-subtle` 浅底;列表行显示 sand 浅底。
|
||
- **Press**:轻微缩放(`scale .97`)+ 再深一档(`--accent-press`)。
|
||
- **Focus**:clay 焦点环(见上)。
|
||
- **Selected**:`--accent-subtle` 底 + clay 文字/勾选。
|
||
- **Disabled**:sand-200 底 + sand-400 字,`not-allowed`。
|
||
|
||
### 透明与模糊 Transparency / Blur
|
||
- 克制使用。仅用于:导航/工具栏滚动时的毛玻璃(`backdrop-filter: blur(12px)` + 表面色 80% 透明)、模态遮罩(`--overlay`)。
|
||
- 不做大面积玻璃拟态。
|
||
|
||
### 布局规则 Layout
|
||
- 移动端:顶栏 + 中部巨型连接键 + 底部节点条/Tab,关键操作单手可达。
|
||
- 桌面端:紧凑窄窗(~360–420px 宽),托盘风格;或带左侧栏的标准窗口。
|
||
- Web 后台:左侧导航 + 内容区,最大内容宽度约束(~1080px),大量留白。
|
||
- 固定元素:移动端底部 Tab、桌面端标题栏、Web 顶栏(滚动毛玻璃)。
|
||
|
||
### 背景 Backgrounds
|
||
- 以**纯色画布**为主(沙米白 / 暖 espresso),**不滥用渐变**。
|
||
- 渐变仅出现在:App 图标、PRO 套餐卡、连接成功的氛围光晕等少数强调处,且只在 clay 同色系内(`clay-600 → clay-800`)。
|
||
- 不使用紫蓝渐变、不使用重复纹理贴图。
|
||
|
||
---
|
||
|
||
## 4. 图标系统 Iconography
|
||
|
||
- **图标库:[Lucide](https://lucide.dev)**(细线条、2px stroke、圆角端点)。与「极简轻量、亲和」气质一致。**经 CDN 引入**,非本地字体:
|
||
```html
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
<i data-lucide="power"></i>
|
||
<script>lucide.createIcons()</script>
|
||
```
|
||
在 React/JSX 中可用 `lucide-react` 或直接渲染 `<i data-lucide>` 后调用 `createIcons()`。
|
||
- **常用图标**:`power`(连接)、`shield-check`(已保护)、`globe`(节点)、`zap`(极速)、`settings`、`loader`(连接中,旋转)、`check`(选中)、`chevron-right`、`map-pin`、`user`、`credit-card`。
|
||
- ⚠️ **替代说明**:本品牌无自有图标字体,Lucide 为**选定的最接近匹配**(同等线宽/圆角风格)。如需自有图标集请提供。
|
||
- **国旗/国家**:服务器列表**不用 emoji 国旗**(跨平台渲染不一致),改用 sand 底圆角方块内的 2 字母**国家码**(HK / JP / SG / US),选中态翻转为 clay 底白字。
|
||
- **Unicode 装饰字符**:不使用。
|
||
- **品牌图形**:核心母题为「**行走穿山甲**」(实心鳞甲剪影,朝右),见 `assets/logo-*.svg` 与 `assets/app-icon.svg`,**不要用 emoji 或随手 SVG 替代,直接复制**。
|
||
|
||
---
|
||
|
||
## 5. 资产清单 Assets
|
||
|
||
`assets/` 内:
|
||
- `logo-mark.svg` — 主标记(clay 行走穿山甲,鳞甲剪影,朝右)
|
||
- `logo-mark-white.svg` — 反白标记(深色背景用,奶油色身体 + clay 鳞脊)
|
||
- `logo-mark-mono.svg` — 单色标记(`currentColor`,内联使用时随文字色)
|
||
- `logo-wordmark.svg` — 标记 + 字标横版锁版(穿山甲 / PANGOLIN)
|
||
- `app-icon.svg` — App 图标(clay 渐变圆角方 + 白色穿山甲)
|
||
|
||
> ⚠️ Logo 为本系统**新创建**的图形(用户选择「抽象几何标记 + 字标」,迭代后定为行走穿山甲剪影,朝右)。若你有正式 Logo,请替换 `assets/` 内文件并告知我。
|
||
|
||
---
|
||
|
||
## 6. 索引 Index — 本仓库文件清单
|
||
|
||
| 路径 | 内容 |
|
||
|---|---|
|
||
| `README.md` | 本文件 — 品牌语境、内容基础、视觉基础、图标系统、索引 |
|
||
| `colors_and_type.css` | **唯一真相来源**:色阶、语义 token(浅/深)、字体、字阶、间距、圆角、阴影、动效 |
|
||
| `flutter/` | **生产令牌 + 组件雏形**:`pangolin_theme.dart`(明/暗 ThemeData + 全量令牌)、`widgets/`(连接键/服务器行/套餐卡/按钮/状态胶囊 Dart 雏形)+ 接入说明 |
|
||
| `assets/` | Logo 各变体 + App 图标(SVG) |
|
||
| `preview/` | 设计系统卡片(色彩 / 字体 / 间距 / 组件 / 品牌)— 渲染于 Design System 标签页 |
|
||
| `ui_kits/mobile/` | 移动 App UI Kit(登录/引导/连接/节点/统计/账户中心)|
|
||
| `ui_kits/desktop/` | 桌面客户端 UI Kit(登录/引导/连接/节点/统计/账户/联系/设置)|
|
||
| `ui_kits/tablet/` | iPad 客户端 UI Kit(侧栏分栏布局,复用 mobile 原子)|
|
||
| `ui_kits/website/` | 官网宣传页 UI Kit(产品/定价/下载/文档/Blog,响应式 + 注册引导)|
|
||
| `ui_kits/usercenter/` | Web 用户中心 UI Kit(概览/订阅导入/兑换/邀请返利)|
|
||
| `SKILL.md` | Agent Skill 入口(可下载用于 Claude Code) |
|
||
|
||
每个 `ui_kits/<product>/` 内含 `README.md`、`index.html`(可点击 demo)与若干 `*.jsx` 组件。
|