app-shell

应用外壳

外壳是用户导航时不会变化的屏幕部分：顶部横条、横条中的内容，以及在功能繁重的工具中，底部的一条区域。它们之间的所有内容都属于应用。外壳很小，但其重要性远超尺寸所暗示的程度——它是用户在每个工具的每个屏幕上都会看到的唯一部分。

外壳属于整套应用，而非单个应用

一家公司很少只有一个应用。它会有一个公共网站、一个商店、一个客户门户、一个内部管理工具，还有一个老旧系统，没人想碰，却有很多人依赖。用户在工作日里会在这些应用之间切换，而每次切换，都可能让人感受到这是一家统一的公司，也可能打破这种感觉。

规则：顶部横条是整套应用的公共元素。应用拥有它下方的一切。 如果某个应用为了符合自己的风格而重新设计共用横条，就擅自改动了不属于自己的东西——横条的职责就是成为唯一不变的参照点。

但 固定 不等于 内容齐全。外壳可以只保留在此处尚未解决的职责；留下的部分则保持一致——位置、行为和措辞都相同。内容数量可以灵活变化，但呈现方式不能变。

这也明确了一个原本容易由各团队各自争论的层级问题。凡是范围上位于应用之上的内容，都属于外壳；凡是位于应用内部的内容，都属于应用自身的导航。

位于外壳中（应用之上）	位于应用自身的导航中（应用内部）
租户／客户／组织	版块、模块、页面
地区或市场	筛选器和视图
语言和区域设置	实体级操作
身份、角色、退出登录	功能设置
应用启动器	在此工具内搜索

如果某个控件会改变你在整套应用中看到的内容，它就是外壳控件。如果它只会改变你在此工具中看到的内容，它就不是。

外壳可以精简到什么程度

如果子应用只能从其父应用进入，那么它只剩下一项整套应用级的职责——提供返回路径。因此，外壳可以简化为一行：一个标签、一个图标，与内容使用相同的背景色，不设横条，也不加装饰。外壳原本承载的其他内容都已在上游处理过，重复呈现只会造成干扰。

入口路径决定了适用条件，这就是全部规则：

• 只能通过父应用进入——提供返回入口就够了。
• 可以直接进入或横向进入——例如通过聊天中的深层链接、书签、电子邮件按钮或其他工具进入；此时返回入口没有明确的目标，因为浏览器历史记录不等于层级关系。应改为提供主页入口，而且仍然只需一个图标。

根据目的地命名，而不是根据操作命名。 当历史记录与层级关系不一致时，← Dashboard 仍然准确，← Back 则不然。返回是历史记录的概念，向上是层级关系的概念；把二者混为一谈的外壳，会在用户最不知所措时误导他们。

应用启动器

当用户可以使用三个以上的工具时，外壳就需要一个启动器：顶部横条中的一个图标，用于打开完整工具列表。它取代了书签文件夹，也取代了两年前某人粘贴在聊天中的链接。

• 展示用户可以访问的所有工具，不展示他们无法访问的工具——如果启动器列出了会返回 403 的工具，用户就会不再信任它
• 使用人们口头称呼工具的方式命名，不要使用内部项目代号
• 标明会在新上下文中打开的工具——一个不愿采用外壳视觉风格的 2006 年系统，应低调地说明这一点，而不是让用户措手不及
• 先按用户的使用顺序排列，再按字母顺序排列——不要按照谁构建了什么的组织架构来排列

租户、环境与颜色陷阱

在多租户或多客户工具中，用户必须始终清楚屏幕上显示的是谁的数据。这里有两个相关控件，但有一个重要区别。

环境值得用颜色标示。 生产环境、预发布环境和本地构建必须做到不可能混淆，因为混淆的代价是对真实数据进行真实更改。使用彩色条带或着色栏是合适的做法；这也是少数应该有意打破界面整体沉静感的地方之一。

租户则不值得。 按客户为整个 UI 着色是个诱人的想法，但会让每个客户都觉得自己用的是不同的产品，破坏品牌；一旦客户使用的颜色不是你选定的颜色，还会悄然损害对比度。应在界面框架中用标签显示租户——名称，以及可用的话，头像或姓名首字母——而不是将其设为主题。如果租户确实需要自己的视觉标识，那应当是在产品层面一次性做出的白标决策，而不是按会话着色（[[brand-visual-language]]）。

无论选中了谁，界面框架都要清楚且持续地显示这一信息；破坏性操作还应在确认步骤中再次标明（[[ui-context-and-scope]]）。

状态栏

重型工具——调度面板、数据管理器、人们会连续使用六小时的编辑器（[[operational-expert-tool-ui]]）——适合在底部设置一条显示环境状态的横条。它回答用户原本需要四处查找才能得到的信息：

连接与同步状态 · 环境 · 当前筛选条件及其匹配的记录数 · 选中项数量 · 上次保存时间 · 此处最重要的一个键盘操作提示

状态栏是环境信息，因此应保持低调：与界面框架其他部分使用相同的小号、柔和字体，不加动画，除非确有问题，否则不使用颜色。闪烁的状态栏就像放错位置的通知（[[notifications-and-recovery]]）。

消费级产品几乎从不需要状态栏。如果用户不会在工具中停留足够长的时间，以至于养成低头查看的习惯，那么这条横栏只是在白白占用一行屏幕空间。

侧边栏

单个应用通常完全没有顶部栏：左侧的侧边栏就是整个界面框架。此时，侧边栏要同时承担两项职责——上表中的整个系统级控件，以及应用自身的各个区块——并且必须让它们看起来泾渭分明。区块放在中间，必要时可以滚动。整个系统级控件放在固定于底部的页脚中，这样无论应用增加多少区块，用户都能在同一位置找到它们。整个侧边栏都应固定在视口中：长页面在它下方滚动，导航始终不会消失。

按功能排列页脚内容。 先放范围（租户、位置、客户——决定应用显示什么的控件），再放偏好设置（语言、主题——决定应用如何显示内容），最后放身份和退出登录，并用分隔线隔开。范围和偏好设置是不同的决策，混在同一行会显得不妥；偏好设置可以共用一行，因为它们体积小，不会增加高度。

将 Logo 放在侧边栏顶部。 展开时显示组合标识，折叠时仅显示图标，并留出品牌要求的安全空间。缩小 Logo 的原因是内边距，因此应根据安全区域确定内边距，而不是随手选个整数。

Logo 应链接到首页。 在使用侧边栏的应用中，Logo 是返回入口的唯一方式，因此它应是链接，而不是图片。应随主题切换资源，而不是对其应用滤镜；为深色侧栏设计的 Logo 往往经不起反色处理。

身份信息只放在一个位置。 要么放在侧边栏页脚，要么放在页面标题栏，绝不能两处都放。侧边栏是唯一常驻界面元素时，将其放在页脚；如果每个页面本来就有标题栏，而页脚更适合用于范围控件，则将其移到页面标题栏。

显示登录即可解锁的内容，隐藏角色权限解锁的内容。 用户登录后即可访问的项目应保持可见，并用不显眼的标记提示，因为它是一种邀请。受角色权限限制的项目则应移除，因为一个会返回 403 的链接会让用户不再信任整个导航。

折叠为图标栏

折叠为图标栏的侧边栏，会将内容列的宽度还给内容区域（减去图标栏宽度）。对于画布或表格工具，这决定了你是能看到作品，还是只能滚动浏览。以下四条规则能让图标栏真正实用，而不只是变窄：

• 选择单靠图标就能传达含义的图标。 图标栏折叠后，图标就是全部的操作提示，因此应以易于识别为选择标准，而非装饰性。普通圆圈不是导航项。将标签保留在 DOM 中，作为屏幕阅读器文本，并在 title 工具提示中重复显示。
• 隐藏分组标题，不要缩小它们。 分类标题没有图标，也无从折叠。隐藏它才符合实际；留下一个孤零零的“ADM”并不合适，而视觉上隐藏的标题会宣告图标栏已不再显示的结构。
• 窄视口下默认折叠，然后遵从用户的选择。 在平板宽度的视口（约低于 1024px）下，图标栏是更合适的默认状态。一旦用户选择了某种状态，就应在所有地方以该选择为准，并跨会话保存——每次重新加载都会弹开的侧边栏，会让用户失去信任。还要让打开的标签页保持同步，避免两个窗口互相覆盖对方的偏好设置。
• 将切换控件放在边缘，与内容自身的控件保持距离。 横跨接缝、一半位于侧边栏上、一半位于内容区域上的切换控件，无需寻找就能发现。测量内容区域底部凸出的元素——画布控件、浮动按钮等——并将切换控件放在较高的一组元素上方。由于它同时位于两种背景上，悬停状态必须是不透明的；半透明的悬停效果会覆盖两侧背景。

在手机上

在手机宽度的视口（低于约 768px）下，侧边栏不会变窄，而是完全隐藏，并由抽屉取代（[[modal-and-overlay-patterns]]）。抽屉与侧边栏相同——徽标行相同、条目相同且顺序相同、页脚也相同——这样用户在不同设备上始终只需记住一种模式（[[responsive-paradigms]]）。变化的是入口：在角落放置一个浮动触发控件，并将其置于安全区域内边距之内，避免被主屏幕指示条遮挡。抽屉会遮罩页面、锁定正文滚动，并在导航后自动关闭；轻点后仍保持打开的抽屉，会让用户不得不自行关闭。

活动状态应通过背景变化和字重表示，绝不能只靠颜色（[[status-colors-and-errors]]）。浅色应用中采用深色图标栏完全没问题，而且很常见，但它需要自己的表面令牌——基础、凸起、凹陷——而不是借用内容区域的表面令牌（[[surface-separation]]）。

检查清单

• 在整个系统中的每个应用里，外壳的位置、行为和措辞是否都保持一致？
• 如果外壳有所精简，这种精简是否由入口路径决定，而非取决于某个应用的偏好？
• 返回入口是否明确说明了目的地，而不是只写“返回”？
• 每个控件是否都位于正确的层级：系统级控件位于外壳中，应用级控件位于应用自己的导航中？
• 启动器是否只列出当前用户实际可以打开的工具？
• 当前租户是否以标签说明，而不是通过主题色来表示？
• 环境（生产 / 暂存）是否一目了然？
• 在繁重的工具中，状态栏是否承载环境状态信息，并保持简洁？
• 在带侧边栏的应用中，系统级控件是否位于固定页脚中，并按范围 → 偏好设置 → 身份的顺序排列？
• 徽标是否链接至首页，并随主题替换，而不是反色处理？
• 活动项是否通过背景和字重标记，而非只依靠颜色？
• 折叠为图标栏后，每个条目是否仍能通过图标辨认，同时保留供屏幕阅读器读取的标签？
• 折叠偏好设置是否会在重新加载和不同标签页之间保留，并且只在窄视口下默认折叠？
• 在手机上，抽屉是否与侧边栏相同，是否由适配安全区域的触发控件打开，并在导航后关闭？
• 是否为需要登录的条目显示了低调的标记，并移除了受角色权限限制的条目？