user-interface - 进行全局化和本地化时调整文本按钮大小的最佳实践

Question

假设我们在网页上有一个覆盖 DHTML 面板，它在顶部包含两个占据对话框整个宽度的按钮，如下所示:

按钮 1 和按钮 2 的文本应该本地化。复选框组的内容是静态的，不应本地化。

不同语言的按钮文本宽度之间可能存在很大差异(与英文版本相比约有 100% 的额外空间)。

问题是根据文本内容的长度应用哪种策略来调整 Button 1 和 Button 2 的大小:

1. 使按钮固定宽度并使用省略号截断文本内容。
2. 使按钮固定宽度并在后续行中包裹文本内容，使按钮的高度增加。
3. 使按钮的宽度固定，但它们的宽度足以承载所有语言的文本，而无需截断或换行。
4. 使按钮动态调整宽度并使面板随着它们的大小水平增长。

根据发现的几个 UI 本地化最佳实践，我倾向于使用第三个或第四个选项:

• Preparing the User Interface for Localization
• Best Practices for Globalization and Localization
• Globalization Step-by-Step - UI Considerations

我们仍然在团队中就最佳选择进行一些辩论，如果能听到社区有意识的外部声音会很有趣。

我对针对此特定案例的最佳方法以及解决与本地化相关的 Web UI 大小问题的一般指南感兴趣。

谢谢!

Answer 1

您可能知道，用省略号(或单个点)缩短的文本可能难以理解:

How compr. is th.?

你应该在移动领域(手机，平板电脑等)看到很多这样的工作人员，这样的翻译看起来丑陋。好的，对于较低的屏幕分辨率，您实际上别无选择(除非您可以创建一些自动滚动的文本)。但如果是 Web 界面，您当然可以选择。

通常，有两种解决方案对应于您的第 3 点和第 4 点。就个人而言，我倾向于#4 - 让按钮自动调整大小。这当然会导致按钮大小不一致，但我们对此无能为力。

如果您无法使用解决方案 #4(即 UI Designer 强烈反对此技术)，您可以稍微修改一下解决方案 #3。基本上，我在过去的项目中使用的是，我有固定大小的按钮，默认大小能够适应大多数语言(当然除了波兰语和俄语)，但我也有几个定义更宽按钮的 CSS 类。当本地化为“太长”的语言时，我只是使用了我能使用的最宽的按钮类。如果文本仍然不合适，那么我会要求翻译人员缩短它(通常是重新措辞并用一个点来缩短文本作为最后的手段)。
但是，请记住，这会增加本地化成本。这就是我不推荐这种方法的原因。

至于解决方案 #2，您最终会得到难看的 UI。您根本无法控制浏览器如何包装文本，并且您会有很多文本超出按钮剪辑矩形(重叠)。

至于解决方案 #1，使用省略号不是一个好主意，原因有二。第一个是，省略号在许多语言中都无效(尤其是对于亚洲语言)。第二个是，据我了解，您想自动执行此操作。在这种情况下，您将无法测量字符串 - 它们在屏幕上的实际大小，使用后备字体 编写。在 Web UI 的情况下，您不知道用户是否安装了特定字体，因此您将猜测大小(好吧，使用 Dojo 理论上您可以在客户端测量它)。这当然会导致文本重叠(如果您决定动态缩短所选字体)或完全无法理解的文本(如果您决定在 8 个字符后缩短)。我有一个项目开始使用静态缩短，一团糟。然后我们切换到动态，它仍然不够好。
为了反驳“我们没有空间进行字符串扩展”的潜在 UI Designer 论点，我只能说这意味着您设计的界面不正确，因为它太拥挤了。这就是 I18n 与 UI 设计最佳实践齐头并进的地方:力求简单(在 UI 设计中)。结果将易于使用且易于本地化应用程序。