Interlove Dating Advisor情感顾问端
Dating Advisor app icon
Design System · Dating Advisor v1.3

情感顾问端 设计系统

情感顾问(cupid)的作业工具:客户管理、人工配对、系统外拨、审批跟进。与用户端共用令牌档位与图标语言,但密度更高、控件更方正、层级靠品红与描边而非阴影——单次连续作业 30 分钟到 3 小时,效率优先于氛围。

作业页顶栏 #E50182 主操作 #C4016F 品红深一档 #A80066 默认字号 14px 默认圆角 10px 仅中文
Part 01

基础 Foundations

与用户端的分野、色彩、文字、密度——情感顾问端一切组件的底层语言。


1.1

两端分野 · Dating Advisor vs Beloved

同一产品家族的两个 App:用户端 Beloved 是消费体验,情感顾问端 Dating Advisor 是生产力工具。scale 的档位数一致,取值不同——迁移组件时只需换令牌,不需重画结构。

维度用户端 Beloved情感顾问端 Dating Advisor
使用场景浏览、聊天、付费客户管理、配对作业、外拨、审批
单次时长5–20 分钟30 分钟 – 3 小时连续作业
信息密度低(留白、大图)高(列表、表格、批量操作)
主色玫红 #FF3D8A品红 #E50182(顶栏条 / 徽标)· 主操作 #C4016F;大面积底一律米白 #F7F5F3
默认字号16px14px
默认间距16px12px
默认圆角16px(按钮药丸形)10px(按钮方形)
默认阴影e2 浮起e1 / 纯 border
按钮高度48 / 3836 / 32
列表行高72(含头像缩略)56(紧凑,可批量)
Tab 形式横向滚动 chip / icon + 文字顶部下划线 Tab(无 icon)
表格不使用必备:可排序、可筛选、可批量勾选
语言中英双语仅中文(组件为英文预留 1.5× 宽度)
情感顾问端列表行高 56 · 约 10 条 / 屏
LilyVIP3
上海 · 2 小时前活跃 · 已配对
MeiVIP2
北京 · 昨天活跃 · 待配对
Sora
深圳 · 3 天前活跃
1.2

品牌色 · Brand

取自情感顾问端 Logo 的品红 #E50182 用在顶栏与品牌页(工作台、列表、详情、启动、登录);实心按钮与选中态用深一档的 #C4016F,避免与顶栏糊在一起。大面积铺底一律用米白 #F7F5F3:启动页与登录页也是浅底,品红只落在 Logo、顶栏条与主按钮上——高饱和品红铺满整屏会刺眼,且与用户端的浪漫气质混淆。#A80066 仅作按下态与通话浮窗的深一档层级。与用户端的区分来自更饱和的品红 + 更紧的密度,而不是更深的底色。

顶栏
品红
#E50182
Logo 品红 · 顶栏 / 徽标 / 图标底
主操作
主操作
#C4016F
实心按钮 / 选中态 / 链接
深一档
品红深一档
#A80066
通话浮窗、深底层级
顶栏
品红 Nav
#E50182
作业页顶栏条、情感顾问身份徽标、App 图标底、启动/登录页的 Logo(Logo 品红)
--nav
主操作
主操作 Primary
#C4016F
实心按钮、选中态、链接、图表主柱
--primary
按下 Press
#9B0158
主按钮按下 / hover
--primary-press
浅底文字 Deep
#7A0A52
浅粉底上的文字与图标(与品牌深色带同值)
--primary-deep
浅底 Tint
#FDEBF5
选中行、次要按钮、提示条
--primary-tint
次浅底 Tint 2
#F8D3E8
描边、图表次要柱
--primary-tint-2
品红深一档 Brand deep
#A80066
通话浮窗、需要与顶栏区分层级的深底;启动页与登录页已统一用 --nav
--brand-deep
深色带 · 深 2
#7A0A52
深色带按下态 / 浅粉底文字(= --primary-deep)
--brand-deep-2
仅小面积
客户呼应色 Client
#FF3D8A
仅用于「代表 C 端客户」的元素(配对对象预览等),不做大色块
--client
1.3

语义色与身份色

审批与跟进状态贯穿情感顾问端全部作业流,语义色是状态的第一识别层;性别色与用户端完全一致,跨端认知不切换。

通过 Success
#2E7D32
已通过、已签约、已联系
--success
待处理 Warning
#ED6C02
待审批、待跟进、即将到期
--warning
驳回 Danger
#C62828
已驳回、已放弃、解除配对、挂断
--danger
信息 Info
#1565C0
规则说明、系统提示
--info
已配对 Matched
#B8860B
Matched 金 · 填充与描边(暗金,避免喜庆感);徽章文字用更深一档 --gold-ink #8A6508 保证 AA
--gold / --gold-ink
男 Male
#3D7BFF
性别徽标(头像右下,仅此一种可叠头像)
--male
女 Female
#FF8FB8
同上
--female
1.4

中性色阶与对比度

中性色为中性灰(用户端为暖调),配合米白工作台底 #F7F5F3——长时间连续作业下更耐看。列表行的次要信息行(城市 · 活跃 · 状态、电话 · 微信)与权限说明一律用 --text2 #6B6B6B,不用 --text3:那一行是扫读时真正要看的内容;--text3 #9E9E9E 只留给时间戳与兜底装饰文案。

#FFFFFF
#F7F5F3
#F0EDEA
#E5E2DE
#D3CFCA
#BDBDBD
#9E9E9E
#6B6B6B
#1A1A1A
前景 / 背景用途对比度结论
白 / #C4016F主按钮文字5.9AA
白 / #E50182作业页顶栏文字4.51AA
白 / #A80066通话浮窗文字7.3AAA
#7A0A52 / #FDEBF5浅粉底文字9.2AAA
#1A1A1A / #F7F5F3正文15.4AAA
#6B6B6B / #FFFFFF次要文字5.3AA
#8A6508 / #FBF3E0「已配对」徽章文字4.6AA
#6B6B6B / #F0EDEA列表次要信息行、权限说明4.4AA
#9E9E9E / #FFFFFF时间戳、兜底说明等装饰文案2.9仅装饰
1.5

排版 Typography

字体栈 MiSansPunct → Figtree → -apple-system / SF Pro Text → MiSans → system-ui:链首 MiSansPunct 是中文标点子集,把中文标点从西文字体手里截回来;西文走 Figtree,中文落 MiSans。字重上限 700(MiSans 可变字体 wght 轴已限轴,CSS 800 会被钳到 700,而 Figtree 的 800 是真 ExtraBold,混排时两边粗细会劈叉)。数字、工号、推荐码、时长一律 SF Mono 等宽,方便竖列比对。字阶维持情感顾问端自有的细粒度刻度(11.5 / 12.5 / 13.5 / 14 / 17 / 25),不与用户端统一。

t-h128 / 1.15
700 上限
工作台
t-h221 / 1.25
700
我的会员 · 24 人
t-h317 / 1.35
700
发起配对 · 填推荐理由
t-title15 / 1.45
600
Lily · 上海 · VIP3
t-body14 / 1.6
400 · 默认
两人共同兴趣为旅行与摄影,女方希望对方定居美国西海岸。
t-bodysm13 / 1.55
400
女方希望对方定居美西,接受二婚无子女。
t-caption12 / 1.45
500
提交于 2026-08-28 14:32
t-micro10.5 / 1.35
700 · 大写
Pending approval
mono12–13
SF Mono
R0042 · LIH88 · 04:12 · 2 / 3
1.6

间距 · 圆角 · 阴影 · 描边

4px 网格,档位与用户端一致;默认值下移一档:间距默认 md 12,圆角默认 sm 10,阴影默认 e1。

间距 spacing
xs · 4
sm · 8
md · 12 默认
lg · 16
xl · 24
2xl · 32
3xl · 48
圆角 radius
xs
4px · 徽章
sm 默认
10px · 按钮/输入
md
12px · 卡片
lg
16px · 弹层
描边 hairline · --hairline: 0.5px

列表分隔、卡片与控件描边、顶栏 / 筛选条 / Tab / 底部操作条的分界线一律 0.5px:同一条 1px 在真机上偏实偏重,列表密集处显脏。刻意加重的四处不收:头像性别角标与快捷入口角标的白描边 1.5px、TabBar 选中指示条、情感顾问气泡左侧品红条 2.5px。

0.5px · 现行
Lily · 上海 · VIP3
Mei · 北京 · VIP2
Sora · 上海 · VIP4
1px · 已废
Lily · 上海 · VIP3
Mei · 北京 · VIP2
Sora · 上海 · VIP4
阴影 elevation · 情感顾问端以 border 分层为主
border
列表 / 表格
e1 默认
卡片
e2
悬浮面板
e3
弹窗 / 通话浮窗
Part 02

图标 Iconography

与用户端同一套线性图标语言:24px 栅格、1.75px 描边、圆头圆角、currentColor 跟随文字色。VIP 等级徽标沿用用户端的扇贝封缄(同一套渐变与造型,仅尺寸改小);实名认证等 C 端专属印章情感顾问端不用。


2.1

功能图标 · 情感顾问端真值源

本节为情感顾问端图标唯一真值源。多数图标直接复用用户端设计系统的图标库(电话 / 挂断 / 麦克风 / 二维码 / 复制 / 筛选 / 设置 / 通知 / 消息 / 锁定 / 对勾 / 时钟 / 沙漏 / 定位 / 学历 / 职业 / 退出 / 添加 / 更多 / 返回 / 关闭 / 发送 / 图片 / 刷新 / 查看 / 公告 / 警告 / 信息提示 / 皇冠 / 钻石 等);前 5 枚(工作台 / 我的会员 / 数据看板 / 申请池 / 分配交接)为情感顾问端作业场景新增,已正式登记;其余为处置于本节的复用图标。再有新增一律先登记到本节。

工作台
我的会员
数据看板
申请池 · 清单
分配 · 交接
配对
系统外拨
挂断
录音 · 麦克风
消息
我的
二维码
复制
筛选
排序 · 调节
锁定 · 不可见
通过
驳回 · 关闭
时钟
倒计时
城市
公共池
通知
设置
搜索
更多
静音
播放
暂停
互喜池
配对 · 开启时品红
编辑备注
保存到相册
分享 · 发送
安全 · 改密
退出登录
加企业微信
查看 · 显示密码
隐藏密码
栅格
24 × 24 · 描边 1.75px
显示尺寸
Tab 22 · 行内 16 · 徽章 12
着色
currentColor(默认 #1A1A1A,强调 #E50182)
Part 03

组件 Components

全部为中文单语,控件为英文预留 1.5× 宽度弹性。触控目标不小于 44×44(视觉高度可为 36,热区外扩)。


3.1

按钮 Buttons

方形圆角 10px,主尺寸 36px,密集操作区用 32px。情感顾问端不用药丸形大按钮。

层级
尺寸与形态
3.2

输入 Inputs

字段
工号 / 手机号
密码连续 5 次错误锁定 10 分钟
推荐码 *仅支持 4–12 位字母与数字
推荐理由 · 带字数计数(≥ 50 字)
经理审批时会看到全文68 / 500
验证码
260
3.3

Tab 与筛选

情感顾问端标准 Tab 是顶部下划线(无 icon,带计数);筛选用 32px 以内的方形 chip 行,可横向滚动。

全部24VIP6普通18已配对3
上海 城市 配对状态 活跃度 ↓
待联系已联系已签约已放弃
3.4

徽标与状态 Badges

审批与跟进状态为方形 4px 圆角徽章;VIP 徽标直接沿用用户端的扇贝封缄 + 暖金属 4 级(VIP1 暖珠银 / VIP2 香槟金 / VIP3 暖铂 / VIP4 至尊钻·品红),列表内用 18px 小尺寸 + 等宽等级字。头像上仅可叠加性别徽标一种,VIP / 配对 / 情感顾问等徽标一律置昵称行内联——与用户端同一条铁律。

审批 / 跟进状态
待审批已通过已驳回已配对待男方确认 47:38待联系已提交
身份 / 会员
情感顾问VIP1VIP2VIP3VIP4女男在线3 天前录音中
3.5

头像 Avatar

情感顾问端以 32 / 40 为主(列表),48 / 72 用于详情页头部。性别徽标按 24 / 16 / 12 三档跟随尺寸。

封号 / 停用
头像置灰 grayscale + 55% 不透明
禁止
VIP、实名、情感顾问徽标叠加到头像
3.6

列表与资料字段

LilyVIP3
上海 · 2 小时前活跃 · 已配对
08-30
MeiVIP2
北京 · 昨天活跃 · 待配对
待跟进
Sora
深圳 · 3 天前活跃
08-27
资料字段 kv
工号R0042
推荐码LIH88
管辖区域上海 · 杭州
名下会员24(VIP 6)
会员与他人的聊天记录对情感顾问不可见
3.7

表格 Table

情感顾问端独有组件:表头可排序、行可勾选批量操作、数字列等宽右对齐。移动端横向滚动,首列(客户名)不参与滚动裁切。

客户↓城市最近活跃↕状态
Lily VIP3上海2h已配对
Mei VIP2北京1d待配对
Sora深圳3d普通
3.8

数据卡与图表

看板只用简单柱状图,单色品红系;不做 3D、不做花哨曲线、不做渐变填充。不显示任何佣金金额(佣金线下结算,不在 APP 范围)。

数据卡 · 2×2
今日新推荐
3
昨日 +2
待跟进申请
5
最早 18h 前提交
本月 VIP
2
转化率 8.3%
配对成功
1
待男方确认 1
柱状图 · 近 7 日推荐注册
224
525
326
827
628
929
330
3.9

步骤条与进度

选女方
选男方
3填理由
公共池跟进计时还剩 12 天
男方确认 47:38:22
3.10

反馈 Banner / Toast / 弹窗 / 空状态

Banner
Toast
推荐码已复制 推荐理由不足 50 字
弹窗 · 二次确认
空状态 · 一行灰字「暂无」(无图标、无说明句、无插画)
暂无
3.11

底部弹层与 Tab Bar

筛选弹层
配对状态
不限
待配对
待男方确认
已配对
Tab Bar · 4 项(MG-001)
工作台
我的会员
消息
我的
Part 04

工作台模式 Patterns

情感顾问端特有的组合:身份可识别、审批可追溯、聊天记录不可见、外拨可录音。


4.1

情感顾问身份徽标(MG-002)

情感顾问发出的每条消息都带品红「情感顾问」徽标,永久不可隐藏(合规要求:会员必须能识别对方身份)。情感顾问 ↔ 会员消息不需互喜、不计费、不进审核队列、实时送达。

李雯情感顾问
Lily 你好,我看到你和 Mark 已互相喜欢。方便的话今天下午我电话跟你聊一下他的情况。
14:32 · 已送达
系统消息居中灰字 · 情感顾问身份呈现
4.2

审批状态轨迹(MG-003)

配对与解除都是多方流程,每一步都要有时间戳与处理人;情感顾问端只显示自己有权看到的节点。

配对发起 → 男方确认
你提交配对申请
08-28 14:32 · R0042
区域经理审批通过
08-28 17:05 · 张经理
等待男方确认 47:38
超时未响应 → 名额返还
配对成立
双方收到配对成功通知
解除配对 · 双轨
会员发起
男女任一方提交 → 情感顾问审核 → 通过即解除
情感顾问发起
情感顾问提交 → 区域经理审核 → 通过才解除
解除后
配对关系移除,喜欢 / 互喜关系保持原状;之后聊天按非配对规则计费。
4.3

系统外拨浮窗(M-040)

400 号码外拨,全程录音并持久化;浮窗用品红深一档 #A80066,录音指示用红点脉冲。

Mei · 北京
录音中 · 04:12
静音 挂断
4.4

Don't Do

✕
不用粉色渐变作大面积背景(用户端味道);深色带用纯色 #A80066。
✕
不用药丸形大按钮、不用 48px 按钮高度。
✕
不用插画式空状态、不用图标、不写说明句;一行灰字「暂无」即可。
✕
列表项不加阴影,用 0.5px 描边(--hairline)分隔。
✕
不用圆体字(SF Pro Rounded);西文 SF Pro / 中文 MiSans,字重上限 700。
✕
不显示佣金金额、不做提现入口、不做佣金计算。
✓
会员聊天记录一律不可见,入口处用锁图标 + 一句说明。
✓
徽标只在昵称行内联;头像只允许叠性别徽标。