网站导航设计经验:清晰的导航能够让...（精选7篇）由网友“放学别跑”投稿提供，下面就是小编给大家带来的网站导航设计经验:清晰的导航能够让...，希望大家喜欢阅读!
篇1：网站导航设计经验:清晰的导航能够让...
文章描述：网站导航设计经验分享:清晰的导航能够让页面简单易用.
导航是互联网产品中应用最广泛的基础元素之一，引导用户了解到网站的内容结构进而找到所求，作为基础控件，导航看起来简单，但却是产品设计中最复杂繁琐的一部分。因为我们想要让网站结构更清晰、想要向用户传达所有的信息，所以就赋予了导航越来越多的内容，使他们庞大异常，十分纠结。简化了，用户无法了解到页面结构以及自己的处境，产生困惑；复杂了，导航臃肿不堪，层峦叠嶂，既不美观也不好用。
那么，在清晰的信息架构下能不能让导航尽可能的更轻便、更灵动，是笔者本文想要探讨的话题。笔者看来，为导航塑身可以从以下几个角度来进行：1.简化结构；2.优化形式；3.打磨UI。
网站作为信息的集合体，要囊括海量的资源，从首页到二级页再到专题页进而底层页等等等等，信息的层级多且繁杂，所以就容易形成tab套tab再套tab的局面。那么作为导航塑身的第一步，我们要做的就是把这负责的结构尽量简化，让导航变得轻盈起来，或者至少看起来不那么臃肿。
A． 通过面包屑来简化导航结构
面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径。
一个门户网站常见的结构是首页-频道页-专题页-子专题-底层页。如果我们想在门户网站看NBA的视频直播，那么我们来看下他的导航：
如果把信息层级全部展现在用户面前，就会形成上面的这种tab套tab的形式，使得导航臃肿不堪，占据页面很大的空间。可是如果我们把用户关心的导航内容提取出来，就会得到下面的结构：
再扁平化一下：
这就是清晰的面包屑导航。综上，面包屑导航能够让复杂的层级结构扁平化，使得导航更加轻盈。
面包屑导航还有一些变体，是基于用户线性操作逻辑衍生出来的。在无线端产品中应用更为广泛，因为移动设备的显示区域有限，无力支撑庞大的导航结构。在用户点击当前导航内容后，当前导航消失进去下一级导航，并提供返回按钮。
当然，使用面包屑来简化导航结构也是有条件的，不是所有的导航层级都可以用这种方法来简化。面包屑导航更符合用户线性思维导向下的操作逻辑，例如，用户想要看NBA直播，那么他一定不关心娱乐圈发生了哪些八卦，也不care足球或者网球有什么新闻，CBA，CUBA他可能也不十分在意，那么面包屑的线性导航就可以满足用户的需求。或者是由于空间或者设备原因，我们无法提供更为详细的导航，而采用线性简化导航的处理方法。
B． 合并导航层级
导航的庞大往往是由于层级过多导致，那么减少层级的一种有效方法就是合并导航层级，例如把二级和三级导航合并，就减少了三级导航，让导航轻便一些，
如上图，图片库包括动态图片和静态图片，每个分类下面又有小的分类，这样的导航层级在产品中十分常见，略显臃肿。那么通过合并层级就可以把导航精简到两级，处理后的导航如下：
瘦身后的导航看起来结构也比较清晰，而且没有影响到信息的传达。
对比下美团和糯米的导航：
美团把注册登录和个人信息等功能性导航和网站主导航做了合并处理，为网站首屏节约出了宝贵的空间。
C.隐藏部分导航
简化导航结构的第三种方法是把部分层级或者导航内容隐藏起来，使得导航看上去轻便一些。
当导航里的内容特别多的时候，可以选择把主要内容留下，次要内容隐藏的方法来处理。例如：
当页面空间有限，无法容纳更多层级的时候，可以选择把次层级隐藏收起，鼠标滑过或者点击后触发此层级的方法处理，这样的例子有很多：
2.优化形式
有些时候，我们无法判断用户在浏览产品或网站时是否是线性思维，也无法对导航结构进行再精简，那么我们怎样让导航再“瘦”那么一点呢。
A．将一维导航变为二维导航
将一维导航转化为二维导航，能够有效的减少层叠导航带给人的重复感和复杂感，能够让操作富有变化，进而提升体验。
类似的列子也有很多：
B.将复杂的层级单独处理
当某一层级的导航内容丰富到一定程度，他就可以充当一个独立控件来单独设计了，他们可以作为页面的元素来单独存在，可能看起来都不太像是导航。
3.打磨UI
说到让导航轻盈，UI是最为常用的手法，在此笔者不做太多的陈述，但是需要注意的是，导航的轻盈与否与导航所处的页面以及重要程度有很大关系。比如在首页，用户需要对页面有整体认知的情况下，导航的UI就不能改太轻薄，而是应该先声夺人，让用户直接注意，并浏览发现所求；同样的，当用户进入到相关的页面开始浏览时，导航的作用就是路灯和司南，这时的导航就不如在首页时那样重要，那么导航就需要轻轻的、悄悄的在用户旁边随时等待着被注意并使用。
电商首页的导航UI上吸引了不少眼球，但是到了结果页导航变成了几乎没有装饰的效果，因为在结果页，用户主要是来浏览产品，所以导航的作用就弱了。
综上，是笔者对导航塑身的一点认识，清晰的导航能够让页面简单易用，反之也会大大影响页面的信息流畅度，所以在导航设计时要精心处理，一点浅见与大家分享。
篇2：网站导航设计浅析交互设计
一说到导航每个人都不陌生，如amazon的Tab式导航、网站地图、软件中的菜单导航、索引表等等，导航设计看上去非常的简单：无非是页面上放置一些链接，通过这些链接用户可浏览和使用整个网站。事实并非如此，导航设计是非常复杂和严谨的。 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性：
任务：设计一个网站导航
目标：1、提供给用户方便的网页间跳转的方法
2、能够表达出页面之间、页面与内容之间的关系
分析：人本能的具有空间感。想象一下你现在坐在家中的沙发上看电视，突然有访客，你起身会向哪个方向走去？高中时的挚友是坐在你的前面还是后面？——不用问大家都能会快的回答出来。
同样我们在设计网站导航的时候一定要清晰地告诉访问者“他们在那哪儿”和“他们能去哪儿”
用户需要知道他们在网站信息空间当前所处的位置，我们也希望能帮助用户建立网站空间感，通过我们设计的导航系统。(之所以称为导航系统，是因为仅仅靠某一种导航模式是无法完成目标的)
设计方案：提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航
全局导航：
从网站的最终页面到达其他页面的一组关键点，无论你想去哪里，都可以在全局导航中最终到达，
局部导航：
提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。
辅助导航：
提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。
上下文导航：
用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似，这里就不再画了。
友好导航：
一些用户通常不会使用的链接，确实需要时又能快速有效的帮助用户。例如：联系信息、反馈表单和法律声明等。
远程导航：
独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。
通过上面这些导航的设计，可以看出一个完整的导航系统设计是非常复杂的和严谨的。
本文来自：导航设计浅析
篇3：移动网站的导航设计
导航是互联网网站最重要的组成部分之一，它涉及到产品的信息架构、页面布局和用户交互行为等诸多方面，一个网站用户体验的优劣往往和导航的优劣有密切的联系。
随着移动互联网的发展，越来越多的网站以移动网站的形式移植到手机上。在网站移植过程中，导航的重新设计有什么变化和设计要点呢，本文尝试做出一些研究。
导航的目的
在研究导航之前，我们不妨从导航的使用目的谈起。如果把网站比成一座大厦，那导航可认作是大厦内的指引系统。导航的使用目的归纳起来主要有以下几个方面：
1. 引导用户在网站页面间移动和浏览，提供获取信息的路径。全局导航、局部导航等都是为了用户浏览相关的页面提供引导，方便用户找到所求。
2. 理清网站各部分内容之间的关系，使用户了解网站全景。最常见于全局导航和站点信息导航，它们展现了整个网站的目录信息，用户可快速理解网站结构，对网站有整体的把握。
3. 定位用户在网站中所处的位置。这个功能常见于面包屑和相关导航中，它帮助用户识别当前浏览的页面与网站整体内容间关系，使用户了解当前页面和网站其它内容的联系和区别。
导航变化的原因
从PC端到移动端导航变化的原因归根结底是由物(设备的软、硬件差异)、景(使用情景和操作方式)、事(用户需求和使用目的)差异。这些因素相互交织，对移动终端的导航设计有显著的影响。
本文尝试从类型、内容、样式等方面结合实例来说明PC端到移动端网站导航设计的变化：
一、常用导航类型变化
网页导航的划分有不同的维度。网页导航按照作用范围的不同可以分为三大类：结构性导航、关联性导航和公用程序导航。根据《web 导航设计》，三者的关系可描述如下：
根据外在形式的不同，网页导航通常又可以分为顶部横向导航、侧边栏导航、Tab标签导航、面包屑导航、页内锚点导航等多种形式。
由于移动终端特性，移动网站可以采用的导航种类较PC端要少很多，主要有纵向导航、分类链接导航、Tab标签导航、相关导航等。
下面就常用的移动网页的导航形式进行一些介绍：
纵向导航
由于移动设备更适合纵向的浏览方式，PC站点的顶部横向导航和侧边栏导航在移动端通常转变为纵向导航。例如下图dell 和hp的移动版网站设计中，均采用这种转换方式，较好地完成了导航的迁移。
分类链接导航
常见的是在首页设置分类链接导航，将网站的主要模块入口放置在主页顶部。如果分类太多可以加入“更多”入口，在更多页面将所有分类全部展现。 图标导航是文字链接导航的衍生，它更适合在触屏手机上，方便用户用手指进行操作。
Tab标签导航
支持HTML5特性的高端机型通常可以实现页面的局部刷新。通过Tab的应用，导航可以在有限的页面空间显示更多的内容。例如 Myspace顶部的导航设计：三个主导航下面各有3-4个二级导航，展现了网站的主要功能。
相关导航
相关导航一般出现在正文页，推荐与当前页面相关内容，向用户提供类似内容，提升用户粘性。例如百度知道和BBC新闻均在阅读正文页提供了与当前内容相关的推荐。
页内锚点导航
页内锚点导航是移动终端特有的导航方式之一，它可以使用户快速到达页面顶部、底部和相关板块，
例如BBC在底部有返回顶部的快速链接TOP，而谷歌新闻则提供了不同板块之间快速跳转的锚点导航。
面包屑导航处理策略
面包屑作为一种有效的导航处理策略在移动端使用频率也比较多，但由于移动端屏幕横向宽度有限，通常的处理策略是：保留关键的路径，例如首页、主栏目、关键版块等;如果当前页面标题过长，可以在面包屑上以“本文”或者“正文”表示。尽量控制面包屑在一行之内显示。
二、导航内容的组织、缩减和隐藏
组织与缩减
导航再设计过程中，必然有导航信息的缩减和重新组织。筛选的标准往往有：
1)用户需求的强度，可以用pv，uv等数据进行判断。
2)与移动使用场景的契合度。例如拍照、语音等功能的入口。
3)用户操作便利程度。
其中第三点往往容易被忽视，亚马逊的移动版在PC版的基础上对导航的内容进行了合并和删减，控制了信息量，使之更适合用户在在移动终端浏览。例如将电器&电脑这一条目在移动端拆分为两个条目(电器、电脑办公)，并使子项目的数目由17条缩减到7条。一定程度上也符合了移动端神奇数字7的原则。
导航内容的隐藏
在导航内容重要性不分伯仲的情况下，常见的处理方式是将相对重要的内容展现出来，而将其它内容放入“更多”，用户可以点击“更多”在当前页面展开或跳转至更多页面。
三、导航样式的变化
利用系统特性变形
常用的变形方式有：
1) 调用系统控件
通过结合移动终端的控件特性，可以在较小的尺寸范围内完成导航的再设计。如上图cnet移动网站中，导航内搜索框用搜索按钮代替，二级项目改用下拉选择器，充分利用了移动端控件特性。
2)利用系统交互特性
Sevnthsin的首页导航设计巧妙地应用了触屏手机可拖动元素的特性。用户拖拽相应的图标到中心圆点位置即可完成导航，进入该网站。
动态效果的变化
Web动态导航菜单也叫浮出菜单(fly-out menu)或弹出菜单(pop-up menu)，通常是鼠标悬停或者点击导航选项时出现。在PC上动态菜单一般为横向或者纵向展开。
在移动端：
1) 低端机，不支持折叠展开效果，原网页动态菜单通常处理为列表形式。通过按键控制光标逐步移动选择每个子项目。
2) 高端机，处理成手风琴折叠(Accordion)或者层级目录形式，通过点击展开二级项目。
手风琴折叠的优点：不用跳转页面;缺点：次级展示内容有限;
层级目录形式的优点：可以展示较多内容;缺点：需要进入下一级页面。
下图中亚马逊的导航采用了当前折叠展开的方式而ESPN的则采用了层级导航方式。
四 、总结
在PC端向移动端转移过程中，页面产品的导航设计要对原导航进行删减、隐藏、组织，特别要把握用户本质需求，结合产品使用场景、用户需求、软硬件特性等进行导航的再设计。
参考文献：《Web导航设计》 James Kalbach / 李曦琳 / 电子工业出版社
篇4：关于网站导航设计的探讨网页设计
许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕，这篇文章，我们尝试就网站导航交互做一些探讨。
首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。
优化网站导航设计的目的
一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用户转化率。
如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。
1） 决定用户在网站中穿梭浏览的体验，这一点是最基本的。
2） 网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。
3） 合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。
4） 促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。
5） 提高网站广告价值，增加网站广告收益。
……
网站导航的常见结构
雅虎的网页设计一直是国内众门户模仿的对象，我们首先来看看Yahoo网站现有的几种导航样式：
1） Yahoo首页 （最常用的栏目导航）
Yahoo首页左侧的导航列出了网站最常用（或访问最频繁，或网站运营最想让用户知道）的几个栏目。这种导航（也包括网页顶部横向结构）是目前互联网中使用最广泛的导航方式。
2） More Yahoo！Services （更多的导航信息的展现）
Yahoo作为一个全球大型综合门户网站，所提供的服务肯定不止首页左侧导航显示的那几个，那么更多的服务如何导航？同时又如何展现给用户呢？于是Yahoo的设计师们给我我们一种解决方案，如上图，点击从网页左侧展开一浮出层样式的服务导航页面。可以发现，这种导航也是多维度的（下面我们会专门探讨）
3） Tab式位置导航变体
我们还可以在Yahoo！TV 等栏目上发现这样有趣的导航结构，我们暂且认为他是Tab 式结构加上一个下拉菜单的一种导航组合。
nTV Home – Shows – American Idol – Overview 组成了一个单维度的导航
nTV Home同时提供了下拉菜单方便用户快速的转到其二级栏目下。
（这里我遇到一个困惑，在这里我不知道怎么TV Home上一级的目录是什么，也不知道如何返回。）
4） Amazon首页
Amazon可以说是在网络产品导航上的鼻祖了，让我们再来看看Amazon的导航样式又有什么特色。
看看它和谁最像？
5） Amazon购物列表页面
由Amazon购物列表页引申的讨论：
单一维度 和 多维度的导航结构
我们通常认为面包屑导航为单一维度的导航结构，如上图红色实线框所示，即它是一种线性的导航方式，
不过在网页的应用中，“面包屑”导航的应用有两种：
a)“追溯来路”即跟踪用户行为，记录的用户在网站的活动足迹的一种“线性导航”，
b)用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的层级归属关系.
而改网页左侧的导航却提供多种维度的导航，且这多种维度可以组合成不同层级的面包屑结构
如，我想买一台LCD平板电视，进到了：
Electronics › Audio & Video › TVs & HDTVs › Flat-Panel TVs › Flat-Panel LCD TVs
在这个页面上，左侧导航给我提供了品牌、供货商、价格、显示屏尺寸……等多种选择。
我可以先选品牌再选尺寸，如：
也可以先先尺寸再选品牌，如：
因此这种方式为用户提供了多种维度的导航，运行用户如在电器超市随意逛逛挑选商品，而不必考虑该先问导购员有什么品牌还是问有什么尺寸好。这一点符合用户的心理模型，值得设计中借鉴。
网站导航设计需要注意的问题及基本原则
我们就网站组日常需求中，有关导航的交互设计工作进行了交流，总结出在网站导航设计中需要注意的几点问题及基本的原则。
1.导航条的位置。主导航条的位置应该在接近顶部或网页左侧的位置，如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条。
2.导航使用的简单性。。导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航，如果没办法一定得用，那么菜单的层次不要超过两层。
3.面包屑导航。应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么，例如通过辅助导航“首页 >新闻频道 >新闻全名”里的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。
4.导航内容明显的区别。导航的目录或主题种类必须得清晰，不要让用户困惑，而且如果有需要突出主要网页的区域，则应该与一般网页在视觉上有所区别。
5.导航和排序的区别。导航和排序容易混淆，需要留意（看图指出问题）
这里的tab是导航还是排序？
Google Reader上的处理
6.准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。
本文出自：webteam.tencent.com/?p=156
篇5：简简单单黑下 导航网站
其实我是看到Net user空间的日志了= ，= 于是手贱想试试，就有了下面的故事。
首先我看到网站，直接看了旁注，个人感觉主站没希望~
看到是Discuz直接进了uc_sever admin弱口令进去了= =。
看了一下数据库，竟然不是root~ 他的服务器上只有两三个站，我还以为会是root呢 = =。
果断改了一下管理员密码，
果断拿到数据库的密码，虽然现在还没有用，先留着吧~
看到这个，感觉插马拿shell是有希望了，于是信心满满~
当时我就恶心了= =，
然后把主站拿工具扫了一下~
收获果真不小，于是拿到了绝对路径~
然后又发现一个文件，
果断看到了serv-u 各种弱口令+默认密码无果~ 放弃了这样，再去用工具扫扫~
看到phpmyadmin ，我突然有希望了，然后root的弱口令各种无果， 就登陆了刚才的uc_server的帐号~
或许是我对root情有独钟吧，总是想要root= =。于是就看了看。
拿到密码去解密
可惜啊 ，大半夜的谁会帮我？ 没人在啊？ 大家都去睡觉了。
我一直担心的是phpmyadmin如果直接弄估计权限不够，但是还是试了试~
没想到竟然写进去了= =。
篇6：网站导航设计的6大分类
导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格，这就需要我们平常多留心收集 优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个优秀的水平导航设计，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！
1.三维导航设计：
网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航，
折纸是最常用的表现形式。
Delibar
Blue Door Baby
Mystery Tin
篇7：浅淡网站导航栏设计趋势
导航是网站设计中最重要的元素，由于用户很难在没有导航的情况下去浏览一个网站里的内容，因此一个设置合理的导航栏能令访客浏览到更多感兴趣的内容。
这篇文章将展示关于网页导航栏设计最近的一些趋势和一些新潮的导航栏效果。
1.描述型导航栏
导航栏最重要的任务是明确指向网站各个部分的内容，但这些内容很难通过一两个关键字来表述清楚，因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。
由于这种导航跟访客的感觉是：有一个向导在做现场解说，因此相对于只有关键字的“无声导航”，有人将描述型导航成为“有声导航”。
2.Mac风格仍然流行
苹果公司的产品经常能引起新的潮流，而且众多跟风者也热衷于山寨苹果的设计，网站导航栏也不能幸免。但客观地说，苹果那种质感强烈的简洁设计已经风行很多年了，但丝毫没有过时的趋势。
在复刻的同时，设计师们也衍生出许多带有Mac元素的设计。
强烈的Mac质感
绿色的Mac风格导航栏
3.吸引眼球的图标
导航栏设计的一个重要趋势是：图标应用得越来越频繁了，
为了使导航更加显眼，设计师通常通过漂亮的图标来装饰导航栏。在这里，选用的图标图标应该能清晰地辨认，并且能清晰地表达该分类的内容。而不是用更大的图标来吸引眼球。
也有把图标嵌入到文字里的
4.竖排的Tab
在很多人的第一印象里，Tab标签一般都是横排的。但一些聪明的网页设计师打破了这个死循环，做出了竖排Tab的效果。吸引了很多人的眼球。
但竖排的导航也有几个明显的缺点：1.网页需要有足够的长度来显示全部的分类;2.看这个导航的时候需要滚动页面;3.文本比较难阅读，没人的脑袋是歪向一边的。
5.手绘风格
自从全球掀起博客大潮以后，展示个性成为了这个时代的一个趋势。很多绘画爱好者通过手绘来制作自己的个人网站。
6.暗示设计
和第一条的描述不同，暗示设计一般不用明文来描述分类里的内容，而通过色彩或者图形来提示浏览者。不过浏览者没有足够的领悟能力的话，很难察觉到这一点。
如上图的按月存档导航，设计师为各个月份设置的代表色，温暖的月份用偏红的暖色调表示，寒冷的月份用偏蓝的冷色调表示。但如果浏览者身处令一个半球的话会怎么想呢?
★ 企业网站建设方案
【网站导航设计经验:清晰的导航能够让...（精选7篇）】相关文章：
火电公司副经理述职报告2023-10-27
如何快速提高网站用户体验度？2022-05-08
网站建设策划书2023-02-22
B2B网站优化经验2022-07-29
浅谈网站结构优化对SEO的影响2023-04-11
可用性测试：表述清晰的功能2023-12-26
谈交互设计需注意的规范与创新交互设计2023-01-04
室内设计网站策划方案2022-10-26
企业安全文化建设方案2022-11-09
物理教案－万有引力定律在天文学上的应用2022-08-01