如何设计B端产品的首页？

为什么要单独总结B端产品的首页怎么设计？其实B端产品的首页是非常难做的，因为很多时候，是没有需求来表明首页做什么。更多的时候是需要产品经理，根据产品的价值和业务自己判断，首页应该有那些内容。即使客户针对首页提出了需求，对于产品可能也会非常难做，因为提需求的客户往往并不一定是实际业务的使用者。所以，在设计B端产品首页时，通常会针对不同的角色设计动态首页。

首页对于每个产品都非常重要，具体重要性大家应该都非常清楚了。但是B端产品和C端产品在首页设计有很大不同。C端可以从我们自己的角度出发进行设计，而B端必须要以客户的角度设计首页。C端产品可以使用数据验证和优化首页的设计，B端产品因为用户规模较少，所以不太适用。B端产品的首页不仅仅是展示产品价值和导航，更多的是需要帮助提升效率，快速触达各角色的业务。

如何设计

在设计之前，尽可能的进行用户访谈，深入各角色的场景，分析其业务重心和痛点，了解客户各角色对于产品的期望。

1.从架构的角度设计

从产品设计架构上思考，首页与导航一起构成了产品的门面。在设计首页之前，需要先完成业务和功能的架构，以及导航栏的设计。在设计首页时，首先就要根据整个产品的架构明确首页的核心需求。从产品门面的角度分析，首页可以作为某些数据的展示平台。从B端产品的价值效率出发，首页很适合作为工作台。从产品业务架构思考，首页也可以作为导航栏的补充。当然，由于首页的入口属性，在架构中不必和具体功能进行关联，所以在设计时，也可以将几种需求进行适当的整合。

2.以价值和效率驱动

B端产品设计时，是以价值和效率作为出发点。所以，首页主要作用还是数据概览和快捷工作台。在B端产品深入业务的场景下，通常首页都扮演着工作台的角色。客户在使用产品时，因为在系统内的角色不同，所关心的业务不同，关注的数据不同，使用的功能不同。为了首页的最大价值和最高效率，需要针对不同角色，设计不同的数据概览和功能快捷入口。

3.聚焦到业务

在设计产品首页时，首先需要结合角色和业务，敲定首页的展示内容。在选取内容优先选择所有角色通用且重要的内容。比如，公司管理系统中的绩效和考勤，销售管理系统中的销售额和提成。也可以针对角色，选取其高度关注的数据。同时，可以选取角色高频使用的功能，设计快捷功能区。在选取内容时，针对不同的角色，主页也需要聚焦到具体的某一业务。比如，销售的主页应该聚焦到销售额和客户。

选取好功能和数据后，开始针对内容设计排版样式。B端产品首页通常采用卡片式布局。卡片式布局的优势是可以方便排列组合，多种类型的内容。整体的板块竟可能不要超过5个。最后，也可以选取一些重要功能作为快捷入口，以补充版面。

以下是我的一些首页设计原则：

尽量保持首页只占一屏，如果一定要滚屏，宁愿从产品导航上着手。
首页的核心设计原则是帮助角色快速触达业务。
设计首页的内容版块时，必须要设计标题。对于复杂内容，最好用tips提示。
首页更加适合能以图表展示的内容。
一般会在首页上部分展示数据，下部分设计快捷功能和功能导航。这样能使整个页面更加协调。
设计上回聚焦到角色的某一日常工作中。

常用版块

在首页中，都是由以下几种类型的内容构成首页的板块。数据、内容、功能导航、个人信息、快捷功能区。其中内容包含资讯、通知消息。

1.数据

数据一般选择角色比较关心的数据。如果角色是公司的管理者，则非常在意数据，特别是业务的运营数据和公司的经营数据。数据在设计时，可以以图表展示。独立的数据可以以文字块配合图标展示。如果是一系列数据，可以采用折线图、饼形图等图展示。选择图标类型时，一定要符合数据的特征。比如，含有城市特征数据，就非常适合地图热区图。

2.内容

内容指的资讯、通知消息、公告等。这些内容一般以列表的形式在首页展示。资讯一般是作为协调版面的作用，本身的价值十分有限。通知消息和公告这类重要信息，比较适合设计在导航栏上。如果需要展示内容的详情，则才会考虑设计在首页。

3.功能导航

如果系统功能较多时，可以考虑在首页上，展示一些重要或高频使用功能的导航，作为导航栏的补充。设计，比较适合图标的形式。

4.个人信息

个人信息是作为一小块信息，展示登录账户信息，或者账户主体信息。当导航栏没有空间留给标识当前登录账户信息或者主体信息，但用户又需要通过该信息进行角色区别时，可以在主页上设计个人信息板块。

5.快捷工作台

快捷工作台，是作为角色重要功能的简化版本。设计的目标是，让用户快速触达功能和业务，提升用户的效率。该功能板块需要根据角色的业务来进行设计。在该功能区中，不易设计过于复杂的功能，尽可能简化设计。快捷工作台的功能应该都是角色高频或日常使用的功能。比如CRM系统的今日回访客服、OA的待审批内容。在设计快捷工作台时，要保证操作即时完成，而不需要跳转到该功能内部。

视觉

虽然B端产品都是重业务和需求，轻UI设计，但是作为产品的门面，首页的视觉设计也十分重要。在与UI设计师合作设计首页。我一般要求是，简洁、清晰、与整体导航风格保持一致，不能抢占导航的视觉重心。

一些总结

对于B端产品来说，首页并不是「我们」的首页，而是客户的首页，并不是我们展示自己品牌价值的区域，我们应该尽可能聚焦到客户的业务系统当中。

首页设计的核心价值是提升客户的效率，使客户快速触达业务。

没有任何价值做首页自定义功能。如果做了首页自定义功能，只说明产品经理对于客户的角色和业务的分析、系统的架构还不够深入。