辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。

在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。

本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。

一、内容的载体形式

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

在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。

不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。

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

如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。

早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。

随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。

简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。

比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。

所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。

其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。

二、浮层的使用解析

首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。

浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。

浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。

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

浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。

如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。

三、弹窗的使用解析

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

而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。

之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。

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

或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。

高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。

因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。

如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。

四、抽屉的使用解析

最后，就是最难选择，也最容易和其它组件搞混的抽屉了。

抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。

比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。

和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。

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

它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。

也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。

所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。

五、结尾

以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。

如果有关于这部分的实际项目疑问，也可以在下方留言。

我们下篇再见～

作者：酸梅干超人；公众号：超人的电话亭

本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。

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

天学会html+css，第九天固定定位。

Redmi手机电视笔记本。

今天的学习目标是右侧悬浮工具栏用固定定位实现，它是相对于浏览器窗口的定位方式。

·盒子里的内容用a标签，一个图片加一行文字，此时它的位置在最底部。

·然后给它写上固定定位样式，右侧距离0，下面距离70像素，加上背景颜色，看下效果。

·开始给a标签写样式，固定宽高，text-renderin默认下划线去掉，里面内容居中，看下效果。

·图片写样式之前也要加上这行代码，然后让它的尺寸变小一点，并且左右居中，看下效果。

·文字的颜色、大小也调整一下。

·最后给a标签加上边框、内边距，让里面内容往下挪一挪。

到此，今天的学习完成。

差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页解刨成：背景层、内容层、悬浮层

使用css形式实现视觉差滚动效果的方式有：

• background-attachment
• transform:translate3D

background-attachment

作用是设置背景图像是否固定或者随着页面的其余部分滚动

值分别有如下：

• scroll：默认值，背景图像会随着页面其余部分的滚动而移动
• fixed：当页面的其余部分滚动时，背景图像不会移动
• inherit：继承父元素background-attachment属性的值

完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动

也就是说，背景一开始就已经被固定在初始的位置

核心的css代码如下：

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

整体例子如下：

<style>
div {
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            line-height: 100vh;
            text-align: center;
            font-size: 20vh;
        }

        .a-img1 {
            background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img2 {
            background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img3 {
            background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
</style>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

transform:translate3D

同样，让我们先来看一下两个概念transform和perspective：

• transform: css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,等等
• perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感

举个例子：

<style>
    html {
        overflow: hidden;
        height: 100%
    }

    body {
        /* 视差元素的父级需要3D视角 */
        perspective: 1px;
        transform-style: preserve-3d; 
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #app{
        width: 100vw;
        height:200vh;
        background:skyblue;
        padding-top:100px;
    }
    .one{
        width:500px;
        height:200px;
        background:#409eff;
        transform: translateZ(0px);
        margin-bottom: 50px;
    }
    .two{
        width:500px;
        height:200px;
        background:#67c23a;
        transform: translateZ(-1px);
        margin-bottom: 150px;
    }
    .three{
        width:500px;
        height:200px;
        background:#e6a23c;
        transform: translateZ(-2px);
        margin-bottom: 150px;
    }
</style>
<div id="app">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

而这种方式实现视觉差动的原理如下：

• 容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，
• 子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
• 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果