如果您缺乏藝術天賦，那么從頭開始創建新的頁面布局可能會令人畏懼。您可以添加的元素和模塊太多，很難判斷從哪里開始，甚至更難實現平衡且具有視覺吸引力的布局。幸運的是，成都小程序設計可以遵循以下一些基本規則，這些規則將指導我們創建有吸引力的網頁。
如果您從頭開始，則應該添加的第一個元素是網格。網格系統為您的布局創建基線模板。它將邊距和裝訂線設置為一致的長度，并創建指定的空間來添加每段內容。這樣，您就知道要添加到此頁面的內容，并且當您繼續添加更多元素時，默認情況下它們會均勻分布。
三分法是攝影中常用的設計原則。然而，它也適用于網頁設計。
根據三分法則，您的頁面在垂直和水平方向上分為三個部分，總共有九個部分。這是一個例子。
遵循此規則，沿著網格線放置的元素看起來對您的受眾更具吸引力。為什么？因為它們間隔均勻。頁面的關鍵元素將訪問者的注意力吸引到一條網格線上，而頁面的其余部分則用負空間或空白空間來平衡。
此設置對查看者來說是正確的，可以幫助您創建將訪問者的注意力引導到頁面上最重要元素的網頁。
負空間或空白是網頁上元素之間的空間。太多的空間可能會使您的頁面看起來很小，并且查看者可能無法找到他們正在尋找的內容。負空間太少會讓您的頁面感覺混亂和局促，這可能會讓查看者不知所措，也使他們很難找到他們正在搜索的信息。
理想情況下，頁面上應該有均衡數量的負空間。頁面元素的間距應該均勻，并且訪問者應該能夠輕松找到他們正在尋找的確切內容。
與三分法則類似，賠率法則是另一種主要用于攝影的設計原則。它認為人們更喜歡看到奇數個頁面元素而不是偶數個頁面元素。
通常，大多數設計師都會采用三個元素，因為外面的兩個元素補充了中間的焦點。但您可以使用三個、五個、七個或其他數字，只要頁面仍然感覺間隔均勻并將注意力集中到中心元素即可。
不同的頁面有不同的布局是有原因的。您的主頁應該與您的個人網頁看起來不同，并且這些頁面也可能彼此不同。
原因是您應該嘗試圍繞該頁面上最重要的內容構建布局。這將創建一個層次結構，您可以遵循其余元素的層次結構，以便它們將觀眾的注意力引導回主要內容。
我毫不夸張地說，您可以從大量的布局設計中尋找靈感。以下是一些最受歡迎的設計，我們將它們分為特定類別，以便您可以查看主頁設計、單頁網站設計、登陸頁面布局等。
1.全屏照片
全屏照片布局使用圖像作為主要背景，該背景橫跨頁面長度或折疊上方。文本、導航功能和號召性用語通常覆蓋在圖像上。這會立即吸引觀眾的注意力，因為他們會在主頁最前面看到明亮、充滿活力的圖像。
2.動畫
誰不喜歡動畫？它們很有趣、引人入勝，而且——就像上面的例子一樣——有時也令人著迷。
動畫使頁面上的元素動起來。它們可以引起人們對特定元素的注意，或者只是為您的用戶創造一種交互式的、愉快的體驗。
3.全屏視頻背景
全屏視頻背景還可以為您的主頁增添一些流行感。在此示例中，用戶可以通過單擊頁面右側、左側、頂部和底部的選項卡來查看有關制作公司的不同信息。
何時使用此頁面布局：
最好的全屏視頻背景是那些看起來連續循環而不引起人們注意的背景。例如，上面示例中的定格動畫視頻似乎會無限地運行，而無需手動重新啟動視頻或觀看尷尬的電影制作剪輯，讓您從結尾回到開頭。
4.交替
交替布局平衡交替列中的文本和圖像。這使您可以用文本來補充圖像，而無需在整個頁面上重復相同的圖案。如果您想在主頁上堆積大量內容，但又不希望讀者在到達頁面底部時失去興趣，那么這是理想的選擇。
何時使用此頁面布局：
交替布局非常適合推廣博客文章。您可以將帖子的特色圖片放在文章的簡短描述旁邊。這可以讓訪問者先睹為快，了解帖子的內容及其寫作方式。
5.分屏
分屏布局將您的網站分為兩半。這是一個引人注目的布局，可以在您的主頁上創建雙色調背景。您可以在讀者滾動時保持這種劃分，或者交替使用它以保持訪問者的警惕。
分屏設計適合任何類型的網站。它們營造出現代的外觀和感覺，并且可以輕松匹配您品牌的調色板。
6.漸變
漸變布局為您的目標網頁添加混合顏色。在此示例中，左側的橙色逐漸過渡為右側的洋紅色。在中間，白色文本覆蓋背景圖像，號召性用語位于副本下方。
何時使用此頁面布局：
庫存照片很棒，但很少針對您的品牌進行定制。在庫存圖像上添加帶有公司顏色的漸變可以為您的網頁添加一些急需的個性化內容。畢竟，您希望目標網頁與網站的整體外觀相匹配。
找到完美的頁面布局需要一些時間，但等待是值得的。一旦您的網站獲得了正確的外觀和感覺，您就有更好的機會增加受眾并將更多潛在客戶轉化為客戶。成都小程序設計使用上面的想法來啟動您的搜索，并繼續測試，直到找到適合您和您的訪問者的方法。
