堆栈

堆栈是一种收起的列表,以层叠形式呈现通知、卡片等内容,每次只显示一项。

Glimmer 内容堆栈

设计原则

堆栈属于容器组件,因此与卡片、列表共享以下设计原则。

组织相关内容:将相关信息与操作组合成一个容易理解的单元。

聚焦且清晰:以清楚、集中的方式呈现内容。

适应多种内容:可以展示卡片,也可以展示通知。

表现一致:保持一致的视觉结构。

使用与布局

堆栈既能让用户知道列表中收起了多个项目,又能减少视野里同时出现的视觉元素。它提供两种变体:

  • 卡片堆栈。
  • 通知堆栈。

两种变体都是容器组件,外观和行为应基本一致。容器内置分页逻辑,负责组织这些内容。

浏览堆栈

用户沿触控板前后滑动或拖动,即可浏览堆栈。每次滚动只切换一个项目。

逐项浏览内容堆栈
堆栈一次切换一个项目。

响应触控输入时,堆栈可以通过垂直移动逐项显示内容,也可以转为列表,同时展示多个元素。列表应采用默认的容器与焦点状态。

堆栈用深度区分顶部与下方项目

用深度表达焦点

下方项目的深度为 0,最上方项目的深度为 +2。

组件构成

作为分页组件,堆栈始终以收起状态呈现。除非内部嵌套了一个可用按钮,否则最上方项目始终是主要焦点,并以更明显的边框和深度突出显示。

到达堆栈首尾后继续滑动,会出现标准拉伸动效,提示用户已经到达起点或终点。

收起的内容堆栈及其边界反馈

自定义

堆栈内置的遮罩、分页行为和动效不支持自定义;可以自定义的是堆栈中的内容。

滚动时保持各界面元素的不透明度不变,减少视觉噪声。
建议:滚动时保持各界面元素的不透明度不变,减少视觉噪声。
在滚动时改变堆栈项目的不透明度。
避免:在滚动时改变堆栈项目的不透明度。