新一代網路版面配置 - 國家地理森林巨人

Christopher Gammon
Christopher Gammon
X 首頁

擴充 CSS 和瀏覽器版面配置中的工具，可以針對網頁內容呈現令人驚豔的視覺化效果。只要運用 CSS 篩選器、WebGL、HTML5 影片、SVG、畫布和日新月異的技術 (例如 CSS 區域、CSS 形狀和 CSS 自訂篩選器)，將能打造出可大幅擴充的廣告素材環境。Adobe 長久以來一直與熱愛版面配置和設計的內容創作者合作，他們積極將這項知識應用到網路上，為許多日新月異的網路標準貢獻心力。

在國家地理雜誌的協助下，我們利用名為「Forest Giant」的功能建構原型，展示這些功能如何提供豐富的網頁版面配置和回應式技術。本文將介紹我們如何建構一些特別有趣的網站特徵。如需簡要說明，建議觀看下方影片，Christian Cantre 將帶您瞭解網站的各項功能。

版面配置細節

何者融合了絕佳的版面配置與幕後功用，因此我們建立了「編輯器的疊加層」，強調更多值得注意的地圖項目。如要啟用編輯者的標記，請按一下文章底部的列。

編輯者的標誌圖片

獨立版面配置

在現今的網路中，版面配置通常是由我們的內容所決定，容器可以垂直放大，讓文字貼合文字。建立複雜的版面配置時，變更文案或其他內容可能會對整體版面配置造成不利影響，因此需要根據非預期的變更重新設計內容。透過區域，我們可以將元素定義為我們的內容，然後指定要在版面配置中流入的部分，藉此真正區隔內容和版面配置。

在這個例子中，我們把故事納入「Forest Giant」的單一元素中，接著，在整個網頁中，我們使用版面配置鷹架，包含相片和文字區域。CSS 可讓您定義內容傳遞的元素，當副本到達元素結尾時，會依據 DOM 順序繼續到下一個元素。這樣一來，我們就能發揮創意，運用我們的欄位發揮創意，根據設計調整欄寬，又不會考慮文字是否適合或超過元素高度。而且，還能在版面配置中加入完整寬度圖片等元素，同時繼續朗讀故事內容。

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

在上述 CSS 中，我們建立名為 "story" 的命名流程。這個已命名流程的內容是 ID 為 "storyContent" 的元素。這麼做會穿過所有名稱為 "story" 的元素。CSS 區域是回應式設計的絕佳工具，可運用多欄和偏移欄等功能，在大型螢幕上呈現豐富的版面配置，同時在較小的螢幕上調整為單欄版面配置。使用「區域」時，您也可以使用 vw 或 vh 等回應式單元來設定區域的大小。這能確保欄不會超過版面配置的可視區域高度，不必擔心內容遭到截斷，因為這些內容會自然流入區域鏈中的下一個元素。

滴水帽

CSS 排除功能可讓我們以不規則形狀的外框或周圍來換行。在設計方面 (例如掉落帽) 的設計方面，這個功能十分實用。放置大寫是常見的設計做法，也就是故事或章節的第一個字母放大，讓其餘文字圍繞角色輪廓。這種效果與內嵌內容繞浮點的方式非常類似，但有了排除功能，我們不再限制矩形方塊。只要使用浮動的形狀，我們就可以定義幾何圖形，讓內容能圍繞我們的字元形狀。

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

即可建立橢圓形，允許內容繞圓形形狀。此外，由於我們使用的是形狀的相對單位，因此變更元素的大小也會反映在形狀的大小中。

放置上限圖片

形狀

除了放置大寫之外，排除功能還能讓您使用圖形自動換行功能。我們對整個網站使用此功能，特別是針對大型圖片說明文字，使用負空間大小來凸顯文字。此外，對於先前在網路上難以達成的版面配置，採用這個架構也能將文字納入輪廓，納入其他圖片和圖像模擬版面配置中。

您也可以使用相對單位來定義形狀，藉此將形狀與回應式版面配置搭配使用。這樣一來，我們就能根據容器或可視區域建立會延展的形狀，甚至使用媒體查詢來完全變更或移除形狀，因為這個形狀都是 CSS 所定義。以下舉例說明如何在網站中使用某個多邊形形狀，以定義點的值：

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
CSS 形狀圖片

平衡文字

「平衡文字」功能會在元素換行時，查看元素中整個文字區塊，而非逐字換行。這種做法可以避免單行使用一到兩個字詞，藉此在元素中呈現大小均等的線條。這種程度的控管方式讓我們可以輕鬆建立精美的文字區塊，特別是在拉高引號或字幕這類小跑步途中。

這正是報導文章中使用平衡文字的位置。由於這項功能是 Adobe 建議的標準功能，因此我們採用 Randy Edmunds 建立的 polyfill 來得到相同的結果。這項功能最適合用於回應式情況。調整瀏覽器大小時，您會注意到區塊繼續平衡文字，讓多行文字的寬度大致相同。使用平衡的文字 polyfill 相當簡單，因為這是 jQuery 外掛程式，只要在版面配置變更時將「balanceText()」套用至選取器，即可取得良好的平衡文字，看起來就像這樣：

$('.balance').balanceText();
平衡文字圖片

濾鏡轉場效果

轉換是引導使用者的注意力，以及傳達網站內容狀態的重要方式。隨著不透明度 (還有近期更多的 3D 轉換功能) 所呈現的效果，當使用者捲動瀏覽或與網站的某些部分互動時，這些轉換和動畫就能派上用場。我們現在提供同樣用途的篩選器。

在「Forest Giant」中，我們使用濾鏡將部分圖片從灰階淡化為色彩。這些濾鏡結合不透明度或其他濾鏡，即可建立複雜的影像特效和轉場效果。我們可以利用強大的自訂濾鏡增添效果更顯著的效果。

自訂篩選器是使用 GLSL 編寫而成，陰影語言與 WebGL 相同。您可以利用這些調色器，透過 CSS 將著色器套用至 DOM 元素，產生複雜的混合效果和 3D 變形效果。點選網站底部的「探索總統樹」後，您會看見頁面彎曲，開始顯示下方另一個部分。這只是其中一個例子，自訂篩選器可讓內容之間加入豐富的轉場效果。你可以使用 CSS 轉場效果製作動畫。不過，如要使用比轉場效果更強大的動畫或互動功能，可以使用 JavaScript 設定樣式 (如下所示)，將值傳遞至著色器。這樣一來，您就能更精細地控制加/減速，甚至允許使用者輸入的方法操控著色器。

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

我們的濾鏡會將內容光柵化為 GPU 的紋理，套用效果。因此，我們必須在完成後移除影片，否則內容可能會模糊不清。

$("#map").css("webkitFilter", "none");

CSS 自訂篩選器提供有趣的效果，例如翻頁處理成翻頁的樣子。這些 API 可讓網頁程式開發人員透過 GLSL 這個語言編寫複雜效果，並套用到網路內容。如要進一步瞭解自訂篩選器、所有參數以及使用方式，請參閱這個精彩的教學課程。

翻頁圖片

在 WebGL 中預先算繪紋理

本文的珠寶首飾是「總統」的第一張完整圖片，據信是全球數量第二大的樹木。這張圖片是將數百張樹木相片拼接而成，以呈現完整的相片。我們想要模擬這個過程，也就是將圖片分割成數個小相片，然後飛進來呈現全貌。具體做法是使用 WebGL (尤其是 Three.js 程式庫)，這是 WebGL 較高階的 API 包裝函式。

巨型樹圖片

每當新的紋理嘗試在螢幕上繪圖時，如果算繪大量紋理，可能很快就會造成效能問題，而不是提及額外的網路要求。為了減少這樣的情況，我們盡可能地放大紋理，並為每個圖塊的偏移值。這種技術通常稱為 Sprite 對應，在遊戲開發中是很常見的做法。這為整個樹產生了三個大型紋理。為了在每次顯示一個紋理首次顯示時去除效能命中，我們會在動畫開始之前，為每個紋理算繪 1px 的正方形，將成效命中移至開頭。如此一來，我們就可以流暢地飛行並模擬整個樹木的高度，即使在平板電腦上也是如此。

為了偏移紋理，我們調整了 UV 的座標，以便將紋理對應至幾何圖形。在 Three.js 中，這看起來會像這樣：

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

如您所見，我們在紋理的 x 和 y 偏移中使用變數。您也可以使用自訂的 GLSL 著色器材質來偏移幾何圖形上的繪製座標，以達到同樣的效果。

實驗功能

由於這項示範的某些功能仍在實驗階段，因此該文章需要在 Chrome Canary 中查看，並且在這個網站啟用 Chrome Canary 中提到的所有旗標。

安裝並正確設定 Chrome Canary 後，請觀看示範影片。(請注意，整項專案皆為開放原始碼，並前往 GitHub 下載。)

結論

我們也一直在研究這些功能如何應用在行動應用程式中，更涵蓋在電子書中。您現在可以看到開發中的原型，並瞭解我們如何運用不同的互動方式和觸控模式，在平板電腦上展示這些功能。

網路瀏覽器配置日新月異，我們迫不及待想延續過往的傳統閱讀內容，繼續增進生產價值和版面配置品質。有了 CSS 區域、排除、平衡文字、自訂篩選器和 WebGL 等功能，內容創作者就不必在觸及率和設計品質之間做出選擇。「Forest Giant」的定位是未來網路會同時允許兩者。