导航架构规则 #

Web系统中的后台系统是根据具体业务设计的，作为一个后台系统设计师或产品经理，知道如何在狭小的屏幕空间选择合理的导航形式表达业务内容是很重要的。本文目的在于分析后台系统导航控件的组成与样式，不涉及内容页导航。

导航组成内容 #

● 站点ID
● 栏目
● 搜索
● 实用工具
● “你在这里”指示器

导航呈现 #

导航存在三种呈现方式：

● 一种是水平方式；
● 一种是垂直方式；
● 一种是混合方式；

这三种呈现方式能充分展示全部与局部导航。

1.水平方式 #

即栏目是水平的，一般排列形式如下：

优点： #

1.人的浏览习惯是自上而下，从左到右的，水平方式符合用户的浏览习惯。
2.整个页面排版稳定，不受用户终端显示器影响。
3.无左侧垂直导航干扰，沉浸感强。

缺点： #

可拓展性较差。
● 一方面受浏览器宽度限制，水平方式栏目长度受限，栏目数量不宜过多。栏目命名中文字数2~5个，栏目数目不超过7个比较合适。
● 另外一方面，如果是有中英文切换功能的话，英文栏目长度很可能比中文的长，而屏幕宽度有限，容易出现内容密集或排不下的情况。

使用范围： #

适用于业务简单，栏目较少，追求沉浸式，轻操作的系统。

实例如下： #

（数说雷达-app-品牌监测）

2.垂直方式 #

即栏目是垂直的，一般排列形式如下：

优点： #

层级与栏目扩展性强，最深可支持4级结构。

缺点： #

● 内容放在左侧，排版受客户端显示器影响大。
● 固定占据左侧区域，内容展示区宽度受限，不利于沉浸式体验。

使用范围： #

混合方式是目前后台系统最为常见的呈现方式，会存在多种排列方式。适用于量级大，模块多且复杂度较高的后台系统。

实例如下： #

（阿里营销洞察中心&数说故事）

3.混合方式 #

即主栏目和下一级栏目是水平与垂直结合的，一般排列形式如下：

优点： #

层级与栏目扩展性强，最深可支持4级结构。

缺点： #

● 部分栏目与不同层级栏目间距离可能较远，切换效率受限。
● 导航占屏幕面积大，内容页宽高展示受限。

使用范围： #

混合方式是目前后台系统最为常见的呈现方式，会存在多种排列方式。适用于量级大，模块多且复杂度较高的后台系统。

实例如下： #

（大参林&数说故事）