创建多语言网站时,注意语言切换元素很重要。 用户在想要切换语言时经常访问此部分。
作为Squarespace多语言网站所有者,这同样适用。 因此,为Squarespace创建一个友好、易于访问且用户友好的语言切换器至关重要。
本文将讨论如何为Squarespace设计语言切换器,并提供设计技巧以及应该这样做的原因。
为什么语言按钮对于多语言网站Squarespace很重要?
在讨论如何设计Squarespace语言按钮之前,您还需要了解为什么语言按钮对于多语言Squarespace网站很重要。
- 服务全球受众:多语言网站对于希望将业务扩展到跨国界的企业至关重要。 语言按钮允许您以目标受众的首选语言呈现内容,使您的网站易于访问并吸引全球细分市场。
- 增强用户体验和参与度:语言障碍会严重阻碍用户体验,导致混乱和跳出率增加。 精心设计和充分实施的语言按钮简化了语言版本之间的切换,确保流畅且用户友好的体验。 通过以访问者的首选语言提供内容,您可以提高参与度并缩短在网站上花费的时间。
- 提高可访问性和包容性:这个简单而强大的功能可以使您的网站更加受欢迎和包容,为可能不精通主要语言的访问者增强主人翁意识。 它还有助于遵守可访问性指南和法规,这些指南和法规通常强调以多种语言提供内容。
- 增强搜索引擎优化和在线知名度: 将您的网站翻译成多种语言可以提高您在各个地区或市场的搜索引擎排名和知名度。 语言按钮可帮助搜索引擎了解您网站的语言变体,确保根据用户的语言偏好向其提供相关内容。
- 强化品牌形象并建立信任:精心设计的语言按钮与您的品牌视觉形象和基调相一致,可以增强您的品牌形象。 通过满足受众的语言需求,您可以展现出对提供个性化和文化敏感体验的承诺,从而建立信任和忠诚度。 关注这些细节可以让您从竞争对手中脱颖而出。
- 促进内容管理和本地化:借助Squarespace的多语言功能,语言按钮简化了跨不同语言版本的内容管理和组织。 这允许在语言变体之间轻松导航,简化内容管理和本地化流程。 它可以节省时间和资源,因为您可以从集中平台高效维护和更新多语言内容。
通过在Squarespace网站上添加精心设计的语言按钮,您不仅可以满足多语言受众的需求,还可以展现出致力于提供出色的用户体验、促进包容性并将您的品牌定位为行业中的全球竞争对手的承诺。
我应该将Squarespace语言按钮放在哪里?
在进一步讨论如何设计Squarespace语言按钮之前,了解语言按钮的位置非常重要,以便用户可以轻松触及。
下面是几个推荐的位置以及相关网站使用语言按钮位置的示例。
标头
将语言按钮放在标题区域是最推荐的选项。 标题是访问者在浏览网站时看到的第一个元素。
通过在此区域中设置语言按钮,站点内任何页面的可见性和可访问性级别变得非常高。 这种布局也符合标准的网页设计实践,用户希望在标题中找到整个网站的重要功能,例如语言选择。
标题中的语言按钮的一个示例来自戴尔的官方网站。
页脚
尽管不如页眉那么突出,但在某些情况下,页脚可以作为语言按钮的适当替代位置。 假设标题区域已经挤满了其他重要元素。 在这种情况下,页脚可以用作语言按钮的位置,以避免主导航混乱。
此外,对于以线性内容流为主的网站,访问者倾向于滚动到页面底部,将语言按钮放置在页脚中可确保该选项在阅读整个内容后保持可见和可访问。 如果语言按钮是次要或附加选项,而主按钮位于标题或导航菜单中,则页脚也可能是合适的选择。
Feel Unique 网站将其语言按钮放置在页脚中,并配有国旗图标和国家/地区名称。
侧边栏
具有侧边栏布局的网站可以使用该区域来放置语言按钮。 通过位于侧边栏中,语言按钮在用户浏览体验期间将始终可见,因为侧边栏通常在页面上保持永久可见。 这确保了用户在需要时可以轻松访问。
如果标题或导航菜单已经填充了其他重要元素,那么放置在侧边栏中也可能是一个很好的解决方案,因此在该区域添加语言按钮只会造成混乱。 对于中心区域有大量内容或功能的网站,侧边栏可以是语言按钮的理想位置,使按钮保持可见且易于访问,而不会妨碍主要内容区域。
下面是 Lulu Lemon 网站的示例,右侧边栏菜单中包含语言按钮。
浮动按钮或粘性元素
最后一个选项是浮动或粘性语言按钮,特别是对于具有简约设计的移动设备或网站。 在移动设备等小屏幕上,浮动按钮或粘性按钮比放置在页眉或页脚中的按钮更明显和更容易访问,后者可能被隐藏或需要额外的滚动。
然而,这种方法应该谨慎实施,以避免破坏内容显示或造成不舒服的用户体验。 应考虑按钮的位置、大小和样式,以确保与整体网站设计的顺利集成。
如下所示,有一个巴塔哥尼亚网站,其语言按钮使用粘性元素。 您可以在右下角找到按钮,之后会出现如下框显示以选择国家和语言。
您如何设计Squarespace语言按钮?
到目前为止,您已经了解了语言按钮对于多语言Squarespace网站的重要性以及语言按钮位置的建议。 因此,找到一个为语言按钮提供简单自定义选项的翻译服务非常重要。
尽管翻译服务通常提供语言切换器,但并非所有翻译服务都提供易于定制和灵活的选项以及各种调整。 然而, Linguise翻译服务对于那些寻求用户友好且易于适应的Squarespace语言按钮的人来说是一个解决方案。
不用担心, Linguise不会施加此类限制。 它是一种自动翻译服务,可在语言按钮上提供用户自定义。 以下是使用Linguise创建Squarespace语言按钮时可以获得的一些其他好处:
- Linguise与 40 多个 CMS 和 Web 构建器平台集成,包括Squarespace Web 构建器。
- 将各种语言添加到网站上的语言按钮后,几秒钟内就会自动翻译成各种语言。
- 有超过 80 种语言可以添加到语言按钮。
- Linguise根据翻译的目标语言自动创建唯一的 URL。 包括hreflang 代码,例如linguise .com/fr/ 用于翻译成法语的页面。
- 当页面上有语言变体时,它会自动生成规范 URL,以帮助避免搜索引擎上出现重复内容。 这是多语言 SEO 的因素之一。
- 您可以根据网站的需要自定义语言按钮,从图标和颜色到语言名称显示。
- 您可以查看添加到语言按钮的每种语言的每种语言的页面统计信息。
言归正传,以下是使用Linguise分几个阶段设计Squarespace语言按钮的步骤。
第 1 步:注册您的Linguise帐户
要使用Linguise为您的Squarespace网站设计语言切换按钮,第一步是在Linguise平台上注册帐户。 您可以免费注册并使用一个月的免费试用期,这样您就可以访问该服务中提供的各种功能。
第 2 步:添加您的Squarespace域站点
下一步是将网站域添加到Linguise仪表板。 需要输入一些数据,包括帐户信息、URL、平台选择( Squarespace )、母语、要翻译的语言以及翻译 URL 设置。
您可以在Squarespace安装自动翻译Linguise ,了解添加域的完整步骤。
第三步:在Squarespace上集成语言按钮
下一步是通过将提供给仪表板的脚本代码添加到您的Linguise网站中Squarespace如下所示。
然后,访问Squarespace仪表板,选择您想要制作多语言的网站,向下导航,然后选择网站工具。
接下来,在“网站工具”菜单中,选择“代码注入”选项。
接下来是HEADER和FOOTER部分。 如果您希望标题中包含语言按钮,请将代码放入标题列中。 FOOTER中输入代码。
第 4 步:设置显示Squarespace语言标志
Linguise与Squarespace集成后, Linguise会自动在Squarespace网站上创建语言按钮。 然而,外观仍然是默认的。
因此,您可以通过几个步骤自定义语言按钮的设计。
确保您已登录Linguise仪表板,然后选择设置 > 语言标记显示。 之后,将出现几个部分,第一个部分如下。
在本节中,有几个设置:
- 列表显示
- 位置
- 语言预览
列表显示选项有 3 个选项,并排、下拉和弹出。 以下是三个选项的预览。
然后,对于语言按钮本身的位置, Linguise提供了多个位置供您选择。
接下来是位置调整,您可以在其中选择语言切换器的放置位置。 您有多种职位可供选择。 确保您选择的位置易于访客访问。
最后,选择标志+语言名称、标志+短名称或仅标志的组合。
第5步:在语言按钮上设置标志设计
主界面下方有旗帜设计设置。 下图中可以看到几个设置选项。
- 语言名称显示:您可以选择根据国家/地区或语言显示名称,例如“德国”或“德语”。
- 英语标志类型:此选项用于具有多种类型的语言,例如“美国英语”或“英国英语”(类似于西班牙语、台湾语、德语和葡萄牙语)。
- 旗帜样式:用于确定旗帜图标的形状,是圆形还是方形(矩形)。
第 6 步:自定义标志的颜色和尺寸
配置标志设计后,下一步是调整颜色、大小和各种其他元素。 在下面的显示中,有几个可自定义的设置,例如:
- 标记边框半径:使用矩形时调整边框半径(以像素为单位)。
- 语言名称颜色:选择语言名称的默认文本颜色。
- 弹出语言颜色:弹出或下拉区域中语言标题的颜色。
- 旗帜大小:调整旗帜的大小。
- 悬停语言名称颜色:将鼠标悬停在语言名称上时的文本颜色。
- 悬停弹出窗口语言颜色:鼠标悬停在弹出窗口或下拉菜单中的语言标题上时的文本。
第七步:调整标志框阴影按钮
在最后阶段,您可以配置标志的阴影设置。 第一个设置允许您为网站上的每个标志指定阴影,后续设置用于将鼠标悬停在语言标志上时的阴影。
如果您满意,请不要忘记选择“保存”以保留您的语言切换器自定义设置。
您可以在Linguise中使用这些Squarespace语言切换按钮设计功能。 您可以调整上述设置以满足您的网站需求。
下面是带有定制设计语言按钮的Squarespace网站的示例。
多么容易,对吧? 有些人可能想知道正确的Squarespace语言按钮位于哪里,以便用户可以轻松触及它。 我们将进一步讨论这一点。
Squarespace语言切换按钮设计技巧
现在您已经知道如何创建Squarespace语言按钮,接下来是通过实施以下提示来完善它:
- 战略放置 –Squarespace上放置语言切换按钮的位置。 将按钮放置在访问者容易找到的区域,例如页眉、导航菜单、页脚或侧边栏。 考虑访问者浏览网站时的流程,并确保按钮在所有网站页面上保持可见且易于访问。
- 适当的样式选择 -安装语言切换器适合您网站的特征和整体设计的样式 您可以使用文本、标志或全局图标来表示语言选项。 自定义按钮样式以匹配您网站的品牌,以实现一致性和视觉吸引力。 此外,选择一种可识别且通用的样式,以便访问者可以快速识别和使用该按钮。
- 清晰的命名——确保语言切换按钮上显示的语言名称清晰易懂。 避免使用可能使用户感到困惑的缩写或代码。 使用大多数网站用户都能理解的语言名称。 此外,请考虑提供替代文本或工具提示,以提供有关每种语言的附加信息,以增强用户的理解。
- 平滑过渡 –实现平滑的语言转换,无需重新加载整个页面。 您可以使用 AJAX 或 JavaScript 等技术在语言之间创建无缝转换,而不会破坏用户体验。 此外,在语言转换过程中向用户提供视觉提示,例如动画或清晰的通知消息。
- 移动响应能力—— 设计语言切换按钮,使其具有响应能力,并在大小和外观上适应各种移动设备。 考虑采用紧凑的方法或使用响应式图标,以确保按钮即使在较小的屏幕上也易于访问和使用。 确保按钮在各种设备和屏幕尺寸上保持可见并正常运行。
- 页面间的一致性 -保持整个网站的语言切换按钮的样式、位置和功能的一致性。 这将有助于在网站页面之间导航时创建更流畅、更具凝聚力的用户体验。 确保所有网站页面上的语言切换按钮具有一致的外观和行为,以避免用户混淆。
- 测试和完善——跨各种设备、浏览器和用户场景对语言切换按钮进行全面测试。 这包括测试语言转换功能、按钮响应能力和语言命名清晰度。 使用用户测试的反馈来进行调整和完善按钮设计和功能,以满足用户的需求和偏好。