MayaBox.com

导航条的设计

　　这次分享内容初衷是准备总结一下做个人网站至今的一些感悟，本来是想把历版的玛雅盒子页面拿出来，然后分别说说为什么改版，后来考虑到内容可能很乏味，改版效果也并没有全部保留，并且有时候改版也谈不上一个深的原因，考虑再三最终决定以一个切入点一个主题为主线顺带着说说这方面的内容，于是就有了下面这些。>>分享内容PPT下载

关于“导航条的设计”标题

　　现在标题为“导航条的设计”，需要特意的说明一下，最初定的标题为“导航的设计”。个人觉得“导航的设计”标题过于庞大，内容上也很宽泛，很难把它说得很透彻，考虑到水太深于是更改标题为“导航条的设计”，从无形的导航到有型的导航条，这样更方便直观的来阐述这方面的内容。

关于“导航条的设计”内容

　　为了使分享内容更形象更容易理解，特讲其整理为以下四个部分：
　　（一）aRui个人对导航的理解
　　（二）网站导航应具备的特征
　　（三）浅谈导航的形成
　　（四）导航条的视觉样式（范例）

（一）aRui对导航的理解

　　我个人所理解的网站导航就像是一本书的目录，通过对目录的阅读可以直接的了解到本书的大致内容，并且能够很方便的找到自己想要找的东西。
　　我之前在工作室的时候做过一段时间的教辅图书，教辅图书不同于其他类别的书籍，最明显的特征是结构相对复杂，层级关系很明确，并且和教科书有很高的相关度，图书目录很好的把该书的内容做了一个梳理，单从目录我们就很容易了解到整本书的内容结构，甚至是可以根据目录找到感兴趣的页码然乎直接翻到该页阅读，我认为网站导航条具备的功能也应该是如此。
　　一本教辅图书的结构大概是：

（二）网站导航应具备的特征

　　大概归纳为以下五点，理解上可能比较个人了一点，不过还是有些大同的东西。
　　1、结构一致（包括视觉和信息架构）
　　2、明确定位（这里只是的是用户的归属感）
　　3、简单高效（用户可以很简单快捷的找到自己想要找的东西）
　　4、清晰明了（不需要过多的思考）
　　5、用户习惯（特定用户的特征、行业网站的特性）

　　下面根据这五点分别列举一些例子：
　　1、结构一致
　　 新浪娱乐频道：结构混乱，过于跳跃，导向性不强，容易走失。
　　 在新浪娱乐首页点击导航条上的明星、电影会单独弹出页面，弹出页面的导航条样式上基本延续了首页的结构，并且用样式很清楚的表明当前页面所在，结构应该是“新浪娱乐>明星”，似乎是没有什么问题，好的，我们接着往下看，在首页点击音乐、大片等频道时也会单独弹出相关页面，新弹出页面导航全然找不到新浪娱乐的影子，页面设计风格也脱离了新浪娱乐，是一个完全独立的产品，这里面或许有公司运营方面的问题，但是作为用户我并不管这些，我只知道我从新浪娱乐来到音乐和大片，自然会理解为他们同属于新浪娱乐的一部分，但是在当前页面，就是找不着回去的路，我走丢了～～
　　PS：新浪电影左上角icon为新浪娱乐，新浪明星左上角icon为新浪明星，点击都是返回新浪娱乐的页面，或许这是个Bug，但是这么明显的Bug似乎是不应有的吧。

　　 再来一个我觉得处理得不错的例子，QQ会员页面，导航条上面有两类信息，通过视觉样式上的设计很简单的把它们区分开，并且在右侧频道类导航前面加上了高亮的“频道”字样以及三角形，很直观地进行了区分。整体上结合了书签样式，很好的体现了当前的位置，当点击右侧的频道栏目名称时，左侧的内容会收起来，同时展开点击的频道内容，并且头部大logo右侧也会添加一个当前频道的icon样式，整体切换过程中视觉结构保持了高度的一致，样式上也很明显的体现出内容的结构，我觉得很好。

　　2、明确定位
　　 这里明确定位指的是“用户的归属感”，就是说用户是否知道自己现在处在什么位置，下面是苏格兰皇家银行的网站截图，通过书签样式、文字颜色、辅助图形非常直观的告诉你当前的位置。

　　 找了一些比较常见的表现明确定位的形式，包括在logo旁边放文字、书签样式、面包屑、突出显示等等。

　　3、简单高效
　　 用户可以透过导航很简单快捷的找到自己想要找的东西，列举三例说明。首先是各种以产品为中心的页面，互联互通样式能够很直接的吧用户带到各处而不迷失。这里展示的是易车网车型频道和中关村在线的产品页面。

　　 门户类网站导航通常把网站的核心内容提取出来，用户可以很轻松的定位进入。这里展示的是易车网首页。

　　 网址站也是典型的导航类站点。这种类型的网站能够在当初一时火热，我想跟他带给用户简单直接方便的体验是分不开的。这里展示的是网址站的神话案例网址之家（好123）。

　　4、清晰明了
　　 大家都很忙，我们向前走的脚步越来越快，就算是浏览页面的方式都变成了扫描，所以导航的设计更应该是清晰明了、一目了然的，无须用户过多的思考，要让用户清楚的知道这个链接点进去大概是些什么内容，鼠标触发可能会是一个什么响应和后果。
　　 下面是网易新闻频道的导航栏样式，逆常规的把新闻关键字放在了导航的位置，点击关键字进入的是新闻最终页面，这么做究竟是好还是不好呢？分享会上有人说这种做法很变态，也有人说自己上网易会首先关注这一块并点击查看，你觉得呢？

　　 上面这个是内容方面的，这里再来一个视觉方面的例子。中关村商城首页左侧的商品分类导航，在没有进行鼠标游走的初始状态下，我并不以为“手机、GPS、数码相机、摄像机……”这列灰色的字是可以点击的，因为他事先已经告诉了我蓝色字样式带链接字样。另外鼠标悬停在“手机通讯”上，右侧会出现一个浮动层，也比较的意外。

　　 这部分的示例并没有完全表达出aRui所想表达的意思，个人以为不止是导航条乃至整个网站各页面都应该是非常容易读懂的，除非你是在跟你的网站浏览用户捉迷藏，并且你确定他很愿意。回想一下你曾经是不是上过这样一个网站，你需要多次点击才能展开导航内容，需要看完大段的动画才能进行下一步，需要鼠标尝试性的到处游走才能找到链接地址，需要仔细的阅读理解上面的文字才能清楚网站内容的逻辑关系…… 天哪，好累！前几年有些视觉型的个人网站在这方面很突出，应该不属于这一类，不过现在他们已陆续消失。

　　5、用户习惯
　　根据网站的行业特征和网站针对的特定用户群体而设计导航。我们可以试着看看同类型或同行业的网站导航，会发现他们有些非常相似的地方。这个不止是因为各行业都有一些自己特定的内容，特定的用户群体也有一些惯有的习惯，比喻说我们经常去的酷站类站点，他们总是会以颜色色系来区别分类网站，或者是以网站性质来区分。下面列举两例，自己来看看吧。

商务类网站：淘宝和拍拍

汽车类行业网站：易车网和太平洋汽车网

　　（三）浅谈导航的形成：从“玛雅盒子”说起，浅谈导航的一个形成过程，该篇分为初衷、归纳、分类、细化、成型。
　　（四）导航条的视觉样式：归纳导航样式分为六个类别，分别为顶部导航、左侧导航、花式导航、书签导航、亚马逊式导航、没有导航，并以众多大公司网站为范例。

　　 最后这两点在这里就不细讲了，主要是这两部分都是图片示意型的，看PPT文件很容易明白，aRui就不在这里废话了，有兴趣的朋友可以下载来看看，分享内容多有不足，敬请谅解，并欢迎补充及指正。

日志标签：aRui's Design, aRui分享, aRui言论