admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
8dee67040c81edf81c305b051b07520bfcb22e78
danyang-match/前端UIUX视觉与原型设计规范.md
T

2651 lines
32 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 丹阳公益婚恋服务平台
# V1.0 前端UI/UX视觉与原型设计规范
版本：V1.0
适用范围：微信小程序用户端、公益红娘工作台、运营管理后台
设计目标：简洁、可信、温暖、安全、高效、低学习成本
---
# 第一章 设计目标
本产品不是商业婚恋娱乐平台，也不是年轻化社交娱乐平台。
因此整体视觉设计必须避免：
- 过度娱乐化
- 过度粉色化
- 过度暧昧化
- 直播平台风格
- 夜店社交风格
- 游戏化
- 会员付费感
- 复杂信息堆叠
平台应该让用户第一感觉是：
> 这是一个正规、可信、安全、有人负责的公益婚恋服务平台。
第二感觉是：
> 很简单，我知道下一步要做什么。
第三感觉是：
> 这里不是让我“刷人”，而是真正帮助我找到合适的人。
---
# 第二章 UI设计关键词
整体设计建议围绕以下六个关键词：
## 2.1 可信
视觉必须体现：
- 正规
- 清晰
- 有秩序
- 信息透明
- 无商业套路感
---
## 2.2 温暖
婚恋服务具有情感属性。
但“温暖”不等于：
> 大面积粉红色 + 爱心 + 卡通。
应该通过：
- 柔和圆角
- 留白
- 轻柔色彩
- 自然照片
- 温和文案
体现。
---
## 2.3 公益
不能出现：
- VIP
- 金币
- 充值
- 礼物
- 特权
- 会员中心
- 付费标签
视觉上也不要模仿商业婚恋APP的“高端会员”设计。
---
## 2.4 安全
实名、人工审核、举报、隐私等安全能力，需要在关键位置清晰出现。
但不要制造焦虑。
应该让用户感受到：
> 平台在保护我。
而不是：
> 平台到处警告我有骗子。
---
## 2.5 简洁
一个页面原则上：
> 一个主要任务。
避免同时出现多个一级CTA。
---
## 2.6 本地
适当体现：
> 丹阳本地公益婚恋服务
但不要做成政务系统。
视觉上需要：
> 公益平台的可信度 + 消费级产品的易用性。
---
# 第三章 整体视觉方向
建议采用：
> **现代简洁 + 温暖公益 + 轻婚恋属性**
而不是传统婚恋网站风格。
---
# 第四章 品牌主色建议
建议使用：
> 暖珊瑚红作为品牌主色。
推荐主色参考：
```text id="9tzzcu"
Primary
#E96B6B
```
特点：
- 有婚恋感
- 不俗艳
- 不过度女性化
- 比大红更加柔和
- 比粉红更成熟
---
# 第五章 辅助色体系
## 5.1 品牌浅色
```text id="gx69cf"
#FFF3F2
```
用于：
- 卡片背景
- 推荐理由区域
- 轻提醒
- 空状态背景
---
## 5.2 成功色
```text id="l3kqpu"
#2E9B68
```
用于：
- 已认证
- 审核通过
- 报名成功
- 已签到
---
## 5.3 警告色
```text id="c4f96x"
#E59A32
```
用于：
- 待审核
- 风险提醒
- 需补充资料
---
## 5.4 错误色
```text id="8yhdla"
#D94A4A
```
用于：
- 违规
- 举报
- 错误
- 高风险
---
## 5.5 信息色
```text id="go6ord"
#4A7CD4
```
用于：
- 系统信息
- 蓝色链接
- 辅助说明
---
# 第六章 中性色
建议统一使用以下逻辑。
```text id="soignv"
主文字：
#222222
正文：
#444444
辅助文字：
#777777
弱提示：
#999999
分割线：
#EEEEEE
页面背景：
#F7F8FA
卡片背景：
#FFFFFF
```
---
# 第七章 页面背景
用户端：
> 默认浅灰白背景。
推荐：
```text id="16josn"
#F7F8FA
```
不要纯白页面从头到底。
通过：
> 灰背景 + 白卡片
建立层级。
---
# 第八章 字体规范
微信小程序优先使用系统字体。
不额外加载复杂字体。
推荐：
```text id="19i45m"
iOS:
PingFang SC
Android:
Noto Sans SC / 系统默认中文字体
```
原则：
> 清晰优先，品牌字体不是V1重点。
---
# 第九章 字号体系
建议统一控制。
## 大标题
```text id="85brv0"
24px
Semibold
```
用于：
- 登录欢迎
- 匹配成功
- 空状态核心标题
---
## 页面标题
```text id="4lm3sk"
20px
Semibold
```
---
## 卡片主标题
```text id="sn1f9r"
18px
Semibold
```
例如：
> 王女士
---
## 正文
```text id="hzgm8u"
15px～16px
Regular
```
---
## 辅助信息
```text id="qy058w"
13px～14px
```
---
## 极弱信息
```text id="lixbw4"
12px
```
尽量少用小于12px文字。
---
# 第十章 行高
正文建议：
```text id="fcx0ro"
1.5～1.7倍
```
个人介绍、活动说明等长文本需要舒适阅读。
---
# 第十一章 圆角规范
统一圆角，不要一个页面五种圆角。
建议：
```text id="j9436x"
小控件：
8px
按钮：
12px
普通卡片：
16px
重点大卡片：
20px
```
用户头像：
> 圆形或轻圆角方形。
推荐优先：
> 圆角方形照片。
因为婚恋资料照片比纯圆头像展示信息更多。
---
# 第十二章 阴影规范
V1不要使用明显重阴影。
建议卡片：
```text id="6v1wi8"
轻阴影
低透明度
```
更多依赖：
> 留白 + 背景色差
建立层级。
---
# 第十三章 页面左右边距
小程序统一：
```text id="n26832"
16px
```
大卡片与屏幕边缘保持稳定距离。
---
# 第十四章 页面纵向节奏
建议：
```text id="p9hj3h"
区块间距：
20～24px
卡片内部：
16px
文本小间距：
6～8px
```
不要挤。
---
# 第十五章 按钮体系
按钮严格分三级。
---
# 第十六章 一级按钮
核心操作。
例如：
- 继续
- 提交审核
- 喜欢
- 立即报名
- 开始聊天
- 提交申请
样式：
```text id="eojpw7"
高度：48px
圆角：12px
背景：品牌主色
文字：白色
字号：16px
字重：Medium
```
一个页面原则上：
> 最多一个一级按钮。
---
# 第十七章 二级按钮
例如：
- 查看资料
- 返回修改
- 稍后再聊
- 放宽条件
样式：
```text id="ydtoqg"
白色背景
主色边框
主色文字
```
---
# 第十八章 三级按钮
轻操作。
例如：
- 取消喜欢
- 查看更多
- 编辑
- 解除黑名单
使用：
> 文字按钮。
不要所有操作都做成大按钮。
---
# 第十九章 危险操作按钮
例如：
- 举报
- 拉黑
- 封禁
- 删除
- 注销
统一使用：
> 红色文字 / 红色描边。
不要与主按钮颜色混淆。
---
# 第二十章 底部Tab导航
固定五项：
```text id="pgbqqg"
首页
找对象
消息
活动
我的
```
图标采用：
> 简洁线性图标。
不使用卡通图标。
---
# 第二十一章 Tab图标建议
首页：
> Home
找对象：
> Search / Heart Search
消息：
> Message
活动：
> Calendar / Users
我的：
> User
选中状态：
> 品牌主色。
未选中：
> 灰色。
---
# 第二十二章 首页原型结构
首页是整个产品最重要的页面。
建议结构：
```text id="vjcvm7"
┌──────────────────────┐
│ 上午好，张先生 │
│ 今天为你推荐6位朋友 │
│ │
│ ┌──────────────────┐ │
│ │ 用户主照片 │ │
│ │ │ │
│ │ 王女士 32岁 │ │
│ │ 165cm · 丹阳 │ │
│ │ 本科 · 教师 │ │
│ │ 已实名 已审核 │ │
│ │ │ │
│ │ 为什么推荐给你 │ │
│ │ ✓ 年龄符合 │ │
│ │ ✓ 同城 │ │
│ │ ✓ 婚恋计划一致 │ │
│ │ │ │
│ │ 不合适 查看资料 喜欢 │ │
│ └──────────────────┘ │
│ │
│ 公益红娘可以帮你找 │
│ [申请红娘帮助] │
│ │
│ 本周公益相亲活动 │
└──────────────────────┘
```
---
# 第二十三章 推荐卡片设计
推荐卡片是高频组件。
建议结构：
## 顶部
大照片。
比例建议：
```text id="w0a9e9"
4:5
```
不要使用非常窄的头像。
---
## 中部
重点展示：
```text id="610xp9"
王女士 · 32岁
165cm · 丹阳
本科 · 教师
未婚
```
最多3行。
---
## 认证标签
使用小型图标+文字：
> 已实名
> 已审核
不要使用金色皇冠或VIP式徽章。
---
# 第二十四章 推荐理由区域
使用浅品牌色背景。
例如：
```text id="xbgrqx"
为什么推荐给你
✓ 年龄符合双方要求
✓ 都希望长期在丹阳生活
✓ 婚恋计划比较一致
```
最多3～4项。
不要显示大量算法信息。
---
# 第二十五章 推荐卡底部操作
建议三按钮：
```text id="tknh3q"
不合适 查看资料 喜欢
```
布局：
- 不合适：弱按钮
- 查看资料：二级按钮
- 喜欢：一级按钮
“喜欢”必须最突出。
---
# 第二十六章 首页不要做的内容
不得放：
- 轮播广告
- 资讯新闻流
- 商业Banner
- VIP入口
- 排行榜
- 推荐商品
- 直播入口
- 短视频流
- 签到
- 每日任务
---
# 第二十七章 找对象页设计
结构：
```text id="46jqw3"
找对象 筛选
推荐给你
────────────────
[照片] 王女士 31岁
丹阳 · 本科
医疗行业
已实名
[照片] 李女士 33岁
丹阳 · 教育
未婚
已实名
```
建议：
> 纵向列表。
不要做双列瀑布流。
原因：
婚恋不是商品浏览。
纵向列表可展示更多有效资料。
---
# 第二十八章 找对象卡片
高度适中。
左侧：
> 照片。
右侧：
- 名称
- 年龄
- 身高
- 地区
- 职业
- 婚姻状态
- 认证
底部不需要多个按钮。
整张卡：
> 点击进入详情。
---
# 第二十九章 筛选页面设计
不要出现复杂表格式筛选器。
采用分组：
```text id="x6pufy"
年龄
28 ───────── 35
身高
160 ──────── 175
地区
[丹阳]
婚姻状态
[未婚] [离异] [丧偶]
学历
[不限] [大专+] [本科+]
是否接受有子女
[不限] [接受] [不接受]
───────────────
重置 查看结果
```
---
# 第三十章 “必须符合”视觉
不要用复杂配置。
例如：
```text id="t4fybj"
年龄：28～35岁
重要程度
○ 必须符合
● 最好符合
```
并用弱文字说明：
> 必须符合的条件不会被系统放宽。
---
# 第三十一章 用户详情页结构
建议采用：
> 从“人”到“信息”的自然阅读顺序。
---
# 第三十二章 详情页第一屏
```text id="0xhrz2"
大照片
王女士 · 32岁
165cm · 丹阳
本科 · 教师
[已实名] [资料已审核]
♥ 喜欢
```
核心操作始终清楚。
---
# 第三十三章 用户详情模块顺序
建议固定：
1. 基础信息
2. 关于TA
3. TA的介绍
4. TA的兴趣
5. TA的生活照片
6. 婚恋态度
7. 择偶期待
8. 推荐理由
9. 安全举报入口
---
# 第三十四章 信息卡片
每组内容使用白卡片。
例如：
```text id="d7v6d6"
关于TA
婚姻状况 未婚
是否有子女 无
学历 本科
职业 教师
居住区域 丹阳
是否吸烟 不吸烟
```
左标签：
> 灰色。
右信息：
> 深色。
---
# 第三十五章 兴趣标签
使用轻灰或浅品牌背景。
例如：
```text id="5beqjs"
[旅行] [跑步] [电影]
[阅读] [美食]
```
标签不要超过8个。
---
# 第三十六章 照片展示
建议：
> 2列或3列小图宫格。
点击：
> 全屏预览。
不要做类似社交动态流。
---
# 第三十七章 底部固定操作栏
用户详情页建议固定：
```text id="0thwzp"
不合适 喜欢
```
如果双方已经匹配：
```text id="lmswjm"
查看资料 发消息
```
---
# 第三十八章 双向匹配成功页
这是产品最有情绪价值的页面。
但不能过度花哨。
建议：
```text id="4zltiy"
❤️
你们互相喜欢
王女士也愿意进一步了解你
[双方头像]
希望你们有一个好的开始
[开始聊天]
稍后再聊
```
可以使用轻微动效。
例如：
> 爱心淡入。
不要：
- 烟花爆炸
- 游戏奖励
- 大量金币
- 复杂庆祝动画
---
# 第三十九章 消息首页
设计类似主流微信消息列表。
因为用户学习成本最低。
结构：
```text id="8oz1sv"
消息
聊天 | 系统通知
[头像] 王女士
周末有时间吗？
10:32
[头像] 李女士
好的，谢谢
昨天
```
---
# 第四十章 聊天页面
尽量接近微信使用习惯。
用户本人消息：
> 右侧。
对方消息：
> 左侧。
背景：
> 浅灰。
---
# 第四十一章 聊天安全提醒
第一次聊天顶部使用浅黄色卡片：
```text id="go9m21"
安全提醒
请保护个人隐私，谨慎涉及转账、
借款、投资等资金往来。
```
允许：
> 关闭。
之后不反复出现。
---
# 第四十二章 风险提示
如果触发敏感关键词：
系统消息形式插入：
```text id="mgspaz"
安全提醒
交友过程中请谨慎涉及资金往来，
不要轻信投资、借款等要求。
```
风格：
> 不制造恐慌。
---
# 第四十三章 活动首页
整体可以比匹配页面稍活泼。
结构：
```text id="te1n4c"
公益相亲活动
即将开始
┌────────────────┐
│ 活动封面 │
│ 丹阳青年公益相亲会 │
│ 9月20日 14:00 │
│ 丹阳××活动中心 │
│ 公益免费 │
│ [查看详情] │
└────────────────┘
已报名
往期活动
```
---
# 第四十四章 活动卡片
建议突出：
- 时间
- 地点
- 活动名称
- 免费
- 报名状态
不要强调：
> “已有999人疯抢”。
避免商业促销感。
---
# 第四十五章 活动详情页
结构：
1. 活动封面
2. 活动名称
3. 时间
4. 地点
5. 主办单位
6. 适合人群
7. 活动介绍
8. 活动流程
9. 注意事项
底部固定：
> 立即报名。
---
# 第四十六章 报名成功状态
页面不要只Toast。
建议轻量成功页：
```text id="l29fqd"
✓ 报名已提交
工作人员审核后会通过系统消息通知你。
[查看我的活动]
```
---
# 第四十七章 公益红娘页面视觉
红娘模块不要像客服中心。
首页：
```text id="3nzh2d"
公益红娘
没找到合适的人？
公益红娘可以协助你进一步筛选和牵线。
[申请红娘帮助]
──────────────
我的服务
服务中 1
红娘推荐
2位
```
重点：
> 有温度，但专业。
---
# 第四十八章 红娘人物展示
如果显示红娘：
建议显示：
- 姓名
- 所属公益机构
- 公益红娘
- 服务状态
例如：
```text id="ufbww1"
张老师
丹阳××公益服务中心
公益红娘
正在为你服务
```
不要展示：
> 金牌红娘 / 皇冠红娘 / 钻石顾问
等商业营销标签。
---
# 第四十九章 我的页面
结构尽量清楚。
```text id="31ousx"
[头像]
张先生
已实名
资料已审核
资料完整度 85%
[继续完善]
────────────────
婚恋服务
我的资料
我的择偶条件
我的缘分
公益红娘
我的活动
────────────────
安全与隐私
我的认证
隐私设置
黑名单
────────────────
服务
帮助中心
意见反馈
关于平台
```
---
# 第五十章 资料完整度设计
使用：
> 细进度条。
不要用：
- 等级
- 勋章
- 积分
例如：
```text id="3xhjhn"
资料完整度
████████░░ 85%
再完善2项信息，
有助于获得更准确推荐。
```
---
# 第五十一章 实名认证页面视觉
实名页面必须非常正规。
避免婚恋元素。
页面：
```text id="uk30ka"
实名认证
为了保障婚恋交友安全，
需要核验真实身份。
真实姓名
[________]
身份证号码
[________________]
身份信息仅用于认证，
不会向其他用户公开。
[开始认证]
```
---
# 第五十二章 审核中页面
```text id="ymkkuk"
资料审核中
✓ 实名认证已完成
○ 资料人工审核中
工作人员正在审核你的资料。
[查看我的资料]
```
建议使用：
> 插画或简单图标。
不要用复杂人物插画。
---
# 第五十三章 审核退回页面
必须突出具体问题。
```text id="kh1yo3"
需要修改资料
头像需要重新上传
原因：
当前照片无法清楚确认本人。
建议：
请上传清晰、无遮挡的近期本人照片。
[立即修改]
```
---
# 第五十四章 空状态视觉规范
统一使用：
- 简单图标
- 标题
- 一句解释
- 一个下一步按钮
例如：
```text id="2cduyj"
暂无新的推荐
今天暂时没有更多合适的人。
[去找对象]
```
---
# 第五十五章 错误状态
不要显示技术错误。
错误：
> 网络好像有点问题。
按钮：
> 重新加载。
不要显示：
> HTTP 500 / JSON Parse Error。
---
# 第五十六章 用户反馈提示
轻操作使用Toast。
例如：
> 已喜欢
> 保存成功
> 报名已提交
> 已解除拉黑
持续时间：
> 1.5～2秒。
---
# 第五十七章 Modal使用规则
只用于重要确认。
例如：
- 拉黑
- 解除匹配
- 暂停寻找
- 成功牵手
- 注销账户
不要：
> 用户每点一个按钮都弹窗。
---
# 第五十八章 表单组件统一规范
## 输入框
高度：
```text id="d54i1w"
48px
```
背景：
> 白色 / 轻灰。
---
## 单选
大点击面积。
不要只让用户点击小圆点。
整行可点击。
---
## 多选
采用标签按钮。
---
## 日期/年龄
使用：
> Picker。
不要手填数字。
---
## 身高
使用：
> 滚轮 / Picker。
---
# 第五十九章 图片上传组件
主头像：
```text id="w6zszr"
+ 上传本人照片
```
上传完成：
显示：
> 预览 + 更换。
生活照：
> 宫格添加。
每张照片提供：
- 删除
- 设为主头像
---
# 第六十章 用户隐私视觉原则
敏感信息永远不要作为视觉重点。
例如：
> 王女士
而不是：
> 王XX完整实名。
---
# 第六十一章 年龄展示
前台统一：
> 32岁。
不要显示完整出生日期。
---
# 第六十二章 地区展示
前台只显示：
> 丹阳
或者：
> 开发区
如果后期细分。
不要显示：
> 精确街道地址或住宅小区。
---
# 第六十三章 职业展示
默认：
> 教师
> 制造业
> 企业职员
不默认公开：
> XX公司XX部门。
---
# 第六十四章 公益属性展示
建议在以下位置出现：
### 登录页
> 公益婚恋服务
### 活动
> 公益免费
### 关于平台
完整介绍。
### 红娘
> 公益红娘
不要每个页面都强调“公益”。
否则会视觉过载。
---
# 第六十五章 安全标签
推荐统一三个标签组件：
```text id="e5vejf"
✓ 已实名
✓ 资料已审核
公益红娘推荐
```
颜色：
> 绿色 / 蓝绿色。
不要用品牌红色表示认证。
---
# 第六十六章 禁止使用的UI元素
V1前端不得使用：
- 皇冠
- 钻石
- VIP徽章
- 金币
- 火焰
- 热度榜
- 财富等级
- 守护等级
- 礼物动画
- 豪华跑马灯
- 直播浮窗
- 游戏宝箱
- 幸运抽奖
- 连续签到
---
# 第六十七章 动效原则
仅允许轻量动效。
例如：
- 页面淡入
- 卡片切换
- 按钮按压
- 双向喜欢爱心动效
- 加载骨架屏
---
# 第六十八章 禁止动效
禁止：
- 复杂3D动画
- 粒子爆炸
- 大量爱心飞舞
- 抽卡
- 翻牌
- 游戏奖励动画
---
# 第六十九章 首页用户卡片交互
推荐采用：
> 点击按钮。
V1不建议强依赖：
> 左滑不喜欢 / 右滑喜欢。
原因：
滑动交互虽然流行，但容易带来：
> Tinder式快速刷人感。
与你的公益婚恋定位不完全一致。
可以允许：
> 左右切换候选人。
但核心决定仍然通过明确按钮完成。
---
# 第七十章 高龄用户友好性
虽然目标用户是所有成年单身人士，仍需考虑年龄偏大用户。
因此：
- 字号不能太小
- 按钮不能太小
- 不使用隐藏手势作为唯一操作
- 核心按钮必须带文字
- 图标不能代替全部文字
- 操作反馈必须明确
---
# 第七十一章 点击区域
最小有效点击区域建议：
```text id="2ruuch"
44 × 44px
```
避免：
> 很小的“×”。
---
# 第七十二章 返回逻辑
微信小程序保持原生返回逻辑。
禁止随意改变用户预期。
重要流程页面：
> 保存当前填写状态。
避免返回后数据全部丢失。
---
# 第七十三章 首次资料填写体验
顶部进度：
```text id="erbcze"
1 基本资料
2 生活
3 照片
4 婚恋态度
5 择偶条件
```
实际移动端不要显示全部文字。
可以：
```text id="n5bhsc"
完善资料 2/5
```
下面进度条。
---
# 第七十四章 自动保存
资料填写过程建议：
> 每一步自动保存草稿。
用户退出以后重新进入：
> 继续上次填写。
这对降低流失非常重要。
---
# 第七十五章 表单默认值
能推断的安全数据自动填写。
例如：
> 年龄由身份认证产生。
不能替用户推断：
- 婚姻状态
- 是否有子女
- 饮酒习惯
- 择偶要求
---
# 第七十六章 原型重点：首页
高保真原型必须重点验证：
1. 用户是否一眼看到推荐对象
2. 是否一眼理解推荐理由
3. 是否知道哪里点“喜欢”
4. 是否能快速查看详细资料
5. 红娘和活动是否不会抢占核心任务
---
# 第七十七章 原型重点：详情页
重点验证：
- 信息量会不会过多
- 是否容易找到最重要资料
- 是否知道对方是否实名
- 是否容易表达喜欢
- 是否能找到举报入口但不抢眼
---
# 第七十八章 原型重点：筛选页
重点验证：
> 普通用户是否1分钟内可以完成筛选。
如果用户需要：
> 阅读说明书才能理解“必须/最好”
就需要重新设计。
---
# 第七十九章 原型重点：聊天
重点验证：
- 像常用聊天工具一样自然
- 安全提醒不过度打扰
- 举报和解除匹配入口明确
- 不加入无关社交功能
---
# 第八十章 红娘工作台视觉原则
红娘端是工作工具，不是社交产品。
整体采用：
> 白底 + 浅灰工作区 + 清晰状态色。
---
# 第八十一章 红娘工作台布局
PC端：
```text id="g2peuj"
┌────────┬──────────────────┐
│ 左侧菜单 │ 主工作区域 │
│ │ │
│ 工作台 │ 今日待处理 │
│ 服务申请 │ │
│ 我的用户 │ 服务申请列表 │
│ 推荐管理 │ │
│ 跟进记录 │ │
└────────┴──────────────────┘
```
---
# 第八十二章 红娘工作台首页
核心指标卡：
```text id="xepvrs"
今日待处理 8
新申请 3
待跟进 12
推荐待反馈 5
```
不要放复杂大屏。
---
# 第八十三章 红娘服务详情页
推荐：
左侧：
> 用户资料。
中间：
> 服务信息。
右侧：
> 操作与跟进。
例如：
```text id="03nccu"
用户资料 │ 服务需求 │ 当前操作
│ │
张先生 │ 帮我推荐对象 │ 推荐对象
36岁 │ │ 添加跟进
丹阳 │ 最近跟进 │ 完成服务
本科 │ 8月28日 │
```
---
# 第八十四章 后台整体风格
运营后台不要做政务老旧系统。
也不要做科技大屏。
应该：
> 简洁企业后台。
参考现代SaaS后台，但取消商业营销元素。
---
# 第八十五章 后台颜色
后台主色可继续使用品牌红。
但使用比例降低。
主界面：
> 白 + 灰。
主色只用于：
- 主要按钮
- 当前导航
- 核心状态
---
# 第八十六章 后台左侧菜单
固定宽度：
```text id="rwb7cl"
220～240px
```
菜单：
```text id="vr66ms"
工作台
用户管理
资料审核
匹配管理
红娘服务
活动管理
举报风控
数据统计
组织人员
权限管理
系统设置
```
---
# 第八十七章 后台顶部
展示：
- 当前机构
- 当前用户
- 消息
- 退出
不要堆：
- 天气
- 时间
- 欢迎Banner
- 大Logo
---
# 第八十八章 后台工作台
优先：
> 待办。
而不是数据大屏。
建议：
```text id="p7jmn9"
待审核资料 12
待处理举报 2
红娘待分配 5
活动报名待审核 16
```
下面：
> 今日新增数据。
---
# 第八十九章 后台列表规范
列表表头固定。
支持：
- 搜索
- 筛选
- 分页
每页：
> 20 / 50条。
默认20。
---
# 第九十章 后台表格操作
每一行最多直接显示：
> 2～3个常用操作。
例如：
```text id="n1c76x"
查看 | 审核 | 更多
```
不要一行：
> 查看 编辑 删除 封禁 导出 分配 修改……
---
# 第九十一章 审核页面UI
这是后台最高频页面之一。
建议：
```text id="m9sueo"
┌────────────────┬─────────────┐
│ 用户资料预览 │ 审核区 │
│ │ │
│ 头像 │ ✓ 头像 │
│ 基础资料 │ ✓ 基础资料 │
│ 生活照片 │ ! 个人介绍 │
│ 自我介绍 │ │
│ │ [通过] │
│ │ [退回修改] │
└────────────────┴─────────────┘
```
尽量：
> 一屏完成审核。
---
# 第九十二章 举报风控页面
高风险事项使用明显颜色。
但列表默认不要整个页面红色。
例如：
```text id="nszyrw"
诈骗 高风险
骚扰 高
广告 普通
```
使用标签。
---
# 第九十三章 权限页面
不要让普通管理员看到复杂RBAC术语。
页面可以：
```text id="n5evbg"
角色：活动管理员
☑ 查看活动
☑ 创建活动
☑ 编辑活动
☑ 审核报名
☑ 管理签到
☐ 查看身份证信息
☐ 封禁用户
```
简单直观。
---
# 第九十四章 适配规范
用户端：
> 微信小程序优先。
设计基准宽度：
```text id="y2530b"
375px
```
同时适配：
> 320～430px常见移动端宽度。
---
# 第九十五章 红娘端
优先：
> PC Web。
最低建议：
```text id="ydqssk"
1280 × 720
```
同时支持：
> 1366×768
> 1440×900
> 1920×1080
---
# 第九十六章 管理后台
同样优先：
> PC Web。
移动端只要求：
> 基础可查看。
V1不要求后台完整移动操作。
---
# 第九十七章 无障碍与可读性
至少做到：
- 主文字对比度足够
- 不只依赖颜色传达状态
- 错误状态有图标+文字
- 按钮有明确标签
- 重要内容支持较大字号
---
# 第九十八章 文案风格
平台文案统一：
> 自然、直接、温和。
例如：
不使用：
> 恭喜您成功激活缘分权益！
使用：
> 你们互相喜欢，可以开始聊天了。
---
# 第九十九章 禁止使用的文案
禁止：
- 桃花爆棚
- 脱单神器
- 心动暴击
- 高富帅
- 白富美
- 抢先解锁
- 专属特权
- 仅剩3次机会
- 今日必脱单
- 缘分值999+
---
# 第一百章 推荐使用的文案
建议：
- 今天为你推荐6位合适的朋友
- 可以进一步了解一下
- 已表达喜欢
- 你们互相喜欢
- 公益红娘可以帮助你进一步寻找
- 暂时没有完全符合条件的人
- 可以适当放宽“最好符合”的条件
- 你的资料已通过审核
- 请谨慎涉及资金往来
---
# 第一百零一章 品牌语气
用户不是：
> 流量。
而是：
> 来认真寻找婚恋关系的人。
因此系统语气不应“刺激”。
而应该：
> 尊重用户决定。
---
# 第一百零二章 用户不喜欢后的反馈
点击：
> 不合适
只显示：
> 已记录。
不要：
> 为什么不喜欢TA？
强制弹窗。
原因收集可以后期研究，不放在V1核心流程。
---
# 第一百零三章 用户喜欢后的反馈
使用：
> 已表达喜欢。
而不是：
> 心动成功！
更符合成熟用户群体。
---
# 第一百零四章 匹配成功后的文案
推荐：
> 你们互相喜欢。
> 可以开始进一步了解了。
副文案：
> 希望你们有一个好的开始。
---
# 第一百零五章 成功牵手后的视觉
保持温暖。
例如：
```text id="o3o3ry"
❤️
恭喜你们
平台将暂时停止双方的推荐，
希望你们认真了解彼此。
[返回首页]
```
不要商业宣传。
---
# 第一百零六章 UI组件库建议
前端开发需要优先建立统一组件。
至少包含：
```text id="j61ue2"
Button
Input
Select
Picker
Tag
UserCard
RecommendCard
ActivityCard
StatusBadge
EmptyState
ErrorState
Dialog
Toast
PhotoUploader
ProfileSection
FilterGroup
NoticeBar
ProgressBar
```
---
# 第一百零七章 UserCard组件
统一参数：
```text id="tq8bqk"
avatar
displayName
age
height
region
education
occupation
maritalStatus
verified
reviewed
```
用于：
- 找对象
- 喜欢列表
- 红娘候选
- 活动相关名单
避免重复开发。
---
# 第一百零八章 RecommendCard
增加：
```text id="5vp9cb"
recommendReasons
likeStatus
```
用于首页。
---
# 第一百零九章 StatusBadge
统一状态：
```text id="ndap90"
已实名
已审核
审核中
需修改
已报名
已签到
服务中
已完成
高风险
```
---
# 第一百一十章 EmptyState
统一参数：
```text id="3umlr5"
icon
title
description
actionText
```
所有空页面复用。
---
# 第一百一十一章 页面开发优先级
P0：
1. 登录
2. 实名
3. 资料填写
4. 择偶条件
5. 审核状态
6. 首页
7. 用户详情
8. 找对象
9. 喜欢匹配
10. 消息聊天
11. 我的
P1：
12. 公益红娘
13. 活动
14. 举报
15. 隐私
16. 黑名单
P2：
17. 帮助
18. 意见反馈
19. 成功故事
---
# 第一百一十二章 高保真原型第一批
建议第一批先制作12张核心高保真界面：
```text id="emmu23"
01 登录页
02 实名认证页
03 个人资料填写
04 择偶条件
05 审核中
06 首页推荐
07 找对象
08 用户详情
09 双向喜欢成功
10 聊天
11 公益红娘
12 我的
```
---
# 第一百一十三章 高保真原型第二批
继续：
```text id="cojniu"
13 活动首页
14 活动详情
15 活动报名
16 我的缘分
17 系统通知
18 举报
19 隐私设置
20 婚恋状态
```
---
# 第一百一十四章 后台原型第一批
```text id="ojooku"
B01 后台登录
B02 工作台
B03 用户列表
B04 用户详情
B05 审核列表
B06 审核详情
B07 红娘服务
B08 活动管理
B09 举报风控
```
---
# 第一百一十五章 最终视觉验收标准
如果页面设计完成，需要用以下标准检查。
## 首页
用户3秒内能否回答：
> 今天系统推荐了谁？
---
## 用户详情
用户5秒内能否回答：
> 这个人的基础情况怎么样？
---
## 喜欢
用户是否不用说明就知道：
> 点击哪里表达喜欢？
---
## 双向匹配
用户是否知道：
> 现在可以聊天了？
---
## 活动
用户是否快速知道：
> 什么时间、什么地点、是否免费、怎么报名？
---
## 公益红娘
用户是否知道：
> 我可以找工作人员帮忙？
---
## 后台
工作人员进入以后是否知道：
> 今天第一件应该处理什么？
---
# 第一百一十六章 设计红线
最终UI不得因为“视觉效果更好”而破坏以下原则：
> 不增加学习成本。
> 不增加用户填写负担。
> 不增加没有业务价值的功能入口。
> 不使用商业婚恋平台的付费诱导设计。
> 不娱乐化婚恋。
> 不公开不必要的敏感信息。
> 不为了算法而隐藏推荐原因。
---
# 第一百一十七章 最终设计目标
丹阳公益婚恋服务平台的前端不需要让人觉得：
> “这个APP功能好多。”
而应该让用户觉得：
> “我第一次用就会。”
工作人员觉得：
> “我要处理的事情一眼就能看到。”
红娘觉得：
> “这个人什么情况、需要我做什么，很清楚。”
最终前端设计标准只有一句话：
> **少一步操作，少一次犹豫，多一分信任。**
Reference in New Issue View Git Blame Copy Permalink