1网页导航设计原则

设计网页导航时，一定要简单易操作，能够帮助你的用户快速查看哪些信息可用，以及在哪里可以找到所要查找的内容。下面介绍网页导航设计原则，希望对您有帮助。

1. 容易找到

视觉上要容易区分并且能让用户一眼就能找到，导航文本与你的正文文本不要使用相同的颜色，字体和大小。导航文本应该突出和显眼。对于菜单按钮，使用高对比度颜色和清晰的文字。导航区域要保持一定的大小，用户容易发现。导航的位置要使用惯用的位置，例如页面顶部，左侧等。

2. 简单

一定要简单易操作，能够帮助你的用户快速查看哪些信息可用，以及在哪里可以找到所要查找的内容。用户需要能够预测你的网站的工作原理，而无需学习怎么做!如果他们需要考虑如何做，那么你已经失去了他们!避免让用户点击一个很小的倒三角然后展开二级菜单的方式，他们可能根本找不到它。

3. 可点击

确保所有导航中元素可点击。在导航中使用多个分类目录时，所有标题元素都应该是可点击的链接。即使使用下拉菜单，点击子类别链接也可能是访问者的自然倾向。不要觉得这一条可笑，我经常发现有些网站的导航点击后无法跳转。

4. 一致性

尽量在所有页面中使用相同的导航模式，这是非常重要的，因为没有一致的设计，用户可能会认为他在另一个网站。确保使用相同的导航模式，以便用户可以轻松地访问你的网站而不会丢失。

5. 清楚

你的菜单文本必须描述清楚，使用简单明了的术语，不要让用户思考这里的文本意思是什么，保持你的文字简短，具有描述性并且重点突出。如果需要五秒以上的时间来思考文本含义再去点击链接，那么这将会造成糟糕的用户体验。

6. 保持简洁

可以在垂直导航中添加更多的项目，但是主菜单中的项目不必过多，会分散用户的注意力。一般不要超过8项。

7. 互动

反馈对于任何交互都是至关重要的。当人们点击或鼠标悬停在菜单项时，请确保提供下一步操作的指示。及时给予用户任何操作的反馈能让用户更愿意去点击导航。你可以通过更改链接的文字颜色，背景颜色，或对其加粗，使其与其它内容不同。

8. 排序

需要确定网站提供的主要功能，最重要的是什么，将最重要的项目按照重要度放在主导航中，次要的项目可以放在二级导航中。

9. 风格

极简主义仍然是网页设计的趋势，独特视觉风格会使你的菜单看起来很酷，但要确保它与整个网站的整体设计相匹配。

10. 无障碍

网站可访问性永远是衡量一个网站质量的重要标准，请确保对障碍人士友好，如果你希望使用大量酷炫的 CSS 技术，请同时考虑对屏幕阅读技术等的兼容。

---

2网站导航菜单设计原则

一、清晰可见

视觉上要容易区分并且能让用户一眼就能找到，导航文本与你的正文文本不要使用相同的颜色，字体和大小，导航文本应该突出和显眼。对于菜单按钮，使用高对比度颜色和清晰的文字。导航区域要保持一定的大小，用户容易发现，而且要设计在惯用位置，例如页面顶部、左侧等。

二、页面简洁

可以在垂直导航中添加更多的项目，但是主菜单中的项目不必过多，会分散用户的注意力。一般不要超过8项。

三、一致性

尽量在所有页面中使用相同的导航模式，这是非常重要的，因为没有一致的设计，用户可能会认为他在另一个网站。比如404页面的设计，如果网站风格都很一致，但404页面画风突变，可能设计师是为了给用户制造惊喜感，结果惊喜却变成了惊吓，导致用户认为他在另一个网站。

四、简单可点击

一定要简单易操作，能够帮助你的用户快速查看哪些信息可用，以及在哪里可以找到所要查找的内容。并且确保所有导航中元素可点击，在导航中使用多个分类目录时，所有标题元素都应该是可点击的链接。因为在使用下拉菜单的过程中，点击子类别链接也可能是访问者的自然倾向。

五、交互设计

“以人为本”是交互设计的前提，当人们点击或鼠标悬停在菜单项时，请确保提供下一步操作的指示。可以通过更改链接的文字颜色，背景颜色，或对其加粗，使其与其它内容不同，如此人性化的方式更能让用户愿意点击导航。

这些原则都是网站设计的基础，作为一个UI设计师一定要牢记。要知道，有的时候创新并不意味着用户会喜欢，但“以人为本”的设计作品，用户体验感一定不会差。多站在用户角度去做设计，就会找到方向。

---

3网站导航设计的基本原则

原则1：首先确定信息架构

规划一个大型网站，规划好内容是进行导航设计之前的第一要务。而我们此处所说的信息架构(IA，Information Architecture)，是合理的组织信息的展现形式，支撑起网站内容的骨架。信息架构的主要任务是为信息与用户认知之间构建一座畅通的桥梁。

从更高的位置来看待网站内容有助于信息架构的搭建。更重要的是，你得学会从用户的角度来看待网站内容。这也就意味着，有的时候你得站在正反两个位置来看待同一个东西，不同视角下你会发现有的内容的呈现方式非常反人类。你可以通过下面的问题来完善整个架构：

·哪些页面是这个网站必不可少的?

·从宏观架构上来看是否每个页面都有其独立的目的，它们的存在是否影响整体的连续性和可靠性?

·有哪些内容是需要在将来持续提供并更新的?

·网站所需要涉及到的用户群有哪些?(登录用户、订阅用户、广告商等等)

·针对每种用户，网站所要达成的目标是什么?

思考这些问题能够帮助你更好的完善网站的信息架构，为导航设计做好准备。

原则2：保持简单

绝大多数的网站浏览者可能会一致的认同这一点：网站的导航区域要尽可能设计的简单。的确，复杂而拥挤的导航栏设计会严重阻碍网站的整体可用性。

彭博的网站就是这样做的，用简单的导航栏设计来掩盖网站的复杂性。

然而，简单的设计还是具有欺骗性的。用户在随后的操作中会发现复杂的信息被以一种看起来简单的方式包装了起来。这就是信息架构的作用。

以微软的首页为例，网站的导航栏被划分成四个项目，考虑到微软庞大的产品线，这几乎已经被简化到了极致。也正是因此，每个项目的下拉菜单都被巧妙地分割成为几段，这样一来，导航的层级就清晰了，用户可以更快地找到他们想要的东西，而微软也可以将复杂多样的产品和服务，整合到一个看似简单的导航栏里面。

类似迷你站的子页面中，导航栏也沿用了相同的设计。菜单的设置乍一看和首页很相似，实际上设计者加入了更多细节，更有针对性的功能和服务。

总的来说，这样的导航栏设计更加易用了，在保持一致的前提下，也具备更好的预测性。考虑到微软的产品体量，产品所需的页面数，微软官网的设计很明显是耗费了大量时间迭代开发的产物，殊为不易。官网在这样的组织架构之下，不仅让用户的体验更好了，而且对于微软而言也更加便于管理内容。这不仅保持简单，也简化了复杂。

原则3：谨慎选择方向

传统意义上的电脑屏幕方向是横向的，这也使得纵向下拉菜单，在很长的一段时间里面成为了导航栏设计的主流方向。这样的设计，平衡且少干扰，从设计的角度上来看是不错的选择。

作为虚拟现实设备制造商的Oculus，将导航设计成为横向的非常符合他们的设备的自然逻辑。

但是横向的导航并不一定符合所有的网站的需求，这也是为什么你会看到那么多纵向导航的网站，尤其是在电商领域。彩色的标签被用来标识不同的品类，纵向的导航设计，与现实世界中的导购图册暗合。这样的导航符合多品类，多内容的信息架构，横向导航用在此处会因为品类和文字内容而产生混乱。

一个良好的垂直方向的导航，要设计好并非易事，尤其是当你的网站内容非常多的时候。Jack Jones 的网站是一个很好的学习对象。

网站导航中的小图标拥有不错的可读性，简单的形状包含了可观的信息，整齐而有力。每点击一个类别，菜单展开，显示子类，逻辑清晰。

当然，你还可以在Squarepusher 的网站看到相对不同寻常一些的纵向菜单设计。导航被设计成标签页，访客可以通过滚动切换，这是一种更为线性的导航栏设计。

结语：规则正在改变

新工艺新技术的不断涌现，使得新的设计趋势和新的挑战源源不断呈现在我们面前。响应式网页设计使得桌面上传统的横向导航在移动端呈现的时候，更多是以纵向导航的形式表现出来。导航的设计不再被固定的方案所束缚，多种多样的表现手法都可以产生不俗的效果。但是，设计和测试的迭代方法，还是围绕着网站转化率和统计数据来进行。

作为驱动网站发展的引擎，导航设计的好坏是可预计的，精心布置又简单一致的。

---

4网站设计的亲密性原则

亲密性的原则是指：将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。

在新手的设计中，单词、短语和图片四处分布，连角落也不放过，它们占据了每一处空间，以至于根本没有任何留白，这种情况比比皆是。看上去似乎是设计者们不敢留有空白，不过要知道，如果一个设计中充斥着太多的内容，这个页面会显色杂乱无章，客户也是无法从中很快找到自己所需要的信息。

如果某些信息项或组彼此之间并无关联，这些元素就不存在很近的亲密性(即不应靠近)，这样就能为客户提供一个更直观的提示，使客户就能马上了解页面的组织和内容。

在一个页面上。物理位置的接近就意味存在着关联(实际生活也是如此的)

如果多个项相互之间有很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。就像实际生活中一样，亲密性(即紧密性)意味着存在关联。

如果把类似的元素组织为一个单元，马上会带来很多变化。首先，页面会变得更有条理。其次，你会清楚地知道从哪里开始读信息，而且明白什么时候结束。

亲密性的思想并不是说所有一切都要更靠近，其真正的含义是：如果某些元素在理解上存在关联，或者相互之间存在某种关系，那么这些元素在是视觉上也应当有关联。除此之外，其他孤立的元素或元素组则不应存在亲密性，位置是否靠近可以体现出元素之间是否存在关系。

将有关系的项归为一组。如果页面上有些区域的组织不清晰，则要看看这些是不是存在本不该有的亲密性。使用这个简单的设计原则来管理空间，不仅会是的页面更有调理，看上去也更美观。

你可能会很自然地利用位置的紧密程度来反映元素间的关系，而亲密性实际上就是更有意识地这样做，并把这个概念更向前推进一步。一旦了解了各元素之间的关系是何等的重要，就会注意到亲密性的效果。而一旦开始注意到这种效果，就会利用它，掌握它，并施以充分的控制。

亲密性原则往往并非设计页面唯一的解决方法。另外三个原则在设计过程中也是不可缺少的。通常你会发现所有这四个原则都会用到。 一次只讨论一个原则，今天亲密性就先说到这里，明天我们继续。