快捷键及跳转页面导航。跳转到正文开始。

本文档译自其它语种。如有任何偏差或错误的话,请以最新英文原文为准。如下所示,原文版权属于 W3C。.

翻译: Chinese Translation team, WTB Language Group

s_gotoW3cHome 国际化
 

使用<选择>链接到本地化内容

目标读者: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), Web project managers, and anyone who wants to better understand how to use the select element for navigation to localized or regional versions of a site.

问题

使用基于select元素的下拉菜单引导访客到本地化内容的最佳方法是什么?

背景

随着公司和组织本地化网站的逐渐增多,用户友好的全球导航也变得日益重要起来。

其中最为流行的做法就是在主页上使用包含本地化内容链接的选择元素下拉菜单。虽然这种选择列表不局限于使用在主页上,但却是节省空间的有效方法,可以使用户在翻译内容或本地化网站之间逐页切换。

所指向的本地化内容可以是另一个国家的网站以及网站或网页的译文版等。为了专注于探讨使用选择列表选择内容的利弊和最佳方法,本文将不讨论组织信息(即翻译内容对特定地区网站)的最优措施。全球导航的涉及面很广,我们会在其它文章中介绍。

答案

请注意,这些建议不适用于构成表单的选择列表。例如,如果您正在填表并从列表中选择您的所在国或语言,则选择列表会全部显示为当前网页的语言。

我是否需要使用<select>列表?

当空间非常宝贵时,下拉菜单的效用很吸引人,但下拉菜单并非总是全球导航的最佳方案,您需要确定它是否是您网站的最佳选择,以下几点会对您有所帮助。

使用下拉菜单的主要好处是可以将选项集中在较小的空间内。

使用选择来链接到本地化网页或网站的主要缺点在于:

如果您的网站仅支持少数的本地化版本,则应避免使用下拉菜单,直接将链接显示在网页上可能是更好的选择。由此,您可以更灵活地用图形来表达外语文本,不再为寻找合适的非语言列表标签而发愁,同时用户也能更迅速地认出链接并链接到页面。

另外还有一些技巧。例如使用轮廓地图来选择按照地区或国家划分的地方网站。

若您的下拉菜单指向 20 多个其它网站或网页,则应考虑这是否适用于必须滚动到列表末尾的网络用户。如果不适用,您可以考虑链接到一个主页级的专业全球网关页面。如果要链接到具体网页的本地化版本之间,选择页面可能不实用。

最佳方法

如果您决定使用下拉菜单,这里有一些最佳方法供您参考。

位置将下拉菜单放在页面顶部或靠近顶部。这个位置比较显眼,更容易被访客发现。根据对从左到右页面的扫描研究显示,放置在右上方更容易被看到。此外,应网络用户的需求,越来越多的网站已将全球网关设在此处。

切忌将列表放在页面底部,避免它无法出现在首个满屏信息中(请记住,不同用户的满屏信息量也不同)。

标签设计一个图形作为下拉菜单的标签。不应期望英语水平欠佳的网络用户能够理解 “Select language”。通用性的图标可以被不同语种的人所认知。在理想世界中,应该有一个被广泛认可的标志。尽管地球图标似乎越来越流行,但这样的时代还没有来临。

可能的图形示例可能包括地球、含线条(表示说话)的图标化面部轮廓、多种字体的字母(特别是对于译文链接)等。

这些图形的替换文字不是很重要,您可能认为要易于理解,需要使用所有语言,或不使用特殊的语言,但事实上人们可以凭借屏幕阅读器来浏览下拉文本并找到正确链接。

使用大小属性 在有些情况下,使用大小属性来显示列表中的第一组选项(特别当列表不是很长时)是很有用的。它可提醒用户这是一个语言/地区集合,从而无需为列表添加非语言特定标签。这里有一个例子:

显示最初五个选项的下拉列表。

翻译选项将菜单选项翻译为目标语言,而不是在下拉菜单上包含一个到字面翻译的链接。例如,"French" 链接应显示 "français";而不是一个到其它国家网站的链接。 同理,"Germany" 链接应显示 "Deutschland"。

请注意其它语言的大小写规则。"French" 的正确翻译应是 "français",其中 "f" 小写。

编码 要显示非拉丁语言的组合,如阿拉伯语、俄语和日语,您需要找到显示全部所需字符的方法。

您最好选用 UTF-8 (Unicode) 作为网页的编码,因为该编码支持您需要的所有字符。如果您无法使用 UTF-8,则应使用换码表示您页面编码不支持的字符。

字体 您还必须考虑读者是否有显示文本范围的字体。例如,法国的网络用户可能会在日文的地方看到空白方框,而日本用户则能正常看到文字。这是因为法国用户系统中的可用字体可能不包含日语文字。有人可能会说这无关紧要,因为法国用户不需要阅读日语。而另一方面,您可能会感觉空白方框很难看。

如果您感觉空白方框不雅,您可以尝试对非拉丁选项使用图形文本。遗憾的是,选择列表自身无法包含图形,但有些网站在下拉菜单的外面添加了此类图形。

例如:

旁边显示非拉丁选项的下拉列表。

然而,请注意经此处理的非拉丁文本可能仍然不能解决所有问题。某些重读拉丁字符,如 "čeština" 中的某些字符,对于那些只含有涵盖西欧语言拉丁字体的用户来说,可能会产生同样的困扰。

说明 有时您可能会考虑在用本土文字/语言表示的语言或国家的名称后面,附带用当前页面语言表示的名称。

例如:

čeština(捷克语)
français(法语)
Deutsch(德语)
日本語(日语)

括号非常有用,因为它更加清楚地表明括号中的内容是一种说明。

这种方法并不总是必要或适当的。而另一方面,如果用户看到下方的丢失字体方框时可能会感觉更舒服一些。

文本"日本語(日语)",其中日语字符显示为空白方框。

另外还需注意,以当前页面语言表示的名称在其出现的每个页面中都应翻译,如果将它们保留为英语可能会给出错误信息。

排序 如何对多语言列表或国名排序也是一个难题。这并不是选择列表特有的问题,也没有简单的解答。

采用字母顺序排序比较困难,因为它因语言而异,并且还可能涉及多种字体。虽然可依据《Unicode 校勘算法》所规定的缺省顺序,但仍然面临是否有益、直观或被用户认可的困扰。

另外可根据您的市场大小、地区大小、说该种语言的人数或某种地理学原则来排序列表。同样,尽管都能提供一些有关排序的基本原则,但没有哪种方法是必然对用户有益的,特别是对长列表而言。

其它信息

您不应该将自动内容匹配作为提供页面链接的替代。当一切按照预期进行,提供页面链接是最佳选择。

本文主要侧重于选择元素的使用。有些设计人员可能更喜欢用 JavaScript 来模拟下拉菜单。这在文本不受限制的情况下是大有裨益的,您可以使用图形文本来避免字体问题。当然,使用 JavaScript 也存在其它潜在问题。

告诉我们您的想法(用英语)。

订阅 RSS 提要

新的资源

主页新闻

Twitter (主页新闻)

‎@webi18n

深入阅读

作者: Richard Ishida, W3C, John Yunker, Byte Level Research. 翻译: Chinese Translation team, WTB Language Group.

正确的 XHTML 1.0!
正确的 CSS!
UTF-8 编码!

翻译以格林尼治标准时间 2005-07-26 的英语内容为准,并于格林尼治标准时间 2010-09-16 18:21 作最新修改。

想了解文档的历次更新情况,请在国际化博客中搜索 qa-navigation-select