国际化设计系统
目的
国际化设计系统技能提供了一种为全球受众设计界面的方法论。它超越了简单的翻译，深入解决了不同语言和文化带来的空间、排版和视觉影响。该系统确保布局能够灵活适应不同的文本长度，双向（从右到左）布局得到正确镜像，并且视觉提示保持文化上的恰当性。
用例
- 设计一个面向多区域发布的全球SaaS平台或电子商务网站。
- 将现有的仅限英语的界面适配到RTL语言（阿拉伯语、希伯来语、波斯语）。
- 为非拉丁文字（CJK、西里尔文、天城文）建立排版标准。
- 审计UI组件的“扩展就绪性”（处理德语或芬兰语中的文本增长）。
- 创建避免文化特定或方向性偏见的图标集。
何时不使用
- 单一区域/单一语言网站： 没有未来扩展计划且本地惯例已知的情况。
- 纯视觉叙事网站： 设计是依赖于固定的、不可重排空间关系的艺术表达。
- 纯内容翻译： 任务仅仅是翻译文案而不改变UI或布局行为。
输入项
- 目标语言列表： 需要支持哪些语言和文字？
- 阅读方向： 语言是从左到右（LTR）还是从右到左（RTL）？
- 排版资源： 保持品牌调性在各文字间一致的本地化字体栈。
- 文化背景： 关于颜色、符号和数据格式（日期、货币）的区域特定惯例。
- 布局断点： 来自响应式网格系统的断点。
输出项
- 双向（RTL）镜像规范： 指示哪些元素翻转、哪些保持不变（例如，进度条 vs. 媒体控件）的映射。
- 排版比例矩阵： 针对不同文字系列调整的字体大小和行高。
- 扩展蓝图： 设计用于处理±40%文本长度变化的UI模式。
- 图标逻辑： 关于镜像与非镜像图标的指南。
- 本地化设计令牌： 在规范中定义的逻辑属性（例如
padding-inline-start）。
工作流程
1. 为文本扩展而设计
永远不要假设标签会保持简短。像德语或意大利语这样的语言可能比英语长30-50%。
- 弹性容器： 避免固定宽度的按钮或卡片；使用
min-width或fit-content。 - 文本换行： 确保UI元素（如标签或菜单项）能够优雅地换行或过渡到“溢出”菜单。
- 动态居中： 如果文本扩展，确保它不与相邻元素重叠。
2. 实现RTL镜像逻辑
对于从右到左的语言，页面的“心智模型”会发生翻转：
- 布局镜像： 侧边栏从左移到右；Logo从左上移到右上。
- 逻辑属性： 在设计注释中使用“开始”和“结束”而不是“左”和“右”。
- 导航流程： 在LTR中指向左的“后退”按钮，在RTL中必须指向右以表示“返回上一状态”。
3. 本地化排版和垂直节奏
非拉丁文字具有不同的高度、密度和可读性要求：
- CJK（中文、日文、韩文）： 由于字符复杂，需要稍大的基础字号和更宽松的行高（leading）。
- 阿拉伯语： 具有高升部和深降部；增加垂直间距以防止行间“冲突”。
- 后备字体栈： 定义与您主要品牌字体的字重和x高度尽可能匹配的系统字体后备。
4. 审计图标方向性
并非所有东西都在RTL中镜像：
- 镜像： 方向性图标（箭头、飞机、自行车）、进度条以及表示“前进/后退”移动的图标。
- 不镜像： 顺时针/逆时针图标（时钟、重新加载）、媒体播放控件（播放、暂停、搜索）以及“对勾”（它们是通用的）。
- 数字： 大多数RTL区域使用西方阿拉伯数字（1、2、3），即使在RTL文本中仍然从左到右阅读。
5. 建立数据格式化标准
- 日期与时间： 明确区分DD/MM/YYYY与MM/DD/YYYY，避免混淆。
- 货币： 定义符号位于金额之前还是之后（例如，$10 vs. 10 €）。
- 日历： 某些地区使用不同的每周起始日（周一 vs. 周日）。
决策规则
- 镜像规则： 如果UI元素表示“方向”或“时间”（向前移动），则必须在RTL中镜像。如果它表示物理对象（如相机或时钟），则通常保持不变。
- “35%缓冲区”规则： 在英语设计阶段，始终在按钮和标签中保留35%的空余空间以容纳扩展。
- 特定文字大小调整： 如果文字非常复杂（例如天城文），为了可读性，相对于拉丁等价物将字号增加10-15%。
- 文化敏感性： 避免西方中心化的图标（例如，储蓄用的存钱罐，在许多文化中不合适）。
约束条件
- 可访问性： 文本扩展不得隐藏交互元素或导致水平溢出。在所有本地化版本中必须保持对比度。
- 响应式： 布局在切换方向时必须保持稳定。在规范中使用
padding-inline和margin-inline。 - 层次结构： 无论阅读方向如何，主要号召性用语必须保持最突出的元素。
常见失败模式
- “扩展破裂”： 硬编码的宽度导致翻译后的文本被截断或重叠。
- “懒惰镜像”： 镜像了不应该镜像的图标（如“播放”按钮或时钟），使用户感到困惑。
- “英语优先”陷阱： 设计一个紧凑、极简的英语UI，但在长单词的语言中变得完全不可用。
- 缺少后备字体： 未指定非拉丁文字的字体，导致显示“豆腐块”（损坏的字符框）。
- 对齐不一致： 混合使用镜像布局和未镜像的文本对齐，产生参差不齐、不精致的感觉。
验证标准
- 布局成功为RTL视口镜像（侧边栏/Logo互换）。
- UI组件处理40%的文本扩展而不会破裂或重叠。
- 根据文字复杂度调整排版比例（例如，为阿拉伯语/CJK增加行高）。
- 图标遵循“镜像 vs. 固定”逻辑。
- 设计使用逻辑属性（开始/结束）而不是绝对属性（左/右）。
- 日期、货币和数字格式已正确本地化。
- 为所有目标文字定义了后备字体栈。