2.8 KiB
善缘丹阳 V1.1 双端高保真 UI 修订设计
目标
以《前端 UI-UX 高保真原型修订说明》和《页面级功能清单与交互流程修订版》为唯一 UI/交互验收依据，在保留现有业务能力的前提下，完成微信小程序端与响应式运营后台的可见界面校正，并提供可运行预览与截图。
设计原则
- 品牌气质：温暖、可信、公益、本地、现代；避免商业婚恋滑卡感与政务门户感。
- 小程序：暖白
#FAFAF8页面背景、珊瑚红#E96B6B主色、白色卡片、轻阴影、16px 页面边距、24px 模块间距、至少 44px 点击区。 - 后台：220px 浅色侧栏、清晰工作台、白色内容卡片、中等信息密度；在 1366×768 与 1440×900 下可用。
- 只复用现有原生小程序与 Vue 3 + Element Plus 技术栈，不引入新 UI 框架或在线字体。
- 所有可见入口、页面结构、空状态和提示文案必须使用简体中文。
小程序信息架构
底部固定为：首页、找对象、消息、活动、我的。
首页固定顺序为：品牌区、用户状态、Banner、8 个核心入口、今日推荐、善缘公益服务、近期公益活动、善缘服务站、婚恋课堂、安全提醒。8 个入口固定两行四列，依次为找对象、公益红娘、公益活动、婚恋咨询、婚恋课堂、婚前辅导、婚恋反诈、善缘服务站。
首批可见闭环覆盖 U18、U19、U21、U23、U24、U27、U28、U33、U37、U50、U55、U60；补齐服务预约、婚恋课堂、内容详情、我的咨询、婚前辅导、本地资格、公益服务记录等二级入口。每页具备加载、空、错误三类状态的统一视觉。
管理后台信息架构
布局使用固定品牌侧栏、顶部上下文栏和主内容区。菜单依权限显示，并按工作台、资料与用户、婚恋服务、活动运营、内容与 Banner、服务阵地、安全治理、组织与系统、数据统计分组。
工作台首屏根据角色显示“今天需要处理的事项”，不再使用面向所有角色的通用大盘。Reviewer、Matchmaker、Counselor、Service Station Operator、Activity Manager、Risk Operator 各自看到与职责对应的待办卡、快捷入口和最近任务。
状态与演示
真实接口成功时展示接口数据；开发预览接口不可用时，页面使用明确标注为“界面预览数据”的本地演示数据，保证无需生产账号即可审查 UI，不把演示数据写入后端。最终验收包含静态契约检查、类型检查、构建和实际浏览器截图；小程序通过微信开发者工具或本地渲染预览检查 320/375/390/430px 宽度。
非目标
本次不重写后端业务、不改变权限规则、不增加付费/VIP/外链 Banner/陌生人私信等被禁止功能，也不扩展两份文档之外的页面模块。