...
素材网
7. 手风琴效果（折叠菜单）
折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。
手风琴效果的实例
功能性和大点击区域
Alex Cohaniuc
的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设
计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背
景色。
水平内容滚动
Jason Reed
使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，这是一个水平方向推拉的手风琴（尽管标
签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将
它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。
包含图像和信息的手风琴
Marius Roosendaal
使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一
些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的
信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。
手风琴脚本
8. 超大下拉菜单
导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间
的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信
息，而不需要用户额外的点击。
超大下拉菜单的实例
超大下拉菜单的一个经典例子是 Ruby On Rails Guide的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。
译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）
下面的截图里的投影，我也看不到……
带更多信息的多级菜单
Porsche
对于上面说到的技巧来说，简直是一个完美的例子。Porsche
的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己去看看吧！
在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。
在下拉区块中显示额外信息
Gateway.com
继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸
如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。
菜单脚本
更多资源
你应该也会喜欢（全是英文）：
房地产的VI做起来，就像是在搞艺术
唱片封面设计 | 看得见的音乐艺术
“美味酒廊”VI设计欣赏
美学茶话：读懂齐白石的画，我放弃了画画