【交互设计】B端产品两种导航架构的对比研究（PC端）

 

信息系统发展到今天，拥有丰富多彩的页面架构。不管是什么样的页面架构，都围绕更快捷触达用户需求而设计。

 

定制类的B端产品，有明确的工期限制，往往拿下一个项目，做完第一期后，第二期第三期是否推进有着高度不确定性。即使是确定只做当期的，需求也不是百分百明确，往往是设计完成70%，跟客户确认大致需求就开发，跟客户阶段性汇报演示，从而挖掘和逼近客户真实需求和客户满意的交互方式。所以选择合适的页面架构，对更好的应对客户不断变更的需求和不断变更的交付方式有着重要的作用。

 

本文基于近来领导设计团队进行标准化、组件化、产品化而总结的内容，对两种主流的B端产品页面架构做对比分析。

 

由于商业机密问题，以下原型稿在内容上做了规避处理，但不影响本文要探讨的问题。

 

一、F型架构

将一级导航置于系统名称栏内，二级导航置于页面左侧；

 

目前，我司使用此类架构已经4年，此类架构对不同项目的适应程度不一，总体来说还算良好，因为我司项目大多偏科技类的工具型产品，一级导航数量可控在7个以内。因此类架构的一级导航非常符合人眼视觉流向，一直没有考虑更换；

 

但在有些项目还是出现了适配难题，当一级导航类目多达10个以上，在小屏上显示不完整，需要采用折叠一级导航的方式（因B端产品有些菜单名称较长，且缩减后达不到客户方认可）；

 

二级导航如果比较少，在使用上也将造成操作麻烦（边际效果，如果二级导航众多，用户反而觉得这样设计是合理的，如果二级导航少于3个，甚至只有1个，则将使用户思考是否系统存在问题）。以上图举例，分配任务的角色，如果只保留“我发起的任务”这个子模块，为只有一个二级导航保留这么大空间的二级导航栏，设计上显得浪费空间，客户使用上则产生不必要的质疑。

 

但针对我司的GIS地图（一张图）的兼容性，则显得优势明显：

 

“一张图”是个重要的概念，已经运用在各行各业，重要的信息集成在一张图上，更能满足客户方领导层的需要。

F型架构使一张图地图区有更多的空间，视觉观感也更平衡。

 

二、左右型架构

左右型架构，将系统名称栏与导航栏分开，全部导航栏置于左侧，内容置于右侧。

 

因竖向滚动更易操作，此类架构扩展性更高，可应对不断增加的导航数量。

 

但在“一张图”的适配上却比F型架构稍微逊色：

 

 

这个时候，我们需要折叠导航栏来使“一张图”获得更多的视野：

 

 

三、总结：

两种页面架构都有各自的优劣；

F型架构在一级导航少于7个，二级导航较多，且需求较确定的信息系统中，依然是一种不错的选择；

当一级导航大于7个、且需求不稳定、或者预留了二期、三期工程的信息系统中，优先考虑使用左右型架构是比较稳妥的选择。