识策AI · UI 设计规范与跨端扩展方案

本文档定义识策AI产品的视觉规范、核心页面交互、响应式策略、跨端扩展方案及动效/无障碍标准。

一、设计规范

1.1 色彩体系

主色

色值	用途	说明
`#2080F0`	智慧蓝（品牌主色）	按钮、链接、高亮、选中态
`#1060C0`	主色 Hover	按钮悬停、强调交互
`#0D4A99`	主色 Active	按下态
`#E8F2FF`	主色浅底	选中行背景、标签底色

辅助色

色值	名称	用途
`#8B5CF6`	洞察紫	AI 解读结果、语义分析标注
`#06B6D4`	策略青	策略输出、行动建议
`#F59E0B`	预警橙	风险标记、关系变化提示

语义色

色值	语义	用途
`#22C55E`	成功	操作成功、关系正向指标
`#EF4444`	危险	删除、风险预警、关系恶化
`#F59E0B`	警告	需关注、即将过期提醒
`#6B7280`	信息	辅助说明、次要文本

暗色模式对应色

亮色模式	暗色模式	说明
`#FFFFFF` 背景	`#1A1A2E` 背景	页面底色
`#F5F7FA` 次背景	`#16213E` 次背景	卡片/侧栏底色
`#1F2937` 主文本	`#E5E7EB` 主文本	正文文字
`#6B7280` 次文本	`#9CA3AF` 次文本	辅助文字
`#E5E7EB` 边框	`#374151` 边框	分割线、边框
`#2080F0` 主色	`#3B8DF8` 主色	暗色下亮度微调

1.2 字体

css

/* 中文：系统字体栈 */
--font-family-cn: -apple-system, BlinkMacSystemFont,
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
  "Noto Sans CJK SC", sans-serif;

/* 英文 / 数字 */
--font-family-en: "Inter", var(--font-family-cn);

/* 等宽（代码 / 数据） */
--font-family-mono: "JetBrains Mono", "Fira Code", monospace;

层级	字号	字重	行高	用途
H1	28px	700	1.3	页面主标题
H2	22px	600	1.4	区块标题
H3	18px	600	1.4	卡片标题
Body	14px	400	1.6	正文
Caption	12px	400	1.5	辅助说明、时间戳

1.3 间距系统

基于 4px 基础网格：

Token	值	典型用途
`--space-1`	4px	紧凑元素内边距
`--space-2`	8px	图标与文字间距
`--space-3`	12px	列表项内边距
`--space-4`	16px	卡片内边距
`--space-5`	20px	区块间距
`--space-6`	24px	页面内边距
`--space-8`	32px	大区块间隔
`--space-10`	40px	页面顶部留白

1.4 圆角

Token	值	用途
`--radius-sm`	4px	小按钮、标签、输入框
`--radius-md`	8px	中按钮、下拉菜单
`--radius-lg`	12px	对话气泡、弹窗
`--radius-xl`	16px	卡片、面板
`--radius-full`	9999px	头像、胶囊按钮

1.5 阴影层级

css

/* 层级 1 — 卡片静态 */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

/* 层级 2 — 悬浮卡片 */
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

/* 层级 3 — 下拉菜单、弹窗 */
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

/* 层级 4 — 模态对话框 */
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);

二、核心页面交互规范

2.1 Dashboard（仪表盘）

布局：响应式卡片网格（Desktop 3 列、Tablet 2 列、Mobile 1 列）

核心区域：

顶部概览栏：人脉总数、本周新增互动、待处理建议数、订阅状态
数据可视化区：
- 关系健康度雷达图（占位组件，后续接入 ECharts / Chart.js）
- 本周互动频次趋势折线图
- 人脉分类饼图（按标签分布）
快捷操作区：
- "新建人物档案" 主按钮
- "开启 AI 对话" 次按钮
- 最近会话列表（最多显示 5 条）
动态信息流：最新策略建议、关系风险提醒、里程碑事件

交互细节：

卡片支持拖拽排序（桌面端）
数据区域在数据未加载时显示骨架屏
点击数据图表可展开详情面板

2.2 人物档案

视图模式：

列表视图：紧凑模式，每行显示头像、姓名、标签、最近互动时间、重要度
卡片视图：大头像 + 关键信息摘要，网格排列
切换按钮位于工具栏右侧（列表图标 / 网格图标）

搜索与过滤：

顶部搜索框：支持姓名、备注、标签模糊搜索
过滤器下拉：按标签、重要度、最近互动时间筛选
排序：按姓名 / 重要度 / 最近互动时间 / 创建时间

标签管理：

预设标签：同事 朋友 客户 家人 恋爱对象 潜在人脉
支持自定义标签（颜色 + 文字）
标签以胶囊样式展示，可点击筛选

重要度星级：

1-5 星评级，点击即改
星级对应颜色渐变（1星灰色 → 5星金色）

档案详情页：

基本信息区（头像、姓名、关系类型、重要度）
AI 生成的人物画像摘要
关系 Timeline 嵌入
关联对话记录入口

2.3 AI 对话

布局：左右分栏

左侧：会话列表（宽度 280px，可折叠）
- 置顶会话 / 普通会话分组
- 每条显示：关联人物头像、最后一条消息摘要、时间
- 底部 "新建对话" 按钮
- 支持搜索历史会话
右侧：聊天窗口
- 顶部栏：当前关联人物（可点击切换）、场景选择下拉
- 消息区域：气泡样式，用户消息右对齐（浅蓝底），AI 回复左对齐（白底/暗色模式深底）
- 底部输入区：多行文本框 + 发送按钮（Enter 发送，Shift+Enter 换行）

流式输出动画：

AI 回复时显示"正在思考..."占位
文本逐字出现（打字机效果），光标闪烁
Markdown 内容实时渲染（加粗、列表、代码块）

关联人物选择：

对话顶部显示当前关联人物卡片
点击可弹出快速选择器（搜索 + 最近使用列表）
支持多人关联（群体场景分析）

场景选择：

下拉菜单选择场景：恋爱追求 职场沟通 冲突化解 人情世故 新人融入 自定义
选择后 AI 针对场景调整策略风格

画像与档案更新确认（流式回复结束后）：

当后端判定「我的画像」或「关联人脉档案」信息偏空并返回 profileProposal.reason 为 incomplete_self / incomplete_person 时：先居中模态说明可补充资料，次要按钮关闭并清除提案，主按钮进入大卡片刻画确认（列表含该侧全部可编辑字段，多行输入 + 逐行勾选，底栏「暂不应用 / 应用所选」）。
当 reason 为 refinement（精炼补充）时：底部横条提示 + 短倒计时，用户可随时点开同一确认卡；无需先过居中引导。
应用成功后应刷新人脉列表；设置页「我的画像」应与已提交内容一致。

2.4 关系 Timeline

布局：纵向时间轴

时间轴居中（桌面端）或靠左（移动端）
事件卡片交替排列在轴线两侧（桌面端）或统一靠右（移动端）

事件卡片：

类型图标（对话、里程碑、状态变化、AI 建议）
标题 + 简要描述
时间戳
可展开查看完整内容

风险标记：

高风险事件：红色左边框 + 警告图标
中风险事件：橙色左边框
正常事件：蓝色/灰色左边框

交互：

滚动加载更多（无限滚动）
可按事件类型过滤
点击事件卡片展开详情 / 跳转关联对话

2.5 话术库

布局：左侧分类树 + 右侧内容区

分类浏览：

一级分类：恋爱 职场 社交 家庭 通用
二级分类：如恋爱下分 搭讪开场 约会邀请 表白话术 挽回策略 等
分类以树形/标签页展示

话术卡片：

场景标题
话术正文（支持模板变量，如 {对方姓名}）
适用场景标签
收藏按钮（星标）
一键复制按钮（点击后显示"已复制"反馈）
效果评分（社区反馈）

收藏管理：

独立"我的收藏"标签页
支持创建自定义收藏夹
拖拽排序收藏内容

三、响应式断点

断点	范围	布局策略
Desktop	≥ 1024px	完整侧栏（240px 固定宽度）+ 内容区自适应
Tablet	768px – 1023px	折叠侧栏（仅图标，56px 宽度），点击展开为 Overlay
Mobile	< 768px	隐藏侧栏，底部 Tab 导航替代（4-5 个 Tab）

断点实现

css

/* Tailwind / CSS 变量 */
--breakpoint-sm: 640px;   /* 小屏手机 */
--breakpoint-md: 768px;   /* 平板 / 大屏手机 */
--breakpoint-lg: 1024px;  /* 桌面 */
--breakpoint-xl: 1280px;  /* 大屏桌面 */
--breakpoint-2xl: 1536px; /* 超宽屏 */

导航适配

Desktop：左侧固定侧栏，包含 Logo、导航菜单、用户信息
Tablet：侧栏折叠为图标模式，悬停/点击展开
Mobile：底部固定 Tab Bar — 首页 | 人脉 | 对话 | 话术 | 我的

四、跨端扩展注意事项

4.1 Electron 桌面端

当前代码：已有初版壳 frontend/apps/desktop（pnpm dev:desktop / pnpm build:desktop），以下条目为产品化增强规划，尚未全部实现。

系统托盘

最小化到系统托盘，托盘图标常驻
右键菜单：打开主窗口、新建对话、退出
托盘图标角标显示未读通知数

原生通知

关系风险预警推送系统通知
AI 策略建议就绪时通知
支持通知点击直接跳转对应页面

全局快捷键

快捷键	功能
`Cmd/Ctrl + Shift + S`	唤醒/隐藏主窗口
`Cmd/Ctrl + N`	新建对话
`Cmd/Ctrl + P`	快速搜索人物
`Cmd/Ctrl + ,`	打开设置

窗口管理

关闭窗口默认最小化到托盘（可在设置中修改）
记忆窗口位置与尺寸，下次启动恢复
支持多窗口：主窗口 + 独立对话窗口

自动更新

集成 electron-updater
后台静默下载更新包
提示用户重启应用更新（非强制）
支持灰度发布通道（Stable / Beta）

深度链接

注册 shice:// 协议
支持从浏览器/其他应用跳转至对应页面
格式示例：shice://person/123、shice://chat/456

离线缓存策略

人物档案数据本地 SQLite 缓存
对话历史离线可读
离线时队列化操作，联网后自动同步
话术库增量缓存，优先加载本地版本

4.2 UniApp 移动端 App

底部 Tab 导航

┌──────────────────────────────────────┐
│                                      │
│           (页面内容区域)               │
│                                      │
├────────┬────────┬────────┬───────────┤
│  🏠    │  👥    │  💬    │    👤     │
│  首页  │  人脉  │  对话  │   我的    │
└────────┴────────┴────────┴───────────┘

手势操作

左滑删除：会话列表、人物列表支持左滑出现删除/归档操作
下拉刷新：所有列表页支持下拉刷新
长按操作：长按人物卡片弹出快捷菜单（发起对话、编辑、删除）

原生能力

推送通知：集成 UniPush，支持 iOS/Android 推送
相机：人物头像拍照/相册选择，支持裁剪
分享：分享话术卡片为图片至微信/朋友圈
剪贴板：一键复制话术到剪贴板

iOS / Android 安全区域适配

css

/* 顶部安全区 */
padding-top: env(safe-area-inset-top);

/* 底部安全区（Tab Bar 下方） */
padding-bottom: env(safe-area-inset-bottom);

/* 刘海屏左右安全区 */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

组件库选型

wot-design-uni：基于 Vue3 的 UniApp 组件库
- 原因：组件丰富、文档完善、社区活跃、支持暗色模式
- 涵盖：按钮、表单、导航、反馈、数据展示等全场景组件
- 样式定制：通过 CSS 变量覆盖品牌色

4.3 微信小程序

小程序特有限制

限制项	限制值	应对策略
主包大小	2MB	核心页面放主包，功能模块分包
分包大小	2MB/包，总计 20MB	话术库、Timeline 等独立分包
API 差异	部分 Web API 不可用	条件编译 `#ifdef MP-WEIXIN`
长连接	仅支持 WebSocket	AI 流式输出走 WebSocket 通道

微信登录集成

用户点击登录
  → wx.login() 获取 code
  → 发送 code 到后端
  → 后端换取 openid + session_key
  → 返回自定义 token
  → 本地存储 token，后续请求携带

授权获取用户头像/昵称（2022 年后需手动填写）
支持绑定手机号（通过 getPhoneNumber 组件）

分享能力

分享到好友：自定义分享卡片（标题 + 图片 + 路径）
分享到朋友圈：支持生成单页模式分享页
分享话术卡片：生成精美图片，长按保存或直接分享

订阅消息通知

关系维护提醒（"距离上次联系 {name} 已 {n} 天"）
AI 策略就绪通知
需用户主动订阅，每次触发消耗一条额度
长期订阅模板需审核通过

五、动效规范

5.1 页面切换

类型	动画	时长	缓动
前进	Fade + Slide Left	300ms	ease-in-out
后退	Fade + Slide Right	300ms	ease-in-out
Tab 切换	Fade	200ms	ease

5.2 组件动效

组件	动画	时长	缓动
卡片展开/折叠	Height 过渡 + Fade	200ms	ease-out
弹窗出现	Scale(0.95→1) + Fade	250ms	ease-out
弹窗关闭	Scale(1→0.95) + Fade	150ms	ease-in
下拉菜单	Slide Down + Fade	200ms	ease-out
Toast 提示	Slide Up + Fade	200ms	ease-out

5.3 数据加载

骨架屏：列表、卡片、详情页在数据加载时显示结构化骨架屏
渐进加载：图片 Lazy Load，先模糊缩略图后清晰大图
空状态：友好插画 + 引导操作按钮

5.4 AI 回复动效

[正在思考...]        ← 三个点循环闪烁动画
    ↓
逐字出现文本          ← 每字 30-50ms 间隔，光标（|）末尾闪烁
    ↓
Markdown 实时渲染     ← 加粗/列表/代码块逐步呈现
    ↓
策略卡片弹入          ← 从底部 slide-up，带 shadow 层级提升

六、无障碍（Accessibility）

6.1 ARIA 标签

所有交互元素必须包含 aria-label 或 aria-labelledby
动态内容更新使用 aria-live="polite"
模态框使用 role="dialog" + aria-modal="true"
导航区域使用 role="navigation" + aria-label

6.2 键盘导航

操作	按键
元素间移动	`Tab` / `Shift+Tab`
列表项切换	`↑` `↓` 方向键
确认/选中	`Enter` / `Space`
关闭弹窗	`Esc`
对话发送消息	`Enter`
对话换行	`Shift + Enter`

焦点样式：2px 实线 #2080F0 外框，不可移除
Tab 顺序：遵循自然阅读顺序，避免 tabindex 大于 0

6.3 对比度

正文文字与背景对比度 ≥ 4.5:1（WCAG AA）
大号文字（≥ 18px 粗体 / ≥ 24px 常规）对比度 ≥ 3:1
交互元素（按钮、链接）对比度 ≥ 3:1
使用工具验证：Chrome DevTools / axe / Lighthouse

6.4 其他

图片提供 alt 文本描述
不依赖纯颜色传达信息（辅以图标或文字）
动画支持 prefers-reduced-motion 媒体查询关闭
表单字段关联 <label> 标签

识策AI · UI 设计规范与跨端扩展方案 ​

一、设计规范 ​

1.1 色彩体系 ​

主色 ​

辅助色 ​

语义色 ​

暗色模式对应色 ​

1.2 字体 ​

1.3 间距系统 ​

1.4 圆角 ​

1.5 阴影层级 ​

二、核心页面交互规范 ​

2.1 Dashboard（仪表盘） ​

2.2 人物档案 ​

2.3 AI 对话 ​

2.4 关系 Timeline ​

2.5 话术库 ​

三、响应式断点 ​

断点实现 ​

导航适配 ​

四、跨端扩展注意事项 ​

4.1 Electron 桌面端 ​

系统托盘 ​

原生通知 ​

全局快捷键 ​

窗口管理 ​

自动更新 ​

深度链接 ​

离线缓存策略 ​

4.2 UniApp 移动端 App ​

底部 Tab 导航 ​

手势操作 ​

原生能力 ​

iOS / Android 安全区域适配 ​

组件库选型 ​

4.3 微信小程序 ​

小程序特有限制 ​

微信登录集成 ​

分享能力 ​

订阅消息通知 ​

五、动效规范 ​

5.1 页面切换 ​

5.2 组件动效 ​

5.3 数据加载 ​

5.4 AI 回复动效 ​

六、无障碍（Accessibility） ​

6.1 ARIA 标签 ​

6.2 键盘导航 ​

6.3 对比度 ​

6.4 其他 ​