2015年網(wǎng)頁佈局四大新興趨勢：分屏、無容器佈局、塊狀網(wǎng)格和單屏網(wǎng)站

要點：

• 文章指出了2015年出現(xiàn)的四大網(wǎng)頁佈局趨勢：分屏、無容器佈局、塊狀網(wǎng)格和單屏網(wǎng)站。
• 分屏佈局用於突出兩個同等重要的功能或表達二元性概念，而無容器佈局則側(cè)重於內(nèi)容，利用顏色和排版來創(chuàng)建層次結(jié)構(gòu)而不是結(jié)構(gòu)本身。
• 塊狀網(wǎng)格是創(chuàng)建響應(yīng)式網(wǎng)站的多功能工具，其模塊可以根據(jù)屏幕尺寸進行調(diào)整。但是，使用這種佈局區(qū)分內(nèi)容可能是一個挑戰(zhàn)。
• 單屏網(wǎng)站以響應(yīng)式適應(yīng)屏幕的背景圖像為主，通常採用極簡設(shè)計且沒有滾動條。由於空間有限，這種佈局需要清晰的內(nèi)容層次結(jié)構(gòu)。

每年都會出現(xiàn)新的網(wǎng)頁設(shè)計理念，而一些舊的趨勢則逐漸消失。在接下來的幾個月裡，我們無疑會看到視頻背景、瓷磚和動畫故事書的流行度暫時增加，僅舉幾例。

另一方面，幾乎可以肯定的是，早在2010年就出現(xiàn)的響應(yīng)式網(wǎng)頁設(shè)計將在未來相當(dāng)長一段時間內(nèi)仍然是我們設(shè)計的核心。

當(dāng)然，這並不意味著所有網(wǎng)頁都必須轉(zhuǎn)向共同的標準化結(jié)構(gòu)。相反，與以往相比，差異化、靈活性和實驗的空間可能會更大。

我們確定了四個趨勢或總體方案，我們認為這些趨勢將在未來一年主導(dǎo)佈局設(shè)計。您可以從這些模型中獲得靈感，但最佳設(shè)計通常是在您將靈感作為創(chuàng)意的起點時產(chǎn)生的。

以下是這些趨勢。

分屏佈局

我們所說的“分屏”是指那些屏幕通常被垂直部分分成兩部分（通常大小相同）的網(wǎng)站。

將頁面這樣劃分主要有兩個原因：

1. 顯示兩個重要特性。
2. 表達二元性概念。

當(dāng)公司必須推廣具有兩個同等重要特性或變體的產(chǎn)品或服務(wù)時，通常會出現(xiàn)第一種情況。由於網(wǎng)站通常會按重要性順序堆疊元素，因此在這種情況下，更傳統(tǒng)的佈局可能不合適。

另一方面，將屏幕分成兩列可能是展示同一系統(tǒng)兩個不同方面（例如，對發(fā)布者和讀者都有利的發(fā)布系統(tǒng)）的最佳方式。

這樣，就不需要區(qū)分主要特徵和次要特徵，讀者會立即關(guān)注重要的內(nèi)容。

第二個原因源於這樣一個事實，即有時設(shè)計師需要傳達二元性的概念。在這種情況下，將屏幕分成兩部分會創(chuàng)建兩個空間，可以在其中關(guān)注不同的主題，甚至關(guān)注兩個不同的產(chǎn)品。此外，這種風(fēng)格使您能夠突出某種現(xiàn)實的相反特徵。

Desktime http://www.miracleart.cn/link/d45b6d92e35ff59d3f5a1861e431d581

我們將看到的第一個示例是Desktime（一家在辦公共享領(lǐng)域運營的公司）的首頁。他們將頁面分成兩部分，以便同時滿足已經(jīng)擁有辦公室的人和正在尋找辦公室的人的需求。

因此，他們使用“垂直分割”來使他們的服務(wù)中兩個同等重要的功能獲得同等的時間。他們採用的風(fēng)格有效且實用，而且非常簡潔明了。做得好！

第二個例子來自Eight&Four，這是一家數(shù)字營銷公司。他們的主頁也分成兩部分，設(shè)計基於白色和平面顏色之間的對比。這裡的劃分用於表達公司擁有的所有一系列不同功能。

“垂直分割”風(fēng)格也取決於“&”的存在，它減弱了分割效果。

無容器佈局

幾乎從設(shè)計開始，設(shè)計師就一直在使用諸如框、形狀和線條之類的元素來劃分和包含設(shè)計中的內(nèi)容。例如，考慮標題或頁腳是如何始終被設(shè)計成與其餘內(nèi)容在視覺上分離的。

一種新的趨勢正在興起，其核心思想是取消任何圖形結(jié)構(gòu)，轉(zhuǎn)而採用更自由開放的風(fēng)格。

這種趨勢與極簡主義有一些共同之處，但它也更進一步。事實上，極簡主義通常仍然使用簡單、線性的結(jié)構(gòu)，而這種新的“無容器”風(fēng)格則完全剝奪了任何視覺包裝。

內(nèi)容本身成為關(guān)注的中心，信息的層次結(jié)構(gòu)由顏色選擇、位置和深思熟慮的排版來決定，而不是由框和結(jié)構(gòu)來決定。

Foreword http://www.miracleart.cn/link/93bb49ede783ed9c09b650c9234be21a

正如您從首頁看到的，F(xiàn)oreword是一家位於紐約和巴黎的互動機構(gòu)。他們的網(wǎng)站取消了任何包含元素，用戶的注意力在這裡由顏色和字體來集中。

特別是，他們巧妙地運用排版來提供最重要的公司信息。顏色主要用於突出其他可點擊的聲音。很明顯，這個網(wǎng)站除了在各個方面都具有響應(yīng)性之外，還極其簡潔。

塊狀網(wǎng)格

我們無需在此指出，網(wǎng)格結(jié)構(gòu)可以成為創(chuàng)建響應(yīng)式網(wǎng)站的一種非常有效的方式。在這種情況下，每個模塊將包含特定內(nèi)容，例如標題、圖像或文本。

模塊通常用於網(wǎng)站的首頁，但可以在其他頁面中開發(fā)以滿足需求。

每個模塊的尺寸設(shè)計為靈活的，它將適應(yīng)屏幕尺寸。這使得強大的“網(wǎng)格佈局”成為一個非常通用的工具，它可以同樣有效地用於網(wǎng)站和移動應(yīng)用程序。

然而，這種方法的挑戰(zhàn)之一是，如果您創(chuàng)建許多相同大小的模塊，則可能難以區(qū)分最有趣的內(nèi)容和較舊、不太重要的項目。

事實上，如果許多塊的大小相同，用戶的注意力可能不會被任何特定項目所吸引。為了避免這個問題，一種新的方法是根據(jù)模塊包含的內(nèi)容創(chuàng)建不同尺寸的模塊。

Greats是一家位於紐約的公司，主要通過其網(wǎng)站銷售男鞋。他們的網(wǎng)站是他們的展示櫥窗，因此每一個細節(jié)都經(jīng)過仔細研究和考慮。

“Greats”選擇了網(wǎng)格佈局的實用性。他們用模塊行堆疊了他們的主頁，每個模塊都包含一雙鞋。所有模塊的大小都相似，它們的形狀是隱含的，而不是嚴格地標記出來。事實上，用戶被鼓勵忽略除鞋子展示之外的任何其他內(nèi)容。

單屏網(wǎng)站

我們在過去 6 個月中看到的最後一個趨勢是那些以響應(yīng)式始終適應(yīng)屏幕的背景圖像為主的網(wǎng)站。通常，這些網(wǎng)站非常簡潔，並且肯定傾向於極簡主義的設(shè)計感。

然而，這種設(shè)計趨勢的標誌性特徵是它們?nèi)鄙贊L動條：換句話說，這些網(wǎng)站幾乎總是對其UI採用“單頁應(yīng)用程序”方法。

由於可用內(nèi)容空間有限，設(shè)計師應(yīng)該牢記非常清晰的內(nèi)容層次結(jié)構(gòu)，並且在包含不太相關(guān)的信息時應(yīng)該特別有鑑別力。

在大多數(shù)情況下，圖像（或者甚至是視頻）主導(dǎo)著設(shè)計，留給其他設(shè)計理念的空間非常有限。它可以展示產(chǎn)品，也可以簡單地用來喚起一種情感化的、電影般的氛圍。

Shamballa Jewels http://www.miracleart.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

“Shamballa Jewels”是一家銷售一系列珠寶的公司。該網(wǎng)站有一個主頁，由一個獨特的頁面組成，其中展示了他們的一些作品。沒有滾動條，網(wǎng)站的導(dǎo)航由屏幕頂部的菜單提供。

我真正喜歡這個網(wǎng)站的是背景一直在變化。事實上，適合整個空間的圖像與垂直分屏交替出現(xiàn)。

上面的例子表明，出色的、有效的設(shè)計不需要與我們看到的4或5種最常見的佈局模式相綁定。每一個都抵制了從我們看到的流行網(wǎng)格/框架的熟悉性和安全性開始的衝動——並因此獲得了很好的結(jié)果。

這是否意味著更常見的網(wǎng)頁佈局不起作用？

當(dāng)然不是。但正如馬克·吐溫所說，“對於拿著錘子的人來說，一切看起來都像釘子。”

確保你看到的是釘子。

(以下為原文FAQ部分的偽原創(chuàng)，保持了原意，並進行了語句調(diào)整和詞語替換)

網(wǎng)頁佈局設(shè)計的常見問題

Q：有哪些現(xiàn)代網(wǎng)頁佈局設(shè)計趨勢？

A：現(xiàn)代網(wǎng)頁佈局設(shè)計趨勢不斷發(fā)展變化。一些流行的趨勢包括極簡主義設(shè)計、非對稱佈局、分屏佈局和移動優(yōu)先設(shè)計。這些趨勢側(cè)重於創(chuàng)建用戶友好的體驗，提供簡單的導(dǎo)航和引人入勝的內(nèi)容。它們還強調(diào)視覺吸引力，使用大膽的色彩、獨特的排版以及高質(zhì)量的圖像和視頻。

Q：如何使我的網(wǎng)站佈局更具吸引力？

A：要使您的網(wǎng)站佈局更具吸引力，請關(guān)注用戶體驗。這可以通過確保您的網(wǎng)站易於導(dǎo)航，並具有清晰的菜單和鏈接來實現(xiàn)。使用高質(zhì)量的圖像和視頻來吸引用戶的注意力。此外，確保您的內(nèi)容與目標受眾相關(guān)且有趣。加入互動元素，如測驗或投票，也可以提高參與度。

Q：移動優(yōu)先設(shè)計在網(wǎng)頁佈局中的重要性是什麼？

A：移動優(yōu)先設(shè)計是一種設(shè)計策略，它優(yōu)先考慮為移動設(shè)備設(shè)計，然後再為臺式機或其他設(shè)備設(shè)計。這很重要，因為越來越多的人正在使用他們的移動設(shè)備訪問互聯(lián)網(wǎng)。移動優(yōu)先設(shè)計確保您的網(wǎng)站在所有設(shè)備上都能看起來不錯並正常運行，從而提供更好的用戶體驗。

Q：如何在網(wǎng)頁佈局設(shè)計中有效地使用顏色？

A：顏色在網(wǎng)頁佈局設(shè)計中起著至關(guān)重要的作用。它可以設(shè)定情緒、傳達情感，甚至影響用戶行為。為了有效地使用顏色，請考慮您的品牌標識和目標受眾。選擇一個反映您的品牌並吸引您的受眾的調(diào)色板。使用對比色作為文本和背景，以確?？勺x性。此外，使用顏色來突出網(wǎng)站上的重要元素或信息。

Q：排版在網(wǎng)頁佈局設(shè)計中的作用是什麼？

A：排版是網(wǎng)頁佈局設(shè)計中必不可少的元素。它不僅傳達信息，還設(shè)定網(wǎng)站的基調(diào)和個性。選擇易於閱讀並反映您品牌風(fēng)格的字體。使用不同的字體大小和粗細來創(chuàng)建層次結(jié)構(gòu)並引導(dǎo)用戶的注意力。此外，確保文本和背景之間有足夠的對比度以確保可讀性。

Q：如何在網(wǎng)頁佈局設(shè)計中加入多媒體元素？

A：多媒體元素（如圖像、視頻和音頻）可以增強用戶體驗，使您的網(wǎng)站更具吸引力。使用與您的內(nèi)容相關(guān)的優(yōu)質(zhì)圖像和視頻?？紤]使用背景視頻或動畫來增加視覺趣味性。此外，謹慎使用音頻，並為用戶提供播放、暫?；蛘{(diào)整音量等控制功能。

Q：網(wǎng)頁佈局設(shè)計中有哪些常見的錯誤應(yīng)該避免？

A：網(wǎng)頁佈局設(shè)計中應(yīng)避免的一些常見錯誤包括佈局雜亂、導(dǎo)航不良、字體或顏色過多以及未針對移動設(shè)備進行優(yōu)化。此外，避免使用低質(zhì)量的圖像或視頻，並確保您的內(nèi)容易於閱讀和理解。

Q：如何提高我的網(wǎng)站佈局的可用性？

A：要提高網(wǎng)站佈局的可用性，請確保您的網(wǎng)站易於導(dǎo)航，並具有清晰的菜單和鏈接。在整個網(wǎng)站中使用一致的佈局和設(shè)計元素。此外，確保您的網(wǎng)站加載速度快且針對移動設(shè)備進行了優(yōu)化。為殘疾用戶提供輔助功能，例如圖像的替代文本和視頻的字幕。

Q：留白在網(wǎng)頁佈局設(shè)計中的作用是什麼？

A：留白或負空間是設(shè)計中元素之間的空間。它可以用來創(chuàng)建平衡、引導(dǎo)用戶的注意力並提高可讀性。留白還可以使您的設(shè)計看起來簡潔現(xiàn)代。但是，務(wù)必策略性地使用留白，不要留下太多空白空間，以免使您的設(shè)計看起來不完整。

Q：如何保持我的網(wǎng)頁佈局設(shè)計新穎和最新？

A：要保持您的網(wǎng)頁佈局設(shè)計新穎和最新，請隨時了解最新的設(shè)計趨勢和技術(shù)。定期更新您的內(nèi)容，使其與受眾相關(guān)且有趣。此外，考慮每隔幾年重新設(shè)計您的網(wǎng)站，以保持其現(xiàn)代感和吸引力。

以上是2015年的新網(wǎng)絡(luò)佈局想法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！