n 鍵跳至 内頁瀏覽. 跳至内容

此文檔為翻譯。如有不同或錯誤 最新的英語原文 應為依照標準. 原始版權屬于 W3C, 文件内容翻譯如下所示.

譯者: Samuel Chong, Abacus Chinese Translation Services

s_gotoW3cHome 國際化
 

使用<select>鏈結到本地化內容

目標讀者: 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 選擇選擇元素下拉功能表。雖然這種選擇列表不局限於使用在主頁上,但卻是節省空間的有效方法,可以使用戶在翻譯內容或本地化網站之間逐頁切換。

所指向的本地化內容可以是另一個國家的網站以及網站或網頁的譯文版等。爲了專注於探討使用選擇列表選擇內容的利弊和最佳方法,本文將不討論組織資訊(即翻譯內容對特定地區網站)的最優措施。全球導航的涉及面很廣,我們會在其他文章中介紹。

回答

請注意,這些建議不適用於構成表單的選擇列表。例如,如果您正在填表並從列表中選擇您的所在國或語言,則選擇列表會全部顯示爲當前網頁的語言。

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

當空間非常寶貴時,下拉功能表的效用很吸引人,但下拉功能表並非總是全球導航的最佳方案,您需要確定它是否是您網站的最佳選擇,以下幾點會對您有所幫助。

使用下拉功能表的主要好處是可以將選項集中在較小的空間內。

使用select 選擇選擇來鏈結到本地化網頁或網站的主要缺點在於:

如果您的網站僅支援少數的本地化版本,則應避免使用下拉功能表,直接將鏈結顯示在網頁上可能是更好的選擇。由此,您可以更靈活地用圖形來表達外語文本,不再爲尋找合適的非語言列表標簽而發愁,同時用戶也能更迅速地認出鏈結並鏈結到頁面。

另外還有一些技巧。例如使用輪廓地圖來選擇按照地區或國家劃分的地方網站。

若您的下拉功能表指向 20 多個其他網站或網頁,則應考慮這是否適用於必須滾動到列表末尾的網路用戶。如果不適用,您可以考慮鏈結到一個主頁級的專業全球閘道頁面。如果要鏈結到具體網頁的本地化版本之間,選擇頁面可能不實用。

最佳方法

如果您決定使用下拉功能表,這裏有一些最佳方法供您參考。

位置將下拉功能表放在頁面頂部或靠近頂部。這個位置比較顯眼,更容易被訪客發現。根據對從左到右頁面的掃描研究顯示,放置在右上方更容易被看到。此外,應網路用戶的需求,越來越多的網站已將全球閘道設在此處。

切忌將列表放在頁面底部,避免它無法出現在首個滿屏資訊中(請記住,不同用戶的滿屏信息量也不同)。

標簽設計一個圖形作爲下拉功能表的標簽。不應期望英語水平欠佳的網路用戶能夠理解 “Select language”。通用性的圖示可以被不同語種的人所認知。在理想世界中,應該有一個被廣泛認可的標誌。儘管地球圖示似乎越來越流行,但這樣的時代還沒有來臨。

可能的圖形示例可能包括地球、含線條(表示說話)的圖示化面部輪廓、多種字體的字母(特別是對於譯文鏈結)等。

這些圖形的替換文字不是很重要,您可能認爲要易於理解,需要使用所有語言,或不使用特殊的語言,但事實上人們可以憑藉螢幕閱讀器來瀏覽下拉文本並找到正確鏈結。

使用大小屬性 在有些情況下,使用大小屬性來顯示列表中的第一組選項(特別當列表不是很長時)是很有用的。它可提醒用戶這是一個語言/地區集合,從而無需爲列表添加非語言特定標簽。這裏有一個例子:

A pulldown list showing the first five selections.

翻譯選項將功能表選項翻譯爲目的語言,而不是在下拉功能表上包含一個到字面翻譯的鏈結。例如,"French" 鏈結應顯示 "français";而不是一個到其他國家網站的鏈結。 同理,"Germany" 鏈結應顯示 "Deutschland"。

請注意其他語言的大小寫規則。"French" 的正確翻譯應是 "français",其中 "f" 小寫。

編碼 要顯示非拉丁語言的組合,如阿拉伯語、俄語和日語,您需要找到顯示全部所需字元的方法。

您最好選用 UTF-8 (Unicode) 作爲網頁的編碼,因爲該編碼支援您需要的所有字元。如果您無法使用 UTF-8,則應使用換碼表示您頁面編碼不支援的字元。

字體 您還必須考慮讀者是否有顯示文本範圍的字體。例如,法國的網路用戶可能會在日文的地方看到空白方 框,而日本用戶則能正常看到文字。這是因爲法國用戶系統中的可用字體可能不包含日語文字。有人可能會說這無關緊要,因爲法國用戶不需要閱讀日語。而另一方 面,您可能會感覺空白方框很難看。

如果您感覺空白方框不雅,您可以嘗試對非拉丁選項使用圖形文本。遺憾的是,選擇列表自身無法包含圖形,但有些網站在下拉功能表的外面添加了此類圖形。

例如:

A pulldown list with non-Latin selections displayed alongside.

然而,請注意經此處理的非拉丁文本可能仍然不能解決所有問題。某些重讀拉丁字元,如 "čeština" 中的某些字元,對於那些只含有涵蓋西歐語言拉丁字體的用戶來說,可能會産生同樣的困擾。

說明 有時您可能會考慮在用本土文字/語言表示的語言或國家的名稱後面,附帶用當前頁面語言表示的名稱。

例如:

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

括弧非常有用,因爲它更加清楚地表明括弧中的內容是一種說明。

這種方法並不總是必要或適當的。而另一方面,如果用戶看到下方的丟失字體方框時可能會感覺更舒服一些。

The text "日本語 (Japanese)", where Japanese characters are represented by blank squares.

另外還需注意,以當前頁面語言表示的名稱在其出現的每個頁面中都應翻譯,如果將它們保留爲英語可能會給出錯誤資訊。

排序 如何對多語言列表或國名排序也是一個難題。這並不是選擇列表特有的問題,也沒有簡單的解答。

採用字母順序排序比較困難,因爲它因語言而異,並且還可能涉及多種字體。雖然可依據《Unicode 校勘演算法》所規定的缺省順序,但仍然面臨是否有益、直觀或被用戶認可的困擾。

另外可根據您的市場大小、地區大小、說該種語言的人數或某種地理學原則來排序列表。同樣,儘管都能提供一些有關排序的基本原則,但沒有哪種方法是必然對用戶有益的,特別是對長列表而言。

This page and Wikipedia list language alternatives by (English) alphabetic order of the associated language tags. So, for example, German (de) comes before English (en), and Spanish (es) comes before French (fr). This assumes that the user can either find his language easily by scanning (which is the case for this page) or knows the tag for their language and can guess easily enough that that has been used for the ordering.

另外

您不應該將自動內容匹配作爲提供頁面鏈結的替代。當一切按照預期進行,提供頁面鏈結是最佳選擇。

本文主要側重於select元素的使用。有些設計人員可能更喜歡用 JavaScript 來類比下拉功能表。這在文本不受限制的情況下是大有裨益的,您可以使用圖形文本來避免字體問題。當然,使用 JavaScript 也存在其他潛在問題。

給我們回饋意見 (英文).

訂閲 RSS feed.

新資源

主頁新聞

Twitter (主頁新聞 )

‎@webi18n

更多閲讀資料

作者 Richard Ishida, W3C, John Yunker, Byte Level Research. 翻譯 Samuel Chong, Abacus Chinese Translation Services.

有效的 XHTML 1.0!
有效的 CSS!
UTF-8! 編碼

從 2014-09-29 英文文件翻譯而來. 翻譯版本 2014-09-29 12:28 GMT

如果文檔歷史改變,搜索 qa-navigation-select 在 i18n 部落格.