Oranzy 视觉与交互基线

• 状态：已确认的视觉方向；具体像素仍待浏览器截图验收
• 更新：2026-10-14
• 目标：iOS / Android（Flutter），HTML 仅用于交互验证

视觉

• 品牌主色 #15A58A，辅助橙 #FF9A56，背景白色 / #F7F9F8，主文字 #202B28，次文字 #7B8984。
• 参考用户确认的 Oranzy 品牌图：真实活动摄影、紧凑信息密度、轻阴影、细线图标、白色背景；不得用从品牌设计稿裁切的带字截图充当活动图片。
• 390px 逻辑宽度作为对照基准。参考图中的中文 AI 字形错误不照搬。
• 发布 Tab 只提供「发起活动」「创建圈子」两张插画入口卡片，各自进入独立表单。
• 圈子广场使用紧凑封面列表：名称、简介、成员数、活动数、加入状态；不显示成员头像组。
• 五个主 Tab：发现、圈子、发布、消息、我的。二级业务页独立导航。

发现首页（顺序固定）

1. 城市选择与通知
2. 搜索
3. 精选活动 Banner（真实照片）
4. 分类 Tab
5. 「附近活动」标题 + 右侧「地图找活动」
6. 紧凑活动列表
7. 底部导航

地图（独立页面）

• 地图不占底部 Tab，进入后隐藏五栏导航。
• 默认定位用户附近；未授权则按所选城市。
• 底部可拖动纵向活动列表（收起、半屏、全屏）。
• 点击列表活动：地图定位该活动并以橙色高亮；点击地图标记：列表滚动定位对应项。
• 拖动地图后出现「搜索此区域」，不强制自动刷新。
• 地图瓦片正式实现须使用符合服务条款的地图 SDK，不直连滥用公共 OSM 瓦片；静态原型可用示意底图。

活动详情

真实封面 → 标题/分类/费用 → 时间 → 地点及导航 → 成员/人数 → 组织者 → 介绍 → 底部固定报名操作。组织者审核应在独立管理页，不堆在公开详情中。

IM

• 文字、图片、拍照、位置、活动/圈子卡片、系统通知。
• 群聊展示头像、昵称、时间；图片可预览，支持发送状态与失败重试。
• V1 不做语音消息、音视频通话、视频消息。
• 活动群权限跟随报名，圈子群权限跟随圈子成员；公告/活动变更发送结构化业务通知。

原型验收

视觉需与确认的参考图并排截图核对；检查资源加载、点击、返回、状态联动、空状态和错误状态。仅 JS 语法通过不等于验收通过。