跳转到使用指南
Localization Design作者 Owl-Listener

Localization Design Skill.

让界面适应语言差异,而不只是替换翻译后的字符串。

  • 设计系统
  • 本地化
来源审查 · Localization DesignSKILL.md
任务 设计系统 产出 • 针对文本扩展、截断和弹性尺寸的组件审查。 • 区分需要镜像和保持不变元素的 RTL 规范。 • 区域格式和文字系统测试清单。 开始之前 需要目标区域的文本、字体以及适当的语言或文化审查;不附带自动化本地化平台。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

设计不局限于单一语言的界面

一份关注本地化的 UI 指南,涵盖弹性文本布局、书写方向、非拉丁文字系统和区域惯例。

基于来源的工作流程并非执行基准测试

工作方法

Localization Design 关注布局脱离原始语言后会出现的问题:更长的标签、不同的书写方向、文字系统特有的排版,以及日期、数字、货币或地址的本地格式。它建议使用弹性容器和逻辑 CSS 属性,并通过长文本和 RTL 区域设置进行测试。

它还区分了翻译与文化审查。即使布局在技术上已正确镜像,仍可能使用不合适的符号或假设。来源中包含用于说明的文化概括和文本扩展范围;这些内容应促使团队开展目标市场审查,而不应成为针对某个国家所有用户的通用规则。

预期交付物

  • 针对文本扩展、截断和弹性尺寸的组件审查。
  • 区分需要镜像和保持不变元素的 RTL 规范。
  • 区域格式和文字系统测试清单。
查看示例简报

从简报到审查

  1. 01
    测试文本扩展

    在最终译文完成前,使用扩展字符串或伪本地化字符串来发现固定宽度和导航标签被裁切的问题。

  2. 02
    梳理方向行为

    用 start/end 语义取代物理上的左/右假设。确定哪些图标需要镜像,以及哪些标记、数字或媒体应保持不变。

  3. 03
    审查区域含义

    请具备相应语言或市场专业知识的人员检查字体、格式、地址结构和涉及文化敏感性的图像。

02 适用场景

适用场景

需要目标区域的文本、字体以及适当的语言或文化审查;不附带自动化本地化平台。

适合的情况

  • 多语言发布之前适合在组件仍可统一修改时发现布局问题。
  • 设计系统准备工作将本地化要求纳入组件指南,而不是分别修复每个翻译后的界面。

需要确认的限制

  • 并非翻译服务它不会生成或认证最终的本地化文案。
  • 不提供文化适宜性认证宽泛的示例无法替代熟悉特定市场和受众的人员所做的审查。

请准备这些输入

  • 目标区域列出所需的文字系统、书写方向和格式惯例。
  • 组件示例提供导航、表单、卡片、按钮和密集数据视图。
  • 字体和内容提供实际或伪本地化字符串以及已获批准的后备字体。

03 关键决策

关键决策

  1. 选择性镜像

    方向箭头和布局流向可能需要反转;品牌标志和数学符号不应盲目翻转。

  2. 对系统进行本地化

    语义化令牌名称和弹性组件尺寸可减少后续区域对一次性覆盖样式的依赖。

04 示例任务

尝试聚焦型简报

以下示例简报尚未经过测试。使用前请检查该技能的设置。

检查设置

按照仓库中记录的安装方式操作,并保留所有引用的配套文件。本条目介绍的是一种聚焦的设计方法,而不是可执行应用程序。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

需要目标区域的文本、字体以及适当的语言或文化审查;不附带自动化本地化平台。

从一项交付物开始

运行该技能前,请调整此简报的范围、来源材料和约束条件。

示例简报
使用 localization-design 审查我们的账户设置界面是否适用于德语和阿拉伯语。检查标签扩展、逻辑间距、方向性图标、混合方向的账号以及日期格式。输出组件级变更和测试矩阵。将文化假设标记出来交由人工审查,而不是把国家刻板印象当作规则。

检查结果

根据以下可观察标准检查实际输出。

  • 较长的标签仍清晰可读,不会因固定宽度而被裁切。
  • RTL 行为能够区分方向性控件与非方向性资源。
  • 日期和数字采用区域感知格式,而不是重新排列字符串。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示已附带该技能,也不表示其中包含该技能所需的外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页介绍下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
Owl-Listener
许可证
MIT
已审查的快照
2026-10-07 · 9a6930cf84a8
编辑来源摘要
一份关注本地化的 UI 指南,涵盖弹性文本布局、书写方向、非拉丁文字系统和区域惯例。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带日期的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前需要考虑的问题

RTL 是否意味着翻转每一张图像?

不是。来源特别指出了徽标、数字和许多图像等例外情况。镜像前应先审查其含义。

伪本地化可以取代翻译质量保证吗?

不可以。它可以在实际译文完成前发现布局和字符处理方面的缺陷,但无法评估表达是否自然或是否符合文化习惯。

文本扩展百分比应被视为精确数值吗?

不应如此。它们只是粗略的压力测试指南。使用实际文本和布局进行测试更为可靠。

OpenDesign

为下一轮设计迭代留出空间。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流程前,请检查其自身的设置要求。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md