12個經典永恒的網站設計及布局樣式

網站UI設計趨勢每年都都在不斷變化中，但有幾種網站UI設計布局模式則經受住了時間的考驗，是什么讓 UI 模式永不過時？堅持網頁布局最佳實踐，從而將用戶友好性和對不斷變化的趨勢和技術的適應性結合起來。，有幾個標準可以使 UI 模式持久。用戶友好性就是其中之一，一種“看起來很棒”但不能帶來極大可用性的 UI 模式不會持續(xù)很長時間， 最有用的 UI 模式也能適應不斷變化的趨勢。例如，卡片式和基于網格的布局可以由UI 設計人員以多種方式實現。適應性使它們能夠繼續(xù)看起來現代和流行，即使它們可能已經存在多年。

1、卡片式網頁布局模式
顧名思義，這些布局使用類似于各種形狀和大小的物理卡片的內容塊。有兩種主要的布局格式。一種布局在網格上排列尺寸相同的卡片（如Toptal 設計博客主頁所示），而另一種使用流體布局，將不同大小的卡片排列成有序的列但沒有明顯的行（如Pinterest的布局）。 卡片式布局效果很好，因為它們允許以有序的方式排列不同的內容，同時將所有部分分開。人們對卡片也很熟悉，因為他們可以從現實世界中識別出卡片形狀的物品。它們在心理上是有意義的，即使人們不熟悉網站，也很容易使用。

2、分屏布局
當兩個元素需要在頁面上具有相同的權重時，分屏布局是一種流行的設計選擇，并且通常用于文本和圖像都需要突出顯示的設計中。將它們并排放置而不是垂直放置或將文本覆蓋在圖像上是一種有意識的設計選擇，可以賦予精致、簡約的品質。并排放置的兩個圖像也很常見，有時帶有文本疊加。 大多數分屏設計都相當均勻地劃分，盡管有些以不同的比例劃分。（33:66 或 40:60 似乎是最流行的比例；當屏幕被分成小于 ? 的尺寸時，它更像是一個側邊欄，而不是真正的分屏設計。） 分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在這些頁面上突出顯示，但價格、規(guī)格、添加到購物車按鈕和產品選項等基本信息也是如此。

3、大排版
自從網絡出現以來，大字體就一直存在，但隨著移動設計的流行，它變得流行起來。大字體在標題和標題中特別受歡迎，但也可以在某些網站的正文中看到。選擇正確的字體后，較大的文本更具可讀性并改善用戶體驗。此外，它還可以提供強大的視覺效果。它在極簡主義設計中特別受歡迎，其他視覺元素大多不存在。

4、個性化
個性化算法已經存在多年，可以根據每個人的喜好定制數字體驗。AI 使這些算法變得更加有用，具有建議算法等功能，現在可以準確預測一個人接下來想要觀看、閱讀、學習或購買的內容。

5、網格
長期以來一直是 UI 設計的一部分，從 1990 年代后期的基于表格的布局開始（盡管在此之前很久它們就被用于書籍和報紙等的印刷布局）。當 CSS 在創(chuàng)建布局方面變得流行時，更優(yōu)雅的網格系統(tǒng)被開發(fā)出來，最早的顯著例子是960.gs grid。 網格為設計提供視覺平衡和秩序，使人們更容易消費內容。同時，網格可以在 Web 布局中提供很大的靈活性。大多數網格系統(tǒng)使用 12 或 16 列，中間有裝訂線。一些使用基于網格的布局的網站使網格成為設計的一個突出特點。相比之下，其他的則更加微妙，網格只有在仔細檢查時才會變得明顯（有時只有當實際網格覆蓋在設計上時）。 除了基于列的布局網格之外，基線網格還常用于網頁設計中，以邏輯方式水平放置元素。例如，在檢查正文和標題行之間的間距時，這在排版中最為明顯?；€水平網格間距與網頁設計中使用的垂直網格間距密切相關。

6、雜志風格
新聞和期刊行業(yè)嚴重影響了網絡上雜志式的布局。在早期，它們主要出現在新聞網站和在線雜志上。隨著時間的推移，它們在其他領域越來越受歡迎，現在可以在不同類型的網站上看到它們，包括電子商務網站和博客。 雜志風格的布局包括一篇特色文章（或有時采用輪播或類似格式的多篇特色文章），以及主頁上的二級和三級文章。他們也往往有多個內容欄，有時分為幾個部分。這些 Web 布局適用于具有大量內容的站點，尤其是那些每天添加新內容的站點。

7、單頁布局
單頁布局將站點的所有主要內容放在一個網頁上。導航是通過滾動完成的，通常帶有跳轉到特定部分的快捷方式，有時還有視差滾動效果。有時，他們可能會使用次頁面來顯示條款和條件、隱私政策或其他不屬于主要內容的信息，但這不應阻止將布局視為單頁。對于內容稀疏的網站，單頁網站布局是一個很好的解決方案。它們也是敘事內容的完美選擇，例如交互式兒童讀物。

8、F 和 Z 模式
F 和 Z 模式指的是一個人的眼睛如何在頁面上移動——人們如何瀏覽內容。一個F-模式具有跨頁面的頂部突出的內容，與在它之下對準的輔助內容在頁面的左側（大致的“F”形）。一個Z-圖案具有沿著頂部突出的內容，與其它有價值的內容進一步下跌。眼睛是從頁面的右上角到左下角對角繪制的（大致呈“Z”形）。 F 模式適用于內容比 Z 模式更多的頁面，其中有一個非常明確的視覺層次結構。當訪問者應該看到兩段同等（或接近同等）相關的內容時，Z 模式更有用。

9、不對稱
簡單來說，不對稱就是不對稱。在設計中，不對稱創(chuàng)造了更加動態(tài)和有機的視覺沖擊。在大多數情況下，不對稱是使用彼此不完美平衡的圖像和文本造成的。不對稱也可以通過背景元素來創(chuàng)建或加強，例如在各個頁面部分之間使用不同的模式。由于不對稱會產生動態(tài)、充滿活力的視覺印象，因此對于想要傳達這種形象的品牌來說非常有用。不對稱也可能出乎意料，使設計更令人難忘，并且在包含的內容在對稱布局中無法正常工作時具有實際用途。

10、簡約的網頁布局
幾十年來，簡潔的布局在 UI 設計中已經流行又過時，盡管它們經常流行。這些布局的美妙之處在于它們完全專注于內容，沒有視覺混亂。 干凈簡單的布局幾乎適用于任何類型的網站。這里的許多其他 UI 模式與干凈的布局一起工作得很好。有干凈版本的網格、雜志式布局、不對稱設計和分屏布局。許多最優(yōu)雅的網站都可以被認為是“干凈的”，無論它們可能包含哪些其他設計功能。

11、導航標簽
導航標簽最初是擬物設計的支柱，類似于文件夾或活頁夾分隔符上的標簽。然而，隨著它的成熟，標簽式導航并不總是類似于現實的標簽。相反，導航選項卡的標志是菜單中的每個項目都與其他菜單項目在視覺上分開。有時，這很微妙，有時，它僅在選擇或懸停菜單項時出現。導航選項卡最適合只有少數項目的較小菜單。否則，它們可能看起來很雜亂。但是，它們可以與子菜單的下拉菜單結合使用以添加其功能。它們通常也出現在水平導航中，盡管確實存在垂直示例。

12、旋轉木馬
內容輪播通常出現在網站的標題或英雄部分。它們通常包含與文本結合的圖像，盡管有些可能只包含一個或另一個。當空間非常寶貴時，它們用于在網站的單個部分中顯示多個內容片段。輪播在一些用途中非常有效。博客或新聞網站上的特色內容非常適合輪播。產品、促銷和銷售通常也出現在電子商務網站的輪播中。雖然輪播通常出現在網頁頂部附近，但它們也可以在小節(jié)中使用以突出顯示相關內容。它們是主頁內容和特定類別的內容或產品的單個頁面的流行選擇。