怎样使用边框、圆角与层级？

用分隔和叠层表达内容关系，圆角与阴影保持有规律、有用途。

边框、圆角和阴影帮助用户辨认部件边界与前后关系。它们应有明确用途，让页面结构清楚，而不是让每个区域都抢眼。

先记住这几件事

• 边框 是部件周围的线，可说明范围或分隔内容。
• 圆角 是把直角做成弧线；同类部件采用有规律的处理，具体弧度由项目决定。
• 视觉层级 是信息在注意力上的主次； 叠层 是一个区域显示在另一个区域上方。
• 阴影可提示菜单或浮层悬在内容上方，但不是所有卡片都需要阴影。

阴影表达前后关系见 Spectrum 阴影指南 ；嵌套圆角的协调见 Spectrum 圆角指南 。

决定分隔方式的流程

分隔处理的示意

以下是教学场景，没有规定统一圆角或阴影数值。

用一个例子走一遍

用户打开“更多操作”菜单时，团队让菜单出现在按钮附近，并通过边界和适当阴影区别于列表。再检查菜单没有遮住关键提示、窄屏仍能读完整。关闭菜单后，页面恢复原来的结构。

边界与常见误解

阴影不会自动赋予元素点击功能；能否操作需要明确的部件行为。圆角更大也不代表更好用。过多分隔会让页面碎裂，应先判断哪些内容需要分组，再决定外观。