按照 Material Design 的文档来说,重量级上是提醒 < 静态消息 < 模态框的。而 antd 将提醒再根据复杂度以及可交互与否区分开了 Message 与 Notification,也就是 Message < Notification < Alert < Modal。
其中,Modal 是打断式的交互,也就是说会使得用户从原本的信息层级中跳转出来;但比起整个页面的结构式转换(如页面跳转、页面渲染突变等)依然要轻得多——用户取消弹窗即可回到原来的流程中。
再看信息层级高度,可以直接理解为 zIndex,Material-UI 上的设计是以下值:mobile stepper(移动设备起步): 1000
app bar(应用栏):1100
drawer(抽屉):1200
modal(浮层):1300
snackbar:1400
tooltip(提示):1500
大致也可以看出来各个组件在信息层级上的位置以及覆盖情况。然而在 MD 的 Elevations (MD 中通常表现为阴影)上展现出来的信息重量上又会跟上面的 zIndex 不同:Dialog: 24
Modal Bottom/Side Sheet / Navigation Drawer: 16
Floating Action Button(pressed): 12
Standard Bottom/Side Sheet / Bottom Nav/App Bar / Menu / Submenu / Card: 8
Floating Action Button(resting) / Snackbar: 6
Top AppBar (scrolled state): 4
Top AppBar (resting elevation): 0 or 4
Refresh indicator / Search bar (scrolled state): 3
Contained button (resting elevation): 2
Search bar (resting elevation) / Card (resting elevation) / Switch: 1
Text button / Standard side sheet: 0
这些信息层级以及悬浮层级可以作为参考,实际应用都得依据具体的信息架构以及业务逻辑进行调整。通常这是由设计语言来决定的,以此让用户有更一致而可预测的用户体验。
MD 的层级设计的灵感最初来源于自上而下的光线透过层叠的纸张而产生的阴影,参考这种思路的话,具体使用上是从最底部一层一层地加上去的,而且应该避免过多的层级,挺多设计语言甚至会主动削减层级,而将上层的信息尽可能地下放到更自然的低层级上去,而缩减其中的层级数量以及最大高度。
比如 Message / Snackbar / Notification, 其实更多时候都是因为技术上的便捷性而使用,大多数的使用场景其实转变为 Inline 的 Messaging 其实都会有更好的体验,比如按钮的状态变化、信息的展开,布局的平滑变化等等。也有经验之谈是页面跳转以及模态框这种交互能避免就避免,后果则是添加了页面的复杂度与维护难度。
所以总的来说,在使用上,在极致的用户体验以及开发维护成本之间选择一个平衡点即可。