网页设计中的导航设计讲解(附案例)
⽹页设计中的导航设计讲解（附案例）
⾸先呢，让我们回顾⼀下过去的各种导航列的样式吧。
在⽹页设计中，我们仅需要⼏秒钟就可以从导航浏览到内容。你需要很棒的⽹页内容来推销你的想法，但如果⽤户没办法到他们需要的资讯，内容写的再棒都没⽤。
当然，我是⾃学的，⼀开始对于导航也是⼀⽆所知。在下⾯的章节，我会解释⼀下这件痛苦的事。
导航，就我所知就是：你需要⼀些⾸页（Home Button）、关于我们（About us）、联络我们（Contact us）的链接，再根据不同的⽹站需求增加新的按钮。最重要的是，这些按钮必须看起来很漂亮。
我开始学⽹页设计是在Photoshop 刚出来的时候，那时候真是⼀段美好的时光啊！那时候做⽹页设计，你需要学的只有⼏个教学影⽚跟⼀些切PSDs 图档的⼩常识。那时候有⼀些输出很烂的HTML 跟少数的iframe，还有⾃由使⽤的Flash。对！
DreamWeaver 跟Frontpage 不能正确的显⽰我⽤Photoshop 做的设计图档，他们的HTML 跟Java 导览列让我的表格变得乱七⼋糟的。如果我想让我的悬停效果在所有浏览器都可以起到作⽤，我就必须⽤Flash 来建造我的导览列。
注意，只有导览列喔！即使我后来学了CSS，我还是维持这个坏习惯好⼀阵⼦。因为我觉得：Hover 效果那时候还不能在每个浏览器都运作得很好。能够稍微安慰⼀点的是，那时候专家也不能更好的解决这个问题。
记得那时候⽤Photoshop 设计师，常常把图⽚当成按钮的背景，即使他们没有使⽤Flash，那时候有些公司不得不在导航链接⾥置⼊他们的公司logo。我甚⾄不想列举在基于Flash的⽹站的⽇⼦创造的那些反⾯例⼦。
过去的导航设计就像杂乱的丛林：
还记得这个导航吗？我是说以前的⼤⽹站会出现的⼀整排长长的链接。他们通常放置在页⾯的左侧，并链接到营销部门可以想到的每⼀个营销点⼦。「⽹络战略」的想法⼏乎是不存在的，那时候公司只是把⼀切可以放到⽹站上的链接都放上去，看哪些可以会留住⽤户。
这导致导航变得⾮常、⾮常的长。当⽹站变得⾮常糟糕的时候，他们就采⽤树状的列表。这个样式⾄少对有些⼈来说满熟悉的，他节省了⼀些管理⽂件的时间，但还是⾮常笨重。
接下来是站点地图。
在有搜索、基于上下⽂导航、分类导航的⽇⼦之前，还有⼀段时间使⽤站点地图。对⼀些年轻⼈来说，
这个页⾯是专门⽤来列出全部的外部链接并加以分类的。现在还能到⼀些⽹站⽤这种导航，它会让搜寻引擎更容易抓取你的内容。
导航⾄今经历了很长时间的变化，但还有很多⿇烦需要克服。事实上，这是⼀个必须为每⼀个⽹站解决的问题，且这些考虑只会更加复杂。
时代变化了
在科技的世界，不断的进化是唯⼀的真理。但想要了解我们从哪⾥来、我们该往哪⾥去，应该要先去了解为什么导航改变了。导航的标准实现的改变有三个主要原因：
1. ⽹站同时变得更⼩了，⼜更⼤了。这很复杂。
好的，⾸先是⼀般的指南⽹站（很⼤部分的⽹站都是这种的）变得更⼩了。很多公司不需要多于⼀页的⽹站去呈现他们
好的，⾸先是⼀般的指南⽹站（很⼤部分的⽹站都是这种的）变得更⼩了。很多公司不需要多于⼀页的⽹站去呈现他们的想法，但是即便是那些还坚持⽤标准五页式⽹站的⼈，也不再像以前写论⽂般的⽅式编辑关于我们About 页了。客户没有时间去写那些东西，顾客也没时间看，设计师当然也没那个闲功夫啰！
这种⽹站使⽤⽂字区块的数量直线下降，谢谢⽼天爷！我的意思是，我们需要知道的只是在卖什么东西、在哪⾥卖和价格。然后不要忘记联络⽅式跟社交媒体的链接。这样，⽤户可以更快到他们要的资讯。
从另⼀⽅⾯来说，⽤户很友善的CMSs ⼤量兴起，为终端⽤户提供了⾃⼰建⽴⼤规模⽹站的能⼒。。⼤型博客⽤WordPress和⼀个主题就可以制作。维基记录了⼏乎每⼀个可想到的知识产权。
在企业级，我们有Facebook和其他⼤型⽹络应⽤程序。这些东西的导航基本上遍布整个页⾯，因为没有哪⼀个菜单可以带你去任何你想去的地⽅。
2. 设备改变了
⼩屏幕的装置变得到处都是，它们变成各种你可以想像得到的尺⼨。导航系统就像其他⽹页上的元素⼀样，它们必须要适应每个不同的状态。但是对于导航来说这稍微有些难，因为“那就把它竖过来堆叠吧”并不总是⾏得通的。
这让各种新形态的导航，特别为了适应⼿机跟各种尺⼨的屏幕应运⽽⽣，也已经有很多成功的例⼦了。
3. ⽤户也改变了。
电脑，不再只是⼀个资讯狂热者或是需要电脑⼯作的⼈专属的领域了。
发达国家的每个⼈都以某种⽅式使⽤着计算机，⽆论是控制台、图书馆中过时的台式机、或是他们的⼿机。尤其是智能⼿机在世界各地的传播，在某些地⽅⼏乎是连接互联⽹的唯⼀⼿段。
因此，我们的⽤户⼏乎囊括了仍然不太会使⽤⿏标的⼈到那些刚接触技术世界的⼈。随着我们对⽤户的了解，我们⽤更直观的⽅式去建⽴⽹站。我们的⽬标不是在⽹站上马上显⽰他们想要的⼀切信息，⽽是在他们需要的时候向他们展⽰他们需要的信息。
⾝为⼀个PC⽀持者，我实在很不想承认这点⋯⋯但不得不承认Apple给了我很⼤的帮助。在OS系统⾥，到达想要的⽬标，最多仅需要三次的点击，这个想法启发了很多⽹页设计师。但是我们可能还没有在所有情况下实现这个⽬标，⼀些⽹站和应⽤程序⼏乎和通常的操作系统⼀样复杂。
现在的导航
好的，这部分会有⼀些漂亮的图⽚。我们来看⼀些现在的导航模式吧，有些是已经使⽤很久的样式，到现在还是可以运作的很好、有些是全新的，还有⼀些是现有的导航模式基于相应的应⽤场景做了⼀些调整后的产物。
1. 简单的导航 Plain Navigation
这是经典导航模式，在⽹页上⽅放置⼀排竖的或横的链接清单。这个样式从来没消失过，只是⽐以前更
简洁了。
它常被⽤于⼩型⽹站，通常是⼩册⼦⽹站（brochure sites）和电⼦商务⽹站，他们的列表通常较⼩因⽽这种导航⾮常适⽤。
2. 隐藏导航 Hidden Navigation
现在任何事都以移动端⽅案优先的情况创造了这个隐藏导航。这个概念也渗透到PC的⽹页，有些设计师甚⾄为了五或六个链接就制作了全屏菜单。
这听起来是不必要的，但我认为⼀旦你隐藏了你的导航，相对的菜单就会变得很⼤。事实上这⼀点也不会影响可⽤性。
这听起来是不必要的，但我认为⼀旦你隐藏了你的导航，相对的菜单就会变得很⼤。事实上这⼀点也不会影响可⽤性。
⽤这个Awwwards 案例来说，隐藏导航是很合理的。因为它们有⼀个需要⼀定空间来⼯作的复杂的下钻菜单。
3. 混合导航 Hybrid Navigation
在较⼤型的⽹站跟某些⽹络应⽤程序上，通常需要多种导航⽅式。⼀个简单的例⼦是It’s Nice That，它的左上⾓有⼀些主要的导航链接，然后将⼀个更全⾯的链接列表藏在了汉堡包按钮的背后。
想要更改浏览⽹站语⾔、申请⼯作，或是阅读隐私权条款当作娱乐的⼈（真的有⼈这样吗？）也许可以从那⾥开始。4. 分类导览 Taxonomy-Based Navigation
如何做网页你可以在博客、新⽹站，或是Pinterest 中到这种导航。
这是因为要引导你的⽤户浏览分类的帖⼦和其他信息集。⽆论是按主题、⽇期、标签或诸如此类的⽅法进⾏分类，都是为了帮助你到更多相同类型的内容。
5. 实验性的导航 Experimental Navigation
这不是指任何⼀个特定的设计样式，⽽是他们的集合。我喜欢把他们称为「作品集导航」，因为通常这种导航都被应⽤在作品集⽹站中，设计师可以在这边⾃由发挥创意。它通常没有任何传统菜单或是将菜单项分散在页⾯周围。⾓落是相当普遍的选择。
它通常⽤了⼤量的Java ，⾼度展⽰个⼈喜好的布局⽅式，还有⼤量的动画。。这种导航⽅法通常在⼀定程度上会降低可⽤性，但不能否认的是这种效果通常是新颖⽽富有创造性的。
未来的导航:
不久后的将来:
你想看见怎样的导航呢？去做吧！不然我想⼤家应该会继续在响应式设计、符合任何屏幕⼤⼩装置的导航做努⼒吧，因为他们必须这样做。毕竟，标准化的屏幕尺⼨的想法早在很久以前就化为泡影了。
我认为⼈们将开始意识到为桌⾯和各种移动端的导航解决⽅案可能需要⾮常不同，特别是在⼤型⽹站上。因此，例如下拉菜单变成后来的下钻菜单（drill-down menu），或者更适合⼩屏幕的其他形式。
我觉得⼤家相信虚拟现实（VR）会改变我们设计的模式，但我提醒你，我不认为VR 真的会改变什么。这是⼀个让你或多或少的逃离真实世界的系统，并不是你真的在移动。如果VR 要发展，就需要和众⼀起发展，⽽且使⽤者不是住在办公室的书呆⼦，或是在家办公的⼈。
不过呢，⾄少现在⼈们真的很希望VR 能够成为下⼀个，能够影响我们⽹站设计的⼤趋势，这不是⼀件坏事吧。
多少预测⼀下未来:
对⼤多数⼈来说增强现实技术（AR）是很实⽤的。他是从Google Glass 这个可怕的接收器开始的，有⼀个很艰难的开端。然⽽，在它以更加公众友好的形式(如宠物⼩精灵Go)出现时它迅速的发展起来了。（尽管之后我们在⼀些地⽅看到了⼀些对于PGo的过分热情。）给⼈们适应的时间，我们可能开始看到
那些（不会让⼈们被抛出餐馆的？don’t get people thrown out of restaurants）AR专⽤设备。
另⼀件事则是⾃动化会越来越多。⾃动化住宅、⾃动驾驶，以及越来越多不需要触摸就可以互动的装置。
随着Siri 跟Cortana 这样的虚拟助⼿智能越来越智能，⼈们获取信息或是与⼈沟通都将越来越不需要通过与他们的设备进⾏物理交互。我们现在已经有了很多基本的语⾳命令系统，我认为他们只会变得更加⾼性能。
现在，这不会是每个⼈与他们的设备交互的⽅式，但我强烈怀疑，在未来⽹站导航将需要⾄少要像机器友好⼀般的⽤户友好。有⼀个挑战 -- 导航需要有趣。
你对未来有什么看法呢？
作者：Ezequiel Bruni
戳“阅读原⽂！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。