global-toolbar-controls

Name: global-toolbar-controls
Author: dembrandt

github.com/dembrandt设计与 UI174854 次安装1 周前更新

关于 global-toolbar-controls

这项设计技能介绍如何放置和呈现影响整个产品的控件，例如语言、货币、地区和主题选择器，涵盖分组、紧凑下拉交互与检查要点。

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dembrandt/dembrandt-skills --skill global-toolbar-controls

安装后在 Claude Code 中输入/global-toolbar-controls确认已加载。

全局控件会影响整个产品体验，但不是用户的主要任务。用户偶尔才会用到——每次会话至多一次——因此不应在视觉上与主导航或内容争夺注意力。

常见的全局工具栏控件：

这些控件不同于用户账户设置（位于个人资料菜单中），也不同于上下文设置（位于其影响的功能旁边）。

这份列表中有两类控件：一类改变显示的内容（地区、市场、租户），另一类改变内容的呈现方式（语言、主题、单位）。应将两类控件分开排列。将偏好设置横向排列，而不是纵向堆叠。每增加一项偏好设置，纵向堆叠都会变高，还会让个人设置与数据选择控件具有同等权重。横向排列则可以容纳后续偏好设置，而不增加高度。

位于主页眉上方或其中的次级行，靠右对齐。电子商务和国际化网站上很常见。

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

与主页眉内联，放在最右侧，使用较小字号和尽量低的视觉权重。

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

适用于用户设置一次后很少再调整的控件。大型国际化网站（Airbnb、Apple）的页脚中经常会出现语言和地区选择器。如果控件确实很少使用，这种放置方式就很合适。

对于较复杂的偏好设置，与其把所有内容都塞进工具栏，不如使用设置页面或面板。工具栏应提供通往该页面的链接，而不是包含设置本身。

全局工具栏控件属于次要 UI，不应将用户的注意力从主要内容上引开。

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

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

将当前值显示为触发标签：EUR ▾、EN ▾
语言控件应以代码或名称显示当前语言，不能只显示地球图标或旗帜。地球图标代表类别，而非当前状态；旗帜代表国家。选项应使用语言的自称名称（如“Suomi”“Deutsch”）：需要使用此控件的读者可能看不懂控件所翻译成的语言
货币：符号 + 代码
地区和语言是相互独立的维度。每个链接和地区切换都应保留当前语言。地区默认值仅作为入口的回退选项
选项列表应保持精简——如果超过约 20 项，应在下拉菜单中添加搜索输入框
选择后立即应用；如果变更会产生可见效果，则通过简短状态提示（Toast 或内联更新）予以确认
持久化的偏好设置也应在所有打开的标签页之间同步。监听 storage 事件并重新加载状态。该事件会在其他标签页触发，而不会在写入数据的标签页触发，因此开发者正在查看的标签页始终会显示正确状态。如果该值会控制首次请求，则应等状态完成水合后再发起请求

若要将旗帜放入圆形或方形图标中，应进行裁切，或使用专为该形状绘制的图案。为图标框明确设置相等的宽度和高度，避免边框、行高或 Flex 容器调整其中一个轴的尺寸；并分别检查渲染后的宽度和高度。

支持 Markdown