## What 我们常说的，列表+详情在一个页面上。 ## Why - 减轻了用户负担。用户无需在面板之间长距离移动，例如进入一个全新的详情页。会导致额外的点击。 - 减轻了视觉认知负担。当一个新的页面到来，或一个新的模态窗口来查看详情，用户突然需要更多的注意力，来查看所看到的全新页面。如果大部分区域保持不变，知识右侧出现了详情，用户可更加关注变化的小区域。页面上不存在上下文切换。 - 减轻用户记忆负担。例如正在查看一份邮件，但详情页没有任何东西提示这个邮件在其邮箱所处位置。该模式可不用在详情和列表来回切换，列表相当于起到了“你在这里”的指示。 ## How - 为了更符合视觉流，列表可以在左边或者上边，Gmail 就是这么做的。 - 在列表上仅需点击 1 次，就可以切换不同的详情，体验更加可以支持快捷键。[[快捷键交互设计]] - 用明显的视觉效果，突出所选择项。 - ## 案例 ### 系统级  ### Gmail  ### Broker SaaS