05 · 语言选择

DRIFTLY / HTML LAYOUT STUDY

画布背景对照

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

LIVE HTML PREVIEW390 × 844

选择你的语言

语言示例，用于查看列表的布局与选择状态。

跟随系统语言根据系统偏好显示界面

IMPLEMENTATION NOTES

本页独立背景

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

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

1. 页面理解与当前修订

浅蓝顶栏、说明标题、跟随系统开关、白色语言列表卡和底部继续。原图语言项只是示例，不代表所有语言均已支持。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
导航栏	左返回，中间语言设置	从首次引导进入与设置进入保留不同返回目标
标题与说明	左右20，标题24～28，说明可换行	本语言名称用自名称
系统模式卡	一行或两行说明+尾部开关，最小高64	开关和手选语言关系明确
语言列表	行最小高52～56；名称、可选副标题、选中勾	列表独立滚动或整页滚动，只选一种
保存动作	底部继续/保存，高56	长列表最后一项不被动作栏遮住

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

3. 背景和素材怎么设置

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

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

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

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

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`05_language/back_arrow`，25×30	`driftly_05_language_back_arrow`	3× PNG

返回箭头是风格参照；正式返回按钮遵守平台导航和RTL方向。

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

4. iOS 具体做法

用 Toggle 管跟随系统，语言列表用 List 或 ScrollView/LazyVStack；系统 List 需隐藏默认背景以显示自定义卡底。
语言值与显示 Locale 分离，保存后统一更新环境 locale；不要只翻译当前标题。
设置来源保存后返回原页面，首次来源进入06；RTL 用 leading/trailing，不手动翻转品牌图。

5. Android 具体做法

LazyColumn 渲染支持语言，整行 selectable，Radio/勾选和文字共用一个状态，不让两处选择不同步。
手动选择通过工程的应用语言机制持久化；随系统模式监听系统语言变化，恢复时重新解析。
UI 读取 B.7 的语言/模式整数映射，展示本地化 label 或自名称；不把 locale 字符串当后端整数值。

6. Web 具体做法

使用真实 radio group 和系统模式开关；语言多时增加带 label 的搜索输入，过滤不改变已存选择。
Vue i18n 或既有国际化层更新文案，同时更新 html lang/dir；长列表可滚动，选中行仍可定位。
保存偏好区分手动与系统，恢复时校验支持列表；localStorage 失败可退当前会话内存并提示无法持久化。

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

有效手动选择优先，其次支持的系统语言，匹配/读取失败回退 zh-CN；und 不出现在界面选择项。
跟随系统开启时不要又保存某一项为永久手选；可显示当前实际解析到的语言。
未保存与已保存状态分开；从设置进入不应每次保存都跳登录。语言撤销支持时明确回退。

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。