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

bsfly

编纂导语：B端产品零碎界面如何设计能力进步用户对产品的体验？本文从界面框架的3种设计模式、界面框架设计的3个准则两个方面进行了剖析，保举对B端产品感兴致的小火伴浏览，一同来看看吧。

B端产品给人的觉得老是千人一面的，根本就是图表、表格、详情页，或者业务流程，实际上也大致如斯。毕竟B端产品次要是工具型产品或者办理零碎，面向企业用户，解决用户的实际需要，很少去疏导用户发生需要。
在这类配景下，产品的机能、功用、用户效力就成为了第一名的。须要时，乃至会就义一定的用户体验优先包管产品功用。所以B端产品零碎界面不克不及为了“看起来别致”而不同，更要重视用户用起来的体验。
本文次要探讨下列内容：
从0开始构建新的产品，首先要肯定好界面框架。B端界面框架其实不繁杂，次要包罗顶部信息栏、左边导航和内容区3大部份。经过不同的组合方式，界面框架就造成了3种设计模式。
一、上下构造


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


个别包孕零碎logo、功用菜单、辅佐功用、集体核心等。功用菜单通常根据业务板块进行设置，而且会限度菜复数量，个别为4-6个摆布。
按照业务需求，功用菜单也能够进行级联扩展，允许泛起2级乃至3级菜单。便利用户更深层地理解零碎功用，同时进步用户的操作效力，完成深层页面的疾速中转。


我集体以为，顶部导航的劣势并非不占用页面横向空间。由于信息展现类的网站对横向空间要求其实不高，有些网站为了不用户视觉横向跨渡过大，采取的是版心定宽设计。企业官网产品则采取响应式规划，让界面能够顺应不同的屏幕宽度。
顶部导航的劣势在于面积小，对页面的联系对比弱，不会对内容发生太大的影响。此外横向排布更合乎用户的视觉习气。
在展现方式上，顶部导航更为灵敏，能够将菜单造成独立的信息空间。例如百度官网的顶部导航，与Banner造成强烈比较，内容明晰可见。


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


在交互操作方面，页面向下转动时，顶部导航能够自动暗藏，从而为内容提供更大的可视面积；页面向上转动时自动展现，便利用户的疾速切换到其余菜单。


二、摆布构造
关于简略或者繁杂的业务零碎，顶部导航数量会见临过少或者过量的问题，因而就泛起了摆布构造规划。


面对简略的业务零碎，左边导航的方式不会发生少量的页面空白。例如百度网盘网页版，Teambition都是采取的这类界面框架，将一级菜单简化，与二级菜单并列展现，视觉关联性也更为严密。


面对繁杂的业务零碎，左边导航能够承载较多的菜单量，而且树形构造配合展开收起面板功用，拥有很好的延展性。例如有赞集体店铺左边导航承载了10+个的业务功用。


不外左边导航的缺点也对比显著，次要有下列几个方面：
尺寸空间大。为了尽量地增加挤占内容区信息空间，通常会减少「收起」功用；限度多。为了管制导航宽度，菜单称号的长度需求做出限度，防止泛起无奈彻底展现的状况；对零碎logo和称号也会有要求，不太合用于称号较长的零碎；操作效力不高。默许收起的菜单项中，需求展开能力操作；假如信息层级较深，逐级渐停顿开的形式也不便利用户操作，因此对信息层级也需求做出限度；此外用户无奈直观地全览一切业务功用，尤为是关于新人用户不敌对，需求逐一点击能力理解零碎功用。所以在设计时，需求针对以上问题进行优化设计。下列是部份产品提供的解决计划：
（1）单层信息+级联信息
有赞产品左边导航，沿用了顶部导航的交互形式。没有采取收起展开的形式，而是采取级联菜单方式，悬停便可显示，从而便利用户疾速切换。


（2）默许全展开
菜单功用默许全展开，增加用户的操作。在微信大众号、阿里云、知乎创作核心等平台中，左边导航都是默许展开的，用户不需求逐级展开，便于用户疾速切换菜单。在后续的使用过程当中，用户按照的本人的需求，手动收起不罕用的功用就能了。


（3）双列规划
关于功用复杂的零碎，默许全展开的形式，会致使导航区太长，用户查看起来不便利。因此需求减少菜单的信息密度，增加导航的总体长度。例如拼多多商家后盾采取双列规划的方式，固然这类场景下，会减少左边导航宽度，挤占内容区的空间。


（4）查看整个
在门户网站中，信息分类十分多，普通用户通常只会用到高频信息。为了让用户可以全览网站一切的信息门类，网站还提供了「网站导航」功用。


在B端产品中，也需求斟酌如何让用户理解平台的整个功用清单。例如钉钉办理后盾在左边导航底部减少了「查看整个」功用，展开后用户就能看到整个的功用菜单。


在方式感上，摆布构造的规划会对零碎logo 和称号进行紧缩，我集体以为总体格调不如上下构造正式，对品牌形象表示力缺乏。因此该构造次要用于一些工具产品或者轻量型的零碎，在大型的业务平台或者G真个名目运用较少。
经过下面的案例，咱们能够看到B端产品根本上是以「混合规划」的模式构建界面框架。
三、混合规划
在B端产品中，混合规划既有贯通的顶部区域，能够承载导航菜单和产品框架信息，又在内容区减少左边导航，晋升导航信息承载量，更好地知足业务功用需求。


例如巨量纵横产品中，采取了顶部导航和左边导航相结合的形式，将产品划分为几个独立的业务单元，用户能够按照本人的任务指标去选择对应的功用。同时也增加了左边导航的信息承载量和层级，便利用户操作。


假如零碎功用极为繁杂，传统的「顶部导航+左边导航」的模式曾经无奈知足产品需要。例如云类产品都是大型的业务平台，包孕几十项业务功用，因而构建了「产品与办事」的核心模式，集中全量展现一切业务功用，便利用户阅读查看。在一定水平上也减少了用户探究更多功用的愿望。


在这类模式下，每个独立的产品或办事则造成了子零碎空间，采取一致的混合规划形式，让本来繁杂的业务零碎变得简略。


此外还有一个小细节。
左边导航菜单带给用户的心思暗示是「切换」，用来管制右边内容区信息。当咱们在左边导航中嵌入其余零碎功用时，假如是「跳转」的操作形式，需求减少唆使图标，如下图所示。


四、总结
以上就是对于B端产品界面框架的内容，咱们能够失掉3个设计准则：
合乎产品的定位和业务需求。产品界面框架要可以承载产品的全部业务体系，而且具备足够的延展性，需求斟酌到产品将来降级和开展。包管用户的操作效力。导航的方式会影响到用户的操作效力，因此在层级设定上需求小心，防止层级太深影响用户的操作效力，目前主流的左边导航以2层为主。全局视角。导航是用户理解产品功用的第一渠道，在设计时既要斟酌到用户用起来的感触，也要可以让用户更直观的理解零碎全局。子牧学生。大众号：子牧UXD（HelloDesign），人人都是产品经理专栏作家。产品体验设计师。8年互联网行业教训，长于体验设计思惟、设计办法论、交互设计钻研。
本文原创公布于人人都是产品经理，未经许可，阻止转载。
题图来自 Unsplash，基于 CC0 协定。