FRONTEND UI/UX REVIEW BRIEF · TENANT MOBILE（u6app + u6mini）
臻寓 · 租客移动端 UI/UX 评审材料
本页面向受托的外部 UI/UX 专家，是评审委托的**第二批：租客双端（iOS App + 微信小程序）**。内容包含：产品与用户流程概述、全量页面截图（生产真实数据、游客与登录态、亮暗两态、多皮肤变体、逐图注释）、我们已知的观察点（含采集期间发现并已修复的两个真实缺陷），以及你的方案需要满足的落地约束。第一批（运营后台与平台面）另行提交。
01给专家的题目（任务书）
本次委托的核心诉求，按优先级排列。
题目一（最高优先级）：多皮肤并存下的「一家人」判断
臻寓租客端在一个 App 里并存多套皮肤语言：设置页提供 金色 / 經典 / 臻選 三套品牌皮肤（各含亮暗两态），另有「跟隨機構主題」开关；promotion 域整体是一套独立的深海军蓝 + 金电影质感皮；房间详情页价格区又是金衬线强调。请回答：
- 同一次使用旅程里（列表 → 详情 → 房间 → 签约），皮肤切换是否让人困惑？哪些具体位置最先让人察觉「换了一套语言」？（对照 a-04 → a-06 连看）
- 「經典藍」（当前机构生效皮）与「金色」（品牌默认皮）应如何取舍？机构主题优先还是品牌优先？
- promotion 域（第 07 节）与 live 域的关系：是「另一档产品」还是「同一产品的另一张脸」？
题目二：移动端信息层级与导航
租客端是标准 4 Tab 结构（房源 / 發現 / 消息 / 我的）。请评估：
- 房源列表卡的信息密度（a-04）：图 + 房型横滑条 + 价格 + 标签 + 管家头像，首屏应露出几张卡？房型横滑条与「−15%」角标的强调层级是否恰当？
- 页头语法：每页「臻寓大标 + 副标」在二级页退化为返回栏 + 标题，规则是否一致？
- 底部 Tab 语义：「發現」实际是领券中心、「消息」内含 會話/通知/訂單 三段——命名与内容是否自洽？
- 我的住居卡（門鎖/Wi-Fi/報修/清潔 四宫格 + 剩余天数）与「我的管家」卡的层级关系（a-14）。
题目三：关键流程与状态呈现
截图覆盖完整租房漏斗：列表 → 房源详情 → 房间详情（价格方案）→ 簽約前檢查（逐项自检 4/6 + 去完成引导）→ 聊天咨询；另有账单/合同/租约/KYC/代金券/支付方式/钱包等资产页。请评估：
- 簽約前檢查（a-07）的清单式引导（进度条 + 待完成卡 + 已就緒卡 + 主 CTA）是否是好的「条件补齐」范式？
- 空态：钱包（a-25）、代金券（a-21）、付款方式（a-22）等空态是否给出「为什么空 + 下一步」？
- 错误态：领券中心「可領券載入失敗」（a-09 / m-02）、列表分页失败横幅 + 重試——错误呈现与恢复路径是否到位？
- promotion 域激励设计：臻享值明细（d-02）/ 排行榜（d-03）的激励是否清晰？
题目四：优化方案的落地形式
建议最好附可运行的静态 demo（HTML/CSS/JS，可直接静态托管对照验收）。
- 改版式（CSS/令牌）优先；动结构也欢迎，但请说明改动范围。
- ⚠️ 所有改样式建议必须双端可落地（u6app 与 u6mini 逐文件镜像，一致性由门禁把守）；只可能单端落地的方案请显式声明。
- 若认为某处不该改，请直接说明理由 —— 我们更需要「有依据的不改」。
02产品是什么：一句话 + 三条主流程
臻寓 ChunYue 是面向香港学生的长租公寓平台。本批评审的是租客移动端双端口径：u6app（Expo/React Native，iOS + Android）与 u6mini（微信小程序，Taro，逐文件镜像 u6app）。租客在同一 App 里完成：找房（列表/筛选/地图）→ 看房沟通（聊天/预约）→ 签约（签约前逐项自检 → 合同）→ 入住后（门锁/Wi-Fi/報修/清潔 + 账单/租约/管家）→ 激励（臻享值/排行榜/代金券）。服务端 site-mode 决定 App 处于 live（租客域） 或 promotion（预热域）。
三条主流程
- 租房漏斗 —— 房源列表（筛選/大學/商圈/地图）→ 房源详情（房型/价格）→ 房间详情（价格方案 + 押一付三）→ 簽約前檢查（实名/付款/房间可租逐项核验）→ 合同生效 → 住居卡激活（门锁/Wi-Fi/報修/清潔）。
- 管家协同 —— 消息 Tab（會話/通知/訂單）→ 会话内房源上下文卡 + 約睇樓/優惠券/我的合約快捷操作 → 管家在线状态与开始对话。
- 资产与激励 —— 錢包/賬單/代金券/付款方式/臻享值/排行榜；promotion 域为预热期的独立深金皮肤（领券中心/签到/邀请/榜単）。
界面清单（本页截图已覆盖）
- u6app（iOS 实拍）：游客态 3 页 + live 域 23 页 + promotion 域 5 页 + 深色变体 5 张 + 金色皮肤变体 3 张，共 39 张
- u6mini（Taro H5 同源渲染）：4 Tab + 分包 12 页，共 16 张
- 覆盖完整租房漏斗与全部租户资产页；数据为生产真实数据（23 套房源 / 真实租约 B201 / 真实账单与合同）
- 已知缺口：u6mini 详情三页（H5 地图组件在采集环境挂起，原生截图佐证）；promotion Tab 主页（路由冲突不可深链）
03截图 · 游客态与登录
首启同意门禁、启动落地页与统一登录页。点击任意截图可放大。
a-01 · 首启隐私同意PrivacyConsentGate（首启覆盖层）PIPL 明示同意门禁：全屏卡片「私隱與個人資料保護」+ 政策链接 + 「同意並繼續」。同意前不可绕过（同意标记持久化，重装/重启不再弹）。
a-02 · 启动落地页chunyue:///（Landing boot）冷启动落地页：臻寓标志 + 「Make Every Rental a Warm Abode」+ 分步启动进度（此帧在「獲取站點模式」）+ 「跳過預載入」。启动链路 = 双路由配置 → 站点模式 → 升级检查 → 认证恢复。
a-03 · 登入chunyue:///login统一登录页（live 与 promotion 共用，随当前皮肤）：品牌方标 → 歡迎回來 → 邀请码（选填）→ 驗證碼/密碼双 Tab（开发态默认密码并预填）→ +852 手机号 → 整宽主按钮 → Apple 登入 → 底部条款勾选（未勾选不可登录，审核要求）。
04截图 · 租客主流程
房源漏斗（列表 → 详情 → 房间 → 簽約前檢查）+ 四 Tab + 资产页，全部为生产真实数据。
a-04 · 房源列表（房源 Tab）chunyue:///（默认 Tab）4 Tab 之首页：大标「臻寓 · 精選房源」+ 遊客横幅（登录后消失）+ 搜索框 + 地图入口按钮 + 篩選/大學/商圈快捷项 + 「23 套房源」+ 詳細/簡略切换 + 排序。房源卡：整幅封面图 + 管家头像徽标 + 收藏心形 + 名称/简介压图 + 价格胶囊「HK$8,075 起」+ 位置行 + 标签行（豪華/推薦/中心位置/高贊/+2）+ 「房型 4/5 間可租」横滑房型条（A101 −15% · 120 呎 · HK$8,075）。
a-05 · 房源详情chunyue:///property/[id]整页：图片轮播（1/4）+ 压图标题区 → 概覽标签行 → 价格区「HK$8,075 /月 起 · 划线 HK$9,500 · −15% 胶囊」→ 属性网格（樓層 30/F · 面積 880 呎 · 電梯 有 · 類型 服務式公寓 · 總層數 42 層 · 每層戶數 10 戶）→ 位置卡（地址 + 地图预览）→ 房型列表（A101 可租 · 120 呎 · HK$8,075/月，可进房间详情）。
a-06 · 房间详情（价格方案）chunyue:///room/[id]注意：此页价格区用金色衬线数字与金边推荐卡（与上一张的经典蓝形成同旅程混排，见观察点 1）。图片轮播（1/5）+「可租」状态胶囊 → 房間資料（公寓名 + 適合上班族/明亮标签 + 地址）→ 價格方案「HK$8,075 月租 · 划线 HK$9,500 · −15%」→ 推薦卡「押一付三 · 首期約 HK$32,300 · 含押金 1 個月 · 最短租期 3 個月」→ 查看更多方案 → 底部常驻栏（管家头像「有事找我」+ 預約睇樓 + 金色主按钮「即刻搶簽」）。
a-07 · 簽約前檢查chunyue:///lease/preflight「即刻搶簽」的落点：逐项自检范式 —— 进度条「已就緒 4/6 項」→ 两张待完成卡（實名認證：监管要求 + 「認證已過期，需重新認證」黄条 + 去完成按钮；付款方式：绑定说明 + 去完成）→ 绿色已就緒卡（手机号/电邮/房间可租/进行中的签约）→ 主 CTA「還差 2 項 · 去完成」→ 重新檢查。
a-08 · 地圖搜尋chunyue:///map-search地图找房：搜索点输入 + 分类 chips（大學/港鐵站/商圈/醫院/公園/體育場館）+ 定位按钮。截图为采集环境实况：POI 覆盖层（港鐵站/醫院/大學/公园图标 + 名称）正常渲染，底图矢量瓦片部分未加载（采集网络所限，见观察点 5）。
a-09 · 發現 Tab（领券中心）chunyue:///（發現 Tab）「優惠與驚喜」页头 + 領券中心说明 + 「我的代金券」入口胶囊。截图为真实错误态：「可領券載入失敗，下拉重試」——根因与修复见观察点 2（源站修复在仓待部署，截图为修复前）。
a-10 · 消息 Tabchunyue:///（消息 Tab）「與管家保持聯繫」页头 + 會話/通知/訂單三段切换 + 搜索 + 会话列表（张管家 · 在线绿点 · 末条消息 · 日期）。Tab 角标口径 = 会话未读 + 通知 + 待缴账单三段之和。
a-11 · 会话详情chunyue:///chat/[id]聊天页：顶部房源上下文卡（教大智慧軒 · HK$6120 · 查看詳情）→ 日期分隔 → 房源卡消息（图片渐变压字 + 預約睇樓按钮）→ 对话气泡（自己蓝底右侧，管家白底左侧带头像）→ 快捷操作 chips（約睇樓/優惠券/我的合約）→ 输入栏（+ / 语音 / 發送）。
a-12 · 消息 · 通知段chunyue:///（消息 Tab · 通知）通知列表段：系统通知与推送的落地页（与會話/訂單同层级切换）。
a-13 · 消息 · 訂單段chunyue:///（消息 Tab · 訂單）订单段：待缴账单与订单状态汇总（角标口径的第三个来源）。
a-14 · 我的 Tabchunyue:///（我的 Tab）「賬戶與服務」页头 → 会员卡（头像 + 张三風 + 銅牌會員 + 未認證徽标 + 800 臻享值 + 手机号 + 性别标签 + 編輯入口）→ 資產四格（錢包餘額 HK$0 · 我的代金券 0 · 臻享值 800 · 待繳賬單 0）→ 我的住居卡（教大智慧軒 B201室 · 剩餘 316 日 黄胶囊 + 三格进度 + 門鎖/Wi-Fi/報修/清潔 四宫格 + 张管家开关）→ 我的管家卡（王管家 · 離線 · 開始對話）。
a-15 · 設置chunyue:///profile/settings分区分组：賬號卡 → 主題三选卡（金色/經典/臻選 各含缩略预览，当前經典）→ 「跟隨機構主題」开关（机构发布自有主题后自动生效；显式选择品牌则恒优先）→ 深色模式 segmented（淺色/深色/跟隨系統）→ 語言（繁體中文/简体中文/English）→ 通知設置（推送/位置服务开关）→ 賬號與安全。
a-16 · 賬單chunyue:///profile/billing账单列表：BL-9015 · 已支付绿胶囊 · 到期 2026-09-15 · HK$7,480。空区保持纹理背景。
a-17 · 合約管理chunyue:///profile/contracts三方租賃合同（教大智慧軒 B201）· 已生效 · 2026-09-15 ~ 2027-09-14 · HK$7,480/月。
a-18 · 我的租約chunyue:///profile/leases租约列表：B201 · 生效中 · 租期 2026-09-15 ~ 2027-09-14 · 月租 HK$7,480/月。
a-19 · 預約看房chunyue:///profile/viewings看房预约列表（与管家侧联动的预约记录）。
a-20 · 實名認證chunyue:///profile/kyc四步 KYC：選擇證件類型 → 上傳證件 → 確認信息 → 活體驗證；證件類型选择（中國居民身份證/香港身份證件等）。当前状态「已過期」黄条（与簽約前檢查的待完成项同源）。
a-21 · 我的代金券chunyue:///profile/my-vouchers未使用/已使用/已過期三段 + 空态「暫無可用代金券」+ 去領券（跳發現 Tab）。
a-22 · 付款方式chunyue:///profile/payment-methods空态示范：「尚未綁定付款方式 · 綁定後才能支付押金與租金」+ 新增付款方式按钮。
a-23 · 編輯資料chunyue:///profile/edit资料编辑表单（头像/昵称/性别/生日/星座/简介等字段）。
a-24 · 賬號與安全chunyue:///profile/account-security账号安全页（注销/设备/密码管理入口）。
a-25 · 錢包chunyue:///profile/wallet余额卡（餘額 HK$0 · 凍結 HK$0 · 累計收入 +HK$0）+ 交易流水空态（暫無交易記錄 + 钱包图标）。
a-26 · 收藏夾chunyue:///favorites收藏列表：理大創新宿舍等房源卡（与列表卡同构）。
05截图 · 深色模式与金色皮肤变体
同一页面在深色模式（b-xx）与「金色」品牌皮肤（c-xx）下的呈现——题目一「多皮肤是否一家人」的直接对比素材。
b-01 · 房源列表 · 深色（深色模式）同一列表在深色模式：深色纹理背景 + 蓝色强调保持；卡片/文字层级随令牌整体翻转。
b-02 · 我的 · 深色（深色模式）会员卡/资产格/住居卡在深色下的层级。
b-03 · 發現 · 深色（深色模式）领券中心深色态（错误态同屏）。
b-04 · 設置 · 深色（深色模式）主题三选卡与深色模式 segmented 在深色下的呈现。
b-05 · 錢包 · 深色（深色模式）余额卡与空态深色态。
c-01 · 房源列表 · 金色皮肤（flavor=金色）切到「金色」品牌皮：深海军蓝 + 金星点纹理背景 + 金色 Logo/价格胶囊/标签描边/激活 Tab——与經典蓝（a-04）同构对比，评「两套皮是否读起来像一家人」的直接素材。
c-02 · 設置 · 金色皮肤（flavor=金色）设置页金皮态：主题三选卡本身不变（金色选中），全局配色随之切换。
c-03 · 我的 · 金色皮肤（flavor=金色）会员卡/资产格/住居卡金皮态：金色强调 + 深蓝底。
预热期的独立深金皮肤：领券中心 / 臻享值 / 排行榜 / 规则 / 倒数。
d-01 · 領券中心（promotion 域）promotion · 發現promotion 域整皮：深海军蓝 + 金 + 星点纹理，「我的代金券」金边胶囊。错误态同屏（观察点 2）。
d-02 · 臻享值明細promotion · pointsPOINTS LEDGER 眉标（金色大写字距）+ 衬线大数字（可用 800 / 累計 1000）+ 流水卡（每日簽到 +500 · 註冊贈禮 +500 · 兌換 −200 青色）+ 余额尾注。背景图右下可见「AI生成」水印（观察点 3）。
d-03 · 臻享榜promotion · leaderboardLEADERBOARD 眉标 + 三甲领奖台（張三風 1000 臻享值居首 · 孙鵬洋 998 · 張麗華 992）+ 完整榜單列表。头像为纯金色圆圈（观察点 4）。
d-04 · 活動規則promotion · rules活动规则长文页（深金皮排版）。
d-05 · 倒數（空态）promotion · countdown无进行中活动时的倒计时页：整页深底空态，无引导文案（观察点 6）。
07截图 · 微信小程序（Taro H5 同源渲染）
u6mini 与 u6app 逐文件镜像（一致性由门禁把守）；以下截图为 H5 同源渲染 @390×844，供逐页对照两端口径一致性。
m-01 · 房源列表#/pages/live/tabs/properties/PropertyListScreen与 u6app 同构的镜像实现（Taro）：纹理背景、卡片结构、房型横滑条、价格胶囊一致；导航为小程序页头 + 自定义 TabBar。
m-02 · 發現（领券中心）#/pages/live/tabs/discover/DiscoverScreen领券中心镜像页；「可領券載入失敗」错误态与 u6app 同源（观察点 2）。
m-03 · 消息#/pages/live/tabs/messages/MessagesScreen會話/通知/訂單三段 + 会话列表镜像。
m-04 · 我的#/pages/live/tabs/profile/ProfileScreen会员卡/资产四格/住居卡镜像。
m-05 · 会话详情#/pkg/messages/chat/detail聊天镜像：房源上下文卡（新界·大埔區 教大智慧軒 HK$6,120 + 預約睇樓）+ 气泡 + 快捷 chips + 输入栏。
m-06 · 我的租約#/pkg/profile/leases進行中 1 · 待簽署 0 · 已過期 0 · 已終止 0 分段 + 租约卡（B201 生效中）。
m-07 · 賬單#/pkg/profile/billing账单卡镜像（BL-9015 已支付 HK$7,480）。
m-08 · 合約管理#/pkg/profile/contracts合同卡镜像（三方租賃合同 已生效）。
m-09 · 實名認證#/pkg/profile/kyc四步 KYC 镜像（含证件类型选择）。
m-10 · 錢包#/pkg/profile/wallet余额卡 + 流水空态镜像。
m-11 · 我的代金券#/pkg/profile/my-vouchers三段 + 空态 + 去領券镜像。
m-12 · 收藏夾#/pkg/properties/favorites收藏列表镜像。
m-13 · 設置#/pkg/profile/settings设置镜像：主题三选卡 + 跟隨機構主題 + 深色模式 + 語言（与 u6app a-15 同构）。
m-14 · 付款方式#/pkg/profile/payment-methods空态镜像（尚未綁定付款方式）。
m-15 · 登入#/pages/login登录镜像：微信一鍵登入（小程序特有渠道）+ 驗證碼/密碼双 Tab + 条款勾选。
m-16 · 簽約前檢查#/pages/live/lease/preflight逐项自检镜像（4/6 进度 + 待完成卡 + 主 CTA，与 a-07 同构）。
08我们已知的观察点（供聚焦，欢迎推翻）
以下是采集时记下的界面现象。请不要迁就——若某条我们判断错了，请直接推翻，并说明理由。
- 域内皮肤混排：經典藍（列表/详情/消息/我的）与金色（房间详情价格区）同屏出现（a-04 → a-06 连看）。这是刻意的「价格鎏金」强调，还是皮肤漂移？
- 领券中心加载失败（跨端复现）：u6app 亮暗两态与 u6mini 發現 Tab 均显示「可領券載入失敗，下拉重試」。根因已定位并修复（origin 侧券目录只读 JWT 租户提示，而租户 App 的用户 JWT 不携带 org ⇒ 恒 fail-closed；已改走租户令牌验签通道，tsc 绿 + 目录测试 4/4，待部署源站后复测换图）——截图为修复前实况。
- promotion 域图片带「AI生成」水印：臻享值明细/排行榜背景右下角可见「AI生成 WORKBUDDY」字样——资产质量问题，待换图。
- 排行榜头像为纯金色圆圈：未加载出真实头像（或本就是占位），与「張三風 #1」同屏显得单薄（d-03）。
- 地图瓦片偶发加载失败：底图矢量瓦片超时（POI 覆盖层正常，a-08）；采集环境网络所限，生产待复测。
- countdown 页近乎全黑：无进行中活动时是整页深底空态，缺「为什么空 + 下一步」（d-05）。
- 深色模式与纹理背景：亮暗两态都铺大理石/星点纹理——大面积纹理的可读性与性能取舍请评估。
- u6mini 截图口径：mini 截图 = Taro H5 同源渲染（390×844）；微信真机的胶囊栏/导航栏形态未包含在内，请勿以 H5 导航条形态评判真机形态。
09你的方案要满足的落地约束
我们不评审代码实现，只请给出的建议能落到这些约束上。
- 双端镜像纪律（硬约束）：u6mini 是 u6app 的逐文件镜像（样式/逻辑），一致性由门禁把守。任何改版式建议必须两端同步成立；只可能单端落地的方案请显式声明并说明理由。
- 设计令牌：两端共用 SmartTheme 令牌体系（flavor = 金色/經典/臻選 × mode = light/dark，另有「跟隨機構主題」机构下发通道）⇒ 改色/圆角/字距请落到令牌层级，不要给魔数。
- 字体与图标：标题用衬线声部（宋体系）；价格数字走专门港币格式化与字形规范（
formatHkd / <Hkd>）；图标一律 SVG sprite（U6Icon），全项目禁 emoji。 - i18n：文案三语（zh-HK 默认繁体 / zh-CN / en），全部走 i18n 字典 ⇒ 请在此前提下评估可读性，不要建议改成普通话书面语。
- 技术形态：u6app = Expo / React Native（iOS + Android）；u6mini = Taro 微信小程序（H5 为同源产物）⇒ 方案按「两端一套令牌 + 各自渲染器」评估可行性。
- no-masking 纪律：客户端禁止任何数据兜底/伪装（空态必须如实）⇒ 不要引入「加载失败假装是空态」类方案。
10交付期望
- 多皮肤结论：三套品牌皮肤 + promotion 域皮肤的取舍与必须统一的元素清单（按优先级）。
- 分页面 UI/UX 意见清单：落到具体页面与组件，按严重程度分级（阻断 / 重要 / 优化建议）。
- 关键页面的改版方案：至少覆盖 —— 房源列表卡、房源详情、簽約前檢查、我的住居卡、發現（领券中心）。
- 静态 demo：HTML/CSS/JS，可静态托管对照验收。
- 「有依据的不改」清单：明确指出哪些现状是刻意设计、不建议动 —— 与改动建议同等重要。
实机体验入口（小程序体验版 / iOS TestFlight / Android APK）由委托方私下提供，需要时联系。本页仅限受托专家评审使用，请勿外传。
