网站导航系统设计 第1篇
侧边栏导航可以设计成各种个性化的形式。Pixso社区采用的侧栏导航设计，设计元素设定在合理的宽度，导航栏中的字体不会过长，显示上不会出现太大的问题。UI设计师可以通过滑动侧栏的方式来查看个人的设计稿件，既节省网站的空间，同时也显得更加简约。结构复制的网站不适用于这种类型的导航，侧边栏的二级导航栏也不能用于侧边导航，所以这种类型的导航大多适合一些设计师或个人网站，还有一些结构简单的网站。
Pixso 资源社区内置的侧边栏仪表板，便采取的侧边导航的形式，侧边导航的使用能够简化界面设计的内容，尤其是对于含有大量数据的管理后台仪表盘设计，收起来的侧边栏能使整个界面看起来更加简洁，有条理，
网站导航系统设计 第2篇
优秀的导航系统设计，能够合理完美地传达产品的功能，快速引导用户使用，而又不会干扰和困扰用户的选择。在实际的设计中，根据产品的功能特性搭建不同的导航系统。同时，产品的迭代发展和变化，也会导致导航的设计产生变化，需要依据用户属性和使用场景进行灵活调整。
来源公众号：VMIC UED（ID：gh_32761b1686b7），vivo互联网UED——为美好而设计。
题图来自 Unsplash，基于 CC0 协议。
网站导航系统设计 第3篇
作为设计师，我们可以从导航的架构、框架、组件、信息这几个维度进行设计。为了便于大家理解，下面我们把「导航系统设计」类比为「铺路」——
▲导航系统设计内容拆解
以ios设计规范为例，导航架构可分为层级式导航、扁平式导航、内容驱动或体验驱动导航。
层级式导航架构：在到达目标界面前，每个界面仅做一个选择。如果要去另一个目标界面，必须回溯自己的脚步，或者从头开始做不同的选择，呈现了产品信息的包含关系及信息的深度。
▲ 层级式导航架构案例
扁平式导航架构：允许用户在同一层级的多个内容类别之间进行切换，它主要呈现的是产品信息的广度。
▲ 扁平式导航架构案例
内容驱动或体验驱动导航架构：在内容中自由移动，或者内容本身可以定义导航。游戏、书籍和其他沉浸式应用程序通常使用这种导航形式。
▲内容/体验驱动导航架构案例
在实际的产品设计中，很少有整个产品仅包含一种类型的导航结构的情况，一般会将前三种类型的导航结构进行合理的混合，让用户无论如何操作，都能自由地在信息架构中穿行。同时，在设计时还需要注意导航系统的深度及广度，避免过深和过广。
导航的框架和产品性质及用户使用场景息息相关，对于不同的产品类型，导航框架也会有所不同，同一产品下的不同模块，也会有不同的导航布局。
▲常见的导航框架
内容类&社交类产品：产品内部包含大量不同类型主题的内容，各内容在层级上无主次之分，鼓励用户探索和社交。这类型产品常使用标签式导航，将导航布局于⻚面的顶部和底部，有时会布局有金刚区。
▲内容&社交类产品导航框架案例
工具类产品：核心功能固化，导航架构扁平，用户目标明确，只需要用户快速找到目标功能，常使用列表导航及宫格导航，直接把核心功能按照优先级铺在首⻚上。
▲工具类产品导航框架案例
游戏类产品：导航本身就是玩法的一部分，要给用户便捷的入口同时，不能遮挡游戏主界面，因此导航很多时候会环绕游戏主界面的四周，甚至导航本身成为了场景的一部分。
▲游戏类产品导航框架案例
网站导航系统设计 第4篇
导航系统，是以帮助用户查找目标功能和内容为目的的界面元素的集合。这些元素包含导航的跳转路径、导航组件、导航上的信息等，单个导航组件是无法成为系统的。
举个例子：当界面上的导航组件单独拿出来时，我们无法理解这些组件之间是否存在联系。但当它们被放到页面对应位置上时，就能看出这是在哪一个页面，以及页面中包含哪些子模块。所以，这些导航组件共同完成了该模块的导航任务，组成了一个局部导航系统。
▲ 导航组件&局部导航系统案例
一个产品可以具备多个子导航系统，来共同完成引导用户的任务，各个导航系统在产品中承担不同的作用。下面将结合《用户体验要素》书中的导航系统分类进行介绍——
全局导航：全局导航一般而言是在网站的每一页都会显示的全域导航系统，覆盖整个产品的通路，通常以每个页面顶端的导航栏形式来实现，它不一定包含全局信息，但是一定可以让用户无论在哪个层级都可以去到其目标的关键节点。
局部导航：提供用户在产品的某个模块中到“附近地点”的路。在一个严谨的结构层次中，局部导航可能只能提供一个⻚面父级、兄弟级和子级的通路。
▲ 全局导航&局部导航案例
辅助导航：跨越网站的各个层级，使用户可以在不同层级的页面间跳转。提供了全局导航或局部导航不能快速到达的相关内容的快捷途径。这种导航非常方便“中途折返”型的用户。
▲ 辅助导航案例
内联导航：嵌入自身内容中的导航。有些关系不适合放在全站和局部导航结构分类中，这时就需要建立指向特定网页、文件或对象的情景式导航链接。合理地使用情景式导航能够增加导航的灵活性。
▲ 内联导航案例
友好导航：所谓友好导航是指它可以为用户提供一个便利的前进途径，在需要的时候能够找到入口信息，通常在不需要的时候成隐藏状态（或比较不显眼）。
▲ 友好导航案例
远程导航：所谓远程导航是指不包含在产品结构中，以独立的方式存在产品内，通常表现为网站地图、索引表等。
▲ 远程导航案例
网站导航系统设计 第5篇
底部导航更多是应用在移动端中，在PC端的应用中不是很广泛，一般应用于一些活动或个性化的网站当中。在PC端中采用底部导航，往往采用固定的方式，这就意味着对于结构复杂的网站不是很合适。其次，将导航放置底部，对于用户的使用习惯来说不是很友好，用户的眼睛都是从上到下从做往右浏览的，这样的设计比较挑战用户的使用习惯。底部导航栏多出现在移动APP界面设计中，符合绝大多数用户的交互习惯，这也是友好用户体验的表现。Pixso资源社区作为一款在线协同设计工具，能够支持一站式UI/UX、原型、白板、交互与交付，带给团队更加高效的设计体验，
网站导航系统设计 第6篇
导航的英文navigation源于15-17世纪的地理大发现时代，词源来自拉丁文navis(船)+agare(引导) ，指引导船舶沿一定航线从一点运动到另一点的方法。随着科学技术的发展，导航的概念也不断地延伸。
在互联网领域，导航设计是一种专门用于呈现信息空间的界面设计形式，是产品信息架构的外在呈现，它让用户能够在信息架构中自由穿行。简单来说，导航设计的价值就是在各信息间“铺路搭桥”、做好“指示牌”，让用户知道这里有什么、怎么走、在哪里。
▲ 信息&信息架构&导航设计的关系