一、设计目标

让设计者与开发者直观感受 RTL 差异：切到阿语，文字方向变、Row 排布变、对齐变，一个开关还能控制镜像开关，理解「镜像」与「不镜像」的视觉差异。

本页面不是面向真实用户的产品，而是一个教学型实验台。因此 UI 设计的核心诉求不是「好看」，而是「清晰」——让每一个 RTL 相关概念都能被肉眼捕捉到。设计上采用双变量实验法：

• 变量一（语言）：中文 ↔ 阿拉伯语，驱动文本方向与布局镜像；
• 变量二（镜像开关）：独立的 Toggle，可以强行关闭布局镜像，制造「RTL 语言 + LTR 布局」的错误示范。

两个变量正交组合，形成 2×2 四种状态，其中「阿语 + 未镜像」是每个初学者最容易犯的错误，页面特意把它做成可复现的实验。

二、页面信息架构

区块	内容	作用
标题栏	标题 + 📰 emoji	主题定位
语言选择	语言徽章（含方向标注 LTR/RTL）	切方向
方向状态卡	当前 LTR/RTL + 说明	状态告知
新闻列表/详情	双语新闻流	布局镜像演示
bidi 混排演示	含数字/英文的阿语样例 + Toggle	文本层展示

自上而下的阅读动线是「先选语言 → 看状态 → 看布局 → 看混排」，每一步都建立在前一步的基础上：语言决定方向状态，方向状态解释布局差异，混排演示补充文本层细节。

2.1 标题栏

标题「中东新闻 📰」固定 22 号加粗，副标题「LTR ↔ RTL 布局镜像演示」12 号灰色。标题本身不随语言切换，因为它是主题标识而非内容；副标题点明页面用途，随语言切换以显示诚意。

2.2 语言选择区

采用 Flex 流式布局，徽章为胶囊形（borderRadius(16)），当前选中语言用琥珀色底 + 白字，未选中用浅灰底 + 深灰字：

🇨🇳 简体中文 (LTR)   🇦🇪 العربية (RTL)

徽章文字里显式标注 (LTR) / (RTL)，这是本页特意加的设计——用户无需知道当前选了哪种语言，仅从徽章就能读出方向信息。选中态颜色与方向状态卡的颜色体系呼应（琥珀=阿语/RTL）。

2.3 方向状态卡

一行简洁的状态提示：

当前方向: RTL (من اليمين إلى اليسار)

• 非选中状态：蓝色（#3B82F6） 表示 LTR；
• 选中阿语：琥珀色（#B45309） 表示 RTL。

颜色 + 文字 + 示例短语三重提示，保证色弱用户也能读取出方向信息（不只靠颜色传达）。

三、交互设计

3.1 语言徽章切换

点击任一徽章即切换 currentLocale：

.onClick(() => {
  this.currentLocale = l.code;
  this.selectedId = '';
})

切换瞬间触发整页重渲染：文本全部换成阿语、Row 顺序镜像、对齐反转。点击同时重置 selectedId = ''，确保从详情页切语言后回到列表页——避免「详情页内语言切换但内容状态错乱」。

3.2 镜像开关

Toggle 开关独立于语言变量。当处于「阿语 + 镜像开」时布局正确；切到「阿语 + 镜像关」时，用户能亲眼看到 Row 顺序没有镜像、文字没有右对齐——这就是不处理 RTL 的后果。

设计上刻意不把镜像开关与语言绑定，因为教学目的就是让用户手动组合出错误状态，对比中理解镜像的必要性。

3.3 列表/详情切换

新闻卡片点击进入详情，返回键点击回列表。详情页的返回键文案随语言镜像（「← 返回」↔「→ عودة」），箭头方向本身就是镜像教学点。

四、视觉层次

4.1 色彩体系

用途	色值	语义
页面背景	#F8FAFC	浅灰蓝，弱化干扰
卡片背景	#FFFFFF	内容承载
主文字	#1F2937	标题、正文
次级文字	#6B7280 / #9CA3AF	摘要、元信息
强调色（LTR）	#3B82F6 蓝	方向状态
强调色（RTL）	#B45309 琥珀	方向状态 + 分类徽标

琥珀色贯穿「RTL 相关」元素：分类徽标、选中语言、方向状态、返回键——形成同色系语义绑定，用户看到琥珀色即知是阿语/镜像相关元素。

4.2 混排演示卡

#FFFBEB 浅琥珀底色，与 RTL 语义呼应。卡内样例文字 15 号，重点观察「iOS 17.2」「120」「$999」等内嵌段在阿语句子里的显示顺序。Toggle 开关置于卡片顶部，切换两组样例：

• 样例 A：混排样例：iOS 17.2 支持 120 个国家、30 种语言。
• 样例 B：你的新手机 iPhone 15 Pro 现在仅售 $999。

两组样例覆盖「数字+单位」「品牌+版本号+价格」两类最常见的混排场景。

4.3 布局演示的视觉聚焦

新闻卡片内信息密度适中：分类徽标（10 号）+ 标题（17 号加粗）+ 摘要（13 号）+ 底部元信息行。徽标与时间行刻意放在同一 Row，因为它是「Row 顺序镜像」最直观的观察点——LTR 下徽标在左，RTL 下徽标在右。

五、无障碍与细节

• 样例文字 16 号以上：阿语脚本字形连写较多，过小字号会难以辨认；
• 方向状态双重提示：颜色 + 文字「LTR/RTL」+ 示例短语，不只靠颜色；
• 镜像开关带文字说明：当前效果一望即知；
• 对比度：琥珀底白字对比度约 4.8:1，灰底深灰字约 7:1，均满足 WCAG AA；
• 触控目标：徽章高度约 32px，卡片高度充裕，点击区域充足。

六、响应式与自适应

页面主体是 Scroll + Column 纵向流，宽度 94% 居中。语言徽章用 Flex wrap 流式换行，窄屏下自动折行不溢出；新闻卡片宽度自适应，详情正文 lineHeight(26) 保证阿语长句的可读性。整体无固定像素宽度，从 320dp 到折叠屏均能良好呈现。

七、设计模式总结

本页的设计精髓在于把「镜像」拆成可独立开关的变量：

1. 语言决定方向事实（数据层）；
2. 镜像开关决定是否执行镜像（布局层）；
3. 混排样例展示系统级 bidi 处理（文本层）。

三个层次解耦，用户/学员可以单独观察每一层的行为。这种「正交变量实验台」的设计思路，同样适用于其他教学型页面——把复杂概念拆成可组合的实验变量，比堆砌说明文字更直观。

7.1 数据流复盘（一次完整交互）

以「中文 → 阿语」切换为例，追踪每一层的响应：

用户点击 🇦🇪 العربية (RTL) 徽章
  → this.currentLocale = 'ar_AE'（@StorageLink 写回 AppStorage）
  → 方向状态卡：蓝色 LTR → 琥珀色 RTL，文案变「当前方向: RTL (من اليمين إلى اليسار)」
  → 新闻列表：分类徽标从左侧移到右侧（Row 镜像）
  → 标题/摘要/正文：全部换成阿拉伯语，右对齐
  → 返回键：← 返回 → → عودة（箭头方向翻转）
  → bidi 混排卡：内嵌数字「120」「$999」保持 LTR 内部顺序
  → build() 全树重渲染，无手动刷新

注意流程中的两个独立变量：语言切换（数据层）驱动文本与方向事实；镜像开关（布局层）决定是否执行镜像。若此时关闭镜像开关，阿语文本仍右对齐，但 Row 顺序回到 LTR——用户可亲眼看到「数据对了、布局错了」的中间态。这正是双变量设计的价值：每一层的职责都可以被单独归因。

八、设计决策推演

本节复盘本页几个关键设计决策的「为什么」，帮助读者理解取舍逻辑。

8.1 为什么用「双变量」而不是「单语言切换」

最初的设计只是「中阿语言切换」，但很快发现一个问题：用户切换语言后，文本、布局、对齐同时变化，很难分辨到底是哪一层在起作用。比如切到阿语后 Row 顺序变了，用户可能以为「阿语本来就该这样」，而不知道这是开发者手动镜像的结果。

把「镜像」拆成独立开关后，用户可以用「阿语 + 镜像关」组合，亲眼看到语言对了但布局错了的中间态——这正是绝大多数 RTL 翻车现场的真实写照。双变量的价值不是「多一个开关」，而是让每一层的职责可以被单独验证。

8.2 为什么方向状态用「三重提示」

仅用颜色区分 LTR/RTL 对色弱用户不友好，仅用文字对不识字方向术语的用户不友好。三重提示（颜色 + 文字 + 示例短语）保证：

• 色弱用户：靠「RTL」文字 + 阿语示例短语识别；
• 语言初学者：靠「من اليمين إلى اليسار」这个阿语短语直观感受方向；
• 快速扫读用户：靠琥珀/蓝色一眼定位。

8.3 为什么返回键文案要「箭头镜像」

如果只镜像布局不镜像文案，会出现「布局对了但箭头指反」的尴尬。中文「← 返回」的箭头指向左（LTR 习惯），阿语「→ عودة」的箭头指向右（RTL 习惯）。翻译团队必须知晓目标语言方向，这是「文案方向随语言」的典型案例。

九、RTL 视觉对比表

为了帮助读者直观理解镜像前后的差异，下表列出常见 UI 元素在 LTR 与 RTL 下的表现：

UI 元素	LTR（中文）	RTL（阿语）
阅读起点	左上角	右上角
标题对齐	左对齐	右对齐
Row 首元素位置	最左	最右
前进箭头	→	←
返回箭头	←	→
进度条填充	从左到右	从右到左
时间线方向	从左到右	从右到左
聊天气泡	自己的在左	自己的在右
数字/英文内嵌段	保持 LTR	保持 LTR（bidi）

这张表可作为 RTL 改造的「逐项检查清单」，每项都要在真机上验证。

9.1 bidi 算法：为什么数字不会被镜像

阿语句子里内嵌的「120」「$999」「iOS 17.2」保持从左到右，这不是巧合，而是 Unicode 双向算法（UAX #9） 的规则：

• 文本段落有基础方向（阿语为 RTL）；
• 段落内的强方向字符（拉丁字母、数字、$）按自身方向排布；
• 相邻的强方向段按基础方向整体定位，段内保持 LTR——所以「$999」显示为 $999 而不是 999$；
• 数字与货币符号之间的弱方向字符（如句号）按上下文推断方向。

对开发者的启示：不要手工翻转混排字符串，交给系统 bidi 引擎；但要在测试中覆盖「订单号 + 金额 + 版本号」这类典型混排，因为弱方向字符的上下文推断最容易出错（例如 12:30 与 3.14 在不同上下文的显示差异）。

十、错误示范分析

本页刻意保留「阿语 + 镜像关」的错误状态，因为它极具教学价值。以下是常见 RTL 错误及其后果：

错误	后果	本页对应
只右对齐文字，不镜像 Row	列表顺序仍 LTR，阅读混乱	镜像开关关闭
用 Left/Right 而非 Start/End	切换语言后对齐不跟随	方向状态卡
箭头图标不翻转	前进/返回方向感错乱	返回键文案
忽略 bidi 混排	订单号、价格读错	混排演示卡
只测翻译不测真机	连写字形、光标位置出错	测试清单

十一、排版验证清单（RTL 下自查）

检查项	方法	验证结果
文本方向正确	Text 组件依赖系统 bidi	阿语标题从右开始
布局镜像	容器 direction + Row 逻辑顺序	徽标从右到左排列
对齐随方向	用 Start/End 而非 Left/Right	标题右对齐
箭头翻转	返回键文案独立翻译	阿语显示 → عودة
混排数字	系统 bidi 引擎处理	$999 保持 $999
图标镜像	箭头类图标水平翻转	前进/后退方向一致
时间/进度方向	进度条从右到左	加载进度符合直觉
空态/错误态	同样走 RTL 布局	提示文字右对齐

十二、小结

UI 通过「语言选择 + 镜像开关」的双变量设计，把 RTL 的文本层与布局层拆开演示——既能单独观察 bidi 混排，又能对比镜像前后差异。色彩语义绑定（琥珀=RTL）与方向状态三重提示，让教学信息不依赖语言即可传达，是教学型演示页面的清晰范式。若团队要把这套实验台复用到其他 RTL 语言（希伯来语、波斯语），只需扩展 LANGS 数组并保持"语言 + 镜像开关"的双变量结构，教学价值不因语种变化而降低。