18 · 消息中心

DRIFTLY / HTML LAYOUT STUDY

画布背景对照

真实 HTML / CSS 排版 · 示例人物与数据 · 操作只在本页演示，不进行真实登录、发送或支付。背景根据当前逐页设计生成，可在背景对照中查看与下载。

LIVE HTML PREVIEW390 × 844

消息请求好友动态系统通知

海上的风

有时候觉得，能被理解就已经很好了。

12:342

星星收藏者

谢谢你，希望明天也是晴天。

09:411

月光与海

打开海风，里面藏着我们的故事。

昨天

路过的旅人

你的故事，我认真听完了。

昨天

蓝色星期天

晚安，愿你有个温柔的梦。

周一

示例会话 · 不连接真实消息服务

IMPLEMENTATION NOTES

本页独立背景

下载背景 PNG · 设计图与背景对照

实际像素 852 × 1846；背景层 opacity = 1；cover，中心对齐。雾化与色调已绘入图片，不额外叠加统一遮罩。

1. 页面理解与当前修订

顶部大标题消息和搜索，全部/未读筛选，三项快捷卡，会话列表和底栏。当前应明确消息请求分组，不能将未接受请求伪装成已建立会话。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
顶部栏	标题约28、搜索按钮44/48	搜索展开有取消/无结果态
筛选区	全部/未读，栏高约44	选中下划线加状态语义
快捷分组	请求、相关功能、系统通知等按真实能力	最多三列，窄屏可换行，不沿用虚构分类
会话列表	头像48～50，昵称/摘要中列，时间角标尾列；最小行高80	昵称和预览截断策略分开，整行可点
底部导航	完整四项，当前消息	最后会话有导航占位，未读实时更新

表中位置表示正常内容流；除装饰舞台和头像叠放外，不以整屏绝对坐标定位。尺寸沿用通用单位约定，字体放大时内容可增高。

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。顶部与中部保留浅蓝到近白的留白，底部海岸、人物和玻璃瓶以低对比雾化显示。正文、卡片、输入框、头像和功能图标均在前景独立布局。

本页背景：查看或下载；实际尺寸 852×1846 px。设计图 / 新背景对照。

显示参数：cover、ax=0.50、ay=0.50、背景层 opacity=1、额外整页遮罩 alpha=0。浅色雾化或夜景调色已经绘入图片，不叠加旧版通用白色/深蓝遮罩。卡片自己的背景 Alpha 与整页背景透明度分开设置。

iOS：将 PNG 新增为 imageset driftly_bg_18_messages，Universal / Single Scale 保留原始像素；Image("driftly_bg_18_messages") 使用 resizable、scaledToFill、按容器 frame 并 clipped，背景可单独忽略安全区，opacity(1)。这是新增导入步骤，旧资源包未包含此 imageset。
Android：将 PNG 复制为 res/drawable-nodpi/driftly_bg_18_messages.png，使用 painterResource(R.drawable.driftly_bg_18_messages)、ContentScale.Crop、居中对齐、alpha=1f；不另铺白色渐变。旧资源包未包含此 drawable。
Web：本站对应 /layouts/backgrounds/18_messages.png；业务项目复制到自己的 public 目录后，使用 background-size:cover; background-position:center; background-repeat:no-repeat，背景伪元素 opacity:1，不跟随正文滚动拉长。

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`18_messages/avatar_girl`，50×50	`driftly_18_messages_avatar_girl`	3× PNG
`18_messages/avatar_star`，50×50	`driftly_18_messages_avatar_star`	3× PNG
`18_messages/avatar_moon`，50×50	`driftly_18_messages_avatar_moon`	3× PNG
`18_messages/avatar_bottle`，50×50	`driftly_18_messages_avatar_bottle`	3× PNG
`18_messages/avatar_girl_green`，50×50	`driftly_18_messages_avatar_girl_green`	3× PNG

五个头像仅限占位/样例，真实会话从资料源读取，不把每位用户固定映射到图中人物。

元素逻辑尺寸是清单的画布尺寸，可能包含透明边距；布局时先观察主体实际占位。iOS 调用 Image(资源名)，Android 调用 painterResource(R.drawable.资源名)；Web 源文件复制后改为站内 URL。完整资源目录、密度和裁切规则见通用实现与素材索引。

4. iOS 具体做法

用List或ScrollView+LazyVStack渲染会话，稳定ID；List去默认背景并定制行底色，避免系统灰块遮住海景。
快捷卡可用HStack，消息请求先进入A-029接受流程，会话行才进入19；头像与标题均具备合适语义。
列表刷新、分页和未读更新合并到同一状态源，Tab切换保留滚动位置，切账号彻底重载。

5. Android 具体做法

LazyColumn用会话ID作key，头像AsyncImage或工程图片层，稳定占位尺寸避免滚动跳动。
NavigationBar由一级壳提供，筛选/搜索与列表不再嵌同向滚动；长按/滑动静音关闭均可通过无障碍菜单操作。
StateFlow结合缓存与事件流，未读从权威同步校正，不能仅在客户端每次收到事件加一而无限漂移。

6. Web 具体做法

语义化列表+会话链接，时间用time，预览省略与全名读屏分开；数量大时按工程需要虚拟列表。
手机点击会话路由19，桌面可列表约320宽+右侧会话面板；切筛选保持各自滚动/分页状态。
WebSocket断线显示连接提示，继续保留当前列表；切账户清理订阅、旧头像与会话缓存。

7. 状态、交互和数据绑定

请求入口进入A-029，接受/拒绝流程是28张图之外的依赖；不能因为缺PNG就跳过。普通会话19，系统通知21。
未读、时间、摘要和头像来自当前用户可访问数据，已撤回摘要要更新，隐私设置决定是否显示消息预览。
加载失败不显示“暂无消息”掩盖错误；空会话给返回首页引导。分页去重，断线重连补拉。
静音不等于关闭，删除列表项不代表撤销会话权限；动作名称与真实行为一致。

8. 本页验收重点

长昵称、99+未读、大字体和多行时间不挤掉头像或点击区。
新消息更新不使正在滚动的列表突然跳顶。
切账号、拒绝请求、拉黑或撤回后不残留前一状态的摘要/角标。

还需覆盖通用验收中的窄屏、大字体、RTL、读屏、断网、图片失败与键盘场景。本页是开发交接说明，不代表三端业务已实现或已通过实机测试。

LIVE DESIGN SPECIFICATIONS

精细布局标注

0 个元素

点击预览中的任一元素，查看当前实际生效的尺寸、四边间距与文字样式。标注模式下点击用于选取，关闭后恢复页面交互。

外边距 margin内边距 padding内容 content

选择元素（也可以点击左侧预览）

查找标题、按钮、卡片、图片或元素编号

四边顺序：上 / 右 / 下 / 左。点击行可定位元素。离开滚动可视区的节点仍列在表内。

元素	宽 × 高	margin	padding	字号 / 行高 / 字重	背景 Alpha / opacity	圆角	gap 行 / 列

数值口径与 iOS / Android 对照

尺寸、坐标与间距采用当前 HTML 的 CSS px；矩形测量保留两位小数，CSS计算字符串保留浏览器返回值；不是源 PNG 的像素标注。390 画布是实现参考基线，原图 1170 px 对应 3 倍视觉比例。

iOS 按逻辑 pt、Android 按 dp / sp 实施时可参考这些数值，但仍需平台字体、安全区和缩放适配，不直接做物理像素等同换算。

字体大小、行高和字重为当前继承与响应式规则合并后的值。外边距展示 CSS margin 声明的计算结果；父级距离、兄弟间隙是可视矩形测量，可能受滚动、折叠、transform 影响，不等同于 margin。

背景 Alpha 仅影响该颜色；整体 opacity 同时影响文字与子元素。透明度 = 1 − 不透明度。多层渐变、祖先 opacity、PNG 自带 Alpha 无法用一个百分比描述最终视觉。

切换画布、大字体、输入状态或滚动后可重新测量。CSS媒体查询按浏览器窗口宽度生效；画布宽度选项只改变预览容器，验证手机断点请同时缩窄浏览器或使用设备模拟。标注读取当前示例，不将这些样式数值视为已批准的产品 token。