Language selector 语言切换

/LANG-gwij suh-LEK-ter/ · noun · 导航类模式 · #136

把网站或 App 切换成其他语言的控件:通常是页头或页脚里的地球图标,或当前语言的名称(English ▾),点开是语言列表,每种语言用它自己的名称和文字书写,比如 Deutsch、Español、日本語。最好不用国旗,因为国旗代表国家而不是语言;切换后应该停留在同一个页面。

Language selector(语言切换) UI 模式示例:CatchUI 图鉴标本

别名:语言切换按钮、网站语言切换。

你可能会这样叫它

  • “切换语言的地球图标”
  • “右上角的语言下拉菜单”
  • “网站上的语言切换按钮”
  • “页脚里的语言选择”

……它的名字是 语言切换(Language selector)。

常见问题

网站语言切换一般在哪里?

最常见的是页面右上角的页头里,一个地球图标或当前语言名称(比如“中文 ▾”);很多网站也会在页脚再放一个。点开后每种语言用它自己的文字列出(English、日本語),方便看不懂当前语言的人找到。最好不要只用国旗,因为国旗代表国家而不是语言。

代码里叫什么

Web (HTML)<a hreflang lang> <link rel="alternate" hreflang>
Android 13+AppCompatDelegate.setApplicationLocales() LocaleManager
iOSUIApplication.openSettingsURLString App 跟随系统语言;可在“设置”里为每个 App 单独选语言
FlutterMaterialApp.locale supportedLocales

复制给 AI 编程工具

在网站页头加一个语言切换:一个带地球图标和当前语言缩写(EN ▾)的按钮,点开后列出各语言,每种语言用它自己的名称和文字书写——English、Español、Deutsch、日本語——当前语言打勾。切换后停留在对应的页面并记住选择;不要按 IP 或浏览器语言自动跳转,每个页面都给出各语言的链接,让用户自己选。每个选项加 lang 和 hreflang 属性,在 head 里加 rel="alternate" hreflang 链接,不要用国旗。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

网站各部分叫什么(英文)→

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)