Two years ago, Shopify was only available in English. Few people in Germany or Japan had heard about us. We had only just formed the international growth team to make Shopify available to people in their native tongue.

兩年前，Shopify僅提供英語版本。 在德國或日本，很少有人聽說過我們。 我們剛剛組建了國際增長團隊，以便以母語向人們提供Shopify。

Today, we’re making commerce better in 19 languages.

如今，我們正在以19種語言改進貿易。

“You must’ve known what you were doing,” you may think. This is definitely not true. The international growth team always jokes that we are a pirate ship — the waters can be choppy, the nights can be dark and stormy, we often get lost, and at times we don’t even know where we’re going.

您可能會想：“您一定已經知道自己在做什么。” 絕對不是這樣。 國際增長團隊總是開玩笑說我們是一艘海盜船-水域可能波濤洶涌，夜晚可能是黑暗和暴風雨，我們經常迷路，有時甚至不知道我們要去哪里。

Today, as we celebrate our wins, we also want to share what we’ve learned. One topic that’s particularly close to my heart is how we help our UX teams design and build for an international audience. My team, the international tools and services team within the international growth team, does not localize Shopify’s product directly, but teaches each team at Shopify how to do so and how to innovate their product for merchants around the world.

今天，在慶祝勝利的同時，我們也想分享我們學到的東西。 與我特別接近的一個話題是我們如何幫助UX團隊為國際觀眾設計和構建 。 我的團隊(國際增長團隊中的國際工具和服務團隊)并沒有直接將Shopify的產品本地化，而是教Shopify的每個團隊如何做到這一點以及如何為世界各地的商家創新產品。

If you and your team are considering building the UX foundations for international growth, but don’t quite know where to start (like we felt two years ago) — or if you’re intimidated by the word “international” because it sounds like “a world of problems” (which it is) — fear not! This post offers practical tips that can help get you started pretty quickly.

如果您和您的團隊正在考慮為國際增長建立用戶體驗基礎，但是卻不知道從哪里開始(就像我們兩年前的感覺)，或者您是否對“國際”一詞感到害怕，因為它聽起來像是“一個充滿問題的世界”(現在)–不要害怕！ 這篇文章提供了實用技巧，可以幫助您快速入門。

You can do more than you think.

您可以做的事超出您的想象。

從國際化UX原理開始 (Start with internationalization UX principles)

There are well-established UX guidelines for internationalization. Following them will ensure that your product can be designed to adapt to any international market out of the box.

有完善的國際化UX準則。 遵循它們將確保您的產品可以設計為適應開箱即用的任何國際市場。

Without having to reinvent the wheel, we started with three simple UX principles:

無需重新發明輪子，我們從三個簡單的UX原理開始 ：

• Plan for text expansion
  計劃文字擴展
• Plan for word order
  計劃單詞順序
• Plan for cultural differences
  計劃文化差異

All of these principles ensure that when a UI gets translated and adapted into a different language and locale, it looks and feels as familiar, crafted, and trustworthy as it does in English.

所有這些原則確保了當UI轉換并改編為其他語言和語言環境時，其外觀和感覺與英語一樣熟悉，精巧和值得信賴 。

Are there other principles that you may need to use for internationalization? Maybe. But these guidelines give you a solid start to dive into your work quickly.

您可能還需要使用其他國際化原則嗎？ 也許。 但是，這些指南為您快速踏入工作提供了堅實的開始。

If you’re not quite sure what internationalization means, this post by Airbnb offers a good definition.

如果您不太清楚國際化的含義，那么 Airbnb的 這篇文章就 提供了一個很好的定義。

Takeaway: Don’t wait until you know everything. Starting somewhere is better than starting nowhere and some universal principles are a good starting point.

要點 ：不要等到一切都知道。 從某個地方開始總比從無處開始好，一些通用原則是一個很好的起點。

形成意見 (Form an opinion)

Other than the UX principles we mentioned earlier, there are also global standards for internationalization. They can help you get started, ensure consistency, and maintain your product, but adopting these standards indiscriminately may not be enough to create a truly meaningful experience. You need to form an opinion about localization UX patterns where they matter.

除了我們前面提到的UX原理外，還有國際化的全球標準 。 它們可以幫助您入門，確保一致性并維護您的產品，但是不加選擇地采用這些標準可能不足以創造真正有意義的體驗。 您需要在重要的地方就本地化UX模式形成看法。

For example, when it comes to commerce, very few things are as important as currency. It’s connected to almost everything a merchant does. When we consider a merchant selling globally, a poor mixed currency experience will leave their customers feeling confused and powerless. (“Which currency am I looking at when there’s a ‘$’?”) Even worse, it can result in serious consequences (“I just refunded an order in US dollars thinking it was in Canadian dollars.”). To create a truly crafted and considerate experience, we went beyond the existing standards, and defined our own currency formatting guidelines to show the appropriate level of details.

例如，在商業方面，幾乎沒有什么東西比貨幣重要。 它幾乎連接到商人所做的所有事情。 當我們考慮到在全球范圍內銷售的商人時，不良的混合貨幣體驗會使他們的客戶感到困惑和無能為力。 (“出現“ $”時，我正在查看哪種貨幣？”)更糟糕的是，它可能導致嚴重的后果(“我只是以美元為單位退還了美元訂單，”)。 為了創造真正精湛和體貼的體驗，我們超越了現有標準，并定義了自己的貨幣格式準則以顯示適當的詳細程度。

Similarly, we formed some strong opinions on designing address forms because addresses are also essential to our business (you won’t get things delivered if you can’t enter your address correctly).

同樣，我們在設計地址表單時也形成了一些強烈的意見，因為地址對于我們的業務也是必不可少的(如果無法正確輸入地址，您將無法得到交付的東西)。

Takeaway: Consider your product and users — what’s unique about them? What are the areas that require more localization effort? Are there special UX considerations where you need to go beyond standard practice? The answer to these questions will help you form your opinion.

要點：考慮您的產品和用戶-他們有什么獨特之處？ 有哪些領域需要更多的本地化工作？ 是否有需要超越標準實踐的特殊UX注意事項？ 這些問題的答案將幫助您形成意見。

教他們釣魚 (Teach ’em to fish)

All the general principles and opinionated guidelines won’t go very far if no one in your organization’s UX team knows or cares about them. And in case you missed the fine print — advocacy and education come with the job.

如果您組織的用戶體驗團隊中沒有人知道或關心它們，那么所有通用原則和自以為是的準則都不會走太遠。 萬一您錯過了精美的字樣，工作中就會附帶進行宣傳和教育。

從小開始 (Starting small)

If you are new to this whole advocacy and education business and don’t know where to start, consider learning from these good folks about how they built an army of content champions and created an accessible culture at Shopify. All of their advice has worked for us.

如果您是整個倡導和教育行業的新手，并且不知道從哪里開始，請考慮向這些好人學習如何建立內容擁護者大軍并在Shopify 創建一種可訪問的文化 。 他們的所有建議都對我們有用。

But you don’t need to wait until you’ve formed a full education program. We’ve had success with relatively low-effort initiatives, such as:

但是，您無需等到形成完整的教育計劃即可。 我們通過相對省力的舉措取得了成功，例如：

• starting a public Slack channel for folks to ask questions about international UX
  建立一個公共的Slack頻道供人們問有關國際用戶體驗的問題
• inviting teams to join our critique sessions to get some international perspective on their work
  邀請團隊參加我們的評論會議，以對其工作取得一些國際視野
• identifying allies from other teams that can help us organize team learning events, such as lunch-and-learns, AMAs, or workshops.
  從其他團隊中找出可以幫助我們組織團隊學習活動的盟友，例如午餐和學習活動，AMA或研討會。

精心制作您的訊息 (Crafting your message)

Since localization is relatively new to many UXers, one thing I’ve found particularly helpful is to make our message clear, concrete, and actionable. Some of our messages for common questions are:

由于本地化對于許多UX用戶而言是相對較新的，所以我發現特別有用的一件事是使我們的信息清晰 ， 具體和可操作 。 我們針對常見問題的一些信息是：

• Why do we need to care about localization? (“A Brazilian merchant should find Shopify as easy to use as a Canadian one.”)
  為什么我們需要關心本地化？ (“巴西商人應該發現Shopify與加拿大商人一樣易于使用。”)
• What do you want us to do? (“Plan for text expansion.”)
  您要我們做什么？ (“文本擴展計劃。”)
• How can we do that? (“Test your design in German.”)
  我們該怎么做？ (“用德語測試您的設計。”)

衡量成功 (Measuring success)

How do you know if all the things you’ve done are hitting your goals? Just like designing a product, you need to put some success metrics in place.

您怎么知道您所做的所有事情是否都達到了目標？ 就像設計產品一樣，您需要制定一些成功指標。

If you’re running a workshop, send a short survey afterwards to collect feedback. This will help you understand whether your content is helpful and relevant. After a few events we’ve run, we asked “Have you learnt anything new today?”, and the answer to that has helped us plan the content of our future education initiatives.

如果您正在舉辦研討會，請隨后發送簡短調查以收集反饋。 這將幫助您了解您的內容是否有用和相關。 在我們進行了幾項活動之后，我們問“您今天學到了什么新東西嗎？”，而對它的回答幫助我們計劃了未來教育計劃的內容。

Another signal of effective advocacy is when more teams come to you for questions or support. This means folks are actively thinking about designing internationally. You can use these opportunities to continue to refine guidelines as you work with teams through their unique problems.

有效倡導的另一個信號是，當更多的團隊向您提出問題或支持時。 這意味著人們正在積極考慮進行國際設計。 當您與團隊合作解決其獨特的問題時，您可以利用這些機會繼續完善準則。

Takeaway: Advocacy and education are non-negotiable, but they don’t have to be a big-budget effort. You can start with small events or initiatives, as long as your messages are clear, concrete, and actionable. Find a way to track the effectiveness of these efforts — the last thing you want is to do a bunch of work without knowing if it’s useful.

要點：倡導和教育是不可協商的，但不一定要花大錢。 只要您的信息清晰，具體且可行，就可以從小規模的活動或計劃開始。 找到一種方法來跟蹤這些工作的有效性–您想要做的最后一件事是在不知道它是否有用的情況下進行大量工作。

給他們釣魚工具 (Give’ em fishing tools)

So you’ve discovered this new cool thing called fishing. You taught folks how to fish. Big congrats! But before you clap your hands and declare a job well done, there’s more.

因此，您已經發現了一種叫做釣魚的新奇事物。 您教人們如何釣魚。 恭喜你！ 但是在鼓掌鼓掌宣布一項工作做好之前，還有很多事情要做。

Consider this: when it comes to UX, the checklist is pretty long — accessibility, mobile, content best practices, design principles…and it goes on. The fact is, UXers are already overloaded with things they need to consider and, despite the best of intentions, they will miss things. Now we’re telling them to add yet another item to the list.

考慮一下：在UX方面，檢查清單很長-可訪問性，移動性，內容最佳實踐，設計原則……等等。 事實是，UX用戶已經超負荷了他們需要考慮的事情，盡管有最好的意圖，他們還是會錯過事情。 現在，我們告訴他們將另一個項添加到列表中。

How then, can we make designing for an international audience (almost) a no-brainer for UX teams?

那么，我們如何才能(幾乎)使面向國際用戶的設計成為UX團隊的明智選擇呢？

For your consideration: build tools.

供您考慮： 構建工具 。

國際化設計系統 (Internationalize the design system)

Building tools sounds pretty daunting, but it’s really not. An obvious place to start is the design system.

構建工具聽起來很艱巨，但實際上并非如此。 一個明顯的起點是設計系統。

The good thing about incorporating the UX foundations for internationalization into your design system is that the infrastructure is already there and it’s designed to be scalable and operable. Easy win!

將UX國際化基礎集成到您的設計系統中的好處是，該基礎結構已經存在，并且被設計為可擴展和可操作的。 輕松獲勝！

A few months ago, together with the ever-amazing Polaris team, we conducted a complete audit of all Polaris components based on the internationalization UX principles we established. The goal was to make sure that when content is translated into other languages all the components still work as well as if they were in English.

幾個月前，我們與蓬勃發展的Polaris團隊一起，根據我們建立的國際化UX原則，對所有Polaris組件進行了全面審核。 目的是確保將內容翻譯為其他語言時，所有組件仍然可以正常工作，就像使用英語一樣。

Again the idea is to start doing something with what we already know and have, instead of trying to wait and solve all the problems at once. This kind of audit is definitely doable in a sprint. If time and resources are constrained, consider either prioritizing the most commonly used components or split the audit into two parts (identifying issues and fixing issues) — as long as you have a plan to achieve the end goal.

再一次的想法是開始用我們已經知道和擁有的東西做某事，而不是試圖立即等待并解決所有問題。 這種審核絕對可以在沖刺中進行。 如果時間和資源有限，請考慮優先考慮最常用的組件，或將審核分為兩部分(識別問題和解決問題)，只要您有實現最終目標的計劃即可。

After our audit, all the components are now flexible enough to work well when text expands or word orders change (except for right-to-left languages).

經過我們的審核后，所有組件現在都足夠靈活，可以在文本擴展或單詞順序更改時正常工作(從右到左語言除外)。

There is still a lot more we can do to extend our design system to accommodate for international use cases. Localizing color, typography, grid, and iconography are a few things we plan to do given our system of systems approach. Ultimately, we should leverage the design system as much as we can to make it our primary infrastructure when it comes to UX internationalization and some localization.

我們還有很多工作可以擴展，以適應國際使用情況。 鑒于我們的系統方法，我們計劃對顏色，版式，網格和圖標進行本地化。 最終，當涉及到UX國際化和某些本地化時，我們應該盡可能地利用設計系統，使其成為我們的主要基礎架構。

Takeaway: If you already have a design system, internationalizing all the UI components can be a fairly contained project to work within a sprint. If you’re just starting one, even better — you can embed internationalization in it from the get go.

要點 ：如果您已經有一個設計系統，那么將所有UI組件國際化可以作為一個包含在sprint中的合理項目。 如果您只是一個起點，甚至更好—您可以一開始就將國際化嵌入其中。

將準則轉化為行動的工具 (Tools that turn guidelines into actions)

If you have read this far, you can probably tell there is a recurring theme of “bias towards action”. Not only do we want to act quickly, we also want to help our teams act easily and quickly by giving them the right tools.

如果您已經讀了那么多書，您可能會發現一個反復出現的主題是“偏向行動”。 我們不僅要Swift采取行動，還希望通過為他們的團隊提供適當的工具來幫助他們輕松快速地采取行動。

Consider this scenario: even with all the components in your design system working well when text expands, the UI still breaks when these expanded components are grouped together.

考慮這種情況：即使設計系統中的所有組件在文本展開時都能正常工作，但將這些擴展的組件組合在一起時，UI仍然會損壞。

In this case, our actionable recommendation for UXers would be “check your UI in a different language where your text may expand.” And the way they would do this is to grab the content, get it translated, paste it back to the design file, and check the UI. That’s a lot of work we don’t want designers to spend their precious time on.

在這種情況下，我們對UX用戶的可行建議是“以其他語言檢查您的UI，在其中您的文本可能會擴展。” 他們執行此操作的方法是獲取內容，將其翻譯，粘貼回設計文件并檢查UI。 我們不想讓設計師花費很多寶貴的時間來做很多工作。

“Can we do something?” you ask. Sure we can. In fact, it’s already done.

“我們可以做點什么嗎？” 你問。 我們當然可以。 實際上，它已經完成了。

Netflix built a pseudo-localization tool that turns English UI into expanded fake text to show the “translated” UI. Now, because Figma is our design tool, we built a pseudo-localization Figma plugin following the same mechanism. (Again, starting with what we know and not reinventing the wheel.)

Netflix構建了一個偽本地化工具 ，該工具可將英語用戶界面轉換為擴展的假文字，以顯示“翻譯后的”用戶界面。 現在，因為Figma是我們的設計工具，所以我們按照相同的機制構建了一個偽本地化的Figma插件。 (同樣，從我們所知道的開始，而不是重新發明輪子。)

Similarly, to make following the currency formatting guidelines easier, we created a `formatCurrency` method in our i18n react library so developers can call the correct format with one line of code.

同樣，為了使遵循貨幣格式設置準則更容易，我們在i18n react庫中創建了一個`formatCurrency`方法，以便開發人員可以用一行代碼調用正確的格式。

Takeaway: If your recommendations are indeed actionable, you can probably build a tool for teams to act on them. What tools can you build within your tooling ecosystem that can make following the principles and guidelines as automatic as possible?

要點：如果您的建議確實可行，那么您可以構建一個工具，讓團隊根據這些建議采取行動。 您可以在工具生態系統中構建哪些工具，以使其盡可能自動地遵循原理和準則？

One caveat of building tools is that it requires a significant amount of development effort. I recommend making this a bonus until there you have enough resources. In the meantime, do what you can to educate and/or leverage the design system.

構建工具的一個警告是它需要大量的開發工作。 我建議您在沒有足夠資源的情況下將此作為獎勵。 同時，盡您所能來教育和/或利用設計系統。

繼續努力 (Keep working on it)

Earlier, we talked about seeing teams coming to you with questions as a positive result of your advocacy and education efforts. There are more reasons to celebrate this and see it as a great opportunity for your ongoing work:

之前，我們談論過看到團隊在您的倡導和教育工作中取得積極成果的問題。 有更多理由慶祝這一點，并將其視為正在進行的工作的絕佳機會：

1. It gives you a window to see the limits of your expertise.
   它為您提供了一個窗口，可以查看您的專業知識的局限性。
2. These are real problems and unique to your product, so it helps you form opinions.
   這些都是實際問題，是您產品所獨有的，因此它可以幫助您形成意見。
3. Teams will remember the guidelines from this problem since you worked through them together.
   團隊將記住這個問題的指導原則，因為您共同努力過。

For instance, a few teams have come to us with a similar problem — the layout being broken when texts are translated in narrow columns.

例如，一些團隊遇到了類似的問題-當文本以窄列形式翻譯時，布局被破壞了。

The principle of “plan for text expansion” still applies, but having worked through these real problems with teams, we concluded that we should always avoid narrow columns in favour of a list-style UI.

“文本擴展計劃”的原則仍然適用，但是在與團隊合作解決了這些實際問題之后，我們得出結論，我們應該始終避免使用狹窄的列 ，而應該使用列表樣式的UI 。

There you have it — a clear, concrete, and actionable recommendation from this collaboration. Now you can repeat the previous steps of adding it to the guidelines, forming some opinions, teaching it, and embedding it into tooling.

您已掌握了這項合作的明確，具體和可行的建議。 現在，您可以重復前面的步驟，將其添加到準則中，形成一些意見，進行講授并將其嵌入到工具中。

One thing to keep in mind is to use this as an opportunity to get creative in solving these seemingly rigid problems (instead of trying to be the “internationalization police”). Remember that you are here to support other teams through knowledge sharing, tooling, and collaboration.

要記住的一件事是，利用它作為解決這些看似僵化的問題的創造性的機會(而不是試圖成為“國際化警察”)。 請記住，您在這里是通過知識共享，工具和協作來支持其他團隊。

Another area that we continue to work on is to learn more about our international merchants through UX research and share our learnings back to the rest of the UX teams. This is a huge undertaking, as “international merchants” is far from a homogenous group of people. People from different countries, regions, and cultures all have different expectations, behaviors, and preferences. As we are still figuring out how to do this at scale, our goal remains to help our UX teams design for these differences effectively.

我們將繼續努力的另一個領域是通過UX研究來更多地了解我們的國際商人，并將我們的經驗分享給其他UX團隊。 這是一項艱巨的任務，因為“國際商人”遠非同一群人。 來自不同國家，地區和文化的人們都有不同的期望，行為和喜好。 由于我們仍在研究如何大規模地執行此操作，因此我們的目標仍然是幫助我們的UX團隊有效設計這些差異。

Takeaway: Treat answering international UX questions as opportunities to form new opinions, patterns, and recommendations that will further help your UX team design for international audiences.

要點 ：將回答國際用戶體驗問題視為形成新觀點，模式和建議的機會，這將進一步幫助您的用戶體驗團隊為國際讀者設計。

再說幾句話 (A few more words)

Designing products for international audiences is still a brave new world and will undoubtedly continue to evolve. There is indeed a world of problems, but with that comes a world of opportunities. And it’s up to all of us to make the world a better place — it takes a village. ??🌏

為國際觀眾設計產品仍然是一個勇敢的新世界，無疑將繼續發展。 確實存在著很多問題，但是隨之而來的卻是機遇。 使我們的世界變得更美好，取決于我們所有人，這需要一個村莊。 ??🌏

—

-

If any of the things I talked about sounds exciting to you, we are always looking for passionate global citizens to make commerce better for everyone, everywhere.

如果我談論的任何事情對您來說令人興奮，那么我們一直 在尋找充滿激情的全球公民， 以使每個地方的每個人的貿易都更好。

—

-

Huge thanks to Paul Stairmand and Virginia Start for being the pioneers and advocates for designing for international and helping edit this post, Monika Piotrowicz for the support, as well as the amazing UXers on the international growth teams for being part of this incredible journey together. Special thanks to Tom Ayre for building the pseudolocalization Figma plugin as a Hack Days project.

非常感謝Paul Stairmand和Virginia Start成為國際設計的先驅和擁護者，并幫助編輯了這篇文章，Monika Piotrowicz的支持，以及國際增長團隊中令人驚嘆的UXer共同參與了這一不可思議的旅程。 特別感謝Tom Ayre將偽本地化Figma插件構建為Hack Days項目。

進一步閱讀： (Further reading:)

Here are some more insights and case studies on designing for international audiences. Happy reading:

以下是針對國際受眾的更多見解和案例研究。 祝您閱讀愉快：

• A talk I gave on international design fundamentals if you’re not yet familiar with the topic.

  如果您還不熟悉該主題，那么我將就國際設計基礎進行一次演講。

• Some sound advice by Dropbox Design (which fundamentally influenced our approach).

  Dropbox Design的一些合理建議 (從根本上影響了我們的方法)。

• Adobe’s international design guides.

  Adobe的國際設計指南 。

• The role of design in launching 62 languages at Airbnb.

  設計在 Airbnb 推出62種語言中的作用 。

• Localization at Slack.

  Slack的本地化 。