2015年網頁布局四大新興趨勢：分屏、無容器布局、塊狀網格和單屏網站

要點：

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

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

另一方面，幾乎可以肯定的是，早在2010年就出現的響應式網頁設計將在未來相當長一段時間內仍然是我們設計的核心。

當然，這并不意味著所有網頁都必須轉向共同的標準化結構。相反，與以往相比，差異化、靈活性和實驗的空間可能會更大。

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

以下是這些趨勢。

分屏布局

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

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

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

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

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

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

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

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

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

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

Eight&Four http://www.miracleart.cn/link/ad100897c6f809081d942836af421f86

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

“垂直分割”風格也取決于“&”的存在，它減弱了分割效果。

無容器布局

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

一種新的趨勢正在興起，其核心思想是取消任何圖形結構，轉而采用更自由開放的風格。

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

內容本身成為關注的中心，信息的層次結構由顏色選擇、位置和深思熟慮的排版來決定，而不是由框和結構來決定。

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

正如您從首頁看到的，Foreword是一家位于紐約和巴黎的互動機構。他們的網站取消了任何包含元素，用戶的注意力在這里由顏色和字體來集中。

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

塊狀網格

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

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

每個模塊的尺寸設計為靈活的，它將適應屏幕尺寸。這使得強大的“網格布局”成為一個非常通用的工具，它可以同樣有效地用于網站和移動應用程序。

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

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

Greats http://www.miracleart.cn/link/2fe37bd25993870f5a38563dd25b1d05

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

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

單屏網站

我們在過去 6 個月中看到的最后一個趨勢是那些以響應式始終適應屏幕的背景圖像為主的網站。通常，這些網站非常簡潔，并且肯定傾向于極簡主義的設計感。

然而，這種設計趨勢的標志性特征是它們缺少滾動條：換句話說，這些網站幾乎總是對其UI采用“單頁應用程序”方法。

由于可用內容空間有限，設計師應該牢記非常清晰的內容層次結構，并且在包含不太相關的信息時應該特別有鑒別力。

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

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

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

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

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

這是否意味著更常見的網頁布局不起作用？

當然不是。但正如馬克·吐溫所說，“對于拿著錘子的人來說，一切看起來都像釘子?！?/p>

確保你看到的是釘子。

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

網頁布局設計的常見問題

Q：有哪些現代網頁布局設計趨勢？

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

Q：如何使我的網站布局更具吸引力？

A：要使您的網站布局更具吸引力，請關注用戶體驗。這可以通過確保您的網站易于導航，并具有清晰的菜單和鏈接來實現。使用高質量的圖像和視頻來吸引用戶的注意力。此外，確保您的內容與目標受眾相關且有趣。加入互動元素，如測驗或投票，也可以提高參與度。

Q：移動優(yōu)先設計在網頁布局中的重要性是什么？

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

Q：如何在網頁布局設計中有效地使用顏色？

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

Q：排版在網頁布局設計中的作用是什么？

A：排版是網頁布局設計中必不可少的元素。它不僅傳達信息，還設定網站的基調和個性。選擇易于閱讀并反映您品牌風格的字體。使用不同的字體大小和粗細來創(chuàng)建層次結構并引導用戶的注意力。此外，確保文本和背景之間有足夠的對比度以確?？勺x性。

Q：如何在網頁布局設計中加入多媒體元素？

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

Q：網頁布局設計中有哪些常見的錯誤應該避免？

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

Q：如何提高我的網站布局的可用性？

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

Q：留白在網頁布局設計中的作用是什么？

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

Q：如何保持我的網頁布局設計新穎和最新？

A：要保持您的網頁布局設計新穎和最新，請隨時了解最新的設計趨勢和技術。定期更新您的內容，使其與受眾相關且有趣。此外，考慮每隔幾年重新設計您的網站，以保持其現代感和吸引力。

以上是2015年的新網絡布局想法的詳細內容。更多信息請關注PHP中文網其他相關文章！