danyang-match/docs/善缘丹阳 V1.1 前端 UI-UX 高保真原型修订说明.md

# “善缘丹阳”公益婚恋服务平台
# V1.1 前端 UI/UX 高保真原型修订说明

版本：V1.1  
适用终端：微信小程序用户端 + 响应式 Web 运营后台  
修订基础：V1.0 UI/UX 规范 + V1.1 首页定稿 + V1.1 页面级功能修订 + V1.1 数据库/API 增量设计  
核心目标：**温暖、可信、公益、本地、简单、年轻但不娱乐化**

---

# 第一章 本次视觉修订目标

V1.1 前端设计需要同时解决五个问题：

```text
1. 第一眼体现“善缘丹阳”公益品牌
2. 首页快速进入主要婚恋服务
3. 找对象仍然保持最高业务优先级
4. 新增咨询、服务站、课堂等能力但不让系统变复杂
5. 与商业婚恋App明显区分
```

最终视觉不是：

> Tinder 风格。

也不是：

> 政务门户网站。

应该形成：

> **现代公益服务 + 温暖婚恋体验 + 丹阳本地可信感。**

---

# 第二章 核心视觉关键词

统一视觉关键词：

```text
温暖
可信
清爽
公益
本地
自然
克制浪漫
现代
```

明确避免：

```text
夜店感
奢华婚介感
游戏感
直播感
网红粉色
大量爱心
金币
皇冠
火焰
红娘媒婆传统俗艳风
```

---

# 第三章 品牌名称

用户前台统一使用：

> **善缘丹阳**

副标题：

> 丹阳公益婚恋服务平台

品牌口号可使用：

```text
真实 · 公益 · 本地 · 安全
```

---

# 第四章 主色方向

延续此前暖珊瑚方向。

建议主色候选：

```text
Brand Primary
#E96B6B
```

属于当前视觉建议值。

最终 Logo/品牌色如果后续正式设计：

> 可统一替换 Design Token。

不要在各页面硬编码。

---

# 第五章 辅助色体系

建议：

```text
Primary
暖珊瑚

Background
暖米白 / 浅灰白

Success
柔和绿色

Warning
暖橙

Danger
克制红色

Text Primary
深灰

Text Secondary
中灰
```

---

# 第六章 页面背景

用户端主背景建议：

```text
#FAFAF8
```

或同类暖白色。

不要纯大面积：

```text
#FFFFFF
```

产生医疗/后台感。

---

# 第七章 卡片背景

主要业务卡片：

> 白色。

配合：

```text
轻阴影
或
1px浅边框
```

不能使用：

> 重阴影悬浮卡。

---

# 第八章 圆角

统一：

```text
小组件 8px
按钮 10～12px
业务卡片 12～16px
Banner 16px
BottomSheet顶部 20px
```

---

# 第九章 阴影

尽量少。

推荐：

```text
0 2px 10px rgba(0,0,0,0.04)
```

仅用于：

- 推荐卡
- Banner
- 浮层

---

# 第十章 字体

微信环境优先：

```text
PingFang SC
system-ui
sans-serif
```

Android 兼容：

> 系统中文字体。

---

# 第十一章 字号层级

建议：

```text
Page Title       22px / semibold
Section Title    18px / semibold
Card Title       16px / medium
Body             14px
Secondary        13px
Caption          12px
```

---

# 第十二章 行高

正文：

```text
1.5～1.7
```

尤其内容文章和服务介绍。

避免文字挤成一团。

---

# 第十三章 页面水平边距

统一：

```text
16px
```

不要不同页面出现：

```text
12 / 15 / 20 / 24
```

混乱使用。

---

# 第十四章 页面模块间距

建议：

```text
Section Gap = 24px
Card Gap = 12px
Inline Gap = 8px
```

---

# 第十五章 点击区域

所有主要触控区域：

```text
≥44×44px
```

核心入口建议更大。

---

# 第十六章 底部 Tab Bar

固定：

```text
首页
找对象
消息
活动
我的
```

图标：

> 简洁线性。

选中：

> 主品牌色。

未选中：

> 中灰。

---

# 第十七章 Tab Bar 图标建议

```text
首页       Home
找对象     Users / Heart-Person
消息       Message
活动       Calendar
我的       User
```

避免：

> 卡通人物。

---

# 第十八章 用户端导航栏

普通页面：

```text
← 返回
页面标题
```

右侧只在确有必要时显示操作。

不要所有页面：

> “...”。

---

# 第十九章 首页导航栏

首页顶部采用自定义品牌区。

不需要传统：

```text
返回 + 标题
```

显示：

```text
善缘丹阳                     消息
丹阳公益婚恋服务平台
```

---

# 第二十章 首页总体高保真结构

最终正式顺序：

```text
品牌区
↓
用户状态
↓
Banner
↓
8个核心入口
↓
今日推荐
↓
善缘公益服务
↓
近期公益活动
↓
善缘服务站
↓
婚恋课堂
↓
安全提醒
```

---

# 第二十一章 首页第一屏目标

375px 宽手机上第一屏建议能够看到：

```text
品牌
+
Banner主体
+
至少第一排4个核心入口
```

用户无需滑动很多：

> 就知道平台是什么、有什么服务。

---

# 第二十二章 首页品牌区域

示意：

```text
善缘丹阳                     🔔

丹阳公益婚恋服务平台
真实 · 公益 · 本地 · 安全
```

高度控制：

> 60～72px。

---

# 第二十三章 首页用户状态条

已完成：

```text
✓ 已实名   ✓ 本地资格   ✓ 资料已审核
```

使用浅色状态背景。

不做成大型卡片。

---

# 第二十四章 未完成状态

例如：

```text
还差一步即可开始寻找合适的人
完成资料   80%

[继续完善]
```

重点按钮明显。

---

# 第二十五章 Banner尺寸

建议：

```text
宽：343px（375屏宽下）
高：160～172px
```

比例约：

```text
2.05:1
```

---

# 第二十六章 Banner版式

推荐：

```text
左侧：
主标题
副标题
按钮

右侧/背景：
场景图
```

而不是：

> 一张海报直接缩小。

---

# 第二十七章 Banner文字

主标题：

```text
18～22px
semibold
```

副标题：

```text
13～14px
```

按钮：

```text
12～14px
```

---

# 第二十八章 Banner首屏示例

```text
善缘丹阳
丹阳人的公益婚恋服务

实名认证 · 人工审核 · 公益红娘

[开始寻找]
```

---

# 第二十九章 活动Banner

示例：

```text
秋日青年公益联谊

万善公园
公益免费

[立即报名]
```

---

# 第三十章 Banner指示器

底部：

```text
● ○ ○
```

即可。

不要数字：

```text
1 / 5
```

---

# 第三十一章 Banner自动轮播

建议：

```text
4～5秒
```

支持用户手动滑动。

用户操作后：

> 不强抢滚动。

---

# 第三十二章 8个核心入口

Banner 下方。

采用：

```text
4列 × 2行
```

---

# 第三十三章 入口单元尺寸

每个约：

```text
80×72px
```

或按屏幕自适应。

结构：

```text
图标背景
↓
文字
```

---

# 第三十四章 第一排

固定：

```text
找对象
公益红娘
公益活动
婚恋咨询
```

---

# 第三十五章 第二排

固定：

```text
婚恋课堂
婚前辅导
婚恋反诈
善缘服务站
```

---

# 第三十六章 入口图标底色

可用不同但统一的浅色：

```text
浅珊瑚
浅橙
浅绿
浅蓝
浅紫
```

不要饱和强彩色。

---

# 第三十七章 找对象图标

视觉优先级最高。

图标可：

> 两个人物 + 小型心形辅助。

但不使用：

> 大红爱心。

---

# 第三十八章 公益红娘图标

建议：

> 双人/连接/服务人物。

不要：

> 中国传统媒婆形象。

---

# 第三十九章 公益活动图标

建议：

> 日历 + 人物。

---

# 第四十章 婚恋咨询

建议：

> 对话气泡 + 心形线性元素。

---

# 第四十一章 婚恋课堂

建议：

> Book / Lightbulb。

---

# 第四十二章 婚前辅导

建议：

> 双人 + House/Heart。

保持中性。

---

# 第四十三章 婚恋反诈

建议：

> Shield + Heart。

---

# 第四十四章 服务站

建议：

> Location + Home。

---

# 第四十五章 今日推荐区域

标题：

```text
今日推荐                      查看更多 >
根据双方条件，为你筛选更合适的人
```

---

# 第四十六章 首页推荐卡建议

首页优先采用：

> 横向信息卡

而不是完整大图卡。

可以一屏看到更多核心信息。

---

# 第四十七章 推荐卡结构

```text
┌────────────────────────────┐
│ [头像 88×112]  王女士 32岁 │
│               丹阳         │
│               本科 · 教师  │
│                            │
│               比较合适     │
│               ✓ 年龄合适   │
│               ✓ 都在丹阳   │
│                            │
│          不合适     喜欢    │
└────────────────────────────┘
```

---

# 第四十八章 推荐卡照片

首页：

> 1张主头像即可。

详情页再浏览更多照片。

避免首页变图片瀑布流。

---

# 第四十九章 推荐卡昵称

不要显示真实姓名。

示例：

```text
王女士
李先生
```

或平台生成展示名。

---

# 第五十章 推荐卡认证

可以小型 Badge：

```text
已实名
资料已审核
```

但不要堆三四个Badge。

---

# 第五十一章 匹配等级

只使用：

```text
很合适
比较合适
值得了解
```

不使用数字。

---

# 第五十二章 推荐理由

首页最多：

```text
2条
```

详情可展示更多。

---

# 第五十三章 推荐操作按钮

左：

```text
不合适
```

右：

```text
喜欢
```

喜欢使用品牌主色。

不合适使用：

> 浅灰描边。

---

# 第五十四章 不使用左右滑卡作为主交互

明确继续：

> 按钮优先。

Swipe只能未来作为辅助。

避免用户误触。

---

# 第五十五章 善缘公益服务模块

采用：

> 一张动态服务建议卡。

不展示八个入口的重复宫格。

---

# 第五十六章 Searching服务卡示例

```text
一直没有遇到特别合适的人？

公益红娘可以根据你的条件，
帮你一起看看合适的人。

[申请公益红娘]
```

---

# 第五十七章 Active Match服务卡

```text
刚开始认识，不知道聊什么？

这里有一些第一次聊天的小建议。

[看看沟通建议]
```

---

# 第五十八章 Successful服务卡

```text
正在认真考虑未来？

可以了解善缘丹阳公益婚前辅导。

[了解婚前辅导]
```

---

# 第五十九章 近期活动模块

建议：

> 横向大卡。

展示 1～2 个。

---

# 第六十章 活动卡结构

```text
[16:9活动图片]

青年公益联谊会

公益联谊

09月20日 14:00
万善公园

公益免费 · 报名中

[查看活动]
```

---

# 第六十一章 活动图片比例

```text
16:9
```

统一。

不要每张图比例不同。

---

# 第六十二章 活动标签

使用：

```text
公益联谊
兴趣交友
婚恋课堂
婚前辅导
婚俗新风
反诈科普
```

---

# 第六十三章 服务站首页卡

采用独立横向卡。

示例：

```text
善缘丹阳公益服务站

📍 万善公园婚姻登记处

公益红娘 · 婚恋咨询
婚前辅导 · 活动服务

[查看服务站]
```

---

# 第六十四章 服务站卡视觉

背景可以：

> 极浅绿色/米白。

与婚恋推荐区稍微区分。

强调：

> 线下真实阵地。

---

# 第六十五章 婚恋课堂模块

采用：

> 文章列表，而非卡片瀑布。

---

# 第六十六章 课堂单条

```text
[小缩略图]

第一次见面聊什么更自然？
婚恋课堂 · 5分钟阅读
```

---

# 第六十七章 安全提醒

首页最底部：

```text
🛡 善缘提醒

交往过程中请谨慎涉及借款、
投资和个人隐私。

查看婚恋反诈指南 >
```

视觉弱化但持续存在。

---

# 第六十八章 找对象页 U19

顶部：

```text
找对象
```

第二行：

```text
[筛选条件]
```

---

# 第六十九章 找对象页搜索

不建议大搜索框搜昵称。

主要用：

> 筛选。

按钮：

```text
筛选
```

---

# 第七十章 筛选条

显示：

```text
年龄
地区
身高
婚姻状况
更多
```

用户可快速调整临时筛选。

---

# 第七十一章 用户列表

使用：

> 双列卡片或单列卡片？

建议 V1.1：

> 单列紧凑卡片。

原因：

- 更容易展示资料
- 适合成年用户
- 减少看脸为主

---

# 第七十二章 用户详情 U21

结构：

```text
照片
↓
基本资料
↓
认证状态
↓
自我介绍
↓
生活方式
↓
婚恋态度
↓
推荐理由
↓
固定底部操作
```

---

# 第七十三章 用户详情图片

顶部支持：

```text
横向Swipe照片
```

但不做全屏短视频风。

---

# 第七十四章 用户详情隐私

禁止显示：

```text
真实姓名
手机号
微信号
单位精确名称（除非用户主动公开且合规）
详细地址
身份证
```

---

# 第七十五章 用户详情底部操作

固定：

```text
[不合适]          [喜欢]
```

若已经Like：

```text
已喜欢
```

---

# 第七十六章 Mutual Success 页面

双方喜欢后：

避免过度庆祝动画。

建议：

```text
你们互相喜欢

可以开始认识彼此了

[打个招呼]
[稍后再说]
```

---

# 第七十七章 消息页 U23

继续采用：

> 接近微信熟悉结构。

顶部：

```text
聊天 | 系统通知
```

---

# 第七十八章 聊天列表

每行：

```text
头像
名称
最后一条消息
时间
未读点
```

---

# 第七十九章 系统通知

卡片分：

```text
匹配
审核
活动
红娘
咨询
安全
```

图标轻量区分。

---

# 第八十章 聊天页 U24

顶部：

```text
< 王女士
```

右侧：

```text
...
```

更多内：

```text
举报
解除匹配
拉黑
```

---

# 第八十一章 Chat 风险提示

首次Chat顶部可以显示一次：

```text
请谨慎涉及借款、投资及个人隐私
```

可关闭。

不每次出现。

---

# 第八十二章 聊天输入区

V1.1：

```text
文字输入
图片
Emoji
发送
```

不显示：

- 语音
- 视频
- 位置
- 红包

---

# 第八十三章 活动首页 U27

顶部：

```text
公益活动
```

分类水平Tab：

```text
全部
交友
兴趣
课堂
辅导
公益
```

---

# 第八十四章 活动首页Banner

不建议再增加大型Banner。

首页已经有运营Banner。

活动页顶部只可有：

> 一张小型重点活动卡。

避免重复。

---

# 第八十五章 活动详情 U28

首屏：

```text
活动封面
活动标题
类型
时间
地点
公益免费
```

---

# 第八十六章 活动详情正文

顺序：

```text
活动介绍
适合人群
报名要求
活动流程
注意事项
主办/执行
```

底部：

```text
[立即报名]
```

---

# 第八十七章 活动报名 U29

尽量无长表。

页面显示：

```text
将使用以下资料报名

年龄 32
区域 丹阳
实名 已完成
资料审核 已完成

[确认报名]
```

---

# 第八十八章 活动签到 U31

页面突出：

> 二维码。

```text
我的签到码

[QR]

活动名称
签到时间
```

不要显示身份证信息。

---

# 第八十九章 活动反馈 U32

避免一次十几题。

核心：

```text
总体体验
组织体验
是否愿意参加类似活动
意见
```

交友型活动：

> 单独进入“活动后互选”。

---

# 第九十章 活动互选页面

标题：

```text
想继续了解谁？
```

说明：

```text
你的选择只有在对方也选择你时才会被双方知道。
```

这是必须高亮的隐私说明。

---

# 第九十一章 双向互选结果

不能直接写：

> 匹配成功。

使用：

```text
你们在活动中互有好感
```

按钮：

```text
[愿意开启线上沟通]
[暂时不了]
```

---

# 第九十二章 双方确认后

显示：

```text
你们都愿意进一步了解

现在可以在善缘丹阳开始聊天了

[开始聊天]
```

---

# 第九十三章 公益红娘首页 U33

首屏：

```text
公益红娘

如果自己找了很久仍没有遇到合适的人，
可以申请公益红娘帮助。
```

---

# 第九十四章 红娘服务卡

显示：

```text
帮我推荐合适的人
帮我看看择偶条件
帮我联系意向对象
想参加活动
```

---

# 第九十五章 已有红娘服务

首页改为：

```text
我的公益红娘

王老师
乐活公益

服务中

下一步：
等待查看红娘推荐
```

---

# 第九十六章 红娘推荐页面 U36

外观与普通推荐一致。

顶部明确：

```text
公益红娘推荐
```

可以显示：

```text
红娘推荐理由
```

但仍不能出现：

> “红娘担保”。

---

# 第九十七章 婚恋咨询介绍 U55

页面风格：

> 服务介绍，不像医疗预约。

结构：

```text
婚恋咨询
↓
你可以获得哪些帮助
↓
适合哪些情况
↓
服务方式
↓
隐私说明
↓
申请服务
```

---

# 第九十八章 服务帮助卡

例如：

```text
择偶困惑
不知道什么样的人更适合自己

沟通相处
不知道如何表达和沟通

婚恋焦虑
面对婚恋问题有压力
```

避免诊断型标签。

---

# 第九十九章 婚恋咨询申请 U56

采用单页简表。

```text
我希望得到哪方面帮助？
[择偶困惑]
[沟通相处]
[情感困惑]
[婚恋焦虑]
[其他]

希望服务方式
○ 线下
○ 电话
○ 其他

希望时间

简单说说你的需求
```

---

# 第一百章 咨询申请隐私提示

表单底部：

```text
请只填写完成服务所必要的信息，
不建议上传完整聊天记录或敏感资料。
```

---

# 第一百零一章 我的咨询 U57

采用：

> 服务卡列表。

```text
公益婚恋咨询
已预约

09月18日 14:00
线下服务

[查看详情]
```

---

# 第一百零二章 婚前辅导 U58

视觉可以比婚恋咨询：

> 更温暖、更成熟。

不使用：

> 婚礼摄影大片。

---

# 第一百零三章 婚前辅导内容

模块：

```text
关系沟通
家庭责任
财务与生活规划
家庭边界
冲突处理
文明婚嫁
```

---

# 第一百零四章 婚恋反诈中心 U60

顶部Banner式轻卡：

```text
婚恋交友，也要保护好自己
```

下方：

```text
常见骗局
借款风险
投资理财
虚假身份
线下见面安全
隐私保护
```

---

# 第一百零五章 反诈内容图标

使用：

> Shield、Wallet Alert、ID、Location。

不使用：

> 恐怖警示图。

避免用户焦虑。

---

# 第一百零六章 反诈举报CTA

页面底部：

```text
遇到可疑情况？

[我要举报]
```

---

# 第一百零七章 婚恋课堂 U53

顶部分类：

```text
全部
择偶
沟通
关系
婚前
婚俗
反诈
```

---

# 第一百零八章 内容列表

使用：

```text
图 + 标题 + 摘要 + 阅读时间
```

不显示：

- 阅读量排名
- 点赞量
- 热搜

---

# 第一百零九章 内容详情 U54

正文宽度：

> 全屏减32px。

字号：

```text
16px
```

行高：

```text
1.75
```

适合长期阅读。

---

# 第一百一十章 内容尾部关联服务

例如婚恋沟通文章：

```text
如果你需要进一步帮助

[申请婚恋咨询]
```

反诈文章：

```text
遇到可疑情况
[我要举报]
```

---

# 第一百一十一章 善缘服务站 U50

视觉目标：

> 真实线下服务点。

首屏：

```text
[服务站实景图]

善缘丹阳公益服务站
万善公园婚姻登记处
```

---

# 第一百一十二章 服务站信息卡

```text
📍 地址
🕘 服务时间
☎ 联系电话
🧭 导航
```

按钮：

```text
[地图导航]
```

---

# 第一百一十三章 服务站服务项目

使用四张小卡：

```text
公益红娘
婚恋咨询
婚前辅导
活动服务
```

---

# 第一百一十四章 服务站预约

底部：

```text
[预约公益服务]
```

进入 U51。

---

# 第一百一十五章 服务预约 U51

采用：

> Step-by-Step。

Step 1：

```text
你需要什么服务？
```

Step 2：

```text
希望什么时候？
```

Step 3：

```text
补充说明
```

Step 4：

```text
确认预约
```

---

# 第一百一十六章 预约成功页

```text
预约已提交

工作人员确认后，
我们会通过系统通知告诉你。

[查看我的预约]
```

避免：

> “预约成功”造成已经确认时间的误解。

---

# 第一百一十七章 我的预约 U52

状态标签：

```text
待确认
已确认
已完成
已取消
```

---

# 第一百一十八章 本地资格说明 U62

不要像行政审核页面。

使用：

```text
为什么需要确认本地资格？
```

解释：

> 善缘丹阳主要服务在丹阳工作、居住或拥有丹阳户籍的单身人士。

---

# 第一百一十九章 本地资格选择

大按钮：

```text
○ 丹阳户籍
○ 在丹阳工作
○ 在丹阳长期居住
○ 其他符合项目服务条件
```

---

# 第一百二十章 需要补充材料 U63

文案：

```text
为了完成本地资格核验，
请补充一项能够说明你在丹阳工作或居住的材料。
```

避免：

> “你被怀疑”。

---

# 第一百二十一章 上传证明

上传卡：

```text
+ 上传佐证
```

下面明确：

```text
仅用于资格审核，不对其他用户展示。
```

---

# 第一百二十二章 我的页面 U37

整体采用分组列表。

顶部：

```text
[头像]
展示名
资料完整度

已实名 | 本地资格 | 资料已审核
```

---

# 第一百二十三章 我的第一组

```text
我的资料
择偶条件
我的缘分
```

---

# 第一百二十四章 我的第二组：公益服务

```text
我的红娘
我的咨询
我的活动
我的预约
公益服务记录
```

---

# 第一百二十五章 我的第三组：安全

```text
隐私设置
黑名单
举报与安全
账号设置
```

---

# 第一百二十六章 我的第四组

```text
婚恋课堂
婚恋反诈
善缘服务站
关于善缘丹阳
```

---

# 第一百二十七章 公益服务记录 U64

使用时间轴。

例如：

```text
09月18日
公益婚恋咨询
已完成

09月10日
青年公益联谊会
已参加

08月25日
公益红娘服务
服务中
```

不展示内部备注。

---

# 第一百二十八章 关于善缘丹阳

视觉更偏：

> 公益项目介绍。

模块：

```text
项目介绍
公益性质
服务内容
服务阵地
主办/执行信息
联系我们
```

不要做领导介绍页面。

---

# 第一百二十九章 未登录/未准入状态设计

即使不能找对象，也不要整个平台只剩认证页面。

允许浏览：

```text
项目介绍
公开活动
婚恋课堂
婚恋反诈
服务站
```

具体报名权限服务端判断。

---

# 第一百三十章 未完成准入首页

Banner后不展示真实候选。

推荐区域改成：

```text
完成资料后开始寻找合适的人

✓ 微信登录
✓ 手机绑定
✓ 实名认证
○ 本地资格
○ 婚恋资料
○ 人工审核

[继续]
```

---

# 第一百三十一章 审核中首页

显示：

```text
资料审核中

你可以先看看：
公益活动
婚恋课堂
婚恋反诈
```

---

# 第一百三十二章 无候选首页

不要显示空白。

```text
暂时没有找到完全符合双方条件的人

你可以：
[查看择偶条件]
[申请公益红娘]
[看看近期活动]
```

---

# 第一百三十三章 网络异常状态

每个模块单独容错。

例如首页：

Banner失败：

> 不影响推荐。

内容失败：

> 不影响找对象。

---

# 第一百三十四章 Skeleton

首页：

- Banner Skeleton
- Quick Entry可立即静态显示
- 推荐卡 Skeleton
- 活动 Skeleton

避免：

> 整页大Loading。

---

# 第一百三十五章 空状态视觉

统一组件：

```text
EmptyState
```

结构：

```text
简单插画
一句说明
一个主要操作
```

---

# 第一百三十六章 ErrorState

结构：

```text
暂时没加载成功
[重新加载]
```

不要：

```text
系统异常500
```

---

# 第一百三十七章 Toast

只用于：

- 成功
- 轻提示

例如：

```text
已提交
已保存
```

---

# 第一百三十八章 Dialog

用于：

- Block
- Unmatch
- 取消预约
- 活动取消
- 退出服务

明确后果。

---

# 第一百三十九章 BottomSheet

优先用于：

- Filter
- Action Menu
- Picker

减少复杂跳页。

---

# 第一百四十章 Disabled按钮

必须说明为什么不可用。

例如：

```text
[立即报名]
当前资料审核未完成
```

不要只是灰色按钮无解释。

---

# 第一百四十一章 Accessibility

必须保证：

- 文本对比度
- 大字体可用
- 点击区足够
- 状态不能只靠颜色

---

# 第一百四十二章 状态Badge

统一语义：

```text
成功/通过     绿色
处理中       暖橙
暂停         灰
风险/失败    红色
普通信息     蓝灰
```

---

# 第一百四十三章 用户隐私Badge

例如：

```text
已实名
资料已审核
```

不使用：

```text
官方认证
100%真实
```

---

# 第一百四十四章 后台整体风格

Web后台：

> 简洁、业务效率优先。

不需要沿用用户端大量浪漫元素。

---

# 第一百四十五章 后台布局

```text
左侧导航
+
顶部操作栏
+
主工作区
```

---

# 第一百四十六章 后台Sidebar

建议：

```text
220px
```

折叠可选。

---

# 第一百四十七章 后台一级菜单

V1.1：

```text
工作台
用户管理
资料审核
匹配管理
公益红娘
公益咨询
活动管理
内容管理
服务站
举报风控
数据统计
组织人员
系统设置
审计安全
```

---

# 第一百四十八章 后台菜单按权限显示

例如 Counselor：

```text
工作台
公益咨询
```

即可。

不展示其他无关功能。

---

# 第一百四十九章 Reviewer工作台

第一屏：

```text
待审核 28
我已领取 5
待复审 3
```

下方直接：

> 待审核列表。

---

# 第一百五十章 Matchmaker工作台

第一屏：

```text
新服务
今日待跟进
等待用户
```

下方：

> 今日任务。

---

# 第一百五十一章 Counselor工作台

第一屏：

```text
新咨询
今日预约
待跟进
```

不要展示整个用户池。

---

# 第一百五十二章 Service Station工作台

第一屏：

```text
今日预约
待确认
今日服务
```

突出：

> 现场执行。

---

# 第一百五十三章 Activity Manager工作台

```text
近期活动
待审核报名
今日签到
```

---

# 第一百五十四章 Risk Operator工作台

```text
高风险
待处理
即将超时
```

---

# 第一百五十五章 Banner后台

列表字段：

```text
预览
标题
目标
受众
开始
结束
状态
排序
```

---

# 第一百五十六章 Banner编辑页

左侧：

> 表单。

右侧：

> 手机Banner实时预览。

这是很有价值的后台能力。

---

# 第一百五十七章 内容后台

列表：

```text
标题
分类
状态
发布时间
编辑人
```

---

# 第一百五十八章 内容编辑

编辑区：

```text
标题
摘要
封面
分类
正文
```

右侧：

> 小程序文章预览。

---

# 第一百五十九章 咨询后台列表

字段：

```text
服务编号
用户
类型
状态
负责人员
预约时间
下一步
```

默认不显示：

> 咨询内容摘要。

---

# 第一百六十章 咨询详情

区域：

```text
用户必要信息
服务需求
预约信息
服务记录
下一步
```

敏感内容区域要明显：

> 权限限制。

---

# 第一百六十一章 服务站预约后台

桌面列表：

```text
预约号
用户
服务类型
日期
状态
负责人
```

现场手机视图：

> 卡片化。

---

# 第一百六十二章 活动后台

创建活动使用：

> 分区表单。

```text
基本信息
报名规则
容量
组织
签到
活动后互选
```

避免一页几十字段。

---

# 第一百六十三章 ActivityType不同显示不同字段

反诈课堂：

> 隐藏互选设置。

相亲活动：

> 显示互选设置。

这是UI层动态表单。

---

# 第一百六十四章 后台敏感字段默认脱敏

例如：

```text
138****1234
张**
```

完整查看：

> 需要单独操作。

---

# 第一百六十五章 敏感查看动作

点击：

```text
查看完整信息
```

弹：

```text
请选择查看原因
```

确认后才显示。

---

# 第一百六十六章 后台危险操作

例如：

```text
封禁
取消活动
停用工作人员
```

不要使用醒目大红主按钮。

放：

> 更多操作。

---

# 第一百六十七章 高保真页面优先级

第一批必须先做高保真：

```text
U18 首页
U19 找对象
U21 用户详情
U23 消息
U24 Chat
U27 活动
U28 活动详情
U33 公益红娘
U37 我的
U50 服务站
U55 婚恋咨询
U60 婚恋反诈
```

---

# 第一百六十八章 第二批

```text
U51 服务预约
U53 婚恋课堂
U54 内容详情
U56 咨询申请
U57 我的咨询
U58 婚前辅导
U62 本地资格
U64 服务记录
```

---

# 第一百六十九章 首页主要组件

建议组件：

```text
BrandHeader
UserStatusStrip
HomeBannerCarousel
QuickEntryGrid
HomeRecommendationSection
RecommendCardCompact
ServiceRecommendationCard
ActivityPreviewCard
ServiceLocationCard
ArticleListItem
SafetyNoticeCard
```

---

# 第一百七十章 新增业务组件

```text
ServiceTypeCard
AppointmentCard
CounselingServiceCard
ContentCategoryTabs
LocalEligibilityOption
EvidenceUploader
ServiceHistoryItem
ActivityMutualConsentCard
```

---

# 第一百七十一章 复用原则

不要新页面每次重新写：

- Button
- Badge
- Card
- Empty
- Modal
- Uploader

必须复用已有组件库。

---

# 第一百七十二章 Design Token新增

建议新增语义Token：

```text
brand-primary
brand-soft
surface-warm
surface-service
surface-safety

text-primary
text-secondary
text-disabled

status-success
status-warning
status-danger
status-neutral
```

---

# 第一百七十三章 图片资源规范

用户照片：

> 真实用户上传。

Banner/内容封面：

> 运营资源。

服务站：

> 真实场地图片优先。

不要所有页面用AI情侣插画。

---

# 第一百七十四章 空状态插画

可以使用：

> 轻量线性公益插画。

但整套风格必须统一。

---

# 第一百七十五章 推荐内容视觉红线

用户卡不能突出：

```text
收入
资产
房车
职位等级
```

即使数据未来存在也不作为视觉重点。

---

# 第一百七十六章 文案语气

统一：

> 温和、平等、尊重。

---

# 第一百七十七章 推荐文案

不使用：

```text
条件优秀
高质量对象
热门用户
```

使用：

```text
符合你的部分择偶偏好
双方条件比较合适
值得进一步了解
```

---

# 第一百七十八章 无匹配文案

不使用：

```text
你的要求太高
```

使用：

```text
按照当前“必须符合”的条件，
暂时没有找到合适的人。
```

---

# 第一百七十九章 红娘文案

不使用：

```text
红娘为你安排
```

使用：

```text
红娘为你推荐
```

---

# 第一百八十章 咨询文案

不使用：

```text
情感有问题
心理问题
```

使用：

```text
在婚恋、沟通和关系中遇到困惑
```

---

# 第一百八十一章 Success文案

不使用：

```text
脱单成功！
```

推荐：

```text
祝福你们正在认真了解彼此
```

更符合公益平台定位。

---

# 第一百八十二章 安全文案

不恐吓。

不写：

```text
骗子很多，请勿相信任何人
```

使用：

```text
实名认证和人工审核能够提升信息真实性，
交往过程中仍请保持必要的安全意识。
```

---

# 第一百八十三章 页面性能要求

首屏：

> Banner、QuickEntry和骨架优先出现。

不要等待全部Home API数据后：

> 一次性白屏→整页出现。

---

# 第一百八十四章 首页渐进加载

建议：

```text
Brand/Entries
立即渲染

Banner
缓存/网络

Recommendation
请求

Activity/Content
异步
```

---

# 第一百八十五章 图片Lazy Load

用户列表、内容、活动图片：

> 懒加载。

---

# 第一百八十六章 低网速体验

图片失败：

> 显示占位。

文字业务仍可操作。

---

# 第一百八十七章 前端权限原则

用户端：

> 按 Capability 控制入口。

后台：

> 按 Permission 控制菜单和按钮。

但服务端始终再次校验。

---

# 第一百八十八章 入口Disabled

例如用户未完成审核点击“找对象”：

不要跳错误页面。

显示：

```text
完成资料审核后即可使用找对象服务

[查看审核状态]
```

---

# 第一百八十九章 服务型功能开放策略

未审核用户仍可：

```text
婚恋课堂
反诈
服务站
部分公益活动
```

匹配类能力：

> 按准入状态限制。

---

# 第一百九十章 首页状态适配矩阵

| 用户状态 | Banner | 找对象 | 推荐 | 红娘 | 活动 | 咨询 | 内容 |
|---|---|---|---|---|---|---|---|
| 未登录 | 是 | 引导登录 | 否 | 介绍 | 公开活动 | 介绍 | 是 |
| 未实名 | 是 | 引导实名 | 否 | 介绍 | 按规则 | 可介绍 | 是 |
| 审核中 | 是 | 不可 | 否 | 可介绍 | 按规则 | 可申请 | 是 |
| Searching | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| Paused | 是 | 可恢复 | 否 | 是 | 是 | 是 | 是 |
| Successful | 是 | 弱化 | 否 | 弱化 | 是 | 是 | 是 |

---

# 第一百九十一章 首页高保真验收

必须做到：

```text
5秒知道平台是什么
5秒看到主要入口
5秒找到“找对象”
Banner不压住核心入口
推荐仍然是首页视觉核心之一
首页没有商业广告感
```

---

# 第一百九十二章 新服务高保真验收

婚恋咨询：

> 不能像医院挂号系统。

服务站：

> 不能像地图黄页。

婚前辅导：

> 不能像婚庆销售。

婚恋课堂：

> 不能像新闻门户。

---

# 第一百九十三章 活动高保真验收

相亲活动：

> 温暖、轻松。

课堂：

> 专业、清爽。

反诈：

> 安全、可信。

同一Activity框架但不同内容视觉。

---

# 第一百九十四章 后台高保真验收

角色进入后台第一屏：

> 知道今天做什么。

不能：

> 先看十几个数据图。

---

# 第一百九十五章 前端开发交付要求

Codex前端必须实现：

```text
Design Tokens
基础组件
业务组件
页面
状态
Skeleton
Empty
Error
Permission
Responsive
```

---

# 第一百九十六章 不接受的实现

不接受：

```text
页面全是硬编码颜色
组件复制粘贴
不同页面按钮风格不同
状态只靠文字
无Loading
无Empty
无Error
```

---

# 第一百九十七章 高保真原型建议设备

主要小程序参考：

```text
375 × 812
```

同时验收：

```text
320
390
430
```

---

# 第一百九十八章 Web后台基准

主要：

```text
1440 × 900
```

兼容：

```text
1366 × 768
```

---

# 第一百九十九章 用户端最终视觉架构

```text
善缘丹阳品牌
        │
        ↓
公益可信感
        │
 ┌──────┼───────┐
 ↓      ↓       ↓
找对象  人工服务  公益赋能
 ↓      ↓       ↓
推荐    红娘     课堂
Match   活动     反诈
Chat    咨询     婚前辅导
        服务站   婚俗新风
```

---

# 第二百章 最终UI原则

> **Banner有运营感，但不能有广告感。**

> **核心入口明显，但不能像超级App九宫格。**

> **推荐对象重要，但不能只看脸。**

> **公益服务丰富，但不能增加用户学习成本。**

> **线下服务真实存在，因此服务站应有真实空间感。**

> **婚恋咨询专业但不医疗化。**

> **婚前辅导温暖但不婚庆化。**

> **婚恋反诈持续提醒但不制造恐惧。**

> **后台功能丰富但工作人员只看到与自己工作有关的内容。**

---

# 第二百零一章 最终首页定稿结构

```text
┌─────────────────────────────┐
│ 善缘丹阳                 🔔 │
│ 丹阳公益婚恋服务平台          │
│ 真实 · 公益 · 本地 · 安全    │
├─────────────────────────────┤
│ 用户状态                      │
├─────────────────────────────┤
│                             │
│        Banner Carousel      │
│                             │
├─────────────────────────────┤
│ 找对象 | 红娘 | 活动 | 咨询   │
│ 课堂   | 婚前 | 反诈 | 服务站 │
├─────────────────────────────┤
│ 今日推荐                 更多 │
│ [推荐卡]                     │
│ [推荐卡]                     │
├─────────────────────────────┤
│ 善缘公益服务                  │
│ [状态相关服务建议]             │
├─────────────────────────────┤
│ 近期公益活动              更多 │
│ [活动卡]                     │
├─────────────────────────────┤
│ 善缘丹阳公益服务站             │
│ [查看服务站]                  │
├─────────────────────────────┤
│ 婚恋课堂                 更多 │
│ 内容1                         │
│ 内容2                         │
├─────────────────────────────┤
│ 🛡 善缘提醒                   │
│ 婚恋反诈指南 >                │
└─────────────────────────────┘

首页 | 找对象 | 消息 | 活动 | 我的
```

---

# 第二百零二章 最终结论

V1.1 前端视觉升级后，“善缘丹阳”必须让用户同时感受到三件事：

第一：

> **这是一个可信的丹阳本地公益婚恋平台。**

第二：

> **我可以非常容易地找到对象、红娘、活动和婚恋咨询。**

第三：

> **这不是一个只负责“配对”的App，在婚恋过程中需要帮助时，我还能找到真实的公益服务。**

因此前端设计最终形成：

```text
品牌信任
+
Banner运营
+
核心入口
+
精准推荐
+
人工公益服务
+
线下服务阵地
+
婚恋赋能
+
持续安全保护
```

而整个系统依然保持：

> **页面简单、按钮清楚、状态易懂、普通用户不需要学习。**