global-toolbar-controls

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Global Toolbar Controls

全局工具栏控件

What Belongs Here

哪些控件应放在这里

Global controls affect the entire product experience but are not the user's primary task. They are reached occasionally — once per session or less — and should not compete visually with primary navigation or content.

Typical global toolbar controls:

Currency selector (e-commerce, financial tools)
Language / locale switcher
Region or market selector
Unit system (metric / imperial)
Theme toggle (light / dark)
Accessibility preferences (font size, contrast)

These are distinct from user account settings (which live in a profile menu) and from contextual settings (which live adjacent to the feature they affect).

全局控件会影响整个产品体验，但并非用户的核心任务。用户偶尔会使用它们——每次会话最多一次——且不应在视觉上与主导航或内容竞争。

典型的全局工具栏控件：

货币选择器（电商、金融工具类产品）
语言/区域切换器
地区或市场选择器
单位系统（公制/英制）
主题切换（亮色/暗色）
无障碍偏好设置（字体大小、对比度）

这些控件与用户账户设置（位于个人资料菜单中）和上下文设置（位于其影响的功能附近）是不同的。

Where to Place Them

放置位置

Header utility strip

页眉工具条

A secondary row above or within the main header, right-aligned. Common on e-commerce and international sites.

[Logo]                    [EN | EUR | 🌍]  [Account]  [Cart]
────────────────────────────────────────────────────────────
[Main navigation]

位于主导航上方或内部的次要行，靠右对齐。常见于电商和国际化网站。

[Logo]                    [EN | EUR | 🌍]  [Account]  [Cart]
────────────────────────────────────────────────────────────
[Main navigation]

Header right — compact

页眉右侧——紧凑式

Inline with the main header, far right, using small typography and minimal visual weight.

[Logo]  [Nav items ...]              [EUR ▾]  [EN ▾]  [Account ▾]

与主导航内联，位于最右侧，采用小号字体和最小视觉权重。

[Logo]  [Nav items ...]              [EUR ▾]  [EN ▾]  [Account ▾]

Footer

页脚

For controls the user sets once and rarely revisits. Language and region selectors frequently appear in footers on large international sites (Airbnb, Apple). Appropriate when the control is truly infrequent.

适用于用户设置一次后很少再访问的控件。语言和地区选择器经常出现在大型国际化网站（如Airbnb、Apple）的页脚中。当控件确实极少被使用时，这种放置方式较为合适。

Dedicated settings area

专属设置区域

For more complex preference sets, a Settings page or panel is cleaner than cramming everything into the toolbar. The toolbar should link to it, not contain it.

对于更复杂的偏好设置集合，设置页面或面板比将所有内容塞进工具栏更简洁。工具栏应链接到该区域，而非包含它。

Typography and Visual Treatment

排版与视觉处理

Global toolbar controls are secondary UI — they should not draw the eye away from primary content.

Font size: 13–14px — deliberately smaller than body text (14px maximum per the type scale)
Colour: muted — use a secondary text colour (
```
--color-text-secondary
```
), not the primary text colour
No bold — regular weight only
Compact spacing — tighter padding than primary navigation items
Separator — a
```
|
```
or thin vertical rule between adjacent controls (language | currency) keeps them grouped without using full button chrome

css

.toolbar-control {
  font-size: var(--text-sm);       /* 13–14px */
  color: var(--color-text-secondary);
  font-weight: 400;
  padding: 4px 8px;
}

全局工具栏控件是次要UI元素——不应将用户的注意力从核心内容上吸引走。

字体大小：13–14px——故意小于正文字体（根据字体比例，最大为14px）
颜色：柔和色调——使用次要文本颜色（
```
--color-text-secondary
```
），而非主要文本颜色
无粗体——仅使用常规字重
紧凑间距——比主导航项的内边距更紧凑
分隔符——相邻控件（语言 | 货币）之间使用
```
|
```
或细竖线分隔，无需使用完整的按钮边框即可将它们分组

css

.toolbar-control {
  font-size: var(--text-sm);       /* 13–14px */
  color: var(--color-text-secondary);
  font-weight: 400;
  padding: 4px 8px;
}

Interaction Pattern

交互模式

Global controls typically use a compact dropdown — clicking the label opens a small popover or select with the available options.

Show the current value as the trigger label:
```
EUR ▾
```
,
```
EN ▾
```
Use a flag icon + language code for locale, or currency symbol + code for currency
Keep the option list short — if it exceeds ~20 items, add a search input inside the dropdown
On selection, apply immediately and confirm with a brief status update (toast or inline update) if the change has a visible effect

全局控件通常使用紧凑下拉菜单——点击标签会打开一个小型弹出框或选择器，显示可用选项。

将当前值作为触发标签显示：
```
EUR ▾
```
、
```
EN ▾
```
区域切换器使用国旗图标+语言代码，货币选择器使用货币符号+代码
选项列表要简短——如果超过约20个选项，在下拉菜单内添加搜索输入框
选择后立即应用设置，如果更改会产生可见效果，需通过简短状态提示（提示框或内联更新）确认