本地化与无障碍

这张卡讲两件让产品被更多人用得上的事：本地化（让不同国家、语言、文化的人觉得"这是为我做的"）和无障碍（让用眼睛、用手、用读屏软件的人都能用）。不用懂代码，照着下面能直接看到的正反例就能给 Agent 下具体指令，比如"这段灰字对比度不够，加深""每张图都补一句替代文字"，也能对照示例看出它做得对不对。

1. 本地化基础（Localization Fundamentals）

本地化 不等于 简单翻译

本地化要服务于用户体验（UX）。本地化（localization）是为不同国家的用户调整"整套体验"，不只是把文字翻过去。

为什么"国际化设计"要先于"本地化"

如果产品面向多个市场，要在开发之前就为文化差异做设计。事后再返工，成本会高出不少。早期就该问几个问题：

• 这个市场的用户有用数字钱包的习惯吗？
• 他们偏好向左还是向右的导航手势？
• 他们喜欢极简界面，还是信息密集的版面？

三个关键要素

2. 跨文化设计四步法（Four-Step Process）

第一步：确保每个市场都好用

套用 Steve Krug 的可用性原则：

颜色含义的真实对照（同一个红，含义相反）：

第二步：把应用"国际化"

语言长度与排版：同一个词，不同语言长度差很多，要在 UI 里预留弹性空间，用动态行高。

• 复杂文字（中文、日文）需要更大字号和更多行距（leading）。

伪本地化测试（Pseudo-Localization）：把所有文字翻倍变长，模拟翻译后的膨胀，提前找出版面会被撑破的地方。

英文转中文常会留下多余空白，需要和母语者一起细调。

RTL（从右到左）支持：阿拉伯语、希伯来语需要做这几件事。

• 翻转垃圾桶图标、返回按钮、对齐方向（左右互换）。
• 反转图标顺序与视觉层级。
• 重新考虑横向滚动，改用纵向导航。

同一排元素，"返回""删除"的左右位置随书写方向整体翻转。

面向国际化的 UX 文案写作：

其它国际化要求：

第三步：识别"非文字"的 UI 元素

除了文字，这些"看得见"的东西也要按文化审一遍：

留白偏好的真实对照（同样一张 Steve's Repair 卡片）：

第四步：内容本地化

范围：

• 应用内：标题、正文、错误提示、引导页、教程、帮助文档。
• 应用外：应用商店描述、用户生成内容（UGC）、客服回复、社媒、邮件营销、技术文档。

按内容类型选翻译策略：

优先级框架：按可见度、影响、持久性、敏感度分类。纯人工（高影响、长期、创意）；纯自动（低价值、短命、批量）；混合（重要但可标准化，先机器后人工复核）。

3. 多语言 UI/UX 注意点

中文

• 没有空格，一个字就是一个词。
• 大约只占英文 1/4 的空间。
• 中文应用每屏显示更多信息；用户预期信息密集的版面。
• 例：一屏就能完整显示标题，无需截断。

日文

• 比英文多约 150% 的文字量（雅虎日本 vs 雅虎美国）。
• 用户偏好完整信息；西方用户偏好简洁。界面必须容纳更长的文字块。

阿拉伯文 & 希伯来文

• RTL 书写方向会反转整个布局。
• 图标、按钮、对齐都水平翻转。
• 参考：Google Material Design 提供 RTL 指南。

印尼语（超级 App 案例）

Gojek（打车、外卖、支付、票务、美容）用本地语言写文案："哎呀，网断了"比"无连接"自然。一个 App 覆盖多种服务，降低认知负荷，也省存储和流量。

新加坡（Singlish）

面对多种官方语言（华语、马来语、泰米尔语、英语），Gojek 选了 "Singlish"：加载页写"wait ah, getting ready（等下啊，准备中）"，让本地用户读起来更自然。

菲律宾（语言复杂度）

不同语言需要不同 UI 版面：英语一句话，他加禄语一到两句，Bicolano 语有重复音节、词很长、占很多空间。只靠 Google 翻译不够，设计必须考虑语言结构。

数字素养（案例：南非）

手机银行 App 研究发现：75% 用户被术语搞晕（"商户短码""充值""topup"）。把术语换成用户能懂的说法后，完成率明显上升：

4. 无障碍与包容性设计（Accessibility）

10 条可用性启发式原则（Nielsen，配真实软件案例）

第 9 条"错误信息"的真实正反对照（Steve's Repair 预约表单）：

5 个网页无障碍设计方法

1. 给交互元素加标注（Annotations）

给每个可交互元素编号定 Tab 顺序，并标注功能说明。

2. 标题层级（Heading Hierarchy）

正确的标题结构形成"文档大纲"，读屏软件用户靠它导航。标准（WCAG 2.1）：H1 每页一个（页面标题）；H2 主要章节；H3 是 H2 下的小节；绝不跳级（H1 直接到 H3 无效）。

3. 清晰标签 & 分组控件

• 标签放在输入框外面，别只用会消失的占位符（placeholder）文字。
• 单选/复选用 <fieldset> 和 <legend> 分组。
• 例：Gmail 的"撰写"按钮永远有清晰可见的标签。

4. 颜色与对比度（Color & Contrast）

颜色本身不能单独传达信息；对比度保证可读。WCAG 标准：

反例真实对照：

工具：WebAIM Contrast Checker · Axe DevTools 浏览器插件 · Color Oracle（模拟色盲）。

5. 响应式 + 无障碍

• 在 150% 缩放下测试：元素不重叠、不错位。
• 触摸目标最小 7 到 10mm²（移动端 44×44px）。
• 在 200% 缩放下仍可读，不出现横向滚动。
• 字号用相对单位（em、rem），不用固定像素。

11 条包容性 UX 贴士（含商业案例）

1. 从一开始就做无障碍，别当事后补丁：返工成本是内建的 3 到 5 倍。
2. 保证颜色对比（不低于 4.5:1）：所有人都受益。商业影响：Legal & General 改进无障碍后线上寿险销量提升 50%。
3. 用多种方式区分信息：别只靠颜色，加图标、纹理、标签。例如 Trello 的色盲模式用纹理加文字标签表示卡片状态。
4. 表单标签放输入框外：占位符在聚焦时会消失，清晰标签始终可见。
5. 给所有图片配替代文字（alt text）：描述图片内容，给读屏用户用，也在图片加载失败时显示。格式要简洁、有描述性，别写 "image.jpg" 或 "photo"。
6. 用标题层级（H1 到 H2 到 H3）：读屏用户靠标题导航。
7. 让交互元素清晰可见：按钮和链接要有清晰文字、足够大小，和静态文字有区别。
8. 保证键盘可用：所有交互都能用 Tab、Enter、Space、方向键完成，不只靠鼠标。这惠及行动障碍者、语音控制者和高手。
9. 设计大触摸目标（7 到 10mm²）：惠及灵巧度下降的长者、在车上的人、所有移动端用户。
10. 找真实的残障用户测试：指南必要但不够，真实测试才能发现意外摩擦。
11. 用工具审计：自动检查只能抓 30% 到 40% 的问题，其余靠人工加用户测试。

替代文字（alt text）的真实正反对照：

商业案例 · 无障碍设计的回报（ROI）：

导航设计模式（Navigation Patterns）

导航是无障碍和用户信心的基础。它影响：理解（知道自己在哪）、信心、可信度、品牌、寻路、无障碍、留存、SEO。

面包屑长这样（Steve's Repair）：

导航实用贴士：

1. 保持简单：顶层最多 5 到 7 项；相关项分组，避免超过 15 项的扁平结构；用渐进披露。
2. 保持一致：各页导航结构、术语、图标、位置一致；唯一例外是把当前页做得视觉上明显不同。
3. 适配设备：桌面用常驻侧栏/顶栏；平板用可折叠侧栏/标签；移动用汉堡或底部标签栏。按真实断点测试。
4. 用视觉层级：用字号、颜色、字重区分主次导航；图标加文字比单图标清楚；强调色控制在 2 到 3 个。
5. 频繁测试：卡片分类法、树测试、A/B 测试导航改动，量"到达目标的时间"与任务成功率。
6. 提供多种导航方式：顶栏加搜索、侧栏加面包屑、页脚全局链接、键盘快捷键、站点地图。

关键无障碍研究方向 & 包容性原则

• 深色与浅色模式：有人受益于深色（减眼疲劳），有人偏好浅色，两个都提供。
• 读屏兼容：在移动和桌面上用真实读屏用户测试。
• 颜色对比：遵循 WCAG（正文 4.5:1，大字 3:1）。
• 键盘导航：所有交互元素仅用键盘也能到达和操作。
• 尽早考虑残障，而非事后补救；好设计惠及所有人（字幕帮非母语者，也帮在嘈杂环境的人）。
• 用语义化 HTML、ARIA 标签和正确的标题层级。

速查清单（Actionable Checklist）

进入新市场前

• 研究文化习俗、颜色含义、导航偏好。
• 把代码"国际化"（弹性文字空间、RTL 支持、多种文字）。
• 跑伪本地化测试（文字翻倍变长）。
• 审计非文字元素（图片、颜色、动画、留白）。
• 给内容定翻译优先级（人工 / 混合 / 自动）。
• 用母语者和目标市场用户测试。
• 提供深色模式、更大字号选项、高对比主题。
• 保证键盘导航与读屏兼容。
• 用清晰、无黑话、匹配用户素养的语言。
• 简化术语，用 A/B 测试。

无障碍上线前审计

• 检查所有文字对比度（正文 不低于 4.5:1，大字 不低于 3:1）。
• 测试键盘导航（Tab、Enter、Space、方向键覆盖所有交互）。
• 校验标题层级（H1 每页一个、不跳级）。
• 确认所有图片有描述性替代文字。
• 确保表单标签可见（不只占位符）。
• 用读屏软件测试（NVDA、JAWS、VoiceOver）。
• 确认触摸目标不小于 7 到 10mm²（44×44px）。
• 在 150% 和 200% 缩放下测试。
• 跑自动化工具（Axe、Lighthouse、WAVE）。
• 找残障用户做用户测试。

工具与平台

本地化：本地化管理平台自动抽取/分配/集成译文；截图上下文帮译者理解 UI 场景；术语库保证跨市场一致；自动质检抓出不一致、未翻译字符串和格式错误。

无障碍审计：

卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），问"按无障碍原则，这页对比度/键盘/标签哪里要改？"或"帮我跑一遍上线前无障碍清单"。