设计系统中忽略文本限制，可能会破坏产品的UIUX用户体验

很多时候在UI界面设计的时候，时常发生有一段 UI 文本（例如按钮标签、标题或字段名称），由于文本变长，发现它破坏了整体UI界面的布局，或是在全球化设计中，将中文直接翻译成某类字母语言，（如：德语 ）如果是这样，可以就成了破坏您的产品的整体的用户体验。

我们如何在不影响UI界面布局或本地化的情况下，创建出清晰、实用且可扩展的内容？
首先，字符限制是多少？ 字符限制是指在给定的界面组件中一段 UI 文本（如按钮、表单字段、错误消息、标题等）可以包含的最大字符数。 但关键在于：这些限制并不是随意的。而且 在多语言数字产品的触点中，可用的文本空间是有限的，而且不同的语言的文本空间差异也很大。将一些中文翻译后的字符串可能会扩展至原来文本的300%或更小，这些不确定性会直接影响界面的布局和可用性。 类似德语或俄语这样的语言，通常需要比英语或葡萄牙语更大的空间来传达相同的信息。如果没有考虑到这种扩展，最终可能会导致文本被截断、布局混乱。 这就是为什么字符限制不仅仅是技术限制——它们是一种战略性的用户体验设计规则。

技术因素：例如实际可用的视觉空间
语言因素：例如不同语言中的文本扩展/收缩
可用性问题：包括可读性和信息清晰度



该怎么做？如何计算字符限制？
最大限制 =（组件可用宽度）/（平均字符宽度）
让我们分解一下：
可用宽度 = 组件总宽度减去填充和边距
平均字符宽度取决于所使用的字体（例如，Arial 16px ≈ 每个字符 9px）
例子：
如果您的组件宽度为:  260px，并使用 16px 的 Arial： 
260 / 9 = 29 个字符
德语中：如果扩展 35% 后： 29 * 1.35 = 39个字符

一种尺寸并不适合所有情况
单一的字符限制是不够的。每个 UI 元素都有自己的限制，因此每个元素都需要量身定制的限制。 根据 WCAG 指南，文本行最多应为 80 个字符（亚洲文字最多为 40 个字符）才能保持清晰可读。
这些并非硬性规定，只是展示了在设置组件的限制时应考虑其效用和空间。 如果组件无法在限制内支持其所需的内容，请调整文本或 UI界面样式。

常见的一些错误
请避开以下陷阱：
 1. 忽略其他语言的文本扩展 仅针对源语言进行设计是不够的。务必留有扩展空间。
2. 只关注字符数——并非宽度 20 个字符 ≠ 所有语言都是 20 个字符。有些字母和脚本占用更多空间。
3. 使用“一刀切”的限制 每个 UI 组件都都有不同的约束。
4. 没有使用真实的翻译进行测试，如果您不使用实际的本地化内容进行测试，那么您只是在猜测。
5. 忽视文化差异 本地化≠ 直接翻译。文化背景、语气和习语都很重要。而这正是机器翻译常常不足之处。
如：
德语/俄语：较长的表达→布局问题
中文/日文：短小精悍 → 间距和易读性挑战
阿拉伯语/希伯来语：RTL 语言 → 布局镜像

6. 跳过智能截断，截断的文本可能会引起混淆，甚至冒犯。如果必须截断，请明确截断方式，并规划截断点（例如，“…” + 工具提示）。

最后，在打造专业的UIUX设计系统时，应该将全球化/本地化/国际化的内容加入，同时还关乎在不同终端的显示逻辑和规则，根据自身产品线的特点去指定专属的尺寸与规则。