面向多语言与 RTL 的界面设计：避免文本膨胀…

当产品要发布到多个语言/地区时，用本地化感知的设计原则让布局、图标、格式无需按语言重做即可适配。

适用场景

解决思路

1. 为文本膨胀预留空间：绝不要按英文文案尺寸固定容器，改用弹性高度和宽度。
2. 在还没有其他语言译文时，先用德语或芬兰语翻译做最坏情况的布局测试。
3. 截断加省略号只作为最后手段，同时通过 tooltip 或展开提供完整文本。
4. 按钮使用 min-width 而非固定宽度；在窄场景下允许极端情况换行。
5. 导航标签把所有导航项一起按 130% 长度测试，验证菜单不会破版。
6. RTL 内容流：文本、列表和阅读顺序整体反向。
7. RTL 布局镜像：侧边栏、导航和内容区翻转，左边距变为右边距。
8. RTL 图标镜像：方向性图标（箭头、chevron、返回按钮）镜像；非方向性图标（相机、设置）不镜像。
9. 使用 CSS 逻辑属性：用 margin-inline-start 代替 margin-left，用 padding-block-end 代替 padding-bottom，它们会随 dir="rtl" 自动翻转。
10. 文本对齐使用 text-align: start 而不是 text-align: left。
11. 数字在 RTL 文本中大多保持 LTR，不要镜像数字显示。
12. RTL 中不镜像的内容：logo 和品牌标识、时钟和时间显示、数学符号、图片和插画（通常，视语境而定）、视频播放器控件（有争议；方向性控件镜像，播放/暂停不镜像）。
13. 非拉丁文字排版：阿拉伯语和希伯来语是连写文字且有字母连写规则，最小字号要更大（16px+）以保证可读性。
14. CJK（中文、日文、韩文）为方块字，最佳行高、字距和行长规则与拉丁文不同。
15. 天城文（印地语）等印度系文字有复杂连字，要用包含正确回退字体的字体栈测试。
16. 绝不对非拉丁文字做伪粗体或伪斜体，使用字体家族中真实的字重。
17. 不要仅靠颜色传达语义（这也是无障碍要求）。
18. 高风险或全球化产品要请文化顾问一起测试颜色选择。
19. 避免手势图标（竖大拇指、OK 手势）——在某些文化中有冒犯含义。
20. 邮政和市政类图标（邮箱、房子、电话）因地区而异，改用抽象或普遍可识别的形式。
21. 宗教和食物象征带有文化包袱，除非必要且经过测试，否则避免使用。
22. 日期格式因地区而异：MM/DD/YYYY（美国）、DD/MM/YYYY（英国/欧洲）、YYYY-MM-DD（ISO）。
23. 通过 Intl.DateTimeFormat 或等价方案使用区域感知的格式化。
24. 货币的符号位置、小数分隔符、千位分隔符都各不相同。
25. 地址的字段顺序、必填字段和格式差异很大，使用区域感知的地址表单库。
26. 所有间距、尺寸和布局都使用逻辑 CSS 属性。
27. 文本容器必须支持弹性高度和弹性宽度。
28. 设计 token 命名要语义化而非方向化（用 start 而不是 left）。
29. 组件在加入设计系统前，至少用一个 RTL 语言和一个长膨胀语言测试。
30. 在组件文档中提供本地化说明，例如「该组件已用阿拉伯语（RTL）和德语（文本膨胀）测试过」。
31. 从第一天起就考虑本地化——事后给偏左布局补 RTL 支持代价高昂。
32. 创建伪本地化测试字符串（把字符替换为扩展的相似字符），在译文出现前测试膨胀和特殊字符处理。
33. 与目标市场用户或文化顾问合作，而不只是翻译——翻译处理文字，本地化处理含义。
34. 国际化之前先审查图标和插画库的文化中立性。

适用边界 · 注意事项

• 只做单一语言、单一地区且无国际化计划的产品。
• 仅需要文案措辞层面的优化时，应使用 ux-writing 技能而非本技能。
• 没有资源做任何区域测试或文化审查的一次性内部工具。