1．模式简介
手风琴布局与标签页布局都涉及了同一个概念，即将大量的信息压缩到某一小块区域内显示，从而使用户可以在有限的屏幕区域里更加快速地进行信息定位。设计者可以将信息按不同类别进行划分，并将划分后的内容分别置于水平或垂直组织的区块内，用户可以通过点击等操作从一个区块滑向另一个区块，并能看到对应内容的实时转换。之所以被命名为手风琴布局，是因为这一过程和手风琴的推拉过程有点相似。
2．应用场景
在实际应用中，经常会有大量的信息条目或功能列表需要通过有限的区域来展示给用户，当这一数量超过一定值时，采用普通的布局方式将使用户被淹没在这些信息中，并可能需要通过滚动条来逐个浏览过滤这些信息。这样一来，对设计者的问题就演变为：能否为用户提供一个自动过滤机制，让用户可以通过某些信息摘要进行选择，使得在这有限的区域内仅显示其需要的内容。在这一场景下，我们可以考虑采用手风琴布局。图2—13就是一个使用手风琴布局的实例。
手风琴布局结构通常分为两个部分：用于区分各类内容的标签目录（图2一13的A部分），以及其下的具体内容（图2．13的B部分）。作为导航索引，标签目录的内容应该尽量简洁明了，为达到这一目的，也可以在适当的情况下为其加上图标。具体内容部分一般采用列表方式，如果内容是多层级结构，也可以考虑采用树组件，因尽量避免嵌套多级手风琴布局。
手风琴布局既可以作为一个组件与其他布局（如边界式布局）联合使用，也可以作为一个整体布局在某个特定页面上使用，并且在多数情况下，手风琴布局一般都被设计为纵向展开，这些都可以根据实际的使用场景来进行设计。一般来说，垂直手风琴一般用于显示子菜单选项，水平的手风琴比较适合用于展示较大的内容区域。图2-14就是一个采用横向手风琴布局的实例。
……
展开
