20 · 陌生人资料

DRIFTLY / HTML LAYOUT STUDY

画布背景对照

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

LIVE HTML PREVIEW390 × 844

海上的风

来自远方的你，也很温柔。

12扔出的瓶子

86收到的回应

128相遇的朋友

关于 TA

喜欢风，也喜欢慢慢靠近的温柔。
愿意认真地听每一个平凡的故事。

共同兴趣

IMPLEMENTATION NOTES

本页独立背景

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

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

1. 页面理解与当前修订

上方圆角海景封面，中间圆头像覆盖封面下缘，昵称简介与统计，下面关于TA/兴趣卡，底部关注和打招呼。封面、头像、统计和关系动作必须拆开；打招呼不得绕过会话接受。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
导航	返回、个人主页、更多	举报拉黑可达
封面	宽W-40，高约130～160，圆角20	独立cover，人物/灯塔不被头像关键遮挡
头像姓名	头像80～96，覆盖下缘约32；昵称20～24	头像下面保留真实布局高度，不只负偏移
统计与资料	三列统计、简介与兴趣标签卡	只显示允许公开数据，缺省不造零或示例数字
底部关系	已接受会话可聊天；关注P1按开放显示	一项主动作，限制态有说明

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

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。整页为浅色雾化海岸；顶部封面另用 20_user_profile-cover.png，不能截取整页背景充当封面。头像、统计和按钮均为独立组件。

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

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

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

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`20_user_profile/cover_scene`，342×86	`driftly_20_user_profile_cover_scene`	3× PNG
`20_user_profile/avatar`，93×93	`driftly_20_user_profile_avatar`	3× PNG

cover_scene仅342×86，适合窄封面条；大封面优先独立高分辨率海景，头像为动态用户图片。

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

4. iOS 具体做法

封面用ZStack与overlay，头像offset只做视觉位移，同时在后续内容预留相应高度，防止昵称向上重叠。
ScrollView渲染资料，统计HStack可在大字体变纵向；头像AsyncImage保留失败占位。
更多用confirmationDialog，聊天动作先查询关系，未接受进入请求/提示流程，不直接打开可发送会话。

5. Android 具体做法

Box放封面和align BottomCenter头像，Column显式留出头像溢出空间；封面Crop，头像CircleShape。
FlowRow或自适应网格排兴趣标签，大字体自然换行；不把文字约束在截图固定一行内。
ViewModel处理关注/拉黑请求，成功后更新全局关系与相关列表；账号注销/不可发现显示受限资料状态。

6. Web 具体做法

header封面position:relative，头像absolute在下缘，但信息区用padding-top补足重叠高度。
CSS grid三列统计，标签flex-wrap；桌面宽约720，可分资料卡和关系侧栏。
关注/聊天均为真实按钮，禁用状态提供原因；资料ID来自路由但权限由服务端核实，不能仅靠隐藏按钮。

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

作者/会话头像入口进入本页；昵称、头像和简介显示已审核生效内容，审核中的改动不当作公开新资料。
邮箱、手机号、IP、精准位置不公开。关注为P1，可用字段/统计必须服从公开权限。
聊天动作遵守双方同意：已有已接受关系进入19，未接受走消息请求依赖流程，不允许“打个招呼”直接持续私聊。
注销、拉黑、禁止发现和权限撤销返回明确不可见状态；执行安全动作后更新回到上一页的内容。

8. 本页验收重点

头像重叠不会压住昵称，缺头像和长昵称仍布局完整。
未建立接受关系点击聊天不能直接发送；拉黑立即影响资料和消息。
统计缺失不显示原图12/86/128等示例，敏感联系方式始终不出现。

还需覆盖通用验收中的窄屏、大字体、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。