[Web] 网站导航设计 Design Navigation (1)

时间：2023-09-14 02:00:02 | 来源：网站运营

时间：2023-09-14 02:00:02 来源：网站运营

[Web] 网站导航设计 Design Navigation (1)：

什么是网站导航 Navigation

说到navigation，大家往往就会想到（导航栏）navigation bar。其实呢～广义的navigation（网站导航）包括导航栏，链接，按钮，和任何其他可以点击的项目。它们各有优势，通过互相协作，不仅帮助用户方便清楚地浏览网站内容，更发挥了其它丰富的作用，比如说方便用户寻找他们需要的内容和功能，展现信息的更多内涵，展示网站内容之间的相互关联，甚至帮助人们找到他们之前并不了解的信息……一个清晰合理的导航设计可以帮助用户和网站更好地实现目标。

不同种类的导航（针对Desktop）

• 导航栏－Navigation Bar
  

水平导航栏 Horizontal Nav Bar适用于：

1. 只有少量的top－level items
2. 不会有需求增添新的项目
3. 名称短小精悍
4. 不需要将网页翻译为其它会使用长词语／短语的语言
   
5. 想要尽可能地不占用主要内容所占的屏幕宽度

相对应地，垂直导航栏 Vertical Nav Bar适用于有很多items需要列出；需要增添或减少导航栏中的内容；有翻译网站的需求；有很多层级的内容。

• 倒“L” —Inverted L

同时具有横向和纵向的导航栏。这样的导航结构常适用于内容非常复杂信息量大的大型网站或者有很多subsites的网站。

• 选项卡—Tabs

横向导航栏的一个变体。适用范围和横向导航栏相同，选项卡结构下往往会有第二个层级的导航。设计时要注意凸显出两层导航之间视觉上的联系。

• 下拉菜单—Drop-Down Menu

下拉菜单同样属于横向导航栏的一个变体。当鼠标悬停在导航栏上的项目时，下一层级的导航内容就会出现。 下拉菜单可能会面对的问题是当显示屏幕不够高时，最下面的内容可能会无法显示出来；如果下拉菜单出现得太快或者太慢，也会使可用性大大下降。所以在发布之前一定要做好充分的用户测试。

• 侧面展开－Flyout
  侧面算是竖直导航栏的一个变体吧。当你点开Amazon横向导航栏中的departments后，各个department具体的细节就采用了flyout。flyout可以用于展示多层关系，但是它和drop－down存在相同的可用性问题，设计是要尤其注意。
  

• 整页—Whole Page

有的网站使用整个页面来作为导航。这种情况下，导航往往和graphic element结合在一起。使用这种导航的网站，在分页面通常都会再使用其它的方式来帮助用户navigate。常见于趣味性较强，内容较为简易，各个内容之间联系紧密，受众比较年轻的情况。举个例子：

The Adventure School
• 页面显示导航项目－Page body navigation

页面显示导航项目提供了很多的自由度和衍生了很多的变体。它尤其适用于database－structure的有大量信息内容的网站。在这种情况下，用页面本身导航比使用一个非常长的navigation bar要游有用很多。举个例子：

http://www.bbc.co.uk/tv
• 超链接－Contextual links
使用大量的链接作为在页面内部的导航。最典型的例子就是维基百科了～当使用这种导航方式的时候，设计是要注意：保证链接可以清除地与其它内容区分开来，保证链接的描述或者label要能够清除地说明它所指向的内容。

• 汉堡－Hamburger Navigation

随着移动端的普及，很多网站的desktop version也采用了汉堡隐藏导航内容的设计。这样的设计往往适用于creative side。可以帮助用户集中注意力在你最开始展示给他们的内容并且让页面显得更“干净”，很多agency的页面往往会这样设计。但是如果你的网站更偏向于让用户通过网站上的内容实现具体的tasks而不是偏重于展示，汉堡导航就不能说是很好的一种方式了。


在CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA 里面，除了这里列出的比较常见的导航方式，经常会有很多精彩的有趣的导航方式。可以多看看～结合页面内容，想想各种导航适用的情况，想想优点缺点～

之后如果遇到新的内容，我会在这里补充进来～:-)