成都網絡公司透露如何做出國際視野的好網站

2022-07-08    分類： 網站建設

成都網絡公司已經真正成為全球性的網站，這意味著您的客戶現(xiàn)在可以將其產品銷售給世界各地的數百萬人。技術使向新市場擴展變得相對容易，并且其中一些正在以驚人的速度增長。這是一個很好的機會，不容錯過。難怪我們將國際化確定為任何電子商務增長戰(zhàn)略的基本趨勢。

現(xiàn)在，全球約有一半的人口可能在線，但是只有大約25％的網絡用戶是說英語的人，因此您需要使客戶的網站適應其他人的需求。轉換網站或應用程序，或轉換僅英語的舊代碼庫以支持多種語言，都帶來了許多挑戰(zhàn)。但這還不是全部：您還需要考慮文化差異，這是許多品牌無法做到的。 

在本文中，我們將討論國際化（i18n）（一種設計應用或網站，使其無需進行工程更改即可適應各種語言和地區(qū)的過程）以及本地化（l10n）（一種適應應用程序或網站的過程）的過程。通過翻譯文本并添加特定于語言環(huán)境的組件來針對特定地區(qū)或語言的國際化應用程序或網站。我們還將與設計師和開發(fā)人員交談，以了解他們用于為國際用戶創(chuàng)建數字產品的UX實踐和工具。 

通過Shopify合作伙伴計劃發(fā)展您的業(yè)務
無論您是提供網頁設計和開發(fā)服務，還是想為Shopify應用商店構建應用程序，Shopify合作伙伴計劃都將使您成功。免費加入并獲得收益共享機會，開發(fā)人員預覽環(huán)境和教育資源。

在設計過程中國際化和本地化的重要性
正如Shopify專注于國際UX營銷的Robyn Larsen所指出的那樣，目標是建立一種體驗，以支持世界各地的所有用戶，并且當這種體驗不符合特定的文化時，就可以對其進行定制。 

在SmashingConf Freiburg 2019上查閱她的演講，了解為什么International is the New Mobile First。

對于Uber的產品設計師Femke van Schoonhoven而言，內容和本地化在設計過程中（包括原型設計和用戶研究階段）發(fā)揮著巨大作用。她的設計需要能夠擴展并足夠靈活，以支持被翻譯成30多種語言。 

在2018年，她正在為巴西和墨西哥市場開發(fā)項目，并與另一位設計師一起用英語撰寫內容。

她回憶說：“天真地，我們認為我們可以將最后的翻譯留到最后，我們可以在測試的早晨對原型進行更新。” “我們創(chuàng)建了一個包含三列（英語，西班牙語和葡萄牙語）的電子表格，并開始在電子表格中逐字逐句地翻譯內容。我們幾乎不知道這是我們的第一個錯誤。” 

Femke知道，不考慮視覺效果而翻譯內容是沒有意義的。他們在體驗的流程和層次結構的上下文中丟失了，這在用戶測試期間導致了錯誤。

國際化：兩種語言的付款確認

“在上面的示例中，我們正在確認用戶是否要再次開始付款過程，” Femke解釋說。“右側是左側屏幕的葡萄牙語翻譯不佳，其含義完全不同。當我們在采訪中邁出這一步時，用戶就陷入了困惑。

Femke和她的設計合作伙伴意識到，他們完全忽略了對內容進行本地化的重要性。他們未能給予內容應有的重視，并低估了內容對無法完成目標的設計和用戶的影響。

“他們沒有給予內容應有的關注，并低估了它對無法完成目標的設計和用戶的影響。”
“本地化不只是翻譯，” Femke警告說。“您需要考慮消息的意圖，設計的目標以及本地環(huán)境。我們忘了考慮轉譯，即如何在保持原始意圖，樣式，語氣和上下文的同時，將消息從一種語言適應到另一種語言。”

您可能還會喜歡： 重新設計設計過程：今年如何更有效地工作。

為避免犯同樣的錯誤，F(xiàn)emke建議在設計過程中本地化客戶內容時始終考慮上下文和含義。僅僅等到結束或產品發(fā)布還不夠。在用戶研究過程中，正確本地化的內容至關重要，因為它有助于告知客戶數字產品的設計。

計劃文字擴展
Luke Murphy-Wearmouth是語言學習平臺Memrise的設計經理，假設 UI中支持盡可能多的語言。設計師還應優(yōu)雅，體貼地處理所有語言邊緣案例。 

“文字的長度在不同的語言中可能會千差萬別，”盧克解釋說。“例如，像“立即開始學習！”之類的短語。是“ Empieza的aprender ahora！” 西班牙語和“現(xiàn)在開始學習！” 用普通話，因此我們必須確保頁面中使用的所有模塊（從按鈕到頁面部分）都具有足夠的響應能力，并且可以容納多行。” 

對于關鍵區(qū)域，例如標題或課程中的學習提示，團隊使用一小段JavaScript來計算短語中的字符數，并放置不同的類（“小”，“中”和“大”）在短語上更改大小。如果您需要開箱即用的解決方案，Luke建議使用Jeremy Keith的非jQuery版本的FitText。

有時候，簡單的策略并不適用。當團隊最近重構Memrise的學習課程時，他們發(fā)現(xiàn)某些語言中的長單詞存在問題。例如，在意大利語中，數字串在一起而沒有空格，因此2,345個字母變成了milatrecentoquarantacinque。雖然很少會寫出數字，但是如果您正在為一家德國餐廳設計一個移動網站并必須考慮Nahrungsmittelunverträglichkeiten（食物不耐癥）怎么辦？

在這種情況下，Luke建議使用斷字法來解決問題，但這是最好的方法。 

他解釋說：“不幸的是，CSS連字符沒有考慮明顯的連字符位置，這會使您的文本顯得很笨拙。” 

目前，成都網絡公司針對可能存在問題的語言的策略是使用語言選擇器將連字符設置為自動，如下所示：

css
span:lang(de) {
hyphens: auto;
}
然后使用­來容納麻煩的單詞，這會添加一個看不見的連字符，使瀏覽器可以根據需要中斷單詞。否則，它將呈現(xiàn)時不帶連字符。 

偽本地化和偽翻譯
當Shopify開始著手翻譯產品（現(xiàn)已提供21種語言）時，他們在六個月內交付了前六種新語言。 

“在此過程中，我們看到了產品許多方面的設計突破，” Robyn回憶道。“我們觀察到文本開始超出按鈕邊界框的出血，我們觀察到網格開始進入排水溝，并且觀察到導航對于非英語用戶來說變得難以辨認。”

我們觀察到文本開始超出按鈕邊界框的出血，觀察到網格開始進入排水溝，并且觀察到導航對于非英語用戶來說變得難以辨認。

Robyn Larsen，Shopify
為了幫助對客戶的設計進行壓力測試并假定最壞的情況下進行文本擴展，Robyn建議使用一種稱為偽本地化的技術（一種軟件測試實踐，使您可以通過復制語言來擴展文本）。另外，在您進入瀏覽器之前，請查看適用于Sketch的偽翻譯插件，該插件非常適合測試設計在各種語言中的外觀。

“作為實踐，請考慮使用德語進行壓力測試，” Robyn建議。“它通常比英語長30％，或者使用中文，日語或韓語等基于字符的語言，這往往會破壞核心功能。” 

國際化偽本地化熱插拔工具
Shopify的國際團隊構建了一種語言熱交換工具，使開發(fā)人員可以使用各種語言或偽翻譯對瀏覽器中的UI進行壓力測試。 
計劃可維護性
Robyn建議在圖像處理方面采用全球化方法，以確保可以輕松地維護客戶的網站，擴展其規(guī)模，并且由于所有翻譯工作而不會導致加載速度緩慢。 

“讓我們舉一個非常簡單的例子，”羅賓解釋。“對于我們導出到臺式機，平板電腦和移動設備的每種視覺，我們還需要導出該圖像以支持視網膜顯示。相當于六個圖像。將語言添加到混合中，這是多達42張圖像以支持7種語言。這對網站的性能不利！” 

如果您使用的是沒有文字的視覺圖像，則只需處理六張圖像，而不是可用于所有語言的42張圖像。 

“可以在Slack.com上找到生產中可維護性的一個很好的例子，” Robyn指出。“他們的團隊創(chuàng)建了一個HTML / CSS框架，該框架可以復制其產品，從而可以輕松地交換翻譯和圖像。在Shopify，它啟發(fā)了我們在Dotcom屬性上的多個頁面上實現(xiàn)UI插圖，使我們能夠在顯示本地相關內容的同時顯示管理員的簡化版本。” 

國際化：文化上獨立的形象
創(chuàng)建文化上獨立的圖像（例如在Shopify的電子郵件營銷頁上使用這些英語，德語和日語版本）可確保可維護性并節(jié)省時間和精力。
計劃文化差異
使產品適應用戶的文化差異也很重要，這不僅僅是將客戶的網站或應用翻譯成另一種語言而已。 

“當今，大多數現(xiàn)代網站設計都具有簡潔明了的外觀，并帶有很多負面空間，” Robyn解釋說。“但是，在日本，網站上有很多密集文本。這并不是因為日本站點隨意地本地化，這種外觀實際上是日本消費者所喜歡的，他們更喜歡在首頁上看到所有內容！”

例如，在加拿大，Shopify能夠使用較少的傳統(tǒng)圖像來傳達多樣性主題，而這種方法在日本仍然行不通，因為日本的文化仍然非常傳統(tǒng)，并且對更自由的圖像很敏感。

國際化：西方與亞洲文化偏好
西方文化偏向于更簡單的外觀，而亞洲國家/地區(qū)的網站往往很繁忙，此處以星巴克的.com和.co.jp版本為例。 
與說英語作為第二語言的人一起組織您創(chuàng)建的內容
當跨文化設計的作者，插畫家Senongo Akpem在內容長或用戶界面復雜的頁面上工作時，他發(fā)現(xiàn)保持視線以英語為第二語言的用戶非常有用。 

Senongo解釋說：“即使您能說流利的英語，在屏幕上閱讀也會使人迷失方向，而在閱讀印刷品時卻沒有視覺提示。” “一種策略是在頁面頂部為人們提供內容細分。您的讀者可以掃描此列表以獲取上下文，并快速進入所需的部分。對于更長的報告或學術內容，這些可能是鏈接到不同章節(jié)的一句話關鍵摘要。”

一種策略是在頁面頂部為人們提供內容細分。您的讀者可以掃描此列表以獲取上下文，并快速進入所需的部分。

Senongo Akpem
作為第二種國際化策略，Senongo建議在與客戶合作時提供清晰的用戶入門信息。這包括為UI的組織原理和功能提供透明，圖解的視圖，這可以幫助可能不太了解英語的人準確地了解他們所要學習的內容。

國際化：英國護理人員津貼信息網站
由英國政府數字服務局（Government Digital Service）創(chuàng)建的英國信息網站gov.uk ，在護理津貼的頁面頂部顯示了一個目錄。 
讓客戶的用戶選擇自己的語言環(huán)境
伊萊Schütze拉米雷斯，在一個網絡工程師Monzo，國際化時所使用的語言環(huán)境來區(qū)分網站版本。語言環(huán)境是語言和地區(qū)的組合。例如，en-US是美式英語，en-GB而是英式英語（“ en”是英語的語言代碼）。但是，當您對客戶的應用或網站進行本地化時，如何確定將顯示其客戶的用戶的語言環(huán)境呢？ 

Eli解釋說：“您可以通過幾種方法來猜測用戶的選語言環(huán)境。” “例如，使用他們的IP地址推斷他們的位置，但是這種方法僅在某些時候是正確的。您永遠無法真正知道您的用戶是本地人，正在旅行，已移民還是什至只是在學習一種新語言！” 

您可能還會喜歡： 成都網絡公司 如何構建多語言Shopify應用程序。

Eli建議讓客戶的用戶選擇自己的語言環(huán)境。使語言環(huán)境切換器易于在您的站點上找到，并記住下次的選擇。避免僅將語言表示為標志，并確保用該語言寫出語言名稱，以便用戶可以輕松識別。

選擇合適的國際化圖書館
Taulia的UI工程師Robin Dykema建議，在為客戶設置好翻譯后，i18n庫可以根據用戶的語言環(huán)境幫助提取正確的文本。 

她承認：“在處理性別和多元化規(guī)則時，決定顯示哪種文字會變得非常棘手，性別和多元化規(guī)則會因語言而異。” “使用圖書館可以大程度地減少這種痛苦，并有助于傳遞動態(tài)文本。”

有幾個優(yōu)秀的國際化框架和庫可供選擇。對于較小的應用程序，Robin建議使用輕量級的庫（例如Polyglot），該庫可以提供足夠的功能以進行正確的本地化。對于更大，更復雜的應用程序，像i18next這樣的成熟的國際化框架可能更合適，并提供其他國際化支持，例如檢測瀏覽器語言和緩存翻譯功能。其他流行的庫包括Format，Lingui和Globalize。

國際化：國際化圖書館
國際化庫i18next與流行的前端框架（例如React，Angular和Vue）以及Node.js，PHP，iOS，Android等集成在一起。 
格式化日期，時間和數字
即使本地化的應用程序只會使用英語，本地化時格式化日期，時間和數字也是必不可少的。 

羅賓指出：“美國的日期格式與歐洲的日期格式不同。” “例如，像'2/3/2020'這樣的日期將根據用戶的原籍國做出不同的解釋。不同的國家/地區(qū)也喜歡使用不同的時鐘（24小時和12小時），因此計算時區(qū)可能非常困難。數字的格式也將因地區(qū)而異。例如，在美國，您將格式123456.78設置為123,456.78，而在西班牙，相同的數字格式將設置為123.456,78。” 

一些國際化庫可能已經具有日期和數字格式設置功能。對于那些沒有的人，Robin建議使用本機瀏覽器API intl —一種用于簡單格式設置的輕量級選項。對于更復雜的格式，較重的庫（例如Moment或Moment Timezone）可能更有用。替代品包括世昕，日期FNS和Day.js。

確保您為客戶的項目創(chuàng)建的在線表單包含所有內容 
如果您的名字包含特殊字符，變音符號或變音符號，或者用與英語字母不同的腳本書寫，那么您會熟悉一些人在在線填寫表格時遇到的問題。 

正如Eli所指出的那樣，開發(fā)人員臭名昭著地對人們的名字做出了許多假設。從歷史上講，在為全球受眾群體服務時，字符編碼一直是頭疼的問題，這無濟于事。過去，計算機很難識別字母以外的字符，但幸運的是，情況已不再如此。

“請確保您的網站使用Unicode編碼，即UTF-8確保您的網站支持所有腳本，字母，特殊字符，以及重要的是emoji表情，” Eli建議。“一旦有了這些，就可以讓您的表單（尤其是用戶輸入姓名的表單）接受的不僅是AZ字符，還可以創(chuàng)建一個包含所有內容的用戶體驗。如果您要提供諸如銀行或教育等基本服務，這將變得至關重要。”

國際化：Jet2無效名稱問題
英國休閑航空公司Jet2（左）將EliSchützeRamírez的名字稱為“無效”，甚至不接受撇號，這可能是災難性的，尤其是對于愛爾蘭人的名字。另一方面，EasyJet（右）則采用了更為全球化的方法。名稱沒有問題。
考慮與語言相關的CSS和CSS邏輯屬性
當提到國際化時，CSS可能并不是想到的第一件事，但是設計師和開發(fā)人員Chen Hui Jing指出，由于CSS的目的是在網絡上呈現(xiàn)內容，因此它實際上起著重要的作用。 ，尤其是對于多語言網站。

您可能還會喜歡： 使用HTML和CSS擁抱本地化和多語言內容。

她建議特別注意:lang()偽類和CSS邏輯屬性。

該:lang()偽類
該:lang()偽類選擇識別即使語言元素之外聲明的內容的語言。

例如，一行帶有兩種語言的標記，如下所示：

html

We use italics to emphasize words in English, 但是中文則是用著重號.

…可以使用以下樣式：

css
em:lang(zh) {
font-style: normal;
text-emphasis: dot;
}
如果您的瀏覽器支持text-emphasisCSS屬性，則應該能夠看到在內的每個漢字上添加了強調標記（傳統(tǒng)上用于強調東亞文字的印刷符號）。Chrome需要-webkit-前綴。


盡管lang屬性未應用于元素，但是應用于其父元素，偽類仍然有效。如果我們使用更常見的屬性選擇器，例如[lang="zh]，則此屬性必須在元素上才能生效。

CSS邏輯屬性
CSS邏輯特性是寫入模式無關，因為它們不依賴于物理方向top，right，bottom，和left。當頁面的書寫模式垂直或從右到左運行時，使用物理方向可能會造成混淆。

方向不是物理方向，而是基于block方向（即在特定書寫模式下堆疊的方向框（例如，段落））和inline方向（即在一行上排序內容的方向）。

有用于大小調整，定位和浮動以及邊界，邊距和填充的對應映射。

用于大小調整的映射如下：widthto inline-size和heightto block-size。

使用容器的邏輯頂部inset-before，而使用容器的邏輯底部inset-after。使用容器的邏輯左側inset-start，而使用容器的邏輯右側inset-end。

邊框，邊距和填充也有對應的映射，它們是：

top 至 block-start
right 至 inline-end
bottom 至 block-end
left 至 inline-start

有關CSS和國際化的更多信息，請查看Hui Jing的相應博客文章。 

使用Shopify Plus翻譯您的國際商店
當你的客戶國際市場銷售，他們就會有不同的選擇排序與Shopify加上翻譯，取決于其國際化的做法是多店或多種貨幣，或者你推薦作為合作伙伴。

Shopify Plus代理機構We Make Websites的聯(lián)合創(chuàng)始人Alex O'Byrne挖掘了利弊： 

多店
您為每個區(qū)域設置單獨的商店，每個商店使用一種語言：

整個前端只有一種語言
不需要額外的翻譯應用程序，因此沒有額外的成本，也沒有與其他前端應用程序不兼容的風險
對于SEO來說更好，因為該網站是真正的本地語言
主要缺點是需要更多的資源來維護整個商店的內容和主題翻譯。您還需要一種方法來維護同一主題代碼庫的多個副本，例如針對所有商店的腳本化部署。

多幣種
您可以通過以下兩種方式運行一家商店，將其翻譯成多種語言： 

1. Shopify多語言API 
這是最新的，更有利的選擇。
它需要安裝受支持的第三方翻譯應用程序和兼容的主題。
受限的應用程序與多國語言兼容。
它允許Shopify商家翻譯成五種其他語言，而Plus商家翻譯成20種語言。
這種方法對您的SEO很友好：
每種語言都托管在您網站的子文件夾中，使搜索引擎可以獨立地對其進行爬網。
hreflang 標簽是自動實現(xiàn)的，可幫助搜索引擎了解每種語言的定位。 
2.第三方應用程序，動態(tài)翻譯商店
這是一種過時的策略，在Shopify的多語言API發(fā)行之前很流行
通過JavaScript進行翻譯，從而獲得本地化的客戶體驗
這種方法對SEO可能是致命的
有你的快照！哦，這里有一些翻譯提示：

谷歌翻譯是行不通的。如果可能，請堅持以母語為母語的人，以幫助您進行翻譯。
在翻譯方面，應優(yōu)先考慮客戶的最暢銷產品。
正確翻譯語音語調至關重要。
為多樣性而設計
網絡在比以往更多的地方聯(lián)系了更多的人，現(xiàn)在許多人來自印度，印度尼西亞，巴西和尼日利亞等新興市場。僅考慮西方受眾的設計和開發(fā)是不夠的。如果您的客戶想打入新市場，至關重要的是他們的網站和應用程序能夠反映世界的真實多樣性。 

為了在不疏遠（甚至使他們感到沮喪和冒犯）的情況下吸引更多用戶，請學習國際化和本地化技術（如本文中介紹的技術），即使您客戶的客戶可能主要是講英語的人。不要依賴假設，請記住，許多文化與您的文化完全不同。從一開始就考慮到這些差異進行設計和開發(fā)，您將改善客戶網站的用戶體驗，最終將增加轉化。

網頁名稱：成都網絡公司透露如何做出國際視野的好網站
路徑分享：http://www.bm7419.com/news31/175731.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、搜索引擎優(yōu)化、虛擬主機、手機網站建設、網站建設、做網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設