[譯] 佈局的下一次革新

MeFelixWang發表於2018-08-28

原文地址：The Layouts of Tomorrow

原文作者：mxbck

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：MeFelixWang

校對者：IridescentMia

如果在過去幾年中你參加過任一網頁設計演講，你可能已經看過 Jon Gold 這篇著名的推文：

它諷刺了今天很多網站看起來都一樣的事實，因為它們都遵循我們共同決定使用的相同標準佈局實踐。建立部落格？主欄，工具側邊欄。營銷網站？大圖，三個博眼球的框（一定是三個）。

當我們回顧早期的網頁時，我認為今天的網頁設計有更大的創造力。

進入 CSS 網格

Grid 是網頁佈局上第一個真正的工具。到目前為止，我們所擁有的一切，從表格到浮動，從絕對定位到彈性盒子 —— 都是為了解決不同的問題，我們找到了使用和濫用它來進行佈局的方法。

這些新工具的重點不是使用不同的底層技術再次構建相同的東西。它有更多的潛力：它可以重塑我們對佈局的思考方式，使我們能夠在網頁上做一些全新的，不同的事情。

我知道，當你長時間以某種方式構建東西時，很難進入一種新的思維模式。我們受過培訓，將網站視為標題，內容和頁尾的組合。還有條紋和盒子。

但為了讓我們的行業持續進步（以及讓我們的工作有趣），偶爾退一步並重新思考我們的工作方式是個好主意。

如果我們不這樣做，我們仍然會使用間隔的 gif 圖和全大寫 <TABLE> 標籤來構建東西。?

那麼，看起來會是什麼樣呢？

我在 dribbble 上尋找過讓佈局有所突破的想法。那種會讓像我這樣的前端開發人員乍一看眉頭緊鎖的設計。

有很多很棒的作品 —— 這裡有一些我最喜歡的：

"Warehouse" by Cosmin Capitanu

"Fashion Boutique" by KREATIVA Studio

"Organic Juicy Co." by Broklin Onjei

"Travel Summary" by Piotr Adam Kwiatkowski

"Digital Walls" by Cosmin Capitanu

我特別喜歡最後一個。它讓我想起了 Windows 8 中風靡一時的“Metro Tiles”。它不僅視覺上令人印象深刻，而且非常靈活 —— 它可以在手機，平板電腦上工作，在設計師的建議下，即使在巨大的電視螢幕上或 AR 中也可以。

考慮到我們今天擁有的工具，製作這樣的東西有多難？我想搞清楚，於是開始構建原型。

我試著在生產環境的真實約束下來實現它。因此，介面必須具有響應性，高效能和可訪問性。（儘管如此，它並不需要畫素級還原，因為你懂的 —— 那是不可能的。）

結果如下：

你可以在 Codepen 上檢視最終結果。

? 由於這僅用於演示目的，因此我沒有為舊版瀏覽器降級、打補丁。我的目標是在這裡測試現代 CSS 的功能，因此並非所有功能都具有跨瀏覽器支援（如下所示）。我發現它在最新版本的 Firefox 或 Chrome 中效果最佳。

實現過程中一些有趣的東西：

佈局

不出所料，“Metro Tiles”的關鍵因素是網格。整個佈局邏輯在此程式碼塊下自適應：

.boxgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 2rem .5rem;

    &__item {
        display: flex;

        &--wide {
            grid-column: span 2;
        }
        &--push {
            grid-column: span 2;
            padding-left: 50%;
        }
    }
}
複製程式碼

神奇的地方主要在第二行。repeat(auto-fit, minmax(150px, 1fr)) 響應地處理列建立，這意味著它將在一行中連續放入儘可能多的盒子以確保它們與外邊緣對齊。

--push 修飾類用於實現設計的效果，其中一些盒子“跳過”一欄。由於在沒有明確設定網格線的情況下這是不可能的，我用了個技巧：實際的網格單元格跨越兩列，但只允許有足夠的空間來填充單元格。

動畫

原始設計中每節背景和每個 tile 網格以不同的速度移動，產生了深度上的錯覺。沒什麼特別的，只是一些好的舊視差而已。

雖然這種效果通常是通過 Javascript 繫結滾動事件然後應用不同的 transform 樣式來實現的，但還有更好的方法：完全用 CSS。

這裡的祕訣是利用 CSS 3D 變換將圖層沿 z 軸分開。Scott Kellum 和 Keith Clark 的這項技術實際上是通過在滾動容器上使用 perspective 和在視差子元素上使用 translateZ 來實現的：

.parallax-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  /* set a 3D perspective and origin */
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  /* move the children to a layer in the background,
     then scale them back up to their original size */
  transform: translateZ(-2px) scale(3);
}
複製程式碼

這種方法的一個巨大好處是提高了效能（因為它不會觸及帶有計算樣式的 DOM），其結果是減少了重繪及做到幾乎 60fps 的平滑視差滾動。

吸附點

CSS Scroll Snap Points 是一個有點實驗性的功能，但我認為它很適合這種設計。基本上，你可以告訴瀏覽器在文件中滾動到接近某個元素的點時“吸附”到該元素上。目前支援非常有限，你最好的選擇是在 Firefox 或 Safari 中使用它。

目前有不同版本的規範，只有 Safari 支援最新的實現。Firefox 仍然使用較舊的語法。組合方法如下所示：

.scroll-container {
    /* current spec / Safari */
    scroll-snap-type: y proximity;

    /* old spec / Firefox */
    scroll-snap-destination: 0% 100%;
    scroll-snap-points-y: repeat(100%);
}
.snap-to-element {
    scroll-snap-align: start;
}
複製程式碼

scroll-snap-type 告訴滾動容器沿著 y 軸（垂直方向）根據 proximity “嚴格”地進行吸附。這使瀏覽器可以決定是否可以使用吸附點，以及是否是跳轉的好時機。

對於功能強大的瀏覽器，吸附點是一個小小的增強功能，而其他瀏覽器只是簡單地降級為預設滾動。

平滑滾動

唯一涉及 Javascript 的地方是在左側的選單項或點選頂部/底部的方向箭頭時處理平滑滾動時。這是從簡單的頁內錨連結 <a href="#vienna"> 跳轉到所選部分的漸進增強。

為了實現動畫，我選擇使用 vanilla Element.scrollIntoView() 方法 (MDN Docs)。某些瀏覽器接受一個可選引數來使用“平滑”滾動行為，而不是立即跳轉到目標部分。

scroll behaviour property 目前是一個工作草案，所以還沒有普遍支援。目前只有 Chrome 和 Firefox 支援此功能 —— 但是，如果需要，可以使用補丁。

創造性思考

雖然這只是對可能性的一種解釋，但我確信使用我們現有的工具可以實現無數其他創新想法。設計趨勢可能一如既往地來去匆匆; 但我確信認為值得記住的是，網頁是一種流動的媒介。技術在不斷變化，為什麼我們的佈局保持不變？去探索吧。

[譯] 佈局的下一次革新

進入 CSS 網格

那麼，看起來會是什麼樣呢？

佈局

動畫

吸附點

平滑滾動

創造性思考

更多資源

相關文章