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