企业协同 App 产品需求与 UI 设计规范（V1.0）

文档状态：可进入 UI 设计

目标平台：Android / iOS 移动端

设计基准：390 × 844 px，兼容 360–430 px 宽度

产品定位：面向企业内部员工的移动协同入口，整合即时通讯、组织通讯录和业务应用菜单。

本期原则：先建立稳定的基础框架；车辆点检、车辆检修、设备巡检、人员定位、安全监控、瓦斯巡检仅设计入口，不展开业务功能。

产品目标

员工登录后可以快速找到同事并沟通，查看消息状态，通过统一菜单进入企业业务系统，并管理个人资料与账号安全。首版重点解决四件事：消息集中、人员可查、应用可达、账号可管。

用户与权限

通讯录字段：头像、姓名、部门、角色/岗位、手机号。手机号是否完整显示与是否允许拨打，由企业权限配置决定。

信息架构

一级导航固定为四项：

1. 消息
   ：会话列表、消息搜索、单聊/群聊入口、未读提醒。
2. 通讯录
   ：组织架构、常用联系人、人员搜索、人员详情。
3. 菜单
   ：企业业务应用入口；本期仅为占位卡片。
4. 我的
   ：个人资料、账号与安全、通知设置、关于与退出登录。

登录属于导航外页面；聊天页、联系人详情、资料编辑、密码修改属于二级页面，不显示底部导航。

页面清单与 UI 交付范围

详细功能需求

5.1 登录

• 支持账号或手机号 + 密码登录。
• 密码默认隐藏，可切换显示。
• 登录按钮在字段完整并勾选协议后可用。
• 连续失败时显示明确原因，不透露账号是否存在。
• 支持“忘记密码”；重置流程本期可跳转占位页。
• 首次登录必须提示阅读《用户协议》和《隐私政策》。
• 登录成功后默认进入“消息”；Token 失效后重新登录应返回原入口。

5.2 消息列表

• 会话按最新消息时间排序；置顶会话优先。
• 每条显示头像、名称、最新消息摘要、时间、未读数量。
• 摘要规范：图片显示“[图片]”，视频显示“[视频]”，文件显示“[文件] 文件名”，语音显示“[语音]”。
• 支持左滑：置顶/取消置顶、标记已读/未读、删除会话。
• 删除会话只删除本地列表记录，不撤回对方消息。
• 搜索覆盖联系人、群聊名；消息全文搜索可后续扩展。
• 网络断开时保留可读缓存，顶部展示“网络不可用”。

5.3 消息发送页

消息状态必须区分：发送中、发送失败、已发送未读、已读。失败消息可点击重试。自己发送的消息在右侧，对方消息在左侧。群聊左侧消息显示发送人姓名；单聊不重复显示。

输入状态规则：

• 对方输入文字时，标题下显示“对方正在输入…”，停止输入约 5 秒后消失。
• 正在录音时不展示文字输入状态。
• 输入状态是临时状态，不写入聊天记录。
• 已读状态以当前会话最后已读位置为准；群聊已读详情可后续扩展。

消息操作：

• 长按弹出：复制、回复、撤回、删除、更多。
• 撤回时限默认 2 分钟，由服务端配置。
• 删除仅对自己生效；撤回对双方生效并保留系统提示。
• 图片/视频点击全屏预览；文件点击下载或调用系统打开。
• 键盘弹起后最新消息保持可见；浏览历史时收到新消息，显示“有新消息”入口。

5.4 通讯录

• 顶部固定搜索，支持姓名、手机号后四位、部门模糊搜索。
• 结构为常用联系人、组织架构、部门列表。
• 部门可逐级展开，成员按姓名排序。
• 人员条目展示头像、姓名、部门/角色摘要。
• 点击人员进入详情；可直接发消息，有权限时可拨打手机号。
• 搜索无结果时显示空状态并提供清空关键词。
• 客户端不得遍历获取无权限人员。

5.5 菜单

采用 4 列图标网格，本期固定占位入口：

• 车辆点检
• 车辆检修
• 设备巡检
• 人员定位
• 安全监控
• 瓦斯巡检
• 更多应用（占位）

每个入口包含图标、名称和可选角标。应用维护时显示“维护中”；无权限应用默认不显示。点击未接入入口弹出“功能建设中”。

5.6 我的

顶部个人卡片显示头像、姓名、部门和角色。功能列表包含个人信息、账号与安全、通知设置、关于应用、退出登录。

个人信息支持修改头像、手机号、邮箱等允许自维护字段；姓名、部门、角色默认由管理员维护，客户端只读。修改密码需验证原密码，新密码不少于 8 位且至少包含字母与数字。退出登录需要二次确认，清理本地凭证但保留可恢复的非敏感缓存。

全局交互与异常规范

• 可点击区域不小于 44 × 44 px。
• 主操作每页最多一个高强调按钮；危险操作统一使用红色。
• 提交类操作必须防重复点击，并提供加载、成功、失败反馈。
• 空状态必须说明原因并给出下一步，不能只有插画。
• 断网时优先显示缓存；发送或提交内容进入待重试状态。
• 无权限页面不展示敏感内容轮廓。
• 列表使用骨架屏；短操作使用按钮内加载；长操作提供进度。
• 时间格式：当天 HH:mm，昨天显示“昨天”，7 天内显示星期，更早显示日期。

UI 视觉规范

视觉方向：专业、稳定、克制，接近企业协同工具但不复制钉钉。以清晰状态和高信息效率为核心。主背景浅灰，卡片和列表白色，蓝色只用于主操作、选中态和关键状态。

核心复用组件：顶部导航栏、底部四栏导航、搜索框、会话列表项、联系人列表项、头像、未读角标、消息气泡、消息状态、文件卡片、应用入口、设置列表项、输入框、按钮、弹窗、Toast、空状态和骨架屏。

Figma 交付要求

文件结构：

• 00 Foundations：颜色、字体、间距、圆角与状态色。
• 01 Components：核心组件和状态。
• 02 Screens：A01–A12 页面。
• 03 Flows：登录、发消息、找联系人、进入菜单、修改密码五条主流程。

首轮高保真至少完成登录、消息列表、聊天、通讯录、人员详情、菜单、我的、个人资料、账号安全/修改密码，并补充消息扩展面板与全局状态参考。

所有页面使用自动布局；同类列表项和导航组件化；页面按编号命名；图层使用语义名称，不保留默认名称。

验收标准

• 用户可完成登录、找联系人、发消息、确认已读状态和进入业务入口。
• 四个一级导航的位置、命名和选中态一致。
• 文字、语音、文件、表情、图片、视频和回复均有入口或示例。
• 已读/未读、输入中、发送中、失败和断网状态都有设计。
• 通讯录详情覆盖姓名、部门、角色、手机号。
• 菜单展示六个指定入口且只做占位。
• 我的覆盖头像、资料修改和账号密码修改。
• 360 px 宽度下无重叠或不可点击控件。
• 颜色对比、触控区域和错误提示满足基础可访问性要求。

本期不包含

群公告、日程、审批、考勤、音视频通话实现、后台管理界面，以及六个业务模块的具体流程与表单。以上能力另立 PRD。