在 Squarespace 上切换：如何设计语言按钮

您已经将您的 Squarespace 网站变成了多语言网站。太棒了，赞一个！我们很乐意看到这一切！

现在怎么办？

您可能已经注意到我们最近一直在谈论 Squarespace，这是因为 我们的很多客户都在使用它（甚至用于电子商务），而且做得非常出色。

我们所见过的Weglot最佳 Squarespace 网站，都是那些不断完善网站微观细节的网站，尤其是在提出 "现在怎么办 "的问题之后。

使用Weglot 的好处之一就是可以灵活地设计语言切换按钮。大多数网页设计师都会告诉你，在页面上完全控制导入元素（插件、附加组件或其他应用程序组件）的外观和感觉是一种难得的奢侈。

在很多情况下，您添加到网站上的应用程序或插件都是预先编程好的，以特定的方式显示，并符合开发者的品牌形象。这就会让用户清楚地看到，插件元素并不是网站的原生元素，而是来自其他地方。即使这是一个功能完善的小部件，它仍然可能在视觉上与网站的其他部分格格不入。

Weglot 并非如此--至少，它不必如此。在 Squarespace 网站上安装Weglot 后，最初会在页面右下角看到一个语言切换按钮，看起来就像这样：

很基本，对吗？第一阶段语言转换器的设计理念是尽可能中性：没有喧闹的色彩，没有狂野的排版，只有一个清晰、简洁的按钮，它能完成你所需要的功能。

很多人都喜欢功能性的外观，这完全没有问题。如果白色矩形适合你和你的网站，你就会知道他们是怎么说的（也许你不知道，但你现在会知道）："如果没坏，就不要修"。(在法语中，我们有时会说 "On ne change pas une équipe qui gagne"--这句话也行得通）。

但是，如果你看着自己漂亮、整洁的矩形，还不满足的话，也不必失去希望。

我应该把按钮放在哪里？

"按键位置 "这个概念可能很琐碎，但想想你每天要按多少个按键吧。这还包括智能手机键盘上的按键，孩子们；现在是 2019 年，我们的手指接触到的按键可能比接触到肥皂和水还要多（恶心，但事实如此）。关键是，按钮无处不在。

如果让所有可能的读者都能读懂您的网站是您的首要任务（客观地说，这应该是首要任务--尤其是如果您希望提高转换率或只是让您的网站在全球范围内更容易访问），您就需要确保他们能立即将网站切换成他们自己的语言。

侧面事项。

是的，你没有看错。当然，大小也很重要--小按钮不可能特别显眼，因此更不可能被点击。

但是，网页设计从根本上说是一个空间谜题，如果我们把它看成是一个游戏，那么你的游戏板就仅限于一个二维矩形，有两个主轴--左右和上下，或者 "x "和 "y"（如果你愿意）--而网站的全部意义就在于它可以包含大量的信息。如何将所有链接、图片、视频和其他有趣的互动元素融入这个有限的空间，并让最重要的元素脱颖而出，同时又不影响 其他元素？

有研究表明，一个元素在页面上的位置--它在每个轴线上的位置--会对观众找到它的速度 以及与之互动的可能性产生 至关重要的影响 。这两个条件并不一定有因果关系，但它们之间有相当大的相关性，足以让我们考虑用户对行动号召（"CTA"）或按钮位置的固有偏好。

那么，你可能会问，这些研究到底说明了什么？

不难看出，用户的母语--或者至少是他们最习惯使用的浏览网页的语言--对他们与网页的交互方式有着相当重要的影响。

Material Design 的用户界面和用户体验设计专家发布了一份深度指南，介绍了在从左到右（"LTR"，如英语）和从右到左（"RTL"，如阿拉伯语或希伯来语）两种语言之间，哪些网页元素应该调整（哪些不应该调整）。

我们不会像他们说得那么详细，但如果你有更复杂的视觉元素（例如图标），而不仅仅是调整语言方向的按钮，你可以在这里查看。

也就是说，我们习惯的阅读方向会影响我们对不同位置的 CTA 的敏感度，这背后有具体的心理学解释--其中一个解释被称为古腾堡图，它说明了我们观察页面元素的顺序与我们在每个元素上花费的时间之间的关系。

网络上有很多其他资源可以详细解释这种现象，比如这篇，但我们可以说，Weglot 将语言转换按钮默认放在页面右下角的决定并非偶然。 在二维屏幕上，这个位置构成了终端区域，阅读 LTR 的用户极有可能在这里停留并与呈现给他们的 CTA 互动。如果 CTA 是一个语言转换按钮，这就意味着他们几乎不需要费力就能找到让他们访问网站的方法。

总之，在页面的哪一侧放置按钮对用户能否轻松找到按钮有很大影响。 如果网站的初始语言是 LTR 格式（如英语、法语、西班牙语、简体中文......），这就意味着要将按钮放在页面右侧。

当然，如果您的初始网站使用的是 RTL 语言，如阿拉伯语、希伯来语或波斯语，您就需要反其道而行之， 将按钮放在左侧。

迪拜字体公司的网站提供了一个完美的例子，说明了这种组织应该是什么样子--既有英语（主页的默认语言），也有阿拉伯语（您可以通过英语页面右上方 的按钮选择的语言）。请注意，当语言发生变化时，这种方向性也会发生变化。

但我能看看菜单吗？

您可能还在想，为什么不把它放在 "主要光学区域 "区呢？-这个问题很有道理。

请记住，这仍然是你的网站，可能是你的品牌或其他项目的网站，所以你可能想在这部分保留一些有影响力的个人标识，比如徽标。

不过，和终端区域一样，强落差区域也是放置按钮的好地方--尤其是在页面顶部有水平菜单的情况下（现在大多数网站都是这种情况）。
顶部菜单栏是放置语言切换按钮的好地方，尤其是在 Squarespace 上。

Squarespace 上的菜单按钮：风格化、合成和本地化

将Weglot 语言切换按钮集成到 Squarespace 上的菜单栏中（这适用于任何类型的菜单栏，无论哪一面，因此您的语言指向性不会影响其工作方式）非常简单。

在网站编辑器中，您可以点击 "页面"，然后进入一个类似下面这样的侧边栏：

点击 "主导航 "标题旁边的 "+"号，就可以在主标题菜单中添加链接 和/或下拉菜单。

无论您选择将网站的可用语言作为主菜单上的直接选项...

......或者说，作为集成下拉菜单的元素......

......你会很顺利：过程是一样的。如果您创建了一个下拉菜单，您还可以添加链接（就像使用主导航菜单上的 "+"命令一样）--以及为您添加到网站上的每种语言添加以下过程。

一旦选择在主菜单栏或集成下拉菜单中添加链接，就会出现如下弹出窗口：

将链接标题改为您希望将网站更改为的语言名称。当然，您也可以用原始语言的名称来称呼该语言--例如，如果您用英语建立原始网站，则可以用 "Spanish "来代替 "Español"，但我们建议您使用该语言的母语名称作为标题，这样讲该语言的人就能更容易地识别它。 Tl;dr：选择 "Español"，而不是 "Spanish"；选择 "Français"，而不是 "French"；等等，等等。

接下来，您需要输入标题指向的链接。由于Weglot Squarespace 网站不是由子文件夹中的重复页面组成，而是由每种语言的单独子域组成，因此您实际上不会链接到单独的 URL。取而代之的是，输入字符串 "WeglotWeglot-"，然后输入您正在使用的语言的双字母 ISO 语言代码（我们在这里提供了完整的 代码 列表）。

一旦完成这些操作，您就会看到您的语言标题与主菜单完美融合...

......就像这些家伙。

Squarespace的多语言网站基本上都能保证时尚美观，这就是Squarespace模板的特性，通过点击和拖拽，就能轻松打磨网站，让它看起来更专业。

当然，这并不妨碍您尝试个性化网站外观，使其真正成为您自己的网站。

对于多语种网站来说，保持个人品牌元素 在不同版本间的一致性尤为重要--这也是多语种网站设计的基本原则之一--这意味着要综合运用网站美学，从图片调色板到排版风格，再到按钮风格。您的语言切换按钮是整个模式的关键部分，只有当您的按钮与页面的整体视觉主题相吻合时，您的网站才会更加美观。

同时，正如我们已经讨论过的，你希望你的按钮至少能从其他页面元素中脱颖而出，这样用户就能很容易快速找到它。如何在独特性（便于查找）和连贯性（页面质量）之间取得平衡？

这是一个字面上的悖论，但并非无法解决。下面是一些多语言的 Squarespace 网站，它们的语言切换按钮的位置和设计都很有创意，可以给你一些启发。

锡库项目

Siku Project 位于西西里岛，是一家创新型珠宝公司，其产品由意大利当地的刺梨仙人掌纤维制成（是的，你没看错，刺梨仙人掌纤维实际上可以 用来制作环保的硬质材料）。

他们的语言切换下拉菜单可以让你在英语和意大利语之间自由切换，位于页面右上方的主导航菜单上，就像一颗珍珠串在（高度可视化的）绳子上。

远征游泳

Siku 项目的网站看起来就像我们想象中的 Squarespace 网站一样--单色、图片丰富、干净整洁。但是，Squarespace 网站也可以是多彩的、古怪的--布鲁塞尔的 "游泳探险 "项目就选择了这种方式（或者说，游泳）。

他们的网站旨在鼓励当地人带着家人到城市新清洁的池塘中游泳。该网站俏皮、明亮，充满了波浪形和动画（让人联想到--你猜对了--水），其语言切换器与导航栏右上角部分完美契合。

他们通过显示三种语言--法语、英语和荷兰语--的通用双字母语言代码（FR、EN 和 NL），实现了超级用户友好，无需点击下拉菜单。每一个正在寻找清凉夏日活动的布鲁塞尔人，甚至是年轻人，都能在两秒钟内轻松找到如何将网站切换为自己的语言。

销售糖果

Saas 初创公司 SalesCandy 总部设在马来西亚，这是一个多元文化的社会，也是一个天生的多语言社会。在这样的商业环境中，拥有一个多语言网站是绝对必要的，SalesCandy 在方便每位读者使用母语方面做了一些深思熟虑。

他们是如何做到这一点的呢？有两点特别值得一提：a）他们的语言下拉菜单（是的，我们真的不能再强调这一点了）很好地位于页面的右侧；b）语言选项是原生编写的，也就是说，像这样编写的：

感觉受到了启发？

我们当然希望如此。如果您已准备好推出自己的 Squarespace 网站或商店，并为您的多语言受众进行优化，以下是一些关于如何开始设计流程的提示，以及在您理清细节后，如何在 Squarespace 上走向全球的提示。