拆解B端产品，总结界面框架设计的3原则

2022-08-02

1 评论 2363 浏览 15 收藏 14 分钟

释放双眼，带上耳机，听听看~！

00:00

编辑导语：B端产品系统界面如何设计才能提高用户对产品的体验？本文从界面框架的3种设计模式、界面框架设计的3个原则两个方面进行了分析，推荐对B端产品感兴趣的小伙伴阅读，一起来看看吧。

B端产品给人的感觉总是千篇一律的，基本就是图表、表格、详情页，或者业务流程，实际上也大抵如此。毕竟B端产品主要是工具型产品或者管理系统，面向企业用户，解决用户的实际需求，很少去引导用户产生需求。

在这种背景下，产品的性能、功能、用户效率就成了第一位的。必要时，甚至会牺牲一定的用户体验优先保证产品功能。所以B端产品系统界面不能为了“看起来新颖”而不同，更要注重用户用起来的体验。

本文主要讨论以下内容：

从0开始构建新的产品，首先要确定好界面框架。B端界面框架并不复杂，主要包括顶部信息栏、左侧导航和内容区3大部分。通过不同的组合形式，界面框架就形成了3种设计模式。

一、上下结构

这种页面结构将页面划分为「顶部导航」和「内容区」上下两层。常见于一些企业官网、信息资讯网站中，更偏向于信息展示。例如阿里云官网、新浪、知乎等信息网站。

一般包含系统logo、功能菜单、辅助功能、个人中心等。功能菜单通常按照业务板块进行设置，并且会限制菜单数量，一般为4-6个左右。

根据业务需要，功能菜单也可以进行级联扩展，允许出现2级甚至3级菜单。方便用户更深层地了解系统功能，同时提高用户的操作效率，实现深层页面的快速直达。

我个人认为，顶部导航的优势并不是不占用页面横向空间。因为信息展示类的网站对横向空间要求并不高，有些网站为了避免用户视觉横向跨度过大，采用的是版心定宽设计。企业官网产品则采用响应式布局，让界面可以适应不同的屏幕宽度。

顶部导航的优势在于面积小，对页面的分割比较弱，不会对内容产生太大的影响。另外横向排布更符合用户的视觉习惯。

在展示形式上，顶部导航更加灵活，可以将菜单形成独立的信息空间。例如百度官网的顶部导航，与Banner形成强烈对比，内容清晰可见。

顶部导航也可以与页面内容融为一体，减少对内容的干扰。例如巨量引擎的官网中，将顶部导航与Banner信息混合，更加强调内容信息的传递。

在交互操作方面，页面向下滚动时，顶部导航可以自动隐藏，从而为内容提供更大的可视面积；页面向上滚动时自动展示，方便用户的快速切换到其他菜单。

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

面对简单的业务系统，左侧导航的形式不会产生大量的页面空白。例如百度网盘网页版，Teambition都是采用的这种界面框架，将一级菜单简化，与二级菜单并列展示，视觉关联性也更加紧密。

面对复杂的业务系统，左侧导航可以承载较多的菜单量，并且树形结构配合展开收起面板功能，具有很好的延展性。例如有赞个人店铺左侧导航承载了10+个的业务功能。

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

尺寸空间大。为了尽可能地减少挤占内容区信息空间，通常会增加「收起」功能；
限制多。为了控制导航宽度，菜单名称的长度需要做出限制，避免出现无法完全展示的情况；对系统logo和名称也会有要求，不太适用于名称较长的系统；
操作效率不高。默认收起的菜单项中，需要展开才能操作；如果信息层级较深，逐级渐进展开的方式也不方便用户操作，因此对信息层级也需要做出限制；另外用户无法直观地全览所有业务功能，尤其是对于新人用户不友好，需要逐个点击才能了解系统功能。

所以在设计时，需要针对以上问题进行优化设计。以下是部分产品提供的解决方案：

（1）单层信息+级联信息

有赞产品左侧导航，沿用了顶部导航的交互方式。没有采用收起展开的方式，而是采用级联菜单形式，悬停即可显示，从而方便用户快速切换。