重新認識頁面、浮層、彈窗和抽屜

輯導語：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 相對屏幕（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果

在線咨詢

上一篇：ASP.NET Web Forms-ArrayLis
下一篇：淺談關于我的HTML5學習方法，快瞧瞧適不適合你

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商