跳至主要内容

抽屉详情页

针对详情信息较多和主体信息具有强关联的关系,用户在查看详情时可以通过抽屉详情作为主体信息的补充。


抽屉结构

抽屉详情的结构分为四个部分:1.标题栏;2.标签定位栏;3.内容;4.操作按钮。

标题栏

告知用户当前抽屉的主要内容,包括:抽屉标题、关闭按钮。

标题栏文案

与上级页面中点击进入的按钮文案保持一致。

锚点定位

用于快速理解抽屉的结构和定位信息。

注意:标签文案和分组标题的文案保持一致。

操作按钮

当抽屉完成步骤判断操作时一般使用两个按钮,当抽屉仅阅读时候使用一个按钮。

当只有一个按钮的时候使用主按钮。

模态与非模态

模态与非模态的区分在是否强制用户交互,模态化会打断用户的当前操作流程,只有关闭了当前抽屉才可以进行主界面的下一步操作。

模态抽屉

模态抽屉便于用户聚焦完成高度重要的任务或信息且切换诉求低。

蒙层:提供阻断的感知,颜色越深,阻断感越强。

非模态抽屉

非模态弹窗的的阻断性较弱,便于用户在抽屉内外快速切换,且不影响当前页面的操作。

何时使用

  • 抽屉从父窗边缘滑入,覆盖住部分父窗体内容;
  • 用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。