导航设计 - UCD大社区

页面导航设计的快速验证方法

able — 2012-09-02 22:14:39

著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划，将面包屑撒在来时的路上，虽然当月亮升起时，面包屑被鸟吃掉了，但是现在的互联网设计师们从这个故事中找到了灵感，设计出不会被鸟吃掉的固定“面包屑”。

图1:互联网上各种各样的面包屑

汉赛尔和格莱特为了在森林中找到回家的路，撒下了面包屑，这是一种导航方式，如果没有被鸟吃掉，无论走到森林的任何地方都可以知道如何从当前的位置走回家去。在互联网信息爆炸的今天，互联网的设计师们在网页上设计出各种各样的固定面包屑（如图1）也是为了不让用户迷失在信息的大海中，给予用户的一个导航的方式。Apple是大家公认的用户体验最好的设计公司，我们来看看apple.com是用什么方式完美地完成用户导航需求的。

页面导航原则

图2:apple网站itunes新功能介绍的面包屑

图2是apple.com上面itunes新功能介绍的面包屑。一共有两个元素：节点标签和箭头。

节点标签：有apple的logo、itunes和what’s new。且节点标签有不同的样式，what’new用了Bold的样式。每个节点标签中间都用箭头隔开。箭头：是一个有方向指向的符号。

面包屑这种方式完成导航需求的方式为：

1、通过最后一个节点标签告知用户当前位置；2、面包屑整体从左到右告诉用户来到当前位置的固定路径；3、除了当前页面的节点标签，其它节点标签均可点击，可以让用户回到上一级页面（可以回到最初起点的作用）。通过这三点任何用户都不会在网站中迷失方向。

图3: apple网站itunes新功能介绍的页面

然后我们再对照这个面包屑所在的页面（图3）从上往下的各种导航方式的元素进行分析，看页面除面包屑之外是如何自我完成导航需求的：

1、首先导航菜单栏上的logo 告诉用户在apple的网站上，导航上的菜单分类告诉用户这个网站一共有多少个维度，菜单上被选中的Itunes ，告诉用户当前处于itunes的菜单维度下。

2、接着是itunes的页面导航栏，大大的标题itunes 告诉用户下面的内容都是讲itunes，右边的itunes的页面菜单导航告诉用户itunes页面的内容分类，其中不一样状态的what’s new 告诉用户目前选中的是这个类容，下文内容是在这个分类下的。

3、最后是这个页面的标题What’s new in iTunes ,表示当前页面的内容是按照这个标题全面铺开内容。

上述导航元素也清楚地告知了我们1、用户当前位置（当前页面标题）；2、来到当前页面的固定路径（从上往下的导航路径布局和元素）；3、如何返回上一级页面（每个导航菜单均可点击，除了当前页面标题）。其中涉及到3级导航：apple网站主导航、itunes类别导航和what’s new 内容导航，每一级导航都有导航菜单和被选中的状态。将每一级导航的起始点用箭头链接起来，如图3所示→→，形成了一个和实际存在的面包屑一模一样的页面路径。告知用户是如何来到这个页面的。

从上述页面中的面包屑样式分析和页面自己的内容分析，可以看出整个页面里所有的导航方式所要传达描述的信息是一致的，那么我们可以归纳出页面导航原则：1、告知用户当前位置；2、告知用户来到当前页面的固定路径；3、可以让用户返回上一级页面。

页面导航原则指导设计

1、符合页面导航原则的设计：

图4：Nestle.com

图5：Nestle.com

我们用导航原则来检验nestle.com的导航设计，这个页面通过页面标题“baby foods”告诉我们当前位置，通过网站logo，二级导航栏中选中的“Brands”，左侧三级导航栏选中的“Baby foods”，告诉我们这个页面的固定路径是从home，选择brands分类，再选择Babyfoods。且导航栏的每一个分类都可以被点击，可以让用户返回到上一级。这个页面完成了导航所需要的所有信息传达元素。我们也可以明显地找到页面中的：→→的页面路径。图4是根据它的面包屑的节点标签元素，将页面中的相同元素找出来，这些元素都已比较明显的样式表示选中，与相同信息不同状态的内容区分开来，导航布局从上而下形成了包含与被包含的关系，图5是将这些选中的元素用箭头连接起来，这样就找到了页面中的的页面路径。

图6：amazon.com

图6是在amazon浏览到web navigation的搜索结果页。图中将隐藏的页面路径和实际存在的面包屑都标示出来了。面包屑的每个节点标签在页面的其它导航方式中都有被选中的状态，且自上而下，从外到内形成包含与被包含的关系，从而形成一个隐藏的页面路径。这里使用的导航方式和前面都不一样，不止用了导航菜单，还使用了树形的级联菜单的方式。当前页面也不是用页面标题，而是直接用的实体面包屑的最后一级节点标签的强化样式。这个页面通过不同的方式完成了用户的导航需求。

2、其它符合页面导航原则的新型样式：

图7：Booreiland

图8：John Lewis购物网站

图9：wowhead面包屑

3、不符合页面导航原则的设计：

图10：meilishuo.com

Meilishuo的一个杂志内容页面，没有实际存在的面包屑，那么我们寻找其它导航方式，如上图网站logo、导航栏、页面标题等，如箭头所指，我们会发现页面路径少了了一段。我们不知道从首页去了什么分类，然后来到“所在杂志”。这样用户想找杂志所在的上一分类就找不到了，回不到上一级。这个页面的导航原则就没有满足，用户在此处就会迷失。它主要少了主导航条没有选中当前所在内容分类，从而让路径断了一节。

小结

设计师的创意是无限的，但是用户的导航需求是固定的，任何样式，只要能够符合导航原则的几点要求，就可以完成用户的导航任务。更加简便的方法就是只要能在页面元素中找到这个页面的页面路径，就相当于满足了导航原则。这样的原则和方法既可以用来检验我们的设计是否达标，也可以用来指导我们对导航方式的设计。

相关话题：导航设计源地址：http://www.aliued.com/2012/08/30/1135/

Web导航设计二三事

wujunlan — 2012-07-05 10:22:38

导航在Web中扮演一个回答用户“我是谁？”“我从哪里来?”“我到哪里去”的角色。好的导航是一个网站的主要基石。而在开始设计一个网站或者改版一个网页时，它往往是设计师第一个面临的挑战。

01 导航设计之信息架构

信息架构决定了导航的定性，在设计之前整理清楚内容的信息架构，才能最大程度发挥导航的梳理网站结构、有效传递信息功能。网页结构一共有多少层级关系？是否存在上下层关系？各类别标签之间的关系是并列关系还是相关联的？各子级项中是否存在可合并项？等等。要避免单纯地按照简单的逻辑关系，甚至按照业务关系把页面导航细分到3级甚至4级或者产生出一些和用户认知不相符的信息类别。每增加一级导航就增加一个认知维度，每增加一级使得整个导航系统复杂度增加数倍，不仅用户的操作将成倍的增加，给网页后期维护的带来极大的成本。以下两种图示，就能清楚地看到相同数量页面的不同放置方式给用户带来不同的体验。

在web交互设计中存在“3次点击”的原则，用户在3次点击后无法找到想要的信息或完成某个功能时，便会选择放弃。所以对于导航来说，最基本的应该是让用户知道当前的页面有哪些内容，并且知道自己的目标内容在哪里。导航设计的广度和深度的区别展示，一般来说，广度比深度的效果要好。在深结构的各级别间选择更容易迷失方向，甚至可能迷路。但也不要在广度上铺的过广，任何时候把太多内容show出来都会吓退用户，让他们被迫患上了“选择综合症”。

为了更明确用户的认知或者甚至说在设计师面对改版等需求时，有助导航的创建和完善，常用的一个方法是卡片分类法。卡片分类法的进行方式很简单，首先准备一些大小相同的空白卡片，将信息写在不同的卡片上，让参与人员自行分类，也可有适当的解释性引导。每次测试的人数最好在2到4个之间，人数过少的话使用者之间不易产生讨论，人数过多则会让讨论变得混乱，场面不易控制。这是一种在在网站或其他规划初期常用的一个测试方法，能从中了解真正符合用户习惯的信息分类，找到之间的认知差异，作为调整架构的依据。

02 导航设计之交互样式

Web导航的最重要的作用就是将网站的内容信息友好地展示给用户。在确定好网站的信息架构后，应当按需所取适当的导航样式。而不是不管三七二十一，都来个tab式导航，觉得没有个横梁式的导航都不好意思说自己在做网页。首先我们了解一些常用的导航形式：

1. 分步导航（Step navigation）通常由文字标签和箭头组成，也要伴随着向后退的链接。适用于环环相扣的页面流程，如向导，支付，在线阅读等，为一个接一个的页面提供访问。

（图示出自：Google.com 注册页面）

2.分页导航（Paging navigation）经常出现在搜索页中，一次可展现的结果数目通常有限制，超出限制的结果将在新页面展现。最简单的分页导航就是带页码的分布导航。

（图示出自：阿里巴巴我的阿里）

3.面包屑（Breadcrumb trail）展示了用户访问网站的路线，由一大串的元素和节点组成。每个节点都与指向先前访问过的页面或父级主题相连，节点间以符号分隔，通常是大于号（>）,冒号（：）或者竖线（|）

（图示出自：Apple.com）

4.树状导航（Tree navigation）允许针对层级结构的访问。往往包含加号和减号或小箭头的小图标来展开和收起下级节点。

5.网站地图（Site Map）为网站提供了自顶向下的迅速总览。适用于有大量内容和广泛用户群体的网站。因而应该比较简单易于扫视。其中的标签要与页面中的标题相符。在搭建网站地图时需要考虑其颗粒度，一般来说只需展现网站结构中的两到三级，提供到页面的链接。页脚网站地图，是现今大中型网站采用的方式，把网站地图一部分显示在页面底部，同时包含一个指向完整地图的链接。

（图示出自： Flickr.com）

6.Tab式导航（Tabbed Navigation）相当于导航条+Tab。导航条最简单的形式就是把超链接连成一行，有时用竖线分隔开来。而Tab式导航将tab控件结合到导航条上，使得网站内容结构化，多重化。

（图示出自： Motorola.com）

Amazon.com可能是第一个运用tab式导航的大型电子商务网站，Amazon目前线上运用的是垂直菜单+动态菜单的形式。

（图示出自： Amazon.com 1998）

7.垂直菜单（Vertical Menu）通常置于网站的左边或者右边的一列链接。垂直菜单较横向的导航更灵活，易于向下扩展，且允许的标签长度较长。

（图示出自： Apple.com）

8.动态菜单（Dynamic menus）也叫浮出菜单，下拉菜单或者弹出菜单。用户须与其产生交互行为，菜单才能显示。常用的交互是鼠标悬停或点击。

（图示出自： Amazon.com）

9.下拉框导航（Drop-down menus）利用下拉菜单的特性，当选定某一项或多个选项，即将用户带到新的页面。

（图示出自： Dell.com）

10.标签云（Tag clouds）所列链接按字母排序，按照标签热门程度确定字体的大小和颜色。标签云的设计者是交互设计师Stewart Butterfield。首先使用标签云的是Flickr。

（图示出自： Flickr.com）

03 导航设计之视觉设计

Apple常常成为设计界追随的风向标，他们的每次视觉的更新或者迭代都会引发互联网的争相模仿。这里，收集了Apple从1997年以来视觉层面更新比较关键的截图，不仿从apple.com中历年的变化来看看导航及网站的视觉体系的迭代。

Apple 1997:

从下面的截图，视觉层面上大家有些难以辨别出它出自苹果。当时界面主要是些文字链组成，导航只有简单的垂直菜单。

Apple 1998:

已初具apple网站布局的风格。简洁明了的视觉风格，上下结构，上部大幅产品banner海报+下部三栏形式的产品展示。

Apple 2000:

第一次采用顶部固定的tab式导航。有几个显著的特点：

1）apple 红色logo，显著标识homepage。

2）横向tab式二级导航

3）白色玻璃质感的导航视觉样式，这种玻璃质感风靡web界许久。

Apple 2001:

导航的视觉和交互形式并没有发生太大的变化，只是将红色的logo换成了蓝色。并延续白色玻璃种感到整个网站界面和控件。

你会发现，包括搜索的按钮等控件都做了圆角玻璃质感的处理，并且配图的外框也否相应地做了圆角的处理。

PS，当年装1000首歌的岁月。。。

Apple 2002

导航的系统logo的颜色换成了灰色，玻璃质感的渐变也做了不少的调整。还有值得注意的是iSync面板的金属拉丝质感。

Apple 2004:

导航系统的视觉设计仍然保持微调的状态中。整体依然没有太大的变化。

Apple 2007:

2007的导航彻底改变。采用灰色系的质感表现。apple logo细致的质感替代了原有的单色处理手法。去除了tab式二级导航。

首页运用全屏banner突出介绍新产品。apple的文案也是被人津津乐道的经典。

Apple 2010:

Apple 2011:

Apple 2012:

纵观2010-2012的导航，以产品的维度划分导航结构。用产品的本身的名称命名，用户进入网站能直入自己想要了解的产品。

从尺寸大小，到标签的命名，甚至是顺序都没有做变化。主要变化的导航的视觉层面和search框。

视觉上：1）主体导航从灰色单一渐变到深灰色质感渐变到暗灰色的质感渐变。

2）相反的是Apple logo 质感一路从简，从富质感的到简单的灰白渐变。

3）标签字体和搜索icon反白处理，逐渐和深色的背景拉开层次。

search框：1）将search框和导航从视觉层面上结合在一起，整体设计。不再简单的白底处理。

2）只保留搜索icon，去除“Search”

3）tab宽度增加，压缩search框宽度。鼠标click后，搜索框自动展开，区别出搜索框default和输入的使用状态。

每次以普通用户的角度去使用apple.com，都有一种快速高效的感觉，能第一时间让你感受到它想告诉你什么，它最近又哪些变化刚好是你想知道的。想找一个记忆中的东西并不难，search是最后一个利器。每一个配色，每一个像素的把控，每个文案的精彩都值得设计细细的品味。

以上是我在设计导航时遇到一些盲点和发现积累。在这次诚信中国改版的项目中被讨论最多的就是导航，从结构组织到信息层次，从交互形式到视觉样式。讨论到最后大家对导航的概念已经模糊，常常在每次的讨论ending中自问：到底什么是导航？为什么要导航？导航只能长这样么？在做设计的过程中，要经常对交互控件的基本概念究一究来源，会让自己清晰的多。这里只是把我在设计导航的过程中遇到疑惑和想法小结一下，希望对大家在设计导航时有些许的帮助。

一个好的导航的关键是，能否解决问题。切忌“冥想”导航，让你的导航更扎实，更清晰，更有意义。

参考资料：

1. 部分图文参考了《Web 导航设计》作者: James Kalbach 译者: 李曦琳
2. 卡片分类法–维基百科

移步查看—->My Blog

导航 – 让用户“务入其途”

pippopippo — 2012-04-12 19:40:24

导航到底有多重要？它只是简单的指路牌吗？当然不是。导航在网站架构中占据重要的位置，它决定了网站的信息范围、分类及获取路径。好的导航设计将直接提升网站的可用性，进而提升品牌形象和网站的可信度。所以如何让进入网站的用户顺利地甚至是不知不觉地”务入其途“一直是我们不断探寻的目标。

导航的种类众多，扮演的角色自然会略有不同，有的可拓展信息，有的则做信息收拢，笔者初步将常见的导航功用划分成如下三类：

1.整体架构铺设，展示网站全局：

有几类导航的用途是将站内信息进行分类，并分层次展现给用户，让用户对网站全局有迅速地了解，并快速定位到自己想找寻的信息，这是一个平铺式引导的过程，对用户感知网站形状非常重要。这类导航主要包括：全局导航、局部导航、网站地图、公用程序导航和页脚导航等

全局导航：是网站架构中权重最高的导航，统领整个网站的信息架构，决定网站形状和整体的信息分类，通常使用固定模式。

局部导航：是在全局导航之下的用于访问下级结构的导航，经常作为全局导航下一个分支的平铺引导。形成局部导航的机制有很多，比如树状导航、垂直菜单、动态菜单等。

网站地图：提供网站的全局信息，使用体验上比全局导航和局部导航的组合要差一些，但对用户总览网站结构非常有帮助。

公用程序导航和页脚导航：这两类导航通常由全局性的操作链接构成，比如：退出系统、将用户引向帮助体系，或是实现同一家公司各种web服务之间的切换等。

2.跟随行为路径，缩小信息范围，实现线性引导：

当用户在大致浏览了全局信息之后，希望能快速定位到某个信息分支，进入具体功能页面开启任务或是进入内容页面浏览所需的信息，此时有几类导航将会随之出现，引导用户在网站中线性游走。这样的导航包括：分步导航、面包屑导航、搜索型导航、翻页导航等。

分步导航：属于很典型的线性引导方式，目的是让用户按部就班地快速完成任务。

面包屑导航：直接记录了用户访问网站的路径，表明当前所处的位置并提供返回上一级页面或是上一个访问页面的链接。

搜索型导航：搜索类导航是用户快速定位内容或是任务的重要工具，通过搜索和筛选可以保证用户行为路径的快速推进，也避免了“走投无路”情况的出现。

翻页导航：翻页导航在用户的浏览行为中更像是一种工具，让用户停留的信息层级保持不变，使该行为可以不断延续下去。

3.信息延展，引导用户进入更广阔的天地

在用户浏览完感兴趣的内容或是任务完成后，怎么能够让用户持续的留在网站中并开启新的旅程呢？此时提供相关信息的推荐成为导航的新任务，这样的导航包括：嵌入式链接导航，适应性推荐导航和相关链接导航等。

嵌入式链接导航：主要是根据上下文的内容以文字链接的形式扩展用户的信息量，或是帮助用户查找到信息的来源出处等。

适应性推荐导航：适应性推荐导航可以更加智能的匹配信息，从而实现相对精准的推荐式引导。

相关链接导航：和适应性导航有相似之处，同属于关联性导航的一种，可以让用户在意犹未尽的时候发掘出更多的信息。

综上所述，导航的设计与用户行为紧密相关，可以在不同的情境下提供不同的导航。但也有些网站的信息量极大，分类复杂，如大型电商类网站可能会出现多重信息分类维度以及分类与标签配合使用的情景，导致了导航的信息展现形式多样，加之导航还与交互逻辑和视觉样式有很大的关系，所以如何利用导航更好地满足用户的需求，解决用户的问题才是我们不断探索的目标和动力。

相关话题：导航设计源地址：http://ued.baidu.com/?p=2433

关于网页导航的一些建议

伯乐 — 2012-04-10 22:56:35

网页导航是设计网站时需要考虑的一个最重要的方面。网页导航的首要的目的是让访客在你的网站简单迅速地找到他们想要搜寻的内容。高效的导航可以引导浏览者在你的网站尝试搜寻其他内容。在本文中，我们将探讨一些设计网页导航的基本准则。

有效的网页导航

在设计网页导航时，你需要将以下几点铭记于心：

1. Organized Links 组织良好的链接

确保你的链接按照重要性有序排列。浏览者能在不同分类中轻松找到他们想搜索的内容。

例如：我们的主链接都可以在页面的上方即，我们的服务、产品、简介及资源等等。其他有趣的链接置页面的右侧。整个网页操作大众化而又贯穿着连续性。

最后一点，如果网页附属一一个索引。例如，你会发现网页索引通常把相关链接置于右侧菜单的下方，也就是页面的底部。

注意：相关链接很重要，因为浏览者可能对你提供的相同标题下的更多新信息资源感兴趣。

2. Clear and Prominent 清晰且鲜明

一旦你决定做链接，你需要考虑把它们置于最优位置。导航必须突出且鲜明。把你设计的链接置于页面顶部或左侧这些最抢眼的位置上。同时，把一些主要的链接置于页面顶部，这样浏览者不用滚动鼠标就可以一目了然。图片的链接应和谐地融入网站设计。避免将链接放置在页面的底部，这样的话，浏览者只有下翻到页底才能看到这些链接。你可以将重要链接同时置于顶部和底部，已引起访客注意。

3. Consistent 连贯性

导航必须清晰且连贯。在网站每一页的相同位置都应设有相同顺序的重要链接。不要因为不同页面链接的顺序问题让你的浏览者感到困惑。

4. Easy to understand 易于理解

确保连接言简意赅。通常你不会有很大的空间来设置长链接，确保空间的有效利用。

访客需要了然点击链接的位置，因此，链接的设置应易于理解，否则没人会点击你的链接，这将有悖于设计网页链接的初衷。

5. DHTML Menus DHTML菜单

如果你的每个一大堆的分类栏和子栏，你需要导航菜单来帮助你组织链接。网上有很多粘贴脚本，你可以借助它们创建强大的导航系统。

将这些要点铭记于心，你就可以为你的网站创建有效的导航系统。参考其他的网站你会在设计导航系统的技术上有新的思路！制作抢眼的视觉效果童言是个不错的想法。小块的信息条可引导读者的点击。

英文原文：entheosweb 编译：伯乐在线 – 张嘉平

直达电梯－导航

密封罐头 — 2011-11-03 10:13:55

超大信息类站点的导航条就像中药铺的抽屉，一字排开气势恢宏，分别拉开，别有洞天。

国人喜好：多！大！全！最好全部铺开才有气势。从不争气的‘S浪’网多年没怎么变的首页导航模式可见一般。至此，对比浏览了同类大型新闻信息类站点，发现中/洋；东/西，界面感受果然不同。

今天只说导航，只对比了新闻类站点：

（娱乐类，设计类，个人站点导航形式多样，逻辑复杂，暂来不及铺开）

Yahoo News / BBC News / CNN / abc News / China Daily / CCTV News / The Japan Times / The Korea Times / 腾讯新闻 / 新浪

首先关注首页横向主导航：

（常规纵向导航通常配合横向主导航试用，且在商务型，大型信息类站点主页中单独使用频率不高，通常在次级页面出现，且一定是信息内容量大，分类繁琐的站点。）

可见基本导航条模式如下：

1. 对于信息统一，归纳性强的站点，通常会使用简单模式：

2. 对于有丰富次级信息的，通常会使用以下两种模式：

a. 鼠标hover下拉

b. tab展开

a 型导航方便快捷预览， b 型导航直接展开次级信息，也有站点把a/b模式合并。

3. 特别案例，盖浇饭类型的，把所有信息都铺出来，比如s浪：

（与其说导航，不如说是归纳过的标签）

导航操作性：

一个完美的导航，最基本最重要的是随时随地，快速引导用户去相关页面，而且能及时返回，方便跳转到其他页面。

有意思的是，去容易，反而找到来时路就千差万别了。

比如：用户很可能是从首页任何一个兴趣点，误入了详情页面，去的容易，1步到～！但从详情页面返回到其他模块或想去其他分支类别页面，就要仰赖导航了。

为了提供必要引导，当用户进入到足够深的详细页面，各种索引，面包屑都配合导航条应运而生。

做一个反向测试，看哪种导航配套设置更便捷。

测试内容：从A类详情页【1】去B类详情页【2】：

测试站点：

Korea Times

http://www.koreatimes.co.kr/www/news/nation/2011/10/115_97248.html

BBC News

http://www.bbc.co.uk/news/uk-england-leeds-15438299

Yahoo News

http://news.yahoo.com

China Daily

http://www.chinadaily.com.cn/china/2011-10/25/content_13968775.htm

导航配套类型：

Korea Times

主导航＋面包屑＋左侧纵向索引导航

BBC News

主导航（展开tab）

Yahoo News 和 China Daily

主导航（展开tab ＋鼠标悬停下拉列表）

操作：

Korea Times ：

第一种方式：从主导航返回――进入其他模块B――分支次级页面――详情页

第二种方式：从左侧便捷索引直接抵达其他模块B――分支次级页面――详情页

（面包屑对应同一目录下的内容切换更便捷，但和左侧索引导航一起，功能性不突出。）

BBC News ：

从主导航Tab选择其他模块B――抵达其他模块分支次级页面――详情页

Yahoo News 和 China Daily

Mouse on主导航第一层其他模块B――展开下拉点击进入其他模块分支次级页面――详情页

测试体会：

使用便捷性Yahoo News 和 China Daily最方便，Korea Times第二种基于左侧纵向导航辅助的操作是最快的。Korea Times功能方式多，且样式不统一，分类太细节化，反而在使用时觉得有点手足无措，操作时会停顿犹疑。BBC News没有整合hover下拉查看其他模块选项的效果，不如Yahoo News 和 China Daily灵活，但是感官上BBC News更利落。

所以说，如果用一个控件可以解决得很漂亮的问题，为什么要到处铺开各设据点？！功能模块集中，操作行为更灵便，使用感觉更舒畅，减少操作中的反复思考，停顿点更有前途。

其实一个舒服的导航，除了归纳清晰，操作便捷，乍一看第一印象也很重要～

不要一口气把全部底细都摊在人家面前是好习惯。有的导航虽然强大，但是内容一多，功能一高级，看着就烦了。这种时候，需要

解套选择恐惧症：

以BBC为例，它的主页导航正如首页头条展示的信息，简单直接，只有大模块：

当点击到感兴趣的模块后，例如进入单独News页面：

导航展开，信息量非常更大，且所在页面导航次级信息也一并罗列。

感受：如果直接进入信息页面，可能无从下手，正是第一步的简单模块引导，剥离了选择困难。

再来看China Daily，虽然不是个特别贴合的例子，但是可以说明一些问题。初始进入所看到的导航其实是最简单的【一】字导航，最多加了个mouse on下拉功能，但依然是大模块让选择有了个范围：

当点击任何一个模块或者使用下拉到达次级页面，导航终于铺开了：

这是个快速索引，同时合并其hover功效，导航就强大了：

最后废话又要说回来了，站点导航到底用那种方式？还是弄个变形金刚什么都包括了，要看站点的信息分类，同时也要从分类开始就要考虑到整个站点铺开有多少点？导航才能牵得了线，小头套不了大帽子，反之亦然。

相关话题：导航设计源地址：http://ued.ctrip.com/blog/?p=2561

左侧导航条

猪小凡 — 2010-07-21 22:53:41

原文地址:http://developer.yahoo.com/ypatterns/navigation/bar/leftnav.html

用户为了完成任务需要找到必须的内容和功能.左侧导航条在垂直的紧凑的空间内提供给用户快速访问已分类内容的入口.

解决什么问题?

用户为了完成任务需要找到必要的内容和功能.

什么时候用?

分类至少有4个
分类可能会超过10个
分类的标题可能会很长或者是系统生成
页面宽度没问题
推荐二级导航内容;比如,当在信息架构层面,所展示的分类是这个页面标题的子元素时
当展开/隐藏是有必要的
为了让二级或三级导航条有更好的可见性,可以用来替代标签或顶部导航条
分类是属于一个单独的产品

具体解决办法是什么?

在页面标题下方以一列的方式显示一系列链接,并且左对齐.
对于更高级别的导航可以结合标签组和/或顶部导航条
左侧导航条给于当前位置特殊的视觉标识.通过对颜色,字体或者其他方式来表示”选中状态”.
左侧导航条内的所有页面本身也该显示在导航条内,同时必须正确的标识当前位置
左侧导航条中文字标签周围的元素都应该是可点的,而不只是文字本身
一个左侧导航条最多有两层导航
当需要展示两层导航并且有很多的一级分类和二级分类时,应考虑使用可折叠的左侧导航条(或者手风琴导航)

可点父导航 VS 静态父导航(Semantic Parents)

可点父导航(左图) VS 静态父导航(右图)

(译者注:忘了过去某个项目中跟同事还争了好久,现在看各有各的好处和用法,只要满足基本原则即可)

当把左侧导航条中的链接进行分类后,分类的名字可以是静态的(语义的)或者是动态的(可点的).静态父导航只是定义了下面的子分类.可点父导航不仅仅是定义了子分类,他们还链接到一个特殊的目标页.

永远不要在相同左侧导航中将可点父导航和静态父导航混合使用.

关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最常见的错误是将一系列没意义的内容归在一类.

尽可能降低分类之间的交集
让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)
避免过于宽泛或者过于特殊的分类名字.

为什么使用这个组件?

顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容

可访问性

当使用”弹出式”或”滑动式”菜单时,粗心的做法会导致有鼠标的用户可以访问下级菜单(通过鼠标划过)或者点击链接,但是键盘用户只能做到后者.解决办法是让用户可以通过Enter或Return键来触发(通常会用在静态父导航中).

开放式问题?

对于长文字我们该如何解决?在左侧导航中我们是否应该避免文字换行?
为什么至少需要4个分类?对于只有3个或者更少的分类时对那些设计师有什么建议吗?
如果页面宽度成问题,是否有其他的可选建议?

顶部导航条(Top Navigation Bar)_Yahoo_Pattern(翻译)

猪小凡 — 2010-07-19 16:23:03

这个可能是最简单也最常用的组件了,所以内容也不多…….

原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

解决什么问题?

用户为了完成任务需要找到必要的内容和功能.

什么时候用?

2-12个分类的时候
分类的标题相对较短并且可预测的时候
分类数量基本不会变的时候
为一个web产品展示顶级导航时
配合标签来展示二级导航
如果页面宽度很重要,用它来替代左侧导航条
通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签.
分类都属于一个产品时

具体解决办法是什么?

在一个水平的横条上显示一系列单行的链接,如果有网站头部,则放到头部之下.
可以通过与”标签”一起使用,在导航条中同时显示一级和二级导航
如果只使用顶部导航条,最好第一个链接是”首页(Home)”.应该指向网站的首页
- 但是如果顶部导航条是用在一组标签下,那么标签的第一个应该是”首页”并且具有同样的功能
在导航条中用留白和”管道符” “|”(或者是垂直居中的”点”,或者是简单的视觉元素)来分隔每一个分类
顶部导航条中链接的所有页面本身也一定要显示在顶部导航条
当顶部导航条数量过多时,建议使用”更多..”的链接,或者考虑使用左侧导航条
与标签一起使用来显示高级别的内容
跟左侧导航条一起使用来显示二级或三级内容

关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最常见的错误是将一系列没意义的内容归在一类.

尽可能降低分类之间的交集
让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)
避免过于宽泛或者过于特殊的分类名字.

为什么使用这个组件?

顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容

手风琴导航(Accordion)_Yahoo_Pattern(翻译)

猪小凡 — 2010-07-14 23:07:36

最近事情很多,工作,生活,感情,亲情…..每个人在每个方面或多或少都会收到过挫折和困难,但是请享受并面对,因为这样才是完整的生活……

从Yahoo Pattern中学到不少东西,看这块中文信息比较少,所以打算开始翻译一下.同时因为手风琴导航这个组件在新版的客户端中也开始使用,所以先写这个.

原文地址: http://developer.yahoo.com/ypatterns/navigation/accordion.html

手风琴导航(Accordion)

手风琴导航(或手风琴菜单)是用可折叠面板来展示一类组织后的信息方式,在一定的空间内,它提供了一种大量链接或其他可选内容的访问方式.

每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮)来显示某一个子选项.

解决什么问题?

当在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理解(消化,in digestible chunks)同时可以不用滚动页面,因为滚动页面会让用户从上下文情景中脱离,或者会让他们从页面中喜欢的位置离开.

什么时候用?

当选项的数量比较多,页面空间有限,并且可以对选项列表有逻辑的进行归类,分成更小的,内容数量基本一致的内容块.

译者注: 此处要注意,内容列表不是内容的标题栏(如截图中是4栏),而是里面的内容元素,比如新闻标题,作者,日期,图片,该要,文字链等.

具体解决办法是什么?

对于选项采用两级分类

顶级分类是显示类别或者分组
二级分类是放到每个组里的选项列表

手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不一样),同时使用一级分类的内容作为标签(label).分类标签一般是与面板宽度一样可点击的标题栏,或者是一类展开/收缩的图标.

手风琴导航默认可以有一个面板是展开的.

建议

将最重要内容的面板默认展开,一来可以显示重要的选项,二来可以起到一个示范作用,收缩列表的每一项都独立可以展开
将当前展开的面板高亮,这样用户可以识别面板展开和收缩时不一样的标题栏
要避免将一个手风琴导航嵌入到另一个手风琴导航中.如果你发现需要这样做,树状菜单或者其他的适合显示多级结构的元素可能更合适.

译者注: 最近的版本中有一个组件就是手风琴导航,而当时并没有意识到,只是几个面板可以收缩和展开,并且至少会有一个面板展开.当时设计的标题栏上的icon是个上/下箭头来表示展开/收缩状态,但是后来发现逻辑无论如何调整都会存在歧义,后来发现这个组件,义无反顾的将icon换成加号/减号,结果没有任何问题了….

可选项

手风琴导航可以配置成始终有一个面板是展开的,或者是其他更灵活的(所有的面板都可以关闭,多个面板可以同时打开).一些设计师认为最好的方式是只允许一个面板打开,但是其他人都不认可.
手风琴导航可以配置成只有一次只有一个面板会打开,但是很多例子都允许同时打开多个.
除非是有表单元素或者其他的不可变的设计元素要求手风琴导航总体上要保持一致的尺寸,否则手风琴导航元素应该可以根据展开面板的不同内容来改变尺寸
通常,手风琴导航是通过单击来展开面板的,但是如果用户的使用情景是”开心的/有趣的/试试这个”,那么鼠标经过来展开面板也是可以接受的.

为什么使用这个组件?

使用这个组件最主要的原因就是在有限的空间内展示大量的选项.

特殊情况

大部分手风琴导航都是垂直放置的,不过也可以水平使用.

可访问性

对于键盘用户来说,就像树状菜单和标签一样,手风琴导航通常会打断使用.可以给手风琴导航标签之间的标志和切换面板的上/下箭头加上键盘导航.

当javascript被禁用时,手风琴导航需要做兼容,可以考虑把所有面板都展开.

如果什么都不显示的话对于屏幕阅读器来说可能会导致内容丢失.可以考虑将高度设置成0来解决.

优化网站导航设计

joegh — 2010-06-16 22:57:47

——让用户更容易地找到需要的信息3

之前已经介绍过为了让用户更容易地找到需要的信息，可以对网站的信息架构和站内搜索进行分析和优化，而另一个能对用户起到很好引导作用的就是网站的导航功能，所以这篇文章主要分析用户对网站导航功能的使用情况，并在此基础上合理地优化网站的导航设计。

网站导航的作用

网站导航的最终目的就是帮助用户找到他们需要的信息，如果说得详细点，那么可以概括为下面3个用处：

1. 引导用户完成网站各内容页面间的跳转。这个是最常见的，全局导航、局部导航和辅助导航等都是为了引导用户浏览相关的页面；

2. 理清网站各内容与链接间的联系。即对网站整理内容的一个索引和理解，这个最常见的应用就是网站地图和内容索引表，展现了整个网站的目录信息，帮助用户快速找到相应的内容；

3. 定位用户在网站中所处的位置。这个在面包屑导航中得到了充分的体现，它帮助用户识别当前浏览的页面与网站整体内容间关系，及其与网站中其它内容的联系和区分。

网站导航的分析

通过分析用户使用网站导航功能的情况，可以来评估网站各导航功能设计上的优劣，这里主要从导航的利用率、实现度、有效性和符合度4个方面进行分析：

利用率

网站导航的利用率，即用户使用各类导航功能的情况。最直观的分析方法就是使用点击热图，具体可以参考我之前的文章——网站点击热图，也可以使用页面覆盖图（Overlay），Google Analytics上面默认提供了网站首页的Overlay：

从图中可以区分网站首页各区域导航功能的使用情况，包括顶部导航，侧边栏的各导航模块等。如果是独立的导航索引页面，我们可以查看这些页面的浏览次数（Pageviews）、访问量（Visits）等指标来分析它们被使用的情况。比如你通过点击我的博客顶部导航中的“网站地图”进入了分类导航索引页面，会看到该页面的URL地址为http://webdataanalysis.net/site-map/，我们可以在Google Analytics上面通过filter来查看该页面的访问情况：

通过比较各导航页面的这些指标我们可以分析得到用户对导航功能的整体使用情况以及各导航的使用比例或使用偏好。

实现度

我们需要知道当用户试图使用导航功能时，有多少用户真正点击导航中的链接或者有多少用户进行了下一步操作。所以这里可以分析各导航页面的点击转化率（CTR），即用户在导航页中的点击次数/导航页面被浏览的次数，其实上面页面覆盖图指直接给出了页面中每个可点击对象的点击转化率，你可以将它们汇总就是整个页面的点击转化率，也可以查看导航页面各链接的点击转化率。但Google Analytics上面无法提供一些子页面的覆盖图，只能选择其它的工具或者试图监控导航页面所有的点击事件。

另外一种分析导航功能实现度的方法就是通过离开率（Exit Rate）这个指标，如果一个用户进入了导航页面后直接离开了网站，那么导航的功能就没有实现（当然如果用户返回了上层页面或者回到首页，导航功能同样也没有实现，这些操作无法体现在Exit Rate）。比如我的博客的分类目录导航页面，该类页面的URL地址都会包含“/category/”，所以也可以在GA上面直接filter出来所有这类地址，我们看看这些页面的Exit Rate情况，如下图：

这里因为缺少导航页面Exit Rate的评判基准，所以我无法判断我的导航页面效果到底如何，有兴趣的朋友可以在下面的评论把你们的网站或博客导航页面的Exit Rate贴上来看看，大家交流比较下。

有效性

与网站的内容页面不同，导航页面的目标是让用户更快地找到想要的信息，我们不需要用户过久地停留在导航页，正如Google的口号：We may be the only people in the world who can say our goal is to have people leave our homepage as quickly as possible（让用户尽快离开自己的网站）。

所以对于导航页面而言，页面平均停留时间（Avg. Time on Page）越短，则该导航页的质量就越高（当然用户要有点击才行）。页面平均停留时间也是GA中分析页面的基本度量，上图也有显示。

符合度

或者称为导航的效果，用户在使用导航功能找到相应的页面后，是否对该页面提供的信息感兴趣，或者说这些是不是他们想找的信息。

假设用户在使用导航功能后找到了需要的信息或者完成了预期的任务，那么在行为可能表现为在使用导航后继续在网站停留了一段时间，或者用户最终到达了任务的成功页面或网站的目标页面（如用户完成注册、电子商务网站下单或购物成功等）。所以我们可以使用导航的后续停留时间、任务完成度、目标转化率这些分析度量来衡量导航的实现效果到底如何。

导航设计的优化

基于对以上4个方面的分析，我们可以对网站进行针对性的优化。

a) 提高有效导航的利用率，将用户最常用或效果最佳的导航放在最醒目的位置；

结合上面的分析，将那些利用率高，效果好的导航功能放到醒目的位置，让用户更方便地使用这些功能。

b) 去除无效导航或者无人使用的导航，精简网站设计；

导航功能并不是越多越好，只要提供够用、有效的导航就行，结合上面的利用率和实现度，将那些没人使用或点击转化较差的导航功能进行精简。

c) 提高导航描述与对应内容的关联度，不要误导用户，赢得用户的信任并保持用户对网站的兴趣；

不要试图去做标题党，如果一个导航页面拥有了较好的利用率和实现度，那么千万不要辜负用户的期望，为他们提供相符的高质量的内容，这样才能真正地留住用户。

d) 优化导航页面内容的组织和展示。

如果有效性不高，用户经常需要在导航页中逗留一段时间才能找到自己想要去的地方，那么也许导航页就失去了其最根本的价值。如何更好地展示导航的内容可能是一个复杂的问题，涉及信息设计、分类、排序等多方面，或者有些网站设计师能想出一些别出心裁的展示方式来吸引用户的眼球，这里直接上张图吧：

好了，我对网站导航的分析优化说完了，你是否还有更多高见，欢迎在下面评论分享。

多维度导航探秘II

sand — 2010-06-08 10:13:45

本次薯片会一改以往低调、沉稳之作风，先瑜伽团美女show上阵，再是以臭为首的吃喝团上阵，两轮下来大家情绪Hight到了极点，自然讨论的时候思维也是相当的敏捷，O(∩_∩)O！

本次薯片会以QQ商城网站为例，对多维度导航进行了深入探讨……

我们所说的多维度导航

主要是指：能够引导用户通过不同纬度：运营维度、商品自然属性维度、搜索等维度，快速浏览目标商品的导航，我们称之为多维度导航。

以QQ商城为例：QQ商城的多维度导航主要分为2个维度：

1、运营维度：引导用户参与不同运营主题（每日抢购、当季新品等），从而关注商品，主题可根据需要定期更换；
2、商品自然属性维度：通过商品自然属性（分类、品牌等）引导用户浏览和购买；

为什么网站会使用多维度导航

A、让用户第一时间看到最新内容（每日特价、热销新品）

B、希望用户通过不同主题参与网站活动（当季热卖、新店促销）

C、利用商品或内容的相关性引导用户浏览（分类和品牌）

D、让新手用户更加方便的找到目标

……

多维度导航的优缺点分析

目前多维度导航在很多B2C型电子商务网站中被使用，如：amazon.com、shop.qq.com、mall.taobao.com等等，多维度，其优点很明显：最新内容展示，多主题引导，快速定位商品，满足长期运营需求。但是也有其不足之处：

单一维度的导航，比较适合向新用户传递整个网站的信息架构，而多维度导航很难做到这一点.

多维度导航和面包屑一起使用时，在某些维度场景下会导致面包屑无法表意清楚商品的信息结构.

QQ商城多维度浏览_面包屑示意图

上图中我们可以发现，商品的信息结构是唯一的：即：【QQ商城 > 运动服饰/配件/包袋 > 运动包袋 > 双肩包 > 商品详情】，分析三个浏览维度的面包屑表意：

1. 从”品牌维度”浏览时，面包屑【QQ商城 > 李宁 > 运动服饰/配件/包袋 > 运动包袋】

其中”李宁”这个面包屑节点并不是商品信息结构中的节点，故此面包屑表意会有歧义；

2. 从”分类维度”浏览时，面包屑完整的表意了该商品的信息结构，表意很清晰；
3. 从”运营维度”浏览时，中间过程无面包屑。

针对上述第1点的问题，经过大家讨论后提出了优化方案：经过大家讨论后提出了优化方案：

QQ商城多维度浏览_面包屑示意图_优化后

1. 只有按”分类维度”浏览时，面包屑才时时完整表意商品信息结构
2. 按其他维度浏览时，一般不出现面包屑。除非用户选择了商品分类，此时才会出现商品信息结构面包屑:

总结

信息多维度的集中展示，必然带来用户认知的负担。既要降低用户的认知负担，又要能方便用户多维度快速找到目标商品，在设计多维度导航时需要我们去平衡。

另外多维度导航与面包屑混合使用时，也特别需要注意到面包屑的表意是否会造成用户对商品信息结构的错误认知，面包屑运要慎用。

本期多维度导航的话题基本就这些，敬请关注下期主题XXXXXXXXX！

相关话题：导航设计源地址：http://www.shupianhui.com/?p=183

说说那些商城的导航

kent.zhu — 2010-05-15 10:44:13

本文主要想表达的内容是：如果某个组件具有某个属性，那就把这个属性发挥到极致；如果某个组件不具备某个属性，那么就不要把它伪装成具备这个属性，并用这个属性来诱奸用户。

简单说，设计就是要解决问题，这是设计的本质与落脚点。
电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是，告诉用户如何快速准确的到达他想要去的任何地方。

在所有电子商务网站中，Amazon（注意，不是卓越亚马逊）的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧，从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航，相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度，在第一屏的时候就能把所有商品大类全部暴露出来，降低了用户的寻找成本。因此，这种模式的导航被越来越多的电子商务网站所接受。

大约在1年前，QQ商城改版，借鉴了Amazon的这种导航模式，同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目，同时还展示了品牌，这使得整个主导航从纵向上进一步缩短同时往横向上扩张。
随后而来的京东商城和淘宝商城（扩展有分类推荐与品牌推荐）以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。

不过，我觉得这种创新在某些交互细节上有待改进，我们先来看一下QQ商城的主导航截图：QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。
从这个表现形式上看，“运动鞋”、“棒球帽”是2个标签，我这么认为是没问题的吧？

我们假设这样的一个场景：你来到QQ商城，很明确的就是想购买“棒球帽”，你肯定是会直接奔去点击“棒球帽”（注意，是点击）。因为这个“棒球帽” 长的跟一个标签一模一样，我们之前的Web使用经验告诉我们，标签就意味着是带超链接的，是可以点击的。可是，当你把鼠标移到“棒球帽”这个标签上的时候，你发现，他是个伪娘！
你点击了半天，发现没有反应，你再仔细一看，他引导你打开了整个“运动户外”下的二级分类….这个时候，你的鼠标需要在做一次长途奔袭，去弹出来的弹层里寻找“棒球帽”，当然，你还得小心点别奔袭到界外，不然整个弹层就关闭了，你需要再来一次（图中虚线）。
这个场景里，我们经过几个动作：1、准备点击；2、无数次点击后觉醒；3、鼠标小心翼翼的滑过弹层去寻找；4、点击。
P.s:其实，图中这个例子我们在弹层里也找不到“棒球帽”，因为它被变异成了“运动帽”？

我们再来看京东商城和淘宝电器城（注意，不是淘宝商城）。其实跟QQ商城差不多，只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候，鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时，“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。
这个场景里我们经过的动作：1、准备点击；2、发现要点的家伙没了，开始寻找；3、点击

从这个意义上讲，我认为，京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路：点击，拼命的点击、鼠标奔袭到弹层；而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙，我只有一个道路：鼠标奔袭。
有的时候，给用户越少的选择更能让用户集中起来完成目标任务。

OK，案例观摩完毕，分析一下为什么会出现上面的问题？
很简单，我觉得就是没有把一个东西做到极致，随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些（洗衣机、平板电视）其实并不是标签，但是，他们在展现上跟标签一模一样（京东使用了灰色字体，说明他们意识到了这不是标签，但是我觉得还不够）。

解决方案？
请参见Amazon的做法。
把那些长得像标签的家伙砍掉，使之不具备标签的属性，换成文字描述就OK了。

最后，几句题外话：
1）不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的？我仔细看了一下，似乎是程序直接调用而不是经过人工编辑的？如果是让程序来调用这个黄金地段的内容，那就真太可惜了。
2）京东商城在首页左侧主导航里的一级分类都是可以点击的（如数码手机），但是在全部分类页面却变成了不可点击的，Why？
3）QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的，但是这种标签式的展示让我很挫败，比如我想买个棒球帽，结果找了半天只发现个类似的运动帽…

相关话题：导航设计源地址：http://www.ikent.me/blog/2554

新颖网站导航设计趋势案例

P迪 — 2010-01-05 23:04:36

在网站应用性中，导航菜单应该是最重要的部分了，优秀的导航设计不仅可以方便用户浏览网站内容，还能在第一时间给用户准确的信息传达，直观地表现网站的内容涉猎，让用户更方便地找到想要的需要的内容，这里整理了当前网站设计中流行的特色导航设计案例，这也表明了网站导航设计的一个未来趋势。

3-D 导航

3-D 风格的导航菜单可以表现的更突出，能在整个页面的设计中凸显导航功能，并且向用户传达直观的可操作性。

会话框（气泡）导航

这类的网站导航风格打破了常规的菜单布局，在很多特色的网站设计中有很好的应用和体现。

Yellow Bird Project

圆角导航

圆角导航的应用已经并不新鲜，在很多的网站设计中得到了很好的应用。这类导航外观表现的更像一个可操作的按钮，引导用户点击。

图标类导航

精致风格的视觉类导航在如今的高速带宽的网络环境中，已经可以完全无需考虑加载速度，从而应用在网站设计中，进一步提高网站的整个设计质量。

JavaScript 动画导航

网站设计师使用JavaScript框架可以很容易地实现动画风格的导航菜单功能，使得导航设计表现的栩栩如生。

Dragon Interactive

不规则形状导航

正是因为多数网站都是采用规则边角设计的，所以，如果在特殊的网站设计中能使用一些不规则形状的导航菜单，可以为整个网站设计增色不少。

Booma

Kutztown University

Yorkdale

The Crazy Love Campaign

Carnivale du Vin 2009

Wrangler Face Off

Inner Metro Green

Custom Tshirts UK

Pirata London

koraykibar.com

Idea.org

箭头导航

经常会看到一些类似杂志类网站设计会使用到这样的导航风格，从而给用户一个更好的交互式体验，提高用户的浏览操作。

Jack Cheng

gregorywood.co.uk

The Rich And Powerful

72nd Ave.

via: Showcase Of Modern Navigation Design Trends

翻转页面导航

蓉儿 — 2009-11-10 10:26:47

在UItrends上看到一个新的导航趋势的应用：翻转页面导航。其实这个早期一直是photoshop表现视觉效果的手法，就像kate曾经提到过的，这种效果仅仅用来代表视觉隐喻，没有什么实际内容。

早期由于这种设计只有一种固定的模式，缺乏动态效果，另外冗余的样式对页面的加载速度也有不小的影响，其应用并不广泛。后来随着带宽的提升和web应用的多样化，这种表现手法被越多地方用到交互应用中，在形式上类似于开关的切换，而在功能上实现了两个tab页的跳转（只不过其中一个tab被弱化或隐藏起来）。它的交互缺陷为：只有用户点击了以后才知道页面下面隐藏的内容。

在什么地方使用这种导航形式呢？下面谈谈我的理解：（为了区分，暂且把显示在页面上的叫tab1，隐藏在下面的页面叫tab2）

1.在展现信息上，tab1显示的优先级一定高于tab2，而且tab2所实现的功能一定是建立在tab1的内容之上的－－通常作为附加应用（高级应用）而存在。

07年的yahoo注册就使用了翻转页面，点击右上方的翻转tab可设置进行密码保护设置（基于登录的安全性扩展）。

2.强化该功能，吸引用户关注更多的信息。在tab2所呈现的内容较多时，tab1下单屏显示会造成页面布局拥挤，用这种导航方式不仅能视觉上引起注意，还解决了新的合理布局。同时需要注意的是，这种导航仅使用于比较简单的页面，强化的重点一个足以，否则将会产生视觉噪点。

Chrome Themes 上线以后，改版页面最大的亮点就是下方那个卷起来的页脚，让人禁不住想点进去看看。这也能看出来google把Themes这个功能作为重点推荐的战略意义（对Chrome 倒感觉不出没什么，对Chrome OS 的意义就完全不一样了），估计以后也会搞得像iGoogle 的主题一样，做成开放性的库，让全球不同的艺术细胞自由交流...有点跑题了...

点进去后的主题页面。

3.移动平台应用等。

iphone上的google maps应用以及Slashdot.org也将赞助商链接放在投票上。

相关话题：导航设计源地址：http://lovelyrosa.blogbus.com/logs/50829703.html

网站导航栏的过去与现在

言午一郎 — 2009-10-11 13:02:27

原文作者：smileycat
原文链接：Website Navigation Then and Now
译者：言午一郎

转载请注明： 言午一郎 原文地址： 网站导航栏的过去与现在

我最近回想起几年前的一份网站导航栏的收藏。我不解但是我却很想知道今天的这些网站的导航栏是怎样的？还有导航栏对这些网站的成长、重设计、品牌提升等等有着多大的影响。

下面是这些网站的新旧导航栏对比：（点击图片可以放大查看）

Old Navy

Old Navy: then

Old Navy: now

Shopping.com

Shopping.com: then

Shopping.com: now

Adobe

Adobe: then

Adobe: now

Weather Channel

Weather Channel: then

Weather Channel: now

REI

REI: then

REI: now

Amazon

Amazon: then

Amazon: now

Apple

Apple: then

Apple: now

Google

Google: then

Google: now

Netflix

Netflix: then

Netflix: now

Expedia

Expedia: then

Expedia: now

Walmart

Walmart: then

Walmart: now

Pogo

Pogo: then

Pogo: now

All Recipes

All Recipes: then

All Recipes: now

Bank of America

Bank of America: then

Bank of America: now (it hasn’t changed!)

Buy.com

Buy.com: then

Buy.com: now

相关话题：导航设计源地址：http://www.yeeyan.com/articles/view/xu2blog/62622

从Vista地址栏到网站导航菜单

摄氏度 — 2009-09-04 23:43:55

在Windows vista之前的微软操作系统的地址栏与浏览器的地址栏是一样的，也是面包屑般的自上而下的线性等级形，如果想从D盘跳到C盘是不大可能直接到达的，所以微软在vista上重新设计了地址栏，使其脱离了自上而下的线性等级形式，而是成为了多功能形的导航菜单。用户即可以直观的通过路径知道自己当前所处的位置，同样也可以快速的跳转到硬盘里的其他地方。

一般情况下，网站导航会由几种形式的导航组成，诸如主导航、任务导航、情境式导航等，然而即使是如此多样的导航却依然可能造成用户在网站中的迷失，所以还可能看到面包屑式的导航，用以指明用户当前所在的位置。

面包屑导航一般与主导航区分开来，仅是单纯的自上而下的线性等级形式，这样的面包屑导航仅能供用户快速的返回上一级或是上几级，如果用户需要到达与上一级同级的栏目时，这样线性下来的导航就无法完成目的，所以就需要使用到主导航。

然而将这两种导航合并成一种动态式的导航，也可以完成用户的这般需求，当然这样的代价是用户对导航的认知需要更多的时间。

这种网站导航是从桌面到网络的映射，Home相对于计算机，计算机下包含多个硬盘分区，而Home则包括网站下的多个Item。然而这样的一种映射关系似乎有偏差，计算机是各个硬盘分区之间有一个从属的关系，可是Home与Item之间并不存在一个从属的关系。Item2的下拉菜单可以是Item2.1、Item2.2，但Home的下拉菜单却不能为Item1、Item2。

然而如果Item1、Item2在表现形式上不隶属于Home下，那该如何解决呢？

相关话题：导航设计源地址：http://www.prower.cn/interaction/1573

网站导航设计杂谈

大仙 — 2009-08-12 11:20:05

“网站策划中百分之七十的工作是围绕网站导航开展的”——这句话是错的。许多优秀的网站成功在导航设计，许多糟糕失败在导航设计，这个现象的确存在，但这并不意味着导航设计占有网站策划工作的绝对重心。

不是所有的网站都需要导航

策划这类思维活动，一旦形成了惯性也就失去了创造力。很多从事网站策划的朋友，总是把着眼点放在了网站的导航，殊不知很多网站压根不需要导航，因此，正确的网站策划思维应该是首先明确“我们是否需要导航”，然后才是“我们需要一个什么样的导航”

只有一个页面的网站，它们不需要导航。企业简介、联系方式、产品服务，这样的名片式网站是国内中小型企业普遍采用的形式，而这些内容往往可以在一个页面中展开；网站建设公司为了提高价格将名片式网站故意复杂化，同时为了节约成本将导航程式化，造成了成本浪费与用户操作的烦琐；一个极简的网站，高效能的传播，纯粹的功能，是不需要导航的干扰；如果能够在最少的页面里把事情说清楚，就不要浪费更多的页面，这是在节约社会资源，也是在节约用户的时间。

可用性研究网站Useit.com（Nielsen）就是一个典型的没有导航栏的网站

故事主线的网站，它们不需要导航。线性思维可以一步一步带领用户进入目的地，只要内容足够吸引，那么用户是不吝惜增加点击的；这种叙事的内容传播侧重的是内容的深度，Step By Step的让用户深入了解内容，并不希望用户进行跨越式浏览。故事网站并不能带来宽泛的流量，必需像看幻灯片那样一页一页的点击下去，而却能带来影响力与深刻传播，用户往往一口气浏览到底，而且很少去重新浏览；既然如此，故事主线的网站存在有何意义呢？很显然，故事主线网站是进行病毒式营销的利器，通常人们会把自己喜欢的故事网站通过各种渠道分享给自己的亲人和朋友。

著名的Web标准启蒙读物《为什么用表格排版是不明智的》采用线性无导航阅读

用户往往并不知道网站导航的存在

每个人都有经常使用的网站，即便是网站策划师也不例外。现在确定一个你经常访问的网站（这个网站必须不是你亲自参与设计建设的），好，闭上眼睛仔细回忆，这个你经常造访的网站，它的导航包含多少个项目，第一个项目是什么？最后一个呢？每个项目在导航中是如何排列的?现在你明白了么？……即便是你经常访问的网站，你也没办法把导航内容完全记住。

Google中文（谷歌）可能是你每天都访问的网站，你能记得它的导航具体是什么吗

站在一个普通用户的角度，在使用者的视场中，扫描着页面的内容，即什么内容在页面的什么地方，这些内容是否是用户需要的；用户其实不关心导航是否存在，他们只有在当前页面找不到自己需要内容的情况下，才会去寻找导航；因此，用户的确能感受到页面的存在，因为页面通过视网膜让用户知道了它的存在，用户往往不知道导航的存在，因为导航系统是一个抽象的概念。

用户使用导航是要找到自己需要的内容，这种需求往往非常急切，而且你不要认为每个用户都会像在月亮山挖宝一样孜孜不倦，在导航的帮助下，如果还不能快速的找到自己想要看的东西，那么他们就会关掉浏览器跑掉了。这个时候，一份详尽的网站地图，会比你精心设计的导航更有效和快捷。

越是扁平结构的网站导航越有效

很多网站策划师喜欢使用多级导航，有的甚至按照逻辑关系把导航细分到3级甚至4级，这样做是极其不合理的。在此我们引入一个维度的概念，如果每增加一级导航就增加一个维度，那么增加的这一级将使整个导航系统复杂度增加数倍，而用户的操作将呈几何数量级的增加。

一个企业网站的二维导航被扁平化的例子

我们必须明确，导航的出现是因为在一个页面中无法同时展现那么多的内容；也就是说导航是无奈之举，并非必需品。无论横向导航还是纵向导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以了。这也就是说，需要把一个多维的纵深导航系统压扁，这样做的代价是打破网站栏目之间明确的从属逻辑，而得到的好处是让用户更快的找到自己需要的内容。扁平结构的导航，正在逐渐成为网站导航的主流，这就是为什么那么多门户网站将一级的栏目在导航区以多行出现，并且你能发现更极端的做法——网站的导航就是网站地图。

戴尔电脑的中文网站：网站导航就是网站地图！

横排导航与纵列导航的区别

我们知道，几乎整个世界的阅读习惯都是从左到右逐行进行（中国古代是从上到下逐列进行），那么在横排导航中，左边的项目一定比右边的项目重要么？这也未必，因为越来越多的用户将导航与段落区别开来，进行跳跃式阅读，出现了“金箍棒”状态，那么就意味着在横排导航中，最后一个元素会有一个小的跃升；所以，有经验的网站策划师会把最重要的项目放在横排导航的第一位，而次要项目放在横排导航的最后一位，其它项目从第二位依次排列开。

横排段落:权重由左至右逐渐降低

横排导航:权重逐渐降低，最后出现跃升

由于用户阅读的横扫描习惯，纵列导航保持了一个简单的递减关系，上面的权重最高，下面的权重最低。

纵列导航:权重由上至下逐渐降低

精简合理的导航结构是可以复用的

横排导航+面包屑仿佛是网站导航的普遍格式，真的合理么？导航真的要占用那么多宝贵的屏幕资源么？越来越多精巧的设计将导航和面包屑融合在一起，完美的解决了“你在哪里”“你可以去哪里”这两个最本质的导航问题。

一种使用较少链接实现多级导航的网站导航形式

成功的导航方式是可以复用的，虽然在用户的眼睛里没有导航，然而在网站策划师的视野中优秀的导航随处可见，导航设计并不存在什么诀窍和秘密，如果理解每种导航结构的特点，那么就“拿来主义”吧。

最后提示每一位网站策划师：因为内容所以导航，千万不可以“先设计导航、然后才冥想内容”。

博客导航的用户体验

米拉之落 — 2009-05-02 00:41:27

看到谢巍@twitter在他的第8音里写了篇“左侧导航还是右侧导航？”的文章，在Google Reader里做备注，发现要写的东西过多了，于是结合一下我的博客导航部分设计的思路和SEO，放在这里作为一篇日志。

我的博客的导航的内容主要分为以下几种：博客分类导航（即放在页面顶部或者左侧/右侧的导航）、标题、翻页/分页导航、其他导航（文章内链接、关键字、友情链接、文章内容导航等）。

博客分类导航

1、导航的放置位置会影响到访客对博客内容的关注度和二次点击。在设计博客导航之初，只有页面的导航，而且习惯性地放在了头部（header.php）。后来我发现，网页访客统计里有很多访客在点击顶部的页面（page），点击数大大超过了访问量最多的单篇文章的点击量，所以我在头部的导航里又加入了博客文章分类的导航，设计的时候考虑到要突出主导航条，考虑过下拉或弹出式的分类导航，但是对用户来说并不方便，即使它看起来很 cool。越简单，越直接的东西给访客的体验也越好。为了突出下边的分类导航，我加了浅蓝色的底来突出这部分。我的博客以白色调为主，头部（header.php）的留白使导航看起来不那么别扭。

2、博客主要是以内容为主，所以导航的作用就不止是分类了。使用分类的导航方式，访客可以快速到达一个分类。但问题是，访客打开了这个分类，是否就看到了他感兴趣的内容呢？其实在博客的第一页面上，大部分的的内容我们不会去点击的—也就是说，导航仅仅是吸引访客寻找他感兴趣的内容的工具而已。对于网站设计者来说，设计导航的目的也在于此，如何帮助访客找到他感兴趣的内容，如何吸引访客的二次点击。

3、根据访客行为的数据分析，可以确定导航放在哪里会更好点。我的博客导航在右边，有两个原因：一是内容放在左边易阅读，右边的侧边栏作为导航的一部分是辅助内容，次要的内容就让他呆在次要的位置上；二个是根据搜索引擎抓取文章的顺序和优化的需要安排导航的放置位置，搜索引擎抓取某个页面是以从上到下，从左到右的路线来抓取的。把博客内容放置在左边就必须保证标题和内容以及显示在首页面的TAG部分（具体见我的博客布局）有充足的关键字，这样要比仅仅把侧边导航放在左边更有利。

4、侧边栏部分。我博客现在的右边部分。关于侧边栏应该怎么放，有人写了很多，都很有道理。你可以到http://blogunion.org/blogging-tips/optimize-your-sidebar.html去获得更多了解。

5、导航的title描述。我的博客大部分导航性的语言都是用了英文，这是因为我觉得英文显示起来更美观，于是在对英文导航的title描述中，我尽可能地用了中文描述，这样不至于“赶走”英文不好的访客。

标题导航

1、如上文所说，文章的标题也是一个重要的导航部分，它可以尽可能地引导访客找到他感兴趣的内容，所以，文章标题应尽量包含关键词，标题是一篇文章的核心，搜索引擎也比较看重一篇文章的标题，标题的关键字导航也会利于提升文章的排名。

2、在浏览器标题栏显示的Title也是一种导航，关于Wordpress的Title优化设计，可参考这篇文章。

3、由于wordpress中中文标题显示为网址的时候文章的“文章缩略名（Post Slug）”会包含一大串%XX的字符串，很不美观，月光博客做过一个插件，可以将中文标题转化为拼音http://www.williamlong.info/archives/1027.html

翻页/分页导航

这部分我在前面写的一篇文章《wordpress主题设计与访客体验（上）》中有提到。

其他导航

1、文章内链接。这个在我的博客里做的不多，好像可以用插件实现站内关键字链接。

2、tag（标签、关键字）导航。在主页面（index.php）每篇文章下显示tag起到导航的作用。另外像xw说的，我觉得我也有必要把TAG云图放在侧边来，但是考虑到侧边过长的问题，放弃了这个想法。

3、友情链接。这部分我在前面的《wordpress主题设计与访客体验（上）》中也有提到。我个人觉得博客的友情链接放在首页会更好，如果你做的友链的质量很高，一方面可以提升博客的排名，另一方面能给访客一个好的印象，谁能保证访客离开你的博客不会再回来呢？

4、文章内容导航。从搜索引擎抓取页面来看，搜索引擎和人看文章一样，会从第一段看到最后一段，而第一段的内容就是被搜索引擎认为是这篇文字的主要内容，就是显示在搜索引擎的快照里的内容。所以这个地方也是比较关键的部分，对博客内容和访客需要都比较关键的部分。

5、RSS导航。有很多用户经常在使用阅读器或者聚合订阅工具浏览博客的。所以，在侧栏的导航中我尽可能地列出了访客容易订阅的FEED。

写完这篇文章才发现，自己的博客里还存在相当相当多的问题。要好好改改了，尤其是关键字优化方面给用户的体验，很差。

相关话题：导航设计源地址：http://bewho.us/navexp/

左侧导航还是右侧导航？

xw — 2009-05-02 00:03:30

记得很久以前在上一家公司有一次会议上讨论博客的导航问题，大概就是”导航是放在左侧还是放在右侧？”基本上大家在会议上都达成了共识就是博客的导航应该是放在右侧，因为内容比较重要，放在左侧可以让用户可以更加注意内容。

最近在看《Web的导航设计》，其中有一部分也提到了关于导航的位置的问题.

在2002年对奥迪网站（www.audi.com和www.audi.de）的改版中，Razorfish Germany挑战了左侧导航的主导地位，把主导航放到了右侧。主要冬季是把奥迪的网站和竞争对手区分开来。他们也像在网站中处处实践奥迪品牌的核心价值”创新”，包括导航。

在这种非标准布局发布之前，我们对64个用户进行了广泛的测试。测试中把一个导航在左侧的版本与右侧版本相比较。每个测试都有三部分组成。

第一部分中，用秒表记下完成五个任务所需的导航时间。结果令人吃惊：对于任何一个任务，两种导航的完成时间都没有显著的差异，包括第一个任务。在后续的任务中，右侧导航实际上要比左侧导航表现更好。

第二部分中，我们研究了参与者在屏幕上的注意力的焦点。我们发现，比起左侧导航系统，人们用右侧导航时旺旺会多看有内容的一侧。

第三部分中，我们对每名参与者展示两种版本，并直接问他们对右侧导航的看法。64个人中有7个偏爱右侧导航，只有两个明确表示不喜欢。但大多数的参与者表示无所谓。

我最近看了一下博客的统计，让我十分惊讶的是放在我右侧的导航几乎没有点击，那你可能说了放在右可能容易忽略掉，但是我下面的友情链接竟然会有好多点击，也就是说放在右侧的友情链接竟然比右侧放在上面的导航更加吸引点击。

由此可见导航放在左侧还是右侧，通常的常理是习惯问题。而这里还要考虑的问题就是：1、用户到想要什么？2、我们到底要给用户提供什么？

先来看看博客，为什么大多数博客的分类导航都是放在右侧？1、用户来到网站就是想阅读最近的文章。2、我们就是给用户提供文章内容。其实这里根本没有右侧分类导航什么事情，也就是说我们甚至可以把分类导航移走不显示也不会有什么大事情。而且有好多博客的模板就是把导航放在最下面，最上面完全空出来给博客文章。那为什么分类导航在博客上不重要呢？我觉得这是博客的特性所决定的，通常来说，一个博客本身就是一个分类，一个人写的博客文章一般的内容和性质都是差不多的。第二就是博客文章的实效性很强，而且博客文章本身也是按照发表顺序排序的，用户通常就是看第一页面就差不多了，如果想看更多直接单击下面的分页即可。如果想查找某一片特定的文章，直接搜索关键字即可，可见大多数情下根本用不到文章分类。就算要用到分类，博客文章内容中有包含分类的信息，用户如果觉得某一篇文章很吸引人，很自然就是单击文章中的分类进入分类文章页面。另外博客上的Tag云图貌似比文章分类更加能以引人的注意。

我们再来看看门户网站的首页，中国的门户网站喜欢把到访在在顶部譬如sohu和sina，而美国则喜欢放在右侧，譬如yahoo和aol。无论是放在顶部也好，放在做侧也要，他们都是最重要的位置，或者说是用户第一眼能看到的位置。貌似没有一个放在右侧的吧？还是先回答上面那两个问题1、来到门户的首页就是为了找到频道的链接这样可以快速的进入我想要看的频道。2、提供整个门户站点的综合索引。但是我们这里要区别，我们可以看到aol和yahoo的首页内容都不是很多。而sohu和sina的就不一样会更多的提供更多的频道内容在里面。这点可以看出中国人和美国的习惯有所不同。

我们再来看看电子商务网站，分别在ebay.com和taobao.com输入一个关键字搜索，然后出现一个搜索列表，ebay是把结果显示在右侧左侧显示细节分类导航和相关推荐，而淘宝是在上面显示分类，把相关的其他东西放在右侧，而把搜索结果显示在左侧。到底哪个更好呢大家可以想一下。

导航放在左侧还是放在右侧确实不是一个死规定，就像当初通常都认为导航应该放在左侧时候，博客的出现就打破了这个常规，把导航放在了右侧，而事实证明放在右侧有些时候会效果更好。所以有些时候不要被所谓的经验所蒙蔽，仔细分析，打破常规，也许会得到意想不到的惊喜。

相关话题：导航设计源地址：http://blog.d8in.com/posts/314.html

Wordpress后台的导航设计

xw — 2009-04-21 22:13:38

前一阵子升级了博客系统，由原来的wp2.6升级到wp2.7，而升级以后最大的改变就是全新的后台管理界面了。
在我用了一会发现，wp2.7的后台左侧导航越用越熟悉，突然打开dwcs4一看，哈哈，这不是一模一样吗，adobecs4系列全面升级了界面，而左侧导航的处理方式也全新的，下面我们来看看dwcs4的导航设计。

三种状态：
第一种区块全部展开，可以收缩，这一点和普通的软件没有什么区别。
第二种区块全部隐藏起来，显示图标+文字，当用户单击以后显示已隐藏区块。
第三种区块全部隐藏起来，只显示图标，当用户单击以后显示已隐藏的区块。
在第二种和第三种状态的时候，可以设定是鼠标离开的时候区块就隐藏，还是当用户再点击一次以后区块才隐藏。

我认为这种导航设计很好的满足了，新用户、中级用户和高级用户三种不同的用户。如果用户是新手，那么他可能不了解软件的窗口的作用，那么这个时候全部展开是最好的了，当用户渐渐的了解窗口的作用以后，就可以用图标+文字或者单独图标的方式来操作窗口。另外还有一个好处的是全是图标的方式可以节省更多的操作空间。

不过其实微软其实早就也用了一种解决方案来解这个决类似的问题。

虽然大致开上去没什么两样，但是实际上有很大不同。
1、按钮上处理的不同：窗口隐藏以后微软的处理方式是变成一个竖着的小标签，用16×16的小图标+文字。标签又窄又长，鼠标点击十分不爽，标签上的文字是90°旋转的，很难阅读。而cs4的处理方式是用一个24×24的图标+横排的文字作为标签，这样不仅容易点击，而且也容易阅读，不过这样的方式会损失掉一些空间。所以又有了进化方式，就是干脆就是一个图标去表示。这样既容易点击也节省空间，虽然没有了文字说明，但是在鼠标悬浮的时候会有提示，而且我想用这种高级模式的人已经很容易辨认这些图标是表示什么工具窗口的了。
2、显示区块的处理不同：窗口显示以后微软的处理方式是由上到下，根据软件的高度铺满，宽度可以拖动设定，无论标签在什么位置，显示的窗口都是一个位置。这里最重要的一个问题就是显示窗口的位置，因为标签都很长的，所以当单击第一标签窗口的位置还是可以比较舒服，但是点击第二个标签的时候就会发现标签就会离窗口的位置比较远有些不舒服，而如果有很多的标签的时候，第四个，第五个，就会发现已经很难容忍这种操作了。虽然窗口的位置是固定的，但是单击标签的时候用户需要的是相对定位感，而不是绝对定位。cs4处理的方式就要好得多，cs4可以让用户把工具区块进行分组，一般一个分组最多不会超过4个，这个分组和全部展开时候的分组是一致的。当用户在单击一个图标的时候显示隐藏的区块，区块的位置由分组接线而定，这样的好处是既保持了和展开以后效果的一致性，又不会离点击的功能按钮又太远的距离。而显示的区块默认为正常的窗口大小，也可以拖拽独立设定大小。这样的好处就在于我没有必要为了4，5行的东西把整个边都遮住。

WP2.7的后台虽然借鉴了CS4的设计，但是因为是网页的原因，进行了一些改进。但是实际用起来的效果确实要比CS4差很多，譬如鼠标悬浮的时候，选中状态很不明显，显示出的菜单离导航的边距太大，显示初以来的菜单的标题栏太高，等等。看来WP的交互设计师还需要下很大的功夫来优化这个菜单。

相关话题：导航设计源地址：http://blog.d8in.com/posts/287.html

怎样的面包屑导航更能体现整站架构

摄氏度 — 2009-04-08 21:27:42

在很多大厦或是大型超市的入口处一般都会树立路牌之类的标识来为用户指明方向，而进入到内部后则会有另外更详细的导航指示。这两者之间的关系就像是网站的主导航与面包屑导航一样，前者为用户做一个大概的结构介绍，而后者则是在大架构之后的细节延伸。

面包屑导航可以很清晰的标明用户当前所处的位置以及可供返回的链接，这在很大程度上解决了用户在网站里迷失的问题。用户从庞杂的入口到最终的目的地，面包屑导航是按一种递减的结构来呈现的。

然而这种递减的结构的最上级应不应该包括“首页”这个最大最杂的入口呢？如果面包屑导航里没有“首页”的链接，那这算不算是完整的导航结构呢？

国内四大门户网站里，关于面包屑导航设计里，网易跟腾讯是有“首页”链接的，而新浪跟搜狐则是没有“首页”与链接的：

在包括“首页”链接的导航结构里又分为两种，其一是如网易般的在“首页”之前还有当前频道首页的链接，这点与新浪以及搜狐的设计是一样的；另一种则是如腾讯般的最上级直接就是“首页”。

如网易这般的面包屑导航设计可以突显出当前频道，但同时也存在另一个问题，那就是在同一个导航中出现了两个相同的链接，提供了更多入口的同时也让更容易让用户迷惑。

而在面包屑导航里不包括“首页”的设计则给人感觉怪异，就如同从一栋大厦门口进去到某个楼层的某个房间，结果出房间的时候发现指示牌里没有大厦门口的指示位置，只是指示到这一楼层的门口。

这样的设计不得不让人联想到，这是一种各自为政的作法，最大可能的把用户留在当前频道里，而不管用什么方法。

一个完整的面包屑导航应该是从最初的入口开始，也许很多用户的最初入口直接就是某个频道首页，但不可否认，面包屑导航的递减架构的最上级应该是如金字塔的最底层一样，而国内网站们的首页设计就如金字塔的最底层一样，信息庞大而复杂，网站首页是整站中聚集度最高的地方。

关于面包屑导航的结构呈现，你有什么更好的想法？

相关话题：导航设计源地址：http://www.prower.cn/interaction/1283