B端商品给人的感觉总是呆板的，基本就是图象、表单、详情页，或是流程，实际上也大略如此。即便B端商品主要就是辅助工具型商品或是管理控制系统，面向全国民营企业使用者，解决使用者的实际市场需求，极少去鼓励使用者产生市场需求。

在此种大背景下，商品的操控性、机能、使用者工作效率就成了首位的。必要性时，即使会牺牲生命一定的使用者新体验优先选择保证商品机能。所以B端商品控制系统介面不能为了“看上去新奇”而相同，而要著重使用者用起来的新体验。

责任撰稿主要就探讨附注：

从0开始构筑捷伊商品，首先要确定好介面架构。B端介面架构并不繁杂，主要就包括顶端重要信息栏、右侧导航系统和文本区3大部分。通过相同的女团形式，介面架构就形成了3种程序语言。

一、每边内部结构

此种网页内部结构将网页分割为「顶端导航系统」和「文本区」每边三层。多见于一些民营企业官方中文网站、重要即复中文网站中，更偏重于重要信息展现。例如阿里云官方中文网站、网易、chan等重要信息中文网站。

通常包涵控制系统logo、机能辅助工具栏、远距机能、个人中心等。机能辅助工具栏通常按照销售业务板块展开增设，并且会管制辅助工具栏数量，通常为4-6个左右。

根据销售业务需要，机能辅助工具栏也可以展开交叉耦合扩充，容许出现2级即使3级辅助工具栏。方便快捷使用者更微细地了解控制系统机能，同时提升使用者的操作工作效率，实现微细网页的快速直通。

我个人认为，顶端导航系统的优势并不是不占用网页横向空间。因为重要信息展现类的中文网站对横向空间要求并不高，有些中文网站为了避免使用者视觉横向跨度过大，采用的是版心定宽内部结构设计。民营企业官方中文网站商品则采用响应式布局，让介面可以适应相同的屏幕宽度。

顶端导航系统的优势在于面积小，对网页的分割比较弱，不会对文本产生太大的影响。另外横向排布更符合使用者的视觉习惯。

在展现形式上，顶端导航系统更加灵活，可以将辅助工具栏形成独立的重要信息空间。例如百度官方中文网站的顶端导航系统，与Banner形成强烈对比，文本清晰可见。

顶端导航系统也可以与网页文本融为一体，减少对文本的干扰。例如巨量引擎的官方中文网站中，将顶端导航系统与Banner重要信息混合，更加强调文本重要信息的传递。

在交互操作方面，网页向下滚动时，顶端导航系统可以自动隐藏，从而为文本提供更大的可视面积；网页向上滚动时自动展现，方便快捷使用者的快速切换到其他辅助工具栏。

二、左右内部结构

对于简单或是繁杂的销售业务控制系统，顶端导航系统数量会面临过少或是过多的问题，于是就出现了左右内部结构布局。

面对简单的销售业务控制系统，右侧导航系统的形式不会产生大量的网页空白。例如百度网盘网页版，Teambition都是采用的此种介面架构，将一级辅助工具栏简化，与二级辅助工具栏并列展现，视觉关联性也更加紧密。

面对繁杂的销售业务控制系统，左侧导航系统可以承载较多的辅助工具栏量，并且树形内部结构配合展开收起面板机能，具有很好的延展性。例如有赞个人店铺右侧导航系统承载了10+个的销售业务机能。

不过右侧导航系统的缺陷也比较明显，主要就有以下几个方面：

所以在内部结构设计时，需要针对以上问题展开优化内部结构设计。以下是部分商品提供的解决方案：

（1）单层重要信息+交叉耦合重要信息

有赞商品右侧导航系统，沿用了顶端导航系统的交互方式。没有采用收起展开的方式，而是采用交叉耦合菜单形式，悬停即可显示，从而方便快捷使用者快速切换。

（2）默认全展开

辅助工具栏机能默认全展开，减少使用者的操作。使用者不需要逐级展开，便于使用者快速切换辅助工具栏。在后续的使用过程中，使用者根据的自己的需要，手动收起不常用的机能就可以了。

（3）双列布局

对于机能繁杂的控制系统，默认全展开的方式，会导致导航系统区过长，使用者查看上去不方便快捷。因此需要增加辅助工具栏的重要信息密度，减少导航系统的整体长度。例如拼多多商家后台采用双列布局的形式，当然此种场景下，会增加右侧导航系统宽度，挤占文本区的空间。

（4）查看全部

在门户中文网站中，重要信息分类非常多，普通使用者通常只会用到高频重要信息。为了让使用者能够全览中文网站所有的重要信息门类，中文网站还提供了「中文网站导航系统」机能。

在B端商品中，也需要考虑如何让使用者了解平台的全部机能清单。例如钉钉管理后台在右侧导航系统底部增加了「查看全部」机能，展开后使用者就可以看到全部的机能辅助工具栏。

在形式感上，左右内部结构的布局会对控制系统logo 和名称展开压缩，我个人认为整体风格不如每边内部结构正式，对品牌形象表现力不足。因此该内部结构主要就用于一些辅助工具商品或是轻量型的控制系统，在大型的销售业务平台或是G端的项目应用较少。

通过上面的案例，我们可以看到B端商品基本上是以「混合布局」的模式构筑介面架构。

三、混合布局

在B端商品中，混合布局既有贯穿的顶端区域，可以承载导航系统辅助工具栏和商品架构重要信息，又在文本区增加右侧导航系统，提升导航系统重要信息承载量，更好地满足销售业务机能需要。

例如巨量纵横商品中，采用了顶端导航系统和右侧导航系统相结合的方式，将商品分割为几个独立的销售业务单元，使用者可以根据自己的工作目标去选择对应的机能。同时也减少了右侧导航系统的重要信息承载量和层级，方便快捷使用者操作。

如果控制系统机能极其繁杂，传统的「顶端导航系统+右侧导航系统」的模式已经无法满足商品市场需求。例如云类商品都是大型的销售业务平台，包涵几十项销售业务机能，于是构筑了「商品与服务」的中心模式，集中全量展示所有销售业务机能，方便快捷使用者浏览查看。在一定程度上也增加了使用者探索更多机能的欲望。

在此种模式下，每一独立的商品或服务则形成了子控制系统空间，采用统一的混合布局方式，让原本繁杂的销售业务控制系统变得简单。

另外还有一个小细节。

右侧导航系统辅助工具栏带给使用者的心理暗示是「切换」，用来控制右侧文本区重要信息。当我们在右侧导航系统中嵌入其他控制系统机能时，如果是「跳转」的操作方式，需要增加指示图标，如下图所示。

四、归纳

以上就是关于B端商品介面框架的文本，我们可以得到3个内部结构设计准则：

责任撰稿原创发布于人人都是商品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。