您是否已經(jīng)注意到網(wǎng)站設(shè)計中的這種趨勢：多層級設(shè)計？我一直感覺最近總是在很多地方可以看到這種趨勢的使用，不過說實話，這是一個很容易兩極分化的趨勢！

這是一種設(shè)計技術(shù)，從視覺效果和可用性方面往往要么讓人印象深刻，要么就是一場視覺災(zāi)難。很明顯，同其他趨勢一樣，它也有一個中間地帶，而很多時候我們可能往往走得太遠了

今天，我們將看看一些最有效地使用它的方法，以及更多關(guān)于這種設(shè)計趨勢的內(nèi)容。

識別設(shè)計趨勢（Identifying the Design Trend）

以這種趨勢為特色的網(wǎng)站設(shè)計往往包括多個層次，這些層次結(jié)合在一起共同形成一個有趣的視覺并“訴說故事”。圖層通常是交互式的，包括動畫或滾動效果，但并非總是如此（有時這些設(shè)計是靜態(tài)的，具有分層外觀）。

三個層次是大多數(shù)使用這種趨勢的標準，一般包括：

· 背景：通常是圖像、紋理或靜態(tài)圖層

· 中間層：通常是某種類型的圖像或交互元素

· 前景：通常包括文案或圖像（中間層和前景層有時一起（或相反）工作以創(chuàng)建完整的設(shè)計）

主要特征（Key Characteristics）

同它的名稱一樣，這些設(shè)計往往有很多活動組件。滾動動作通常有助于使圖層更加栩栩如生，以便你可以看到每個圖層的差異以及它們?nèi)绾谓M合在一起工作。

滾動交互性是這些項目的重要組成部分，無論是幫助元素協(xié)同工作還是讓用戶在設(shè)計中找到更多層次的內(nèi)容。并非所有這些項目都明顯地從主頁上體現(xiàn)了這種設(shè)計趨勢，有時它位于滾動下方，甚至在網(wǎng)站的更深處。

讓它運作良好的訣竅是將感覺和諧的設(shè)計元素結(jié)合在一起。這包括從顏色到大小到形狀和比例的所有內(nèi)容。如果層看起來就不和諧并不能一起發(fā)揮作用，它可能會產(chǎn)生可用性問題，從而使設(shè)計失效。

關(guān)于這些項目，你會注意到的另一件事是，它們中的許多似乎都具有帶有卡片樣式元素的圖層。這種設(shè)計技術(shù)已經(jīng)流行了一段時間，并且繼續(xù)與這種趨勢保持一致。

使用此網(wǎng)頁設(shè)計趨勢的提示（Tips for Using this Web Design Trend）

使用這種風格和趨勢的每個網(wǎng)站設(shè)計的整體可能會有很大的不同，因為它與顏色、排版或圖像等元素無關(guān)。

但是這些元素中的每一個都會產(chǎn)生影響。你需要考慮如何將它們放在一起使用，來創(chuàng)建一個引人入勝并充分利用每一層的視覺故事。

使用這種設(shè)計趨勢時，最重要的考慮因素是考慮圖層之間的交互方式。使用滾動動作或其他動作，元素有什么作用？理想情況下，你希望圖層以某種感覺和看起來有目的的方式進行交互。

在上面的 Lost Mechanics Interactive Studio 示例中，有一個黑色背景層、一個文本層、一個與文本層合并的圖像層，以及位于所有內(nèi)容之上的第四個層，以完成這個時髦的視頻效果。

各個層級的元素包括文本、圖像甚至卡片元素等，它們相互堆疊當彼此和諧。雖然設(shè)計看起來比較復雜，但它可以無縫運行，并且一切都易于使用和理解。內(nèi)容是有組織的，這是如何有效使用多個圖層的比較好的案例。

需要注意的事項（Things to Be Aware Of）

使用這種設(shè)計趨勢需要小心和有效的規(guī)劃。并且使用一種有效的前端動畫技術(shù)并不一定容易。

需要注意的兩個關(guān)鍵事項包括：

· 圖層如何交互和重疊

· 響應(yīng)性

這些要素密切相關(guān)。交互需要以這樣一種方式設(shè)計，即使有層，網(wǎng)站上的所有內(nèi)容也都需要易于理解和閱讀。這是這種設(shè)計趨勢的最大挑戰(zhàn)，也是許多使用它的項目都存在的敗筆。尤其是可讀性，成為許多此類項目的關(guān)注點。

響應(yīng)性始終是網(wǎng)頁設(shè)計的考慮因素，但是一旦你以一種尺寸正確地設(shè)置圖層，它們在其他方面的工作方式可能會有所不同。對于這么多移動的組件，響應(yīng)性可能會非常棘手。

3個我們喜歡的例子（3 Examples We Love）

有一些網(wǎng)站設(shè)計很好的在他們的作品中使用了這種趨勢，為如何將這些項目組合在一起提供了靈感。

Shipwreck Survey

Shipwreck Survey 優(yōu)雅地使用圖層，具有一致的配色方案和背景圖像以及與前景文案之間的照片插圖，增加了額外的層次感受。設(shè)計師繼續(xù)在整個滾動中使用帶有圖像元素的圖層，以幫助將完整的視覺感覺融合在一起。小圖像的另一個作用是，增加你對這個網(wǎng)站的好奇心，這些小圖像是主要的視覺吸引點，分層效果有助于將更多的圖像融入設(shè)計中。

Sirup

Sirup 使用大量的動畫、時髦的字體、圖像，甚至是視頻等元素來共同組合為一個引人入勝且有趣的分層包。滾動效果也處理得很好，為主圖像增加了三維感覺。這里圖層元素使用得別有用心的關(guān)鍵之一是透明度的暗示，將它們結(jié)合在一起。

Elegant Seagulls

Elegant Seagulls 以一種在不那么顯眼的方式使用多個層次，給人的感覺上像是在同用戶玩“躲貓貓”。背景是鳥類的視頻，中間層是純白色飛濺元素，稍后還有一個交互式頂部，隨鼠標移動的圓形號召性用語按鈕。視頻背景統(tǒng)一且有效地用于設(shè)計的多個位置（還請確保單擊菜單以獲得帶有卡片的漂亮小設(shè)計效果）。

結(jié)論

雖然這種設(shè)計趨勢并不容易做的出彩，但如果做得好，它可以具有高度的視覺和交互性。為了充分利用它，當你也有比較豐富的內(nèi)容層時，請考慮這種設(shè)計技術(shù)。

將內(nèi)容與設(shè)計美學相互結(jié)合是創(chuàng)建一個優(yōu)秀的網(wǎng)站設(shè)計以及提高用戶粘性的最佳方式。

----圖文來自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)