37 KiB
“善缘丹阳”公益婚恋服务平台
V1.1 前端 UI/UX 高保真原型修订说明
版本：V1.1
适用终端：微信小程序用户端 + 响应式 Web 运营后台
修订基础：V1.0 UI/UX 规范 + V1.1 首页定稿 + V1.1 页面级功能修订 + V1.1 数据库/API 增量设计
核心目标：温暖、可信、公益、本地、简单、年轻但不娱乐化
第一章 本次视觉修订目标
V1.1 前端设计需要同时解决五个问题：
1. 第一眼体现“善缘丹阳”公益品牌
2. 首页快速进入主要婚恋服务
3. 找对象仍然保持最高业务优先级
4. 新增咨询、服务站、课堂等能力但不让系统变复杂
5. 与商业婚恋App明显区分
最终视觉不是：
Tinder 风格。
也不是：
政务门户网站。
应该形成：
现代公益服务 + 温暖婚恋体验 + 丹阳本地可信感。
第二章 核心视觉关键词
统一视觉关键词：
温暖
可信
清爽
公益
本地
自然
克制浪漫
现代
明确避免：
夜店感
奢华婚介感
游戏感
直播感
网红粉色
大量爱心
金币
皇冠
火焰
红娘媒婆传统俗艳风
第三章 品牌名称
用户前台统一使用：
善缘丹阳
副标题：
丹阳公益婚恋服务平台
品牌口号可使用：
真实 · 公益 · 本地 · 安全
第四章 主色方向
延续此前暖珊瑚方向。
建议主色候选：
Brand Primary
#E96B6B
属于当前视觉建议值。
最终 Logo/品牌色如果后续正式设计：
可统一替换 Design Token。
不要在各页面硬编码。
第五章 辅助色体系
建议：
Primary
暖珊瑚
Background
暖米白 / 浅灰白
Success
柔和绿色
Warning
暖橙
Danger
克制红色
Text Primary
深灰
Text Secondary
中灰
第六章 页面背景
用户端主背景建议：
#FAFAF8
或同类暖白色。
不要纯大面积：
#FFFFFF
产生医疗/后台感。
第七章 卡片背景
主要业务卡片：
白色。
配合：
轻阴影
或
1px浅边框
不能使用：
重阴影悬浮卡。
第八章 圆角
统一：
小组件 8px
按钮 10～12px
业务卡片 12～16px
Banner 16px
BottomSheet顶部 20px
第九章 阴影
尽量少。
推荐：
0 2px 10px rgba(0,0,0,0.04)
仅用于：
- 推荐卡
- Banner
- 浮层
第十章 字体
微信环境优先：
PingFang SC
system-ui
sans-serif
Android 兼容：
系统中文字体。
第十一章 字号层级
建议：
Page Title 22px / semibold
Section Title 18px / semibold
Card Title 16px / medium
Body 14px
Secondary 13px
Caption 12px
第十二章 行高
正文：
1.5～1.7
尤其内容文章和服务介绍。
避免文字挤成一团。
第十三章 页面水平边距
统一：
16px
不要不同页面出现：
12 / 15 / 20 / 24
混乱使用。
第十四章 页面模块间距
建议：
Section Gap = 24px
Card Gap = 12px
Inline Gap = 8px
第十五章 点击区域
所有主要触控区域：
≥44×44px
核心入口建议更大。
第十六章 底部 Tab Bar
固定：
首页
找对象
消息
活动
我的
图标：
简洁线性。
选中：
主品牌色。
未选中：
中灰。
第十七章 Tab Bar 图标建议
首页 Home
找对象 Users / Heart-Person
消息 Message
活动 Calendar
我的 User
避免：
卡通人物。
第十八章 用户端导航栏
普通页面：
← 返回
页面标题
右侧只在确有必要时显示操作。
不要所有页面：
“...”。
第十九章 首页导航栏
首页顶部采用自定义品牌区。
不需要传统：
返回 + 标题
显示：
善缘丹阳 消息
丹阳公益婚恋服务平台
第二十章 首页总体高保真结构
最终正式顺序：
品牌区
↓
用户状态
↓
Banner
↓
8个核心入口
↓
今日推荐
↓
善缘公益服务
↓
近期公益活动
↓
善缘服务站
↓
婚恋课堂
↓
安全提醒
第二十一章 首页第一屏目标
375px 宽手机上第一屏建议能够看到：
品牌
+
Banner主体
+
至少第一排4个核心入口
用户无需滑动很多：
就知道平台是什么、有什么服务。
第二十二章 首页品牌区域
示意：
善缘丹阳 🔔
丹阳公益婚恋服务平台
真实 · 公益 · 本地 · 安全
高度控制：
60～72px。
第二十三章 首页用户状态条
已完成：
✓ 已实名 ✓ 本地资格 ✓ 资料已审核
使用浅色状态背景。
不做成大型卡片。
第二十四章 未完成状态
例如：
还差一步即可开始寻找合适的人
完成资料 80%
[继续完善]
重点按钮明显。
第二十五章 Banner尺寸
建议：
宽：343px（375屏宽下）
高：160～172px
比例约：
2.05:1
第二十六章 Banner版式
推荐：
左侧：
主标题
副标题
按钮
右侧/背景：
场景图
而不是：
一张海报直接缩小。
第二十七章 Banner文字
主标题：
18～22px
semibold
副标题：
13～14px
按钮：
12～14px
第二十八章 Banner首屏示例
善缘丹阳
丹阳人的公益婚恋服务
实名认证 · 人工审核 · 公益红娘
[开始寻找]
第二十九章 活动Banner
示例：
秋日青年公益联谊
万善公园
公益免费
[立即报名]
第三十章 Banner指示器
底部：
● ○ ○
即可。
不要数字：
1 / 5
第三十一章 Banner自动轮播
建议：
4～5秒
支持用户手动滑动。
用户操作后：
不强抢滚动。
第三十二章 8个核心入口
Banner 下方。
采用：
4列 × 2行
第三十三章 入口单元尺寸
每个约：
80×72px
或按屏幕自适应。
结构：
图标背景
↓
文字
第三十四章 第一排
固定：
找对象
公益红娘
公益活动
婚恋咨询
第三十五章 第二排
固定：
婚恋课堂
婚前辅导
婚恋反诈
善缘服务站
第三十六章 入口图标底色
可用不同但统一的浅色：
浅珊瑚
浅橙
浅绿
浅蓝
浅紫
不要饱和强彩色。
第三十七章 找对象图标
视觉优先级最高。
图标可：
两个人物 + 小型心形辅助。
但不使用：
大红爱心。
第三十八章 公益红娘图标
建议：
双人/连接/服务人物。
不要：
中国传统媒婆形象。
第三十九章 公益活动图标
建议：
日历 + 人物。
第四十章 婚恋咨询
建议：
对话气泡 + 心形线性元素。
第四十一章 婚恋课堂
建议：
Book / Lightbulb。
第四十二章 婚前辅导
建议：
双人 + House/Heart。
保持中性。
第四十三章 婚恋反诈
建议：
Shield + Heart。
第四十四章 服务站
建议：
Location + Home。
第四十五章 今日推荐区域
标题：
今日推荐 查看更多 >
根据双方条件，为你筛选更合适的人
第四十六章 首页推荐卡建议
首页优先采用：
横向信息卡
而不是完整大图卡。
可以一屏看到更多核心信息。
第四十七章 推荐卡结构
┌────────────────────────────┐
│ [头像 88×112] 王女士 32岁 │
│ 丹阳 │
│ 本科 · 教师 │
│ │
│ 比较合适 │
│ ✓ 年龄合适 │
│ ✓ 都在丹阳 │
│ │
│ 不合适 喜欢 │
└────────────────────────────┘
第四十八章 推荐卡照片
首页：
1张主头像即可。
详情页再浏览更多照片。
避免首页变图片瀑布流。
第四十九章 推荐卡昵称
不要显示真实姓名。
示例：
王女士
李先生
或平台生成展示名。
第五十章 推荐卡认证
可以小型 Badge：
已实名
资料已审核
但不要堆三四个Badge。
第五十一章 匹配等级
只使用：
很合适
比较合适
值得了解
不使用数字。
第五十二章 推荐理由
首页最多：
2条
详情可展示更多。
第五十三章 推荐操作按钮
左：
不合适
右：
喜欢
喜欢使用品牌主色。
不合适使用：
浅灰描边。
第五十四章 不使用左右滑卡作为主交互
明确继续：
按钮优先。
Swipe只能未来作为辅助。
避免用户误触。
第五十五章 善缘公益服务模块
采用：
一张动态服务建议卡。
不展示八个入口的重复宫格。
第五十六章 Searching服务卡示例
一直没有遇到特别合适的人？
公益红娘可以根据你的条件，
帮你一起看看合适的人。
[申请公益红娘]
第五十七章 Active Match服务卡
刚开始认识，不知道聊什么？
这里有一些第一次聊天的小建议。
[看看沟通建议]
第五十八章 Successful服务卡
正在认真考虑未来？
可以了解善缘丹阳公益婚前辅导。
[了解婚前辅导]
第五十九章 近期活动模块
建议：
横向大卡。
展示 1～2 个。
第六十章 活动卡结构
[16:9活动图片]
青年公益联谊会
公益联谊
09月20日 14:00
万善公园
公益免费 · 报名中
[查看活动]
第六十一章 活动图片比例
16:9
统一。
不要每张图比例不同。
第六十二章 活动标签
使用：
公益联谊
兴趣交友
婚恋课堂
婚前辅导
婚俗新风
反诈科普
第六十三章 服务站首页卡
采用独立横向卡。
示例：
善缘丹阳公益服务站
📍 万善公园婚姻登记处
公益红娘 · 婚恋咨询
婚前辅导 · 活动服务
[查看服务站]
第六十四章 服务站卡视觉
背景可以：
极浅绿色/米白。
与婚恋推荐区稍微区分。
强调：
线下真实阵地。
第六十五章 婚恋课堂模块
采用：
文章列表，而非卡片瀑布。
第六十六章 课堂单条
[小缩略图]
第一次见面聊什么更自然？
婚恋课堂 · 5分钟阅读
第六十七章 安全提醒
首页最底部：
🛡 善缘提醒
交往过程中请谨慎涉及借款、
投资和个人隐私。
查看婚恋反诈指南 >
视觉弱化但持续存在。
第六十八章 找对象页 U19
顶部：
找对象
第二行：
[筛选条件]
第六十九章 找对象页搜索
不建议大搜索框搜昵称。
主要用：
筛选。
按钮：
筛选
第七十章 筛选条
显示：
年龄
地区
身高
婚姻状况
更多
用户可快速调整临时筛选。
第七十一章 用户列表
使用：
双列卡片或单列卡片？
建议 V1.1：
单列紧凑卡片。
原因：
- 更容易展示资料
- 适合成年用户
- 减少看脸为主
第七十二章 用户详情 U21
结构：
照片
↓
基本资料
↓
认证状态
↓
自我介绍
↓
生活方式
↓
婚恋态度
↓
推荐理由
↓
固定底部操作
第七十三章 用户详情图片
顶部支持：
横向Swipe照片
但不做全屏短视频风。
第七十四章 用户详情隐私
禁止显示：
真实姓名
手机号
微信号
单位精确名称（除非用户主动公开且合规）
详细地址
身份证
第七十五章 用户详情底部操作
固定：
[不合适] [喜欢]
若已经Like：
已喜欢
第七十六章 Mutual Success 页面
双方喜欢后：
避免过度庆祝动画。
建议：
你们互相喜欢
可以开始认识彼此了
[打个招呼]
[稍后再说]
第七十七章 消息页 U23
继续采用：
接近微信熟悉结构。
顶部：
聊天 | 系统通知
第七十八章 聊天列表
每行：
头像
名称
最后一条消息
时间
未读点
第七十九章 系统通知
卡片分：
匹配
审核
活动
红娘
咨询
安全
图标轻量区分。
第八十章 聊天页 U24
顶部：
< 王女士
右侧：
...
更多内：
举报
解除匹配
拉黑
第八十一章 Chat 风险提示
首次Chat顶部可以显示一次：
请谨慎涉及借款、投资及个人隐私
可关闭。
不每次出现。
第八十二章 聊天输入区
V1.1：
文字输入
图片
Emoji
发送
不显示：
- 语音
- 视频
- 位置
- 红包
第八十三章 活动首页 U27
顶部：
公益活动
分类水平Tab：
全部
交友
兴趣
课堂
辅导
公益
第八十四章 活动首页Banner
不建议再增加大型Banner。
首页已经有运营Banner。
活动页顶部只可有：
一张小型重点活动卡。
避免重复。
第八十五章 活动详情 U28
首屏：
活动封面
活动标题
类型
时间
地点
公益免费
第八十六章 活动详情正文
顺序：
活动介绍
适合人群
报名要求
活动流程
注意事项
主办/执行
底部：
[立即报名]
第八十七章 活动报名 U29
尽量无长表。
页面显示：
将使用以下资料报名
年龄 32
区域 丹阳
实名 已完成
资料审核 已完成
[确认报名]
第八十八章 活动签到 U31
页面突出：
二维码。
我的签到码
[QR]
活动名称
签到时间
不要显示身份证信息。
第八十九章 活动反馈 U32
避免一次十几题。
核心：
总体体验
组织体验
是否愿意参加类似活动
意见
交友型活动：
单独进入“活动后互选”。
第九十章 活动互选页面
标题：
想继续了解谁？
说明：
你的选择只有在对方也选择你时才会被双方知道。
这是必须高亮的隐私说明。
第九十一章 双向互选结果
不能直接写：
匹配成功。
使用：
你们在活动中互有好感
按钮：
[愿意开启线上沟通]
[暂时不了]
第九十二章 双方确认后
显示：
你们都愿意进一步了解
现在可以在善缘丹阳开始聊天了
[开始聊天]
第九十三章 公益红娘首页 U33
首屏：
公益红娘
如果自己找了很久仍没有遇到合适的人，
可以申请公益红娘帮助。
第九十四章 红娘服务卡
显示：
帮我推荐合适的人
帮我看看择偶条件
帮我联系意向对象
想参加活动
第九十五章 已有红娘服务
首页改为：
我的公益红娘
王老师
乐活公益
服务中
下一步：
等待查看红娘推荐
第九十六章 红娘推荐页面 U36
外观与普通推荐一致。
顶部明确：
公益红娘推荐
可以显示：
红娘推荐理由
但仍不能出现：
“红娘担保”。
第九十七章 婚恋咨询介绍 U55
页面风格：
服务介绍，不像医疗预约。
结构：
婚恋咨询
↓
你可以获得哪些帮助
↓
适合哪些情况
↓
服务方式
↓
隐私说明
↓
申请服务
第九十八章 服务帮助卡
例如：
择偶困惑
不知道什么样的人更适合自己
沟通相处
不知道如何表达和沟通
婚恋焦虑
面对婚恋问题有压力
避免诊断型标签。
第九十九章 婚恋咨询申请 U56
采用单页简表。
我希望得到哪方面帮助？
[择偶困惑]
[沟通相处]
[情感困惑]
[婚恋焦虑]
[其他]
希望服务方式
○ 线下
○ 电话
○ 其他
希望时间
简单说说你的需求
第一百章 咨询申请隐私提示
表单底部：
请只填写完成服务所必要的信息，
不建议上传完整聊天记录或敏感资料。
第一百零一章 我的咨询 U57
采用：
服务卡列表。
公益婚恋咨询
已预约
09月18日 14:00
线下服务
[查看详情]
第一百零二章 婚前辅导 U58
视觉可以比婚恋咨询：
更温暖、更成熟。
不使用：
婚礼摄影大片。
第一百零三章 婚前辅导内容
模块：
关系沟通
家庭责任
财务与生活规划
家庭边界
冲突处理
文明婚嫁
第一百零四章 婚恋反诈中心 U60
顶部Banner式轻卡：
婚恋交友，也要保护好自己
下方：
常见骗局
借款风险
投资理财
虚假身份
线下见面安全
隐私保护
第一百零五章 反诈内容图标
使用：
Shield、Wallet Alert、ID、Location。
不使用：
恐怖警示图。
避免用户焦虑。
第一百零六章 反诈举报CTA
页面底部：
遇到可疑情况？
[我要举报]
第一百零七章 婚恋课堂 U53
顶部分类：
全部
择偶
沟通
关系
婚前
婚俗
反诈
第一百零八章 内容列表
使用：
图 + 标题 + 摘要 + 阅读时间
不显示：
- 阅读量排名
- 点赞量
- 热搜
第一百零九章 内容详情 U54
正文宽度：
全屏减32px。
字号：
16px
行高：
1.75
适合长期阅读。
第一百一十章 内容尾部关联服务
例如婚恋沟通文章：
如果你需要进一步帮助
[申请婚恋咨询]
反诈文章：
遇到可疑情况
[我要举报]
第一百一十一章 善缘服务站 U50
视觉目标：
真实线下服务点。
首屏：
[服务站实景图]
善缘丹阳公益服务站
万善公园婚姻登记处
第一百一十二章 服务站信息卡
📍 地址
🕘 服务时间
☎ 联系电话
🧭 导航
按钮：
[地图导航]
第一百一十三章 服务站服务项目
使用四张小卡：
公益红娘
婚恋咨询
婚前辅导
活动服务
第一百一十四章 服务站预约
底部：
[预约公益服务]
进入 U51。
第一百一十五章 服务预约 U51
采用：
Step-by-Step。
Step 1：
你需要什么服务？
Step 2：
希望什么时候？
Step 3：
补充说明
Step 4：
确认预约
第一百一十六章 预约成功页
预约已提交
工作人员确认后，
我们会通过系统通知告诉你。
[查看我的预约]
避免：
“预约成功”造成已经确认时间的误解。
第一百一十七章 我的预约 U52
状态标签：
待确认
已确认
已完成
已取消
第一百一十八章 本地资格说明 U62
不要像行政审核页面。
使用：
为什么需要确认本地资格？
解释：
善缘丹阳主要服务在丹阳工作、居住或拥有丹阳户籍的单身人士。
第一百一十九章 本地资格选择
大按钮：
○ 丹阳户籍
○ 在丹阳工作
○ 在丹阳长期居住
○ 其他符合项目服务条件
第一百二十章 需要补充材料 U63
文案：
为了完成本地资格核验，
请补充一项能够说明你在丹阳工作或居住的材料。
避免：
“你被怀疑”。
第一百二十一章 上传证明
上传卡：
+ 上传佐证
下面明确：
仅用于资格审核，不对其他用户展示。
第一百二十二章 我的页面 U37
整体采用分组列表。
顶部：
[头像]
展示名
资料完整度
已实名 | 本地资格 | 资料已审核
第一百二十三章 我的第一组
我的资料
择偶条件
我的缘分
第一百二十四章 我的第二组：公益服务
我的红娘
我的咨询
我的活动
我的预约
公益服务记录
第一百二十五章 我的第三组：安全
隐私设置
黑名单
举报与安全
账号设置
第一百二十六章 我的第四组
婚恋课堂
婚恋反诈
善缘服务站
关于善缘丹阳
第一百二十七章 公益服务记录 U64
使用时间轴。
例如：
09月18日
公益婚恋咨询
已完成
09月10日
青年公益联谊会
已参加
08月25日
公益红娘服务
服务中
不展示内部备注。
第一百二十八章 关于善缘丹阳
视觉更偏：
公益项目介绍。
模块：
项目介绍
公益性质
服务内容
服务阵地
主办/执行信息
联系我们
不要做领导介绍页面。
第一百二十九章 未登录/未准入状态设计
即使不能找对象，也不要整个平台只剩认证页面。
允许浏览：
项目介绍
公开活动
婚恋课堂
婚恋反诈
服务站
具体报名权限服务端判断。
第一百三十章 未完成准入首页
Banner后不展示真实候选。
推荐区域改成：
完成资料后开始寻找合适的人
✓ 微信登录
✓ 手机绑定
✓ 实名认证
○ 本地资格
○ 婚恋资料
○ 人工审核
[继续]
第一百三十一章 审核中首页
显示：
资料审核中
你可以先看看：
公益活动
婚恋课堂
婚恋反诈
第一百三十二章 无候选首页
不要显示空白。
暂时没有找到完全符合双方条件的人
你可以：
[查看择偶条件]
[申请公益红娘]
[看看近期活动]
第一百三十三章 网络异常状态
每个模块单独容错。
例如首页：
Banner失败：
不影响推荐。
内容失败：
不影响找对象。
第一百三十四章 Skeleton
首页：
- Banner Skeleton
- Quick Entry可立即静态显示
- 推荐卡 Skeleton
- 活动 Skeleton
避免：
整页大Loading。
第一百三十五章 空状态视觉
统一组件：
EmptyState
结构：
简单插画
一句说明
一个主要操作
第一百三十六章 ErrorState
结构：
暂时没加载成功
[重新加载]
不要：
系统异常500
第一百三十七章 Toast
只用于：
- 成功
- 轻提示
例如：
已提交
已保存
第一百三十八章 Dialog
用于：
- Block
- Unmatch
- 取消预约
- 活动取消
- 退出服务
明确后果。
第一百三十九章 BottomSheet
优先用于：
- Filter
- Action Menu
- Picker
减少复杂跳页。
第一百四十章 Disabled按钮
必须说明为什么不可用。
例如：
[立即报名]
当前资料审核未完成
不要只是灰色按钮无解释。
第一百四十一章 Accessibility
必须保证：
- 文本对比度
- 大字体可用
- 点击区足够
- 状态不能只靠颜色
第一百四十二章 状态Badge
统一语义：
成功/通过 绿色
处理中 暖橙
暂停 灰
风险/失败 红色
普通信息 蓝灰
第一百四十三章 用户隐私Badge
例如：
已实名
资料已审核
不使用：
官方认证
100%真实
第一百四十四章 后台整体风格
Web后台：
简洁、业务效率优先。
不需要沿用用户端大量浪漫元素。
第一百四十五章 后台布局
左侧导航
+
顶部操作栏
+
主工作区
第一百四十六章 后台Sidebar
建议：
220px
折叠可选。
第一百四十七章 后台一级菜单
V1.1：
工作台
用户管理
资料审核
匹配管理
公益红娘
公益咨询
活动管理
内容管理
服务站
举报风控
数据统计
组织人员
系统设置
审计安全
第一百四十八章 后台菜单按权限显示
例如 Counselor：
工作台
公益咨询
即可。
不展示其他无关功能。
第一百四十九章 Reviewer工作台
第一屏：
待审核 28
我已领取 5
待复审 3
下方直接：
待审核列表。
第一百五十章 Matchmaker工作台
第一屏：
新服务
今日待跟进
等待用户
下方：
今日任务。
第一百五十一章 Counselor工作台
第一屏：
新咨询
今日预约
待跟进
不要展示整个用户池。
第一百五十二章 Service Station工作台
第一屏：
今日预约
待确认
今日服务
突出：
现场执行。
第一百五十三章 Activity Manager工作台
近期活动
待审核报名
今日签到
第一百五十四章 Risk Operator工作台
高风险
待处理
即将超时
第一百五十五章 Banner后台
列表字段：
预览
标题
目标
受众
开始
结束
状态
排序
第一百五十六章 Banner编辑页
左侧：
表单。
右侧：
手机Banner实时预览。
这是很有价值的后台能力。
第一百五十七章 内容后台
列表：
标题
分类
状态
发布时间
编辑人
第一百五十八章 内容编辑
编辑区：
标题
摘要
封面
分类
正文
右侧：
小程序文章预览。
第一百五十九章 咨询后台列表
字段：
服务编号
用户
类型
状态
负责人员
预约时间
下一步
默认不显示：
咨询内容摘要。
第一百六十章 咨询详情
区域：
用户必要信息
服务需求
预约信息
服务记录
下一步
敏感内容区域要明显：
权限限制。
第一百六十一章 服务站预约后台
桌面列表：
预约号
用户
服务类型
日期
状态
负责人
现场手机视图：
卡片化。
第一百六十二章 活动后台
创建活动使用：
分区表单。
基本信息
报名规则
容量
组织
签到
活动后互选
避免一页几十字段。
第一百六十三章 ActivityType不同显示不同字段
反诈课堂：
隐藏互选设置。
相亲活动：
显示互选设置。
这是UI层动态表单。
第一百六十四章 后台敏感字段默认脱敏
例如：
138****1234
张**
完整查看：
需要单独操作。
第一百六十五章 敏感查看动作
点击：
查看完整信息
弹：
请选择查看原因
确认后才显示。
第一百六十六章 后台危险操作
例如：
封禁
取消活动
停用工作人员
不要使用醒目大红主按钮。
放：
更多操作。
第一百六十七章 高保真页面优先级
第一批必须先做高保真：
U18 首页
U19 找对象
U21 用户详情
U23 消息
U24 Chat
U27 活动
U28 活动详情
U33 公益红娘
U37 我的
U50 服务站
U55 婚恋咨询
U60 婚恋反诈
第一百六十八章 第二批
U51 服务预约
U53 婚恋课堂
U54 内容详情
U56 咨询申请
U57 我的咨询
U58 婚前辅导
U62 本地资格
U64 服务记录
第一百六十九章 首页主要组件
建议组件：
BrandHeader
UserStatusStrip
HomeBannerCarousel
QuickEntryGrid
HomeRecommendationSection
RecommendCardCompact
ServiceRecommendationCard
ActivityPreviewCard
ServiceLocationCard
ArticleListItem
SafetyNoticeCard
第一百七十章 新增业务组件
ServiceTypeCard
AppointmentCard
CounselingServiceCard
ContentCategoryTabs
LocalEligibilityOption
EvidenceUploader
ServiceHistoryItem
ActivityMutualConsentCard
第一百七十一章 复用原则
不要新页面每次重新写：
- Button
- Badge
- Card
- Empty
- Modal
- Uploader
必须复用已有组件库。
第一百七十二章 Design Token新增
建议新增语义Token：
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情侣插画。
第一百七十四章 空状态插画
可以使用：
轻量线性公益插画。
但整套风格必须统一。
第一百七十五章 推荐内容视觉红线
用户卡不能突出：
收入
资产
房车
职位等级
即使数据未来存在也不作为视觉重点。
第一百七十六章 文案语气
统一：
温和、平等、尊重。
第一百七十七章 推荐文案
不使用：
条件优秀
高质量对象
热门用户
使用：
符合你的部分择偶偏好
双方条件比较合适
值得进一步了解
第一百七十八章 无匹配文案
不使用：
你的要求太高
使用：
按照当前“必须符合”的条件，
暂时没有找到合适的人。
第一百七十九章 红娘文案
不使用：
红娘为你安排
使用：
红娘为你推荐
第一百八十章 咨询文案
不使用：
情感有问题
心理问题
使用：
在婚恋、沟通和关系中遇到困惑
第一百八十一章 Success文案
不使用：
脱单成功！
推荐：
祝福你们正在认真了解彼此
更符合公益平台定位。
第一百八十二章 安全文案
不恐吓。
不写：
骗子很多，请勿相信任何人
使用：
实名认证和人工审核能够提升信息真实性，
交往过程中仍请保持必要的安全意识。
第一百八十三章 页面性能要求
首屏：
Banner、QuickEntry和骨架优先出现。
不要等待全部Home API数据后：
一次性白屏→整页出现。
第一百八十四章 首页渐进加载
建议：
Brand/Entries
立即渲染
Banner
缓存/网络
Recommendation
请求
Activity/Content
异步
第一百八十五章 图片Lazy Load
用户列表、内容、活动图片：
懒加载。
第一百八十六章 低网速体验
图片失败：
显示占位。
文字业务仍可操作。
第一百八十七章 前端权限原则
用户端：
按 Capability 控制入口。
后台：
按 Permission 控制菜单和按钮。
但服务端始终再次校验。
第一百八十八章 入口Disabled
例如用户未完成审核点击“找对象”：
不要跳错误页面。
显示：
完成资料审核后即可使用找对象服务
[查看审核状态]
第一百八十九章 服务型功能开放策略
未审核用户仍可：
婚恋课堂
反诈
服务站
部分公益活动
匹配类能力：
按准入状态限制。
第一百九十章 首页状态适配矩阵
| 用户状态 | Banner | 找对象 | 推荐 | 红娘 | 活动 | 咨询 | 内容 |
|---|---|---|---|---|---|---|---|
| 未登录 | 是 | 引导登录 | 否 | 介绍 | 公开活动 | 介绍 | 是 |
| 未实名 | 是 | 引导实名 | 否 | 介绍 | 按规则 | 可介绍 | 是 |
| 审核中 | 是 | 不可 | 否 | 可介绍 | 按规则 | 可申请 | 是 |
| Searching | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| Paused | 是 | 可恢复 | 否 | 是 | 是 | 是 | 是 |
| Successful | 是 | 弱化 | 否 | 弱化 | 是 | 是 | 是 |
第一百九十一章 首页高保真验收
必须做到：
5秒知道平台是什么
5秒看到主要入口
5秒找到“找对象”
Banner不压住核心入口
推荐仍然是首页视觉核心之一
首页没有商业广告感
第一百九十二章 新服务高保真验收
婚恋咨询：
不能像医院挂号系统。
服务站：
不能像地图黄页。
婚前辅导：
不能像婚庆销售。
婚恋课堂：
不能像新闻门户。
第一百九十三章 活动高保真验收
相亲活动：
温暖、轻松。
课堂：
专业、清爽。
反诈：
安全、可信。
同一Activity框架但不同内容视觉。
第一百九十四章 后台高保真验收
角色进入后台第一屏：
知道今天做什么。
不能：
先看十几个数据图。
第一百九十五章 前端开发交付要求
Codex前端必须实现：
Design Tokens
基础组件
业务组件
页面
状态
Skeleton
Empty
Error
Permission
Responsive
第一百九十六章 不接受的实现
不接受：
页面全是硬编码颜色
组件复制粘贴
不同页面按钮风格不同
状态只靠文字
无Loading
无Empty
无Error
第一百九十七章 高保真原型建议设备
主要小程序参考：
375 × 812
同时验收：
320
390
430
第一百九十八章 Web后台基准
主要：
1440 × 900
兼容：
1366 × 768
第一百九十九章 用户端最终视觉架构
善缘丹阳品牌
│
↓
公益可信感
│
┌──────┼───────┐
↓ ↓ ↓
找对象 人工服务 公益赋能
↓ ↓ ↓
推荐 红娘 课堂
Match 活动 反诈
Chat 咨询 婚前辅导
服务站 婚俗新风
第二百章 最终UI原则
Banner有运营感，但不能有广告感。
核心入口明显，但不能像超级App九宫格。
推荐对象重要，但不能只看脸。
公益服务丰富，但不能增加用户学习成本。
线下服务真实存在，因此服务站应有真实空间感。
婚恋咨询专业但不医疗化。
婚前辅导温暖但不婚庆化。
婚恋反诈持续提醒但不制造恐惧。
后台功能丰富但工作人员只看到与自己工作有关的内容。
第二百零一章 最终首页定稿结构
┌─────────────────────────────┐
│ 善缘丹阳 🔔 │
│ 丹阳公益婚恋服务平台 │
│ 真实 · 公益 · 本地 · 安全 │
├─────────────────────────────┤
│ 用户状态 │
├─────────────────────────────┤
│ │
│ Banner Carousel │
│ │
├─────────────────────────────┤
│ 找对象 | 红娘 | 活动 | 咨询 │
│ 课堂 | 婚前 | 反诈 | 服务站 │
├─────────────────────────────┤
│ 今日推荐 更多 │
│ [推荐卡] │
│ [推荐卡] │
├─────────────────────────────┤
│ 善缘公益服务 │
│ [状态相关服务建议] │
├─────────────────────────────┤
│ 近期公益活动 更多 │
│ [活动卡] │
├─────────────────────────────┤
│ 善缘丹阳公益服务站 │
│ [查看服务站] │
├─────────────────────────────┤
│ 婚恋课堂 更多 │
│ 内容1 │
│ 内容2 │
├─────────────────────────────┤
│ 🛡 善缘提醒 │
│ 婚恋反诈指南 > │
└─────────────────────────────┘
首页 | 找对象 | 消息 | 活动 | 我的
第二百零二章 最终结论
V1.1 前端视觉升级后，“善缘丹阳”必须让用户同时感受到三件事：
第一：
这是一个可信的丹阳本地公益婚恋平台。
第二：
我可以非常容易地找到对象、红娘、活动和婚恋咨询。
第三：
这不是一个只负责“配对”的App，在婚恋过程中需要帮助时，我还能找到真实的公益服务。
因此前端设计最终形成：
品牌信任
+
Banner运营
+
核心入口
+
精准推荐
+
人工公益服务
+
线下服务阵地
+
婚恋赋能
+
持续安全保护
而整个系统依然保持：
页面简单、按钮清楚、状态易懂、普通用户不需要学习。