如果您缺乏藝術(shù)天賦，那么從頭開始創(chuàng)建新的頁面布局可能會令人畏懼。您可以添加的元素和模塊太多，很難判斷從哪里開始，甚至更難實現(xiàn)平衡且具有視覺吸引力的布局。幸運的是，成都小程序開發(fā)可以遵循以下一些基本規(guī)則，這些規(guī)則將指導(dǎo)我們創(chuàng)建有吸引力的網(wǎng)頁。

使用網(wǎng)格系統(tǒng)來平衡您的頁面。

如果您從頭開始，則應(yīng)該添加的第一個元素是網(wǎng)格。網(wǎng)格系統(tǒng)為您的布局創(chuàng)建基線模板。它將邊距和裝訂線設(shè)置為一致的長度，并創(chuàng)建指定的空間來添加每段內(nèi)容。這樣，您就知道要添加到此頁面的內(nèi)容，并且當(dāng)您繼續(xù)添加更多元素時，默認(rèn)情況下它們會均勻分布。

遵循“三分法則”。

三分法是攝影中常用的設(shè)計原則。然而，它也適用于網(wǎng)頁設(shè)計。

根據(jù)三分法則，您的頁面在垂直和水平方向上分為三個部分，總共有九個部分。這是一個例子。

遵循此規(guī)則，沿著網(wǎng)格線放置的元素看起來對您的受眾更具吸引力。為什么？因為它們間隔均勻。頁面的關(guān)鍵元素將訪問者的注意力吸引到一條網(wǎng)格線上，而頁面的其余部分則用負(fù)空間或空白空間來平衡。

此設(shè)置對查看者來說是正確的，可以幫助您創(chuàng)建將訪問者的注意力引導(dǎo)到頁面上最重要元素的網(wǎng)頁。

利用網(wǎng)頁上的負(fù)空間。

負(fù)空間或空白是網(wǎng)頁上元素之間的空間。太多的空間可能會使您的頁面看起來很小，并且查看者可能無法找到他們正在尋找的內(nèi)容。負(fù)空間太少會讓您的頁面感覺混亂和局促，這可能會讓查看者不知所措，也使他們很難找到他們正在搜索的信息。

理想情況下，頁面上應(yīng)該有均衡數(shù)量的負(fù)空間。頁面元素的間距應(yīng)該均勻，并且訪問者應(yīng)該能夠輕松找到他們正在尋找的確切內(nèi)容。

考慮一下“賠率規(guī)則”。

與三分法則類似，賠率法則是另一種主要用于攝影的設(shè)計原則。它認(rèn)為人們更喜歡看到奇數(shù)個頁面元素而不是偶數(shù)個頁面元素。

通常，大多數(shù)設(shè)計師都會采用三個元素，因為外面的兩個元素補(bǔ)充了中間的焦點。但您可以使用三個、五個、七個或其他數(shù)字，只要頁面仍然感覺間隔均勻并將注意力集中到中心元素即可。

為您的內(nèi)容設(shè)置層次結(jié)構(gòu)。

不同的頁面有不同的布局是有原因的。您的主頁應(yīng)該與您的個人網(wǎng)頁看起來不同，并且這些頁面也可能彼此不同。

原因是您應(yīng)該嘗試圍繞該頁面上最重要的內(nèi)容構(gòu)建布局。這將創(chuàng)建一個層次結(jié)構(gòu)，您可以遵循其余元素的層次結(jié)構(gòu)，以便它們將觀眾的注意力引導(dǎo)回主要內(nèi)容。

頁面布局設(shè)計理念

我毫不夸張地說，您可以從大量的布局設(shè)計中尋找靈感。以下是一些最受歡迎的設(shè)計，我們將它們分為特定類別，以便您可以查看主頁設(shè)計、單頁網(wǎng)站設(shè)計、登陸頁面布局等。

主頁布局設(shè)計

1.全屏照片

全屏照片布局使用圖像作為主要背景，該背景橫跨頁面長度或折疊上方。文本、導(dǎo)航功能和號召性用語通常覆蓋在圖像上。這會立即吸引觀眾的注意力，因為他們會在主頁最前面看到明亮、充滿活力的圖像。

2.動畫

誰不喜歡動畫？它們很有趣、引人入勝，而且——就像上面的例子一樣——有時也令人著迷。

動畫使頁面上的元素動起來。它們可以引起人們對特定元素的注意，或者只是為您的用戶創(chuàng)造一種交互式的、愉快的體驗。

3.全屏視頻背景

全屏視頻背景還可以為您的主頁增添一些流行感。在此示例中，用戶可以通過單擊頁面右側(cè)、左側(cè)、頂部和底部的選項卡來查看有關(guān)制作公司的不同信息。

何時使用此頁面布局：

最好的全屏視頻背景是那些看起來連續(xù)循環(huán)而不引起人們注意的背景。例如，上面示例中的定格動畫視頻似乎會無限地運行，而無需手動重新啟動視頻或觀看尷尬的電影制作剪輯，讓您從結(jié)尾回到開頭。

4.交替

交替布局平衡交替列中的文本和圖像。這使您可以用文本來補(bǔ)充圖像，而無需在整個頁面上重復(fù)相同的圖案。如果您想在主頁上堆積大量內(nèi)容，但又不希望讀者在到達(dá)頁面底部時失去興趣，那么這是理想的選擇。

何時使用此頁面布局：

交替布局非常適合推廣博客文章。您可以將帖子的特色圖片放在文章的簡短描述旁邊。這可以讓訪問者先睹為快，了解帖子的內(nèi)容及其寫作方式。

5.分屏

分屏布局將您的網(wǎng)站分為兩半。這是一個引人注目的布局，可以在您的主頁上創(chuàng)建雙色調(diào)背景。您可以在讀者滾動時保持這種劃分，或者交替使用它以保持訪問者的警惕。

何時使用此頁面布局：

分屏設(shè)計適合任何類型的網(wǎng)站。它們營造出現(xiàn)代的外觀和感覺，并且可以輕松匹配您品牌的調(diào)色板。

6.漸變

漸變布局為您的目標(biāo)網(wǎng)頁添加混合顏色。在此示例中，左側(cè)的橙色逐漸過渡為右側(cè)的洋紅色。在中間，白色文本覆蓋背景圖像，號召性用語位于副本下方。

何時使用此頁面布局：

庫存照片很棒，但很少針對您的品牌進(jìn)行定制。在庫存圖像上添加帶有公司顏色的漸變可以為您的網(wǎng)頁添加一些急需的個性化內(nèi)容。畢竟，您希望目標(biāo)網(wǎng)頁與網(wǎng)站的整體外觀相匹配。

尋找完美的頁面布局

找到完美的頁面布局需要一些時間，但等待是值得的。一旦您的網(wǎng)站獲得了正確的外觀和感覺，您就有更好的機(jī)會增加受眾并將更多潛在客戶轉(zhuǎn)化為客戶。成都小程序開發(fā)使用上面的想法來啟動您的搜索，并繼續(xù)測試，直到找到適合您和您的訪問者的方法。