ConveyThis 的多語言網站設計技巧

ConveyThis 的多語言網站設計技巧:透過實用的設計策略增強使用者體驗和全球影響力。
傳達這個演示
傳達這個演示
多語言設計技巧

現在,許多網站都提供多種語言選項,以便來自世界各地的訪問者可以輕鬆瀏覽。互聯網使市場成為一種全球體驗,因此通過擁有一個網站,您就向每個擁有互聯網連接的人打開了您的業務之門。但是,如果他們聽不懂該語言,他們就不會留下來。多語言網站很簡單。

幸運的是,將您的網站變成多語言的過程相當簡單。 ConveyThis 可以在幾分鐘內創建您網站的翻譯版本,然後您可以自定義您的語言切換器的外觀和位置,進行一些佈局更改以適應更冗長或從右到左的語言,並在原始語言出現的情況下更改顏色和圖像不適合目標文化。

這個過程不是完全自動化的,你需要事先做一些研究。本指南解釋了網站設計的某些方面,以幫助您輕鬆進入多語言網站和出色設計的世界。

一致的品牌

無論他們訪問的語言版本如何,用戶體驗都需要保持一致。所有版本的外觀和感覺應該非常相似,由於語言或文化差異,可能需要一些差異,但如果您在語言之間切換,您應該不會覺得自己被重定向到一個完全不同的站點。

因此,佈局和您企業的特定品牌風格等設計元素在所有語言中都應保持相同。

這是超級容易做到WordPress與ConveyThis,它完美地識別文本,無論你選擇的主題(即使它是定製的!

這將幫助您擁有一個適用於所有語言的具有相同主題的全局模板,從而獲得相同的用戶體驗。

以Airbnb的主頁為例,我們來看看澳洲版:

多語言

這是日文版:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

毫無疑問,這是同一個網站。背景是一樣的,搜索功能也是一樣。擁有統一的設計有助於您的品牌標識,並在添加新語言或更新時節省時間和精力。

清晰的語言切換器

為語言切換器選擇一個顯眼的位置,例如您網站的四個角中的任何一個,並將其放置在每個頁面上,而不僅僅是主頁。它必須很容易找到,沒有人願意尋找隱藏的按鈕。

強烈建議語言名稱使用他們自己的語言。例如,“Español”而不是“Spanish”會產生奇蹟。 Asana 這樣做,他們的網站有一個下拉框,其中包含可用的語言選項。

無題3

這樣,它可以幫助訪客感到賓至如歸。如果您的網站已翻譯,則語言列表應反映這一點。在英文網站上閱讀“德文、法文、日文”並不能讓人們更容易導航,而且給人的印像是英文版是最重要的。

“語言”勝於“地區”

許多國際大品牌會讓您切換區域,以便能夠以您的語言閱讀網站。這是一個糟糕的想法,它會讓訪問者更難瀏覽。這些網站假設您正在使用該語言的地區瀏覽,因此您獲得的是您的語言的文本,但您可能無法獲得您感興趣的地區的內容。

下圖摘自Adobe網站:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQu2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYs6LZbX

語言不應與其所在地區密不可分。以紐約、倫敦和巴黎等國際大都市為例。也許居住在英國的比利時人想從英國網站購買商品,但使用法語瀏覽。他們必須在使用他們的語言從比利時網站購買或從使用英語的英國網站購買之間做出選擇,而他們兩者都不想做。因此,您不小心造成了障礙。我們來看一個可以單獨指定語言和地區的網站,Uber 網站。

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

這是優秀的設計。在這種情況下,語言切換選項已放置在左側的頁腳中,而不是下拉框,因為有很多選項,您有一個模式。語言名稱也以其自己的語言引用。

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

作為獎勵,您可以“記住”用戶選擇的語言,這樣從第一次訪問開始他們就不必再切換了。

自動檢測位置

此功能非常有用,因此您的訪問者不會使用錯誤的語言進行訪問。並為用戶節省時間,這樣他們就不必尋找語言切換器。它是這樣工作的:網站識別瀏覽器使用的語言或它們的位置。

但要小心,以防用戶是遊客並且不熟悉當地語言,因為他們需要語言按鈕才能進行切換,因此,該工具並不總是準確的。

設計多語言網站時,不要在自動檢測語言和語言切換器之間進行選擇,後者是強制性的,而前者是可選的。

標誌不適合替代語言名稱

有 21 個西班牙語國家和 18 個英語國家,而在中國,有 8 種主要方言,因此國旗並不能很好地替代語言名稱。此外,標誌可能不是有用的指示器,因為它們可能會使不認識它們的人感到困惑。

靈活使用文本空間

這可能是一個挑戰,但不可否認的是,翻譯不會與原文佔用相同的空間,有些可能更短,有些可能更長,有些甚至可能需要更多的垂直空間!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASP V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

中文字符包含很多信息,因此不需要太多空間,而意大利語和希臘語則比較冗長,需要兩倍的行數。一個好的經驗法則是假設某些翻譯可能需要超過 30% 的額外空間,因此佈局要靈活,並為文本分配足夠的空間。那些擠在原版網站上的地方可能根本沒有足夠的空間來翻譯,英語是一種特別緊湊的語言,如果你發現需要用英文縮寫來適應內容,你肯定會遇到一些麻煩。時間來翻譯。

除了為文本提供伸展空間外,擁有自適應 UI 元素也是一個好主意,這樣按鈕和輸入字段也可以變大,您還可以減小字體大小,但不要太多。

Flickr 網站是多語言的,我們來看看原來的“views”按鈕:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

它看起來棒極了,一切都很棒,但是“views”在其他語言中是一個更長的詞,需要更多的空間。

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

在意大利語中,它需要三倍的空間!

許多非拉丁文字,例如阿拉伯語,需要更高的高度才能使翻譯適合。所以總而言之,您的網站佈局應該足夠靈活以適應不同的語言要求,這樣在切換時就不會丟失原始的精美外觀。

網絡字體兼容性和網站編碼

根據 W3C,強烈建議您使用允許特殊字符的 UTF-8 對您的網頁進行編碼

很簡單,UTF聲明看起來像這樣

fbnRHXPyY2OPijzOvFkH0y 柯

還要確保字體與不同的語言兼容,否則文本可能看起來難以辨認。基本上,在確定任何字體之前,請檢查其與所需所有腳本的兼容性。如果要進入俄羅斯市場,請檢查是否支持西里爾文字。

下圖取自 Google Fonts,如您所見,您可以選擇下載您需要的任何腳本版本。字符數較多的語言需要較大的字體文件,因此在選擇和混合字體時要考慮到這一點。

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

關於從右到左的語言

隨著中東市場的發展,您可以考慮創建一個吸引該地區訪問者的網站版本,這意味著調整佈局以使其與他們的語言兼容。大多數中東語言的一個特點是它們是從右向左閱讀的!這是一個巨大的挑戰,解決方案從鏡像界面開始。

這是 Facebook 為從左到右的語言設計的,比如英語。

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

這是從右到左語言的翻轉設計,例如阿拉伯語。

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

仔細看,設計中的所有位置都已鏡像。

查看Robert Dodis 關於從右到左語言設計的文章,了解有關如何執行此操作的更多信息。

一些從右到左的語言是阿拉伯文,希伯來語,波斯語和烏爾都語ConveyThis和英語,但請毫不費力地調整您的網站,以適應他們的語言要求,並確保一個偉大的用戶體驗。最棒的是,您可以自定義每種語言的外觀,並更改字體類型或大小,如有必要,編輯行高。

選擇合適的圖標和圖像

視覺效果具有非常濃厚的文化成分,是正確網站設計的關鍵要素。每種文化都賦予不同的圖像和圖標以意義,有些解釋是積極的,有些則完全相反。有些圖像反映了一種文化的理想體驗,但在不同的背景下會讓用戶感到疏遠。

這是一個圖像示例,因為它在文化上不合適而必須被替換。請注意,並非所有圖片都會冒犯他人,當您希望人們對您的產品感到好奇和感興趣時,它可能只會產生冷漠。

這是 Clarin 的法語主頁,其中有一位白人女性。這是韓國版,一位韓國女性擔任品牌大使。

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvoOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

可能冒犯的視覺效果是某些文化似乎無辜的視覺效果,但在另一種文化的眼中,它們展現的是非法或禁忌的行為,例如,同性戀或女性賦權的描繪。

這也適用於圖標,而在美國,帶有兩個香檳杯敬酒的圖標代表慶祝,在沙特阿拉伯,飲酒是違法的,因此必須將圖標替換為符合文化的圖標。

TsA5aPbhznm2N vv qL
(圖片來源:偷獼猴桃)

因此,需要進行研究以確保您選擇的圖標適合目標市場。如果您不確定,可以隨時謹慎行事。

例如,這三個以地球為主題的圖標,第一個是為澳大利亞觀眾設計的;第二個,針對非洲觀眾;最後一個適合更多的全球觀眾,因為沒有特別的區域。

CX90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3ow R6X3bRxeHdjJ

最後但同樣重要的是,ConveyThis 可以翻譯任何文本,只要它沒有嵌入圖像中。該軟件將無法識別上面寫的內容,因此它會保留原始語言,因此請避免嵌入文本。

顏色選擇

正如上一節所述,不同文化對圖像的解釋不同,同樣的事情也發生在顏色上。它們的含義是主觀的。

例如,在某些文化中,白色是純真的顏色,但其他人不同意,它是死亡的顏色。紅色也是如此,在亞洲文化中,它用於慶祝活動,但對於一些非洲國家而言,它沒有如此積極的含義,因為它與暴力有關。

然而,藍色似乎是所有顏色中最安全的,通常與平靜、和平等積極意義聯繫在一起。許多銀行在其徽標中使用藍色,因為它也可以表示信任和安全。

這篇文章展示了世界各地顏色含義的差異,對於開始研究什麼是多語言網站的最佳顏色非常有用。

格式調整

考慮在寫日期時避免只使用數字,因為有很多不同的寫法,在美國,官方格式是 mm/dd/yyyy 如果你只能看到數字,一些來自其他國家的用戶使用不同的系統(例如dd/mm/yyyy) 可能會混淆。因此,您的選擇是:確保翻譯版本的日期格式經過調整或用字母寫下月份,以便 ConveyThis 始終寫出正確的日期。

此外,雖然在美國使用英制,但大多數國家/地區使用公制,因此您需要決定是否適合您的站點進行度量轉換。

最好的 WordPress 翻譯插件

將翻譯插件添加到您的 WordPress 網站時有很多選擇,但並非所有選項都以相同的方式工作,結果會有所不同。使用 ConveyThis,無論您的網站設計如何,都可以保證完美集成。

ConveyThis 是網站翻譯的最佳選擇,提供 92 種語言。這是一個可靠的 WordPress 插件,可讓您快速擁有網站的可靠多語言版本。它可以理解站點的佈局,檢測所有文本並進行翻譯。 ConveyThis 還包括用於文本自定義的直觀編輯器。

ConveyThis 包括一個通用的語言切換器按鈕,默認情況下適用於任何站點,但您也可以根據需要對其進行編輯。我們也遵循本文所述的設計原則:

  • 在網站的所有語言版本上使用一致的品牌。
  • 清晰的語言切換器和選擇首選語言的選項。
  • 網站自動使用 UTF-8 編碼。
  • 從右到左語言的正確接口

ConveyThis:值得信賴的多語言網站解決方案

人們普遍認為,網站翻譯是一個複雜的過程。但是沒有必要推遲,因為你不想處理頭痛。一點也不令人生畏!使用ConveyThis,它將成為直接轉換。它是無縫和快速的。

快速安裝後,您的所有內容現在都可以在不影響格式的情況下進行翻譯,其中包括由其他應用程序和結帳流程生成的內容。 ConveyThis 是一個簡單的多語言網站翻譯工具,不會像其他人那樣弄亂您的代碼。

還可以訂購您網站的專業翻譯!它們將幫助您將多語言網站完全轉變為一種多文化網站,從而大大改善客戶體驗。請記住,如果您翻譯網站,則還必須以新客戶的語言提供客戶支持。考慮投資於內容本地化和改編,以確保為訪問者帶來出色的用戶體驗。

評論(4)

  1. 谷歌翻譯網站的視線結束!• ConveyThis。
    2019年12月8日 回复

    […]瑞典語中與計算機有關的文本。像這樣的元素幫助設計團隊為客戶訪問平台製定了一條途徑,以提供輕鬆的翻譯體驗並避免像以前一樣下降滾動索引[…]

  2. 所有語言平臺的全球搜尋引擎優化ConveyThis
    2019年12月10日 回复

    […]圍繞多語言平台和客戶群的想法被提出,下面是對語言的文本成分的研究[…]

  3. 將您的WooCommerce多語種 + ConveyThis
    2020年3月19日 回复

    [...]並得到一個語言ConveyThis從團隊看一看,並編輯它,所以你可以確保的措辭和語氣是適合你的商店價值和[...]

  4. 如何自定義WooCommerce?• ConveyThis。
    2020年3月23日 回复

    […]視覺總是充滿文化含義,並且不同的受眾對商店應如何展示其[…]抱有不同的期望

發表評論

您的電子郵件地址不會被公開。 必填的地方已做標記*