B端产品的展示形式包括标签页、弹出窗口、悬浮层等多种类型

无需加好友免费技术支持

编辑导语：B端产品的展示形式包括标签页、弹出窗口、悬浮层等多种类型。在本文中，作者分享了如何正确呈现b端产品，使产品的互动体验更加丝滑。感兴趣的朋友们，来看看。我希望它能帮助你。

在B端产品操作中，需要高频打开各种链接和按钮。如果点击后需要显示新内容，显示形式包括标签页面、新页面、悬挂层、弹出窗口、抽屉等多种类型。

面对大量的B端页面、组件和交互场景，选择哪种显示形式已成为一个棘手的问题。

本次分享将重点解决如何选择正确的呈现形式，使产品的互动体验更加顺畅。

网页是可视化的UI界面也是内容载体，是浏览器访问网站后显示的主要对象，也是浏览器显示内容中最高层次的单位。

在同一个网站上，如果我们想访问其他网页，我们需要点击按钮或链接触发。此时，有两种方法可以打开新网页。打开新窗口/标签（_blank）打开本窗口/标签（_self）。

无论如何，浏览器本质上都需要重新加载新的页面。对于一般的企业官方网站和新闻网站，这种加载模式没有太大的问题，因为操作频率相对适中，用户止很长时间查看页面的内容信息。

B端项目是不同的。虽然有很多需要查看页面信息，但它包含了更多需要快速完成操作目标的使用场景，如修改标题、更改商品价格、添加分类字段等。

如果所有高频操作场景都需要重新加载页面并使用 “顿挫感” 很强，降低了使用体验。

早期的网站加载内容必须刷新页面，所以挫折感很难解决，只能找到减少跳转过程来改善用户体验的方法。

随着网页技术的发展，异步处理（AJAX数据交换)技术的应用使网页的内容能够以不刷新或加载新网页的形式加载和显示。

简单的解释是，早期的网页加载完成后 “静止” 是的，所有内容都是固定的(不是HTML静态)。异步处理是使页面中的指定模块处于 “运动” 在不重载网页的情况下，客户端只能加载和更新该模块的内容。

例如，在以下情况下，设置不同的条件选项。在过去的网页中，只能重新加载页面更新，而不需要重新加载整个页面。

因此，在B端项目中，我们不再只有一个选项来重载网页，而是有其他选项，如下图所示。

其中，作为一个基本的显示对象，我不会介绍更多。我将分别介绍其他内容的载体，以帮助您区分它们与重载页面的区别，以及如何正确选择内容加载形式。

首先，介绍浮层，这是我通过悬浮在页面基本内容上的内容层的总称。例如，各种气泡、提示框和下拉菜单都是浮层的表现形式。

浮层是一种相对较低的形式，其显示内容根本不需要使用新页面，并且与触发元素有很强的视觉联系出窗口）。

浮层不是由内容的多少决定的。复杂的浮层可以包含大量的交互选项和内容信息，使我们很容易与下面解释的弹出窗口混淆。

比如客户端软件中常见的隐藏侧栏，搜索栏中展开的复杂面板，都是浮层而不是弹出窗口。

浮层最大的特点来自于其位置定义逻辑，它与触发其元素的位置密切相关，而不是像弹出窗口一样显示在界面或浏览器视图的固定区域。

如果我们想显示内容，我们可以考虑使用浮层来显示它，而不是使用新页面（如搜索推荐面板），并且与触发它的控制器有很强的联系。

弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。

高级弹出窗口类似于下面的案例，大约等于打开一个独立的网页。

例如，在一个非常长的列表中，你下降了几十页的高度，当然不想放弃当前的页面位置，所以Behance或者花瓣等应用程序都采用窗口模式加载新页面。

或者类似于需要在列表页面上创建大量新数据的列表页面，而且这些数据并不复杂。因此，以弹出窗口表单的形式快速创建并再次单击原始页面 “新增” 按钮。

除了保持原页位置、高频操作等防止加载的原因外，高级弹出窗口的使用还具有强制吸引用户注意力的更重要特点。

最后，抽屉是最难选择和最容易与其他组件混淆的抽屉。

抽屉本身的特点包括覆盖在原始页面上的悬挂属性。我们常见的侧栏和侧菜单不能等同于抽屉，因为它们会占用画布的实际显示区域，与原始内容相同。

例如，在下面的案例中，Jira左导航(不分左右)可以隐藏收入，页面内容变大，这是侧栏。点击列表选项，抽屉覆盖右弹出窗口的原始页面。

与先进的弹出窗口类似，抽屉也可以作为一个独立的页面显示信息。但与弹出窗口不同的是，抽屉通常从页面的右侧展开，而不会阻挡左侧的空间。它的主要特点是需要在原始页面上进行交互。

比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。

它更适合应用于表/列表环境，作为表/列表内容的详细页面形式，使用户能够快速查看不同列表的具体信息或编辑在一个页面上。此外，表/列表本身的特征将标题放在最左边，这也方便抽屉切换。

由于这一特点，抽屉不需要使用模式和屏蔽来阻挡左侧的内容。如果需要通过屏蔽来吸引用户的注意，那么这种情况通常更适合使用弹出窗口。

因此，如果您不想通过新页面打开列表的细节，并且不是强制要求用户关注的任务，您可以以抽屉的形式显示。

以上是几种基本的内容显示形式，以及如何从系统框架级的角度使用内容载体的时间关系，我将留在下次分享。

如果您对这部分的实际项目有任何疑问，也可以在下面留言。

下次见~

作者:酸梅干超人；微信官方账号:超人电话亭

本文由 @超人电话亭 每个人都是产品经理。未经许可，禁止转载。

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