select
链接到本地化内容使用基于select
元素的下拉菜单引导访客到本地化内容的最佳方法是什么?
随着公司和组织本地化网站的逐渐增多,用户友好的全球导航也变得日益重要起来。
其中最为流行的做法就是在主页上使用包含本地化内容链接的select
元素下拉菜单。虽然这种选择列表不局限于使用在主页上,但却是节省空间的有效方法,可以使用户在翻译内容或本地化网站之间逐页切换。
所指向的本地化内容可以是另一个国家的网站以及网站或网页的译文版等。为了专注于探讨使用选择列表选择内容的利弊和最佳方法,本文将不讨论组织信息(即翻译内容对特定地区网站)的最优措施。全球导航的涉及面很广,我们会在其它文章中介绍。
select
列表?当空间非常宝贵时,下拉菜单的效用很吸引人,但下拉菜单并非总是全球导航的最佳方案,您需要确定它是否是您网站的最佳选择,以下几点会对您有所帮助。
使用下拉菜单的主要好处是可以将选项集中在较小的空间内。
使用select
来链接到本地化网页或网站的主要缺点在于:
用户不能直接查看或访问链接
很难找到非语言特定列表标签
用户可能没有所有选项文本的字体,并且不能用图形来代替文本
如果您的网站仅支持少数的本地化版本,则应避免使用下拉菜单,直接将链接显示在网页上可能是更好的选择。由此,您可以更灵活地用图形来表达外语文本,不再为寻找合适的非语言列表标签而发愁,同时用户也能更迅速地认出链接并链接到页面。
另外还有一些技巧。例如使用轮廓地图来选择按照地区或国家划分的地方网站。
若您的下拉菜单指向20多个其它网站或网页,则应考虑这是否适用于必须滚动到列表末尾的Web用户。如果不适用,您可以考虑链接到一个主页级的专业全球网关页面。如果要链接到具体网页的本地化版本之间,选择页面可能不实用。
如果您决定使用下拉菜单,这里有一些最佳方法供您参考。
将下拉菜单放在页面顶部或靠近顶部。 这个位置比较显眼,更容易被访客发现。根据对从左到右页面的扫描研究显示,放置在右上方更容易被看到。此外,应Web用户的需求,越来越多的网站已将全球网关设在此处。
切忌将列表放在页面底部,避免它无法出现在首个满屏信息中(请记住,不同用户的满屏信息量也不同)。
设计一个图形作为下拉菜单的标签。不要使用文字。
不应期望英语水平欠佳的网络用户能够理解 “Select language”。通用性的图标可以被不同语种的人所认知。在理想世界中,应该有一个被广泛认可的标志。尽管地球图标似乎越来越流行,但这样的时代还没有来临。
可能的图形示例可能包括地球、含线条(表示说话)的图标化面部轮廓、多种字体的字母(特别是对于译文链接)等。
这些图形的替换文字不是很重要,您可能认为要易于理解,需要使用所有语言,或不使用特殊的语言,但事实上人们可以凭借屏幕阅读器来浏览下拉文本并找到正确链接。
考虑使用size
属性来显示选择控件中的第一组选项。
在有些情况下,使用size
属性来显示列表中的第一组选项(特别当列表不是很长时)是很有用的。它可提醒用户这是一个语言/地区集合,从而无需为列表添加非语言特定标签。这里有一个例子:
将菜单选项翻译成目标语言。
不要在下拉菜单上包含一个到字面翻译的链接。例如,"French" 链接应显示 "français";而不是一个到其它国家网站的链接。 同理,"Germany" 链接应显示 "Deutschland"。
请注意其它语言的大小写规则。"French" 的正确翻译应是 "français",其中 "f" 小写。另一方面,出于纯粹的风格原因,有时也可以忽略这种做法,以保持大小写一致(如本页面或维基百科的语言链接)。
要显示非拉丁语言的组合,如阿拉伯语、俄语和日语,您需要找到显示全部所需字符的方法。
您最好选用UTF-8(Unicode)作为网页的编码,因为该编码支持您需要的所有字符。
如果您无法使用 UTF-8,则应使用转义表示您页面编码不支持的字符。
确定用户没有所有列表项或菜单选项的内容字体是否是一个问题。如果是,请使用JavaScript开发的菜单或其他一些基于图形的方法。
例如,法国的网络用户可能会在日文的地方看到空白方框,而日本用户则能正常看到文字。这是因为法国用户系统中的可用字体可能不包含日语文字。有人可能会说这无关紧要,因为法国用户不需要阅读日语。而另一方面,您可能会感觉空白方框很难看。
如果您感觉空白方框不雅,您可以尝试对非拉丁选项使用图形文本。遗憾的是,选择列表自身无法包含图形,但有些网站在下拉菜单的外面添加了此类图形。
例如:
然而,请注意经此处理的非拉丁文本可能仍然不能解决所有问题。某些重读拉丁字符,如 "čeština" 中的某些字符,对于那些只含有涵盖西欧语言拉丁字体的用户来说,可能会产生同样的困扰。
决定是否使用当前页面的语言在每个选项旁边添加说明,以便用户可以了解其含义。
例如:
这种方法并不总是必要或适当的。而另一方面,如果用户看到下方的丢失字体方框时可能会感觉更舒服一些。
另外还需注意,以当前页面语言表示的名称在其出现的每个页面中都应翻译,如果将它们保留为英语可能会给出错误信息。
如何对多语言列表或国名排序也是一个难题。这并不是选择列表特有的问题,也没有简单的解答。
采用字母顺序排序比较困难,因为它因语言而异,并且还可能涉及多种字体。虽然可依据《Unicode 校勘算法》所规定的缺省顺序,但仍然面临是否有益、直观或被用户认可的困扰。
另外可根据您的市场大小、地区大小、说该种语言的人数或某种地理学原则来排序列表。同样,尽管都能提供一些有关排序的基本原则,但没有哪种方法是必然对用户有益的,特别是对长列表而言。
本页和维基百科按相关语言标签的(英语)字母顺序列出了各个语言。例如,德语(de)位于英语(en)之前,西班牙语(es)位于法语(fr)之前。当用户可以通过扫描轻松找到其语言时,这种方法效果最佳。对于长列表,这可能不太合适,因为用户不仅必须知道其语言的标签,而且为了预测其在列表中可能的位置,还必须能够猜到列表是按照语言标签排序的。
您不应该将自动内容匹配作为提供页面链接的替代。当事情没有按预期进行时,提供页面链接总是有意义的。
本文主要侧重于select
元素的使用。有些设计人员可能更喜欢用JavaScript来模拟下拉菜单。这在文本不受限制的情况下是大有裨益的,您可以使用图片中的文字来避免字体问题。当然,使用JavaScript也存在其它潜在问题。
Common Locale Data Repository (CLDR) Project (for finding native versions of language and country names)
Related links, Authoring web pages