# “善缘丹阳”公益婚恋服务平台 # 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运营 + 核心入口 + 精准推荐 + 人工公益服务 + 线下服务阵地 + 婚恋赋能 + 持续安全保护 ``` 而整个系统依然保持： > **页面简单、按钮清楚、状态易懂、普通用户不需要学习。**