网站目录（导航）设计问题

对於那些架构庞大、层次很深的网站，目录的设计十分之重要。一旦设计得不好，很容易让用户有 lost 的感觉。要如何解决这个问题，小弟至今仍然没有一个完美的解决方法。因此小弟比较几个网站的目录设计手法，并在此跟大家分享一下所得。

设计师常常会以顏色、字体、位置大小来突出当前被选中的选项。但对於多层次的网站，可能会有多过一个选项被选中的情况。虽然设计师可以同时突出多个项目，但当被突出项目太多的时候，反而会造成用户认知的困难。正如 Digg 网站的顶部目录（左方），分為上、中、下三列；三列中又包含五种不同功能的连结，分别為

Join Digg / About / Login
Article category
Popular / Upcoming
Type of digg (News / Videos / Images)
Customize (因大小关系，不在截图中)
这数目我觉得已经很夸张了，当中更可同时有三个项目被选中（Word & Business, Videos, Popular），并运用了 7 种顏色（2种蓝、4种不同深浅的绿、红式的 icon），如此复杂的设计应该很难為人一下子理解吧。Digg.com 的其他细节都做得很到位，唯独是目录太过疯狂了一点。再看看 funP 的目录又如何:

相较之下，我觉得 funP 的目录清晰得多了。不是因為 funP 的功能比较简单，实际上， funP 网站的层次比 Digg 更加深、功能更加多。funP 的目录看上去更清晰，全因它把不相关的功能/连结都分别放在不同地方，而不像 Digg 般都堆在一起。看看下方两张图就会明白:

这个是 Digg.com 的，所有色块都在上方。

当然，说到架构庞大，应该没人及得上 Yahoo! 了。下面是 Yahoo 的做法

[Before] Home page

[After] Content pgae

Yahoo 向来都会為不同服务设计一个独立的页面，而不是一种风格套用到整个网站中。所以如果用户想转换服务，必须点左上角的连结。你不会在一个子网站的目录中找到其他服务的身影。虽然比较麻烦，比每个子网站的架构都会因此简明得多，funP 亦是用此方法。另外 Yahoo! TV 的目录设计新颖，结合了 tab、breadcrumbs 於一身，虽然尚未被广泛接受，但仍然很值得参考。

无论如何，有些问题是难光靠设计便能解决的。如果网站的架构混乱，再好的设计也是难以起死回生，反之亦然。君不见 Apple.com 的网站只有 6 个 button 吗？