01 启动页 · Driftly HTML布局

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

LIVE HTML PREVIEW390 × 844

简体中文

让世界的温柔，漂向你

A message. A brighter sea.

总有一个瞬间，
想把心事说给大海听。
也许，温柔正在向你靠近。

IMPLEMENTATION NOTES

本页独立背景

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

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

1. 页面理解与当前修订

原图为日落海岸整屏：上方 Driftly 字标和品牌标语，中下方人物与漂流瓶，下方蓝色开始按钮及协议。开发将系统启动屏与进入应用后的品牌初始化页区分；语言和错误重试属于可交互应用页面，不能放进静态系统启动图。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
语言入口	顶部安全区内右对齐，命中区至少 44/48	不覆盖系统状态栏
品牌区	字标宽约 210、高约 90，位于内容上部；标语间隔 8～12	字标不拉伸，文本可换行
海岸舞台	占剩余高度；背景不参与前景排版	小屏先减少装饰留白
初始化反馈	操作区上方预留一行状态，失败时展开重试	不靠无限动画挡住错误
主操作与协议	左右 24，主按钮最小高 56，协议在按钮下并可换行	当前业务需要同意时必须明确操作，不能照图默认勾选

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

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。完整日落构图：顶部保留天空，左下人物、右上灯塔、右下斜放玻璃瓶。字标与文案由前景独立渲染。

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

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

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

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`01_splash/wordmark`，210×90	`driftly_01_splash_wordmark`	3× PNG

字标可直接复用；口号、协议、按钮使用原生文本与控件。

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

4. iOS 具体做法

系统 Launch Screen 使用静态底色/品牌资产，网络初始化放在进入 SwiftUI 后的 SplashView；不要让 Launch Screen 等待 API。
用 ZStack 叠背景和 VStack，品牌 Image 设 resizable/scaledToFit；底部操作 safeAreaInset，语言通过 sheet 或导航进入 05。
初始化由可取消 task 驱动，应用进入前台重新核实会话；VoiceOver 读出失败原因，减少动态效果时停止海面漂浮。

5. Android 具体做法

使用系统 SplashScreen 承接启动，再进 Compose SplashScreen；启动主题中不塞复杂交互和完整海岸布局。
Box 铺海景，Column 在 safeDrawing 内摆品牌和按钮；系统栏浅/深图标随背景选择，不能绘制图片内状态栏。
ViewModel 合并配置、语言、会话检查为一个导航结果；旋转或重组不重复创建游客账号，失败显示明确重试。

6. Web 具体做法

首屏用真实 DOM 品牌区和继续按钮；海景设 object-fit: cover，首屏重要图不要 lazy，加载失败有底色。
SPA 初始化时保留可读错误卡；使用 router replace 进入目标页，浏览器返回不会反复回到初始化中间态。
桌面将品牌区和海景做左右双栏，右侧操作宽约 440；不要放大竖版截图模拟整个应用。

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

初始化成功且已完成引导：有效会话进入 12；无效会话进入 06。未完成引导进入 02，跳过或完成后按引导流程到 05。
首次启动不默认替用户同意；若该动作在 06 统一处理，01 只保留协议链接，避免两次状态互相矛盾。
区分网络失败与会话失效；网络失败可重试，不能自动退出并创建新账号。必要/可选更新采用实际配置。

8. 本页验收重点

冷启动无网仍有品牌、错误和重试，不卡在静态图片。
长标语、窄屏、大字体时协议可读且主按钮不压到手势区。
已完成引导的用户再次启动不重播三页，也不重复触发认证。

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