抽屉详情页
针对详情信息较多和主体信息具有强关联的关系,用户在查看详情时可以通过抽屉详情作为主体信息的补充。
抽屉结构
抽屉详情的结构分为四个部分:1.标题栏;2.标签定位栏;3.内容;4.操作按钮。
标题栏
告知用户当前抽屉的主要内容,包括:抽屉标题、关闭按钮。
标题栏文案
与上级页面中点击进入的按钮文案保持一致。
锚点定位
用于快速理解抽屉的结构和定位信息。
注意:标签文案和分组标题的文案保持一致。
操作按钮
当抽屉完成步骤判断操作时一般使用两个按钮,当抽屉仅阅读时候使用一个按钮。
当只有一个按钮的时候使用主按钮。
模态与非模态
模态与非模态的区分在是否强制用户交互,模态化会打断用户的当前操作流程,只有关闭了当前抽屉才可以进行主界面的下一步操作。
模态抽屉
模态抽屉便于用户聚焦完成高度重要的任务或信息且切换诉求低。
蒙层:提供阻断的感知,颜色越深,阻断感越强。
非模态抽屉
非模态弹窗的的阻断性较弱,便于用户在抽屉内外快速切换,且不影响当前页面的操作。
何时使用
- 抽屉从父窗边缘滑入,覆盖住部分父窗体内容;
- 用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。