Felix DingAn old-school Web designer who loves alternative rock, classical guitar, reading and writing.

在UI设计中，经常要表现事物之间的层级关系，如"国家－省份－城市－乡镇"这样的关系，我大概总结了一下目前已有的表现方式。

一、连动菜单

连动菜单大体有两种实现方式。一是在页面载入时一次性把所有相关的数据读取出来，然后通过Javascript在客户端连动；二是借助Ajax技术，当上级菜单的项目被选择好后，再在后台读取下级菜单项的内容。

连动菜单的优点在于占用的空间较少，技术实现相对简单，使用上比较广泛，因此从操作习惯上讲，用户更容易接受一些。其缺点也十分明显：

1. 由以前的论述可知，下拉菜单是非常吸引眼球的表单元素。为了表现多层关系，在表单中过多的使用下拉菜单会在一定程度上削弱其它界面元素的重要性；

2. 连动菜单仅能表现层级关系本身，而很难表现每一层的属性和内容。比如我想对每一层进行某种操作，或者显示某层下面大量的内容，连动菜单就很难做到；

3. 无论是使用纯粹的JS，还是借助Ajax技术，都在可用性上存在潜在的问题。在层次较多的情况下，前者的实现效率很难保证；后者则常常出现响应延迟的问题。

二、浏览视图

浏览视图是Mac OS X中组织和管理项目的一大特色，其优点是用户对操作流程中做出的选择较为清楚，并且较好的表现了上下级的逻辑关系，淘宝网采用了类似的设计（如下图）。但 当下级层次的数量无法事先确定时，采用这种设计会迫使用户界面横向拉伸（就像OS X中的一样），这不仅会使得用户界面的尺寸变得很宽-甚至超出了屏幕的范围，还造成了用户视觉焦点的跳跃性运动，很容易造成视觉疲劳，而且这种动态的横向 伸展还使得用户很难定位之前选择的目标。

简言之，个人认为使用浏览视图时一定要谨慎考虑，避免出现上文中提到的问题。

三、标签页

标签页大概是最常见的一种表现层级关系的形式了。在一个层级关系无比复杂的系统中，设计合理的标签页可以在很大程度上解决恼人的用户"迷路"问题。可惜我经常在网上看到理解不了的、貌似是标签的东西……

四、列表视图

这一设计也是OS X中的一大特色（当然你也可以理解为这是"树状结构"的另一种表现形式），目前在网页上还不多见，印象中只有Yahoo!在其UI Library中有所引入。