为什么讨论导航？

B端产品的信息架构，一般就是树状图，比较类似，都是一级有哪些，对应二级有哪些。最底层的内容，则基本是表格和图表，样式上也比较相似。

那么同样的信息架构，相似的表单，为何在不同设计师手里，最终的呈现样式不同？很关键的一点就是导航的样式，导航影响着整个页面的布局。

导航——就像逛超市时的指示牌一样，告诉用户身处何处，可以去哪里。而B端中后台产品的特点是功能复杂，内容繁多，因此，B端设计有两个主要关注点：

1.沉浸式体验，保证用户能在心流中完成复杂任务而不被打断。

2.在复杂的内容中突出层级和重点

Q1：一级导航，选择顶部还是侧栏？

Ant design里对两者有较好的说明，如下图：

写的比较明确，这里补充一下个人的想法。

1.为什么顶部导航适合门户网站和前台应用？只是因为信息层级简单明了么？

实际上，采用顶部导航，意味着下方的内容区域可以随意形式，非常灵活，视觉设计发挥空间大。不同tab下的页面可以两端撑满，也可以不撑满。例如teambition：

可以看到。如果主导航采用侧栏，则整个页面必须左右撑满，在文件库这个内容比较少的页面，两侧撑满会显得很空，数据水平间隔过大也不利于用户快速阅读。

2.顶部导航和侧边导航在层级上不是平等的

由于全局功能（一般在顶部右侧）的原因，顶部栏必定全局存在，且给用户的感受就是最高一层的。

因此顶部导航可以直接衔接侧边导航，但是侧边导航的次级不能采用顶部导航。

另外，侧边导航在视觉上更有关联性，且适合分类，因此有关联性的内容应采用侧边导航。

3.大型中台系统的导航

大型中台系统就相当于数个小型中后台系统的合集，因此相当于在小型后台的页面设计上再增加一级全局导航，（可以称为0级导航）

而由于小型中后台页面以侧边导航为主，因此大型中后台的导航如下：

阿里云：0级导航隐藏为icon，鼠标hover会悬浮显示侧边导航，内容自定义

百度云：0级导航常驻侧边导航，但一般收起变窄，内容自定义

腾讯云：0级导航隐藏在顶部，点击展开。同时顶部导航支持自定义外显

华为云：0级导航隐藏在顶部导航，点击展开可看到最近使用，无自定义。

个人认为腾讯云和阿里云的形式比较好，百度的仅靠icon识别困难，虽然有tooltip提示但很慢。

Q2：详情页（一般会新开一个内容页），是否显示一级导航

下方图1为思必驰截图，进入到产品详情页不显示外层的一级导航，图2为个人魔改版，仍显示外层一级导航。

区别并不是很大，图1的沉浸体验更好一些，图2的切换更灵活。

个人倾向于图1，即跳转详情页后不显示一级导航，因为用户使用中后台系统时，完成复杂任务为基本型需求，灵活跳转属于期望型需求，因此保证专注任务的沉浸感高于切换任务的灵活性。另外，让用户依靠返回按钮逐层回上级的过程，也便于让用户在总览页二次感知到详情页的改动。

Q3：内容区域的设计

去除了主导航，剩下的就是内容区域，一般包括以下几项：页头、Tabs（作为次级导航）、具体内容。

1.页头

下图中红框处即为页头，可以看出和侧边导航在信息上是重复的，我之前也考虑过页头存在的意义是什么？

个人认为页头的作用有这两个：一方面是加强沉浸感，用户可以聚焦在右侧内容区，不用再关注左侧导航，另一方面是便于拓展，可以附加说明文字，全局按钮等等。

2.Tabs

tabs作为次级导航，有以下4种类型。页面为多层架构时，往往需要混用，标准线条型和卡片型一般作为主导航，文字型和胶囊型一般为次级导航，不单独使用。

另外，多层tab堆叠时，不推荐将线条型与文字型混用，如下图。视觉上差异性不大，难以将信息层级拉开。

3.具体内容

具体内容一般就是筛选条件和表单了，不多阐述。

4.实际运用

此次对导航进行思考也是因为正在考虑工作中的B端界面优化，下面分别是旧版和尝试的新版布局。

感谢阅读，希望能抛砖引玉，收到不同意见哈~

Powered by Froala Editor